(no commit message)

[nightshift.git] / nightshift.css

/* original:
   | NIGHTSHIFT - eye care:                  |
   | A darkening style for all websites.     |
   | by vetinari - 2009                      |
   | contact: vetinari.userstyles@inode.at   |
   | --------------------------------------- |
   | last modified: 13.06.2012               |
   |_________________________________________|

edited by ds6
changes:
  - colors ported to variables, solarized theme added
  - lightbox image fix
  - youtube support
  - compatibility with vTabs Chrome extension (not tested recently)
  - fixed some nested elements being miscolored
  - fixed some images and icons being removed when they shouldn't
        (note: it's still pretty aggressive)
  - added bootstrap btn support
  - fixed and modified themed inputs, other rules overwrote them
  - fixed pre, code, cite styles, they were also overwritten
  - added google search fixes
  - fixed striped tables and simplified detection for better coloring
*/

/* uncomment for firefox userStyle.css and some webkit implementations * /
@-moz-document url-prefix(http://), url-prefix(https://), url-prefix(ftp://), url-prefix(file://), url-prefix(luakit:) {
/* */

/* set up colors */
:root {
    /* solarized colors, changed values have commented originals above them
       S_base3 and all colors except yellow, orange, and violet are not used */
  /*--S_base03:     #002b36;*/
    --S_base03:     #000a0d;
    --S_base02:     #073642;
    --S_base01:     #586e75;
    --S_base00:     #657b83;
    --S_base0:      #839496;
    --S_base1:      #93a1a1;
    --S_base2:      #eee8d5;
    --S_base3:      #fdf6e3;

    --S_yellow:     #b58900;
    --S_orange:     #cb4b16;
    --S_red:        #dc322f;
    --S_magenta:    #d33682;
    --S_violet:     #6c71c4;
    --S_blue:       #268bd2;
    --S_cyan:       #2aa198;
  /*--S_green:      #859900;*/
    --S_green:      #85c000;

    /* these colors are similar to the original NightShift * /
    --S_base03:     #111;
    --S_base02:     #383838;
    --S_base01:     #666;
    --S_base00:     #60666a;
    --S_base0:      #c0c0c0;
    --S_base1:      #a98;
    --S_base2:      #ccc;

    --S_yellow:     #B6AA7B;
    --S_orange:     #EC8;
    --S_violet:     #75A;
    /* */

    /* background colors for elem depth, a subset of my base03 to base02 */
    --S_base02_2:   #02151a;
    --S_base02_1:   #042028;
    --S_base02_0:   #052b35;
    /* */

    /* and for original NightShift * /
    --S_base02_2:   #222;
    --S_base02_1:   #282828;
    --S_base02_0:   #333;
    /* */

    /* changeable colors */
    --ns_link:      var(--S_yellow);
    --ns_visited:   var(--S_violet);
    --ns_linkhover: var(--S_orange);
    --ns_btnshine:  #404040;
}

/* globally set default colors and remove shadows */
body,
/* fix: google
   XXX: overrides some element colors we set later, eg headers
        removing this fix also allows some site styles to override ours */
body * { /* :not([class="mn-dwn-arw"]) { /* */
    color: var(--S_base0) !important;
    border-color: var(--S_base00) !important;
    box-shadow: none !important;
}

/* tiered background color for depth */
html,
body,
body>*:empty {
    background-color: var(--S_base03) !important;
}
body>*:not(:empty),
body>*>*:not(:empty)
{
    background-color: var(--S_base02_2) !important;
}
body>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
body>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark),
/* fix: google */
body>#searchform>div.sfbg.nojsv * {
    background-color: var(--S_base02_1) !important;
}
body>*>*>*>*>*:not(:empty):not(b):not(i):not(u):not(strong):not(em):not(mark) {
    background-color: var(--S_base02_0) !important;
}
/* note: checking ':empty' overrides some other options, at least on webkit
         it doesn't seem to impact much so I decided to leave it out */
