fix: adds more css vars

javalent · Nov 8, 2022 · 68ad4e1 · 68ad4e1
1 parent 926b6e8
commit 68ad4e1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/src/main.css b/src/main.css
@@ -1,9 +1,12 @@
 :root {
     --statblock-primary-color: #7a200d;
     --statblock-rule-color: #922610;
-    --statblock-bar-color: #e69a28;
     --statblock-background-color: #fdf1dc;
 
+    --statblock-bar-color: #e69a28;
+    --statblock-bar-border-size: 1px;
+    --statblock-bar-border-color: #000;
+
     --statblock-image-width: 75px;
     --statblock-image-height: 75px;
     --statblock-image-border-size: 2px;
@@ -31,6 +34,12 @@
     --statblock-heading-font-size: 23px;
     --statblock-heading-font-variant: small-caps;
     --statblock-heading-font-weight: var(--statblock-font-weight);
+    --statblock-heading-line-height: inherit;
+
+    --statblock-property-line-height: 1.4;
+    --statblock-property-font-color: var(--statblock-font-color);
+    --statblock-property-name-font-color: var(--statblock-font-color);
+    --statblock-property-name-font-weight: bold;
 
     --statblock-section-heading-border-size: 1px;
     --statblock-section-heading-border-color: var(--statblock-primary-color);
@@ -39,6 +48,8 @@
     --statblock-section-heading-font-variant: small-caps;
     --statblock-section-heading-font-weight: normal;
 
+    --statblock-saves-line-height: 1.4;
+
     --statblock-spells-font-style: italic;
 
     --statblock-subheading-font-size: 12px;

diff --git a/src/view/ui/Bar.svelte b/src/view/ui/Bar.svelte
@@ -4,7 +4,8 @@
     .bar {
         height: 5px;
         background: var(--statblock-bar-color);
-        border: 1px solid #000;
+        border: var(--statblock-bar-border-size) solid
+            var(--statblock-bar-border-color);
         z-index: 1;
         width: auto;
     }

diff --git a/src/view/ui/Heading.svelte b/src/view/ui/Heading.svelte
@@ -35,5 +35,6 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        line-height: var(--statblock-heading-line-height);
     }
 </style>
diff --git a/src/view/ui/PropertyLine.svelte b/src/view/ui/PropertyLine.svelte
@@ -43,14 +43,15 @@
 
 <style>
     .line {
-        line-height: 1.4;
+        line-height: var(--statblock-property-line-height);
         display: block;
-        color: var(--statblock-font-color);
+        color: var(--statblock-property-font-color);
     }
     .property-name {
         margin: 0;
         margin-right: 0.25em;
         display: inline;
-        font-weight: bold;
+        color: var(--statblock-property-name-font-color);
+        font-weight: var(--statblock-property-name-font-weight);
     }
 </style>
diff --git a/src/view/ui/Saves.svelte b/src/view/ui/Saves.svelte
@@ -45,7 +45,7 @@
 
 <style>
     .line {
-        line-height: 1.4;
+        line-height: var(--statblock-saves-line-height);
         display: block;
         color: var(--statblock-font-color);
     }