ryan/Notes
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

move colors to variables

Browse Source
This commit is contained in:
Ryan Peters
2025-07-18 10:24:26 -04:00
parent 8008426770
commit f8ed91cf23
1 changed files with 66 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
wwwroot/css/site.css
View File

@@ -1,3 +1,28 @@
:root {
/* Light theme colors */
--bg-primary: #fff;
--bg-secondary: #f8f9fa;
--text-primary: #444;
--text-secondary: #999;
--border-primary: #ccc;
--border-secondary: #e0e0e0;
--accent-primary: #009E60;
--accent-primary-hover: #007a4d;
--accent-primary-focus: rgba(0, 158, 96, 0.2);
--danger-primary: #dc3545;
--danger-hover: #c82333;
--danger-border: #bd2130;
--success-primary: green;
--warning-primary: orangered;
/* Dark theme colors */
--dark-bg-primary: #222;
--dark-bg-secondary: #333;
--dark-text-primary: #ddd;
--dark-border-primary: #555;
--dark-border-secondary: #444;
}
html {
font-size: 14px;
height: 100%;
@@ -34,16 +59,16 @@ div.note-actions {
select.note-dropdown {
padding: 6px 8px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
border: 1px solid var(--border-primary);
background-color: var(--bg-primary);
font-size: 13px;
width: 80px;
}
body.dark select.note-dropdown {
background-color: #333;
color: #ddd;
border: 1px solid #555;
background-color: var(--dark-bg-secondary);
color: var(--dark-text-primary);
border: 1px solid var(--dark-border-primary);
}
form.action-form {
@@ -54,23 +79,23 @@ form.action-form {
form.action-form input[type="text"] {
padding: 6px 8px;
border: 1px solid #ccc;
border: 1px solid var(--border-primary);
border-radius: 5px;
font-size: 13px;
width: 60px;
background-color: #fff;
background-color: var(--bg-primary);
}
body.dark form.action-form input[type="text"] {
background-color: #333;
color: #ddd;
border: 1px solid #555;
background-color: var(--dark-bg-secondary);
color: var(--dark-text-primary);
border: 1px solid var(--dark-border-primary);
}
form.action-form input[type="text"]:focus {
outline: none;
border-color: #009E60;
box-shadow: 0 0 0 2px rgba(0, 158, 96, 0.2);
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px var(--accent-primary-focus);
}
.btn-symbol {
@@ -89,26 +114,26 @@ form.action-form input[type="text"]:focus {
}
.btn-delete {
background-color: #dc3545;
color: #fff;
border-color: #dc3545;
background-color: var(--danger-primary);
color: var(--bg-primary);
border-color: var(--danger-primary);
}
.btn-delete:hover {
background-color: #c82333;
border-color: #bd2130;
background-color: var(--danger-hover);
border-color: var(--danger-border);
transform: scale(1.05);
}
.btn-create {
background-color: #009E60;
color: #fff;
border-color: #009E60;
background-color: var(--accent-primary);
color: var(--bg-primary);
border-color: var(--accent-primary);
}
.btn-create:hover {
background-color: #007a4d;
border-color: #006b42;
background-color: var(--accent-primary-hover);
border-color: var(--accent-primary-hover);
transform: scale(1.05);
}
@@ -118,7 +143,7 @@ textarea {
padding: 15px;
margin: 0;
resize: none;
color: #444;
color: var(--text-primary);
font-size: 16px;
font-family: Consolas, 'Courier New', monospace;
outline: none;
@@ -130,8 +155,8 @@ textarea {
body.dark,
body.dark input,
body.dark textarea {
background-color: #222;
color: #ddd;
background-color: var(--dark-bg-primary);
color: var(--dark-text-primary);
}
.toast {
@@ -140,7 +165,7 @@ body.dark textarea {
right: 25px;
font-size: 11px;
padding: 6px;
color: #fff;
color: var(--bg-primary);
transition: bottom 0.3s, opacity 0.3s;
opacity: 0;
border-radius: 5px 5px 0 0;
@@ -152,11 +177,11 @@ body.dark textarea {
}
.toast#saved-indicator {
background-color: green;
background-color: var(--success-primary);
}
.toast#update-indicator {
background-color: orangered;
background-color: var(--warning-primary);
}
form.login-form input[type=password],
@@ -167,13 +192,24 @@ form.login-form button {
margin: 20px auto;
font-size: 20px;
padding: 8px;
border: 1px solid #333;
border: 1px solid var(--dark-bg-secondary);
border-radius: 8px;
box-sizing: border-box;
}
form.login-form input[type=password] {
color: #999;
color: var(--text-secondary);
}
form.login-form button {
background-color: var(--accent-primary);
color: var(--bg-primary);
border-color: var(--accent-primary);
}
form.login-form button:hover {
background-color: var(--accent-primary-hover);
border-color: var(--accent-primary-hover);
}
button, select {