book/theme/css/chrome.css · helix

git.iko.soy/helix

on 0b8a00a help sign in

helix/book/theme/css/chrome.css

499 lines 9.4 kB history raw

1/* CSS for UI elements (a.k.a. chrome) */

3@import 'variables.css';

5::-webkit-scrollbar {

6 background: var(--bg);

8::-webkit-scrollbar-thumb {

9 background: var(--scrollbar);

10}

11html {

12 scrollbar-color: var(--scrollbar) var(--bg);

13}

14#searchresults a,

15.content a:link,

16a:visited,

17a > .hljs {

18 color: var(--links);

19}

20.content a:hover {

21 text-decoration: underline;

22}

24/* Menu Bar */

26#menu-bar,

27#menu-bar-hover-placeholder {

28 z-index: 101;

29 margin: auto calc(0px - var(--page-padding));

30}

31#menu-bar {

32 position: relative;

33 display: flex;

34 flex-wrap: wrap;

35 background-color: var(--bg);

36 border-bottom-color: var(--bg);

37 border-bottom-width: 1px;

38 border-bottom-style: solid;

39}

40#menu-bar.sticky,

41.js #menu-bar-hover-placeholder:hover + #menu-bar,

42.js #menu-bar:hover,

43.js.sidebar-visible #menu-bar {

44 position: -webkit-sticky;

45 position: sticky;

46 top: 0 !important;

47}

48#menu-bar-hover-placeholder {

49 position: sticky;

50 position: -webkit-sticky;

51 top: 0;

52 height: var(--menu-bar-height);

53}

54#menu-bar.bordered {

55 border-bottom-color: var(--table-border-color);

56}

57#menu-bar i, #menu-bar .icon-button {

58 position: relative;

59 padding: 0 8px;

60 z-index: 10;

61 line-height: var(--menu-bar-height);

62 cursor: pointer;

63 transition: color 0.5s;

64}

65@media only screen and (max-width: 420px) {

66 #menu-bar i, #menu-bar .icon-button {

67 padding: 0 5px;

68 }

69}

71.icon-button {

72 border: none;

73 background: none;

74 padding: 0;

75 color: inherit;

76}

77.icon-button i {

78 margin: 0;

79}

81.right-buttons {

82 margin: 0 15px;

83}

84.right-buttons a {

85 text-decoration: none;

86}

88.left-buttons {

89 display: flex;

90 margin: 0 5px;

91}

92.no-js .left-buttons {

93 display: none;

94}

96.menu-title {

97 display: inline-block;

98 font-weight: 200;

99 font-size: 2.4rem;

100 line-height: var(--menu-bar-height);

101 text-align: center;

102 margin: 0;

103 flex: 1;

104 white-space: nowrap;

105 overflow: hidden;

106 text-overflow: ellipsis;

107}

108.js .menu-title {

109 cursor: pointer;

110}

111

112.menu-bar,

113.menu-bar:visited,

114.nav-chapters,

115.nav-chapters:visited,

116.mobile-nav-chapters,

117.mobile-nav-chapters:visited,

118.menu-bar .icon-button,

119.menu-bar a i {

120 color: var(--icons);

121}

122

123.menu-bar i:hover,

124.menu-bar .icon-button:hover,

125.nav-chapters:hover,

126.mobile-nav-chapters i:hover {

127 color: var(--icons-hover);

128}

129

130/* Nav Icons */

131

132.nav-chapters {

133 font-size: 2.5em;

134 text-align: center;

135 text-decoration: none;

136

137 position: fixed;

138 top: 0;

139 bottom: 0;

140 margin: 0;

141 max-width: 150px;

142 min-width: 90px;

143

144 display: flex;

145 justify-content: center;

146 align-content: center;

147 flex-direction: column;

148

149 transition: color 0.5s, background-color 0.5s;

150}

151

152.nav-chapters:hover {

153 text-decoration: none;

154 background-color: var(--theme-hover);

155 transition: background-color 0.15s, color 0.15s;

156}

157

158.nav-wrapper {

159 margin-top: 50px;

160 display: none;

161}

162

