From e71f5197df428da586d72a15050766c034f67999 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Sun, 16 Mar 2025 16:19:55 +0100
Subject: [PATCH] harmonized accent color; made sure that "Schwarzspeicher"
 fits on one line in cards template

---
 theme/static/css/custom.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css
index 448e0f0..d388cd4 100644
--- a/theme/static/css/custom.css
+++ b/theme/static/css/custom.css
@@ -24,6 +24,7 @@
 :root {
   --tr-card-height: 300px;
   --tr-smallest-width: 350px;
+  --tr-accent-color: #cf0000;
 
   --pico-font-family-sans-serif: LibertinusSans, system-ui, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
@@ -277,7 +278,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .required:after {
   content: " *";
-  color: red;
+  color: var(--tr-accent-color);
 }
 
 
@@ -374,7 +375,7 @@ article form {
   top: calc( 100% - 2px );
   width: 100%;
   height: 4px;
-  background-color: #cf0000;
+  background-color: var(--tr-accent-color);
   transform-origin: center center;
   transform: scaleX( 0 );
   animation: line-animation 3s ease;
@@ -435,9 +436,6 @@ article form {
 /* flexitem settings for single card */
 .card-header {
   flex: 0 0 3.5lh;
-  /* set card header to fixed height equivalent to two lines of text */
-  margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
-  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
 
   /* Use overflow on card heading if it's longer than two lines of text */
   h3 {
@@ -452,6 +450,10 @@ article form {
   }
 }
 
+article:not(:has(> form:first-child)) > header.card-header { 
+  padding: calc(var(--pico-block-spacing-vertical) * 0.66) calc(var(--pico-block-spacing-horizontal) * 0.8); /* a bit of a hack to make sure "Schwarzspeicher" fits on one line */
+}
+
 .card-body img {
   height: var(--tr-card-height);
   object-fit: contain;
@@ -685,7 +687,7 @@ img.impr {
 }
 
 .heart {
-  color: red;
+  color: var(--tr-accent-color);
 }
 
 /*