5chan/src/themes.css

:root .yotsuba {
  /* board banner */
  --banner-image-border: 1px solid #800;
  --board-title-font-size: 28px;
  --board-title-font-family: Tahoma, sans-serif;
  --board-address-font-size: x-small;
  
  /* board nav */
  --boardnav-font-size: 9pt;
  --boardnav-separator-color: #b86;
  --boardnav-desktop-link-text-color: #800;
  --boardnav-desktop-link-text-color-hover: #e00;
  --boardnav-desktop-link-text-decoration: none;
  --boardnav-desktop-link-text-decoration-hover: underline;
  --boardnav-mobile-background-color: #f0e0d6;
  --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
  --boardnav-mobile-font-size: 10px;
  --boardnav-mobile-button-text-color: navy;

  /* body */
  --body-background-base-color: #ffe;
  --body-background-pattern-image: url("/public/assets/background-fade.png");
  --body-font-color: maroon;
  --body-font-family: arial, helvetica, sans-serif;
  --body-font-size: 13px;

  /* catalog post */
  --catalog-post-menu-btn-color: navy;
  --catalog-post-menu-btn-hover-color: red;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #f0e0d6;
  --challenge-modal-border: 1px solid #d9bfb7;
  --challenge-modal-title-background-color: #ea8;
  --challenge-modal-title-text-color: #800;
  --challenge-modal-title-border: 1px solid #800;
  --challenge-modal-title-font-size: 10pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #00e;
  --button-desktop-text-color-hover: red;
  --close-button-background-image: url("/public/assets/buttons/cross-red.png");

  /* horizontal rule */
  --hr-border: none;
  --hr-border-top: 1px solid #d9bfb7;
  --hr-height: 0px;

  /* homepage */
  --homepage-infobox-text-color: #000;
  --homepage-infobox-bar-text-color: #fff;
  --homepage-infobox-bar-background-color: #800;
  --homepage-box-background-color: #fff;
  --homepage-box-border-color: #800;
  --homepage-box-bar-text-color: #800;
  --homepage-box-bar-text-color-hover: #c63;
  --homepage-box-bar-background-color: #fca;
  --homepage-infobox-link-text-color: #00f;
  --homepage-infobox-link-text-decoration: underline;
  --homepage-box-link-text-color: #800;
  --homepage-box-link-text-color-hover: #e00;
  --homepage-box-link-text-decoration: none;
  --homepage-box-link-text-decoration-hover: underline;

  /* footer */
  --footer-item-background-color-desktop: #fed;

  /* links */
  --post-link-text-color: #00e;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: red;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: none;
  --post-content-link-text-decoration-hover: none;

  /* media */
  --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);

  /* mobile buttons */
  --button-font-size-mobile: 10pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #800;
  --button-background-image-mobile: url("/public/assets/buttons/button-fade.png");
  --button-background-color-mobile: #f0e0d6;
  --button-border-mobile: 1px solid #c0a69d;

  /* post capcodes */
  --post-capcode-mod-text-color: purple;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
  --post-subject-text-color: #cc1105;
  --post-subject-font-weight: 700;
  --post-name-text-color: #117743;
  --post-name-font-weight: 700;
  --post-menu-button-color: #000080;
  --post-menu-button-color-hover: red;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");

  /* post mobile */
  --post-mobile-background-color: #f5e9e1;
  --post-mobile-info-border-bottom: 1px solid #d9bfb7;
  --post-mobile-info-background-color: #ead6ca;
  --post-mobile-menu-button-color: #00e;
  --post-mobile-name-text-color: #117743;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #cc1105;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #ead6ca;
  --post-mobile-link-border-top: 1px solid #d9bfb7;
  --post-mobile-link-info-text-color: #800;
  --post-mobile-abbr-text-color: #707070;
  --post-mobile-abbr-font-size: 10pt;
  --post-mobile-file-info-text-color: #707070;
  --post-mobile-content-font-size: 11pt;

  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #ea8;
  --post-form-field-title-color: #800;
  --post-form-field-border: 1px solid #800;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-padding: 0 5px;
  --post-form-field-title-font-size: 10pt;
  --post-form-field-input-border: 1px solid #aaa;
  --post-form-field-font-family: arial, helvetica, sans-serif;
  --post-form-field-input-appearance: none;
  --post-form-field-input-outline: none;
  --post-form-field-input-focus-border: 1px solid #ea8;

  /* quotelink */
  --post-quotelink-text-color: navy;
  --post-quotelink-text-color-hover: red;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #e0bfb7;
  --reply-desktop-background-color: #f0e0d6;
  --reply-desktop-border: 1px solid #d9bfb7;

  /* reply modal */
  --reply-modal-field-input-border: 1px solid #aaa;
  --reply-modal-field-input-border-focus: 1px solid #ea8;

  /* stats */
  --stats-font-size: 11px;
}

