wehub-resource-sync
499 lines
15 KiB
CSS
499 lines
15 KiB
CSS
@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;
|
||
--color-neo-blue: #2E5CFF;
|
||
--color-neo-lime: #A5B888;
|
||
--color-neo-orange: #e8912d;
|
||
--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(63%) sepia(64%) saturate(2000%) hue-rotate(346deg) brightness(94%) contrast(95%);
|
||
}
|
||
|
||
#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. 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-alt);
|
||
}
|
||
|
||
.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: 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; 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;
|
||
}
|
||
|
||
/* Header immediately after the first H1: drop its own top padding so we
|
||
don't get stacked margins. */
|
||
.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-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;
|
||
}
|
||
|
||
.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-orange) !important;
|
||
width: 4px !important;
|
||
}
|
||
|
||
.cm-s-hypermd-light pre.HyperMD-quote-1 {
|
||
background: color-mix(in srgb, var(--color-neo-orange) 8%, var(--col-bg)) !important;
|
||
}
|
||
/* Match escape chars to the theme text color (hypermd.css default is too light). */
|
||
.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;
|
||
}
|
||
|
||
.cm-s-hypermd-light span.cm-formatting-quote {
|
||
color: var(--color-neo-orange);
|
||
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: #28251F !important;
|
||
color: var(--color-neo-orange) !important;
|
||
border: 1px solid var(--col-border) !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;
|
||
}
|
||
/* Raw-math chip tinted with the theme accent (neo-orange) instead of the
|
||
code-block panel color, so editable math stands out distinctly from code. */
|
||
.cm-s-hypermd-light span.cm-math,
|
||
.cm-s-hypermd-light span.hmd-fold-math-placeholder {
|
||
background: color-mix(in srgb, var(--color-neo-orange), transparent 75%) !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-lime) !important;
|
||
}
|
||
.cm-s-hypermd-light pre.hmd-inactive-line .cm-hmd-comment-marker {
|
||
display: none;
|
||
}
|
||
|
||
@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.tree-leaf.selected,
|
||
.tree-container span.tree-item.tree-leaf.selected:hover {
|
||
background-color: var(--color-neo-blue) !important;
|
||
color: #E8E3D8 !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: #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: #000 !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;
|
||
}
|
||
.action-btn:hover {
|
||
background: var(--color-neo-orange) !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;
|
||
}
|
||
#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: #1F1D1A !important;
|
||
}
|
||
.sidebar-ctx-menu-item:hover {
|
||
background: var(--color-neo-orange) !important;
|
||
color: #1F1D1A !important;
|
||
}
|
||
|
||
/* Tooltips in dark theme: solid black bubble + light text (rather than the
|
||
inverted off-white that --col-accent would give us). Stands out clearly
|
||
over the dark page. */
|
||
#toolbar button::after,
|
||
#close-sidebar::after,
|
||
#go-backward::after,
|
||
#go-forward::after,
|
||
#close-editor2::after,
|
||
.btn-label {
|
||
background: #000 !important;
|
||
color: #E8E3D8 !important;
|
||
}
|
||
#toolbar button::before,
|
||
#close-sidebar::before,
|
||
#go-backward::before,
|
||
#go-forward::before,
|
||
#close-editor2::before {
|
||
border-bottom-color: #000 !important;
|
||
}
|
||
.btn-label::after {
|
||
border-top-color: #000 !important;
|
||
}
|
||
} /* end @media (prefers-color-scheme: dark) */
|