/ src / themes.css
themes.css
   1  :root .yotsuba {
   2    --color-scheme: light;
   3  
   4    /* avatar */
   5    --avatar-text-color: black;
   6    
   7    /* backlink */
   8    --post-backlink-text-color: navy;
   9    --post-backlink-text-decoration: underline;
  10    --post-backlink-text-color-hover: red;
  11    --post-backlink-text-decoration-hover: underline;
  12    --reply-backlink-mobile-background-color: #ead6ca;
  13    --reply-backlink-mobile-border-top: 1px solid #d9bfb7;
  14  
  15    /* board banner */
  16    --banner-image-border: 1px solid #800;
  17    --board-title-font-size: 28px;
  18    --board-title-font-family: Tahoma, sans-serif;
  19    --board-address-font-size: x-small;
  20  
  21    /* body */
  22    --body-background-base-color: #ffe;
  23    --body-background-pattern-image: url("/public/assets/background-fade.png");
  24    --body-font-color: maroon;
  25    --body-font-family: arial, helvetica, sans-serif;
  26    --body-font-size: 10pt;
  27  
  28    /* catalog post */
  29    --catalog-post-menu-desktop-btn-color: navy;
  30    --catalog-post-menu-desktop-btn-hover-color: red;
  31    --catalog-post-menu-desktop-btn-opacity: 0.5;
  32    --catalog-post-menu-desktop-btn-hover-opacity: 1;
  33    --catalog-post-preview-background-color: #181f24;
  34    --catalog-post-preview-color: #dedede;
  35    --catalog-post-preview-subject-color: #cc1105;
  36    --catalog-post-preview-author-color: #00a550;
  37    --catalog-post-preview-last-color: #bbbfbd;
  38    --catalog-post-preview-author-capcode-color: purple;
  39  
  40    /* challenge modal */
  41    --challenge-modal-background-color: #f0e0d6;
  42    --challenge-modal-border: 1px solid #d9bfb7;
  43    --challenge-modal-title-background-color: #ea8;
  44    --challenge-modal-title-text-color: #800;
  45    --challenge-modal-title-border: 1px solid #800;
  46    --challenge-modal-title-font-size: 10pt;
  47    --challenge-modal-title-font-weight: 700;
  48  
  49    /* desktop buttons */
  50    --button-desktop-text-color: #00e;
  51    --button-desktop-text-color-hover: red;
  52    --close-button-background-image: url("/public/assets/buttons/cross-red.png");
  53  
  54    /* horizontal rule */
  55    --hr-border: none;
  56    --hr-border-top: 1px solid #d9bfb7;
  57    --hr-height: 0px;
  58  
  59    /* homepage */
  60    --homepage-infobox-text-color: #000;
  61    --homepage-infobox-bar-text-color: #fff;
  62    --homepage-infobox-bar-background-color: #800;
  63    --homepage-box-background-color: #fff;
  64    --homepage-box-border-color: #800;
  65    --homepage-box-bar-text-color: #800;
  66    --homepage-box-bar-text-color-hover: #c63;
  67    --homepage-box-bar-background-color: #fca;
  68    --homepage-infobox-link-text-color: #00f;
  69    --homepage-infobox-link-text-decoration: underline;
  70    --homepage-box-link-text-color: #800;
  71    --homepage-box-link-text-color-hover: #e00;
  72    --homepage-box-link-text-decoration: none;
  73    --homepage-box-link-text-decoration-hover: underline;
  74  
  75    /* footer */
  76    --footer-item-background-color-desktop: #fed;
  77  
  78    /* links */
  79    --post-link-text-color: #00e;
  80    --post-link-text-decoration: underline;
  81    --post-link-text-color-hover: red;
  82    --post-link-text-decoration-hover: underline;
  83    --post-content-link-text-decoration: none;
  84    --post-content-link-text-decoration-hover: none;
  85  
  86    /* media */
  87    --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
  88  
  89    /* mobile buttons */
  90    --button-font-size-mobile: 10pt;
  91    --button-font-weight-mobile: 700;
  92    --button-text-color-mobile: #800;
  93    --button-background-image-mobile: url("/public/assets/buttons/button-fade.png");
  94    --button-background-color-mobile: #f0e0d6;
  95    --button-border-mobile: 1px solid #c0a69d;
  96  
  97    /* post capcodes */
  98    --post-capcode-mod-text-color: purple;
  99  
 100    /* post desktop */
 101    --post-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
 102    --post-unhide-button-background-image: url("/public/assets/buttons/plus-red.png");
 103    --post-subject-text-color: #cc1105;
 104    --post-subject-font-weight: 700;
 105    --post-name-text-color: #117743;
 106    --post-name-font-weight: 700;
 107    --post-menu-desktop-button-color: #000080;
 108    --post-menu-desktop-btn-opacity: 0.8;
 109    --post-menu-desktop-button-color-hover: red;
 110    --post-greentext-color: #789922;
 111  
 112    /* post form */
 113    --post-form-toggle-font-size: 22px;
 114    --post-form-toggle-font-weight: 700;
 115    --post-form-field-title-background-color: #ea8;
 116    --post-form-field-title-color: #800;
 117    --post-form-field-border: 1px solid #800;
 118    --post-form-field-title-font-weight: 700;
 119    --post-form-field-title-padding: 0 5px;
 120    --post-form-field-title-font-size: 10pt;
 121    --post-form-field-input-border: 1px solid #aaa;
 122    --post-form-field-font-family: arial, helvetica, sans-serif;
 123    --post-form-field-input-appearance: none;
 124    --post-form-field-input-outline: none;
 125    --post-form-field-input-focus-border: 1px solid #ea8;
 126    --post-form-field-input-color: #000;
 127  
 128    /* post menu desktop */
 129    --post-menu-desktop-border-bottom: 2px solid #d9bfb7;
 130    --post-menu-desktop-border-right: 1px solid #d9bfb7;
 131    --post-menu-desktop-background-color: #f0e0d6;
 132    --post-menu-desktop-item-border-color: #d9bfb7;
 133    --post-menu-desktop-item-background-color: #f0e0d6;
 134    --post-menu-desktop-item-hover-background-color: #ffe;
 135  
 136    /* post menu mobile */
 137    --post-menu-mobile-background-color: #f0e0d6;
 138    --post-menu-mobile-border: 1px solid #d9bfb7;
 139    --post-menu-mobile-border-right-width: 2px;
 140    --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
 141    --post-menu-mobile-item-hover-background-color: #ffe;
 142  
 143    /* post mobile */
 144    --post-mobile-background-color: #f5e9e1;
 145    --post-mobile-info-border-bottom: 1px solid #d9bfb7;
 146    --post-mobile-info-background-color: #ead6ca;
 147    --post-mobile-menu-button-color: #00e;
 148    --post-mobile-name-text-color: #117743;
 149    --post-mobile-name-font-weight: 700;
 150    --post-mobile-subject-text-color: #cc1105;
 151    --post-mobile-subject-font-weight: 700;
 152    --post-mobile-link-background-color: #ead6ca;
 153    --post-mobile-link-border-top: 1px solid #d9bfb7;
 154    --post-mobile-link-info-text-color: #800;
 155    --post-mobile-abbr-text-color: #707070;
 156    --post-mobile-abbr-font-size: 10pt;
 157    --post-mobile-file-info-text-color: #707070;
 158    --post-mobile-content-font-size: 11pt;
 159  
 160    /* quotelink */
 161    --post-quotelink-text-color: navy;
 162    --post-quotelink-text-color-hover: red;
 163    --post-quotelink-text-decoration: underline;
 164    --post-quotelink-text-decoration-hover: underline;
 165    --quote-preview-background:  #f0e0d6;
 166    --quote-preview-border: 1px solid #d9bfb7;
 167    --quote-preview-border-right: 2px solid #d9bfb7;
 168    --quote-preview-border-bottom: 2px solid #d9bfb7;
 169  
 170    /* reply desktop */
 171    --side-arrows-color: #e0bfb7;
 172    --reply-desktop-background-color: #f0e0d6;
 173    --reply-desktop-border: 1px solid #d9bfb7;
 174  
 175    /* reply highlight */
 176    --reply-highlight-background-color: #f0c0b0;
 177    --reply-highlight-border: 1px solid #d99f91;
 178  
 179    /* reply modal */
 180    --reply-modal-field-input-border: 1px solid #aaa;
 181    --reply-modal-field-input-border-focus: 1px solid #ea8;
 182  
 183    /* settings modal */
 184    --settings-modal-font-size: 14px;
 185    --settings-modal-background-color: #f0e0d6;
 186    --settings-modal-header-border-bottom: 1px solid #d9bfb7;
 187    --settings-modal-border-top: none;
 188    --settings-modal-border-right: 1px solid #d9bfb7;
 189    --settings-modal-border-bottom: 1px solid #d9bfb7;
 190    --settings-modal-border-left: none;
 191    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
 192    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-red.png");
 193    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
 194  
 195    /* stats */
 196    --stats-font-size: 11px;
 197    
 198    /* topbar */
 199    --topbar-font-size: 9pt;
 200    --topbar-separator-color: #b86;
 201    --topbar-desktop-link-text-color: #800;
 202    --topbar-desktop-link-text-color-hover: #e00;
 203    --topbar-desktop-link-text-decoration: none;
 204    --topbar-desktop-link-text-decoration-hover: underline;
 205    --topbar-mobile-background-color: #f0e0d6;
 206    --topbar-mobile-border-bottom: 2px solid #d9c5b7;
 207    --topbar-mobile-font-size: 10px;
 208    --topbar-mobile-button-text-color: navy;
 209  }
 210  
 211  :root .yotsuba-b {
 212    --color-scheme: light;
 213    
 214    /* backlink */
 215    --post-backlink-text-color: #34345C;
 216    --post-backlink-text-decoration: underline;
 217    --post-backlink-text-color-hover: #dd0000;
 218    --post-backlink-text-decoration-hover: underline;
 219    --reply-backlink-mobile-background-color: #c9cde8;
 220    --reply-backlink-mobile-border-top: 1px solid #b7c5d9;
 221  
 222    /* board banner */
 223    --banner-image-border: 1px solid #34345c;
 224    --board-title-font-size: 28px;
 225    --board-title-font-family: Tahoma, sans-serif;
 226    --board-address-font-size: x-small;
 227    --board-title-text-color: #af0a0f;
 228    --board-address-text-color: #af0a0f;
 229  
 230    /* body */
 231    --body-background-base-color: #eef2ff;
 232    --body-background-pattern-image: url("/public/assets/background-fade-blue.png");
 233    --body-font-color: #000;
 234    --body-font-family: arial, helvetica, sans-serif;
 235    --body-font-size: 10pt;
 236  
 237    /* catalog post */
 238    --catalog-post-menu-desktop-btn-color: navy;
 239    --catalog-post-menu-desktop-btn-hover-color: #d00;
 240    --catalog-post-menu-desktop-btn-opacity: 0.5;
 241    --catalog-post-menu-desktop-btn-hover-opacity: 1;
 242    --catalog-post-preview-background-color: #181f24;
 243    --catalog-post-preview-color: #dedede;
 244    --catalog-post-preview-author-color: #00a550;
 245    --catalog-post-preview-last-color: #bbbfbd;
 246    --catalog-post-preview-author-capcode-color: purple;
 247  
 248    /* challenge modal */
 249    --challenge-modal-background-color: #d6daf0;
 250    --challenge-modal-border: 1px solid #b7c5d9;
 251    --challenge-modal-title-background-color: #98e;
 252    --challenge-modal-title-text-color: #000;
 253    --challenge-modal-title-border: 1px solid #000;
 254    --challenge-modal-title-font-size: 10pt;
 255    --challenge-modal-title-font-weight: 700;
 256  
 257    /* desktop buttons */
 258    --button-desktop-text-color: #34345c;
 259    --button-desktop-text-color-hover: #d00;
 260    --close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 261  
 262    /* footer */
 263    --footer-item-background-color-desktop: #eef2ff;
 264  
 265    /* homepage */
 266    --homepage-infobox-text-color: #000;
 267    --homepage-infobox-bar-text-color: #000;
 268    --homepage-infobox-bar-background-color: #98e;
 269    --homepage-box-background-color: #fff;
 270    --homepage-box-border-color: #000;
 271    --homepage-box-bar-text-color: #000;
 272    --homepage-box-bar-text-color-hover: #fff;
 273    --homepage-box-bar-background-color: #98e;
 274    --homepage-infobox-link-text-color: #00f;
 275    --homepage-infobox-link-text-decoration: underline;
 276    --homepage-box-link-text-color: #34345c;
 277    --homepage-box-link-text-color-hover: #d00;
 278    --homepage-box-link-text-decoration: none;
 279    --homepage-box-link-text-decoration-hover: underline;
 280  
 281    /* horizontal rule */
 282    --hr-border: none;
 283    --hr-border-top: 1px solid #b7c5d9;
 284  
 285    /* links */
 286    --post-link-text-color: #34345c;
 287    --post-link-text-decoration: underline;
 288    --post-link-text-color-hover: #d00;
 289    --post-link-text-decoration-hover: underline;
 290    --post-content-link-text-decoration: none;
 291    --post-content-link-text-decoration-hover: none;
 292  
 293    /* media */
 294    --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 295  
 296    /* mobile buttons */
 297    --button-font-size-mobile: 10pt;
 298    --button-font-weight-mobile: 700;
 299    --button-text-color-mobile: #34345c;
 300    --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png");
 301    --button-background-color-mobile: #d6daf0;
 302    --button-border-mobile: 1px solid #b7c5d9;
 303  
 304    /* post capcodes */
 305    --post-capcode-mod-text-color: purple;
 306  
 307    /* post desktop */
 308    --post-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
 309    --post-unhide-button-background-image: url("/public/assets/buttons/plus-blue.png");
 310    --post-subject-text-color: #0f0c5d;
 311    --post-subject-font-weight: 700;
 312    --post-name-text-color: #117743;
 313    --post-name-font-weight: 700;
 314    --post-menu-desktop-button-color: #34345c;
 315    --post-menu-desktop-btn-opacity: 0.8;
 316    --post-menu-desktop-button-color-hover: #d00;
 317    --post-greentext-color: #789922;
 318  
 319    /* post form */
 320    --post-form-toggle-font-size: 22px;
 321    --post-form-toggle-font-weight: 700;
 322    --post-form-field-title-background-color: #98e;
 323    --post-form-field-title-color: #000;
 324    --post-form-field-border: 1px solid #000;
 325    --post-form-field-title-font-weight: 700;
 326    --post-form-field-title-padding: 0 5px;
 327    --post-form-field-title-font-size: 10pt;
 328    --post-form-field-input-border: 1px solid #aaa;
 329    --post-form-field-font-family: arial, helvetica, sans-serif;
 330    --post-form-field-input-appearance: none;
 331    --post-form-field-input-outline: none;
 332    --post-form-field-input-focus-border: 1px solid #98e;
 333    --post-form-field-input-color: #000;
 334  
 335    /* post menu desktop */
 336    --post-menu-desktop-border-bottom: 2px solid #b7c5d9;
 337    --post-menu-desktop-border-right: 1px solid #b7c5d9;
 338    --post-menu-desktop-background-color: #d6daf0;
 339    --post-menu-desktop-item-border-color: #b7c5d9;
 340    --post-menu-desktop-item-background-color: #d6daf0;
 341    --post-menu-desktop-item-hover-background-color: #eef2ff;
 342  
 343    /* post menu mobile */
 344    --post-menu-mobile-background-color: #d6daf0;
 345    --post-menu-mobile-border: 1px solid #b7c5d9;
 346    --post-menu-mobile-border-right-width: 2px;
 347    --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
 348    --post-menu-mobile-item-hover-background-color: #eef2ff;
 349  
 350    /* post mobile */
 351    --post-mobile-background-color: #d6daf0;
 352    --post-mobile-info-border-bottom: 1px solid #b7c5d9;
 353    --post-mobile-info-background-color: #c9cde8;
 354    --post-mobile-menu-button-color: #34345c;
 355    --post-mobile-name-text-color: #117743;
 356    --post-mobile-name-font-weight: 700;
 357    --post-mobile-subject-text-color: #0f0c5d;
 358    --post-mobile-subject-font-weight: 700;
 359    --post-mobile-link-background-color: #c9cde8;
 360    --post-mobile-link-border-top: 1px solid #b7c5d9;
 361    --post-mobile-link-info-text-color: #34345c;
 362    --post-mobile-abbr-text-color: #707070;
 363    --post-mobile-file-info-text-color: #707070;
 364    --post-mobile-abbr-font-size: 10pt;
 365    --post-mobile-content-font-size: 11pt;
 366  
 367    /* quotelink */
 368    --post-quotelink-text-color: #d00;
 369    --post-quotelink-text-color-hover: #d00;
 370    --post-quotelink-text-decoration: underline;
 371    --post-quotelink-text-decoration-hover: underline;
 372    --quote-preview-background:  #d6daf0;
 373    --quote-preview-border: 1px solid #b7c5d9;
 374    --quote-preview-border-right: 2px solid #b7c5d9;
 375    --quote-preview-border-bottom: 2px solid #b7c5d9;
 376  
 377    /* reply desktop */
 378    --side-arrows-color: #b7c5d9;
 379    --reply-desktop-background-color: #d6daf0;
 380    --reply-desktop-border: 1px solid #b7c5d9;
 381  
 382    /* reply highlight */
 383    --reply-highlight-background-color: #d6bad0;
 384    --reply-highlight-border: 1px solid #ba9dbf;
 385  
 386    /* reply modal */
 387    --reply-modal-field-input-border: 1px solid #aaa;
 388    --reply-modal-field-input-border-focus: 1px solid #98e;
 389  
 390    /* settings modal */
 391    --settings-modal-font-size: 14px;
 392    --settings-modal-background-color: #d6daf0;
 393    --settings-modal-border-top: none;
 394    --settings-modal-border-right: 1px solid #b7c5d9;
 395    --settings-modal-border-bottom: 1px solid #b7c5d9;
 396    --settings-modal-border-left: none;
 397    --settings-modal-header-border-bottom: 1px solid #b7c5d9;
 398    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 399    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-blue.png");
 400    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
 401  
 402    /* stats */
 403    --stats-font-size: 11px;
 404  
 405    /* topbar */
 406    --topbar-font-size: 9pt;
 407    --topbar-separator-color: #89a;
 408    --topbar-desktop-link-text-color: #34345c;
 409    --topbar-desktop-link-text-color-hover: #d00;
 410    --topbar-desktop-link-text-decoration: none;
 411    --topbar-desktop-link-text-decoration-hover: none;
 412    --topbar-mobile-background-color: #d6daf0;
 413    --topbar-mobile-border-bottom: 2px solid #b7c5d9;
 414    --topbar-mobile-font-size: 10px;
 415    --topbar-mobile-button-text-color: #34345c;
 416  }
 417  
 418  :root .futaba {
 419    --color-scheme: light;
 420  
 421    /* avatar */
 422    --avatar-text-color: black;
 423  
 424    /* backlink */
 425    --post-backlink-text-color: navy;
 426    --post-backlink-text-decoration: underline;
 427    --post-backlink-text-color-hover: red;
 428    --post-backlink-text-decoration-hover: underline;
 429    --reply-backlink-mobile-background-color: #ead6ca;
 430    --reply-backlink-mobile-border-top: 1px solid #d9bfb7;
 431  
 432    /* body */
 433    --body-background-base-color: #ffe;
 434    --body-background-pattern-image: none;
 435    --body-font-color: maroon;
 436    --body-font-family: times new roman, serif;
 437    --body-font-size: 12pt;
 438  
 439    /* board banner */
 440    --banner-image-border: none;
 441  
 442    /* board title */
 443    --board-title-font-size: 32px;
 444    --board-address-font-size: 10pt;
 445  
 446    /* catalog post */
 447    --catalog-post-menu-desktop-btn-color: navy;
 448    --catalog-post-menu-desktop-btn-hover-color: red;
 449    --catalog-post-menu-desktop-btn-opacity: 0.5;
 450    --catalog-post-menu-desktop-btn-hover-opacity: 1;
 451    --catalog-post-preview-background-color: #181f24;
 452    --catalog-post-preview-color: #dedede;
 453    --catalog-post-preview-subject-color: #cc1105;
 454    --catalog-post-preview-author-color: #00a550;
 455    --catalog-post-preview-last-color: #bbbfbd;
 456    --catalog-post-preview-author-capcode-color: purple;
 457  
 458    /* challenge modal */
 459    --challenge-modal-background-color: #f0e0d6;
 460    --challenge-modal-border: 1px solid #d9bfb7;
 461    --challenge-modal-title-background-color: #ea8;
 462    --challenge-modal-title-text-color: #800;
 463    --challenge-modal-title-border: 1px solid #800;
 464    --challenge-modal-title-font-size: 12pt;
 465    --challenge-modal-title-font-weight: 700;
 466  
 467    /* desktop buttons */
 468    --button-desktop-text-color: #00e;
 469    --button-desktop-text-color-hover: red;
 470    --button-text-decoration: underline;
 471    --close-button-background-image: url("/public/assets/buttons/cross-red.png");
 472  
 473    /* footer */
 474    --footer-item-background-color-desktop: #fed;
 475  
 476    /* links */
 477    --post-link-text-color: #00e;
 478    --post-link-text-decoration: underline;
 479    --post-link-text-color-hover: red;
 480    --post-link-text-decoration-hover: underline;
 481    --post-content-link-text-decoration: underline;
 482    --post-content-link-text-decoration-hover: underline;
 483  
 484    /* media */
 485    --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 486  
 487    /* mobile buttons */
 488    --button-font-size-mobile: 11pt;
 489    --button-font-weight-mobile: 700;
 490    --button-text-color-mobile: #800;
 491    --button-background-image-mobile: url("/public/assets/buttons/button-fade.png");
 492    --button-background-color-mobile: #f0e0d6;
 493    --button-border-mobile: 1px solid #c0a69d;
 494  
 495    /* post capcodes */
 496    --post-capcode-mod-text-color: purple;
 497  
 498    /* post desktop */
 499    --post-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
 500    --post-unhide-button-background-image: url("/public/assets/buttons/plus-red.png");
 501    --post-subject-text-color: #cc1105;
 502    --post-subject-font-weight: 700;
 503    --post-name-text-color: #117743;
 504    --post-name-font-weight: 700;
 505    --post-menu-desktop-button-color: #000080;
 506    --post-menu-desktop-btn-opacity: 0.8;
 507    --post-menu-desktop-button-color-hover: red;
 508    --post-greentext-color: #789922;
 509  
 510    /* post form */
 511    --post-form-toggle-font-size: 22px;
 512    --post-form-toggle-font-weight: 700;
 513    --post-form-field-title-background-color: #ea8;
 514    --post-form-field-title-color: #800;
 515    --post-form-field-border: none;
 516    --post-form-field-title-font-weight: 700;
 517    --post-form-field-title-font-size: 16px;
 518    --post-form-field-input-color: #000;
 519  
 520    /* post menu desktop */
 521    --post-menu-desktop-border-bottom: 1px solid #d9bfb7;
 522    --post-menu-desktop-border-right: unset;
 523    --post-menu-desktop-background-color: #f0e0d6;
 524    --post-menu-desktop-item-border-color: #d9bfb7;
 525    --post-menu-desktop-item-background-color: #f0e0d6;
 526    --post-menu-desktop-item-hover-background-color: #ffe;
 527  
 528    /* post menu mobile */
 529    --post-menu-mobile-background-color: #f0e0d6;
 530    --post-menu-mobile-border: 1px solid #d9bfb7;
 531    --post-menu-mobile-border-right-width: 2px;
 532    --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
 533    --post-menu-mobile-item-hover-background-color: #ffe;
 534  
 535    /* post mobile */
 536    --post-mobile-background-color: #f5e9e1;
 537    --post-mobile-info-border-bottom: 1px solid #d9bfb7;
 538    --post-mobile-info-background-color: #ead6ca;
 539    --post-mobile-menu-button-color: #00e;
 540    --post-mobile-name-text-color: #117743;
 541    --post-mobile-name-font-weight: 700;
 542    --post-mobile-subject-text-color: #cc1105;
 543    --post-mobile-subject-font-weight: 700;
 544    --post-mobile-link-background-color: #ead6ca;
 545    --post-mobile-link-border-top: 1px solid #d9bfb7;
 546    --post-mobile-link-info-text-color: #800;
 547    --post-mobile-abbr-text-color: #707070;
 548    --post-mobile-file-info-text-color: #707070;
 549    --post-mobile-abbr-font-size: 12pt;
 550    --post-mobile-content-font-size: 13pt;
 551  
 552    /* quotelink */
 553    --post-quotelink-text-color: navy;
 554    --post-quotelink-text-color-hover: red;
 555    --post-quotelink-text-decoration: underline;
 556    --post-quotelink-text-decoration-hover: underline; 
 557    --quote-preview-background:  #f0e0d6;
 558    --quote-preview-border: 1px solid rgba(0,0,0,.2);
 559    --quote-preview-border-right: 2px solid rgba(0,0,0,.2);
 560    --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
 561  
 562    /* reply desktop */
 563    --reply-desktop-background-color: #f0e0d6;
 564  
 565    /* reply highlight */
 566    --reply-highlight-background-color: #f0c0b0;
 567  
 568    /* settings modal */
 569    --settings-modal-background-color: #f0e0d6;
 570    --settings-modal-border-top: 1px solid rgba(0, 0, 0, 0.20);
 571    --settings-modal-border-right: 1px solid rgba(0, 0, 0, 0.20);
 572    --settings-modal-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
 573    --settings-modal-border-left: 1px solid rgba(0, 0, 0, 0.20);
 574    --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
 575    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
 576    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-red.png");
 577    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
 578  
 579    /* stats */
 580    --stats-font-size: 10pt;
 581  
 582    /* topbar */
 583    --topbar-font-size: 11pt;
 584    --topbar-separator-color: none;
 585    --topbar-desktop-link-text-color: #00e;
 586    --topbar-desktop-link-text-color-hover: red;
 587    --topbar-desktop-link-text-decoration: underline;
 588    --topbar-desktop-link-text-decoration-hover: underline;
 589    --topbar-mobile-background-color: #f0e0d6;
 590    --topbar-mobile-border-bottom: 2px solid #d9c5b7;
 591    --topbar-mobile-font-size: 9pt;
 592    --topbar-mobile-button-text-color: #00f;
 593  }
 594  
 595  :root .burichan {
 596    --color-scheme: light;
 597    
 598    /* backlink */
 599    --post-backlink-text-color: #34345C;
 600    --post-backlink-text-decoration: underline;
 601    --post-backlink-text-color-hover: #dd0000;
 602    --post-backlink-text-decoration-hover: underline;
 603    --reply-backlink-mobile-background-color: #c9cde8;
 604    --reply-backlink-mobile-border-top: 1px solid #b7c5d9;
 605  
 606    /* board banner */
 607    --banner-image-border: none;
 608    --board-title-font-size: 32px;
 609    --board-title-text-color: #af0a0f;
 610    --board-title-font-family: times new roman, serif;
 611    --board-address-font-size: 10pt;
 612    --board-address-text-color: #af0a0f;
 613  
 614    /* body */
 615    --body-background-base-color: #eef2ff;
 616    --body-background-pattern-image: none;
 617    --body-font-color: #000;
 618    --body-font-family: times new roman, serif;
 619    --body-font-size: 12pt;
 620  
 621    /* catalog post */
 622    --catalog-post-menu-desktop-btn-color: navy;
 623    --catalog-post-menu-desktop-btn-hover-color: red;
 624    --catalog-post-menu-desktop-btn-opacity: 0.5;
 625    --catalog-post-menu-desktop-btn-hover-opacity: 1;
 626    --catalog-post-preview-background-color: #181f24;
 627    --catalog-post-preview-color: #dedede;
 628    --catalog-post-preview-author-color: #00a550;
 629    --catalog-post-preview-last-color: #bbbfbd;
 630    --catalog-post-preview-author-capcode-color: purple;
 631  
 632    /* challenge modal */
 633    --challenge-modal-background-color: #d6daf0;
 634    --challenge-modal-border: 1px solid #b7c5d9;
 635    --challenge-modal-title-background-color: #98e;
 636    --challenge-modal-title-text-color: #000;
 637    --challenge-modal-title-border: 1px solid #000;
 638    --challenge-modal-title-font-size: 12pt;
 639    --challenge-modal-title-font-weight: 700;
 640  
 641    /* desktop buttons */
 642    --button-desktop-text-color: #34345c;
 643    --button-text-decoration: underline;
 644    --button-desktop-text-color-hover: #d00;
 645    --close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 646  
 647    /* footer */
 648    --footer-item-background-color-desktop: #eef2ff;
 649  
 650    /* homepage */
 651    --homepage-infobox-text-color: #000;
 652    --homepage-infobox-bar-text-color: #000;
 653    --homepage-infobox-bar-background-color: #98e;
 654    --homepage-box-background-color: #fff;
 655    --homepage-box-border-color: #000;
 656    --homepage-box-bar-text-color: #000;
 657    --homepage-box-bar-background-color: #98e;
 658    --homepage-box-bar-text-color-hover: #fff;
 659  
 660    /* media */
 661    --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 662  
 663    /* mobile buttons */
 664    --button-font-size-mobile: 11pt;
 665    --button-font-weight-mobile: 700;
 666    --button-text-color-mobile: #34345c;
 667    --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png");
 668    --button-background-color-mobile: #d6daf0;
 669    --button-border-mobile: 1px solid #b7c5d9;
 670  
 671    /* links */
 672    --post-link-text-color: #34345c;
 673    --post-link-text-decoration: underline;
 674    --post-link-text-color-hover: #d00;
 675    --post-link-text-decoration-hover: underline;
 676    --post-content-link-text-decoration: none;
 677    --post-content-link-text-decoration-hover: none;
 678  
 679    /* post capcodes */
 680    --post-capcode-mod-text-color: purple;
 681  
 682    /* post desktop */
 683    --post-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
 684    --post-unhide-button-background-image: url("/public/assets/buttons/plus-blue.png");
 685    --post-subject-text-color: #0f0c5d;
 686    --post-subject-font-weight: 700;
 687    --post-name-text-color: #117743;
 688    --post-name-font-weight: 700;
 689    --post-menu-desktop-button-color: #34345c;
 690    --post-menu-desktop-btn-opacity: 0.8;
 691    --post-menu-desktop-button-color-hover: #d00;
 692    --post-greentext-color: #789922;
 693    
 694    /* post form */
 695    --post-form-toggle-font-size: 22px;
 696    --post-form-toggle-font-weight: 700;
 697    --post-form-field-title-background-color: #98e;
 698    --post-form-field-title-color: #000;
 699    --post-form-field-border: none;
 700    --post-form-field-title-font-weight: 700;
 701    --post-form-field-title-font-size: 16px;
 702    --post-form-field-input-color: #000;
 703  
 704    /* post menu desktop */
 705    --post-menu-desktop-border-bottom: 1px solid #b7c5d9;
 706    --post-menu-desktop-border-right: unset;
 707    --post-menu-desktop-background-color: #d6daf0;
 708    --post-menu-desktop-item-border-color: #b7c5d9;
 709    --post-menu-desktop-item-background-color: #d6daf0;
 710    --post-menu-desktop-item-hover-background-color: #eef2ff;
 711  
 712    /* post menu mobile */
 713    --post-menu-mobile-background-color: #d6daf0;
 714    --post-menu-mobile-border: 1px solid #b7c5d9;
 715    --post-menu-mobile-border-right-width: 2px;
 716    --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
 717    --post-menu-mobile-item-hover-background-color: #eef2ff;
 718  
 719    /* post mobile */
 720    --post-mobile-background-color: #d6daf0;
 721    --post-mobile-info-border-bottom: 1px solid #b7c5d9;
 722    --post-mobile-info-background-color: #c9cde8;
 723    --post-mobile-menu-button-color: #34345c;
 724    --post-mobile-name-text-color: #117743;
 725    --post-mobile-name-font-weight: 700;
 726    --post-mobile-subject-text-color: #0f0c5d;
 727    --post-mobile-subject-font-weight: 700;
 728    --post-mobile-link-background-color: #c9cde8;
 729    --post-mobile-link-border-top: 1px solid #b7c5d9;
 730    --post-mobile-link-info-text-color: #34345c;
 731    --post-mobile-abbr-text-color: #707070;
 732    --post-mobile-file-info-text-color: #707070;
 733    --post-mobile-abbr-font-size: 12pt;
 734    --post-mobile-content-font-size: 13pt;
 735  
 736    /* quotelink */
 737    --post-quotelink-text-color: #d00;
 738    --post-quotelink-text-color-hover: #d00;
 739    --post-quotelink-text-decoration: underline;
 740    --post-quotelink-text-decoration-hover: underline;
 741    --quote-preview-background:  #d6daf0;
 742    --quote-preview-border: 1px solid rgba(0,0,0,.2);
 743    --quote-preview-border-right: 2px solid rgba(0,0,0,.2);
 744    --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
 745  
 746    /* reply desktop */
 747    --reply-desktop-background-color: #d6daf0;
 748  
 749    /* reply highlight */
 750    --reply-highlight-background-color: #d6bad0;
 751  
 752    /* settings modal */
 753    --settings-modal-background-color: #d6daf0;
 754    --settings-modal-border-top: 1px solid rgba(0, 0, 0, 0.20);
 755    --settings-modal-border-right: 1px solid rgba(0, 0, 0, 0.20);
 756    --settings-modal-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
 757    --settings-modal-border-left: 1px solid rgba(0, 0, 0, 0.20);
 758    --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
 759    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 760    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-blue.png");
 761    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
 762  
 763    /* stats */
 764    --stats-font-size: 10pt;
 765  
 766    /* topbar */
 767    --topbar-font-size: 11pt;
 768    --topbar-separator-color: none;
 769    --topbar-desktop-link-text-color: #34345c;
 770    --topbar-desktop-link-text-color-hover: #d00;
 771    --topbar-desktop-link-text-decoration: underline;
 772    --topbar-desktop-link-text-decoration-hover: underline;
 773    --topbar-mobile-background-color: #d6daf0;
 774    --topbar-mobile-border-bottom: 2px solid #b7c5d9;
 775    --topbar-mobile-font-size: 9pt;
 776    --topbar-mobile-button-text-color: #34345c;
 777  }
 778  
 779  :root .tomorrow {
 780    --color-scheme: dark;
 781  
 782    /* avatar */
 783    --avatar-background-color: black;
 784    
 785    /* backlink */
 786    --post-backlink-text-color: #5f89ac;
 787    --post-backlink-text-decoration: underline;
 788    --post-backlink-text-color-hover: #81a2be;
 789    --post-backlink-text-decoration-hover: underline;
 790    --reply-backlink-mobile-background-color: #212326;
 791    --reply-backlink-mobile-border-top: 1px solid #2D2F33;
 792  
 793    /* body */
 794    --body-background-base-color: #1d1f21;
 795    --body-background-pattern-image: none;
 796    --body-font-color: #c5c8c6;
 797    --body-font-family: arial, helvetica, sans-serif;
 798    --body-font-size: 10pt;
 799  
 800    /* board banner */
 801    --banner-image-border: 1px solid #000;
 802  
 803    /* board title */
 804    --board-title-font-size: 28px;
 805    --board-title-font-family: Tahoma, sans-serif;
 806    --board-address-font-size: x-small;
 807  
 808    /* catalog post */
 809    --catalog-post-menu-desktop-btn-color: #5f89ac;
 810    --catalog-post-menu-desktop-btn-hover-color: #5f89ac;
 811    --catalog-post-menu-desktop-btn-opacity: 0.5;
 812    --catalog-post-menu-desktop-btn-hover-opacity: 1;
 813    --catalog-post-preview-background-color: #181f24;
 814    --catalog-post-preview-color: #dedede;
 815    --catalog-post-preview-subject-color: #b294bb;
 816    --catalog-post-preview-author-color: #00a550;
 817    --catalog-post-preview-last-color: #bbbfbd;
 818    --catalog-post-preview-author-capcode-color: purple;
 819  
 820    /* challenge modal */
 821    --challenge-modal-background-color: #282a2e;
 822    --challenge-modal-border: 1px solid #111;
 823    --challenge-modal-title-background-color: #282a2e;
 824    --challenge-modal-title-text-color: #c5c8c6;
 825    --challenge-modal-title-border: unset;
 826    --challenge-modal-title-font-size: 10pt;
 827    --challenge-modal-title-font-weight: 700;
 828  
 829    /* desktop buttons */
 830    --button-desktop-text-color: #81a2be;
 831    --button-desktop-text-color-hover: #5f89ac;
 832    --close-button-background-image: url("/public/assets/buttons/cross-dark.png");
 833  
 834    /* filter for inputs */
 835    --filter80: brightness(85%);
 836  
 837    /* homepage */
 838    --homepage-infobox-text-color: #c5c8c6;
 839    --homepage-infobox-bar-text-color: #c5c8c6;
 840    --homepage-infobox-bar-background-color: rgb(33, 35, 38);
 841    --homepage-box-background-color: #282a2e;
 842    --homepage-box-bar-background-color: rgb(33, 35, 38);
 843    --homepage-box-border-color: rgb(45, 47, 51);
 844    --homepage-box-bar-text-color: #c5c8c6;
 845    --homepage-box-bar-text-color-hover: #c5c8c6;
 846  
 847    /* horizontal rule */
 848    --hr-border: none;
 849    --hr-border-top: 1px solid #282a2e;
 850    --hr-height: 0px;
 851  
 852    /* links */
 853    --post-link-text-color: #81a2be;
 854    --post-link-text-decoration: underline;
 855    --post-link-text-color-hover: #5f89ac;
 856    --post-link-text-decoration-hover: underline;
 857    --post-content-link-text-decoration: none;
 858    --post-content-link-text-decoration-hover: none;
 859  
 860    /* media */
 861    --media-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 862  
 863    /* mobile buttons */
 864    --button-font-size-mobile: 10pt;
 865    --button-font-weight-mobile: 700;
 866    --button-text-color-mobile: #707070;
 867    --button-background-image-mobile: url("/public/assets/buttons/button-fade-dark.png");
 868    --button-background-color-mobile: #1b1c1e;
 869    --button-border-mobile: 1px solid #282a2e;
 870  
 871    /* post capcodes */
 872    --post-capcode-mod-text-color: #81a2be;
 873  
 874    /* post desktop */
 875    --post-hide-button-background-image: url("/public/assets/buttons/minus-dark.png");
 876    --post-unhide-button-background-image: url("/public/assets/buttons/plus-dark.png");
 877    --post-subject-text-color: #b294bb;
 878    --post-subject-font-weight: 700;
 879    --post-name-text-color: #c5c8c6;
 880    --post-name-font-weight: 700;
 881    --post-menu-desktop-button-color: #5F89AC;
 882    --post-menu-desktop-btn-opacity: 0.8;
 883    --post-menu-desktop-button-color-hover: #81a2be;
 884    --post-greentext-color: #b5bd68;
 885  
 886    /* post form */
 887    --post-form-toggle-font-size: 22px;
 888    --post-form-toggle-font-weight: 700;
 889    --post-form-field-title-background-color: #282a2e;
 890    --post-form-field-title-color: #c5c8c6;
 891    --post-form-field-border: 1px solid #000;
 892    --post-form-field-title-font-weight: 700;
 893    --post-form-field-title-padding: 0 5px;
 894    --post-form-field-title-font-size: 10pt;
 895    --post-form-field-input-border: 1px solid #000;
 896    --post-form-field-input-focus-border: 1px solid #515151;
 897    --post-form-field-input-background-color: #282a2e;
 898    --post-form-field-input-color: #c5c8c6;
 899    --post-form-field-font-family: arial, helvetica, sans-serif;
 900    --post-form-field-input-appearance: none;
 901    --post-form-field-input-outline: none;
 902  
 903    /* post menu desktop */
 904    --post-menu-desktop-border-bottom: 1px solid #000;
 905    --post-menu-desktop-border-right: unset;
 906    --post-menu-desktop-background-color: #282a2e;
 907    --post-menu-desktop-item-border-color: #000;
 908    --post-menu-desktop-item-background-color: #282a2e;
 909    --post-menu-desktop-item-hover-background-color: #1d1f21;
 910  
 911    /* post menu mobile */
 912    --post-menu-mobile-background-color: #282a2e;
 913    --post-menu-mobile-border: 1px solid #000;
 914    --post-menu-mobile-border-right-width: 2px;
 915    --post-menu-mobile-item-border-bottom: 1px solid #000;
 916    --post-menu-mobile-item-hover-background-color: #1d1f21;
 917  
 918    /* post mobile */
 919    --post-mobile-background-color: #282A2E;
 920    --post-mobile-info-border-top: 1px solid #2D2F33;
 921    --post-mobile-info-border-bottom: 1px solid #2D2F33;
 922    --post-mobile-info-background-color: #212326;
 923    --post-mobile-info-text-color: #707070;
 924    --post-mobile-menu-button-color: #81A2BE;
 925    --post-mobile-name-text-color: #117743;
 926    --post-mobile-name-font-weight: 700;
 927    --post-mobile-subject-text-color: #B294BB;
 928    --post-mobile-subject-font-weight: 700;
 929    --post-mobile-link-background-color: #212326;
 930    --post-mobile-link-border-top: 1px solid #2D2F33;
 931    --post-mobile-link-border-bottom: 1px solid #2D2F33;
 932    --post-mobile-link-info-text-color: #707070;
 933    --post-mobile-abbr-text-color: #707070;
 934    --post-mobile-file-info-text-color: #707070;
 935    --post-mobile-abbr-font-size: 10pt;
 936    --post-mobile-content-font-size: 11pt;
 937  
 938    /* quotelink */
 939    --post-quotelink-text-color: #5f89ac;
 940    --post-quotelink-text-color-hover: #81a2be;
 941    --post-quotelink-text-decoration: underline;
 942    --post-quotelink-text-decoration-hover: underline; 
 943    --quote-preview-background:  #282a2e;
 944    --quote-preview-border: 1px solid #333;
 945    --quote-preview-border-right: 1px solid #333;
 946    --quote-preview-border-bottom: 1px solid #333;
 947  
 948    /* reply desktop */
 949    --side-arrows-color: #c5c8c6;
 950    --reply-desktop-background-color: #282a2e;
 951    --reply-desktop-border: 1px solid #282a2e;
 952    --reply-desktop-border-left: 1px solid #282a2e;
 953    --reply-desktop-border-top: 1px solid #282a2e;
 954  
 955    /* reply modal */
 956    --reply-modal-field-input-border: 1px solid #515151;
 957    --reply-modal-field-border-focus: 1px solid #757575;
 958    --reply-modal-field-input-border-focus: 1px solid #757575;
 959  
 960    /* reply highlight */
 961    --reply-highlight-background-color: #1d1d21;
 962    --reply-highlight-border: 1px solid #111;
 963    --reply-highlight-border-left: 1px solid #111;
 964    --reply-highlight-border-top: 1px solid #111;
 965  
 966    /* settings modal */
 967    --settings-modal-font-size: 14px;
 968    --settings-modal-background-color: #282a2e;
 969    --settings-modal-border-top: 1px solid #111;
 970    --settings-modal-border-right: 1px solid #111;
 971    --settings-modal-border-bottom: 1px solid #111;
 972    --settings-modal-border-left: 1px solid #111;
 973    --settings-modal-header-border-bottom: 1px solid #111;
 974    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-dark.png");
 975    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-dark.png");
 976    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-dark.png");
 977  
 978    /* stats */
 979    --stats-font-size: 11px;
 980  
 981    /* topbar */
 982    --topbar-font-size: 9pt;
 983    --topbar-separator-color: #c5c8c6;
 984    --topbar-desktop-link-text-color: #81a2be;
 985    --topbar-desktop-link-text-color-hover: #5f89ac;
 986    --topbar-desktop-link-text-decoration: none;
 987    --topbar-desktop-link-text-decoration-hover: none;
 988    --topbar-mobile-background-color: #1d1f21;
 989    --topbar-mobile-border-bottom: 2px solid #282a2e;
 990    --topbar-mobile-font-size: 10px;
 991    --topbar-mobile-button-text-color: #81a2be;
 992    --topbar-mobile-button-color: #81a2be;
 993  }
 994  
 995  :root .photon {
 996    --color-scheme: light;
 997    
 998    /* backlink */
 999    --post-backlink-text-color: #f60;
1000    --post-backlink-text-decoration: underline;
1001    --post-backlink-text-color-hover: #f30;
1002    --post-backlink-text-decoration-hover: underline;
1003    --reply-backlink-mobile-background-color: #ddd;
1004    --reply-backlink-mobile-border-top: 1px solid #ccc;
1005  
1006    /* body */
1007    --body-background-base-color: #eee;
1008    --body-background-pattern-image: none;
1009    --body-font-color: #333;
1010    --body-font-family: arial, helvetica, sans-serif;
1011    --body-font-size: 10pt;
1012  
1013    /* board banner */
1014    --banner-image-border: 1px solid #000;
1015  
1016    /* board title */
1017    --board-title-font-size: 28px;
1018    --board-title-font-family: Tahoma, sans-serif;
1019    --board-title-text-color: #004a99;
1020    --board-address-font-size: x-small;
1021  
1022    /* catalog post */
1023    --catalog-post-menu-desktop-btn-color: #f60;
1024    --catalog-post-menu-desktop-btn-hover-color: #f30;
1025    --catalog-post-menu-desktop-btn-opacity: 0.5;
1026    --catalog-post-menu-desktop-btn-hover-opacity: 1;
1027    --catalog-post-preview-background-color: #181f24;
1028    --catalog-post-preview-color: #dedede;
1029    --catalog-post-preview-last-color: #bbbfbd;
1030    --catalog-post-preview-author-capcode-color: purple;
1031  
1032    /* challenge modal */
1033    --challenge-modal-background-color: #ddd;
1034    --challenge-modal-border: 1px solid #ccc;
1035    --challenge-modal-title-background-color: #ddd;
1036    --challenge-modal-title-text-color: #333;
1037    --challenge-modal-title-border: unset;
1038    --challenge-modal-title-font-size: 10pt;
1039    --challenge-modal-title-font-weight: 700;
1040  
1041    /* desktop buttons */
1042    --button-desktop-text-color: #f60;
1043    --button-desktop-text-color-hover: #f30;
1044    --close-button-background-image: url("/public/assets/buttons/cross-photon.png");
1045  
1046    /* horizontal rule */
1047    --hr-border: none;
1048    --hr-border-top: 1px solid #ddd;
1049    --hr-height: 0px;
1050  
1051    /* links */
1052    --post-link-text-color: #f60;
1053    --post-link-text-decoration: underline;
1054    --post-link-text-color-hover: #f30;
1055    --post-link-text-decoration-hover: underline;
1056    --post-content-link-text-decoration: none;
1057    --post-content-link-text-decoration-hover: none;
1058  
1059    /* media */
1060    --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
1061  
1062    /* mobile buttons */
1063    --button-font-size-mobile: 10pt;
1064    --button-font-weight-mobile: 700;
1065    --button-text-color-mobile: #333;
1066    --button-background-image-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
1067    --button-border-mobile: 1px solid #ccc;
1068  
1069    /* post capcodes */
1070    --post-capcode-mod-text-color: #f60;
1071  
1072    /* post desktop */
1073    --post-hide-button-background-image: url("/public/assets/buttons/minus-photon.png");
1074    --post-unhide-button-background-image: url("/public/assets/buttons/plus-photon.png");
1075    --post-subject-text-color: #111;
1076    --post-subject-font-weight: 700;
1077    --post-name-text-color: #004a99;
1078    --post-name-font-weight: 700;
1079    --post-menu-desktop-button-color: #FF6600;
1080    --post-menu-desktop-btn-opacity: 0.8;
1081    --post-menu-desktop-button-color-hover: #FF3300;
1082    --post-greentext-color: #789922;
1083  
1084    /* post mobile */
1085    --post-mobile-background-color: #eee;
1086    --post-mobile-info-border-top: 1px solid #ccc;
1087    --post-mobile-info-border-bottom: 1px solid #ccc;
1088    --post-mobile-info-background-color: #ddd;
1089    --post-mobile-info-text-color: #333;
1090    --post-mobile-menu-button-color: #f60;
1091    --post-mobile-name-text-color: #004a99;
1092    --post-mobile-name-font-weight: 700;
1093    --post-mobile-subject-text-color: #111;
1094    --post-mobile-subject-font-weight: 700;
1095    --post-mobile-link-background-color: #ddd;
1096    --post-mobile-link-border-top: 1px solid #ccc;
1097    --post-mobile-link-border-bottom: 1px solid #ccc;
1098    --post-mobile-link-info-text-color: #333;
1099    --post-mobile-abbr-text-color: #333;
1100    --post-mobile-file-info-text-color: #333;
1101    --post-mobile-abbr-font-size: 10pt;
1102    --post-mobile-content-font-size: 11pt;
1103  
1104    /* post form */
1105    --post-form-toggle-font-size: 22px;
1106    --post-form-toggle-font-weight: 700;
1107    --post-form-field-title-background-color: #ddd;
1108    --post-form-field-title-color: #333;
1109    --post-form-field-border: 1px solid #ccc;
1110    --post-form-field-title-font-weight: 700;
1111    --post-form-field-title-padding: 0 5px;
1112    --post-form-field-title-font-size: 10pt;
1113    --post-form-field-input-border: 1px solid #aaa;
1114    --post-form-field-font-family: arial, helvetica, sans-serif;
1115    --post-form-field-input-appearance: none;
1116    --post-form-field-input-outline: none;
1117    --post-form-field-input-focus-border: 1px solid #ea8;
1118    --post-form-field-input-color: #000;
1119  
1120    /* post menu desktop */
1121    --post-menu-desktop-border-bottom: 1px solid #ccc;
1122    --post-menu-desktop-border-right: unset;
1123    --post-menu-desktop-background-color: #ddd;
1124    --post-menu-desktop-item-border-color: #ccc;
1125    --post-menu-desktop-item-background-color: #ddd;
1126    --post-menu-desktop-item-hover-background-color: #eee;
1127  
1128    /* post menu mobile */
1129    --post-menu-mobile-background-color: #ddd;
1130    --post-menu-mobile-border: 1px solid #ccc;
1131    --post-menu-mobile-border-right-width: 2px;
1132    --post-menu-mobile-item-border-bottom: 1px solid #ccc;
1133    --post-menu-mobile-item-hover-background-color: #eee;
1134  
1135    /* quotelink */
1136    --post-quotelink-text-color: #f60;
1137    --post-quotelink-text-color-hover: #f30;
1138    --post-quotelink-text-decoration: underline;
1139    --post-quotelink-text-decoration-hover: underline; 
1140    --quote-preview-background: #ddd;
1141    --quote-preview-border: 1px solid #ccc;
1142    --quote-preview-border-right: 1px solid #ccc;
1143    --quote-preview-border-bottom: 1px solid #ccc;
1144  
1145    /* reply desktop */
1146    --side-arrows-color: #333;
1147    --reply-desktop-background-color: #ddd;
1148    --reply-desktop-border: 1px solid #ccc;
1149    --reply-desktop-border-left: 1px solid #ccc;
1150    --reply-desktop-border-top: 1px solid #ccc;
1151  
1152    /* reply highlight */
1153    --reply-highlight-background-color: #ccc;
1154    --reply-highlight-border: 1px solid #ccc;
1155    --reply-highlight-border-left: 1px solid #ccc;
1156    --reply-highlight-border-top: 1px solid #ccc;
1157  
1158    /* reply modal */
1159    --reply-modal-field-input-border: 1px solid #aaa;
1160    --reply-modal-field-input-border-focus: 1px solid #ea8;
1161  
1162    /* settings modal */
1163    --settings-modal-font-size: 14px;
1164    --settings-modal-background-color: #ddd;
1165    --settings-modal-border-top: 1px solid #ccc;
1166    --settings-modal-border-right: 1px solid #ccc;
1167    --settings-modal-border-bottom: 1px solid #ccc;
1168    --settings-modal-border-left: 1px solid #ccc;
1169    --settings-modal-header-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
1170    --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-photon.png");
1171    --settings-modal-show-button-background-image: url("/public/assets/buttons/plus-photon.png");
1172    --settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-photon.png");
1173  
1174    /* stats */
1175    --stats-font-size: 11px;
1176  
1177    /* topbar */
1178    --topbar-font-size: 9pt;
1179    --topbar-separator-color: #333;
1180    --topbar-desktop-link-text-color: #f60;
1181    --topbar-desktop-link-text-color-hover: #f30;
1182    --topbar-desktop-link-text-decoration: none;
1183    --topbar-desktop-link-text-decoration-hover: none;
1184    --topbar-mobile-background-color: #ddd;
1185    --topbar-mobile-border-bottom: 2px solid #ccc;
1186    --topbar-mobile-font-size: 10px;
1187    --topbar-mobile-button-text-color: #f60;
1188    --topbar-mobile-button-color: #f60;
1189  }