-
-
Confirmation
-
-
{{confirmation_dialog_text}}
-
+
+
+
{{confirmation_dialog_text}}
-
-
+
+
-
-
\ No newline at end of file
diff --git a/assets/styles/main.rcss b/assets/styles/main.rcss
index b5412ed..d20bc9d 100644
--- a/assets/styles/main.rcss
+++ b/assets/styles/main.rcss
@@ -1,25 +1,27 @@
-/* ==========================================================================
- RCSS User Agent Defaults (Plain HTML Style)
- ========================================================================== */
* {
box-sizing: border-box;
font-family: "Hubballi";
-
- --background-color: #54703f;
- --foreground-color: #000000;
+
+ --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 {
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 +37,346 @@ 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;
+button {
+ padding: 6px 16px;
+ background-color: var(--accent-green);
color: var(--foreground-color);
- border: 1px var(--foreground-color);
+ 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: var(--accent-bright-green);
}
-button:active, input[type="submit"]:active, input[type="button"]:active {
- background-color: #b5b5b5;
- border: 2px var(--foreground-color);
+button:active {
+ background-color: var(--accent-gold);
+ color: var(--border-dark);
}
-/* 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: #212325;
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: #2b2d2f;
+ border-color: var(--accent-bright-green);
}
textarea {
display: block;
- /* white-space: pre-wrap; */
- width: 300px;
- height: 100px;
+ height: 150px;
}
-/* 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-green);
+ 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(--foreground-color);
+ letter-spacing: 1px;
+}
+
+.header-tag {
+ font-size: 12pt;
+ font-weight: bold;
+ background-color: var(--border-dark);
+ color: var(--accent-gold);
+ 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-gold);
+ color: var(--border-dark);
+ padding: 0px;
}
-/* Critter Cards Container */
+#new-critter-btn:hover {
+ background-color: var(--accent-bright-green);
+ color: var(--foreground-color);
+}
+
+/* ===================================
+ Drawer List 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: #45484c;
+ border-left-color: var(--accent-bright-green);
}
-.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-green);
+ 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;
+ margin: 0px;
color: var(--foreground-color);
}
-/* Modals */
+.critter-id {
+ font-size: 11pt;
+ font-weight: bold;
+ color: var(--accent-gold);
+}
+
+.info-pills {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+}
+
+.pill {
+ font-size: 12pt;
+ background-color: #212325;
+ color: var(--foreground-color);
+ border: 1px var(--accent-green);
+ 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;
+}
+
+.btn-delete:hover {
+ background-color: #a3561a;
+}
+
+/* ===================================
+ Modals Layout
+ =================================== */
.modal-overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
- background-color: var(--background-color);
+ background-color: #1f1f1fdd;
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(--foreground-color);
}
.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(--foreground-color);
+ padding: 10px 0px;
}
.modal-buttons {
- margin-top: 15px;
+ padding: 14px 20px;
+ background-color: #2b2d2f;
+ 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: #45484c;
+ color: var(--foreground-color);
+}
+
+.btn-cancel:hover {
+ background-color: #565a5f;
+}
+
+.btn-submit {
+ background-color: var(--accent-green);
+ color: #ffffff;
+}
+
+.btn-submit:hover {
+ background-color: var(--accent-bright-green);
}
\ No newline at end of file