Optimized Global CSS for portfolio

group_vars/all/13_theming.yml

@@ -2,19 +2,32 @@ global_theming:
   enabled: true
   css:
     colors:
-      primary: "#007BFF"            # Main brand color (e.g., buttons, highlights)
+      # For buttons and highlights – symbolizes the sea (slate blue)
-      secondary: "#0056B3"          # Secondary color (e.g., navigation, footers)
+      primary: "#4F6D7A"
-      background: "#FFFFFF"         # Background color (light mode)
+      # For navigation, footers, etc. – a subtly light brown with a grayish tint (earth)
-      background_dark: "#1E1E1E"    # Background color (dark mode)
+      secondary: "#C8A28F"
-      text: "#333333"               # Main text color (dark mode text: "#EAEAEA")
+      # For the general (light mode) background – an azul, blue–gray tone
-      accent: "#FF9900"             # Accent color (used for highlights, CTAs)
+      background: "#DCE6F2"
-      success: "#28A745"            # Success color (e.g., confirmation messages)
+      # For dark mode: a dark, blue–gray background
-      warning: "#FFC107"            # Warning color (e.g., alerts, notifications)
+      background_dark: "#2E3B4E"
-      error: "#DC3545"              # Error color (e.g., form validation errors)
+      # For the text – true black
-      info: "#17A2B8"               # Information color (e.g., tooltips, messages)
+      text: "#000000"
-      link: "#0056B3"               # Link color (often matches primary/secondary)
+      # Accent color (e.g., for links or buttons) – a golden tone symbolizing the sun
-      button_text: "#FFFFFF"        # Button text color
+      accent: "#FFD700"
-      shadow: "rgba(0, 0, 0, 0.1)"  # Shadow color for UI elements
+      # As the positive/success color – a light, slightly grayish green (forest)
-      border: "#DDDDDD"             # Border color for UI components
+      success: "#B2D3B2"
+      # As the warning color – a light brown (earth)
+      warning: "#D2B48C"
+      # For error messages (standard red)
+      error: "#DC3545"
+      # As the info color – a very light blue (symbolizing the sky)
+      info: "#F0F8FF"
+      # Links – in this case, identical to primary (sea)
+      link: "#4F6D7A"
+      # Button text – white
+      button_text: "#FFFFFF"
+      # Shadows & borders (unchanged)
+      shadow: "rgba(0, 0, 0, 0.1)"
+      border: "#DDDDDD"
 
-global_theming_enabled: false       # Needs to be set to true in every vars/main.yml of every role which supports this
+global_theming_enabled: true

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

@@ -1,4 +1,4 @@
-/* Global Theming Styles - Overrides Application Defaults */
+/* Global Theming Styles – Overrides Application Defaults */
 :root {
     --primary-color: {{ global_theming.css.colors.primary }};
     --secondary-color: {{ global_theming.css.colors.secondary }};
@@ -42,7 +42,8 @@
 body {
     background-color: var(--background-color) !important;
     color: var(--text-color) !important;
-    font-family: Arial, sans-serif;
+    /* Use the corporate-design font family */
+    font-family: "Liberation Sans", Arial, sans-serif;
     line-height: 1.6;
 }
 
@@ -73,19 +74,19 @@ button:hover, .btn:hover {
 /* Success, Warning, Error States */
 .success, .alert-success {
     background-color: var(--success-color) !important;
-    color: white !important;
+    color: var(--text-color) !important;
 }
 .warning, .alert-warning {
     background-color: var(--warning-color) !important;
-    color: black !important;
+    color: var(--text-color) !important;
 }
 .error, .alert-danger {
     background-color: var(--error-color) !important;
-    color: white !important;
+    color: var(--button-text-color) !important;
 }
 .info, .alert-info {
     background-color: var(--info-color) !important;
-    color: white !important;
+    color: var(--text-color) !important;
 }
 
 /* Inputs & Forms */
@@ -133,6 +134,18 @@ thead {
     border-radius: 8px;
 }
 
+/* Headings */
+h1, h2 {
+    color: var(--text-color);
+}
+
+@media (prefers-color-scheme: dark) {
+    h1, h2 {
+        color: #ffffff !important;
+        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
+    }
+}
+
 /* Dark Mode */
 @media (prefers-color-scheme: dark) {
     body {
@@ -147,5 +160,27 @@ thead {
 
 /* Enforce Style Priority */
 html, body, * {
-    !important;
+    /* No additional !important directives */
-}
+}
+
+
+/* Dropdown Menu and Submenu */
+.navbar .dropdown-menu,
+.nav-item .dropdown-menu {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.dropdown-item {
+    color: var(--text-color) !important;
+    background-color: var(--background-color) !important;
+    padding: 8px 12px;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+    background-color: var(--secondary-color) !important;
+    color: var(--text-color) !important;
+    text-decoration: none;
+}