163.mobile-nav-chapters {

164 font-size: 2.5em;

165 text-align: center;

166 text-decoration: none;

167 width: 90px;

168 border-radius: 5px;

169 background-color: var(--sidebar-bg);

170}

171

172.previous {

173 float: left;

174}

175

176.next {

177 float: right;

178 right: var(--page-padding);

179}

180

181@media only screen and (max-width: 1080px) {

182 .nav-wide-wrapper { display: none; }

183 .nav-wrapper { display: block; }

184}

185

186@media only screen and (max-width: 1380px) {

187 .sidebar-visible .nav-wide-wrapper { display: none; }

188 .sidebar-visible .nav-wrapper { display: block; }

189}

190

191/* Inline code */

192

193:not(pre) > .hljs {

194 display: inline;

195 padding: 0.1em 0.3em;

196 border-radius: 3px;

197}

198

199:not(pre):not(a):not(td):not(p) > .hljs {

200 color: var(--inline-code-color);

201 overflow-x: initial;

202}

203

204a:hover > .hljs {

205 text-decoration: underline;

206}

207

208pre {

209 position: relative;

210}

211pre > .buttons {

212 position: absolute;

213 z-index: 100;

214 right: 5px;

215 top: 5px;

216

217 color: var(--sidebar-fg);

218 cursor: pointer;

219}

220pre > .buttons :hover {

221 color: var(--sidebar-active);

222}

223pre > .buttons i {

224 margin-left: 8px;

225}

226pre > .buttons button {

227 color: inherit;

228 background: transparent;

229 border: none;

230 cursor: inherit;

231}

232pre > .result {

233 margin-top: 10px;

234}

235

236/* Search */

237

238#searchresults a {

239 text-decoration: none;

240}

241

242mark {

243 border-radius: 2px;

244 padding: 0 3px 1px 3px;

245 margin: 0 -3px -1px -3px;

246 background-color: var(--search-mark-bg);

247 transition: background-color 300ms linear;

248 cursor: pointer;

249}

250

251mark.fade-out {

252 background-color: rgba(0,0,0,0) !important;

253 cursor: auto;

254}

255

256.searchbar-outer {

257 margin-left: auto;

258 margin-right: auto;

259 max-width: var(--content-max-width);

260}

261

262#searchbar {

263 width: 100%;

264 margin: 5px auto 0px auto;

265 padding: 10px 16px;

266 transition: box-shadow 300ms ease-in-out;

267 border: 1px solid var(--searchbar-border-color);

268 border-radius: 3px;

269 background-color: var(--searchbar-bg);

270 color: var(--searchbar-fg);

271}

272#searchbar:focus,

273#searchbar.active {

274 box-shadow: 0 0 3px var(--searchbar-shadow-color);

275}

276

277.searchresults-header {

278 font-weight: bold;

279 font-size: 1em;

280 padding: 18px 0 0 5px;

281 color: var(--searchresults-header-fg);

282}

283

284.searchresults-outer {

285 margin-left: auto;

286 margin-right: auto;

287 max-width: var(--content-max-width);

288 border-bottom: 1px dashed var(--searchresults-border-color);

289}

290

291ul#searchresults {

292 list-style: none;

293 padding-left: 20px;

294}

295ul#searchresults li {

296 margin: 10px 0px;

297 padding: 2px;

298 border-radius: 2px;

299}

300ul#searchresults li.focus {

301 background-color: var(--searchresults-li-bg);

302}

303ul#searchresults span.teaser {

304 display: block;

305 clear: both;

306 margin: 5px 0 0 20px;

307 font-size: 0.8em;

308}

309ul#searchresults span.teaser em {

310 font-weight: bold;

311 font-style: normal;

312}

313

314/* Sidebar */

315

316.sidebar {

317 position: fixed;

318 left: 0;

319 top: 0;

320 bottom: 0;

321 width: var(--sidebar-width);

322 font-size: 0.875em;

323 box-sizing: border-box;

324 -webkit-overflow-scrolling: touch;

325 overscroll-behavior-y: contain;

326 background-color: var(--sidebar-bg);

327 color: var(--sidebar-fg);

328}

329.sidebar-resizing {

330 -moz-user-select: none;

331 -webkit-user-select: none;

332 -ms-user-select: none;

333 user-select: none;

334}

