/* 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, webkit * / @-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; --ns_btnshade: #; } /* globally set default colors and remove shadows */ body, /* fix: google */ 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; } /* * / } /* */ /* vim: set sts=4 sw=4 et: */