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

88
assets/styles/main.rcss
View File

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