335.js:not(.sidebar-resizing) .sidebar {

336 transition: transform 0.3s; /* Animation: slide away */

337}

338.sidebar code {

339 line-height: 2em;

340}

341.sidebar .sidebar-scrollbox {

342 overflow-y: auto;

343 position: absolute;

344 top: 0;

345 bottom: 0;

346 left: 0;

347 right: 0;

348}

349.sidebar .sidebar-resize-handle {

350 position: absolute;

351 cursor: col-resize;

352 width: 0;

353 right: 0;

354 top: 0;

355 bottom: 0;

356}

357.js .sidebar .sidebar-resize-handle {

358 cursor: col-resize;

359 width: 5px;

360}

361.sidebar-hidden .sidebar {

362 transform: translateX(calc(0px - var(--sidebar-width)));

363}

364.sidebar::-webkit-scrollbar {

365 background: var(--sidebar-bg);

366}

367.sidebar::-webkit-scrollbar-thumb {

368 background: var(--scrollbar);

369}

370

371.sidebar-visible .page-wrapper {

372 transform: translateX(var(--sidebar-width));

373}

374@media only screen and (min-width: 620px) {

375 .sidebar-visible .page-wrapper {

376 transform: none;

377 margin-left: var(--sidebar-width);

378 }

379}

380

381.chapter {

382 list-style: none outside none;

383 padding-left: 0;

384 margin: .25rem 0;

385}

386

387.chapter ol {

388 width: 100%;

389}

390

391.chapter li {

392 display: flex;

393 color: var(--sidebar-non-existent);

394}

395.chapter li a {

396 display: block;

397 text-decoration: none;

398 color: var(--sidebar-fg);

399}

400

401.chapter li a:hover {

402 color: var(--sidebar-active);

403}

404

405.chapter li a.active {

406 color: var(--sidebar-active);

407}

408

409.chapter li > a.toggle {

410 cursor: pointer;

411 display: block;

412 margin-left: auto;

413 padding: 0 10px;

414 user-select: none;

415 opacity: 0.68;

416}

417

418.chapter li > a.toggle div {

419 transition: transform 0.5s;

420}

421

422/* collapse the section */

423.chapter li:not(.expanded) + li > ol {

424 display: none;

425}

426

427.chapter li.chapter-item {

428 padding: 1rem 1.5rem;

429}

430

431.chapter .section li.chapter-item {

432 padding: .5rem .5rem 0 .5rem;

433}

434

435.chapter li.expanded > a.toggle div {

436 transform: rotate(90deg);

437}

438

439.spacer {

440 width: 100%;

441 height: 3px;

442 margin: 5px 0px;

443}

444.chapter .spacer {

445 background-color: var(--sidebar-spacer);

446}

447

448@media (-moz-touch-enabled: 1), (pointer: coarse) {

449 .chapter li a { padding: 5px 0; }

450 .spacer { margin: 10px 0; }

451}

452

453.section {

454 list-style: none outside none;

455 padding-left: 2rem;

456 line-height: 1.9em;

457}

458

459/* Theme Menu Popup */

460

461.theme-popup {

462 position: absolute;

463 left: 10px;

464 top: var(--menu-bar-height);

465 z-index: 1000;

466 border-radius: 4px;

467 font-size: 0.7em;

468 color: var(--fg);

469 background: var(--theme-popup-bg);

470 border: 1px solid var(--theme-popup-border);

471 margin: 0;

472 padding: 0;

473 list-style: none;

474 display: none;

475}

476.theme-popup .default {

477 color: var(--icons);

478}

479.theme-popup .theme {

480 width: 100%;

481 border: 0;

482 margin: 0;

483 padding: 2px 10px;

484 line-height: 25px;

485 white-space: nowrap;

486 text-align: left;

487 cursor: pointer;

488 color: inherit;

489 background: inherit;

490 font-size: inherit;

491}

492.theme-popup .theme:hover {

493 background-color: var(--theme-hover);

494}

495.theme-popup .theme:hover:first-child,

496.theme-popup .theme:hover:last-child {

497 border-top-left-radius: inherit;

498 border-top-right-radius: inherit;

499}