slightly less broken dark mode & fixed creating new notes

This commit is contained in:
maaa 2023-10-07 21:45:38 +02:00
parent 964a9c5dab
commit 0ae584a16d
2 changed files with 53 additions and 106 deletions

View File

@ -12,6 +12,55 @@
--note-button: #ffffff;
--note-button-text-color: #ffffff;
--unselected-note-button-text-color: #000000;
--option-background: #ffffff;
--invert: 100%
}
/* dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bar: #2d2f31;
--editor: #202124;
--text-color: #ffffff;
--border-color: #393b3d;
--theme-color: #157efb;
--theme-text-color: #ffffff;
--exit-color: #454649;
--session-color: #2d2f31;
--note-button: #202124;
--note-button-text-color: #ffffff;
--unselected-note-button-text-color: #ffffff;
--option-background: #202124;
--invert: 100%
}
.startDiv p {
color: white !important;
}
.topBar p {
color: white !important;
}
.newNote {
color: white !important;
}
.newNote img {
filter: invert(100%)
}
#errorDiv p {
color: white !important;
}
.optionsCoverDiv p {
color: white !important;
}
.burgerSession img {
filter: invert(100%) !important
}
.feature h3, p {
color: black !important;
}
.links a {
color: white !important;
}
}
p, h1, h2, h3, h4, h5, h6 {
@ -184,6 +233,7 @@ body {
padding: 4px;
border: none;
font-size: 16px;
color: var(--text-color);
background-color: var(--editor);
width: calc(100% - 180px - 7px - 6px);
height: calc(100% - 50px - 6px - 8px);
@ -209,7 +259,7 @@ body {
transform: translate(-50%, -50%);
width: 300px;
position: fixed;
background-color: white;
background-color: var(--option-background);
padding: 10px;
color: var(--text-color);
border-radius: 8px;
@ -302,7 +352,7 @@ body {
.optionsDiv img {
height: 18px;
padding-right: 5px;
filter: invert(100%)
filter: invert(var(--invert))
}
.optionsDiv .section {
@ -490,106 +540,3 @@ body {
.links a:hover {
text-decoration: dashed;
}
/* dark theme, modified */
@media (prefers-color-scheme: dark) {
:root {
--gray-950: #030712;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
}
body {
color: white;
background-color: #202020;
}
.topBar {
background-color: #252525;
border-color: #414141;
}
.notesBar {
background-color: #252525;
border: solid;
border-width: 0px;
border-right-width: 1px;
border-color: #414141;
}
.noteBox {
background-color: #202020;
color: white;
}
.notesBar button {
color: white;
}
.notesBar .newNote img {
filter: invert(1);
}
.notesBar button {
background-color: #202020;
border: none;
}
.notesBar .selected {
border-color: #0d51a1 !important;
}
.optionsDiv {
background-color: #252525;
color: white;
border-color: #414141;
}
.optionsDiv .exit {
background-color: #424242;
color: white;
}
.mainDiv .feature {
background-color: #141414;
border: solid;
border-width: 1px;
border-color: #303030;
}
.inoutdiv {
border: 1px solid var(--gray-700);
border-radius: 8px;
background-color: var(--gray-800);
box-shadow: none;
}
.inoutdiv input {
border: solid 1px var(--gray-600);
background-color: var(--gray-700);
color: white;
}
.inoutdiv button {
background-color: var(--gray-700);
color: white;
border: 1px solid var(--gray-600);
}
.notesBar .loadingStuff {
background:
linear-gradient(0.25turn, transparent, #3b3b3b, transparent),
linear-gradient(#2e2e2e, #2e2e2e),
radial-gradient(38px circle at 19px 19px, #202020 50%, transparent 51%),
linear-gradient(#2e2e2e, #2e2e2e);
}
}

View File

@ -64,7 +64,7 @@
<p>Enter in this token in your authenticator app:</p>
<code></code>
<p>Enter in the 6 digit code from your authenticator app:</p>
<input style="margin-bottom: 0;" inputmode="numeric" id="errorInput" type="text"
<input style="margin-bottom: 0;" inputmode="numeric" id="codeInput" type="text"
placeholder="6-digit code"><br></input>
</div>
</div>