mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-02-22 20:39:40 +01:00
Optimized Global CSS for portfolio
This commit is contained in:
parent
9efca268c9
commit
fedc5572f1
@ -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
|
||||
global_theming_enabled: true
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user