:root .yotsuba-b {
  /* board banner */
  --banner-image-border: 1px solid #000;
  --board-title-font-size: 28px;
  --board-title-font-family: Tahoma, sans-serif;
  --board-address-font-size: x-small;
  --board-title-text-color: #af0a0f;
  --board-address-text-color: #af0a0f;

  /* board nav */
  --boardnav-font-size: 9pt;
  --boardnav-separator-color: #89a;
  --boardnav-desktop-link-text-color: #34345c;
  --boardnav-desktop-link-text-color-hover: #d00;
  --boardnav-desktop-link-text-decoration: none;
  --boardnav-desktop-link-text-decoration-hover: none;
  --boardnav-mobile-background-color: #d6daf0;
  --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
  --boardnav-mobile-font-size: 10px;
  --boardnav-mobile-button-text-color: #34345c;

  /* body */
  --body-background-base-color: #eef2ff;
  --body-background-pattern-image: url("/public/assets/background-fade-blue.png");
  --body-font-color: #000;
  --body-font-family: arial, helvetica, sans-serif;
  --body-font-size: 13px;

  /* catalog post */
  --catalog-post-menu-btn-color: navy;
  --catalog-post-menu-btn-hover-color: #d00;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #d6daf0;
  --challenge-modal-border: 1px solid #b7c5d9;
  --challenge-modal-title-background-color: #98e;
  --challenge-modal-title-text-color: #000;
  --challenge-modal-title-border: 1px solid #000;
  --challenge-modal-title-font-size: 10pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #34345c;
  --button-desktop-text-color-hover: #d00;
  --close-button-background-image: url("/public/assets/buttons/cross-blue.png");

  /* footer */
  --footer-item-background-color-desktop: #eef2ff;

  /* homepage */
  --homepage-infobox-text-color: #000;
  --homepage-infobox-bar-text-color: #000;
  --homepage-infobox-bar-background-color: #98e;
  --homepage-box-background-color: #fff;
  --homepage-box-border-color: #000;
  --homepage-box-bar-text-color: #000;
  --homepage-box-bar-text-color-hover: #fff;
  --homepage-box-bar-background-color: #98e;
  --homepage-infobox-link-text-color: #00f;
  --homepage-infobox-link-text-decoration: underline;
  --homepage-box-link-text-color: #34345c;
  --homepage-box-link-text-color-hover: #d00;
  --homepage-box-link-text-decoration: none;
  --homepage-box-link-text-decoration-hover: underline;

  /* horizontal rule */
  --hr-border: none;
  --hr-border-top: 1px solid #b7c5d9;

  /* links */
  --post-link-text-color: #34345c;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: #d00;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: none;
  --post-content-link-text-decoration-hover: none;

  /* media */
  --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);

  /* mobile buttons */
  --button-font-size-mobile: 10pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #34345c;
  --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png");
  --button-background-color-mobile: #d6daf0;
  --button-border-mobile: 1px solid #b7c5d9;

  /* post capcodes */
  --post-capcode-mod-text-color: purple;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
  --post-subject-text-color: #0f0c5d;
  --post-subject-font-weight: 700;
  --post-name-text-color: #117743;
  --post-name-font-weight: 700;
  --post-menu-button-color: #34345c;
  --post-menu-button-color-hover: #d00;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");

  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #98e;
  --post-form-field-title-color: #000;
  --post-form-field-border: 1px solid #000;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-padding: 0 5px;
  --post-form-field-title-font-size: 10pt;
  --post-form-field-input-border: 1px solid #aaa;
  --post-form-field-font-family: arial, helvetica, sans-serif;
  --post-form-field-input-appearance: none;
  --post-form-field-input-outline: none;
  --post-form-field-input-focus-border: 1px solid #98e;

  /* post mobile */
  --post-mobile-background-color: #d6daf0;
  --post-mobile-info-border-bottom: 1px solid #b7c5d9;
  --post-mobile-info-background-color: #c9cde8;
  --post-mobile-menu-button-color: #34345c;
  --post-mobile-name-text-color: #117743;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #0f0c5d;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #c9cde8;
  --post-mobile-link-border-top: 1px solid #b7c5d9;
  --post-mobile-link-info-text-color: #34345c;
  --post-mobile-abbr-text-color: #707070;
  --post-mobile-abbr-font-size: 10pt;
  --post-mobile-content-font-size: 11pt;

  /* quotelink */
  --post-quotelink-text-color: #d00;
  --post-quotelink-text-color-hover: #d00;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #b7c5d9;
  --reply-desktop-background-color: #d6daf0;
  --reply-desktop-border: 1px solid #b7c5d9;

  /* reply modal */
  --reply-modal-field-input-border: 1px solid #aaa;
  --reply-modal-field-input-border-focus: 1px solid #98e;

  /* stats */
  --stats-font-size: 11px;
}

