css

:root { --font-zoom: 1; } body { font-family: "Verdana", "Open Sans", "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-style: normal; font-size: calc(1rem * var(--font-zoom)); } .module{ display:none } h1:has(span.header-section-number){ display:none; } .material-symbols-outlined{ font-size: calc(1rem * var(--font-zoom)); cursor:pointer; user-select:none; } summary::marker { color: #888; } #msg-galley{ position:fixed;gf top:0; right:0; height:100vh; min-width:calc(20rem * var(--font-zoom)); max-width:50%; z-index:12; background-color: transparent; pointer-events: none; padding: .5rem .5rem 0 0; font-family: "Roboto", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; font-variation-settings: "wdth" 100; } .msg-close{ position:absolute; top:calc(3px * var(--font-zoom)); right:calc(3px * var(--font-zoom)); padding:.05rem; background-color:red; color: white; font-weight:500; font-size:calc(.5rem * var(--font-zoom)); height:calc(1rem * var(--font-zoom)); cursor:pointer; } .msg-dialog{ position: relative; background-color:#eee; margin-bottom:.5rem; pointer-events: auto; border-radius:5px; border: 1px solid black; } .msg-button-{ margin: 0 .5rem .5rem 0; } .msg-button-bar{ background-color:#ddd; text-align:center; padding:.5rem .5rem .5rem; border-radius:0 0 5px 5px; } .msg-title{ background-color:darkblue; color:#eee; font-weight:500; border-radius:5px 5px 0 0; padding-left:.5rem; } .msg-message{ background-color:#eee; padding: .5rem; border-radius:0 0 5px 5px; } #page-data{ display:none } #menu{ top:0; left:-100px; position:fixed; display:none; background-color:#eee; padding:0; z-index:11; transition: .3s; height:100vh; min-width:20vw; max-width:75vw; overflow: auto; } #book-data{display:none} #menu-content{ padding:.6rem; } .menu-button{ padding:.2rem 1rem 0 .5rem; cursor:pointer; color:#888; } .menu-header{ top:0; position:sticky; background-color:#eee; opacity:1; margin:0; } #search-div{ width:200px; white-space: nowrap; } #search-div h6{ margin:1rem 0 0 0; font-size:14px; } #search-button{ padding-left:0; } #search-results{ font-size:12px; } .search-result{ margin-top:10px; padding:5px; cursor:pointer; } .search-result:hover{ background-color:white; } .search-result-title{ font-weight:bold; } .search-result-line{ margin:0 0 5px 10px; } .search-term{ background-color:yellow; } .chapter-result-link{ color:black; } .toc-section-container{ margin-left:.6rem; } .toc-text-container{ margin-left:1.6rem; } .chapter-section{ margin-top: calc(3rem * var(--font-zoom)); margin-bottom: calc(3rem * var(--font-zoom)); } .hide{ display:none } img{ max-width:100%; } .entry-header{ position:fixed; top:0; left: 0; width: 100%; transition:all 0.1s; padding: .1rem; -webkit-user-select: none; /* Safari */ user-select: none; /* Standard syntax */ background: rgba(200, 200, 200, 1.0); z-index:10; } button.nav{ border-radius:5px; } .nav{ position: fixed; bottom: 5px; opacity:1.0; transition:all 0.6s; pointer-events: all; } .dim-button:hover{opacity: 1.0;} .dim-button{opacity: .2;} .dim-header:hover{opacity: 1.0;} .dim-header{opacity: 0;} #prior-button { left: 5px; } #next-button { right: 5px; } .span-link{ cursor:pointer; color:green; } .span-link:hover{ text-decoration: underline; color:blue; } a:link {color: green; text-decoration:none} a:visited {color: green;} a:hover {background-color: #ddd;} a:active {color: green;} .book-title{ margin-top: 5rem; font-size:calc(3rem * var(--font-zoom)); text-align: center; font-weight: bold; } .book-author{ margin-top: 2rem; font-size:calc(2rem * var(--font-zoom)); text-align: center; } .book-toc{ text-align: center; margin-top:2rem; } .book-chapters{ display: inline-block; } .book-chapter{ text-align:left; padding-left: 1rem; text-indent: -1rem; margin-bottom: 0.3rem; } .tool { cursor:pointer; font-size:calc(18px * var(--font-zoom)); font-weight:300; vertical-align: middle; padding-left:.6rem; color:#666; } .lead-in{ margin-top:4rem; } .example, .indent, .category{ margin:1rem 0 0 1rem; } .category div:first-child{ color:red; } .example div:first-child{ color:red; font-style: italic; } h1{ font-size:1.5rem; color:#333; } h2, h3{ color:darkred; } p{ margin-top:0; } p.vignette{ color:red } .no-dot{ list-style-type: none; } ul.no-dot li{ padding-left: 1rem; text-indent: -1rem; margin-bottom: 0.3rem; } audio{ height:30px; } div.post-body{ max-width:900px; margin:0 auto; padding:1rem; background-color:white; padding-top:2rem; } div.index-boxnbt{ background-color:#eee; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; font-size: 18px; line-height: 1; } .monaco { width: 100%; margin: 1.25rem 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); } .monaco-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 6px 10px; background: #2d2d2d; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .monaco-bar-label { flex: 1; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: #6e7681; letter-spacing: 0.5px; text-transform: uppercase; padding-left: 4px; } .monaco-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: #8b949e; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .monaco-tool:hover { background: rgba(255, 255, 255, 0.1); color: #e6edf3; } .monaco-tool:active { background: rgba(255, 255, 255, 0.06); transform: scale(0.92); } .monaco-tool[data-action="run"]:hover { background: rgba(63, 185, 80, 0.18); color: #3fb950; } .editor-holder { background-color: #1e1e1e; padding: 8px 0; } .editor { margin: 0; padding: 0; } .console { background: #161b22; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 0 6px; position: relative; min-height: 36px; font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace; font-size: 13px; } .console-line { color: #c9d1d9; padding: 2px 40px 2px 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .console-line:first-of-type { margin-top: 2px; } .console-line.error { color: #f85149; background: rgba(248, 81, 73, 0.06); } span.exitButton { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: #6e7681; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } span.exitButton:hover { background: rgba(255, 255, 255, 0.1); color: #c9d1d9; } span.exitButton .material-symbols-outlined { font-size: 15px; } pre.code { color: #a8ff78; background: #0d1117; padding: 12px 16px; margin: 1.25rem 0; font-size: 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.07); overflow-x: auto; }