book/theme/css/variables.css · helix

git.iko.soy/helix

on 0b8a00a help sign in

helix/book/theme/css/variables.css

342 lines 8.1 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}

53.coal {

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

55 --fg: #98a3ad;

57 --sidebar-bg: #292c2f;

58 --sidebar-fg: #a1adb8;

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

60 --sidebar-active: #3473ad;

61 --sidebar-spacer: #393939;

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

65 --icons: #43484d;

66 --icons-hover: #b3c0cc;

68 --links: #2b79a2;

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

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

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

74 --theme-hover: #1f2124;

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

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

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

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

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

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

84 --searchbar-bg: #b7b7b7;

85 --searchbar-fg: #000;

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

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

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

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

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

91}

93.light {

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

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

97 --sidebar-bg: #fafafa;

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

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

100 --sidebar-active: #1f1fff;

101 --sidebar-spacer: #f4f4f4;

102

103 --scrollbar: #8F8F8F;

104

105 --icons: #747474;

106 --icons-hover: #000000;

107

108 --links: #20609f;

109

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

111

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

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

114 --theme-hover: #e6e6e6;

115

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

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

118

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

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

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

122

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

124 --searchbar-bg: #fafafa;

125 --searchbar-fg: #000;

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

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

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

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

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

131}

132

133.navy {

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

135 --fg: #bcbdd0;

136

137 --sidebar-bg: #282d3f;

138 --sidebar-fg: #c8c9db;

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

140 --sidebar-active: #2b79a2;

141 --sidebar-spacer: #2d334f;

142

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

144

145 --icons: #737480;

146 --icons-hover: #b7b9cc;

147

148 --links: #2b79a2;

149

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

151

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

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

154 --theme-hover: #282e40;

155

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

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

158

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

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

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

162

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

164 --searchbar-bg: #aeaec6;

165 --searchbar-fg: #000;

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

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

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

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

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

171}

172

173.rust {

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

175 --fg: #262625;

176

177 --sidebar-bg: #3b2e2a;

178 --sidebar-fg: #c8c9db;

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

180 --sidebar-active: #e69f67;

181 --sidebar-spacer: #45373a;

182

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

184

185 --icons: #737480;

186 --icons-hover: #262625;

187

188 --links: #2b79a2;

189

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

191

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

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

194 --theme-hover: #99908a;

195

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

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

198

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

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

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

202

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

204 --searchbar-bg: #fafafa;

205 --searchbar-fg: #000;

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

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

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

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

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

211}

212

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

214 .light.no-js {

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

216 --fg: #98a3ad;

217

218 --sidebar-bg: #292c2f;

219 --sidebar-fg: #a1adb8;

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

221 --sidebar-active: #3473ad;

222 --sidebar-spacer: #393939;

223

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

225

226 --icons: #43484d;

227 --icons-hover: #b3c0cc;

228

229 --links: #2b79a2;

230

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

232

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

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

235 --theme-hover: #1f2124;

236

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

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

239

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

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

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

243

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

245 --searchbar-bg: #b7b7b7;

246 --searchbar-fg: #000;

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

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

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

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

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

252 }

253}

254

255.colibri {

256 --bg: #3b224c;

257 --fg: #bcbdd0;

258 --heading-fg: #fff;

259

260 --sidebar-bg: #281733;

261 --sidebar-fg: #c8c9db;

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

263 --sidebar-active: #a4a0e8;

264 --sidebar-spacer: #2d334f;

265

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

267

268 --icons: #737480;

269 --icons-hover: #b7b9cc;

270

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

272 --links: #ECCDBA;

273

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

275

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

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

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

279

280 --quote-bg: #281733;

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

282

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

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

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

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

287

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

289 --searchbar-bg: #aeaec6;

290 --searchbar-fg: #000;

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

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

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

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

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

296}

297

298.colibri {

299/*

300 --bg: #ffffff;

301 --fg: #452859;

302 --fg: #5a5977;

303 --heading-fg: #281733;

304

305 --sidebar-bg: #281733;

306 --sidebar-fg: #c8c9db;

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

308 --sidebar-active: #a4a0e8;

309 --sidebar-spacer: #2d334f;

310

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

312

313 --icons: #737480;

314 --icons-hover: #b7b9cc;

315

316 --links: #6F44F0;

317

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

319

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

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

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

323

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

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

326

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

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

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

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

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

332

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

334 --searchbar-bg: #aeaec6;

335 --searchbar-fg: #000;

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

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

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

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

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

341*/

342}