/* docs.rotorlab.app - shared chrome and article styles. Same design tokens as the RotorLab app: dark default, light theme via [data-theme="light"] on , accent #4d8bff. */ :root { --bg: #0f1318; --bg2: #141a21; --panel: #141a21; --line: #232a33; --line2: #2a323d; --ink: #e8edf3; --mut: #8b97a6; --accent: #4d8bff; --accent2: #7fc4ff; --cta: #2f7fe0; --code-bg: #10161d; --hover: #1d2530; --shadow: 0 12px 30px rgba(0, 0, 0, .45); } [data-theme="light"] { --bg: #f7f9fb; --bg2: #ffffff; --panel: #ffffff; --line: #e3e7ec; --line2: #d7dce2; --ink: #10151b; --mut: #5a6776; --accent: #1f6feb; --accent2: #1f6feb; --cta: #2f7fe0; --code-bg: #f1f4f8; --hover: #eef2f7; --shadow: 0 12px 30px rgba(20, 30, 45, .16); } * { box-sizing: border-box; } html { scrollbar-width: thin; scrollbar-color: #2c3744 transparent; scroll-behavior: smooth; } html[data-theme="light"] { scrollbar-color: #cbd3dc transparent; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 system-ui, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: #2c3744; border-radius: 8px; background-clip: padding-box; border: 2px solid transparent; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd3dc; } ::-webkit-scrollbar-track { background: transparent; } /* ---------------------------------------------------------------- top bar */ #topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px; background: var(--bg2); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); flex-shrink: 0; } .brand:hover { text-decoration: none; } .mark { height: 22px; width: auto; display: block; } .bname { font-weight: 700; font-size: 15px; letter-spacing: .2px; } .btag { font-size: 12px; color: var(--mut); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line2); } .searchwrap { position: relative; flex: 1; max-width: 480px; margin: 0 auto; } #search { width: 100%; height: 34px; padding: 0 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); border-radius: 8px; font: inherit; font-size: 13.5px; outline: none; } #search:focus { border-color: var(--accent); } #searchresults { position: absolute; top: 40px; left: 0; right: 0; z-index: 60; max-height: 60vh; overflow: auto; padding: 6px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); } #searchresults a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); } #searchresults a:hover, #searchresults a.sel { background: var(--hover); text-decoration: none; } #searchresults .rt { font-weight: 600; font-size: 13.5px; } #searchresults .rs { color: var(--mut); font-size: 12px; } #searchresults .rnone { padding: 10px; color: var(--mut); font-size: 13px; } .toplinks { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .applink { padding: 6px 12px; border-radius: 7px; background: var(--cta); color: #fff; font-size: 13px; font-weight: 600; } .applink:hover { text-decoration: none; filter: brightness(1.08); } .iconbtn, #sbtoggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; } .iconbtn:hover, #sbtoggle:hover { border-color: var(--accent); } #sbtoggle { display: none; flex-shrink: 0; } /* ---------------------------------------------------------------- layout */ #shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: 0; max-width: 1400px; margin: 0 auto; } #sidebar { position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; padding: 18px 10px 40px 16px; border-right: 1px solid var(--line); } .navsec { margin-bottom: 2px; } .navsec summary { cursor: pointer; list-style: none; padding: 7px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); display: flex; align-items: center; justify-content: space-between; } .navsec summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transform: rotate(-90deg); transition: transform .15s; } .navsec[open] summary::after { transform: none; } .navsec summary::-webkit-details-marker { display: none; } .navsec summary:hover { background: var(--hover); color: var(--ink); } .navlinks { display: flex; flex-direction: column; padding: 2px 0 6px; } .navlinks a { padding: 5px 10px 5px 18px; border-radius: 7px; color: var(--ink); opacity: .85; font-size: 13.5px; } .navlinks a:hover { background: var(--hover); opacity: 1; text-decoration: none; } .navlinks a.cur { color: var(--accent2); font-weight: 600; opacity: 1; } #main { padding: 26px 40px 40px; min-width: 0; } .crumbs { display: flex; gap: 8px; font-size: 12.5px; color: var(--mut); margin-bottom: 6px; } .crumbs a { color: var(--mut); } .onpage { position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; padding: 26px 16px 40px 4px; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; } .onpage-t { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); } .onpage a { color: var(--mut); padding: 3px 8px; border-radius: 6px; display: block; } .onpage a:hover { color: var(--ink); background: var(--hover); text-decoration: none; } .onpage a.toc3 { padding-left: 20px; } /* ---------------------------------------------------------------- article */ #doc h1 { font-size: 30px; line-height: 1.25; margin: 8px 0 14px; letter-spacing: -.3px; } #doc h2 { font-size: 21px; margin: 34px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); } #doc h3 { font-size: 16.5px; margin: 24px 0 8px; } #doc h4 { font-size: 14.5px; margin: 18px 0 6px; color: var(--mut); } #doc p { margin: 10px 0; } #doc li { margin: 4px 0; } #doc ul, #doc ol { padding-left: 26px; margin: 10px 0; } #doc hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; } #doc img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); } #doc blockquote { margin: 12px 0; padding: 2px 16px; border-left: 3px solid var(--line2); color: var(--mut); } .hlink { margin-left: 8px; opacity: 0; font-weight: 400; font-size: .85em; color: var(--mut); } #doc h2:hover .hlink, #doc h3:hover .hlink, #doc h4:hover .hlink { opacity: 1; } #doc code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 5px; font: 12.5px/1.5 ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; } .codewrap { position: relative; margin: 14px 0; } .codewrap pre { margin: 0; padding: 13px 15px; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; } .codewrap pre code { background: none; border: 0; padding: 0; font-size: 13px; display: block; } .copybtn { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 9px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); color: var(--mut); font-size: 11.5px; cursor: pointer; opacity: 0; transition: opacity .12s; } .codewrap:hover .copybtn { opacity: 1; } .copybtn:hover { color: var(--ink); border-color: var(--accent); } .tablewrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; } #doc table { border-collapse: collapse; width: 100%; font-size: 13.5px; } #doc th, #doc td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } #doc th { background: var(--bg2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); } #doc tr:last-child td { border-bottom: 0; } .admon { margin: 14px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid; } .admon p { margin: 6px 0; } .admon-t { font-weight: 700; font-size: 13px; } .admon-note { border-color: #2b4a75; background: rgba(77, 139, 255, .08); } .admon-note .admon-t { color: var(--accent2); } .admon-tip { border-color: #2c5c3f; background: rgba(63, 185, 106, .08); } .admon-tip .admon-t { color: #3fb96a; } .admon-warning { border-color: #6e5426; background: rgba(224, 165, 59, .1); } .admon-warning .admon-t { color: #e0a53b; } [data-theme="light"] .admon-note { border-color: #b9d0f2; } [data-theme="light"] .admon-tip { border-color: #b7dfc5; } [data-theme="light"] .admon-warning { border-color: #ecd9ae; } /* ---------------------------------------------------------------- home */ .hero { padding: 26px 0 8px; max-width: 640px; } .hero h1 { font-size: 34px; margin: 0 0 12px; letter-spacing: -.4px; } .hero p { color: var(--mut); font-size: 16px; } .hero-cta { display: flex; gap: 10px; margin-top: 18px; } .btn { padding: 9px 18px; border-radius: 8px; background: var(--cta); color: #fff; font-weight: 600; font-size: 14px; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn-ghost { background: transparent; border: 1px solid var(--line2); color: var(--ink); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 26px; } .card { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } #doc .card h2 { margin: 0 0 8px; font-size: 15px; border: 0; padding: 0; } .cardlinks { display: flex; flex-direction: column; } .cardlinks a { padding: 3.5px 0; font-size: 13.5px; } /* ---------------------------------------------------------------- nav ends */ .pagenav { display: flex; gap: 12px; margin-top: 36px; } .pn { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14px; } .pn span { display: block; font-size: 11.5px; font-weight: 400; color: var(--mut); margin-bottom: 2px; } .pn:hover { border-color: var(--accent); text-decoration: none; } .pn-next { text-align: right; } #foot { margin-top: 44px; padding: 18px 0 4px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; color: var(--mut); font-size: 12.5px; } #foot a { color: inherit; } #foot a:hover { color: var(--accent); } /* ---------------------------------------------------------------- narrow */ @media (max-width: 1160px) { #shell { grid-template-columns: 260px minmax(0, 1fr); } .onpage { display: none; } } @media (max-width: 860px) { #shell { grid-template-columns: minmax(0, 1fr); } #sbtoggle { display: inline-flex; } #sidebar { display: none; position: fixed; top: 54px; left: 0; bottom: 0; z-index: 55; width: 290px; background: var(--bg2); border-right: 1px solid var(--line2); box-shadow: var(--shadow); } #sidebar.open { display: block; } #main { padding: 20px 18px 40px; } .btag { display: none; } .applink { display: none; } }