firefox/chrome/theme.as.css

   1 /*** Dark theme ***/
   2 /* inspired by https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme */
   3
   4 *|*:root {
   5     /*TODO: eventually change to use lwt/chrome/-moz colors*/
   6     --in-content-page-color: #ccc !important;
   7     --in-content-page-background: #222 !important;
   8     --in-content-text-color: #ccc !important;
   9     /* --in-content-selected-text: #fff; */
  10     --in-content-box-background: #444 !important;
  11     --in-content-box-background-odd: #3a3a3a !important;
  12     --in-content-box-background-hover: #555 !important;
  13     --in-content-box-background-active: #333 !important;
  14     --in-content-box-border-color: #777 !important;
  15     /* --in-content-item-hover: rgba(0,149,221,0.25); */
  16     --in-content-item-selected: -moz-cellhighlight !important;
  17     /* --in-content-border-highlight: #0a84ff; */
  18     /* --in-content-border-focus: #0a84ff; */
  19     --in-content-border-color: #777 !important;
  20     /* --in-content-category-outline-focus: 1px dotted #0a84ff; */
  21     --in-content-category-text: #ccc !important;
  22     --in-content-category-text-active: #c0c0c0 !important;
  23     /* --in-content-category-text-selected: #0a84ff; */
  24     /* --in-content-category-text-selected-active: #0060df; */
  25     /* --in-content-category-background-hover: rgba(12,12,13,0.1); */
  26     /* --in-content-category-background-active: rgba(12,12,13,0.15); */
  27     /* --in-content-category-background-selected-hover: rgba(12,12,13,0.15); */
  28     /* --in-content-category-background-selected-active: rgba(12,12,13,0.2); */
  29     /* --in-content-tab-color: #424f5a; */
  30     --in-content-link-color: #09f !important;
  31     --in-content-link-color-hover: #0ff !important;
  32     --in-content-link-color-active: #0070aa !important;
  33     --in-content-link-color-visited: #0050aa !important;
  34     --in-content-primary-button-background: #05a !important;
  35     --in-content-primary-button-background-hover: #0040aa !important;
  36     --in-content-primary-button-background-active: #002070 !important;
  37     --in-content-table-background: #444 !important;
  38     /* --in-content-table-border-dark-color: #d1d1d1; */
  39     /* --in-content-table-header-background: #0a84ff; */
  40 }
  41 @-moz-document url(about:debugging) {
  42     .addon-target-container {
  43         background: var(--in-content-box-background) !important;
  44     }
  45 }
  46 @-moz-document url(about:performance) {
  47     #subprocess-reports td { /*no table-background??*/
  48         background: var(--in-content-box-background) !important;
  49     }
  50 }
  51 @-moz-document url(about:plugins) {
  52     body {
  53         background-color: var(--in-content-background-color) !important;
  54     }
  55 }
  56 /*todo: RESTARTREQUIRED*/
  57
  58 /* These variable changes the scrollbars size and color.
  59  * The scrollbars-width only has 3 acceptable values:
  60  *     auto: default OS size
  61  *     thin: half the width (will be hidden in about: pages)
  62  *     none: hidden scrollbar
  63  */
  64 *|*:root {
  65     --scrollbars-width: thin;
  66     --scrollbars-thumb-color: #05a;
  67     --scrollbars-track-color: #252525;
  68     scrollbar-color: var(--scrollbars-thumb-color) var(--scrollbars-track-color) !important;
  69     scrollbar-width: var(--scrollbars-width) !important;
  70 }
  71 *|* {
  72     scrollbar-width: var(--scrollbars-width) !important;
  73 }
  74
  75 /* This should change the "not found" page image colors */
  76 .illustrated #errorPageContainer:not(.button-container),
  77 #lic-info .license-header:not(a) {
  78     filter: invert(95%) hue-rotate(200deg)
  79 }
  80 @-moz-document url(about:devtools) {
  81     .left-pane {
  82         filter: invert(95%) hue-rotate(200deg)
  83     }
  84 }
  85 /* This fixes the inverted colors caused by the image filter */
  86 .illustrated #errorPageContainer .button-container,
  87 .illustrated #errorPageContainer #text-container,
  88 #lic-info .license-header p,
  89 #lic-info .license-header h1 {
  90     filter: invert(95%) hue-rotate(-200deg)
  91 }
  92
  93 /* View source */
  94 @-moz-document url-prefix(view-source:){
  95 html {
  96     background: #222 !important;
  97     color: #ccc !important}
  98
  99     .attribute-name {color: #093 !important}
 100     .start-tag, .end-tag {color: #f93 !important}
 101     .attribute-value {color: #09f !important}
 102 }