Finished Global CSS Draft. Fine Optimation for all apps still needed. But overall happy with the result

group_vars/all/13_theming.yml

@@ -29,5 +29,13 @@ global_theming:
       # Shadows & borders (unchanged)
       shadow: "rgba(0, 0, 0, 0.1)"
       border: "#DDDDDD"
-
+      # New settings for cards and buttons:
+      # Cards: a slightly lighter tone than the background for subtle differentiation
+      card_bg_color: "#E6EFF9"
+      # Buttons: a background that is only a bit darker than the main background and in a blue tone
+      button_bg_color: "#C6D7E6"
+      # Bold, larger shadow for containers (cards, dropdowns, etc.)
+      large_shadow: "4px 4px 15px rgba(0, 0, 0, 0.2)"
+      # Reduced shadow for buttons
+      small_shadow: "1px 1px 3px rgba(0, 0, 0, 0.1)"
 global_theming_enabled: true

roles/nginx-global-css/templates/global.css.j2

@@ -14,6 +14,12 @@
     --button-text-color:     {{ global_theming.css.colors.button_text }};
     --shadow-color:          {{ global_theming.css.colors.shadow }};
     --border-color:          {{ global_theming.css.colors.border }};
+    
+    /* New variables for cards and buttons */
+    --card-bg-color:         {{ global_theming.css.colors.card_bg_color }};
+    --large-shadow:          {{ global_theming.css.colors.large_shadow }};
+    --button-bg-color:       {{ global_theming.css.colors.button_bg_color }};
+    --small-shadow:          {{ global_theming.css.colors.small_shadow }};
 }
 
 /* Bootstrap Overrides (Color/Shadow Variables Only) */
@@ -27,7 +33,7 @@
     --bs-success: var(--success-color);
     --bs-info: var(--info-color);
     --bs-link-color: var(--link-color);
-    --bs-btn-color: var(--button-text-color);
+    --bs-btn-color: var(--background-dark-color);
 }
 
 /* Peertube Overrides */
@@ -48,12 +54,13 @@ a {
     color: var(--link-color) !important;
 }
 
-/* Buttons (Background, Text, Border, and Shadow) */
+/* Buttons (Background, Text, Border, and Shadow)
+   Now using a button background that is only slightly darker than the overall background */
 button, .btn {
-    background-color: var(--primary-color) !important;
+    background-color: var(--button-bg-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--primary-color) !important;
-    border: 1px solid var(--border-color) !important;
+    border-color: var(--border-color) !important;
-    box-shadow: 2px 2px 5px var(--shadow-color) !important;
+    box-shadow: var(--small-shadow) !important;
     cursor: pointer;
 }
 
@@ -61,7 +68,6 @@ button:hover, .btn:hover {
     filter: brightness(0.9);
 }
 
-
 /* States: Success, Warning, Error, Info (Background and Text Colors) */
 .success, .alert-success {
     background-color: var(--success-color) !important;
@@ -73,7 +79,7 @@ button:hover, .btn:hover {
 }
 .error, .alert-danger {
     background-color: var(--error-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--background-dark-color) !important;
 }
 .info, .alert-info {
     background-color: var(--info-color) !important;
@@ -94,11 +100,11 @@ input:focus, textarea:focus, select:focus {
 /* Navigation (Background and Text Colors) */
 .navbar, .navbar-light, .navbar-dark {
     background-color: var(--background-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--primary-color) !important;
 }
 
 .navbar a {
-    color: var(--button-text-color) !important;
+    color: var(--background-dark-color) !important;
 }
 
 .navbar a.dropdown-item {
@@ -109,21 +115,21 @@ input:focus, textarea:focus, select:focus {
     color: var(--background-dark-color) !important;
 }
 
-
 /* Tables (Borders and Header Colors) */
 th, td {
-    border: 1px solid var(--border-color);
+    border-color: var(--border-color) !important;
 }
 thead {
     background-color: var(--primary-color);
-    color: var(--button-text-color);
+    color: var(--background-dark-color);
 }
 
-/* Cards / Containers (Background, Border, and Shadow) */
+/* Cards / Containers (Background, Border, and Shadow)
+   Cards now use a slightly lighter background and a bold, clear shadow */
 .card {
-    background-color: var(--background-color) !important;
+    background-color: var(--card-bg-color) !important;
-    box-shadow: 2px 2px 10px var(--shadow-color) !important;
+    box-shadow: var(--large-shadow) !important;
-    border: 1px solid var(--border-color);
+    border-color: var(--border-color) !important;
 }
 
 /* Headings (Text Color) */
@@ -131,6 +137,11 @@ h1, h2 {
     color: var(--text-color);
 }
 
+div#mastodon p{
+    color: var(--background-dark-color) !important;
+}
+
+
 /* Dark Mode Adjustments (Background and Text Colors) */
 @media (prefers-color-scheme: dark) {
     h1, h2 {
@@ -144,7 +155,9 @@ h1, h2 {
     input, textarea, select {
         color: var(--button-text-color) !important;
         background-color: var(--background-dark-color) !important;
-        color: var(--text-color) !important;
+    }
+    div#mastodon p{
+        color: var(--button-text-color) !important;
     }
 }
 
@@ -166,16 +179,18 @@ h1, h2 {
     background-color: var(--secondary-color) !important;
     color: var(--text-color) !important;
 }
-/* Ensure the button itself uses the light text color. Occured in Mastodon */
+
+/* Ensure the button itself uses the light text color. Occurred in Mastodon */
 button.icon-button {
     color: var(--button-text-color) !important;
 }
 
+/** Nextcloud specific **/
+button.files-list__row-name-link, button.button-vue{
+    background-color: transparent !important;
+}
+
 /* Peertube specific configuration */
 .peertube-container button {
     background-color: transparent !important;
 }
-
-.peertube-container .title-col{
-
-}