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, webkit * /
  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     --ns_btnshade:  #;
  86 }
  87
  88 /* globally set default colors and remove shadows */
  89 body,
  90 /* fix: google */
  91 body *:not([class="mn-dwn-arw"]) {
  92     color: var(--S_base0) !important;
  93     border-color: var(--S_base00) !important;
  94     box-shadow: none !important;
  95 }
  96
  97 /* tiered background color for depth */
  98 html,
  99 body,
 100 body>*:empty {
 101     background-color: var(--S_base03) !important;
 102 }
 103 body>*:not(:empty),
 104 body>*>*:not(:empty)
 105 {
 106     background-color: var(--S_base02_2) !important;
 107 }
 108 body>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
 109 body>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
 110 /* fix: google */
 111 body>#searchform>div.sfbg.nojsv * {
 112     background-color: var(--S_base02_1) !important;
 113 }
 114 body>*>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark) {
 115     background-color: var(--S_base02_0) !important;
 116 }
 117 /* note: checking ':empty' overrides some other options, at least on webkit
 118          it doesn't seem to impact much so I decided to leave it out */
 119 body>*>*>*>*>* *:not(b):not(i):not(u):not(strong):not(em):not(mark) {
 120     background-color: var(--S_base02) !important;
 121 }
 122 /* striped tables */
 123 body table:not(:empty) {
 124     background-color: var(--S_base02_1) !important;
 125 }
 126 body table>tbody>tr>th {
 127     background-color: rgba(0, 0, 0, 0.5) !important;
 128 }
 129 body table>tbody>tr:nth-child(even)>td:not([rowspan]) {
 130     background-color: rgba(0, 0, 0, 0.25) !important;
 131 }
 132 body table>tbody>tr>td[rowspan] {
 133     background-color: rgba(0, 0, 0, 0.1) !important;
 134 }
 135
 136 /* remove backgrounds from headers */
 137 body h1,
 138 body h1 *,
 139 body h2,
 140 body h2 *,
 141 body h3,
 142 body h3 *,
 143 body h4,
 144 body h4 *,
 145 body h5,
 146 body h5 *,
 147 body h6,
 148 body h6 * {
 149     background: transparent none !important;
 150 }
 151 /* remove background images from non-interactable and non-image elements
 152    fix: youtube */
 153 *: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) {
 154     background-image: none !important;
 155     text-indent: 0 !important;
 156 }
 157
 158 /* colored headers and important text */
 159 body h1,
 160 body h1 *,
 161 body h2,
 162 body h2 *,
 163 body h3,
 164 body h3 *,
 165 body h4,
 166 body h4 *,
 167 body b,
 168 body i,
 169 body u,
 170 body strong,
 171 body em,
 172 body mark {
 173     color: var(--S_base2) !important;
 174 }
 175
 176 /* styled horizontal rules */
 177 body hr {
 178     background: var(--S_base01) none !important;
 179     color: var(--S_base01) !important;
 180     border: 1px solid var(--S_base01) !important;
 181     height: 1px !important;
 182     overflow: hidden !important;
 183     display: block !important;
 184 }
 185
 186 /* style links */
 187 body a:not([role="button"]),
 188 body a:not([role="button"]) *:not(button),
 189 body *[onclick]:not(input):not(button) {
 190     color: var(--ns_link) !important;
 191 }
 192 body a:not([role="button"]):visited,
 193 body a:not([role="button"]):visited *:not(input):not(button) {
 194     color: var(--ns_visited) !important;
 195 }
 196 body a:not([role="button"]):hover,
 197 body a:not([role="button"]):hover *:not(input):not(button),
 198 body *[onclick]:not(input):not(button):hover {
 199     color: var(--ns_linkhover) !important;
 200     text-decoration: underline !important;
 201 }
 202
 203 /* transparent images */
 204 body a:has(img) {
 205     background-color: transparent;
 206 }
 207 body * img,
 208 body input[type="image"],
 209 body *[onclick]:empty:not(input):not(button),
 210 body a:empty,
 211 body span:empty {
 212     opacity: 0.5 !important;
 213 }
 214 body * img:hover,
 215 body a:hover img,
 216 body input[type="image"]:hover,
 217 body *[onclick]:empty:not(input):not(button):hover,
 218 body a:empty:hover,
 219 body span:empty:hover ,
 220 body span:hover img {
 221     opacity: 1 !important;
 222 }
 223
 224 /* style input elements + fix: bootstrap */
 225 body input,
 226 body textarea,
 227 body select,
 228 body button,
 229 body .btn,
 230 body a[role="button"] {
 231     color: var(--S_base1) !important;
 232     border-radius: 4px !important;
 233     border-width: 1px !important;
 234     border-color: rgba(100, 100, 100, 0.5) !important;
 235     border-style: solid !important;
 236     background: -webkit-linear-gradient(top, var(--S_base02_0), var(--S_base02_1) 40%, var(--S_base02)) !important;
 237     box-shadow: inset 1px 1px 1px var(--S_base03) !important;
 238 }
 239 body input[type="submit"],
 240 body input[type="button"],
 241 body input[type="image"],
 242 body input[type="reset"],
 243 body button,
 244 body .btn,
 245 body a[role="button"] {
 246     background: -webkit-linear-gradient(top, var(--ns_btnshine) 10%, var(--S_base02_1) 55%) !important;
 247     box-shadow: 1px 1px 1px var(--S_base03) !important;
 248 }
 249 /* hover */
 250 body input:hover,
 251 body textarea:hover,
 252 body select:hover,
 253 body button:hover,
 254 body .btn:hover,
 255 body a[role="button"]:hover {
 256     color: var(--S_base2) !important;
 257     background: -webkit-linear-gradient(top, var(--S_base02), var(--S_base02_0) 40%, var(--ns_btnshine)) !important;
 258 }
 259 body input[type="submit"]:hover,
 260 body input[type="button"]:hover,
 261 body input[type="image"]:hover,
 262 body input[type="reset"]:hover,
 263 body button:hover,
 264 body .btn:hover,
 265 body a[role="button"]:hover {
 266     background: -webkit-linear-gradient(top, var(--ns_btnshine) 30%, var(--S_base02_0) 70%) !important;
 267 }
 268 /* clicked */
 269 body input[type="submit"]:active,
 270 body input[type="button"]:active,
 271 body input[type="image"]:active,
 272 body input[type="reset"]:active,
 273 body button:active,
 274 body .btn:active,
 275 body a[role="button"]:active {
 276     background: -webkit-linear-gradient(top, var(--S_base02) 5%, var(--S_base02_2) 75%, var(--S_base02_1)) !important;
 277 }
 278
 279 /* style unique elements */
 280 pre:not(:empty),
 281 code:not(:empty),
 282 cite:not(:empty),
 283 blockquote:not(:empty) {
 284     background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=) !important;
 285     background-size: initial !important;
 286     color: var(--S_base1) !important;
 287 }
 288 pre:not(:empty) *,
 289 code:not(:empty) *,
 290 cite:not(:empty) *,
 291 blockquote:not(:empty) * {
 292     background: transparent none !important;
 293 }
 294
 295 /* fix: lightbox */
 296 body #lightbox .lb-image {
 297     opacity: 1 !important;
 298 }
 299 body #lightbox .lb-nav {
 300     background: transparent none !important;
 301 }
 302
 303 /* fix: vtabs */
 304 body .v-tabs-panel .v-tabs-item-active,
 305 body .v-tabs-panel .v-tabs-item-active * {
 306     background-color: var(--S_base02_2) !important;
 307 }
 308
 309 /* fix: youtube */
 310 body .ytp-title,
 311 body .ytp-title *,
 312 body .ytp-chrome-top,
 313 body .ytp-chrome-top-buttons,
 314 body .ytp-progress-bar-container,
 315 body .ytp-progress-bar,
 316 body .ytp-progress-bar-padding,
 317 body .ytp-scrubber-container,
 318 body .ytp-preview,
 319 body .ytp-tooltip-text-wrapper,
 320 body .caption-window * {
 321     background: transparent none !important;
 322 }
 323 body .caption-window {
 324     background: rgba(0, 0, 0, 0.5) !important;
 325 }
 326 body .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
 327     background: var(--S_base00) none !important;
 328 }
 329 body .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
 330     background: var(--S_base1) none !important;
 331 }
 332 body .ytp-swatch-background-color, body .ytp-volume-slider-handle {
 333     background: var(--S_base1) none !important;
 334 }
 335 body .ytp-swatch-background-color-secondary {
 336     background: var(--S_base2) none !important;
 337 }
 338 body .ytp-load-progress {
 339     background: var(--S_base00) none !important;
 340 }
 341 body .ytp-hover-progress {
 342     background: rgba(0, 0, 0, 0.5) none !important;
 343 }
 344 body .ytp-gradient-top,
 345 body .ytp-gradient-bottom {
 346     visibility: hidden;
 347 }
 348 body .video-annotations .annotation {
 349     background: rgba(0, 0, 0, 0.2) none !important;
 350 }
 351
 352 /* * /
 353 }
 354 /* */
 355
 356 /* vim: set sts=4 sw=4 et: */