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