nightshift.css

   1 /* original:
   2    | NIGHTSHIFT - eye care:                  |
   3    | A darkening style for all websites.     |
   4    | by vetinari - 2009                      |
   5    | contact: vetinari.userstyles@inode.at   |
   6    | --------------------------------------- |
   7    | last modified: 13.06.2012               |
   8    |_________________________________________|
   9
  10 edited by ds6
  11 changes:
  12   - colors ported to variables, solarized theme added
  13   - lightbox image fix
  14   - youtube support
  15   - compatibility with vTabs Chrome extension (not tested recently)
  16   - fixed some nested elements being miscolored
  17   - fixed some images and icons being removed when they shouldn't
  18         (note: it's still pretty aggressive)
  19   - added bootstrap btn support
  20   - fixed and modified themed inputs, other rules overwrote them
  21   - fixed pre, code, cite styles, they were also overwritten
  22   - added google search fixes
  23   - fixed striped tables and simplified detection for better coloring
  24 */
  25
  26 /* uncomment for firefox userStyle.css and some webkit implementations * /
  27 @-moz-document url-prefix(http://), url-prefix(https://), url-prefix(ftp://), url-prefix(file://), url-prefix(luakit:) {
  28 /* */
  29
  30 /* set up colors */
  31 :root {
  32     /* solarized colors, changed values have commented originals above them
  33        S_base3 and all colors except yellow, orange, and violet are not used */
  34   /*--S_base03:     #002b36;*/
  35     --S_base03:     #000a0d;
  36     --S_base02:     #073642;
  37     --S_base01:     #586e75;
  38     --S_base00:     #657b83;
  39     --S_base0:      #839496;
  40     --S_base1:      #93a1a1;
  41     --S_base2:      #eee8d5;
  42     --S_base3:      #fdf6e3;
  43
  44     --S_yellow:     #b58900;
  45     --S_orange:     #cb4b16;
  46     --S_red:        #dc322f;
  47     --S_magenta:    #d33682;
  48     --S_violet:     #6c71c4;
  49     --S_blue:       #268bd2;
  50     --S_cyan:       #2aa198;
  51   /*--S_green:      #859900;*/
  52     --S_green:      #85c000;
  53
  54     /* these colors are similar to the original NightShift * /
  55     --S_base03:     #111;
  56     --S_base02:     #383838;
  57     --S_base01:     #666;
  58     --S_base00:     #60666a;
  59     --S_base0:      #c0c0c0;
  60     --S_base1:      #a98;
  61     --S_base2:      #ccc;
  62
  63     --S_yellow:     #B6AA7B;
  64     --S_orange:     #EC8;
  65     --S_violet:     #75A;
  66     /* */
  67
  68     /* background colors for elem depth, a subset of my base03 to base02 */
  69     --S_base02_2:   #02151a;
  70     --S_base02_1:   #042028;
  71     --S_base02_0:   #052b35;
  72     /* */
  73
  74     /* and for original NightShift * /
  75     --S_base02_2:   #222;
  76     --S_base02_1:   #282828;
  77     --S_base02_0:   #333;
  78     /* */
  79
  80     /* changeable colors */
  81     --ns_link:      var(--S_yellow);
  82     --ns_visited:   var(--S_violet);
  83     --ns_linkhover: var(--S_orange);
  84     --ns_btnshine:  #404040;
  85 }
  86
  87 /* globally set default colors and remove shadows */
  88 body,
  89 /* fix: google
  90    XXX: overrides some element colors we set later, eg headers
  91         removing this fix also allows some site styles to override ours */
  92 body * { /* :not([class="mn-dwn-arw"]) { /* */
  93     color: var(--S_base0) !important;
  94     border-color: var(--S_base00) !important;
  95     box-shadow: none !important;
  96 }
  97
  98 /* tiered background color for depth */
  99 html,
 100 body,
 101 body>*:empty {
 102     background-color: var(--S_base03) !important;
 103 }
 104 body>*:not(:empty),
 105 body>*>*:not(:empty)
 106 {
 107     background-color: var(--S_base02_2) !important;
 108 }
 109 body>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
 110 body>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
 111 /* fix: google */
 112 body>#searchform>div.sfbg.nojsv * {
 113     background-color: var(--S_base02_1) !important;
 114 }
 115 body>*>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark) {
 116     background-color: var(--S_base02_0) !important;
 117 }
 118 /* note: checking ':empty' overrides some other options, at least on webkit
 119          it doesn't seem to impact much so I decided to leave it out */
 120 body>*>*>*>*>* *:not(b):not(i):not(u):not(strong):not(em):not(mark) {
 121     background-color: var(--S_base02) !important;
 122 }
 123 /* striped tables */
 124 body table:not(:empty) {
 125     background-color: var(--S_base02_1) !important;
 126 }
 127 body table>tbody>tr>th {
 128     background-color: rgba(0, 0, 0, 0.5) !important;
 129 }
 130 body table>tbody>tr:nth-child(even)>td:not([rowspan]) {
 131     background-color: rgba(0, 0, 0, 0.25) !important;
 132 }
 133 body table>tbody>tr>td[rowspan] {
 134     background-color: rgba(0, 0, 0, 0.1) !important;
 135 }
 136
 137 /* remove backgrounds from headers */
 138 body h1,
 139 body h1 *,
 140 body h2,
 141 body h2 *,
 142 body h3,
 143 body h3 *,
 144 body h4,
 145 body h4 *,
 146 body h5,
 147 body h5 *,
 148 body h6,
 149 body h6 * {
 150     background: transparent none !important;
 151 }
 152 /* remove background images from non-interactable and non-image elements
 153    fix: youtube */
 154 *:not(:empty):not([onclick]):not(a):not(input):not(textarea):not(select):not(button):not(img):not(pre):not(code):not(cite):not(.ytp-menuitem-content) {
 155     background-image: none !important;
 156     text-indent: 0 !important;
 157 }
 158
 159 /* colored headers and important text */
 160 body h1,
 161 body h1 *,
 162 body h2,
 163 body h2 *,
 164 body h3,
 165 body h3 *,
 166 body h4,
 167 body h4 *,
 168 body b,
 169 body i,
 170 body u,
 171 body strong,
 172 body em,
 173 body mark {
 174     color: var(--S_base2) !important;
 175 }
 176
 177 /* styled horizontal rules */
 178 body hr {
 179     background: var(--S_base01) none !important;
 180     color: var(--S_base01) !important;
 181     border: 1px solid var(--S_base01) !important;
 182     height: 1px !important;
 183     overflow: hidden !important;
 184     display: block !important;
 185 }
 186
 187 /* style links */
 188 body a:not([role="button"]),
 189 body a:not([role="button"]) *:not(button),
 190 body *[onclick]:not(input):not(button) {
 191     color: var(--ns_link) !important;
 192 }
 193 body a:not([role="button"]):visited,
 194 body a:not([role="button"]):visited *:not(input):not(button) {
 195     color: var(--ns_visited) !important;
 196 }
 197 body a:not([role="button"]):hover,
 198 body a:not([role="button"]):hover *:not(input):not(button),
 199 body *[onclick]:not(input):not(button):hover {
 200     color: var(--ns_linkhover) !important;
 201     text-decoration: underline !important;
 202 }
 203
 204 /* transparent images */
 205 body a:has(img) {
 206     background-color: transparent;
 207 }
 208 body * img,
 209 body input[type="image"],
 210 body *[onclick]:empty:not(input):not(button),
 211 body a:empty,
 212 body span:empty {
 213     opacity: 0.5 !important;
 214 }
 215 body * img:hover,
 216 body a:hover img,
 217 body input[type="image"]:hover,
 218 body *[onclick]:empty:not(input):not(button):hover,
 219 body a:empty:hover,
 220 body span:empty:hover ,
 221 body span:hover img {
 222     opacity: 1 !important;
 223 }
 224
 225 /* style input elements + fix: bootstrap */
 226 body input,
 227 body textarea,
 228 body select,
 229 body button,
 230 body .btn,
 231 body a[role="button"] {
 232     color: var(--S_base1) !important;
 233     border-radius: 4px !important;
 234     border-width: 1px !important;
 235     border-color: rgba(100, 100, 100, 0.5) !important;
 236     border-style: solid !important;
 237     background: -webkit-linear-gradient(top, var(--S_base02_0), var(--S_base02_1) 40%, var(--S_base02)) !important;
 238     box-shadow: inset 1px 1px 1px var(--S_base03) !important;
 239 }
 240 body input[type="submit"],
 241 body input[type="button"],
 242 body input[type="image"],
 243 body input[type="reset"],
 244 body button,
 245 body .btn,
 246 body a[role="button"] {
 247     background: -webkit-linear-gradient(top, var(--ns_btnshine) 10%, var(--S_base02_1) 55%) !important;
 248     box-shadow: 1px 1px 1px var(--S_base03) !important;
 249 }
 250 /* hover */
 251 body input:hover,
 252 body textarea:hover,
 253 body select:hover,
 254 body button:hover,
 255 body .btn:hover,
 256 body a[role="button"]:hover {
 257     color: var(--S_base2) !important;
 258     background: -webkit-linear-gradient(top, var(--S_base02), var(--S_base02_0) 40%, var(--ns_btnshine)) !important;
 259 }
 260 body input[type="submit"]:hover,
 261 body input[type="button"]:hover,
 262 body input[type="image"]:hover,
 263 body input[type="reset"]:hover,
 264 body button:hover,
 265 body .btn:hover,
 266 body a[role="button"]:hover {
 267     background: -webkit-linear-gradient(top, var(--ns_btnshine) 30%, var(--S_base02_0) 70%) !important;
 268 }
 269 /* clicked */
 270 body input[type="submit"]:active,
 271 body input[type="button"]:active,
 272 body input[type="image"]:active,
 273 body input[type="reset"]:active,
 274 body button:active,
 275 body .btn:active,
 276 body a[role="button"]:active {
 277     background: -webkit-linear-gradient(top, var(--S_base02) 5%, var(--S_base02_2) 75%, var(--S_base02_1)) !important;
 278 }
 279
 280 /* style unique elements */
 281 pre:not(:empty),
 282 code:not(:empty),
 283 cite:not(:empty),
 284 blockquote:not(:empty) {
 285     background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=) !important;
 286     background-size: initial !important;
 287     color: var(--S_base1) !important;
 288 }
 289 pre:not(:empty) *,
 290 code:not(:empty) *,
 291 cite:not(:empty) *,
 292 blockquote:not(:empty) * {
 293     background: transparent none !important;
 294 }
 295
 296 /* fix: lightbox */
 297 body #lightbox .lb-image {
 298     opacity: 1 !important;
 299 }
 300 body #lightbox .lb-nav {
 301     background: transparent none !important;
 302 }
 303
 304 /* fix: vtabs */
 305 body .v-tabs-panel .v-tabs-item-active,
 306 body .v-tabs-panel .v-tabs-item-active * {
 307     background-color: var(--S_base02_2) !important;
 308 }
 309
 310 /* fix: youtube */
 311 body .ytp-title,
 312 body .ytp-title *,
 313 body .ytp-chrome-top,
 314 body .ytp-chrome-top-buttons,
 315 body .ytp-progress-bar-container,
 316 body .ytp-progress-bar,
 317 body .ytp-progress-bar-padding,
 318 body .ytp-scrubber-container,
 319 body .ytp-preview,
 320 body .ytp-tooltip-text-wrapper,
 321 body .caption-window * {
 322     background: transparent none !important;
 323 }
 324 body .caption-window {
 325     background: rgba(0, 0, 0, 0.5) !important;
 326 }
 327 body .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
 328     background: var(--S_base00) none !important;
 329 }
 330 body .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
 331     background: var(--S_base1) none !important;
 332 }
 333 body .ytp-swatch-background-color, body .ytp-volume-slider-handle {
 334     background: var(--S_base1) none !important;
 335 }
 336 body .ytp-swatch-background-color-secondary {
 337     background: var(--S_base2) none !important;
 338 }
 339 body .ytp-load-progress {
 340     background: var(--S_base00) none !important;
 341 }
 342 body .ytp-hover-progress {
 343     background: rgba(0, 0, 0, 0.5) none !important;
 344 }
 345 body .ytp-gradient-top,
 346 body .ytp-gradient-bottom {
 347     visibility: hidden;
 348 }
 349 body .video-annotations .annotation {
 350     background: rgba(0, 0, 0, 0.2) none !important;
 351 }
 352
 353 /* uncomment for firefox, webkit * /
 354 }
 355 /* */
 356
 357 /* vim: set sts=4 sw=4 et: */