zakirullin--files.md
wehub-resource-sync
516 行
16 KiB
CSS
516 行
16 KiB
CSS
@media (prefers-color-scheme: light) {
|
||
: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: #F4F4F0;
|
||
--color-neo-text: #1A1A1A;
|
||
--color-neo-border: #000;
|
||
--color-neo-blue: #2E5CFF;
|
||
--color-neo-lime: #C2F970;
|
||
--color-neo-orange: #e8912d;
|
||
--col-tx: #1A1A1A !important;
|
||
--col-tx-alt: #6B6B5C !important;
|
||
--col-bg: #F4F4F0 !important;
|
||
--col-bg-alt: #EDEDE5 !important;
|
||
--col-inline-code: #1A1A1A !important;
|
||
--col-inline-code-bg: #E5E5DC !important;
|
||
--col-link: #1A1A1A !important;
|
||
--col-link-hover: #1A1A1A !important;
|
||
--col-url: #6B6B5C !important;
|
||
--col-tx-sel: #000 !important;
|
||
--col-msg-sel: color-mix(in srgb, #000, transparent 60%) !important;
|
||
--col-bg-active: #E0E0D8 !important;
|
||
--col-border: #B6B3A7 !important;
|
||
--col-marker: var(--color-neo-orange);
|
||
--col-accent: #000;
|
||
}
|
||
|
||
/* Checkbox icon: dark glyph PNG colorized to neo-blue via filter so it
|
||
visually matches the ordered-list number color. Scoped to
|
||
`.hmd-hidden-token` so app.css's `:not(.hmd-hidden-token)
|
||
{ background-image: none }` rule can still cancel the image when the
|
||
cursor is on the line - otherwise you'd see both the graphic AND the
|
||
raw `- [ ]` text on the active line. */
|
||
.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(28%) sepia(96%) saturate(3700%) hue-rotate(225deg) brightness(100%) contrast(101%);
|
||
}
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
/* explicit empty: unconditional :root above already covers light. */
|
||
}
|
||
|
||
#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(--color-neo-orange) !important;
|
||
stroke: var(--color-neo-orange) !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 in light mode. In dark mode it
|
||
already looks fine because theme-dark.css overrides --font back
|
||
to system-ui (loads after brutal-dark). Match that by forcing 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-alt);
|
||
}
|
||
|
||
#open-folder {
|
||
color: var(--color-neo-blue);
|
||
}
|
||
#open-folder svg {
|
||
stroke: var(--color-neo-blue);
|
||
}
|
||
#open-folder:hover, #open-folder:hover svg {
|
||
color: var(--color-neo-orange);
|
||
stroke: var(--color-neo-orange);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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: 0 !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;
|
||
}
|
||
|
||
/* Keep the breathing room after the first H1 (what the underline used to
|
||
reserve), but no visible rule. Subsequent H1s stay tight. */
|
||
.cm-s-hypermd-light .CodeMirror-code pre.HyperMD-header.HyperMD-header-1:nth-child(1 of pre.HyperMD-header.HyperMD-header-1) {
|
||
padding-bottom: 16px !important;
|
||
}
|
||
|
||
/* A header that sits immediately after the first H1 (no blank line between)
|
||
uses only the H1's bottom padding for separation - drop its own top
|
||
padding so the two don't stack into an oversized gap. */
|
||
.cm-s-hypermd-light .CodeMirror-code pre.HyperMD-header.HyperMD-header-1:nth-child(1 of pre.HyperMD-header.HyperMD-header-1) + pre.HyperMD-header {
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-2 {
|
||
padding-top: 18px !important;
|
||
padding-bottom: 6px !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;
|
||
padding-bottom: 5px !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;
|
||
padding-bottom: 4px !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;
|
||
padding-bottom: 4px;
|
||
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;
|
||
padding-bottom: 4px;
|
||
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;
|
||
}
|
||
|
||
.cm-s-hypermd-light span.cm-formatting-list-ol {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
|
||
color: var(--color-neo-blue) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.cm-formatting-list-ul {
|
||
color: var(--color-neo-blue) !important;
|
||
}
|
||
|
||
/* Heavy bold - brutalist emphasis. */
|
||
.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;
|
||
}
|
||
|
||
.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: var(--color-neo-blue) !important;
|
||
background: transparent !important;
|
||
border-bottom: 1px solid var(--color-neo-blue) !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) 5%, var(--col-bg)) !important;
|
||
}
|
||
/* hypermd.css hardcodes escape colors to #CAA / #666 - match the theme text. */
|
||
.cm-s-hypermd-light span.cm-hmd-escape-backslash,
|
||
.cm-s-hypermd-light span.cm-hmd-escape-char {
|
||
color: var(--col-tx) !important;
|
||
}
|
||
/* Hide the leading/trailing "dummy" table separators HyperMD inserts. */
|
||
.cm-s-hypermd-light pre.HyperMD-table-row span.cm-hmd-table-sep.cm-hmd-table-sep-dummy {
|
||
visibility: hidden !important;
|
||
}
|
||
/* Round the outer corners of a multi-line blockquote, matching the code-block treatment. */
|
||
.cm-s-hypermd-light pre.HyperMD-quote-1:first-child,
|
||
.cm-s-hypermd-light :not(pre.HyperMD-quote-1) + pre.HyperMD-quote-1 {
|
||
border-top-left-radius: 7px !important;
|
||
border-top-right-radius: 7px !important;
|
||
}
|
||
.cm-s-hypermd-light pre.HyperMD-quote-1:last-child,
|
||
.cm-s-hypermd-light pre.HyperMD-quote-1:has(+ :not(pre.HyperMD-quote-1)) {
|
||
border-bottom-left-radius: 7px !important;
|
||
border-bottom-right-radius: 7px !important;
|
||
}
|
||
|
||
/* `>` marker in neo-blue. No !important so hypermd.css's
|
||
`pre.hmd-inactive-line span.cm-formatting-quote { color: transparent }`
|
||
still wins on inactive lines and keeps the arrow hidden until the
|
||
cursor is on the quote line. */
|
||
.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;
|
||
}
|
||
|
||
.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: #EFEFEF !important;
|
||
color: #C01343 !important;
|
||
border: 1px solid #D4D4D4 !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 div.HyperMD-codeblock-begin-bg {
|
||
border-top-left-radius: 7px !important;
|
||
border-top-right-radius: 7px !important;
|
||
}
|
||
.cm-s-hypermd-light div.HyperMD-codeblock-end-bg {
|
||
border-bottom-left-radius: 7px !important;
|
||
border-bottom-right-radius: 7px !important;
|
||
}
|
||
|
||
.cm-s-hypermd-light pre.HyperMD-codeblock {
|
||
font-family: var(--font-mono-brutal) !important;
|
||
font-size: 0.9em !important;
|
||
padding-left: 20px !important;
|
||
color: var(--col-tx) !important;
|
||
}
|
||
|
||
.cm-hmd-comment,
|
||
.cm-hmd-comment-marker {
|
||
color: var(--color-neo-orange) !important;
|
||
}
|
||
.cm-s-hypermd-light pre.hmd-inactive-line .cm-hmd-comment-marker {
|
||
display: none;
|
||
}
|
||
|
||
/* Sidebar blink: re-skin the highlight animation to the neo-orange accent
|
||
(matches the rest of the app's "attention" treatment). Same timing as
|
||
app.css's `sidebar-highlight` keyframes, just colored differently. */
|
||
@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: rgba(46, 92, 255, 0.35) !important;
|
||
}
|
||
::-moz-selection {
|
||
background: rgba(46, 92, 255, 0.35) !important;
|
||
}
|
||
.CodeMirror-selected,
|
||
.CodeMirror-focused .CodeMirror-selected {
|
||
background: rgba(46, 92, 255, 0.35) !important;
|
||
}
|
||
.cm-s-hypermd-light span.cm-math,
|
||
.cm-s-hypermd-light span.hmd-fold-math-placeholder {
|
||
background: rgba(46, 92, 255, 0.35) !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: #1A1A1A !important;
|
||
}
|
||
.tree-container li span.tree-item:hover .tree-mod_icon svg {
|
||
stroke: #1A1A1A !important;
|
||
}
|
||
|
||
.tree-container span.tree-item.tree-leaf.selected,
|
||
.tree-container span.tree-item.tree-leaf.selected:hover {
|
||
background-color: var(--color-neo-blue) !important;
|
||
color: #FFF !important;
|
||
}
|
||
.tree-container span.tree-item.tree-leaf.selected .tree-mod_icon svg,
|
||
.tree-container span.tree-item.tree-leaf.selected:hover .tree-mod_icon svg {
|
||
stroke: #FFF !important;
|
||
}
|
||
|
||
#search-results .focused,
|
||
#move-results .focused {
|
||
background-color: var(--color-neo-orange) !important;
|
||
color: #1A1A1A !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.message {
|
||
transition: background 0.15s ease !important;
|
||
}
|
||
.message:hover {
|
||
background: var(--color-neo-orange) !important;
|
||
}
|
||
/* Light theme: keep the complete-btn checkmark blue regardless of state,
|
||
distinct from the orange message-hover wash. */
|
||
.complete-btn,
|
||
.complete-btn:hover,
|
||
.message.completed .complete-btn,
|
||
.message.completed .complete-btn:hover {
|
||
color: var(--color-neo-blue) !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) 35%, transparent) !important;
|
||
border: 1px solid var(--color-neo-blue) !important;
|
||
}
|
||
.message-time {
|
||
color: var(--col-tx-alt) !important;
|
||
}
|
||
.action-btn:hover {
|
||
background: var(--color-neo-blue) !important;
|
||
}
|
||
.message.actions-pinned,
|
||
.message.selected {
|
||
background: color-mix(in srgb, var(--color-neo-blue) 18%, transparent) !important;
|
||
border-color: var(--color-neo-blue) !important;
|
||
}
|
||
|
||
.cm-s-hypermd-light .CodeMirror-line {
|
||
line-height: 1.9 !important;
|
||
}
|
||
|
||
.empty-title {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||
letter-spacing: normal;
|
||
}
|
||
.empty-title {
|
||
font-weight: 400 !important;
|
||
font-size: 28px !important;
|
||
margin-bottom: 20px !important;
|
||
}
|
||
.empty-icon {
|
||
opacity: 0.75;
|
||
}
|
||
#search, #move,
|
||
#search-input, #move-input,
|
||
.message-content,
|
||
.message-actions,
|
||
.CodeMirror-hints,
|
||
.CodeMirror-hint,
|
||
.sidebar-ctx-menu {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
#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: #1A1A1A !important;
|
||
}
|
||
.sidebar-ctx-menu-item:hover {
|
||
background: var(--color-neo-orange) !important;
|
||
color: #1A1A1A !important;
|
||
}
|
||
} /* end @media (prefers-color-scheme: light) */
|