body>*>*>*>*>* *:not(b):not(i):not(u):not(strong):not(em):not(mark) {
    background-color: var(--S_base02) !important;
}
/* striped tables */
body table:not(:empty) {
    background-color: var(--S_base02_1) !important;
}
body table>tbody>tr>th {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
body table>tbody>tr:nth-child(even)>td:not([rowspan]) {
    background-color: rgba(0, 0, 0, 0.25) !important;
}
body table>tbody>tr>td[rowspan] {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* remove backgrounds from headers */
body h1,
body h1 *,
body h2,
body h2 *,
body h3,
body h3 *,
body h4,
body h4 *,
body h5,
body h5 *,
body h6,
body h6 * {
    background: transparent none !important;
}
/* remove background images from non-interactable and non-image elements
   fix: youtube */
*: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) {
    background-image: none !important;
    text-indent: 0 !important;
}

/* colored headers and important text */
body h1,
body h1 *,
body h2,
body h2 *,
body h3,
body h3 *,
body h4,
body h4 *,
body b,
body i,
body u,
body strong,
body em,
body mark {
    color: var(--S_base2) !important;
}

/* styled horizontal rules */
body hr {
    background: var(--S_base01) none !important;
    color: var(--S_base01) !important;
    border: 1px solid var(--S_base01) !important;
    height: 1px !important;
    overflow: hidden !important;
    display: block !important;
}

/* style links */
body a:not([role="button"]),
body a:not([role="button"]) *:not(button),
body *[onclick]:not(input):not(button) {
    color: var(--ns_link) !important;
}
body a:not([role="button"]):visited,
body a:not([role="button"]):visited *:not(input):not(button) {
    color: var(--ns_visited) !important;
}
body a:not([role="button"]):hover,
body a:not([role="button"]):hover *:not(input):not(button),
body *[onclick]:not(input):not(button):hover {
    color: var(--ns_linkhover) !important;
    text-decoration: underline !important;
}

/* transparent images */
body a:has(img) {
    background-color: transparent;
}
body * img,
body input[type="image"],
body *[onclick]:empty:not(input):not(button),
body a:empty,
body span:empty {
    opacity: 0.5 !important;
}
body * img:hover,
body a:hover img,
body input[type="image"]:hover,
body *[onclick]:empty:not(input):not(button):hover,
body a:empty:hover,
body span:empty:hover ,
body span:hover img {
    opacity: 1 !important;
}

/* style input elements + fix: bootstrap */
body input,
body textarea,
body select,
body button,
body .btn,
body a[role="button"] {
    color: var(--S_base1) !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    border-color: rgba(100, 100, 100, 0.5) !important;
    border-style: solid !important;
    background: -webkit-linear-gradient(top, var(--S_base02_0), var(--S_base02_1) 40%, var(--S_base02)) !important;
    box-shadow: inset 1px 1px 1px var(--S_base03) !important;
}
body input[type="submit"],
body input[type="button"],
body input[type="image"],
body input[type="reset"],
body button,
body .btn,
body a[role="button"] {
    background: -webkit-linear-gradient(top, var(--ns_btnshine) 10%, var(--S_base02_1) 55%) !important;
    box-shadow: 1px 1px 1px var(--S_base03) !important;
}
/* hover */
body input:hover,
body textarea:hover,
body select:hover,
body button:hover,
body .btn:hover,
body a[role="button"]:hover {
    color: var(--S_base2) !important;
    background: -webkit-linear-gradient(top, var(--S_base02), var(--S_base02_0) 40%, var(--ns_btnshine)) !important;
}
body input[type="submit"]:hover,
body input[type="button"]:hover,
body input[type="image"]:hover,
body input[type="reset"]:hover,
body button:hover,
body .btn:hover,
body a[role="button"]:hover {
    background: -webkit-linear-gradient(top, var(--ns_btnshine) 30%, var(--S_base02_0) 70%) !important;
}
/* clicked */
body input[type="submit"]:active,
body input[type="button"]:active,
body input[type="image"]:active,
body input[type="reset"]:active,
body button:active,
body .btn:active,
body a[role="button"]:active {
    background: -webkit-linear-gradient(top, var(--S_base02) 5%, var(--S_base02_2) 75%, var(--S_base02_1)) !important;
}

/* style unique elements */
pre:not(:empty),
code:not(:empty),
cite:not(:empty),
blockquote:not(:empty) {
    background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=) !important;
    background-size: initial !important;
    color: var(--S_base1) !important;
}
pre:not(:empty) *,
code:not(:empty) *,
cite:not(:empty) *,
blockquote:not(:empty) * {
    background: transparent none !important;
}

/* fix: lightbox */
body #lightbox .lb-image {
    opacity: 1 !important;
}
body #lightbox .lb-nav {
    background: transparent none !important;
}

/* fix: vtabs */
body .v-tabs-panel .v-tabs-item-active,
body .v-tabs-panel .v-tabs-item-active * {
    background-color: var(--S_base02_2) !important;
}

/* fix: youtube */
body .ytp-title,
body .ytp-title *,
body .ytp-chrome-top,
body .ytp-chrome-top-buttons,
body .ytp-progress-bar-container,
body .ytp-progress-bar,
body .ytp-progress-bar-padding,
body .ytp-scrubber-container,
body .ytp-preview,
body .ytp-tooltip-text-wrapper,
body .caption-window * {
    background: transparent none !important;
}
body .caption-window {
    background: rgba(0, 0, 0, 0.5) !important;
}
body .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
    background: var(--S_base00) none !important;
}
body .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
    background: var(--S_base1) none !important;
}
body .ytp-swatch-background-color, body .ytp-volume-slider-handle {
    background: var(--S_base1) none !important;
}
body .ytp-swatch-background-color-secondary {
    background: var(--S_base2) none !important;
}
body .ytp-load-progress {
    background: var(--S_base00) none !important;
}
body .ytp-hover-progress {
    background: rgba(0, 0, 0, 0.5) none !important;
}
body .ytp-gradient-top,
body .ytp-gradient-bottom {
    visibility: hidden;
}
body .video-annotations .annotation {
    background: rgba(0, 0, 0, 0.2) none !important;
}

/* uncomment for firefox, webkit * /
}
/* */

/* vim: set sts=4 sw=4 et: */