:root .futaba {
  /* body */
  --body-background-base-color: #ffe;
  --body-background-pattern-image: none;
  --body-font-color: maroon;
  --body-font-family: times new roman, serif;
  --body-font-size: 16px;

  /* board nav */
  --boardnav-font-size: 11pt;
  --boardnav-separator-color: none;
  --boardnav-desktop-link-text-color: #00e;
  --boardnav-desktop-link-text-color-hover: red;
  --boardnav-desktop-link-text-decoration: underline;
  --boardnav-desktop-link-text-decoration-hover: underline;
  --boardnav-mobile-background-color: #f0e0d6;
  --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
  --boardnav-mobile-font-size: 10pt;
  --boardnav-mobile-button-text-color: #00f;

  /* board title */
  --board-title-font-size: 32px;
  --board-address-font-size: 10pt;

  /* catalog post */
  --catalog-post-menu-btn-color: navy;
  --catalog-post-menu-btn-hover-color: red;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #f0e0d6;
  --challenge-modal-border: 1px solid #d9bfb7;
  --challenge-modal-title-background-color: #ea8;
  --challenge-modal-title-text-color: #800;
  --challenge-modal-title-border: 1px solid #800;
  --challenge-modal-title-font-size: 12pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #00e;
  --button-desktop-text-color-hover: red;
  --button-text-decoration: underline;
  --close-button-background-image: url("/public/assets/buttons/cross-red.png");

  /* footer */
  --footer-item-background-color-desktop: #fed;

  /* links */
  --post-link-text-color: #00e;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: red;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: underline;
  --post-content-link-text-decoration-hover: underline;

  /* media */
  --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);

  /* mobile buttons */
  --button-font-size-mobile: 11pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #800;
  --button-background-image-mobile: url("/public/assets/buttons/button-fade.png");
  --button-background-color-mobile: #f0e0d6;
  --button-border-mobile: 1px solid #c0a69d;

  /* post capcodes */
  --post-capcode-mod-text-color: purple;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
  --post-subject-text-color: #cc1105;
  --post-subject-font-weight: 700;
  --post-name-text-color: #117743;
  --post-name-font-weight: 700;
  --post-menu-button-color: #000080;
  --post-menu-button-color-hover: red;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");

  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #ea8;
  --post-form-field-title-color: #800;
  --post-form-field-border: none;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-font-size: 16px;

  /* post mobile */
  --post-mobile-background-color: #f5e9e1;
  --post-mobile-info-border-bottom: 1px solid #d9bfb7;
  --post-mobile-info-background-color: #ead6ca;
  --post-mobile-menu-button-color: #00e;
  --post-mobile-name-text-color: #117743;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #cc1105;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #ead6ca;
  --post-mobile-link-border-top: 1px solid #d9bfb7;
  --post-mobile-link-info-text-color: #800;
  --post-mobile-abbr-text-color: #707070;
  --post-mobile-abbr-font-size: 12pt;
  --post-mobile-content-font-size: 13pt;

  /* quotelink */
  --post-quotelink-text-color: navy;
  --post-quotelink-text-color-hover: red;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #e0bfb7;
  --reply-desktop-background-color: #f0e0d6;
  --reply-desktop-border: 1px solid #d9bfb7;

  /* stats */
  --stats-font-size: 10pt;
}

