kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-02-23 04:49:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-02-07 20:09:08 +01:00
parent bebcdfd2da
commit 769b43ce07
2 changed files with 66 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
group_vars/all/13_theming.yml
View File

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

61
roles/nginx-global-css/templates/global.css.j2
View File

@ -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;
color: var(--button-text-color) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 2px 2px 5px var(--shadow-color) !important;
background-color: var(--button-bg-color) !important;
color: var(--primary-color) !important;
border-color: var(--border-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;
box-shadow: 2px 2px 10px var(--shadow-color) !important;
border: 1px solid var(--border-color);
background-color: var(--card-bg-color) !important;
box-shadow: var(--large-shadow) !important;
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{
}