From 44f5a39d0c5a865f26ea75c57b8f2a33bc8a9230 Mon Sep 17 00:00:00 2001 From: chris bell Date: Fri, 7 Aug 2026 09:36:12 -0500 Subject: [PATCH 1/2] Re-theme test --- assets/local.db | Bin 40960 -> 40960 bytes assets/main.rml | 97 ++++--- assets/styles/main.rcss | 562 +++++++++++++++++----------------------- 3 files changed, 277 insertions(+), 382 deletions(-) diff --git a/assets/local.db b/assets/local.db index 29da0b47c11a969170a551376f6adf6c76f9866e..567e7fb5b0f046a414ea0047028f1bed2d1ed485 100644 GIT binary patch delta 80 zcmZoTz|?SnX@WGP>_i!7M%j%Ci~M$ m|1dD}e`DbP#{Yr;!)CsOYy1-@2yOnB|B|1PbMu3G1qA>oJ{#-+ delta 118 zcmZoTz|?SnX@WGP)I=F)MyZVni~M=sGBEM)X5in=e~bUtX1;(k{3e2I91NoT92~r& ziNz^tZXkkzfkBu76>#ytVqoHb!odHH{|Wz-&3p;h__ - +
-
-
- - +
+ +
+
-

{{entry.value.name}}

-

Species: {{entry.value.species}}

-

Gender: {{entry.value.gender}}

+
+

{{entry.value.name}}

+ #{{entry.key}} +
+ +
+ Sp: {{entry.value.species}} + Sex: {{entry.value.gender}} +
- - + + - - - +
-

Add New Critter

- -

{{error_message}}

- - - - - - - - - - - - - - - - - - - +
+

Add New Critter

+
+
+

{{error_message}}

+
+
+
+
+
+
+
+
+
+
+
- - + +
- -
-
-

Confirmation

- -

{{confirmation_dialog_text}}

- +
+

Confirmation

+

{{confirmation_dialog_text}}

- - + +
- - \ No newline at end of file diff --git a/assets/styles/main.rcss b/assets/styles/main.rcss index b5412ed..c8d534b 100644 --- a/assets/styles/main.rcss +++ b/assets/styles/main.rcss @@ -1,25 +1,29 @@ /* ========================================================================== - RCSS User Agent Defaults (Plain HTML Style) + RCSS User Agent Defaults (Collector's Pinboard Theme) ========================================================================== */ * { box-sizing: border-box; font-family: "Hubballi"; - --background-color: #54703f; - --foreground-color: #000000; + --background-color: #1d3557; + --foreground-color: #1d3557; + --accent-green: #e63946; + --accent-gold: #f4a261; + --accent-clay: #d62828; + --card-bg: #f1faee; + --border-dark: #0f1c2e; } body { display: block; width: 100vw; height: 100vh; - /* font-family: "rmlui-debugger-font"; */ font-size: 15pt; background-color: var(--background-color); color: var(--foreground-color); margin: 0px; - padding: 20px; + padding: 24px; } /* Generic Structural Layout Defaults */ @@ -35,434 +39,334 @@ span, em, strong, a { /* Typographic Defaults */ p { display: block; - margin: 1em 0px; + margin: 0px; } h1, h2, h3, h4, h5, h6 { display: block; font-weight: bold; - margin: 0.83em 0px; + margin: 0px; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } -h4 { font-size: 1em; } -h5 { font-size: 0.83em; } -h6 { font-size: 0.67em; } -em { - font-style: italic; -} - -strong { - font-weight: bold; -} - -a { - color: #0000ee; - text-decoration: underline; -} - -a:hover { - color: #551a8b; -} - -blockquote { - display: block; - margin: 1em 40px; - padding-left: 10px; - border-left: 2px #cccccc; - color: #555555; -} - -code, pre { - font-family: "rmlui-debugger-font"; - background-color: #606060; - color: #000000; - padding: 3px; - font-style: italic; -} - -pre { - display: block; - white-space: pre; - margin: 1em 0px; - padding: 8px; -} - -/* Lists */ -ul, ol { - display: block; - margin: 1em 0px; - padding-left: 40px; -} - -li { - display: block; -} - -/* ========================================================================== - Tables - ========================================================================== */ -table { - display: table; -} - -tr { - display: table-row; -} - -td, th { - display: table-cell; - padding: 4px 8px; - text-align: left; -} - -th { - font-weight: bold; - background-color: #eaeaea; -} - -col { - display: table-column; -} - -colgroup { - display: table-column-group; -} - -thead, tbody, tfoot { - display: table-row-group; -} +em { font-style: italic; } +strong { font-weight: bold; } /* ========================================================================== Form Inputs & Interactive UI Components ========================================================================== */ button, input, select, textarea { display: inline-block; - font-family: "rmlui-debugger-font"; - font-size: 14px; - margin: 2px; + font-family: "Hubballi"; + font-size: 14pt; + margin: 0px; vertical-align: middle; } -button, input[type="submit"], input[type="button"] { - padding: 4px 12px; - min-width: 40px; - background-color: transparent; - color: var(--foreground-color); - border: 1px var(--foreground-color); +button { + padding: 6px 16px; + background-color: var(--accent-gold); + color: var(--border-dark); + border: 3px var(--border-dark); + border-radius: 6px; text-align: center; + font-weight: bold; } -button:hover, input[type="submit"]:hover, input[type="button"]:hover { - background-color: transparent; - border: 2px var(--foreground-color); +button:hover { + background-color: #f3be58; } -button:active, input[type="submit"]:active, input[type="button"]:active { - background-color: #b5b5b5; - border: 2px var(--foreground-color); +button:active { + background-color: var(--accent-clay); } -/* Standard text field styling */ -input[type="text"], input[type="password"], textarea { - padding: 4px; - background-color: transparent; +input[type="text"], textarea { + padding: 8px 12px; + background-color: #ffffff; color: var(--foreground-color); - border: 1px var(--foreground-color); + border: 3px var(--border-dark); + border-radius: 6px; + width: 100%; } -input[type="text"]:focus, input[type="password"]:focus, textarea:focus { - /* border: 1px #005aff; */ - border-width: 2px; +input[type="text"]:focus, textarea:focus { + background-color: #fffde8; + border-color: var(--accent-green); } textarea { display: block; - /* white-space: pre-wrap; */ - width: 300px; - height: 100px; + height: 90px; } -/* Select Box & Dropdowns */ -select { - padding: 4px; - background-color: #ffffff; - color: #000000; - border: 1px #767676; - text-align: left; -} - -/* ========================================================================== - RmlUi Specific Elements (Tabsets, Progress Bars, etc.) - ========================================================================== */ -tabset { - display: block; -} - -tabset tabs { - display: block; - border-bottom: 1px #cccccc; -} - -/* Simple default layout style for built-in tabs */ -tab { - display: inline-block; - padding: 6px 12px; - background-color: #f0f0f0; - border: 1px #cccccc; - margin-right: 2px; -} - -tab:selected { - background-color: #ffffff; - border-bottom: 1px #ffffff; /* Overlap the bottom border line */ - font-weight: bold; -} - -panel { - display: block; - padding: 10px; - background-color: #ffffff; -} - -/* Standard HTML5 / RmlUi Progress Bar Fallback */ -progress { - display: inline-block; - width: 160px; - height: 20px; - background-color: #e6e6e6; - border: 1px #b0b0b0; -} - -progress-value { - display: block; - height: 100%; - background-color: #0078d7; /* Classic Windows Blue fill */ -} - -/* ========================================================================== - Utility & Modern Layout Helpers - ========================================================================== */ -.flex { - display: flex; -} - -.flex-row { - flex-direction: row; -} - -.flex-col { - flex-direction: column; -} - -.justify-center { - justify-content: center; -} - -.align-center { - align-items: center; -} - -.hidden { - display: none; -} - - - /* =================================== - Specific app stuff + App Header =================================== */ #header { display: flex; flex-direction: row; align-items: center; - gap: 50px; + justify-content: space-between; + padding: 12px 20px; + background-color: var(--accent-gold); + border: 3px var(--border-dark); + border-radius: 8px; + margin-bottom: 24px; +} + +.header-title-group { + display: flex; + flex-direction: row; + align-items: baseline; + gap: 16px; +} + +#header h1 { + font-size: 2.5em; + color: var(--border-dark); + letter-spacing: 1px; +} + +.header-tag { + font-size: 12pt; + font-weight: bold; + background-color: var(--border-dark); + color: #ffffff; + padding: 2px 10px; + border-radius: 12px; } #new-critter-btn { - height: 50px; - width: 50px; - border-radius: 10px; - font-size: 30pt; + height: 48px; + width: 48px; + border-radius: 8px; + font-size: 28pt; display: flex; - text-align: center; align-items: center; - border-width: 2px; - border-color: var(--foreground-color); - background-color: transparent; - color: var(--foreground-color); - transition: border-width 0.2s linear-in-out; - -} -#new-critter-btn:hover { - border-width: 4px; + justify-content: center; + border: 3px var(--border-dark); + background-color: var(--accent-green); + color: #ffffff; + padding: 0px; } -/* Critter Cards Container */ +#new-critter-btn:hover { + background-color: var(--accent-clay); +} + +/* =================================== + Pinboard Grid Layout + =================================== */ +/* Drawer List Specific Styles */ .critter-list { display: flex; flex-direction: column; - flex-wrap: wrap; - padding: 10px; + gap: 10px; } -/* Interactive Card Base */ .critter-card { - display: block; - width: 50%; - margin: 10px; - padding: 10px; - background-color: transparent; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 8px 14px; + background-color: var(--card-bg); color: var(--foreground-color); - border: 2px var(--foreground-color); + border: 3px var(--border-dark); + border-left: 10px var(--accent-green); + border-radius: 6px; text-align: left; - border-radius: 10px; } .critter-card:hover { - border: 3px var(--foreground-color); + background-color: #ffffff; + border-left-color: var(--accent-gold); } -.critter-card:active { - background-color: #222222; -} - -/* Header with Small ID & Delete Button */ -.critter-card-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px var(--foreground-color); - padding-bottom: 4px; - margin-bottom: 8px; -} - -.critter-id { - font-size: 12pt; - color: var(--foreground-color); -} - -.btn-delete { - padding: 2px 6px; - min-width: 0px; - font-size: 10px; - background-color: #aa2222; - color: #ffffff; - border: 0px; -} - -.btn-delete:hover { - background-color: #ff3333; -} - -/* Body & Thumbnail */ .critter-card-body { display: flex; + flex-direction: row; align-items: center; -} - -.critter-thumb { - width: 100px; - height: 100px; - margin-right: 10px; - background-color: transparent; - border: 1px var(--foreground-color); -} - -.critter-info { + gap: 14px; flex: 1; } +.thumb-frame { + background-color: var(--accent-gold); + border: 2px var(--border-dark); + border-radius: 4px; + padding: 2px; +} + +.critter-thumb { + width: 50px; + height: 50px; +} + +.critter-info { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; +} + +.critter-card-header { + display: flex; + align-items: baseline; + gap: 12px; +} + .critter-name { - margin: 0px 0px 4px 0px; - font-size: 20pt; - color: var(--foreground-color); -} - -.critter-info p { - margin: 2px 0px; font-size: 18pt; - color: var(--foreground-color); + margin: 0px; } -/* Modals */ +.critter-id { + font-size: 11pt; + font-weight: bold; + color: #666666; +} + +.info-pills { + display: flex; + flex-direction: row; + gap: 8px; +} + +.pill { + font-size: 12pt; + background-color: #e8e2cf; + border: 1px var(--border-dark); + padding: 1px 8px; + border-radius: 4px; +} + +.btn-delete { + padding: 4px 10px; + font-size: 11pt; + font-weight: bold; + background-color: var(--accent-clay); + color: #ffffff; + border: 2px var(--border-dark); + border-radius: 4px; +} + +/* =================================== + Modals Layout + =================================== */ .modal-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; - background-color: var(--background-color); + background-color: #222222aa; display: flex; align-items: center; justify-content: center; } .modal-content { - background-color: transparent; + background-color: var(--card-bg); color: var(--foreground-color); - border-color: var(--foreground-color); - border-width: 2px; - padding: 20px; + border: 4px var(--border-dark); border-radius: 10px; - width: 80%; - height: 80%; + width: 600px; + padding: 0px; + display: flex; + flex-direction: column; } -.modal-content h2 { - position: relative; - top: -65px; - background-color: var(--background-color); - text-align: center; - padding: 0px; - max-width: 300px; +.modal-content-small { + width: 450px; +} + +.modal-header { + background-color: var(--accent-green); + color: #ffffff; + padding: 12px 20px; + border-bottom: 3px var(--border-dark); +} + +.modal-header h2 { + font-size: 20pt; + color: #ffffff; +} + +.modal-body { + padding: 18px 20px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 4px; +} + +.form-row { + display: flex; + flex-direction: row; + gap: 12px; +} + +.form-group.half { + width: 50%; } .modal-content label { - display: block; - margin-top: 8px; - font-size: 20pt; -} - -.modal-content input { - width: 100%; - margin-bottom: 8px; - background-color: transparent; - font-size: 15pt; -} - -.modal-content textarea { - width: 100%; + font-size: 14pt; + font-weight: bold; + color: var(--border-dark); } .error { - color: #ff5555; + color: #ffffff; font-weight: bold; + padding: 8px; + border: 2px var(--border-dark); + background-color: var(--accent-clay); + border-radius: 4px; } .dialog-text { - font-size: 25pt; - /* font-style: italic; */ + font-size: 18pt; + color: var(--border-dark); + padding: 10px 0px; } .modal-buttons { - margin-top: 15px; + padding: 14px 20px; + background-color: #eee7d5; + border-top: 3px var(--border-dark); display: flex; flex-direction: row; - gap: 20px; - /* justify-content: space-between; */ - align-items: center; - justify-content: center; - font-size: 18pt; - width: 100%; + gap: 12px; + justify-content: flex-end; } .modal-buttons button { - width: 50%; - height: 50px; - font-size: 20pt; - line-height: 50px; + min-width: 120px; + height: 42px; + font-size: 16pt; +} + +.btn-cancel { + background-color: #d1c7b2; +} + +.btn-submit { + background-color: var(--accent-green); + color: #ffffff; +} + +.btn-submit:hover { + background-color: #1e4232; } \ No newline at end of file From 26ca6d1cf93d6ee1750abecc74c523de8c961351 Mon Sep 17 00:00:00 2001 From: chris bell Date: Fri, 7 Aug 2026 10:21:24 -0500 Subject: [PATCH 2/2] Adjusting colors --- assets/local.db | Bin 40960 -> 40960 bytes assets/styles/main.rcss | 88 ++++++++++++++++++++++------------------ 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/assets/local.db b/assets/local.db index 567e7fb5b0f046a414ea0047028f1bed2d1ed485..249f4ad132c2ace1af67203b559c13e49f9b77b2 100644 GIT binary patch delta 147 zcmZoTz|?SnX@WGP(nJ|&Mx~7jOZ+*Q__G-Kck^d$<_U=75A^5ZWRT=%ax5vyEGbP% zwNgkc%1q5m$*D}wPb`_dJKmF-iT}f9_Jo)GY^=zvaK=XXM%Zpk6@%0P4*z A8UO$Q delta 68 zcmZoTz|?SnX@WGP>_i!7M%j%COZ+()`FAt&@8*BInI|BQf8vC|$-Cn{nHl-NZDvn+ a$v-iGZSseFmd(HNpYk(uZhla&pa1|d=NUo( diff --git a/assets/styles/main.rcss b/assets/styles/main.rcss index c8d534b..d20bc9d 100644 --- a/assets/styles/main.rcss +++ b/assets/styles/main.rcss @@ -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); } \ No newline at end of file