:root .burichan {
  /* board banner */
  --banner-image-border: 1px solid #000;
  --board-title-font-size: 32px;
  --board-title-text-color: #af0a0f;
  --board-title-font-family: times new roman, serif;
  --board-address-font-size: 10pt;
  --board-address-text-color: #af0a0f;

  /* board nav */
  --boardnav-font-size: 11pt;
  --boardnav-separator-color: none;
  --boardnav-desktop-link-text-color: #34345c;
  --boardnav-desktop-link-text-color-hover: #d00;
  --boardnav-desktop-link-text-decoration: underline;
  --boardnav-desktop-link-text-decoration-hover: underline;
  --boardnav-mobile-background-color: #d6daf0;
  --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
  --boardnav-mobile-font-size: 10pt;
  --boardnav-mobile-button-text-color: #34345c;

  /* body */
  --body-background-base-color: #eef2ff;
  --body-background-pattern-image: none;
  --body-font-color: #000;
  --body-font-family: times new roman, serif;
  --body-font-size: 16px;

  /* catalog post */
  --catalog-post-menu-btn-color: navy;
  --catalog-post-menu-btn-hover-color: red;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #d6daf0;
  --challenge-modal-border: 1px solid #b7c5d9;
  --challenge-modal-title-background-color: #98e;
  --challenge-modal-title-text-color: #000;
  --challenge-modal-title-border: 1px solid #000;
  --challenge-modal-title-font-size: 12pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #34345c;
  --button-text-decoration: underline;
  --button-desktop-text-color-hover: #d00;
  --close-button-background-image: url("/public/assets/buttons/cross-blue.png");

  /* footer */
  --footer-item-background-color-desktop: #eef2ff;

  /* homepage */
  --homepage-infobox-text-color: #000;
  --homepage-infobox-bar-text-color: #000;
  --homepage-infobox-bar-background-color: #98e;
  --homepage-box-background-color: #fff;
  --homepage-box-border-color: #000;
  --homepage-box-bar-text-color: #000;
  --homepage-box-bar-background-color: #98e;
  --homepage-box-bar-text-color-hover: #fff;

  /* media */
  --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);

  /* mobile buttons */
  --button-font-size-mobile: 11pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #34345c;
  --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png");
  --button-background-color-mobile: #d6daf0;
  --button-border-mobile: 1px solid #b7c5d9;

  /* links */
  --post-link-text-color: #34345c;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: #d00;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: none;
  --post-content-link-text-decoration-hover: none;

  /* post capcodes */
  --post-capcode-mod-text-color: purple;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
  --post-subject-text-color: #0f0c5d;
  --post-subject-font-weight: 700;
  --post-name-text-color: #117743;
  --post-name-font-weight: 700;
  --post-menu-button-color: #34345c;
  --post-menu-button-color-hover: #d00;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
  
  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #98e;
  --post-form-field-title-color: #000;
  --post-form-field-border: none;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-font-size: 16px;

  /* post mobile */
  --post-mobile-background-color: #d6daf0;
  --post-mobile-info-border-bottom: 1px solid #b7c5d9;
  --post-mobile-info-background-color: #c9cde8;
  --post-mobile-menu-button-color: #34345c;
  --post-mobile-name-text-color: #117743;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #0f0c5d;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #c9cde8;
  --post-mobile-link-border-top: 1px solid #b7c5d9;
  --post-mobile-link-info-text-color: #34345c;
  --post-mobile-abbr-text-color: #707070;
  --post-mobile-abbr-font-size: 12pt;
  --post-mobile-content-font-size: 13pt;

  /* quotelink */
  --post-quotelink-text-color: #d00;
  --post-quotelink-text-color-hover: #d00;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #b7c5d9;
  --reply-desktop-background-color: #d6daf0;
  --reply-desktop-border: 1px solid #b7c5d9;

  /* stats */
  --stats-font-size: 10pt;
}

