www/theme_tweaker.css.php

   1 /*****************/
   2 /* THEME TWEAKER */
   3 /*****************/
   4
   5 :root {
   6     --basilisk: url('data:image/png;base64,<?php echo base64_encode(file_get_contents("assets/basilisk.png")) ?>');
   7 }
   8
   9 #theme-tweaker-ui {
  10         position: fixed;
  11         width: 100vw;
  12         height: 100vh;
  13         top: 0;
  14         left: 0;
  15         z-index: 9000;
  16         font-family: MS Sans Serif;
  17         font-size: 1rem;
  18         line-height: 1.15;
  19 }
  20 #theme-tweaker-ui::before {
  21         content: "";
  22         position: fixed;
  23         width: 100vw;
  24         height: 100vh;
  25         top: 0;
  26         left: 0;
  27         background-color: #000;
  28         opacity: 0.6;
  29 }
  30 .theme-tweaker-window {
  31         position: fixed;
  32         z-index: 1;
  33         background-color: #bfb8bf;
  34         color: #000;
  35         box-shadow:
  36                 0 -1px 0 0 #fff8ff,
  37                 -1px 0 0 0 #fff8ff,
  38                 -1px -1px 0 0 #fff8ff,
  39                 0 0 0 1px #7f787f,
  40                 0 -1px 0 1px #dfd8df,
  41                 -1px 0 0 1px #dfd8df,
  42                 -1px -1px 0 1px #dfd8df,
  43                 0 0 0 2px #030303;
  44         display: flex;
  45         flex-flow: column;
  46         align-items: stretch;
  47         justify-content: stretch;
  48         padding: 2px;
  49 }
  50
  51 .theme-tweaker-window-title-bar {
  52         height: 25px;
  53         width: 100%;
  54         display: flex;
  55         background-color: #03037f;
  56 }
  57
  58 .theme-tweaker-window-title {
  59         flex: 1 1 auto;
  60         color: #fff8ff;
  61         padding: 4px 6px 3px 30px;
  62         cursor: default;
  63         text-shadow: 1px 0 0 #fff;
  64         letter-spacing: 1px;
  65 }
  66 .theme-tweaker-window-title h1 {
  67         font-size: inherit;
  68         font-weight: normal;
  69         margin: 0;
  70 }
  71
  72 .theme-tweaker-window-title-bar-buttons-container {
  73         display: flex;
  74         align-items: center;
  75         padding: 4px;
  76 }
  77
  78 .theme-tweaker-window-title-bar-buttons-container button {
  79         width: 18px;
  80         height: 16px;
  81         background-size: 14px;
  82         background-repeat: no-repeat;
  83         background-position: center center;
  84         margin: 0 0 0 7px;
  85 }
  86
  87 .theme-tweaker-window-title-bar-buttons-container .help-button {
  88         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_help_widget.gif")) ?>');
  89 }
  90
  91 .theme-tweaker-window-title-bar-buttons-container .minimize-button.minimize {
  92         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_minimize_widget.gif")) ?>');
  93 }
  94 .theme-tweaker-window-title-bar-buttons-container .minimize-button.maximize {
  95         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_maximize_widget.gif")) ?>');
  96 }
  97
  98 .theme-tweaker-window-title-bar-buttons-container .close-button {
  99         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_close_widget.gif")) ?>');
 100         background-size: 100%;
 101         background-position: center bottom;
 102 }
 103
 104 .theme-tweaker-window-content-view {
 105         padding: 12px;
 106         height: calc(100% - 25px);
 107         display: flex;
 108         flex-flow: column;
 109 }
 110
 111 #theme-tweaker-ui .main-window {
 112         width: calc(900px - 40px);
 113         max-width: calc(100vw - 20px);
 114         max-height: calc(100vh - 160px);
 115         top: 80px;
 116         left: calc((100% - 900px) / 2 + 20px);
 117         height: 1200px;
 118 }
 119 #theme-tweaker-ui .theme-tweaker-window-title-bar {
 120         background-repeat: no-repeat;
 121         background-size: 20px;
 122         background-position: 4px 50%;
 123 }
 124 #theme-tweaker-ui .main-window .theme-tweaker-window-title-bar {
 125         background-image: url('data:image/gif;base64,R0lGODdhIAAgAOYAAAAAAAMDCwMD9AQDqwQDsgUDpAoDBAoDoqsDVKsDWq4DT7ADVrIDXf4DC/8D/QQEnAUE/qQET6QEUqQEW7AESvUEA/0EBAUFEPAFCPcF/wMImgMI/gMJBZsJWvIJBJCBmIuElH2Fj4WFlIiFfImFhoOGi4qGjI6GmpKGjoKHm5OHk4mIhoWKkoqKjIqKk4SLjIeLfY2LmX2NhYSOmoeOhoKQkQOkWKOkaqWlXaulXKSmTqSmUqqmYQqnYKmnVQWoXaWocZ+pbAiqVaOqVKSqTKmqVKyqWwOrVJ+rU6WrWrCuWcS+2Mi/wMy/082/zsrCzMrDxcLE1cXExLzFy77FxMTFzMzF1bfGwbzGvrfH18vIw7/J08HJu8PJxMPJzLTKyL3KzL7Kw73Lvs3Lyr3Mt8HM0LPRuf/2A/j38//3+fz+Cv3+9P7+BO//A/T/BPT/Cfb//vf/9///7P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAHQALAAAAAAgACAAAAf/gHSCg4SFQ0NJOTqFjI2ORXNzaZEAjpaNRnBVbA4OV0oBl4w0KS4iLjI5c11unRlsOQYgLyUutS2VjSEHBQQDDz5zb1icGVo4AATKDwO/F441vgXNQ3BSPWFsUmxURgAFAHMBcwC5jC4azb2qP0c22WBqUkMAAfXl5oUmTV5cVGBG5hxpx0YMmypJUCCjUgWLlHyEWJiJFGnHHDZCtJ0Zo4NcmR0ArMypAnGQiCUU1yCZ84WNBQxb2HgB8IINFHpzooRqZGLMnDWRcFy0QJQbGzIH2/AwsOahoxdMJDAAOseiy6IQIESxidNpoxMdiIabg0STGi9sNkAQAOGJEWQ5/0sKYoGgQYUALSKp6sLGCZusbFbgXDNFLh0FRMVSBOBjh5EdRYrswBmJy05GExJboDknDjl7+Mql9HKZUIQGmy1U2AxnTuufFGN3/iC3roUAiQGwAEpVNtUdIMoVQiD2RQQLqMP1jk2VhxsAJkzkk6AawInjyV2klD1niJsSJrxgMbdALAgZcySg3sx9Dpo1RNjMMSCltbnTm0FESpBbhGw5QCShhjAAeEGJIJltlgACCUygAHHIjUVREWs8cRE5Y+VCgWqoeaDZegDMQAUVYYDhAxtZuHERAFSEUwl1FlwQWmi5GYBPDmyEcaEBLrhIR4IAuODCCCKw4AIICd5WwlEgAOQAg3xqiEbOBKgFUAIKjcBogQGEcADADfIVSImN5bzgCABkWlkIY89NcaApKpBgyS0tyMBIkzH4R44ofDJJBABR9NjnoAAEEaRhg94pXCAAOw==');
 126 }
 127 #theme-tweaker-ui .controls-container {
 128         overflow-y: scroll;
 129         box-shadow:
 130                 0 -1px 0 0 #030303,
 131                 -1px 0 0 0 #030303,
 132                 -1px -1px 0 0 #030303,
 133                 0 0 0 1px #dfd8df,
 134                 0 -1px 0 1px #7f787f,
 135                 -1px 0 0 1px #7f787f,
 136                 -1px -1px 0 1px #7f787f,
 137                 0 0 0 2px #fff8ff;
 138         padding: 16px;
 139 }
 140
 141 #theme-tweaker-ui .main-window .theme-select {
 142         display: flex;
 143         flex-flow: row wrap;
 144         align-items: center;
 145         margin: 0 -12px 1.25em -12px;
 146         padding: 3px 12px 13px 12px;
 147         box-shadow:
 148                 0 1px 0 #7f787f,
 149                 0 2px 0 #fff8ff;
 150         cursor: default;
 151         user-select: none;
 152 }
 153 #theme-tweaker-ui .main-window .theme-select .current-theme {
 154         margin: 0;
 155         pointer-events: none;
 156 }
 157 #theme-tweaker-ui .main-window .theme-select .current-theme span {
 158         text-shadow: 1px 0 0 #000;
 159         letter-spacing: 1px;
 160 }
 161
 162 #theme-tweaker-ui .main-window .theme-select .theme-selector {
 163         margin: 0 0 0 2em;
 164 }
 165 #theme-tweaker-ui .theme-selector button {
 166         width: 26px;
 167         height: 26px;
 168         display: inline-block;
 169         padding: 1px 0 0 1px;
 170         border: 4px solid #bfb8bf;
 171         margin: 0;
 172 }
 173 #theme-tweaker-ui .theme-selector button + button {
 174         margin: 0 0 0 14px;
 175 }
 176 #theme-tweaker-ui .theme-selector button:active,
 177 #theme-tweaker-ui .theme-selector button.selected {
 178         box-shadow:
 179                 0 -1px 0 0 #030303,
 180                 -1px 0 0 0 #030303,
 181                 -1px -1px 0 0 #030303,
 182                 0 0 0 1px #dfd8df,
 183                 0 -1px 0 1px #7f787f,
 184                 -1px 0 0 1px #7f787f,
 185                 -1px -1px 0 1px #7f787f,
 186                 0 0 0 2px #fff8ff;
 187 }
 188
 189 #theme-tweaker-ui div.section {
 190         border: 1px solid #7f787f;
 191         box-shadow:
 192                 1px 1px 0 #fff8ff inset,
 193                 0 1px 0 #fff8ff,
 194                 1px 0 0 #fff8ff,
 195                 1px 1px 0 #fff8ff;
 196         padding: 15px 10px 10px 12px;
 197         position: relative;
 198         margin: 0.5em 0 0.5em 0;
 199 }
 200 #theme-tweaker-ui div.section + div.section {
 201         margin: 1.5em 0 0.5em 0;
 202 }
 203 #theme-tweaker-ui div.section::before {
 204         content: attr(data-label);
 205         position: absolute;
 206         display: block;
 207         background-color: #bfb8bf;
 208         top: -0.5em;
 209         left: 1em;
 210         padding: 0 4px;
 211 }
 212
 213 #theme-tweaker-ui #theme-tweak-section-sample-text {
 214         position: sticky;
 215         top: 8px;
 216         background-color: #bfb8bf;
 217         z-index: 1;
 218         box-shadow:
 219                 1px 1px 0 #fff8ff inset,
 220                 0 1px 0 #fff8ff,
 221                 1px 0 0 #fff8ff,
 222                 1px 1px 0 #fff8ff,
 223                 0 -24px 0 1px #bfb8bf,
 224                 0  2px 0 1px rgba(191, 184, 191, 1.0),
 225                 0  4px 0 1px rgba(191, 184, 191, 0.875),
 226                 0  6px 0 1px rgba(191, 184, 191, 0.75),
 227                 0  8px 0 1px rgba(191, 184, 191, 0.625),
 228                 0 10px 0 1px rgba(191, 184, 191, 0.5),
 229                 0 12px 0 1px rgba(191, 184, 191, 0.375),
 230                 0 14px 0 1px rgba(191, 184, 191, 0.25),
 231                 0 16px 0 1px rgba(191, 184, 191, 0.125);
 232 }
 233 #theme-tweaker-ui #theme-tweak-section-sample-text .sample-text-container {
 234         display: table;
 235         background-color: #fff8ff;
 236         box-shadow:
 237                 -1px -1px 0 #dfd8df inset,
 238                 1px 1px 0 #030303 inset,
 239                 0 -1px 0 #7f787f,
 240                 -1px 0 0 #7f787f,
 241                 -1px -1px 0 #7f787f,
 242                 0 0 0 1px #fff8ff;
 243         height: 135px;
 244         width: 260px;
 245         padding: 1px;
 246         margin: 0 auto 0.5em auto;
 247 }
 248 /* This only needs to support Webkit because Firefox doesn’t support text size adjustment anyhow. */
 249 @supports (min-width: fit-content) {
 250         #theme-tweaker-ui #theme-tweak-section-sample-text .sample-text-container {
 251                 min-width: fit-content;
 252         }
 253 }
 254 #theme-tweaker-ui #theme-tweak-section-sample-text .sample-text {
 255         display: table-cell;
 256         width: 100%;
 257         text-align: center;
 258         vertical-align: middle;
 259 }
 260
 261 #theme-tweaker-ui #theme-tweak-section-text-size-adjust {
 262         text-align: center;
 263 }
 264 #theme-tweaker-ui #theme-tweak-section-text-size-adjust button {
 265         margin: 6px 3px;
 266         padding: 0;
 267         height: 26px;
 268         width: 26px;
 269         background-repeat: no-repeat;
 270         background-position: center center;
 271         background-size: 100%;
 272 }
 273 #theme-tweaker-ui #theme-tweak-section-text-size-adjust .text-size-adjust-button.decrease {
 274         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/A_minus.gif")) ?>');
 275 }
 276 #theme-tweaker-ui #theme-tweak-section-text-size-adjust .text-size-adjust-button.default {
 277         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/A.gif")) ?>');
 278 }
 279 #theme-tweaker-ui #theme-tweak-section-text-size-adjust .text-size-adjust-button.increase {
 280         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/A_plus.gif")) ?>');
 281 }
 282 #theme-tweaker-ui #theme-tweak-section-text-size-adjust .text-size-adjust-button:disabled {
 283         cursor: default;
 284         opacity: 0.5;
 285 }
 286 /* This doesn't work in Mozilla browsers, so hide it */
 287 @-moz-document url-prefix() {
 288         #theme-tweaker-ui #theme-tweak-section-text-size-adjust {
 289                 display: none;
 290         }
 291 }
 292
 293 #theme-tweaker-ui div.section#theme-tweak-section-invert {
 294         padding: 23px 10px 15px 10px;
 295 }
 296
 297 #theme-tweaker-ui input[type='checkbox'] {
 298         height: 0;
 299         width: 0;
 300         margin: 0;
 301         opacity: 0;
 302         pointer-events: none;
 303 }
 304 #theme-tweaker-ui input[type='checkbox'] + label {
 305         position: relative;
 306         padding: 0.35em 0.25em 0.25em 1.75em;
 307         cursor: pointer;
 308         line-height: 1.2;
 309 }
 310 #theme-tweaker-ui input[type='checkbox']:focus + label {
 311         outline: 1px dotted #000;
 312 }
 313 #theme-tweaker-ui input[type='checkbox'] + label::before {
 314         content: "";
 315         width: 1rem;
 316         height: 1rem;
 317         position: absolute;
 318         left: 0.25em;
 319         top: 5px;
 320         background-color: #fff8ff;
 321         box-shadow:
 322                 -1px -1px 0 #dfd8df inset,
 323                 1px 1px 0 #030303 inset,
 324                 0 -1px 0 #7f787f,
 325                 -1px 0 0 #7f787f,
 326                 -1px -1px 0 #7f787f,
 327                 0 0 0 1px #fff8ff;
 328         cursor: pointer;
 329 }
 330 #theme-tweaker-ui input[type='checkbox']:checked + label::before {
 331         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_checkmark.gif")) ?>');
 332         background-size: 14px;
 333         background-repeat: no-repeat;
 334         background-position: center center;
 335 }
 336
 337 #theme-tweaker-ui input[type='range'] {
 338         position: relative;
 339         -webkit-appearance: none;
 340         width: 100%;
 341         height: 50px;
 342         margin: 0;
 343         padding: 0 3.5em 0 2.3em;
 344         background-color: transparent;
 345         border: none;
 346         cursor: pointer;
 347 }
 348 input[type='range']:focus {
 349         outline: 1px dotted #000;
 350 }
 351 input[type='range']::-webkit-slider-runnable-track {
 352         width: 100%;
 353         height: 4px;
 354         box-sizing: content-box;
 355         box-shadow:
 356                 -1px -1px 0 0 #fff8ff inset,
 357                 1px 1px 0 #7f787f inset,
 358                 -2px -2px 0 #dfd8df inset,
 359                 2px 2px 0 #030303 inset;
 360         border-radius: 0;
 361         border-color: #bfb8bf;
 362         border-style: solid;
 363         border-width: 23px 0 23px 0;
 364 }
 365 input[type='range']::-webkit-slider-thumb {
 366         box-shadow:
 367                 0 -1px 0 0 #fff8ff,
 368                 -1px 0 0 0 #fff8ff,
 369                 -1px -1px 0 0 #fff8ff,
 370                 0 0 0 1px #7f787f,
 371                 0 -1px 0 1px #dfd8df,
 372                 -1px 0 0 1px #dfd8df,
 373                 -1px -1px 0 1px #dfd8df,
 374                 0 0 0 2px #030303;
 375         border: none;
 376         height: 34px;
 377         width: 14px;
 378         border-radius: 0px;
 379         background: #bfb8bf;
 380         -webkit-appearance: none;
 381         margin-top: -16px;
 382 }
 383 input[type='range']::-moz-range-track {
 384         width: 100%;
 385         height: 4px;
 386         box-sizing: content-box;
 387         box-shadow:
 388                 -1px -1px 0 0 #fff8ff inset,
 389                 1px 1px 0 #7f787f inset,
 390                 -2px -2px 0 #dfd8df inset,
 391                 2px 2px 0 #030303 inset;
 392         border-radius: 0;
 393         border-color: #bfb8bf;
 394         border-style: solid;
 395         border-width: 23px 0 23px 0;
 396 }
 397 input[type='range']::-moz-range-thumb {
 398         box-shadow:
 399                 0 -1px 0 0 #fff8ff,
 400                 -1px 0 0 0 #fff8ff,
 401                 -1px -1px 0 0 #fff8ff,
 402                 0 0 0 1px #7f787f,
 403                 0 -1px 0 1px #dfd8df,
 404                 -1px 0 0 1px #dfd8df,
 405                 -1px -1px 0 1px #dfd8df,
 406                 0 0 0 2px #030303;
 407         border: 0px solid #000;
 408         height: 34px;
 409         width: 14px;
 410         border-radius: 0px;
 411         background: #bfb8bf;
 412 }
 413 input[type='range']::-ms-track {
 414         width: 100%;
 415         height: 4px;
 416         box-sizing: content-box;
 417         box-shadow:
 418                 -1px -1px 0 0 #fff8ff inset,
 419                 1px 1px 0 #7f787f inset,
 420                 -2px -2px 0 #dfd8df inset,
 421                 2px 2px 0 #030303 inset;
 422         color: transparent;
 423         border-color: #bfb8bf;
 424         border-style: solid;
 425         border-width: 23px 0 23px 0;
 426 }
 427 input[type='range']::-ms-thumb {
 428         box-shadow:
 429                 0 -1px 0 0 #fff8ff,
 430                 -1px 0 0 0 #fff8ff,
 431                 -1px -1px 0 0 #fff8ff,
 432                 0 0 0 1px #7f787f,
 433                 0 -1px 0 1px #dfd8df,
 434                 -1px 0 0 1px #dfd8df,
 435                 -1px -1px 0 1px #dfd8df,
 436                 0 0 0 2px #030303;
 437         border: none;
 438         height: 34px;
 439         width: 14px;
 440         border-radius: 0px;
 441         background: #bfb8bf;
 442 }
 443
 444 #theme-tweaker-ui input[type='range']::before,
 445 #theme-tweaker-ui input[type='range']::after {
 446         position: absolute;
 447         top: 1.05em;
 448         color: #666;
 449 }
 450 #theme-tweaker-ui #theme-tweak-control-saturate::before,
 451 #theme-tweaker-ui #theme-tweak-control-brightness::before,
 452 #theme-tweaker-ui #theme-tweak-control-contrast::before {
 453         content: "0%";
 454         left: 0.3em;
 455 }
 456 #theme-tweaker-ui #theme-tweak-control-saturate::after,
 457 #theme-tweaker-ui #theme-tweak-control-brightness::after,
 458 #theme-tweaker-ui #theme-tweak-control-contrast::after {
 459         content: "300%";
 460         right: 0.3em;
 461 }
 462 #theme-tweaker-ui #theme-tweak-control-hue-rotate::before {
 463         content: "0°";
 464         left: 0.9em;
 465 }
 466 #theme-tweaker-ui #theme-tweak-control-hue-rotate::after {
 467         content: "360°";
 468         right: 0.7em;
 469 }
 470 .theme-tweak-control-label {
 471         margin: 1em 3.45em 0 2.3em;
 472         padding: 0 2em 0 3.15em;
 473         text-align: center;
 474         position: relative;
 475         text-shadow: 1px 0 0 #000;
 476         letter-spacing: 1px;
 477 }
 478 .theme-tweak-control-label + .notch {
 479         position: absolute;
 480         box-shadow:
 481                 -0.5px -0.5px 0 #dfd8df inset,
 482                 0.5px 0.5px 0 #030303 inset,
 483                 0 -0.5px 0 #7f787f,
 484                 -1px 0 0 #7f787f,
 485                 -1px -0.5px 0 #7f787f,
 486                 0 0 0 0.5px #fff8ff;
 487         width: 1px;
 488         height: 1em;
 489         top: 4em;
 490         left: calc((100% - 5.8em) / 3 + 2.3em + 7px);
 491         cursor: pointer;
 492 }
 493 #theme-tweak-label-hue-rotate + .notch {
 494         left: calc(3.45em);
 495 }
 496 .theme-tweak-control-label + .notch::before {
 497         content: "";
 498         display: block;
 499         position: absolute;
 500         height: 100%;
 501         width: 1em;
 502         top: 0;
 503         left: -0.5em;
 504         background-color: transparent;
 505 }
 506
 507 #theme-tweaker-ui .buttons-container {
 508         text-align: right;
 509         margin: 18px 0 0 0;
 510 }
 511 #theme-tweaker-ui button {
 512         background-color: #bfb8bf;
 513         box-shadow:
 514                 0 -1px 0 0 #fff8ff,
 515                 -1px 0 0 0 #fff8ff,
 516                 -1px -1px 0 0 #fff8ff,
 517                 0 0 0 1px #7f787f,
 518                 0 -1px 0 1px #dfd8df,
 519                 -1px 0 0 1px #dfd8df,
 520                 -1px -1px 0 1px #dfd8df,
 521                 0 0 0 2px #030303;
 522 }
 523 #theme-tweaker-ui .main-theme-tweaker-window > button {
 524         margin: 0.5em 0 0 0;
 525 }
 526 #theme-tweaker-ui .controls-container button,
 527 #theme-tweaker-ui .buttons-container button,
 528 #theme-tweaker-ui .help-window button {
 529         width: 7em;
 530         padding: 7px 0 6px 0;
 531 }
 532 #theme-tweaker-ui .buttons-container button {
 533         color: inherit;
 534 }
 535 #theme-tweaker-ui .buttons-container button + button {
 536         margin-left: 1em;
 537 }
 538 #theme-tweaker-ui button.default-button {
 539         box-shadow:
 540                 0 -1px 0 0 #fff8ff,
 541                 -1px 0 0 0 #fff8ff,
 542                 -1px -1px 0 0 #fff8ff,
 543                 0 0 0 1px #7f787f,
 544                 0 -1px 0 1px #dfd8df,
 545                 -1px 0 0 1px #dfd8df,
 546                 -1px -1px 0 1px #dfd8df,
 547                 0 0 0 2px #030303,
 548                 0 0 0 3px #030303;
 549 }
 550 #theme-tweaker-ui button:hover {
 551         text-shadow: none;
 552 }
 553 #theme-tweaker-ui button:active {
 554         transform: none;
 555         box-shadow:
 556                 -1px -1px 0 #dfd8df inset,
 557                 1px 1px 0 #030303 inset,
 558                 0 -1px 0 #7f787f,
 559                 -1px 0 0 #7f787f,
 560                 -1px -1px 0 #7f787f,
 561                 0 0 0 1px #fff8ff;
 562 }
 563 #theme-tweaker-ui .buttons-container button:active {
 564         padding: 7px 0 6px 0;
 565 }
 566 #theme-tweaker-ui button:focus {
 567         outline: 1px dotted #000;
 568 }
 569
 570 #theme-tweaker-ui .buttons-container .reset-defaults-button {
 571         width: 10em;
 572         float: left;
 573 }
 574
 575 #theme-tweaker-ui .controls-container::-webkit-scrollbar {
 576         width: 20px;
 577         background-color: #bfb8bf;
 578 }
 579 #theme-tweaker-ui .controls-container::-webkit-scrollbar-track {
 580         background-color: #fff8ff;
 581         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_scrollbar_track.gif")) ?>');
 582 }
 583
 584 #theme-tweaker-ui .controls-container::-webkit-scrollbar-thumb {
 585         background-color: #bfb8bf;
 586         box-shadow:
 587                 -1px -1px 0 0 #030303 inset,
 588                 1px 1px 0 0 #dfd8df inset,
 589                 -1px -1px 0 1px #7f787f inset,
 590                 0 0 0 2px #fff8ff inset;
 591 }
 592
 593 #theme-tweaker-ui .clippy-container {
 594         position: fixed;
 595         z-index: 1;
 596         background-color: #ffa;
 597         width: 13em;
 598         left: 2em;
 599         bottom: 12em;
 600         padding: 1em;
 601         border-radius: 8px;
 602         border: 1px solid #000;
 603         cursor: default;
 604 }
 605 @media only screen and (max-width: 1305px) {
 606         #theme-tweaker-ui .clippy-container {
 607                 visibility: hidden;
 608         }
 609 }
 610 #theme-tweaker-ui .clippy-container::before {
 611         content: "";
 612         width: 0;
 613         height: 0;
 614         border-top: 42px solid #000;
 615         border-right: 42px solid transparent;
 616         position: absolute;
 617         bottom: -42px;
 618         right: 69px;
 619 }
 620 #theme-tweaker-ui .clippy-container::after {
 621         content: "";
 622         width: 0;
 623         height: 0;
 624         border-top: 40px solid #ffa;
 625         border-right: 40px solid transparent;
 626         position: absolute;
 627         bottom: -40px;
 628         right: 70px;
 629 }
 630 #theme-tweaker-ui .clippy-container:hover {
 631         opacity: 1.0;
 632 }
 633 #theme-tweaker-ui .clippy-container .hint {
 634         line-height: 1.3;
 635         color: #000;
 636 }
 637 #theme-tweaker-ui .clippy-container .hint img {
 638         vertical-align: bottom;
 639         position: relative;
 640         bottom: 2px;
 641 }
 642 #theme-tweaker-ui .clippy-container .clippy {
 643         width: 200px;
 644         height: 125px;
 645         background-image: var(--basilisk);
 646         background-size: 100%;
 647         position: absolute;
 648         bottom: -150px;
 649         left: 0;
 650 }
 651 @media only screen and (max-width: 1305px) {
 652         #theme-tweaker-ui .clippy-container .clippy {
 653                 visibility: visible;
 654                 transform: scale(0.75) translate(-50px, 60px)
 655         }
 656 }
 657 @media only screen and (max-width: 1220px) {
 658         #theme-tweaker-ui .clippy-container .clippy {
 659                 visibility: visible;
 660                 transform: scale(0.625) translate(-90px, 100px)
 661         }
 662 }
 663 @media only screen and (max-width: 1140px) {
 664         #theme-tweaker-ui .clippy-container .clippy {
 665                 visibility: visible;
 666                 transform: scale(0.5) translate(-140px, 140px)
 667         }
 668 }
 669
 670 #theme-tweaker-ui .help-window {
 671         width: 333px;
 672         background-color: #bfb8bf;
 673         position: fixed;
 674         z-index: 1;
 675         box-shadow:
 676                 0 -1px 0 0 #fff8ff,
 677                 -1px 0 0 0 #fff8ff,
 678                 -1px -1px 0 0 #fff8ff,
 679                 0 0 0 1px #7f787f,
 680                 0 -1px 0 1px #dfd8df,
 681                 -1px 0 0 1px #dfd8df,
 682                 -1px -1px 0 1px #dfd8df,
 683                 0 0 0 2px #030303;
 684         top: 200px;
 685         left: calc((100% - 300px) / 2);
 686         pointer-events: auto;
 687 }
 688 #theme-tweaker-ui .help-window .theme-tweaker-window-title-bar {
 689         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_help_icon.gif")) ?>');
 690 }
 691 #theme-tweaker-ui div.section#theme-tweak-section-clippy {
 692         padding: 23px 0 15px 10px;
 693 }
 694 #theme-tweaker-ui div.section#theme-tweak-section-clippy::before {
 695         z-index: 1;
 696 }
 697 #theme-tweaker-ui #theme-tweak-control-clippy + label::after {
 698         content: "";
 699         background-image: var(--basilisk);
 700         background-size: 75px;
 701         background-repeat: no-repeat;
 702         background-position: center right;
 703         padding: 40px 85px 0 0;
 704         position: absolute;
 705         bottom: -2px;
 706         right: -86px;
 707         transform: scaleX(-1);
 708         display: inline-block;
 709 }
 710
 711 #theme-tweaker-ui .clippy-close-button {
 712         position: absolute;
 713         top: 8px;
 714         right: 8px;
 715         width: 16px;
 716         height: 16px;
 717         border-radius: 8px;
 718         color: inherit;
 719         padding: 1px 0;
 720         background-color: transparent;
 721         box-shadow:
 722                 -1px -1px 0 #dfd8df inset,
 723                 0 -1px 0 #7f787f,
 724                 -1px 0 0 #7f787f,
 725                 -1px -1px 0 #7f787f,
 726                 0 0 0 1px #fff8ff,
 727                 0 -1px 0 0 #fff8ff,
 728                 -1px 0 0 0 #fff8ff,
 729                 -1px -1px 0 0 #fff8ff,
 730                 0 0 0 2px #7f787f,
 731                 0 -2px 0 1px #dfd8df,
 732                 -2px 0 0 1px #dfd8df,
 733                 -1px -2px 0 1px #dfd8df,
 734                 0 0 0 3px #030303;
 735 }
 736
 737 #theme-tweaker-ui .main-window.minimized {
 738         width: 320px;
 739         height: 29px;
 740         overflow: hidden;
 741         top: 20px;
 742         right: 20px;
 743         left: auto;
 744 }
 745 #theme-tweaker-ui.main-window-minimized::after {
 746         top: 27px;
 747         right: 27px;
 748 }
 749 #theme-tweaker-ui.main-window-minimized::before {
 750         opacity: 0.0;
 751         height: 0;
 752 }
 753 #theme-tweaker-ui.main-window-minimized .clippy-container {
 754         opacity: 1.0;
 755 }
 756 #theme-tweaker-ui.main-window-minimized .clippy-container .hint span {
 757         color: #c00;
 758 }
 759 #theme-tweaker-ui.main-window-minimized {
 760         height: 0;
 761 }
 762
 763 /*========*/
 764 /* MOBILE */
 765 /*========*/
 766
 767 @media only screen and (max-width: 1160px) {
 768         #theme-tweaker-ui {
 769                 z-index: 12000;
 770         }
 771         #theme-tweaker-ui::after {
 772                 top: 10px;
 773                 right: 8px;
 774         }
 775
 776         #theme-tweaker-ui .main-window {
 777                 max-width: unset;
 778                 max-height: unset;
 779                 left: 3px;
 780                 top: 3px;
 781                 width: calc(100% - 5px);
 782                 height: calc(100% - 5px)
 783         }
 784
 785         #theme-tweaker-ui .main-window .theme-select {
 786                 box-shadow: none;
 787                 margin-bottom: 0;
 788         }
 789         #theme-tweaker-ui .main-window .theme-select .theme-selector {
 790                 margin: 1em 0 0.625em 0;
 791                 white-space: nowrap;
 792         }
 793
 794         #theme-tweaker-ui .clippy-container .clippy {
 795                 transform: scale(0.375) translate(-215px, 215px);
 796         }
 797
 798         #theme-tweaker-ui .controls-container {
 799                 padding: 0.75em;
 800                 margin-right: -16px;
 801         }
 802         #theme-tweaker-ui .controls-container::-webkit-scrollbar {
 803                 width: 32px;
 804         }
 805         /*      Compensating for Firefox mobile scroll bar nonsense.
 806          */
 807         @-moz-document url-prefix() {
 808                 #theme-tweaker-ui .controls-container {
 809                         padding-right: 1.25em;
 810                 }
 811                 #theme-tweaker-ui input[type='range'] {
 812                         padding: 0 0.5em 0 0.3em;
 813                         margin: 0 2.5em 0 1.5em;
 814                         width: calc(100% - 4em);
 815                 }
 816                 .theme-tweak-control-label {
 817                         margin-right: 4.45em;
 818                 }
 819                 .theme-tweak-control-label + .notch {
 820                         left: calc((100% - 4.8em) / 3 + 1.8em + 7px);
 821                 }
 822                 #theme-tweak-label-hue-rotate + .notch {
 823                         left: calc(3em);
 824                 }
 825         }
 826
 827         #theme-tweaker-ui .main-window .buttons-container button:last-child {
 828                 margin-top: 1em;
 829         }
 830
 831         @media only screen and (max-width: 369px) {
 832                 #theme-tweaker-ui .theme-selector button {
 833                         margin: 0.5em 0.25em 0.5em 0.5em;
 834                 }
 835                 #theme-tweaker-ui .reset-defaults-button {
 836                         width: 9em;
 837                 }
 838                 #theme-tweaker-ui #theme-tweak-section-sample-text .sample-text-container {
 839                         width: 12em;
 840                 }
 841         }
 842         @media only screen and (max-width: 333px) {
 843                 #theme-tweaker-ui .theme-selector button {
 844                         margin: 0.5em 0.125em 0.5em 0.5em;
 845                 }
 846         }
 847 }