Bellsworne/critterfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjusting colors

Browse Source
This commit is contained in:
chris bell
2026-08-07 10:21:24 -05:00
parent 44f5a39d0c
commit 26ca6d1cf9
2 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/local.db
View File

Binary file not shown.

88
assets/styles/main.rcss
View File

@@ -1,18 +1,16 @@
/* ==========================================================================
RCSS User Agent Defaults (Collector's Pinboard Theme)
========================================================================== */
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Hubballi"; font-family: "Hubballi";
--background-color: #1d3557; --background-color: #2b2d2f;
--foreground-color: #1d3557; --foreground-color: #f0eae1;
--accent-green: #e63946; --accent-green: #606c38;
--accent-gold: #f4a261; --accent-bright-green: #7d8d4c;
--accent-clay: #d62828; --accent-gold: #dda15e;
--card-bg: #f1faee; --accent-clay: #bc6c25;
--border-dark: #0f1c2e; --card-bg: #383b3e;
--border-dark: #191a1b;
} }
body { body {
@@ -68,8 +66,8 @@ button, input, select, textarea {
button { button {
padding: 6px 16px; padding: 6px 16px;
background-color: var(--accent-gold); background-color: var(--accent-green);
color: var(--border-dark); color: var(--foreground-color);
border: 3px var(--border-dark); border: 3px var(--border-dark);
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;
@@ -77,16 +75,17 @@ button {
} }
button:hover { button:hover {
background-color: #f3be58; background-color: var(--accent-bright-green);
} }
button:active { button:active {
background-color: var(--accent-clay); background-color: var(--accent-gold);
color: var(--border-dark);
} }
input[type="text"], textarea { input[type="text"], textarea {
padding: 8px 12px; padding: 8px 12px;
background-color: #ffffff; background-color: #212325;
color: var(--foreground-color); color: var(--foreground-color);
border: 3px var(--border-dark); border: 3px var(--border-dark);
border-radius: 6px; border-radius: 6px;
@@ -94,13 +93,13 @@ input[type="text"], textarea {
} }
input[type="text"]:focus, textarea:focus { input[type="text"]:focus, textarea:focus {
background-color: #fffde8; background-color: #2b2d2f;
border-color: var(--accent-green); border-color: var(--accent-bright-green);
} }
textarea { textarea {
display: block; display: block;
height: 90px; height: 150px;
} }
/* =================================== /* ===================================
@@ -112,7 +111,7 @@ textarea {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 20px; padding: 12px 20px;
background-color: var(--accent-gold); background-color: var(--accent-green);
border: 3px var(--border-dark); border: 3px var(--border-dark);
border-radius: 8px; border-radius: 8px;
margin-bottom: 24px; margin-bottom: 24px;
@@ -127,7 +126,7 @@ textarea {
#header h1 { #header h1 {
font-size: 2.5em; font-size: 2.5em;
color: var(--border-dark); color: var(--foreground-color);
letter-spacing: 1px; letter-spacing: 1px;
} }
@@ -135,7 +134,7 @@ textarea {
font-size: 12pt; font-size: 12pt;
font-weight: bold; font-weight: bold;
background-color: var(--border-dark); background-color: var(--border-dark);
color: #ffffff; color: var(--accent-gold);
padding: 2px 10px; padding: 2px 10px;
border-radius: 12px; border-radius: 12px;
} }
@@ -149,19 +148,19 @@ textarea {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 3px var(--border-dark); border: 3px var(--border-dark);
background-color: var(--accent-green); background-color: var(--accent-gold);
color: #ffffff; color: var(--border-dark);
padding: 0px; padding: 0px;
} }
#new-critter-btn:hover { #new-critter-btn:hover {
background-color: var(--accent-clay); background-color: var(--accent-bright-green);
color: var(--foreground-color);
} }
/* =================================== /* ===================================
Pinboard Grid Layout Drawer List Styles
=================================== */ =================================== */
/* Drawer List Specific Styles */
.critter-list { .critter-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -184,8 +183,8 @@ textarea {
} }
.critter-card:hover { .critter-card:hover {
background-color: #ffffff; background-color: #45484c;
border-left-color: var(--accent-gold); border-left-color: var(--accent-bright-green);
} }
.critter-card-body { .critter-card-body {
@@ -197,7 +196,7 @@ textarea {
} }
.thumb-frame { .thumb-frame {
background-color: var(--accent-gold); background-color: var(--accent-green);
border: 2px var(--border-dark); border: 2px var(--border-dark);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
@@ -224,12 +223,13 @@ textarea {
.critter-name { .critter-name {
font-size: 18pt; font-size: 18pt;
margin: 0px; margin: 0px;
color: var(--foreground-color);
} }
.critter-id { .critter-id {
font-size: 11pt; font-size: 11pt;
font-weight: bold; font-weight: bold;
color: #666666; color: var(--accent-gold);
} }
.info-pills { .info-pills {
@@ -240,8 +240,9 @@ textarea {
.pill { .pill {
font-size: 12pt; font-size: 12pt;
background-color: #e8e2cf; background-color: #212325;
border: 1px var(--border-dark); color: var(--foreground-color);
border: 1px var(--accent-green);
padding: 1px 8px; padding: 1px 8px;
border-radius: 4px; border-radius: 4px;
} }
@@ -256,6 +257,10 @@ textarea {
border-radius: 4px; border-radius: 4px;
} }
.btn-delete:hover {
background-color: #a3561a;
}
/* =================================== /* ===================================
Modals Layout Modals Layout
=================================== */ =================================== */
@@ -265,7 +270,7 @@ textarea {
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #222222aa; background-color: #1f1f1fdd;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -324,7 +329,7 @@ textarea {
.modal-content label { .modal-content label {
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
color: var(--border-dark); color: var(--foreground-color);
} }
.error { .error {
@@ -338,13 +343,13 @@ textarea {
.dialog-text { .dialog-text {
font-size: 18pt; font-size: 18pt;
color: var(--border-dark); color: var(--foreground-color);
padding: 10px 0px; padding: 10px 0px;
} }
.modal-buttons { .modal-buttons {
padding: 14px 20px; padding: 14px 20px;
background-color: #eee7d5; background-color: #2b2d2f;
border-top: 3px var(--border-dark); border-top: 3px var(--border-dark);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -359,7 +364,12 @@ textarea {
} }
.btn-cancel { .btn-cancel {
background-color: #d1c7b2; background-color: #45484c;
color: var(--foreground-color);
}
.btn-cancel:hover {
background-color: #565a5f;
} }
.btn-submit { .btn-submit {
@@ -368,5 +378,5 @@ textarea {
} }
.btn-submit:hover { .btn-submit:hover {
background-color: #1e4232; background-color: var(--accent-bright-green);
} }