From 57648ac9ea11f45fe4bd93111a52aea05e64e25b Mon Sep 17 00:00:00 2001 From: ds6 Date: Sun, 4 Feb 2018 21:21:41 -0600 Subject: [PATCH 1/1] --- nightshift.css | 356 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 356 insertions(+) create mode 100644 nightshift.css diff --git a/nightshift.css b/nightshift.css new file mode 100644 index 0000000..e35932c --- /dev/null +++ b/nightshift.css @@ -0,0 +1,356 @@ +/* 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: */ \ No newline at end of file -- 2.47.0