rune
854fd02fad
A search box above the Contents list filters TOC entries by each linked section's full text content (not just the link title), so e.g. searching "european" surfaces "Slash Commands" via its command history date-format note. Pure vanilla JS/CSS, no dependencies -- the page is a static file opened directly in the default browser. Tested interactively in Safari Technology Preview: filtering, no-results state, reset, and click-through navigation all verified working, in both the matched and empty-query cases.
416 lines
7.0 KiB
CSS
416 lines
7.0 KiB
CSS
/* oAI Help Stylesheet - Apple Human Interface Guidelines */
|
|
|
|
:root {
|
|
--primary-color: #007AFF;
|
|
--secondary-color: #5856D6;
|
|
--success-color: #34C759;
|
|
--warning-color: #FF9500;
|
|
--error-color: #FF3B30;
|
|
--text-primary: #000000;
|
|
--text-secondary: #6E6E73;
|
|
--background: #FFFFFF;
|
|
--surface: #F5F5F7;
|
|
--border: #D1D1D6;
|
|
--code-bg: #F5F5F7;
|
|
--tip-bg: #E3F2FD;
|
|
--warning-bg: #FFF3E0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary-color: #0A84FF;
|
|
--secondary-color: #5E5CE6;
|
|
--success-color: #32D74B;
|
|
--warning-color: #FF9F0A;
|
|
--error-color: #FF453A;
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #A1A1A6;
|
|
--background: #1C1C1E;
|
|
--surface: #2C2C2E;
|
|
--border: #38383A;
|
|
--code-bg: #2C2C2E;
|
|
--tip-bg: #1A2631;
|
|
--warning-bg: #2B2116;
|
|
}
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
background: var(--background);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 48px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.app-icon {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin: 0 auto 24px;
|
|
display: block;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 19px;
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Table of Contents */
|
|
nav.toc {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 40px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
nav.toc h2 {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.toc-search {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.toc-search input[type="search"] {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
padding: 10px 14px;
|
|
color: var(--text-primary);
|
|
background: var(--background);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
|
|
.toc-search input[type="search"]:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.toc-no-results {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
nav.toc ul {
|
|
list-style: none;
|
|
}
|
|
|
|
nav.toc li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
nav.toc a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
nav.toc a:hover {
|
|
opacity: 0.7;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Main Content */
|
|
main {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 56px;
|
|
scroll-margin-top: 20px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-top: 32px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Lists */
|
|
ul, ol {
|
|
margin-bottom: 16px;
|
|
margin-left: 24px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
ul.provider-list {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
ul.provider-list li {
|
|
padding-left: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
ul.provider-list li::before {
|
|
content: "•";
|
|
color: var(--primary-color);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
/* Steps */
|
|
.steps {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.steps h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.steps ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.steps li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.steps li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Code and Commands */
|
|
code {
|
|
font-family: "SF Mono", Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
font-size: 14px;
|
|
background: var(--code-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
code.command {
|
|
display: block;
|
|
padding: 12px;
|
|
margin: 8px 0;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Keyboard Shortcuts */
|
|
kbd {
|
|
display: inline-block;
|
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 3px 8px;
|
|
background: linear-gradient(to bottom, var(--surface) 0%, var(--background) 100%);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Definition Lists (for commands) */
|
|
dl.commands,
|
|
dl.shortcuts {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
dl.commands dt,
|
|
dl.shortcuts dt {
|
|
font-family: "SF Mono", Monaco, Menlo, monospace;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
background: var(--code-bg);
|
|
padding: 10px 12px;
|
|
border-radius: 8px 8px 0 0;
|
|
border: 1px solid var(--border);
|
|
border-bottom: none;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
dl.commands dt:first-child,
|
|
dl.shortcuts dt:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
dl.commands dd,
|
|
dl.shortcuts dd {
|
|
background: var(--surface);
|
|
padding: 12px;
|
|
border-radius: 0 0 8px 8px;
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Callout Boxes */
|
|
.tip,
|
|
.note,
|
|
.warning {
|
|
padding: 16px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid;
|
|
}
|
|
|
|
.tip {
|
|
background: var(--tip-bg);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
.note {
|
|
background: var(--surface);
|
|
border-left-color: var(--secondary-color);
|
|
}
|
|
|
|
.warning {
|
|
background: var(--warning-bg);
|
|
border-left-color: var(--warning-color);
|
|
}
|
|
|
|
.tip strong,
|
|
.note strong,
|
|
.warning strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Examples */
|
|
.example {
|
|
background: var(--surface);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin: 20px 0;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.example p {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.example p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.example em {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
text-align: center;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
section {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
nav.toc {
|
|
page-break-after: always;
|
|
}
|
|
}
|