add: journals + notes

crates/app/src/public/css/style.css

@@ -273,6 +273,12 @@ button,
     font-weight: 600;
 }
 
+button:disabled,
+.button:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+}
+
 button.small,
 .button.small {
     /* min-height: max-content; */
@@ -714,6 +720,13 @@ nav .button:not(.title):not(.active):hover {
     border-bottom-right-radius: var(--radius) !important;
 }
 
+@media screen and (min-width: 900px) {
+    .mobile_nav:not(.mobile) {
+        border-radius: var(--radius);
+        border: solid 1px var(--color-super-lowered);
+    }
+}
+
 /* dialog */
 dialog {
     padding: 0;
@@ -1072,7 +1085,7 @@ details[open] summary::after {
     animation: fadein ease-in-out 1 0.1s forwards running;
 }
 
-details .card {
+details > .card {
     background: var(--color-super-raised);
 }
 
@@ -1113,3 +1126,127 @@ details.accordion .inner {
     border: solid 1px var(--color-super-lowered);
     border-top: none;
 }
+
+/* codemirror */
+.CodeMirror {
+    color: var(--color-text) !important;
+}
+
+.CodeMirror {
+    background: transparent !important;
+    font-family: inherit !important;
+    height: 10rem !important;
+    min-height: 100%;
+    max-height: 100%;
+    cursor: text;
+}
+
+.CodeMirror-cursor {
+    border-color: rgb(0, 0, 0) !important;
+}
+
+.CodeMirror-cursor:is(.dark *) {
+    border-color: rgb(255, 255, 255) !important;
+}
+
+.CodeMirror-cursor {
+    height: 22px !important;
+}
+
+[role="presentation"]::-moz-selection,
+[role="presentation"] *::-moz-selection {
+    background-color: rgb(191, 219, 254) !important;
+}
+
+[role="presentation"]::selection,
+[role="presentation"] *::selection,
+.CodeMirror-selected {
+    background-color: rgb(191, 219, 254) !important;
+}
+
+[role="presentation"]:is(.dark *)::-moz-selection,
+[role="presentation"] *:is(.dark *)::-moz-selection {
+    background-color: rgb(64, 64, 64) !important;
+}
+
+[role="presentation"]:is(.dark *)::selection,
+[role="presentation"] *:is(.dark *)::selection,
+.CodeMirror-selected:is(.dark *) {
+    background-color: rgb(64, 64, 64) !important;
+}
+
+.cm-header {
+    color: inherit !important;
+}
+
+.cm-variable-2,
+.cm-quote,
+.cm-keyword,
+.cm-string,
+.cm-atom {
+    color: rgb(63, 98, 18) !important;
+}
+
+.cm-variable-2:is(.dark *),
+.cm-quote:is(.dark *),
+.cm-keyword:is(.dark *),
+.cm-string:is(.dark *),
+.cm-atom:is(.dark *) {
+    color: rgb(217, 249, 157) !important;
+}
+
+.cm-comment {
+    color: rgb(153 27 27) !important;
+}
+
+.cm-comment:is(.dark *) {
+    color: rgb(254, 202, 202) !important;
+}
+
+.cm-comment {
+    font-family: ui-monospace, monospace;
+}
+
+.cm-link {
+    color: var(--color-link) !important;
+}
+
+.cm-url,
+.cm-property,
+.cm-qualifier {
+    color: rgb(29, 78, 216) !important;
+}
+
+.cm-url:is(.dark *),
+.cm-property:is(.dark *),
+.cm-qualifier:is(.dark *) {
+    color: rgb(191, 219, 254) !important;
+}
+
+.cm-variable-3,
+.cm-tag,
+.cm-def,
+.cm-attribute,
+.cm-number {
+    color: rgb(91, 33, 182) !important;
+}
+
+.cm-variable-3:is(.dark *),
+.cm-tag:is(.dark *),
+.cm-def:is(.dark *),
+.cm-attribute:is(.dark *),
+.cm-number:is(.dark *) {
+    color: rgb(221, 214, 254) !important;
+}
+
+.CodeMirror {
+    height: auto !important;
+}
+
+.CodeMirror-line {
+    padding-left: 0 !important;
+}
+
+.CodeMirror-focused .CodeMirror-placeholder {
+    opacity: 50%;
+}