system/theme/theme-default.css

   1 @font-face {
   2         font-family: "Noto";
   3         src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
   4 }
   5
   6 body {
   7         margin: 0px;
   8         overflow: hidden;
   9         font-size: 16px;
  10         font-family: 'Noto Sans JP', sans-serif;
  11         overscroll-behavior: none;
  12         cursor: url(../cursor-1.png), auto;
  13 }
  14
  15 section {
  16         top: 30px;
  17         min-height: calc(100% - 70px);
  18 }
  19
  20 #desktop-l {
  21         text-shadow: 0px 1px 4px black;
  22 }
  23
  24 #desktop-l>.textbox {
  25         border: none;
  26         padding: 10px;
  27 }
  28
  29 header {
  30         background: -moz-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
  31         background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(204, 255, 216, 1)), color-stop(38%, rgba(212, 246, 255, 1)), color-stop(100%, rgba(255, 219, 238, 1)));
  32         background: -webkit-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
  33         background: -o-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
  34         background: -ms-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
  35         background: linear-gradient(45deg, rgba(204, 255, 216, 1) 0% rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
  36         opacity: .9;
  37 }
  38
  39 .dropdown {
  40         background: rgba(255, 255, 255, .9);
  41 }
  42
  43 .ui-slider-horizontal {
  44         background: linear-gradient(45deg, rgba(255, 135, 241, 1) 0%, rgba(117, 239, 255, 1) 50%, rgba(92, 242, 102, 1) 100%);
  45 }
  46
  47 .desktop-icon {
  48         text-shadow: 0px 1px 4px black;
  49         transition: .2s all ease;
  50 }
  51
  52 .desktop-icon:hover {
  53         background: rgba(0, 0, 0, .5);
  54         opacity: .8;
  55         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
  56 }
  57
  58 footer {
  59         background: -moz-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
  60         background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 220, 237, 1)), color-stop(50%, rgba(41, 184, 229, 1)), color-stop(100%, rgba(188, 224, 238, 1)));
  61         background: -webkit-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
  62         background: -o-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
  63         background: -ms-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
  64         background: linear-gradient(to bottom, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
  65 }
  66
  67 .footermaximize {
  68         transition: .2s all ease;
  69 }
  70
  71 .footermaximize-hidden {
  72         bottom: -39px !important;
  73 }
  74
  75 footer #launch {
  76         border-radius: 0px 20px 0px 0px;
  77         transition: .2s all ease;
  78         box-shadow: inset 0px 0px 5px 0 rgba(255, 255, 255, .8);
  79 }
  80
  81 footer #launch:hover {
  82         padding: 20px 16px;
  83 }
  84
  85 footer .task {
  86         border-top: 5px solid #303030;
  87         box-shadow: inset -200px 0px 0px 0px #e0e0e0, inset 200px 0px 0px 0px #e0e0e0;
  88         transition: .2s all ease;
  89 }
  90
  91 footer .task:nth-child(odd) {
  92         border-top: 5px solid #606060;
  93         box-shadow: inset -200px 0px 0px 0px #f0f0f0, inset 200px 0px 0px 0px #f0f0f0;
  94 }
  95
  96 footer .task:hover {
  97         box-shadow: inset 0px 0px 0px 0px #ccc, inset 0px 0px 0px 0px #ccc;
  98         border-top: 5px solid dodgerblue;
  99 }
 100
 101 footer .task:active {
 102         transition: 0s;
 103 }
 104
 105 footer .task img {
 106         float: left;
 107         height: 24px;
 108         width: 24px;
 109         margin-right: 4px;
 110 }
 111
 112 footer .t-active {
 113         background: #ffffff;
 114         color: dodgerblue;
 115         border-top: 5px solid rgb(100, 245, 100) !important;
 116 }
 117
 118 #footer-tasks:hover {
 119         text-shadow: 0px 1px 3px dodgerblue;
 120 }
 121
 122 #notifications {
 123         box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, .4);
 124         background-color: rgba(255, 255, 255, .9);
 125         backdrop-filter: blur(10px);
 126         -webkit-backdrop-filter: blur(10px);
 127 }
 128
 129 #notifications-show-history {
 130         text-shadow: 0px 1px 3px #ffffff;
 131 }
 132
 133 #notifications .notis {
 134         box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);
 135 }
 136
 137 #notifications .notis:hover {
 138         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .3);
 139 }
 140
 141 .window {
 142         box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, .5);
 143 }
 144
 145 .windowactive {
 146         animation: activeAnim 1s;
 147 }
 148
 149 .wt {
 150         background: linear-gradient(#F2F2F2 0%, #D1D1D1 100%);
 151         background: linear-gradient(45deg, rgba(194, 194, 194, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(194, 194, 194, 1) 100%);
 152 }
 153
 154 .windowactive>.wt {
 155         background: linear-gradient(45deg, rgba(255, 201, 248, 1) 0%, rgba(186, 239, 255, 1) 50%, rgba(150, 255, 157, 1) 100%);
 156 }
 157
 158 .winc {
 159         color: #3d3d3d;
 160 }
 161
 162 #task-ctx {
 163         background: rgba(255, 255, 255, .9);
 164         backdrop-filter: blur(20px);
 165 }
 166
 167 .little {
 168         font-size: 14px;
 169 }
 170
 171 #kit-power {
 172         text-align: center;
 173         background: rgba(0, 0, 0, 0.6);
 174 }
 175
 176 #kit-power a {
 177         transition: .2s all ease;
 178 }
 179
 180 #kit-power a:hover {
 181         text-decoration: none;
 182         transform: scale(1.1);
 183         text-shadow: 0px 0px 30px cyan, 0px 0px 18px cyan, 0px 0px 8px cyan;
 184 }
 185
 186 #kit-context {
 187         background: rgba(255, 255, 255, .9);
 188         backdrop-filter: blur(20px);
 189         box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3);
 190         border-radius: 0px 6px 6px 6px;
 191 }
 192
 193 #kit-context a:hover {
 194         background: rgba(30, 144, 255, .8);
 195         color: #ffffff;
 196 }
 197
 198 #last-notification {
 199         background: rgba(255, 255, 255, .9);
 200 }
 201
 202 #last-notification:hover {
 203         background: rgb(255, 255, 255);
 204 }
 205
 206 @keyframes activeAnim {
 207         from {
 208                 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .7), 0 0 0 0 rgba(50, 200, 90, 1.0);
 209         }
 210
 211         to {
 212                 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .7), 0 0 0px 25px rgba(50, 200, 90, 0);
 213         }
 214 }