diff --git a/group_vars/all/13_theming.yml b/group_vars/all/13_theming.yml index 28e18dd3..9ecb7a91 100644 --- a/group_vars/all/13_theming.yml +++ b/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) - secondary: "#0056B3" # Secondary color (e.g., navigation, footers) - background: "#FFFFFF" # Background color (light mode) - background_dark: "#1E1E1E" # Background color (dark mode) - text: "#333333" # Main text color (dark mode text: "#EAEAEA") - accent: "#FF9900" # Accent color (used for highlights, CTAs) - success: "#28A745" # Success color (e.g., confirmation messages) - warning: "#FFC107" # Warning color (e.g., alerts, notifications) - error: "#DC3545" # Error color (e.g., form validation errors) - info: "#17A2B8" # Information color (e.g., tooltips, messages) - link: "#0056B3" # Link color (often matches primary/secondary) - button_text: "#FFFFFF" # Button text color - shadow: "rgba(0, 0, 0, 0.1)" # Shadow color for UI elements - border: "#DDDDDD" # Border color for UI components + # For buttons and highlights – symbolizes the sea (slate blue) + primary: "#4F6D7A" + # For navigation, footers, etc. – a subtly light brown with a grayish tint (earth) + secondary: "#C8A28F" + # For the general (light mode) background – an azul, blue–gray tone + background: "#DCE6F2" + # For dark mode: a dark, blue–gray background + background_dark: "#2E3B4E" + # For the text – true black + text: "#000000" + # Accent color (e.g., for links or buttons) – a golden tone symbolizing the sun + accent: "#FFD700" + # As the positive/success color – a light, slightly grayish green (forest) + 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 \ No newline at end of file +global_theming_enabled: true diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2 index a113585c..f4713a92 100644 --- a/roles/nginx-global-css/templates/global.css.j2 +++ b/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 newline at end of file + /* 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; +}