Optimized Global CSS for portfolio

This commit is contained in:
Kevin Veen-Birkenbach 2025-02-07 14:08:18 +01:00
parent 9efca268c9
commit fedc5572f1
2 changed files with 71 additions and 23 deletions

View File

@ -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, bluegray tone
background: "#DCE6F2"
# For dark mode: a dark, bluegray 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
global_theming_enabled: true

View File

@ -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;
}