theme switcher

This commit is contained in:
nicwands
2026-03-10 11:11:22 -04:00
parent 23054d4981
commit 77b8ad2dcd
21 changed files with 88962 additions and 92 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,768 @@
@charset "UTF-8";
:root {
--black: #181818;
--white: #D5D5D5;
--grey-100: #747474;
--green: #87FF5B;
--blue: #5B92FF;
}
:root .theme-light {
--theme-bg: #D5D5D5;
--theme-fg: #181818;
--theme-accent: #87FF5B;
--theme-link: #5B92FF;
}
:root .theme-dark {
--theme-bg: #181818;
--theme-fg: #D5D5D5;
--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 <body> 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 {
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);
}.nav {
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 {
display: block;
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;
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;
}
.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;
}

Binary file not shown.

Binary file not shown.

18
out/renderer/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Electron</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
<script type="module" crossorigin src="./assets/index-B9wwyKue.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CiC_zCT0.css">
</head>
<body>
<div id="app"></div>
</body>
</html>