@charset "UTF-8"; :root { --black: #181818; --white: #D5D5D5; --grey-100: #747474; --green: #87FF5B; --blue: #5B92FF; } :root .theme-dark { --theme-bg: #181818; --theme-fg: #D5D5D5; --theme-accent: #87FF5B; --theme-link: #5B92FF; } :root .theme-light { --theme-bg: #D5D5D5; --theme-fg: #181818; --theme-accent: #87FF5B; --theme-link: #5B92FF; } :root { --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985); } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .menu { z-index: 10; } .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .overflow-hidden { overflow: hidden; } .relative { position: relative; } html:not(.has-scroll-smooth) .hide-on-native-scroll { display: none; } /* Font Weights: 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Normal 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy) */ /* Leibniz Fraktur */ @font-face { font-family: "Leibniz Fraktur"; font-style: normal; font-weight: 400; src: url("./neuefraktur-A4S1ACH2.woff2") format("woff2"), url("./neuefraktur-CwjUIZ0G.woff") format("woff"); } /* Geist Mono */ @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; src: url("./geist-mono-bold-CTLtpKvJ.woff2") format("woff2"), url("./geist-mono-bold-Bz_UliG4.woff") format("woff"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; src: url("./geist-mono-BzrJhchg.woff2") format("woff2"), url("./geist-mono-OFKGen7b.woff") format("woff"); } :root { --font-display: 'Leibniz Fraktur', serif; --font-mono: 'Geist Mono', monospace; } :root { --layout-column-count: 6; --layout-column-gap: 10px; --layout-margin: 20px; --layout-width: calc(100vw - (2 * var(--layout-margin))); --layout-column-width: calc( ( var(--layout-width) - ( (var(--layout-column-count) - 1) * var(--layout-column-gap) ) ) / var(--layout-column-count) ); } .layout-block, .layout-grid { padding-left: var(--layout-margin); padding-right: var(--layout-margin); width: 100%; } .layout-grid { display: grid; grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr)); grid-gap: var(--layout-column-gap); } html, html * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, html *::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .fade-enter-active, .fade-leave-active { transition: opacity 400ms; } .fade-enter-from, .fade-leave-to { opacity: 0; } .quick-fade-enter-active, .quick-fade-leave-active { transition: opacity 100ms; } .quick-fade-enter-from, .quick-fade-leave-to { opacity: 0; } .slow-fade-enter-active, .slow-fade-leave-active { transition: opacity 600ms; } .slow-fade-enter-from, .slow-fade-leave-to { opacity: 0; } .slide-up-enter-active, .slide-up-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-up-enter-from, .slide-up-leave-to { transform: translateY(-100%); } .slide-left-enter-active, .slide-left-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-left-enter-from, .slide-left-leave-to { transform: translateX(-100%); } :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--black); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100vh; } .h1, h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; font-size: 30px; } .h1.mono, h1.mono, h2.mono, h3.mono, h4.mono, h5.mono, h6.mono { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 22px; } .p, p, a, button, input, pre, span, label, li { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 12px; } .bold { font-weight: 700; } #app { min-height: 100vh; } button { cursor: pointer; } ::selection { color: var(--theme-bg); background: var(--theme-fg); } ::-moz-selection { color: var(--theme-bg); background: var(--theme-fg); }.theme-switcher { display: flex; align-items: center; justify-content: center; gap: 10px; } .theme-switcher button { background: var(--theme-bg); display: block; width: 14px; height: 14px; border-radius: 50%; border: none; cursor: pointer; } .theme-switcher button.active { border: 1px solid var(--theme-fg); } .theme-switcher:hover { color: var(--theme-fg) !important; }.nav { display: flex; align-items: center; gap: 10px; padding-top: 9px; color: var(--grey-100); }.menu { position: fixed; top: 0; left: 0; right: 0; background: var(--theme-bg); border-bottom: 1px solid var(--grey-100); } .menu .menu-wrap { display: flex; flex-direction: column; padding-top: 3px; padding-bottom: 10px; } .menu .menu-wrap .menu-item { padding: 16px 0; text-align: center; } .menu .menu-wrap .menu-item:not(:last-child) { border-bottom: 1px dashed currentColor; } .menu .menu-wrap .menu-item:hover { color: var(--theme-accent); } .menu.menu-enter-active, .menu.menu-leave-active { transition: transform 300ms var(--ease-out-expo); } .menu.menu-enter-from, .menu.menu-leave-to { transform: translateY(-100%); }.scroll-bar { position: fixed; top: 0; right: 0; bottom: 0; width: 8px; will-change: transform; border-left: 1px solid var(--grey-100); } .scroll-bar .inner { height: 100%; position: relative; } .scroll-bar .inner .handle { width: 100%; height: 388px; background: var(--grey-100); border-radius: 20px; position: absolute; right: 0; will-change: transform; }.container { min-height: calc(100 * var(--vh)); max-width: 100vw; overflow-x: clip; background: var(--theme-bg); color: var(--theme-fg); transition: opacity 400ms; } .container:not(.fonts-ready) { opacity: 0; }.category-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: flex-start; width: 100%; position: relative; padding: 8px 0 6px; border-bottom: 1px dashed currentColor; cursor: pointer; } .category-row .index { margin-top: 19px; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 12px; } .category-row .title { display: block; width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .category-row .category-input { display: block; width: 100%; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; font-size: 30px; } .category-row .category-input:focus { outline: none; } .category-row .edit-button, .category-row .save-button { color: var(--grey-100); cursor: pointer; padding-right: 0.5em; padding-left: 0.5em; margin-top: 1.5em; } .category-row .edit-button { opacity: 0; pointer-events: none; } .category-row.editable:hover .edit-button { opacity: 1; pointer-events: auto; } .category-row.router-link-exact-active, .category-row.editable { cursor: default; } .category-row:hover:not(.router-link-exact-active):not(.editable) { color: var(--theme-accent); }.note-row { grid-template-columns: auto 1fr; display: grid; width: 100%; gap: 20px; cursor: pointer; } .note-row .title { width: calc(100% - 43.2px); position: relative; } .note-row .title::after { content: "(open)"; position: absolute; bottom: 0; right: 0; transform: translateX(100%); font-weight: 700; opacity: 0; } .note-row:hover { color: var(--theme-accent); } .note-row:hover .title::after { opacity: 1; }main.directory { padding-top: 18px; padding-bottom: 30px; } main.directory .label { text-transform: uppercase; margin: 17px 0 24px; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 12px; } main.directory .notes { display: flex; flex-direction: column; gap: 14px; }.note-menu { display: flex; gap: 5px; border: 1px solid var(--grey-100); color: var(--grey-100); border-radius: 0.2em; background: var(--theme-bg); } .note-menu button { cursor: pointer; padding: 0.2em; border-radius: 0.2em; } .note-menu button:hover { background: var(--grey-100); color: var(--theme-bg); } .note-menu button.active { background: var(--theme-fg); color: var(--theme-bg); } .note-editor h1 { font-weight: 700 !important; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 12px; } .note-editor h1:first-child { font-family: var(--font-mono); font-size: 12px; font-weight: 400 !important; } .note-editor h1:first-child:first-child::first-letter { font-family: var(--font-display); font-size: 42px; } .note-editor h1.is-editor-empty:first-child::before { color: var(--grey-100); content: attr(data-placeholder); pointer-events: none; font-family: var(--font-mono); font-size: 12px; font-weight: 400 !important; } .note-editor h1.is-editor-empty:first-child::before:first-child::first-letter { font-family: var(--font-display); font-size: 42px; } .note-editor p strong { font-weight: 700; } .note-editor p em { /* font-style: italic; */ color: var(--grey-100); } .note-editor hr { border: 1px dashed currentColor; } .note-editor ul { list-style-type: disc; } .note-editor ul li { display: list-item; margin-left: 1em; } .note-editor ul li *:not(:last-child) { margin-bottom: 0.5em; } .note-editor ol { list-style-type: decimal; } .note-editor ol li { display: list-item; margin-left: 1.5em; } .note-editor ol li::marker { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 12px; } .note-editor li:not(:last-child) { margin-bottom: 0.5em; } .note-editor a { color: var(--theme-link); cursor: pointer; } .note-editor code { border: 1px solid var(--grey-100); color: var(--theme-accent); padding: 0 0.2em; border-radius: 0.2em; } .note-editor pre code { display: block; color: inherit; padding: 1em; /* Code styling */ } .note-editor pre code .hljs-comment, .note-editor pre code .hljs-quote { color: #616161; } .note-editor pre code .hljs-variable, .note-editor pre code .hljs-template-variable, .note-editor pre code .hljs-attribute, .note-editor pre code .hljs-tag, .note-editor pre code .hljs-name, .note-editor pre code .hljs-regexp, .note-editor pre code .hljs-link, .note-editor pre code .hljs-name, .note-editor pre code .hljs-selector-id, .note-editor pre code .hljs-selector-class { color: #f98181; } .note-editor pre code .hljs-number, .note-editor pre code .hljs-meta, .note-editor pre code .hljs-built_in, .note-editor pre code .hljs-builtin-name, .note-editor pre code .hljs-literal, .note-editor pre code .hljs-type, .note-editor pre code .hljs-params { color: #fbbc88; } .note-editor pre code .hljs-string, .note-editor pre code .hljs-symbol, .note-editor pre code .hljs-bullet { color: #b9f18d; } .note-editor pre code .hljs-title, .note-editor pre code .hljs-section { color: #faf594; } .note-editor pre code .hljs-keyword, .note-editor pre code .hljs-selector-tag { color: #70cff8; } .note-editor pre code .hljs-emphasis { font-style: italic; } .note-editor pre code .hljs-strong { font-weight: 700; } .note-editor blockquote { border-left: 4px solid var(--grey-100); padding-left: 0.5em; } .note-editor s { position: relative; } .note-editor s::after { content: " "; display: block; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: currentColor; } .note-editor mark { background: var(--theme-accent); color: var(--theme-bg); padding: 0 0.2em; } .note-editor ul[data-type=taskList] { list-style: none; margin-left: 0; padding: 0; } .note-editor ul[data-type=taskList] li { align-items: center; display: flex; margin-left: 0; } .note-editor ul[data-type=taskList] li > label { flex: 0 0 auto; margin-right: 0.5rem; user-select: none; margin-bottom: 0; } .note-editor ul[data-type=taskList] li > label input { margin: 0; } .note-editor ul[data-type=taskList] li > div { flex: 1 1 auto; } .note-editor ul[data-type=taskList] input[type=checkbox] { cursor: pointer; display: block; width: 1.5em; height: 1.5em; border: 1px solid var(--grey-100); border-radius: 0.2em; } .note-editor ul[data-type=taskList] input[type=checkbox]::after { content: "✓"; font-size: 1.5em; opacity: 0; } .note-editor ul[data-type=taskList] input[type=checkbox]:checked::after { opacity: 1; } .note-editor ul[data-type=taskList] ul[data-type=taskList] { margin: 0; } .note-editor .editor-wrap > div { display: flex; flex-direction: column; gap: 20px; } .note-editor .editor-wrap > div:focus { outline: none; }main.note { padding-top: 8px; padding-bottom: 20px; }main.category .back { display: block; opacity: 0.25; margin-top: 9px; } main.category .category-row { margin-top: 4px; } main.category .notes { display: flex; flex-direction: column; gap: 14px; margin-top: 9px; } main.category .new-note { display: block; margin: 50px auto 0; }main.instructions .back-link { opacity: 0.25; display: block; margin-top: 9px; margin-bottom: 14px; } main.instructions .content { display: flex; flex-direction: column; gap: 20px; } main.instructions .content hr { border-bottom: 1px dashed currentColor; }main.search .back { display: block; opacity: 0.25; margin-top: 9px; } main.search .input-wrap { margin-top: 19px; position: relative; } main.search .input-wrap input { display: block; width: 100%; position: relative; padding: 5px 15px 6px; background: var(--theme-bg); --clip-start: 16px; clip-path: polygon(var(--clip-start) 1px, calc(100% - var(--clip-start)) 1px, calc(100% - 1.5px) 50%, calc(100% - var(--clip-start)) calc(100% - 1px), var(--clip-start) calc(100% - 1px), 1.5px 50%); } main.search .input-wrap::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--theme-fg); --clip-start: 15px; clip-path: polygon(var(--clip-start) 0, calc(100% - var(--clip-start)) 0, 100% 50%, calc(100% - var(--clip-start)) 100%, var(--clip-start) 100%, 0% 50%); } main.search .results { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }.preferences { padding-top: 8px; padding-bottom: 60px; } .preferences .back { opacity: 0.25; display: block; margin-top: 9px; margin-bottom: 14px; } .preferences h1 { margin-bottom: 20px; } .preferences .plugin { display: flex; margin-bottom: 16px; } .preferences input[type=radio] { display: block; flex-shrink: 0; width: 10px; height: 10px; margin-right: 10px; border: 1px solid white; cursor: pointer; } .preferences input[type=radio]:checked { background-color: white; } .preferences .info .description { color: var(--grey-100); margin-top: 6px; } .preferences .config { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .preferences .config-field { display: flex; flex-direction: column; gap: 4px; } .preferences .config-field input { width: 100%; border: 1px solid var(--grey-100); border-radius: 0.2em; padding: 0.2em 0.5em; } .preferences .error { color: red; margin-top: 16px; } .preferences .save-btn { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px 0; text-align: center; border-top: 1px dashed currentColor; background: var(--theme-bg); } .preferences .save-btn .svg-spinner { width: 1em; height: 1em; } .preferences .save-btn:hover { color: var(--theme-accent); }