91 lines
7.5 KiB
CSS
91 lines
7.5 KiB
CSS
/* usemagpie.ai on Omarchy (omarchy.js): the palette is the visitor's theme,
|
||
set on :root.omarchy; this is Omarchy's look — its monospace font, square
|
||
corners (Hyprland's rounding), no shadows or glass, flat surfaces framed
|
||
by a line, the accent on what acts and what's chosen. */
|
||
html.omarchy body { font-family: var(--om-font), monospace; font-size: 15px; -webkit-font-smoothing: auto; }
|
||
html.omarchy body, html.omarchy :lang(ja) body { font-family: var(--om-font), monospace; }
|
||
html.omarchy code, html.omarchy pre, html.omarchy kbd, html.omarchy .mono, html.omarchy button, html.omarchy input, html.omarchy select { font-family: var(--om-font), monospace; }
|
||
html.omarchy *, html.omarchy *::before, html.omarchy *::after { border-radius: var(--om-radius) !important; box-shadow: none !important; }
|
||
html.omarchy ::selection { background: var(--om-sel); color: var(--ink); }
|
||
html.omarchy :focus-visible { outline: 1px solid var(--om-accent); outline-offset: 2px; }
|
||
html.omarchy { scrollbar-color: var(--line) var(--bg); }
|
||
|
||
/* headings: the terminal's weight and none of the display tracking */
|
||
html.omarchy h1, html.omarchy h2, html.omarchy h3, html.omarchy h4 { letter-spacing: -.01em !important; font-weight: 700; }
|
||
html.omarchy .hero h1, html.omarchy article h1 { letter-spacing: -.03em !important; }
|
||
html.omarchy .hero h1 span { color: var(--om-accent); }
|
||
html.omarchy .eyebrow, html.omarchy .toc .toc-h, html.omarchy .agents p, html.omarchy .sponsor p, html.omarchy .col h4 { color: var(--om-accent); letter-spacing: .14em; }
|
||
html.omarchy .eyebrow::before { content: "# "; color: var(--ink3); }
|
||
|
||
/* the bar: Waybar, solid, on a line */
|
||
html.omarchy nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); border-bottom: 1px solid var(--line); }
|
||
html.omarchy nav .links a:hover, html.omarchy footer a:hover { color: var(--om-accent); }
|
||
html.omarchy .brand { letter-spacing: 0; }
|
||
/* the site's own light/dark switch: the theme decides that here */
|
||
html.omarchy button.theme:not(.menu):not(.lang):not(.gh) { display: none !important; }
|
||
html.omarchy .toc-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
|
||
|
||
/* buttons: filled with the accent, the ghost framed in it */
|
||
html.omarchy .btn { border-width: 1px; font-weight: 700; letter-spacing: .02em; }
|
||
html.omarchy .btn:hover { opacity: 1; background: color-mix(in srgb, var(--btn) 82%, var(--bg)); }
|
||
html.omarchy .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
|
||
html.omarchy .btn.ghost:hover { border-color: var(--om-accent); color: var(--om-accent); background: transparent; }
|
||
html.omarchy .btn .bird, html.omarchy .btn .bird-inv { filter: none; }
|
||
html.omarchy .theme, html.omarchy .icon-btn, html.omarchy .copy { border-color: var(--line); }
|
||
html.omarchy .theme:hover, html.omarchy .icon-btn:hover, html.omarchy .copy:hover { color: var(--om-accent); border-color: var(--om-accent); }
|
||
|
||
/* surfaces: flat, on the line; a hover lights the frame */
|
||
html.omarchy .sponsor .card:hover, html.omarchy .community a:hover, html.omarchy .chip:hover { border-color: var(--om-accent); transform: none; }
|
||
html.omarchy .hub, html.omarchy .rt-hub { border-color: var(--om-edge); border-width: var(--om-border); }
|
||
html.omarchy .shot picture img, html.omarchy .shot img.pick, html.omarchy .split img, html.omarchy .wide img, html.omarchy .figure img { border: var(--om-border) solid var(--om-edge); }
|
||
html.omarchy .community .glyph { background: var(--om-accent); color: var(--bg); }
|
||
html.omarchy .install code::before { content: "❯ "; color: var(--om-accent); }
|
||
html.omarchy .grid code, html.omarchy article :not(pre) > code { color: var(--om-accent); }
|
||
html.omarchy pre .k { color: var(--om-accent); }
|
||
html.omarchy pre .s { color: var(--om-green); }
|
||
html.omarchy .url .n { color: var(--om-accent); }
|
||
html.omarchy .note { border-left-width: 1px; }
|
||
html.omarchy .callout::before { background: var(--om-accent); }
|
||
html.omarchy .steps li::before { border-color: var(--om-accent); color: var(--om-accent); }
|
||
|
||
/* what's chosen is the accent */
|
||
html.omarchy .rt-tabs button[aria-selected="true"], html.omarchy .seg button.on { background: var(--om-accent); color: var(--btn-ink); }
|
||
html.omarchy .toc .pg.cur > a, html.omarchy .toc .secs a.on { color: var(--om-accent); }
|
||
html.omarchy .toc .secs a.on { background: var(--om-sel); }
|
||
html.omarchy .lang-menu a[aria-current] { color: var(--om-accent); }
|
||
html.omarchy .rt-accts li.on { border-color: var(--om-accent); }
|
||
html.omarchy .rt-accts li.on .dot, html.omarchy .rt-accts li.on .bar i { background: var(--om-accent); border-color: var(--om-accent); }
|
||
html.omarchy .rt-accts li.on em { color: var(--om-accent); }
|
||
html.omarchy .rt-hub i, html.omarchy .rt-accts .tag { background: var(--om-accent); color: var(--bg); }
|
||
html.omarchy .rt-wires path.live { stroke: var(--om-accent); }
|
||
html.omarchy .rt-wires .pkt { fill: var(--om-accent); filter: none; }
|
||
html.omarchy input:focus, html.omarchy select:focus { border-color: var(--om-accent); outline: none; }
|
||
|
||
/* the chip in the corner: a Waybar module */
|
||
.om-bar { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 6px; font: 13px/1.4 var(--om-font, monospace), monospace; }
|
||
.om-chip { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; background: var(--bg); color: var(--ink2); border: 1px solid var(--line); cursor: pointer; font: inherit; }
|
||
.om-chip:hover, .om-chip[aria-expanded="true"] { color: var(--ink); border-color: var(--om-accent); }
|
||
.om-cta { height: 30px; padding: 0 11px; background: var(--om-accent); color: var(--btn-ink); border: 1px solid var(--om-accent); cursor: pointer; font: inherit; }
|
||
.om-cta:hover { background: var(--bg); color: var(--om-accent); }
|
||
.om-chip.om-off { width: 30px; padding: 0; justify-content: center; opacity: .6; }
|
||
.om-chip.om-off:hover { opacity: 1; }
|
||
.om-logo { font-family: omarchy; font-size: 15px; line-height: 1; color: var(--om-accent, currentColor); }
|
||
.om-chip.live .om-name::after { content: " ●"; color: var(--om-green); }
|
||
.om-menu { position: absolute; right: 0; bottom: calc(100% + 6px); width: 290px; max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; background: var(--bg); border: var(--om-border) solid var(--om-edge); padding: 6px; }
|
||
.om-h { padding: 8px 8px 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--om-accent); }
|
||
.om-list { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
|
||
.om-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; color: var(--ink2); font: inherit; text-align: left; cursor: pointer; }
|
||
.om-row:hover, .om-row:focus-visible { background: var(--om-sel); color: var(--ink); outline: none; }
|
||
.om-row.on { color: var(--om-accent); }
|
||
.om-row.on::after { content: "✓"; margin-left: auto; }
|
||
.om-sw { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 34px; height: 16px; border: 1px solid var(--line); }
|
||
.om-sw i { width: 7px; height: 7px; }
|
||
.om-follow { background: linear-gradient(90deg, var(--bg) 50%, var(--om-accent) 50%); }
|
||
.om-dim { color: var(--ink3); font-size: 11px; }
|
||
.om-note { padding: 0 8px 6px 52px; font-size: 11.5px; color: var(--ink3); }
|
||
.om-note a { color: var(--om-accent); }
|
||
.om-ask { padding: 0; border: 0; background: none; color: var(--om-accent); font: inherit; text-align: left; cursor: pointer; }
|
||
.om-ask:hover { text-decoration: underline; }
|
||
.om-quit { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 9px; color: var(--ink3); }
|
||
@media print { .om-bar { display: none; } }
|