MediaWiki:Theme-forest.css

From Almost a Hero Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ############################################ */
/* ### TEMPORARY UNTIL I GET THE LOOK RIGHT ### */
/* ############################################ */
/*** Nelvari theme ***/

/*** General Colors ***/
:root {
  --theme-text-color           : #d3af86; /************************************* TODO */ /* main text color */
  --theme-text-color-note      : #d3af86; /************************************* TODO */ /* note text */
  --theme-text-color-highlight : #dcb893; /************************************* TODO */
  --theme-text-selection       : #7c5021a9; /*********************************** TODO */

  --theme-link-color--rgb      : 233, 172, 73; /******************************** TODO */
  --theme-link-color           : #889b4a; /************************************* TODO */
  --theme-link-color-hover     : #7e602c; /************************************* TODO */
  --theme-link-color-visited   : #889b4a; /************************************* TODO */
  --theme-link-color-redlink   : #dc3958; /************************************* TODO */

  --theme-content-background   : #251a14; /************************************* DONE */ /*** this is the bottom layer backround color ***/
  --theme-site-background      : url(https://almostahero.wiki.gg/images/3/3a/Bg.png);
  --theme-content-shadow       : rgba(10, 10, 10, 0.3) 0px 0px 15px 0px;
  --theme-background           : #251a14; /************************************* DONE */ /*** this is the content backround ***/
  --theme-highlight-background : #362712; /************************************* TODO */ /*** this is for the main page stuff ***/
  --theme-accent-color         : #2b3017; /************************************* TODO */

  --theme-icon-filter          : brightness(0) 
                                 invert(1) 
                                 brightness(2) 
                                 contrast(1); /********************************* TODO */
  --theme-cursor-color         : #d3af86; /************************************* TODO */

  --theme-table-th-background  : #404728; /************************************* TODO */
  --theme-table-th-font-color  : var(--theme-text-color);
  --theme-table-td-background  : #2b3017; /************************************* TODO */
  --theme-table-border         : #404728; /************************************* TODO */
}

/** Infobox **/
:root {
  --pi-background             : #362712; /************************************** TODO */
  --pi-secondary-background   : #241a10; /************************************** TODO */
  --pi-border-color           : #274d58; /************************************** TODO */
  --infobox-caption           : var(--theme-text-color);
  --infobox-header-bg         : #3f4b24; /************************************** TODO */
  --infobox-header-background : url("/images/5/56/Avatar_default_frame.png"); /* TODO */
}

/** Table of Contents **/
:root {
  --theme-toc-background   : #2b3017; /***************************************** TODO */
  --theme-toc-border-color : #404728; /***************************************** TODO */
  --theme-toc-color        : #dcb893; /***************************************** TODO */
  --theme-toc-color-hover  : #719190; /***************************************** TODO */
}

/** Sidebar **/
:root {
  --theme-sidebar-section-background   : #251a14; /***************************** TODO */
  --theme-sidebar-section-border-color : #5e3a1b; /***************************** TODO */
  --theme-sidebar-title-color          : #d4b290; /***************************** TODO */
  --theme-sidebar-link-color           : #f79a32; /***************************** TODO */
  --theme-sidebar-link-color-hover     : #dc3958; /***************************** TODO */
}

/* CustomTab Template Colors */
:root {
  --theme-tab-text-color      : #bf9553; /************************************** TODO */
  --theme-tab-active-border   : #bf9553; /************************************** TODO */
  --theme-tab-active-bg       : #404728; /************************************** TODO */
  --theme-tab-inactive-border : #0f0f0f; /************************************** TODO */
  --theme-tab-inactive-bg     : #2b3017; /************************************** TODO */
}

/** Dropdowns  **/
:root {
  --theme-dropdown-background   : #251a14; /************************************ TODO */
  --theme-dropdown-text         : #dcb893; /************************************ TODO */
  --theme-dropdown-border-color : #274d58; /************************************ TODO */
  --theme-dropdown-hover        : #423523; /************************************ TODO */
}

/** Head (Read, Edit, View History tabs)  **/
:root {
  --theme-header-background       : #362712; /********************************** TODO */
  --theme-header-foreground       : #c2a383; /********************************** TODO */
  --theme-header-foreground-hover : #418292; /********************************** TODO */
  --theme-header-link             : #f79a32; /********************************** TODO */
  --theme-header-selected         : #251a14; /********************************** TODO */
}

/** Used for buttons and actions - ex: "Save changes" and "OK" buttons **/
:root {
  --theme-primary-background       : #274d58; /********************************* TODO */
  --theme-primary-background-hover : #1b60a5; /********************************* TODO */
  --theme-primary-text-color       : #d4b290; /********************************* TODO */
  --theme-checkbox-background      : #51412c; /********************************* TODO */
  --theme-checkbox-border          : #a57a4c; /********************************* TODO */
  /*Filter made at: https://codepen.io/sosuke/pen/Pjoqqp*/
  --theme-checkbox-check-filter    : brightness(0) 
                                     saturate(100%) 
                                     invert(68%) 
                                     sepia(45%) 
                                     saturate(328%) 
                                     hue-rotate(75deg) 
                                     brightness(92%) 
                                     contrast(89%); /*************************** TODO */
}

/** <pre> and code **/
:root {
  --theme-code-background             : #251a14; /****************************** TODO */
  --theme-code-foreground             : #d3af86; /****************************** TODO */
  --theme-code-line-number-background : #362712; /****************************** TODO */
  --theme-code-line-number-foreground : #c2a383; /****************************** TODO */
  --theme-code-comment                : #a57a4c; /****************************** TODO */
  --theme-code-bracket-match          : #5c452dbb; /**************************** TODO */
  --theme-code-delimiter              : #d3af86; /****************************** TODO */
  --theme-code-variable               : #dc3958; /****************************** TODO */
  --theme-code-selector               : #98676a; /****************************** TODO */
  --theme-code-id                     : #8ab1b0; /****************************** TODO */
  --theme-code-keyword                : #98676a; /****************************** TODO */
  --theme-code-element                : #f06431; /****************************** TODO */
  --theme-code-constant               : #98676a; /****************************** TODO */
  --theme-code-string                 : #7e602c; /****************************** TODO */
  --theme-code-support                : #8ab1b0; /****************************** TODO */
  --theme-code-entity                 : #f06431; /****************************** TODO */
  --theme-code-number                 : #f06431; /****************************** TODO */
  --theme-code-selection              : #7c5021a9; /**************************** TODO */
  --theme-code-header-symbols         : #d3af86; /****************************** TODO */
}

/** Viewing differences between revisions **/
:root {
  /* These are borders */
  --theme-diff-added          : #7b991a; /************************************** TODO */
  --theme-diff-modified       : #3c616b; /************************************** TODO */
  --theme-diff-deleted        : #dc3958; /************************************** TODO */
  --theme-diff-context        : #423523; /************************************** TODO */

  /* These are backgrounds of modified text */
  --theme-diff-added-inline   : #6c782e88; /************************************ TODO */
  --theme-diff-deleted-inline : #7e2b1e88; /************************************ TODO */
}

/**non-color variables**/
:root {
  --layout-gap : 6px; /********************************************************* DONE */
}