wehub-resource-sync
1071 lines
28 KiB
CSS
1071 lines
28 KiB
CSS
:root {
|
|
--col-tx-hover: #24837b;
|
|
--col-inline-code: #6F6E69;
|
|
--col-inline-code-bg: var(--col-bg-alt);
|
|
--col-msg-sel: color-mix(in srgb, var(--col-link), transparent 70%) !important;
|
|
--col-bg: #FFFCF0; /* Paper color */
|
|
--col-code-keyword: #1F5EA5;
|
|
--col-code-op: #BC5215;
|
|
--col-code-bg: #f2f0e5;
|
|
--col-border: #e0e0e0;
|
|
--font: -apple-system, BlinkMacSystemFont, 'Inter', 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
--font-smaller: 1.3rem;
|
|
--font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono",
|
|
"Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco,
|
|
"Consolas", "Source Code Pro", monospace;
|
|
--normal-width: 800px;
|
|
-webkit-font-smoothing: antialiased;
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
meta[name="theme-color"] {
|
|
content: "#ff0000";
|
|
}
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 64%
|
|
}
|
|
|
|
body {
|
|
overscroll-behavior: none;
|
|
background-color: var(--col-bg-alt);
|
|
color: var(--col-tx);
|
|
font-size: 1.7rem;
|
|
font-size: calc(1.5rem + 0.2vw);
|
|
font-family: var(--font);
|
|
text-rendering: optimizeLegibility;
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/*Add border for PWA app only*/
|
|
@media (display-mode: standalone) {
|
|
body {
|
|
border-top: 1px solid var(--col-border);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chat-container {
|
|
height: calc(100vh - 1px) !important;
|
|
}
|
|
}
|
|
|
|
.CodeMirror-wrap {
|
|
/*border-radius: 5px;*/
|
|
/*background-color: var(--color-bg);*/
|
|
/*border: 1px solid var(--color-border);*/
|
|
}
|
|
|
|
.CodeMirror-code {
|
|
text-rendering: optimizeLegibility !important;
|
|
font-family: var(--font) !important;
|
|
}
|
|
|
|
#sidebar {
|
|
flex-shrink: 0; /* Prevent flexbox from shrinking */
|
|
box-sizing: content-box !important;
|
|
display: block;
|
|
width: 280px !important;
|
|
/*min-width: 220px;*/
|
|
/*max-width: 800px;*/
|
|
position: relative;
|
|
overflow: auto;
|
|
height: 100%;
|
|
background: var(--col-bg-alt);
|
|
color: var(--col-tx-alt);
|
|
font-size: calc(1.5rem);
|
|
padding-left: 5px;
|
|
border-right: 1px solid var(--col-border);
|
|
}
|
|
|
|
#sidebar > ul {
|
|
margin: 8px;
|
|
}
|
|
|
|
#sidebar li {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* CTA shown at the bottom of the sidebar while we're on the in-memory FS,
|
|
so first-time users have an obvious way to connect a real folder.
|
|
Toggled to display:flex from app.js when isMemFS is true. */
|
|
#open-folder {
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin: 8px 8px 12px 8px;
|
|
padding: 6px 8px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: calc(1.4rem);
|
|
color: var(--color-neo-orange);
|
|
}
|
|
|
|
#open-folder:hover {
|
|
color: var(--color-neo-blue);
|
|
}
|
|
|
|
#open-folder:hover svg {
|
|
stroke: var(--color-neo-blue);
|
|
}
|
|
|
|
#open-folder svg {
|
|
flex-shrink: 0;
|
|
stroke: var(--color-neo-orange);
|
|
}
|
|
|
|
#content {
|
|
overflow: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--col-bg);
|
|
}
|
|
#editor-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
#editor2-container {
|
|
flex: 1;
|
|
display: none;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--col-border);
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 50%;
|
|
height: 100vh;
|
|
background: var(--col-bg);
|
|
z-index: 10;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
#editor2-container.show {
|
|
display: flex;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Original (disabled): when the sidebar was hidden and editor2 was open,
|
|
editor1 was shrunk to 50% via a row flex layout. That collapsed
|
|
editor1's container width and forced its content to re-wrap - a
|
|
visible "jump". Editor2 is `position: fixed`, so it overlays without
|
|
needing editor1 to shrink. Keeping editor1 at full width means its
|
|
content keeps the same wrap; the padding-shift rule lower in this
|
|
file moves the (unchanged-width) content into the left half. */
|
|
/*
|
|
body:has(#sidebar[style*="display: none"]):has(#editor2-container.show) #content {
|
|
flex-direction: row;
|
|
}
|
|
|
|
body:has(#sidebar[style*="display: none"]):has(#editor2-container.show) #editor-container {
|
|
flex: 0 0 50%;
|
|
}
|
|
*/
|
|
|
|
#editor {
|
|
flex: 1;
|
|
}
|
|
|
|
#editor2-container {
|
|
border-left: 2px solid var(--col-border);
|
|
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
|
|
#content table, th, td {
|
|
border-collapse: collapse;
|
|
border: 1px solid #878787;
|
|
}
|
|
|
|
td {
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
padding: 3px;
|
|
}
|
|
|
|
td {
|
|
padding: 2px;
|
|
}
|
|
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row .hmd-table-column {
|
|
border-right: 1px solid #999;
|
|
border-bottom: 1px solid #999;
|
|
vertical-align: top;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row .hmd-table-column[data-column="0"] {
|
|
border-left: 1px solid #999;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-0 .hmd-table-column {
|
|
border-top: 1px solid #999;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row .hmd-table-column-content {
|
|
padding: 2px 6px;
|
|
line-height: 1.3;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row .hmd-table-column-content:empty::before {
|
|
content: '\00a0';
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row > span {
|
|
margin-right: 0;
|
|
border-top: 0;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row .hmd-table-column.hmd-table-column-dummy {
|
|
border: 0;
|
|
padding: 0;
|
|
width: 0;
|
|
min-width: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row span.cm-hmd-table-sep:before {
|
|
background: none;
|
|
content: '';
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row span.cm-hmd-table-sep {
|
|
display: inline-block;
|
|
width: 0 !important;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: transparent;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-1 {
|
|
opacity: 0;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
padding: 0;
|
|
min-height: 0;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-1 .hmd-table-column {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-1 .hmd-table-column-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.table-plus {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
z-index: 7;
|
|
background: var(--color-neo-orange, #e8912d);
|
|
border: 1px solid #999;
|
|
color: var(--col-bg);
|
|
font-size: 9px;
|
|
line-height: 1;
|
|
user-select: none;
|
|
border-radius: 4px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.12s ease, visibility 0s 0.12s;
|
|
}
|
|
|
|
.table-plus.show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.12s ease 0.1s, visibility 0s 0.1s;
|
|
}
|
|
|
|
.table-plus:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.table-plus-col {
|
|
width: 16px;
|
|
cursor: e-resize;
|
|
}
|
|
|
|
.table-plus-row {
|
|
height: 16px;
|
|
cursor: s-resize;
|
|
}
|
|
|
|
/* Reserve a strip below each table for the add-row plank, so hovering
|
|
there doesn't land on the next text line. */
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row:not(:has(+ pre.HyperMD-table-row)) {
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
/* Rounded table corners. The last real column is either followed by the
|
|
trailing pipe separator + dummy column (normal tables) or is the last
|
|
child itself (tables without outer pipes). */
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-0 .hmd-table-column[data-column="0"] {
|
|
border-top-left-radius: 5px;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-0 .hmd-table-column:has(+ span.cm-hmd-table-sep + .hmd-table-column-dummy:last-child),
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row.HyperMD-table-row-0 .hmd-table-column:not(.hmd-table-column-dummy):last-child {
|
|
border-top-right-radius: 5px;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row:not(:has(+ pre.HyperMD-table-row)) .hmd-table-column[data-column="0"] {
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row:not(:has(+ pre.HyperMD-table-row)) .hmd-table-column:has(+ span.cm-hmd-table-sep + .hmd-table-column-dummy:last-child),
|
|
.CodeMirror.cm-s-hypermd-light pre.HyperMD-table-row:not(:has(+ pre.HyperMD-table-row)) .hmd-table-column:not(.hmd-table-column-dummy):last-child {
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
a {
|
|
color: var(--col-tx) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--col-tx-hover);
|
|
}
|
|
|
|
#search, #move {
|
|
position: fixed;
|
|
width: 500px;
|
|
padding: 5px;
|
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: 8px;
|
|
background: var(--col-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 10000;
|
|
}
|
|
|
|
#search-input, #move-input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
margin-bottom: 4px;
|
|
box-sizing: border-box;
|
|
border: 2px solid var(--col-border);
|
|
border-radius: 4px;
|
|
background: var(--col-bg);
|
|
}
|
|
|
|
#search-input:focus, #move-input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#search-results, #move-results {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#search-results li, #move-results li {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all; /* Break long paths anywhere */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#search-results .focused, #move-results .focused {
|
|
background-color: var(--col-bg-active);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
padding: 2em 0;
|
|
}
|
|
|
|
/*Center editor1 when there's no editor2*/
|
|
.CodeMirror-scroll {
|
|
padding: 2em calc((100% - var(--normal-width)) / 2);
|
|
}
|
|
|
|
/* When editor2 opens, shift editor1's content into the left half of the
|
|
viewport so the right half (covered by editor2) doesn't hide it -
|
|
while keeping the content's WIDTH identical to its closed state
|
|
(--normal-width) so the text doesn't re-wrap. The padding sum stays
|
|
at (container - normal-width); left padding shrinks by 25vw (half of
|
|
editor2's 50vw overlay), right padding grows by the same amount.
|
|
`max(0px, ...)` clamps gracefully on narrow viewports where the
|
|
ideal left padding would go negative - in that case content snaps
|
|
to the editor1 container's left edge, but its width still equals
|
|
--normal-width so no re-flow happens. */
|
|
#content.editor2-open .CodeMirror-scroll {
|
|
padding-top: 2em;
|
|
padding-bottom: 2em;
|
|
padding-left: max(0px, calc((100% - var(--normal-width)) / 2 - 25vw));
|
|
padding-right: calc(100% - var(--normal-width) - max(0px, calc((100% - var(--normal-width)) / 2 - 25vw)));
|
|
}
|
|
|
|
.CodeMirror-lines::after {
|
|
content: "";
|
|
display: block;
|
|
height: 20em;
|
|
}
|
|
|
|
.CodeMirror-foldmarker {
|
|
color: blue;
|
|
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
|
|
line-height: .3;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.CodeMirror-foldgutter {
|
|
width: .7em;
|
|
}
|
|
|
|
.CodeMirror-foldgutter-open,
|
|
.CodeMirror-foldgutter-folded {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.CodeMirror-foldgutter-open:after {
|
|
content: "\25BE";
|
|
}
|
|
|
|
.CodeMirror-foldgutter-folded:after {
|
|
content: "\25B8";
|
|
}
|
|
|
|
.HyperMD-codeblock-bg {
|
|
background: var(--col-bg-alt) !important;
|
|
}
|
|
|
|
.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) {
|
|
background: var(--col-inline-code-bg) !important;
|
|
color: var(--col-inline-code) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: var(--font-smaller) !important;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--col-tx-sel);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--col-tx-sel);
|
|
}
|
|
|
|
.CodeMirror-selected {
|
|
background: var(--col-tx-sel) !important;
|
|
}
|
|
|
|
.CodeMirror-hints {
|
|
background-color: var(--col-bg-alt) !important;
|
|
border: 1px solid var(--col-border) !important;
|
|
max-width: 400px;
|
|
box-shadow: none !important;
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.CodeMirror-hint {
|
|
color: var(--col-tx-alt) !important;
|
|
padding: 5px 10px !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.CodeMirror-hint-active {
|
|
background-color: var(--col-bg-active) !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light pre.HyperMD-codeblock {
|
|
color: var(--col-tx-alt) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: var(--font-smaller) !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-link, .cm-s-hypermd-light .cm-string.cm-url.cm-hmd-barelink {
|
|
color: var(--col-link) !important;
|
|
font-weight: 450;
|
|
border-bottom:0.04em solid var(--col-border);
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-link:hover, .cm-s-hypermd-light .cm-string.cm-url.cm-hmd-barelink:hover {
|
|
cursor: pointer;
|
|
color: var(--col-link-hover) !important;
|
|
text-decoration: none !important;
|
|
border-bottom:0.08em solid var(--col-link-hover);
|
|
}
|
|
|
|
#welcome {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--col-bg-alt);
|
|
text-align: center;
|
|
border: 1px solid var(--col-border);
|
|
display: none;
|
|
}
|
|
|
|
.hmd-image {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
|
|
/*.cm-formatting-list-ul::before {*/
|
|
/* content: '';*/
|
|
/* display: inline-block;*/
|
|
/* width: 24px;*/
|
|
/* height: 24px;*/
|
|
|
|
/* !*<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">*!*/
|
|
/* !*<g clip-path="url(#clip0_952_6527)">*!*/
|
|
/* !*<circle cx="12" cy="12" r="3"></circle>*!*/
|
|
/* !*</g>*!*/
|
|
/* !*<defs>*!*/
|
|
/* !*<clipPath id="clip0_952_6527">*!*/
|
|
/* !*<rect width="24" height="24"></rect>*!*/
|
|
/* !*</clipPath>*!*/
|
|
/* !*</defs>*!*/
|
|
/* !*</svg>*!*/
|
|
/* !* with fill=#73777f;*!*/
|
|
/* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF85NTJfNjUyNykiPgogICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIiBmaWxsPSIjNzM3NzdmIj48L2NpcmNsZT4KICAgIDwvZz4KICAgIDxkZWZzPgogICAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzk1Ml82NTI3Ij4KICAgICAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgPC9jbGlwUGF0aD4KICAgIDwvZGVmcz4KICA8L3N2Zz4=');*/
|
|
/* background-size: contain;*/
|
|
/* background-repeat: no-repeat;*/
|
|
/* background-position: center;*/
|
|
/* vertical-align: middle;*/
|
|
/*}*/
|
|
|
|
/*.cm-formatting-list-ul::before svg {*/
|
|
/* fill: #73777f;*/
|
|
/*}*/
|
|
|
|
.cm-formatting-list-ul {
|
|
/*font-size: 0; !* Hide the "-" character *!*/
|
|
/*color: transparent; !* Backup to hide the character *!*/
|
|
}
|
|
|
|
.cm-formatting-list-ul {
|
|
color: var(--col-tx-alt) !important;
|
|
}
|
|
|
|
/*Hide bulletpoints when tasks. Also drop the list-marker margin so checklist
|
|
items don't inherit the bullet shift - they sit flush with the doc-body
|
|
edge whether folded (rendered checkbox) or unfolded (raw `- [ ] text`).
|
|
HyperMD-task-line comes from the mode (hypermd.js); hide-token.js mirrors
|
|
the task token's hmd-hidden-token onto the bullet span. */
|
|
pre.HyperMD-task-line span.cm-formatting-list-ul {
|
|
width: 0;
|
|
}
|
|
.cm-s-hypermd-light pre.HyperMD-list-line.HyperMD-task-line span.cm-formatting-list-ul {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Hide the list formatting only when task formatting IS hidden */
|
|
pre.HyperMD-task-line span.cm-formatting-list-ul.hmd-hidden-token {
|
|
display: none;
|
|
width: 0;
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-formatting-task:not(.hmd-hidden-token) {
|
|
/*background-color: red;*/
|
|
}
|
|
|
|
pre.HyperMD-task-line span.cm-formatting-list-ul.hmd-hidden-token + .cm-formatting-task.hmd-hidden-token {
|
|
width: 1em;
|
|
overflow: hidden;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/*For some reason ``` in code aren't hidden*/
|
|
.HyperMD-codeblock .hmd-hidden-token {
|
|
display: none !important;
|
|
}
|
|
|
|
/*Hide (...) in links. Don't hide links after images.
|
|
hmd-image-line comes from the mode (hypermd.js). */
|
|
.CodeMirror pre:not(.hmd-image-line) span.cm-url.hmd-hidden-token.cm-url {
|
|
display: inline;
|
|
font-size: 0 !important;
|
|
letter-spacing: -1ch;
|
|
color: transparent;
|
|
}
|
|
|
|
#toolbar {
|
|
z-index: 5;
|
|
position: fixed;
|
|
left: 240px;
|
|
top: 30px;
|
|
background: var(--col-bg-alt);
|
|
text-align: center;
|
|
}
|
|
|
|
#toolbar button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
button svg {
|
|
display: block;
|
|
stroke: var(--col-link);
|
|
/*stroke: var(--color-tx-alt) !important;*/
|
|
}
|
|
|
|
button svg circle {
|
|
fill: #3A9AE5 !important;
|
|
}
|
|
|
|
#toolbar button:hover svg {
|
|
border-radius: 4px;
|
|
stroke: var(--col-tx) !important;
|
|
}
|
|
|
|
/* New-file icon: stroked rather than filled to match the other toolbar
|
|
icons. SVG uses stroke="currentColor" so color drives the line color;
|
|
nudge up 2px so it lines up with the folder/random-file icons that
|
|
already sit slightly higher in their viewBox. */
|
|
#new-file svg {
|
|
color: var(--col-tx-alt);
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
#new-file:hover svg {
|
|
color: var(--color-neo-orange);
|
|
}
|
|
|
|
/* Fast custom tooltip below toolbar buttons + close-sidebar. The native
|
|
`title=` delay is ~1.5 s in Chrome, way too slow for high-frequency
|
|
icons. We pull the label out via attr(title) and reveal at 250 ms. */
|
|
#toolbar button,
|
|
#close-sidebar,
|
|
#go-backward,
|
|
#go-forward,
|
|
#close-editor2 {
|
|
position: relative;
|
|
}
|
|
#toolbar button::after,
|
|
#close-sidebar::after,
|
|
#go-backward::after,
|
|
#go-forward::after,
|
|
#close-editor2::after {
|
|
/* Pull label from data-tooltip (not title) so the native browser tooltip
|
|
doesn't ALSO appear after its ~1.5 s delay. aria-label on each button
|
|
preserves screen-reader access. */
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: 6px;
|
|
padding: 5px 11px;
|
|
background: var(--col-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--col-bg);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.12s;
|
|
z-index: 100;
|
|
}
|
|
/* Small upward triangle pointing back at the button — matches the tooltip
|
|
background so the arrow reads as part of the same shape. */
|
|
#toolbar button::before,
|
|
#close-sidebar::before,
|
|
#go-backward::before,
|
|
#go-forward::before,
|
|
#close-editor2::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: 2px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
border-bottom: 4px solid var(--col-accent);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.12s;
|
|
z-index: 100;
|
|
}
|
|
#toolbar button:hover::after,
|
|
#close-sidebar:hover::after,
|
|
#go-backward:hover::after,
|
|
#go-forward:hover::after,
|
|
#close-editor2:hover::after,
|
|
#toolbar button:hover::before,
|
|
#close-sidebar:hover::before,
|
|
#go-backward:hover::before,
|
|
#go-forward:hover::before,
|
|
#close-editor2:hover::before {
|
|
opacity: 1;
|
|
transition-delay: 0.25s;
|
|
}
|
|
|
|
#toolbar {
|
|
position: sticky; /* stays at the top while scrolling */
|
|
top: 0;
|
|
padding-top: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
body.dragging {
|
|
user-select: none;
|
|
cursor: col-resize !important;
|
|
}
|
|
|
|
body.dragging * {
|
|
cursor: col-resize !important;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
background: red !important;
|
|
color: green;
|
|
}
|
|
|
|
.cm-formatting.cm-formatting-link-string.cm-string.cm-url, .cm-formatting.cm-formatting-link.cm-link {
|
|
color: var(--col-tx-alt) !important;
|
|
}
|
|
|
|
.hmd-image-preview {
|
|
border: var(--col-border);
|
|
}
|
|
|
|
.cm-s-hypermd-light .HyperMD-codeblock::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
}
|
|
|
|
.cm-s-hypermd-light .HyperMD-codeblock-bg {
|
|
margin-left: 4px;
|
|
width: calc(100% - 4px);
|
|
}
|
|
|
|
.cm-s-hypermd-light .CodeMirror-line.HyperMD-codeblock {
|
|
padding-left: 6px;
|
|
/*color: var(--col-tx) !important;*/
|
|
}
|
|
|
|
pre.HyperMD-codeblock-begin {
|
|
z-index: 5 !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Firefox collapses the begin/end pres to 0 height once the ``` tokens are
|
|
display:none, so the rounded panel shrinks to just the body line. Force a
|
|
minimum line height so the opening/closing bars remain visible. */
|
|
pre.HyperMD-codeblock-begin,
|
|
pre.HyperMD-codeblock-end {
|
|
min-height: 1.3em;
|
|
}
|
|
|
|
.code-copy-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 5px;
|
|
width: 17px;
|
|
height: 17px;
|
|
padding: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
background-color: var(--col-tx-alt);
|
|
-webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M27 0c2.761 0 5 2.239 5 5v14c0 2.761-2.239 5-5 5h-3v3.333A4.667 4.667 0 0 1 19.333 32H4.667A4.667 4.667 0 0 1 0 27.333V12.667A4.667 4.667 0 0 1 4.667 8H8V5c0-2.761 2.239-5 5-5zM8 10H4.667A2.667 2.667 0 0 0 2 12.667v14.666A2.667 2.667 0 0 0 4.667 30h14.666A2.667 2.667 0 0 0 22 27.333V24h-9a5 5 0 0 1-5-5zm19-8H13a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3z'/></svg>") center/contain no-repeat;
|
|
mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M27 0c2.761 0 5 2.239 5 5v14c0 2.761-2.239 5-5 5h-3v3.333A4.667 4.667 0 0 1 19.333 32H4.667A4.667 4.667 0 0 1 0 27.333V12.667A4.667 4.667 0 0 1 4.667 8H8V5c0-2.761 2.239-5 5-5zM8 10H4.667A2.667 2.667 0 0 0 2 12.667v14.666A2.667 2.667 0 0 0 4.667 30h14.666A2.667 2.667 0 0 0 22 27.333V24h-9a5 5 0 0 1-5-5zm19-8H13a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3z'/></svg>") center/contain no-repeat;
|
|
opacity: 0.55;
|
|
z-index: 10;
|
|
}
|
|
|
|
.code-copy-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cm-s-hypermd-light .HyperMD-codeblock::before {
|
|
display: none;
|
|
}
|
|
|
|
.cm-formatting.cm-formatting-code.cm-inline-code {
|
|
background: none !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light .hmd-image {
|
|
/*PATCHED, was img.hmd-image - applies to <video> too*/
|
|
max-width: 400px;
|
|
display: inline-block;
|
|
|
|
margin-left: 25%;
|
|
margin-top: 0.6em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
/* <audio> defaults to a narrow fixed width that doesn't honour max-width
|
|
centering the same way img/video do. Force it to fill up to max-width
|
|
so the 25% left-margin centers it visually like the rest. */
|
|
.cm-s-hypermd-light audio.hmd-image {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cm-s-hypermd-light .hmd-image {
|
|
margin-left: 20%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 670px) {
|
|
.cm-s-hypermd-light .hmd-image {
|
|
max-width: 300px;
|
|
margin-left: 17%;
|
|
}
|
|
|
|
/* Collapse the sidebar by default on phones. toggleSidebar() flips
|
|
`body.sidebar-open` on tap, which suppresses these rules so the
|
|
sidebar can slide back in. */
|
|
body:not(.sidebar-open) #sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
body:not(.sidebar-open) #open-sidebar {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-formatting-task {
|
|
color: var(--col-tx) !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-formatting-task:not(.hmd-hidden-token) {
|
|
background-image: none;
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-attribute, .cm-s-hypermd-light span.cm-def, .cm-s-hypermd-light span.cm-string {
|
|
color: var(--col-link) !important;
|
|
}
|
|
|
|
.cmd-pressed .cm-inline-code:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#move, #search {
|
|
z-index: 10000;
|
|
}
|
|
|
|
|
|
#close-editor2 {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 27px;
|
|
color: var(--col-link);
|
|
background: none;
|
|
border: none;
|
|
top: -3px;
|
|
}
|
|
|
|
#go-backward, #go-backward {
|
|
stroke: var(--col-link);
|
|
}
|
|
|
|
#sidebar:hover #close-sidebar {
|
|
opacity: 1;
|
|
}
|
|
|
|
#open-sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 21px;
|
|
height: 100vh;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
background: color-mix(in srgb, var(--col-bg-active) 50%, transparent);
|
|
transition: opacity 0.2s;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#open-sidebar:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#sidebar:not([style*="display: none"]) ~ #open-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.cm-s-hypermd-light .cm-header {
|
|
font-weight: 550 !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) {
|
|
background: rgba(135, 131, 120, .15) !important;
|
|
border-radius: 4px;
|
|
vertical-align: baseline;
|
|
padding: 0.16em 0.32em !important;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
/* The backtick tokens appear when the cursor enters inline code; size them
|
|
to match the code body so the revealed tokens don't push the line height. */
|
|
.cm-s-hypermd-light span.cm-formatting-code:not(.hmd-hidden-token) {
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-bg {
|
|
border-left: 1px solid var(--col-border);
|
|
border-right: 1px solid var(--col-border);
|
|
}
|
|
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-begin-bg {
|
|
/*border-top: 1px solid var(--col-border);*/
|
|
border-top: none;
|
|
}
|
|
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-end-bg {
|
|
/*border-bottom: 1px solid var(--col-border);*/
|
|
border-bottom: none;
|
|
}
|
|
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-bg {
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-begin-bg {
|
|
border-top-left-radius: 10px !important;
|
|
border-top-right-radius: 10px !important;
|
|
}
|
|
.cm-s-hypermd-light div.HyperMD-codeblock-end-bg {
|
|
border-bottom-left-radius: 10px !important;
|
|
border-bottom-right-radius: 10px !important;
|
|
}
|
|
|
|
.nav-button {
|
|
position: relative;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
.nav-button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#nav-buttons {
|
|
background: var(--col-bg-alt);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
position: absolute;
|
|
padding: 0 6px;
|
|
top: 2px;
|
|
right: 2px;
|
|
}
|
|
|
|
.sidebar-blink {
|
|
animation: sidebar-highlight 4s ease-out;
|
|
}
|
|
|
|
@keyframes sidebar-highlight {
|
|
0% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 1; }
|
|
20% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 0.7; }
|
|
25% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 0.5; }
|
|
30% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 0.7; }
|
|
45% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 1; }
|
|
50% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 0.5; }
|
|
55% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 0.7; }
|
|
75% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 1; }
|
|
100% { color: var(--col-link); background-color: var(--col-bg-active); opacity: 1; }
|
|
}
|
|
|
|
/*.tree-container li ul li ul li .tree-item {*/
|
|
/* padding-left: 120px !important;*/
|
|
/*}*/
|
|
|
|
.tree-container ul ul li span.tree-item:not(.tree-leaf) {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.tree-container ul ul ul li span.tree-item {
|
|
padding-left: 4em !important;
|
|
}
|
|
|
|
.hmd-inactive-line .cm-hmd-indent-in-quote {
|
|
position: absolute;
|
|
width: 0;
|
|
/*overflow: hidden;*/
|
|
}
|
|
|
|
.cm-s-hypermd-light pre.HyperMD-quote-1 {
|
|
text-indent: -10px !important;
|
|
padding-inline-start: 24px !important;
|
|
}
|
|
|
|
/* Indent for wrapped list lines. HyperMD-task-line / HyperMD-list-line-ol
|
|
come from the mode (hypermd.js). */
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line:not(.HyperMD-task-line) {
|
|
text-indent: -1.2em;
|
|
padding-left: 1.2em;
|
|
}
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line.HyperMD-list-line-ol:not(.HyperMD-task-line) {
|
|
text-indent: -1.75em;
|
|
padding-left: 1.75em;
|
|
}
|
|
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line-2:not(.HyperMD-task-line) {
|
|
text-indent: -2.8em;
|
|
padding-left: 2.8em;
|
|
}
|
|
/*Ordered list*/
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line-2.HyperMD-list-line-ol:not(.HyperMD-task-line) {
|
|
text-indent: -3.60em;
|
|
padding-left: 3.60em;
|
|
}
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line-3:not(.HyperMD-task-line) {
|
|
text-indent: -4.8em;
|
|
padding-left: 4.8em;
|
|
}
|
|
/*Ordered list*/
|
|
.cm-s-hypermd-light pre.CodeMirror-line.HyperMD-list-line-3.HyperMD-list-line-ol:not(.HyperMD-task-line) {
|
|
text-indent: -5.3em;
|
|
padding-left: 5.3em;
|
|
}
|
|
|
|
|
|
.cm-formatting-task.cm-property ~ .cm-list-1 {
|
|
text-decoration: line-through;
|
|
opacity: 0.6;
|
|
color: #888;
|
|
}
|
|
|
|
.cm-formatting-task.cm-property {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#sync-status {
|
|
position: fixed;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--col-tx-alt);
|
|
opacity: 0.35;
|
|
z-index: 100;
|
|
}
|
|
|
|
#sync-status.bad {
|
|
background: var(--color-neo-orange);
|
|
opacity: 1;
|
|
}
|