:root .tomorrow {
  /* body */
  --body-background-base-color: #1d1f21;
  --body-background-pattern-image: none;
  --body-font-color: #c5c8c6;
  --body-font-family: arial, helvetica, sans-serif;
  --body-font-size: 13px;

  /* board nav */
  --boardnav-font-size: 9pt;
  --boardnav-separator-color: #c5c8c6;
  --boardnav-desktop-link-text-color: #81a2be;
  --boardnav-desktop-link-text-color-hover: #5f89ac;
  --boardnav-desktop-link-text-decoration: none;
  --boardnav-desktop-link-text-decoration-hover: none;
  --boardnav-mobile-background-color: #1d1f21;
  --boardnav-mobile-border-bottom: 2px solid #282a2e;
  --boardnav-mobile-font-size: 10px;
  --boardnav-mobile-button-text-color: #81a2be;

  /* board title */
  --board-title-font-size: 28px;
  --board-title-font-family: Tahoma, sans-serif;
  --board-address-font-size: x-small;

  /* catalog post */
  --catalog-post-menu-btn-color: #5f89ac;
  --catalog-post-menu-btn-hover-color: #5f89ac;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #282a2e;
  --challenge-modal-border: 1px solid #111;
  --challenge-modal-title-background-color: #282a2e;
  --challenge-modal-title-text-color: #c5c8c6;
  --challenge-modal-title-border: unset;
  --challenge-modal-title-font-size: 10pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #81a2be;
  --button-desktop-text-color-hover: #5f89ac;
  --close-button-background-image: url("/public/assets/buttons/cross-dark.png");

  /* filter for inputs */
  --filter80: brightness(85%);

  /* homepage */
  --homepage-infobox-text-color: #c5c8c6;
  --homepage-infobox-bar-text-color: #c5c8c6;
  --homepage-infobox-bar-background-color: rgb(33, 35, 38);
  --homepage-box-background-color: #282a2e;
  --homepage-box-bar-background-color: rgb(33, 35, 38);
  --homepage-box-border-color: rgb(45, 47, 51);
  --homepage-box-bar-text-color: #c5c8c6;
  --homepage-box-bar-text-color-hover: #c5c8c6;

  /* horizontal rule */
  --hr-border: none;
  --hr-border-top: 1px solid #282a2e;
  --hr-height: 0px;

  /* links */
  --post-link-text-color: #81a2be;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: #5f89ac;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: none;
  --post-content-link-text-decoration-hover: none;

  /* media */
  --media-thumbnail-background-color: rgba(255, 255, 255, 0.01);

  /* mobile buttons */
  --button-font-size-mobile: 10pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #707070;
  --button-background-image-mobile: url("/public/assets/buttons/button-fade-dark.png");
  --button-background-color-mobile: #1b1c1e;
  --button-border-mobile: 1px solid #282a2e;

  /* post capcodes */
  --post-capcode-mod-text-color: #81a2be;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-dark.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
  --post-subject-text-color: #b294bb;
  --post-subject-font-weight: 700;
  --post-name-text-color: #c5c8c6;
  --post-name-font-weight: 700;
  --post-menu-button-color: #5F89AC;
  --post-menu-button-color-hover: #81a2be;
  --post-greentext-color: #b5bd68;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");

  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #282a2e;
  --post-form-field-title-color: #c5c8c6;
  --post-form-field-border: 1px solid #000;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-padding: 0 5px;
  --post-form-field-title-font-size: 10pt;
  --post-form-field-input-border: 1px solid #000;
  --post-form-field-input-focus-border: 1px solid #515151;
  --post-form-field-input-background-color: #282a2e;
  --post-form-field-input-color: #c5c8c6;
  --post-form-field-font-family: arial, helvetica, sans-serif;
  --post-form-field-input-appearance: none;
  --post-form-field-input-outline: none;

  /* post mobile */
  --post-mobile-background-color: #282A2E;
  --post-mobile-info-border-top: 1px solid #2D2F33;
  --post-mobile-info-border-bottom: 1px solid #2D2F33;
  --post-mobile-info-background-color: #212326;
  --post-mobile-info-text-color: #707070;
  --post-mobile-menu-button-color: #81A2BE;
  --post-mobile-name-text-color: #117743;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #B294BB;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #212326;
  --post-mobile-link-border-top: 1px solid #2D2F33;
  --post-mobile-link-border-bottom: 1px solid #2D2F33;
  --post-mobile-link-info-text-color: #707070;
  --post-mobile-abbr-text-color: #707070;
  --post-mobile-abbr-font-size: 10pt;
  --post-mobile-content-font-size: 11pt;

  /* quotelink */
  --post-quotelink-text-color: #5f89ac;
  --post-quotelink-text-color-hover: #81a2be;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #c5c8c6;
  --reply-desktop-background-color: #282a2e;
  --reply-desktop-border: 1px solid #282a2e;

  /* reply modal */
  --reply-modal-field-input-border: 1px solid #515151;
  --reply-modal-field-border-focus: 1px solid #757575;
  --reply-modal-field-input-border-focus: 1px solid #757575;

  /* select */
  --select-border: 1px solid #575a60;
  --select-background-color: #282a2e;
  --select-color: #c5c8c6;

  /* stats */
  --stats-font-size: 11px;
}

