book/theme/css/variables.css · helix

git.iko.soy/helix

on e476321 help sign in

helix/book/theme/css/variables.css

348 lines 8.2 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;

16 --heading-fg: #c5c5c5;

18 --sidebar-bg: #14191f;

19 --sidebar-fg: #c8c9db;

20 --sidebar-non-existant: #5c6773;

21 --sidebar-active: #ffb454;

22 --sidebar-spacer: #2d334f;

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

26 --icons: #737480;

27 --icons-hover: #b7b9cc;

29 --links: #0096cf;

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

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

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

35 --theme-hover: #191f26;

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

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

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

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

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

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

45 --searchbar-bg: #424242;

46 --searchbar-fg: #fff;

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

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

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

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

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

52}

54.coal {

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

56 --fg: #98a3ad;

57 --heading-fg: #98a3ad;

59 --sidebar-bg: #292c2f;

60 --sidebar-fg: #a1adb8;

61 --sidebar-non-existant: #505254;

62 --sidebar-active: #3473ad;

63 --sidebar-spacer: #393939;

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

67 --icons: #43484d;

68 --icons-hover: #b3c0cc;

70 --links: #2b79a2;

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

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

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

76 --theme-hover: #1f2124;

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

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

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

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

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

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

86 --searchbar-bg: #b7b7b7;

87 --searchbar-fg: #000;

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

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

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

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

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

93}

95.light {

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

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

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

100 --sidebar-bg: #fafafa;

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

102 --sidebar-non-existant: #aaaaaa;

103 --sidebar-active: #1f1fff;

104 --sidebar-spacer: #f4f4f4;

105

106 --scrollbar: #8F8F8F;

107

108 --icons: #747474;

109 --icons-hover: #000000;

110

111 --links: #20609f;

112

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

114

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

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

117 --theme-hover: #e6e6e6;

118

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

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

121

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

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

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

125

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

127 --searchbar-bg: #fafafa;

128 --searchbar-fg: #000;

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

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

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

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

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

134}

135

136.navy {

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

138 --fg: #bcbdd0;

139 --heading-fg: #bcbdd0;

140

141 --sidebar-bg: #282d3f;

142 --sidebar-fg: #c8c9db;

143 --sidebar-non-existant: #505274;

144 --sidebar-active: #2b79a2;

145 --sidebar-spacer: #2d334f;

146

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

148

149 --icons: #737480;

150 --icons-hover: #b7b9cc;

151

152 --links: #2b79a2;

153

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

155

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

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

158 --theme-hover: #282e40;

159

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

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

162

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

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

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

166

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

168 --searchbar-bg: #aeaec6;

169 --searchbar-fg: #000;

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

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

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

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

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

175}

176

177.rust {

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

179 --fg: #262625;

180 --heading-fg: #262625;

181

182 --sidebar-bg: #3b2e2a;

183 --sidebar-fg: #c8c9db;

184 --sidebar-non-existant: #505254;

185 --sidebar-active: #e69f67;

186 --sidebar-spacer: #45373a;

187

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

189

190 --icons: #737480;

191 --icons-hover: #262625;

192

193 --links: #2b79a2;

194

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

196

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

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

199 --theme-hover: #99908a;

200

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

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

203

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

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

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

207

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

209 --searchbar-bg: #fafafa;

210 --searchbar-fg: #000;

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

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

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

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

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

216}

217

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

219 .light.no-js {

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

221 --fg: #ebeafa;

222 --heading-fg: #ebeafa;

223

224 --sidebar-bg: #292c2f;

225 --sidebar-fg: #a1adb8;

226 --sidebar-non-existant: #505254;

227 --sidebar-active: #3473ad;

228 --sidebar-spacer: #393939;

229

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

231

232 --icons: #43484d;

233 --icons-hover: #b3c0cc;

234

235 --links: #2b79a2;

236

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

238

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

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

241 --theme-hover: #1f2124;

242

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

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

245

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

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

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

249

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

251 --searchbar-bg: #b7b7b7;

252 --searchbar-fg: #000;

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

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

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

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

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

258 }

259}

260

261.colibri {

262 --bg: #3b224c;

263 --fg: #bcbdd0;

264 --heading-fg: #fff;

265

266 --sidebar-bg: #281733;

267 --sidebar-fg: #c8c9db;

268 --sidebar-non-existant: #505274;

269 --sidebar-active: #a4a0e8;

270 --sidebar-spacer: #2d334f;

271

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

273

274 --icons: #737480;

275 --icons-hover: #b7b9cc;

276

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

278 --links: #ECCDBA;

279

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

281

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

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

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

285

286 --quote-bg: #281733;

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

288

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

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

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

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

293

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

295 --searchbar-bg: #aeaec6;

296 --searchbar-fg: #000;

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

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

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

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

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

302}

303

304.colibri {

305/*

306 --bg: #ffffff;

307 --fg: #452859;

308 --fg: #5a5977;

309 --heading-fg: #281733;

310

311 --sidebar-bg: #281733;

312 --sidebar-fg: #c8c9db;

313 --sidebar-non-existant: #505274;

314 --sidebar-active: #a4a0e8;

315 --sidebar-spacer: #2d334f;

316

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

318

319 --icons: #737480;

320 --icons-hover: #b7b9cc;

321

322 --links: #6F44F0;

323

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

325

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

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

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

329

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

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

332

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

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

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

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

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

338

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

340 --searchbar-bg: #aeaec6;

341 --searchbar-fg: #000;

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

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

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

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

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

347*/

348}