chrome.css
1 /* CSS for UI elements (a.k.a. chrome) */ 2 3 @import 'variables.css'; 4 5 ::-webkit-scrollbar { 6 background: var(--bg); 7 } 8 ::-webkit-scrollbar-thumb { 9 background: var(--scrollbar); 10 } 11 html { 12 scrollbar-color: var(--scrollbar) var(--bg); 13 } 14 #searchresults a, 15 .content a:link, 16 footer a:link, 17 a:visited, 18 a > .hljs { 19 color: var(--links); 20 } 21 22 /* Menu Bar */ 23 24 #menu-bar, 25 #menu-bar-hover-placeholder { 26 z-index: 101; 27 margin: auto calc(0px - var(--page-padding)); 28 } 29 #menu-bar { 30 position: relative; 31 display: flex; 32 flex-wrap: wrap; 33 background-color: var(--bg); 34 border-bottom-color: var(--bg); 35 border-bottom-width: 1px; 36 border-bottom-style: solid; 37 } 38 #menu-bar.sticky, 39 .js #menu-bar-hover-placeholder:hover + #menu-bar, 40 .js #menu-bar:hover, 41 .js.sidebar-visible #menu-bar { 42 position: -webkit-sticky; 43 position: sticky; 44 top: 0 !important; 45 } 46 #menu-bar-hover-placeholder { 47 position: sticky; 48 position: -webkit-sticky; 49 top: 0; 50 height: var(--menu-bar-height); 51 } 52 #menu-bar.bordered { 53 border-bottom-color: var(--table-border-color); 54 } 55 #menu-bar i, #menu-bar .icon-button { 56 position: relative; 57 padding: 0 8px; 58 z-index: 10; 59 line-height: var(--menu-bar-height); 60 cursor: pointer; 61 transition: color 0.5s; 62 } 63 @media only screen and (max-width: 420px) { 64 #menu-bar i, #menu-bar .icon-button { 65 padding: 0 5px; 66 } 67 } 68 69 .icon-button { 70 border: none; 71 background: none; 72 padding: 0; 73 color: inherit; 74 } 75 .icon-button i { 76 margin: 0; 77 } 78 79 .right-buttons { 80 margin: 0 15px; 81 } 82 .right-buttons a { 83 text-decoration: none; 84 } 85 86 .left-buttons { 87 display: flex; 88 margin: 0 5px; 89 } 90 .no-js .left-buttons { 91 display: none; 92 } 93 94 .menu-title { 95 display: inline-block; 96 font-weight: 200; 97 font-size: 2rem; 98 line-height: var(--menu-bar-height); 99 text-align: center; 100 margin: 0; 101 flex: 1; 102 white-space: nowrap; 103 overflow: hidden; 104 text-overflow: ellipsis; 105 } 106 .js .menu-title { 107 cursor: pointer; 108 } 109 110 .menu-bar, 111 .menu-bar:visited, 112 .nav-chapters, 113 .nav-chapters:visited, 114 .mobile-nav-chapters, 115 .mobile-nav-chapters:visited, 116 .menu-bar .icon-button, 117 .menu-bar a i { 118 color: var(--icons); 119 } 120 121 .menu-bar i:hover, 122 .menu-bar .icon-button:hover, 123 .nav-chapters:hover, 124 .mobile-nav-chapters i:hover { 125 color: var(--icons-hover); 126 } 127 128 /* Nav Icons */ 129 130 .nav-chapters { 131 font-size: 2.5em; 132 text-align: center; 133 text-decoration: none; 134 135 position: fixed; 136 top: 0; 137 bottom: 0; 138 margin: 0; 139 max-width: 150px; 140 min-width: 90px; 141 142 display: flex; 143 justify-content: center; 144 align-content: center; 145 flex-direction: column; 146 147 transition: color 0.5s, background-color 0.5s; 148 } 149 150 .nav-chapters:hover { 151 text-decoration: none; 152 background-color: var(--theme-hover); 153 transition: background-color 0.15s, color 0.15s; 154 } 155 156 .nav-wrapper { 157 margin-top: 50px; 158 display: none; 159 } 160 161 .mobile-nav-chapters { 162 font-size: 2.5em; 163 text-align: center; 164 text-decoration: none; 165 width: 90px; 166 border-radius: 5px; 167 background-color: var(--sidebar-bg); 168 } 169 170 .previous { 171 float: left; 172 } 173 174 .next { 175 float: right; 176 right: var(--page-padding); 177 } 178 179 @media only screen and (max-width: 1080px) { 180 .nav-wide-wrapper { display: none; } 181 .nav-wrapper { display: block; } 182 } 183 184 @media only screen and (max-width: 1380px) { 185 .sidebar-visible .nav-wide-wrapper { display: none; } 186 .sidebar-visible .nav-wrapper { display: block; } 187 } 188 189 /* Inline code */ 190 191 :not(pre) > .hljs { 192 display: inline; 193 padding: 0.1em 0.3em; 194 border-radius: 3px; 195 } 196 197 :not(pre):not(a) > .hljs { 198 color: var(--inline-code-color); 199 overflow-x: initial; 200 } 201 202 a:hover > .hljs { 203 text-decoration: underline; 204 } 205 206 pre { 207 position: relative; 208 } 209 pre > .buttons { 210 position: absolute; 211 z-index: 100; 212 right: 5px; 213 top: 5px; 214 215 color: var(--sidebar-fg); 216 cursor: pointer; 217 } 218 pre > .buttons :hover { 219 color: var(--sidebar-active); 220 } 221 pre > .buttons i { 222 margin-left: 8px; 223 } 224 pre > .buttons button { 225 color: inherit; 226 background: transparent; 227 border: none; 228 cursor: inherit; 229 } 230 pre > .result { 231 margin-top: 10px; 232 } 233 234 /* Search */ 235 236 #searchresults a { 237 text-decoration: none; 238 } 239 240 mark { 241 border-radius: 2px; 242 padding: 0 3px 1px 3px; 243 margin: 0 -3px -1px -3px; 244 background-color: var(--search-mark-bg); 245 transition: background-color 300ms linear; 246 cursor: pointer; 247 } 248 249 mark.fade-out { 250 background-color: rgba(0,0,0,0) !important; 251 cursor: auto; 252 } 253 254 .searchbar-outer { 255 margin-left: auto; 256 margin-right: auto; 257 max-width: var(--content-max-width); 258 } 259 260 #searchbar { 261 width: 100%; 262 margin: 5px auto 0px auto; 263 padding: 10px 16px; 264 transition: box-shadow 300ms ease-in-out; 265 border: 1px solid var(--searchbar-border-color); 266 border-radius: 3px; 267 background-color: var(--searchbar-bg); 268 color: var(--searchbar-fg); 269 } 270 #searchbar:focus, 271 #searchbar.active { 272 box-shadow: 0 0 3px var(--searchbar-shadow-color); 273 } 274 275 .searchresults-header { 276 font-weight: bold; 277 font-size: 1em; 278 padding: 18px 0 0 5px; 279 color: var(--searchresults-header-fg); 280 } 281 282 .searchresults-outer { 283 margin-left: auto; 284 margin-right: auto; 285 max-width: var(--content-max-width); 286 border-bottom: 1px dashed var(--searchresults-border-color); 287 } 288 289 ul#searchresults { 290 list-style: none; 291 padding-left: 20px; 292 } 293 ul#searchresults li { 294 margin: 10px 0px; 295 padding: 2px; 296 border-radius: 2px; 297 } 298 ul#searchresults li.focus { 299 background-color: var(--searchresults-li-bg); 300 } 301 ul#searchresults span.teaser { 302 display: block; 303 clear: both; 304 margin: 5px 0 0 20px; 305 font-size: 0.8em; 306 } 307 ul#searchresults span.teaser em { 308 font-weight: bold; 309 font-style: normal; 310 } 311 312 /* Sidebar */ 313 314 .sidebar { 315 position: fixed; 316 left: 0; 317 top: 0; 318 bottom: 0; 319 width: var(--sidebar-width); 320 font-size: 0.875em; 321 box-sizing: border-box; 322 -webkit-overflow-scrolling: touch; 323 overscroll-behavior-y: contain; 324 background-color: var(--sidebar-bg); 325 color: var(--sidebar-fg); 326 font-family: "Open Sans", sans-serif; 327 } 328 .sidebar-resizing { 329 -moz-user-select: none; 330 -webkit-user-select: none; 331 -ms-user-select: none; 332 user-select: none; 333 } 334 .js:not(.sidebar-resizing) .sidebar { 335 transition: transform 0.3s; /* Animation: slide away */ 336 } 337 .sidebar code { 338 line-height: 2em; 339 } 340 .sidebar .sidebar-scrollbox { 341 overflow-y: auto; 342 position: absolute; 343 top: 0; 344 bottom: 0; 345 left: 0; 346 right: 0; 347 padding: 10px 10px; 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 line-height: 2.2em; 385 } 386 387 .chapter ol { 388 width: 100%; 389 } 390 391 .chapter li { 392 display: flex; 393 color: var(--sidebar-non-existant); 394 } 395 .chapter li a { 396 display: block; 397 padding: 0; 398 text-decoration: none; 399 color: var(--sidebar-fg); 400 } 401 402 .chapter li a:hover { 403 color: var(--sidebar-active); 404 } 405 406 .chapter li a.active { 407 color: var(--sidebar-active); 408 } 409 410 .chapter li > a.toggle { 411 cursor: pointer; 412 display: block; 413 margin-left: auto; 414 padding: 0 10px; 415 user-select: none; 416 opacity: 0.68; 417 } 418 419 .chapter li > a.toggle div { 420 transition: transform 0.5s; 421 } 422 423 /* collapse the section */ 424 .chapter li:not(.expanded) + li > ol { 425 display: none; 426 } 427 428 .chapter li.chapter-item { 429 line-height: 1.5em; 430 margin-top: 0.6em; 431 } 432 433 .chapter li.expanded > a.toggle div { 434 transform: rotate(90deg); 435 } 436 437 .spacer { 438 width: 100%; 439 height: 3px; 440 margin: 5px 0px; 441 } 442 .chapter .spacer { 443 background-color: var(--sidebar-spacer); 444 } 445 446 @media (-moz-touch-enabled: 1), (pointer: coarse) { 447 .chapter li a { padding: 5px 0; } 448 .spacer { margin: 10px 0; } 449 } 450 451 .section { 452 list-style: none outside none; 453 padding-left: 20px; 454 line-height: 1.9em; 455 } 456 457 /* Theme Menu Popup */ 458 459 .theme-popup { 460 position: absolute; 461 left: 10px; 462 top: var(--menu-bar-height); 463 z-index: 1000; 464 border-radius: 4px; 465 font-size: 0.7em; 466 color: var(--fg); 467 background: var(--theme-popup-bg); 468 border: 1px solid var(--theme-popup-border); 469 margin: 0; 470 padding: 0; 471 list-style: none; 472 display: none; 473 } 474 .theme-popup .default { 475 color: var(--icons); 476 } 477 .theme-popup .theme { 478 width: 100%; 479 border: 0; 480 margin: 0; 481 padding: 2px 10px; 482 line-height: 25px; 483 white-space: nowrap; 484 text-align: left; 485 cursor: pointer; 486 color: inherit; 487 background: inherit; 488 font-size: inherit; 489 } 490 .theme-popup .theme:hover { 491 background-color: var(--theme-hover); 492 } 493 .theme-popup .theme:hover:first-child, 494 .theme-popup .theme:hover:last-child { 495 border-top-left-radius: inherit; 496 border-top-right-radius: inherit; 497 } 498 499 footer { 500 display: block !important; 501 position: fixed; 502 bottom: 0; 503 left: 0; 504 width: 100%; 505 background: var(--bg, #ffffff); /* fallback if variable missing */ 506 color: var(--fg, #000000); /* fallback if variable missing */ 507 text-align: center; 508 padding: 0.5em 0.5em 0.75em; 509 border-top: 1px solid #ccc; 510 z-index: 1000; 511 }