:root .photon {
  /* body */
  --body-background-base-color: #eee;
  --body-background-pattern-image: none;
  --body-font-color: #333;
  --body-font-family: arial, helvetica, sans-serif;
  --body-font-size: 13px;

  /* board nav */
  --boardnav-font-size: 9pt;
  --boardnav-separator-color: #333;
  --boardnav-desktop-link-text-color: #f60;
  --boardnav-desktop-link-text-color-hover: #f30;
  --boardnav-desktop-link-text-decoration: none;
  --boardnav-desktop-link-text-decoration-hover: none;
  --boardnav-mobile-background-color: #ddd;
  --boardnav-mobile-border-bottom: 2px solid #ccc;
  --boardnav-mobile-font-size: 10px;
  --boardnav-mobile-button-text-color: #f60;

  /* board title */
  --board-title-font-size: 28px;
  --board-title-font-family: Tahoma, sans-serif;
  --board-title-text-color: #004a99;
  --board-address-font-size: x-small;

  /* catalog post */
  --catalog-post-menu-btn-color: #f60;
  --catalog-post-menu-btn-hover-color: #f30;
  --catalog-post-menu-btn-opacity: 0.5;
  --catalog-post-menu-btn-hover-opacity: 1;

  /* challenge modal */
  --challenge-modal-background-color: #ddd;
  --challenge-modal-border: 1px solid #ccc;
  --challenge-modal-title-background-color: #ddd;
  --challenge-modal-title-text-color: #333;
  --challenge-modal-title-border: unset;
  --challenge-modal-title-font-size: 10pt;
  --challenge-modal-title-font-weight: 700;

  /* desktop buttons */
  --button-desktop-text-color: #f60;
  --button-desktop-text-color-hover: #f30;
  --close-button-background-image: url("/public/assets/buttons/cross-photon.png");

  /* horizontal rule */
  --hr-border: none;
  --hr-border-top: 1px solid #ddd;
  --hr-height: 0px;

  /* links */
  --post-link-text-color: #f60;
  --post-link-text-decoration: underline;
  --post-link-text-color-hover: #f30;
  --post-link-text-decoration-hover: underline;
  --post-content-link-text-decoration: none;
  --post-content-link-text-decoration-hover: none;

  /* media */
  --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);

  /* mobile buttons */
  --button-font-size-mobile: 10pt;
  --button-font-weight-mobile: 700;
  --button-text-color-mobile: #333;
  --button-background-image-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
  --button-border-mobile: 1px solid #ccc;

  /* post capcodes */
  --post-capcode-mod-text-color: #f60;

  /* post desktop */
  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-photon.png");
  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
  --post-subject-text-color: #111;
  --post-subject-font-weight: 700;
  --post-name-text-color: #004a99;
  --post-name-font-weight: 700;
  --post-menu-button-color: #FF6600;
  --post-menu-button-color-hover: #FF3300;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");

  /* post mobile */
  --post-mobile-background-color: #eee;
  --post-mobile-info-border-top: 1px solid #ccc;
  --post-mobile-info-border-bottom: 1px solid #ccc;
  --post-mobile-info-background-color: #ddd;
  --post-mobile-info-text-color: #333;
  --post-mobile-menu-button-color: #f60;
  --post-mobile-name-text-color: #004a99;
  --post-mobile-name-font-weight: 700;
  --post-mobile-subject-text-color: #111;
  --post-mobile-subject-font-weight: 700;
  --post-mobile-link-background-color: #ddd;
  --post-mobile-link-border-top: 1px solid #ccc;
  --post-mobile-link-border-bottom: 1px solid #ccc;
  --post-mobile-link-info-text-color: #333;
  --post-mobile-abbr-text-color: #333;
  --post-mobile-abbr-font-size: 10pt;
  --post-mobile-content-font-size: 11pt;

  /* post form */
  --post-form-toggle-font-size: 22px;
  --post-form-toggle-font-weight: 700;
  --post-form-field-title-background-color: #ddd;
  --post-form-field-title-color: #333;
  --post-form-field-border: 1px solid #ccc;
  --post-form-field-title-font-weight: 700;
  --post-form-field-title-padding: 0 5px;
  --post-form-field-title-font-size: 10pt;
  --post-form-field-input-border: 1px solid #aaa;
  --post-form-field-font-family: arial, helvetica, sans-serif;
  --post-form-field-input-appearance: none;
  --post-form-field-input-outline: none;
  --post-form-field-input-focus-border: 1px solid #ea8;

  /* quotelink */
  --post-quotelink-text-color: #f60;
  --post-quotelink-text-color-hover: #f30;
  --post-quotelink-text-decoration: underline;
  --post-quotelink-text-decoration-hover: underline; 

  /* reply desktop */
  --side-arrows-color: #333;
  --reply-desktop-background-color: #ddd;
  --reply-desktop-border: 1px solid #ccc;

  /* reply modal */
  --reply-modal-field-input-border: 1px solid #aaa;
  --reply-modal-field-input-border-focus: 1px solid #ea8;

  /* stats */
  --stats-font-size: 11px;
}