/* Brutal dark theme - same brutalist geometry as theme-brutal.css but on a
warm-dark canvas with a muted palette pulled from Aivazovsky's seascapes:
sage-olive instead of neon lime, burnt amber instead of neon orange,
dusty slate-blue instead of electric blue. Off-white cream for body text.
Scoped to `prefers-color-scheme: dark`; theme-brutal.css covers light. The
styling rules here mirror theme-brutal.css because its rules are scoped
to `prefers-color-scheme: light` and don't apply on dark systems. */
@media (prefers-color-scheme: dark) {
:root {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
--font-mono-brutal: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
--color-neo-bg: #1F1D1A;
--color-neo-text: #E8E3D8;
--color-neo-border: #C8C2B5;
/* Muted accents (Aivazovsky palette) - share names with theme-brutal.css
so the rules below stay one-to-one with the light variant. Blue is
the popping electric variant so ol/ul/quote/checkbox markers read
clearly against the warm-dark canvas. */
--color-neo-blue: #2E5CFF;
--color-neo-lime: #A5B888;
--color-neo-orange: #B86A40;
--col-tx: #E8E3D8 !important;
--col-tx-alt: #A8A192 !important;
--col-bg: #262624 !important;
--col-bg-alt: #1F1E1D !important;
--col-inline-code: #1F1D1A !important; /* dark text on sage chip */
--col-inline-code-bg: #2E2B25 !important;
--col-link: #E8E3D8 !important;
--col-link-hover: #E8E3D8 !important;
--col-url: #A8A192 !important;
--col-tx-sel: #FFF !important;
--col-msg-sel: color-mix(in srgb, #FFF, transparent 60%) !important;
--col-bg-active: #2A2722 !important;
--col-border: #58534E !important;
--col-marker: var(--color-neo-orange);
--col-accent: #E8E3D8;
}
/* Checkbox icon: glyph PNG colorized to the muted-burnt-amber
`--color-neo-orange` (#B86A40), matching the ol/ul markers and code
chip text color. */
.cm-s-hypermd-light span.cm-formatting-task.hmd-hidden-token {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAAclBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACa4vOeAAAAJXRSTlMADcjpDswcLZOzsvOYBvWdbtvTX0D69+ORa1dRJCDtuaF7ZDkoQyuUXgAAAMhJREFUOMvt0reywjAUhOFjKxmcrgMZboL//V8Rm6GwkNUx0LClvhkVZ1fEZoqHqMwO7wuUSb0YxcJKxtLpxIt2SzJRykkQp5RgdAjaIKRJCEn6gWdA9OzRoqLVRscQnc9bdtXX/eyurOF7N3erLVDPwCGHxoVwamH1LwGUBfBbhrCvoLlMitL9DY8trLtJg7qoCj18VAN1OYE/YJBuDe1RJtBVo5wbqPb+GL5yWG1GLX0YZYw5iQ93yQ/yAHfZzu5qt/mxr97VFS15JGSVM0C6AAAAAElFTkSuQmCC") !important;
filter: brightness(0) saturate(100%) invert(45%) sepia(35%) saturate(1100%) hue-rotate(340deg) brightness(95%) contrast(92%);
}
#toolbar {
padding-bottom: 8px !important;
}
#toolbar svg {
stroke: var(--col-tx-alt) !important;
}
#toolbar button:hover svg {
border-radius: 0;
stroke: var(--color-neo-orange) !important;
}
#close-chat, #fullscreen-chat {
color: var(--col-tx-alt) !important;
}
#open-chat-modal:hover svg {
stroke: var(--col-accent) !important;
}
#close-chat:hover, #fullscreen-chat:hover {
color: var(--color-neo-orange) !important;
}
#open-chat-modal svg {
stroke: #F5F5F5 !important;
}
#close-sidebar, #close-editor2, #go-forward svg, #go-backward svg {
color: var(--col-tx-alt) !important;
stroke: var(--col-tx-alt) !important;
}
#close-sidebar:hover {
color: var(--col-accent) !important;
stroke: var(--col-accent) !important;
}
#close-editor2:hover, #go-forward:hover svg, #go-backward:hover svg {
color: var(--color-neo-orange) !important;
stroke: var(--color-neo-orange) !important;
}
/* The `×` glyph in Space Mono sits high in its line-box, so it visually
lifts off the arrow row. Force a sans-serif on the button only - so
the glyph renders at a natural baseline regardless of body font. */
#close-editor2 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
#open-sidebar {
background: var(--col-bg-active);
}
.message.own {
background: color-mix(in srgb, var(--col-bg) 60%, transparent);
}
.to-recent-btn,
.action-btn svg {
fill: var(--col-tx-alt);
color: var(--col-tx-alt) !important;
stroke: var(--col-tx-alt) !important;
}
.to-recent-btn:hover,
.action-btn:hover svg {
fill: var(--col-accent);
color: var(--col-accent) !important;
stroke: var(--col-accent) !important;
}
/* Headers: heavy weight + a hard light rule under H1 / H2. */
.cm-s-hypermd-light .cm-header.cm-header-1 {
font-size: 32px !important;
line-height: 38px !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-1 {
padding-top: 18px !important;
padding-bottom: 32px !important;
background-image: linear-gradient(
to bottom,
transparent 0,
transparent calc(100% - 15.5px),
var(--col-border) calc(100% - 15.5px),
var(--col-border) calc(100% - 14px),
transparent calc(100% - 14px)
) !important;
}
.cm-s-hypermd-light .CodeMirror-code > pre.HyperMD-header.HyperMD-header-1:first-child,
.cm-s-hypermd-light .CodeMirror-code > :first-child pre.HyperMD-header.HyperMD-header-1 {
padding-top: 0 !important;
padding-bottom: 32px !important;
}
/* Only the FIRST H1 keeps the underline; subsequent H1s drop it. */
.cm-s-hypermd-light .CodeMirror-code pre.HyperMD-header.HyperMD-header-1:not(:nth-child(1 of pre.HyperMD-header.HyperMD-header-1)) {
background-image: none !important;
padding-bottom: 0 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-2 {
padding-top: 18px !important;
font-size: 24px !important;
line-height: 30px !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-3 {
padding-top: 16px !important;
font-size: 22px !important;
line-height: 28px !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-4 {
padding-top: 14px !important;
font-size: 20px !important;
line-height: 26px !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-5 {
padding-top: 12px;
font-size: 18px;
line-height: 24px !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-6 .cm-header-6 {
padding-top: 12px;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.cm-s-hypermd-light .cm-header {
font-family: 'Inter', sans-serif !important;
font-weight: 700;
letter-spacing: 0.02em;
}
.cm-s-hypermd-light .cm-strong, .cm-s-hypermd-light span.cm-url {
font-family: var(--font) !important;
font-weight: 400;
}
/* Ol/ul markers in the same muted-burnt-amber as the code chip and the
hover-orange (`--color-neo-orange`) - separates list affordances
visually from the blue quote-bar/`>` marker. */
.cm-s-hypermd-light span.cm-formatting-list-ol {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
color: var(--color-neo-orange) !important;
font-weight: 700 !important;
}
.cm-s-hypermd-light .cm-formatting-list-ul {
color: var(--color-neo-orange) !important;
}
.cm-s-hypermd-light .cm-strong {
font-weight: 800;
}
.cm-s-hypermd-light pre.HyperMD-list-line {
padding-top: 0 !important;
}
.cm-s-hypermd-light span.cm-url:not(.cm-string) {
color: var(--col-url) !important;
font-weight: 400;
}
/* Links in dark mode use a brighter sky-blue than the muted slate-blue
accent - the dusty `--color-neo-blue` is too low-contrast against the
warm-dark canvas to read as a clear link affordance. */
.cm-s-hypermd-light span.cm-link,
.cm-s-hypermd-light span.cm-string.cm-url.cm-hmd-barelink {
line-height: 1.6 !important;
color: #6CB4E5 !important;
background: transparent !important;
border-bottom: 1px solid #6CB4E5 !important;
font-weight: 500;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: background .15s, color .15s;
}
.cm-s-hypermd-light pre.CodeMirror-activeline span.cm-link,
.cm-s-hypermd-light pre.CodeMirror-activeline span.cm-string.cm-url.cm-hmd-barelink {
background: var(--color-neo-lime) !important;
color: var(--color-neo-blue) !important;
border-bottom: none !important;
}
.cm-s-hypermd-light span.cm-link:hover,
.cm-s-hypermd-light span.cm-string.cm-url.cm-hmd-barelink:hover {
background: transparent !important;
color: var(--color-neo-orange) !important;
border-bottom: 3px solid var(--color-neo-orange) !important;
}
.cm-s-hypermd-light pre.HyperMD-quote-1:before {
background: var(--color-neo-blue) !important;
width: 4px !important;
}
.cm-s-hypermd-light pre.HyperMD-quote-1 {
background: color-mix(in srgb, var(--color-neo-blue) 8%, var(--col-bg)) !important;
}
.cm-s-hypermd-light span.cm-formatting-quote {
color: var(--color-neo-blue);
position: relative;
left: 1px;
}
.cm-s-hypermd-light pre.HyperMD-quote-1.hmd-inactive-line {
text-indent: -8px !important;
}
.cm-s-hypermd-light pre.HyperMD-quote-1:not(:has(span.cm-formatting-quote)) {
text-indent: 0 !important;
}
/* Code chip: dark tile with muted-burnt-amber text and matching border -
reuses the same `--color-neo-orange` hover hue (tree-item hover,
search-result focus, action-btn hover, etc.) so accents stay coherent. */
.cm-s-hypermd-light .cm-inline-code,
.cm-s-hypermd-light code {
font-family: var(--font-mono-brutal) !important;
}
.cm-s-hypermd-light span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) {
font-family: var(--font-mono-brutal) !important;
background: #28251F !important;
color: var(--color-neo-orange) !important;
border: 1px solid var(--color-neo-orange) !important;
border-radius: 4px !important;
padding: 0.1em 0.4em !important;
font-size: 0.9em !important;
position: relative;
top: -1px;
}
.cm-s-hypermd-light div.HyperMD-codeblock-bg {
background: var(--col-bg-alt) !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
}
.cm-s-hypermd-light pre.HyperMD-codeblock {
font-family: var(--font-mono-brutal) !important;
font-size: 1em !important;
padding-left: 20px !important;
}
.cm-hmd-comment,
.cm-hmd-comment-marker {
color: var(--color-neo-lime) !important;
}
.cm-s-hypermd-light pre.hmd-inactive-line .cm-hmd-comment-marker {
display: none;
}
/* Sidebar blink in the neo-orange accent. */
@keyframes sidebar-highlight-brutal {
0% { color: var(--color-neo-orange); opacity: 1; }
20% { color: var(--color-neo-orange); opacity: 0.7; }
25% { color: var(--color-neo-orange); opacity: 0.5; }
30% { color: var(--color-neo-orange); opacity: 0.7; }
45% { color: var(--color-neo-orange); opacity: 1; }
50% { color: var(--color-neo-orange); opacity: 0.5; }
55% { color: var(--color-neo-orange); opacity: 0.7; }
75% { color: var(--color-neo-orange); opacity: 1; }
100% { color: var(--color-neo-orange); opacity: 1; }
}
.sidebar-blink {
animation-name: sidebar-highlight-brutal !important;
}
.cm-s-hypermd-light img.hmd-image {
border-radius: 7px !important;
border: none !important;
}
.cm-s-hypermd-light pre.HyperMD-hr {
color: var(--col-border) !important;
background: transparent !important;
}
.cm-s-hypermd-light div.HyperMD-hr-bg {
background: var(--col-border) !important;
height: 2px !important;
}
::selection {
background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}
::-moz-selection {
background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}
.tree-container li span.tree-item {
border-radius: 0 !important;
}
.tree-container li span.tree-item:hover {
background-color: var(--color-neo-orange) !important;
color: #1F1D1A !important;
}
.tree-container li span.tree-item:hover .tree-mod_icon svg {
stroke: #1F1D1A !important;
}
.tree-container span.tree-item.selected,
.tree-container span.tree-item.selected:hover {
background-color: var(--color-neo-blue) !important;
color: #E8E3D8 !important;
}
.tree-container span.tree-item.selected .tree-mod_icon svg,
.tree-container span.tree-item.selected:hover .tree-mod_icon svg {
stroke: #E8E3D8 !important;
}
#search-results .focused,
#move-results .focused {
background-color: var(--color-neo-orange) !important;
color: #1F1D1A !important;
border-radius: 0 !important;
}
.message {
transition: background 0.15s ease !important;
}
.message:hover {
background: var(--color-neo-orange) !important;
}
.complete-btn:hover {
background: transparent !important;
}
#chat .message-content,
#chat .message-content:hover {
background: transparent !important;
cursor: pointer !important;
}
.message-content.editing {
background: color-mix(in srgb, var(--color-neo-lime) 25%, transparent) !important;
border: 1px solid var(--color-neo-blue) !important;
}
.message-time {
color: var(--col-tx-alt) !important;
}
/* Quick-action buttons inside chat messages: hover neo-blue, matching
the sidebar's "selected file" treatment. */
.action-btn:hover {
background: var(--color-neo-blue) !important;
}
.message.actions-pinned,
.message.selected {
background: color-mix(in srgb, var(--color-neo-orange) 18%, transparent) !important;
border-color: var(--color-neo-orange) !important;
}
.cm-s-hypermd-light .CodeMirror-line {
line-height: 1.9 !important;
}
/* Empty-chat hero styled like an editor H1 - Inter, uppercase, heavy
weight, tracking, with a hard rule under the title. */
.empty-title,
.empty-desc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
letter-spacing: 0.04em;
}
.empty-title {
font-weight: 800 !important;
padding-bottom: 14px;
border-bottom: 2px solid var(--col-border);
margin-bottom: 20px !important;
}
.empty-desc {
font-weight: 500 !important;
letter-spacing: 0.08em;
color: var(--color-neo-orange) !important;
}
#search, #move,
#search-input, #move-input,
#nav-buttons,
#open-folder,
.message,
.message:first-child,
.message:last-child,
.message:only-child,
.message-content,
.message-actions,
.action-btn,
.complete-btn,
.btn-label,
.CodeMirror-hints,
.CodeMirror-hint,
.sidebar-ctx-menu {
border-radius: 0 !important;
}
/* Chat modal + input keep softened corners (half the chat.css defaults). */
#chat-container.modal {
border-radius: 7px !important;
}
#chat-input {
border-radius: 6px !important;
}
.CodeMirror-hints,
.CodeMirror-hint {
font-family: var(--font) !important;
}
.CodeMirror-hint-active {
background-color: var(--color-neo-orange) !important;
color: #1F1D1A !important;
}
.sidebar-ctx-menu-item:hover {
background: var(--color-neo-orange) !important;
color: #1F1D1A !important;
}
} /* end @media (prefers-color-scheme: dark) */
