book/theme/css/variables.css · helix

git.iko.soy/helix

on 2f4eac2 help sign in

helix/book/theme/css/variables.css

411 lines 10 kB history raw

2/* Globals */

4:root {

5 --sidebar-width: 300px;

6 --page-padding: 15px;

7 --content-max-width: 750px;

8 --menu-bar-height: 50px;

11/* Themes */

13.ayu {

14 --bg: hsl(210, 25%, 8%);

15 --fg: #c5c5c5;

17 --sidebar-bg: #14191f;

18 --sidebar-fg: #c8c9db;

19 --sidebar-non-existent: #5c6773;

20 --sidebar-active: #ffb454;

21 --sidebar-spacer: #2d334f;

23 --scrollbar: var(--sidebar-fg);

25 --icons: #737480;

26 --icons-hover: #b7b9cc;

28 --links: #0096cf;

30 --inline-code-color: #ffb454;

32 --theme-popup-bg: #14191f;

33 --theme-popup-border: #5c6773;

34 --theme-hover: #191f26;

36 --quote-bg: hsl(226, 15%, 17%);

37 --quote-border: hsl(226, 15%, 22%);

39 --table-border-color: hsl(210, 25%, 13%);

40 --table-header-bg: hsl(210, 25%, 28%);

41 --table-alternate-bg: hsl(210, 25%, 11%);

43 --searchbar-border-color: #848484;

44 --searchbar-bg: #424242;

45 --searchbar-fg: #fff;

46 --searchbar-shadow-color: #d4c89f;

47 --searchresults-header-fg: #666;

48 --searchresults-border-color: #888;

49 --searchresults-li-bg: #252932;

50 --search-mark-bg: #e3b171;

51 --hljs-background: #191f26;

52 --hljs-color: #e6e1cf;

53 --hljs-quote: #5c6773;

54 --hljs-variable: #ff7733;

55 --hljs-type: #ffee99;

56 --hljs-title: #b8cc52;

57 --hljs-symbol: #ffb454;

58 --hljs-selector-tag: #ff7733;

59 --hljs-selector-tag: #36a3d9;

60 --hljs-selector-tag: #00568d;

61 --hljs-selector-tag: #91b362;

62 --hljs-selector-tag: #d96c75;

63}

65.coal {

66 --bg: hsl(200, 7%, 8%);

67 --fg: #98a3ad;

69 --sidebar-bg: #292c2f;

70 --sidebar-fg: #a1adb8;

71 --sidebar-non-existent: #505254;

72 --sidebar-active: #3473ad;

73 --sidebar-spacer: #393939;

75 --scrollbar: var(--sidebar-fg);

77 --icons: #43484d;

78 --icons-hover: #b3c0cc;

80 --links: #2b79a2;

82 --inline-code-color: #c5c8c6;

84 --theme-popup-bg: #141617;

85 --theme-popup-border: #43484d;

86 --theme-hover: #1f2124;

88 --quote-bg: hsl(234, 21%, 18%);

89 --quote-border: hsl(234, 21%, 23%);

91 --table-border-color: hsl(200, 7%, 13%);

92 --table-header-bg: hsl(200, 7%, 28%);

93 --table-alternate-bg: hsl(200, 7%, 11%);

95 --searchbar-border-color: #aaa;

96 --searchbar-bg: #b7b7b7;

97 --searchbar-fg: #000;

98 --searchbar-shadow-color: #aaa;

99 --searchresults-header-fg: #666;

100 --searchresults-border-color: #98a3ad;

101 --searchresults-li-bg: #2b2b2f;

102 --search-mark-bg: #355c7d;

103 --hljs-background: #969896;

104 --hljs-color: #cc6666;

105 --hljs-quote: #de935f;

106 --hljs-variable: #f0c674;

107 --hljs-type: #b5bd68;

108 --hljs-title: #8abeb7;

109 --hljs-symbol: #81a2be;

110 --hljs-selector-tag: #b294bb;

111 --hljs-selector-tag: #1d1f21;

112 --hljs-selector-tag: #c5c8c6;

113 --hljs-selector-tag: #718c00;

114 --hljs-selector-tag: #c82829;

115}

116

117.light {

118 --bg: hsl(0, 0%, 100%);

119 --fg: hsl(0, 0%, 0%);

120

121 --sidebar-bg: #fafafa;

122 --sidebar-fg: hsl(0, 0%, 0%);

123 --sidebar-non-existent: #aaaaaa;

124 --sidebar-active: #1f1fff;

125 --sidebar-spacer: #f4f4f4;

126

127 --scrollbar: #8F8F8F;

128

129 --icons: #747474;

130 --icons-hover: #000000;

131

132 --links: #20609f;

133

134 --inline-code-color: #301900;

135

136 --theme-popup-bg: #fafafa;

137 --theme-popup-border: #cccccc;

138 --theme-hover: #e6e6e6;

139

140 --quote-bg: hsl(197, 37%, 96%);

141 --quote-border: hsl(197, 37%, 91%);

142

143 --table-border-color: hsl(0, 0%, 95%);

144 --table-header-bg: hsl(0, 0%, 80%);

145 --table-alternate-bg: hsl(0, 0%, 97%);

146

147 --searchbar-border-color: #aaa;

148 --searchbar-bg: #fafafa;

149 --searchbar-fg: #000;

150 --searchbar-shadow-color: #aaa;

151 --searchresults-header-fg: #666;

152 --searchresults-border-color: #888;

153 --searchresults-li-bg: #e4f2fe;

154 --search-mark-bg: #a2cff5;

155 --hljs-background: #f6f7f6;

156 --hljs-color: #000;

157 --hljs-quote: #575757;

158 --hljs-variable: #d70025;

159 --hljs-type: #b21e00;

160 --hljs-title: #0030f2;

161 --hljs-symbol: #008200;

162 --hljs-selector-tag: #9d00ec;

163}

164

165.navy {

166 --bg: hsl(226, 23%, 11%);

167 --fg: #bcbdd0;

168

169 --sidebar-bg: #282d3f;

170 --sidebar-fg: #c8c9db;

171 --sidebar-non-existent: #505274;

172 --sidebar-active: #2b79a2;

173 --sidebar-spacer: #2d334f;

174

175 --scrollbar: var(--sidebar-fg);

176

177 --icons: #737480;

178 --icons-hover: #b7b9cc;

179

180 --links: #2b79a2;

181

182 --inline-code-color: #c5c8c6;

183

184 --theme-popup-bg: #161923;

185 --theme-popup-border: #737480;

186 --theme-hover: #282e40;

187

188 --quote-bg: hsl(226, 15%, 17%);

189 --quote-border: hsl(226, 15%, 22%);

190

191 --table-border-color: hsl(226, 23%, 16%);

192 --table-header-bg: hsl(226, 23%, 31%);

193 --table-alternate-bg: hsl(226, 23%, 14%);

194

195 --searchbar-border-color: #aaa;

196 --searchbar-bg: #aeaec6;

197 --searchbar-fg: #000;

198 --searchbar-shadow-color: #aaa;

199 --searchresults-header-fg: #5f5f71;

200 --searchresults-border-color: #5c5c68;

201 --searchresults-li-bg: #242430;

202 --search-mark-bg: #a2cff5;

203

204 --hljs-background: #969896;

205 --hljs-color: #cc6666;

206 --hljs-quote: #de935f;

207 --hljs-variable: #f0c674;

208 --hljs-type: #b5bd68;

209 --hljs-title: #8abeb7;

210 --hljs-symbol: #81a2be;

211 --hljs-selector-tag: #b294bb;

212 --hljs-selector-tag: #1d1f21;

213 --hljs-selector-tag: #c5c8c6;

214 --hljs-selector-tag: #718c00;

215 --hljs-selector-tag: #c82829;

216}

217

218.rust {

219 --bg: hsl(60, 9%, 87%);

220 --fg: #262625;

221

222 --sidebar-bg: #3b2e2a;

223 --sidebar-fg: #c8c9db;

224 --sidebar-non-existent: #505254;

225 --sidebar-active: #e69f67;

226 --sidebar-spacer: #45373a;

227

228 --scrollbar: var(--sidebar-fg);

229

230 --icons: #737480;

231 --icons-hover: #262625;

232

233 --links: #2b79a2;

234

235 --inline-code-color: #6e6b5e;

236

237 --theme-popup-bg: #e1e1db;

238 --theme-popup-border: #b38f6b;

239 --theme-hover: #99908a;

240

241 --quote-bg: hsl(60, 5%, 75%);

242 --quote-border: hsl(60, 5%, 70%);

243

244 --table-border-color: hsl(60, 9%, 82%);

245 --table-header-bg: #b3a497;

246 --table-alternate-bg: hsl(60, 9%, 84%);

247

248 --searchbar-border-color: #aaa;

249 --searchbar-bg: #fafafa;

250 --searchbar-fg: #000;

251 --searchbar-shadow-color: #aaa;

252 --searchresults-header-fg: #666;

253 --searchresults-border-color: #888;

254 --searchresults-li-bg: #dec2a2;

255 --search-mark-bg: #e69f67;

256 --hljs-background: #f6f7f6;

257 --hljs-color: #000;

258 --hljs-quote: #575757;

259 --hljs-variable: #d70025;

260 --hljs-type: #b21e00;

261 --hljs-title: #0030f2;

262 --hljs-symbol: #008200;

263 --hljs-selector-tag: #9d00ec;

264}

265

266@media (prefers-color-scheme: dark) {

267 .light.no-js {

268 --bg: hsl(200, 7%, 8%);

269 --fg: #98a3ad;

270

271 --sidebar-bg: #292c2f;

272 --sidebar-fg: #a1adb8;

273 --sidebar-non-existent: #505254;

274 --sidebar-active: #3473ad;

275 --sidebar-spacer: #393939;

276

277 --scrollbar: var(--sidebar-fg);

278

279 --icons: #43484d;

280 --icons-hover: #b3c0cc;

281

282 --links: #2b79a2;

283

284 --inline-code-color: #c5c8c6;

285

286 --theme-popup-bg: #141617;

287 --theme-popup-border: #43484d;

288 --theme-hover: #1f2124;

289

290 --quote-bg: hsl(234, 21%, 18%);

291 --quote-border: hsl(234, 21%, 23%);

292

293 --table-border-color: hsl(200, 7%, 13%);

294 --table-header-bg: hsl(200, 7%, 28%);

295 --table-alternate-bg: hsl(200, 7%, 11%);

296

297 --searchbar-border-color: #aaa;

298 --searchbar-bg: #b7b7b7;

299 --searchbar-fg: #000;

300 --searchbar-shadow-color: #aaa;

301 --searchresults-header-fg: #666;

302 --searchresults-border-color: #98a3ad;

303 --searchresults-li-bg: #2b2b2f;

304 --search-mark-bg: #355c7d;

305 }

306}

307

308.colibri {

309 --bg: #3b224c;

310 --fg: #bcbdd0;

311 --heading-fg: #fff;

312

313 --sidebar-bg: #281733;

314 --sidebar-fg: #c8c9db;

315 --sidebar-non-existent: #505274;

316 --sidebar-active: #a4a0e8;

317 --sidebar-spacer: #2d334f;

318

319 --scrollbar: var(--sidebar-fg);

320

321 --icons: #737480;

322 --icons-hover: #b7b9cc;

323

324 /* --links: #a4a0e8; */

325 --links: #ECCDBA;

326

327 --inline-code-color: hsl(48.7, 7.8%, 70%);

328

329 --theme-popup-bg: #161923;

330 --theme-popup-border: #737480;

331 --theme-hover: rgba(0,0,0, .2);

332

333 --quote-bg: #281733;

334 --quote-border: hsl(226, 15%, 22%);

335

336 --table-border-color: hsl(226, 23%, 76%);

337 --table-header-bg: hsla(226, 23%, 31%, 0);

338 --table-alternate-bg: hsl(226, 23%, 14%);

339 --table-border-line: hsla(201deg, 20%, 92%, 0.2);

340

341 --searchbar-border-color: #aaa;

342 --searchbar-bg: #aeaec6;

343 --searchbar-fg: #000;

344 --searchbar-shadow-color: #aaa;

345 --searchresults-header-fg: #5f5f71;

346 --searchresults-border-color: #5c5c68;

347 --searchresults-li-bg: #242430;

348 --search-mark-bg: #acff5;

349 --hljs-background: #2f1e2e;

350 --hljs-color: #a39e9b;

351 --hljs-quote: #8d8687;

352 --hljs-variable: #ef6155;

353 --hljs-type: #f99b15;

354 --hljs-title: #fec418;

355 --hljs-symbol: #48b685;

356 --hljs-selector-tag: #815ba4;

357}

358

359.colibri {

360/*

361 --bg: #ffffff;

362 --fg: #452859;

363 --fg: #5a5977;

364 --heading-fg: #281733;

365

366 --sidebar-bg: #281733;

367 --sidebar-fg: #c8c9db;

368 --sidebar-non-existent: #505274;

369 --sidebar-active: #a4a0e8;

370 --sidebar-spacer: #2d334f;

371

372 --scrollbar: var(--sidebar-fg);

373

374 --icons: #737480;

375 --icons-hover: #b7b9cc;

376

377 --links: #6F44F0;

378

379 --inline-code-color: #a39e9b;

380

381 --theme-popup-bg: #161923;

382 --theme-popup-border: #737480;

383 --theme-hover: rgba(0,0,0, .2);

384

385 --quote-bg: rgba(0, 0, 0, 0);

386 --quote-border: hsl(226, 15%, 75%);

387

388 --table-border-color: #5a5977;

389 --table-border-color: hsl(201deg 10% 67%);

390 --table-header-bg: hsl(0, 0%, 100%);

391 --table-alternate-bg: hsl(0, 0%, 97%);

392 --table-border-line: hsl(201deg, 20%, 92%);

393

394 --searchbar-border-color: #aaa;

395 --searchbar-bg: #aeaec6;

396 --searchbar-fg: #000;

397 --searchbar-shadow-color: #aaa;

398 --searchresults-header-fg: #5f5f71;

399 --searchresults-border-color: #5c5c68;

400 --searchresults-li-bg: #242430;

401 --search-mark-bg: #a2cff5;

402 --hljs-background: #TODO;

403 --hljs-color: #TODO;

404 --hljs-quote: #TODO;

405 --hljs-variable: #TODO;

406 --hljs-type: #TODO;

407 --hljs-title: #TODO;

408 --hljs-symbol: #TODO;

409 --hljs-selector-tag: #TODO;

410*/

411}