git.sev.monster Git - nightshift.git/blob

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 |_________________________________________|

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 */

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 /* */

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;

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;

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;

63 --S_yellow: #B6AA7B;

64 --S_orange: #EC8;

65 --S_violet: #75A;

66 /* */

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 /* */

74 /* and for original NightShift * /

75 --S_base02_2: #222;

76 --S_base02_1: #282828;

77 --S_base02_0: #333;

78 /* */

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 }

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 }

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: */