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

Optimized CSS for Keycloak

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-02-11 13:26:32 +01:00
parent f76e7ae8b7
commit de475e7347
1 changed files with 74 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,36 @@
/* Global Theming Styles – Color and Shadow Variables */ /* Global Theming Styles – Color and Shadow Variables */
:root { :root {
--primary-color: {{ global_theming.css.colors.primary }}; --primary-color: {{ global_theming.css.colors.primary }};
--secondary-color: {{ global_theming.css.colors.secondary }}; --secondary-color: {{ global_theming.css.colors.secondary }};
--background-color: {{ global_theming.css.colors.background }}; --brightest-color: {{ global_theming.css.colors.button_text }};
--background-dark-color: {{ global_theming.css.colors.background_dark }}; --bright-color: {{ global_theming.css.colors.background }};
--text-color: {{ global_theming.css.colors.text }}; --dark-color: {{ global_theming.css.colors.background_dark }};
--accent-color: {{ global_theming.css.colors.accent }}; --success-color: {{ global_theming.css.colors.success }};
--success-color: {{ global_theming.css.colors.success }}; --warning-color: {{ global_theming.css.colors.warning }};
--warning-color: {{ global_theming.css.colors.warning }}; --error-color: {{ global_theming.css.colors.error }};
--error-color: {{ global_theming.css.colors.error }}; --info-color: {{ global_theming.css.colors.info }};
--info-color: {{ global_theming.css.colors.info }}; --shadow-color: {{ global_theming.css.colors.shadow }};
--link-color: {{ global_theming.css.colors.link }}; --border-color: {{ global_theming.css.colors.border }};
--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 */ /* New variables for cards and buttons */
--card-bg-color: {{ global_theming.css.colors.card_bg_color }}; --card-bg-color: {{ global_theming.css.colors.card_bg_color }};
--large-shadow: {{ global_theming.css.colors.large_shadow }}; --large-shadow: {{ global_theming.css.colors.large_shadow }};
--button-bg-color: {{ global_theming.css.colors.button_bg_color }}; --button-bg-color: {{ global_theming.css.colors.button_bg_color }};
--small-shadow: {{ global_theming.css.colors.small_shadow }}; --small-shadow: {{ global_theming.css.colors.small_shadow }};
} }
/* Bootstrap Overrides (Color/Shadow Variables Only) */ /* Bootstrap Overrides (Color/Shadow Variables Only) */
:root { :root {
--bs-primary: var(--primary-color); --bs-primary: var(--primary-color);
--bs-secondary: var(--secondary-color); --bs-secondary: var(--secondary-color);
--bs-body-bg: var(--background-color); --bs-body-bg: var(--bright-color);
--bs-body-color: var(--text-color); --bs-body-color: var(--dark-color);
--bs-danger: var(--error-color); --bs-danger: var(--error-color);
--bs-warning: var(--warning-color); --bs-warning: var(--warning-color);
--bs-success: var(--success-color); --bs-success: var(--success-color);
--bs-info: var(--info-color); --bs-info: var(--info-color);
--bs-link-color: var(--link-color); --bs-link-color: var(--primary-color);
--bs-btn-color: var(--background-dark-color); --bs-btn-color: var(--dark-color);
} }
/** Mastodon Overrides **/ /** Mastodon Overrides **/
@ -43,10 +40,10 @@
/** Nextcloud Specific**/ /** Nextcloud Specific**/
:root{ :root{
--color-main-background: var(--background-color); --color-main-background: var(--bright-color);
--color-main-background-rgb: var(--background-color); --color-main-background-rgb: var(--bright-color);
--color-primary-element: var(--button-bg-color); --color-primary-element: var(--button-bg-color);
--color-main-text: var(--background-dark-color); --color-main-text: var(--dark-color);
--color-background-hover: var(--secondary-color); --color-background-hover: var(--secondary-color);
/** Calendar **/ /** Calendar **/
@ -61,15 +58,16 @@
/* Global Defaults (Colors Only) */ /* Global Defaults (Colors Only) */
body { body {
background-color: var(--background-color) !important; background-color: var(--bright-color) !important;
color: var(--text-color) !important; background-image: none !important;
color: var(--dark-color) !important;
/* Use the corporate-design font family */ /* Use the corporate-design font family */
font-family: "Liberation Sans", Arial, sans-serif; font-family: "Liberation Sans", Arial, sans-serif;
} }
/* Links (Color Only) */ /* Links (Color Only) */
a { a {
color: var(--link-color) !important; color: var(--primary-color) !important;
} }
/* Buttons (Background, Text, Border, and Shadow) /* Buttons (Background, Text, Border, and Shadow)
@ -88,25 +86,25 @@ button:hover, .btn:hover {
/* States: Success, Warning, Error, Info (Background and Text Colors) */ /* States: Success, Warning, Error, Info (Background and Text Colors) */
.success, .alert-success { .success, .alert-success {
background-color: var(--success-color) !important; background-color: var(--success-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
} }
.warning, .alert-warning { .warning, .alert-warning {
background-color: var(--warning-color) !important; background-color: var(--warning-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
} }
.error, .alert-danger { .error, .alert-danger {
background-color: var(--error-color) !important; background-color: var(--error-color) !important;
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
.info, .alert-info { .info, .alert-info {
background-color: var(--info-color) !important; background-color: var(--info-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
} }
/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */ /* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
input, textarea, select { input, textarea, select {
background-color: var(--info-color) !important; /* Instead of var(--background-color) */ background-color: var(--info-color) !important; /* Instead of var(--bright-color) */
color: var(--text-color) !important; color: var(--dark-color) !important;
border-color: var(--border-color) !important; border-color: var(--border-color) !important;
} }
input:focus, textarea:focus, select:focus { input:focus, textarea:focus, select:focus {
@ -116,20 +114,20 @@ input:focus, textarea:focus, select:focus {
/* Navigation (Background and Text Colors) */ /* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark { .navbar, .navbar-light, .navbar-dark {
background-color: var(--background-color) !important; background-color: var(--bright-color) !important;
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
.navbar a { .navbar a {
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
.navbar a.dropdown-item { .navbar a.dropdown-item {
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
.card-body { .card-body {
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
/* Tables (Borders and Header Colors) */ /* Tables (Borders and Header Colors) */
@ -139,7 +137,7 @@ th, td {
thead { thead {
background-color: var(--button-bg-color) !important; background-color: var(--button-bg-color) !important;
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
/* Cards / Containers (Background, Border, and Shadow) /* Cards / Containers (Background, Border, and Shadow)
@ -152,31 +150,53 @@ thead {
/* Headings (Text Color) */ /* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{ h1, h2, h3, h4, h5, h6, p{
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */ /* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu, .navbar .dropdown-menu,
.nav-item .dropdown-menu { .nav-item .dropdown-menu {
background-color: var(--background-color) !important; background-color: var(--bright-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
/**box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);**/ /**box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);**/
} }
.dropdown-item { .dropdown-item {
color: var(--text-color) !important; color: var(--dark-color) !important;
background-color: var(--background-color) !important; background-color: var(--bright-color) !important;
} }
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus { .dropdown-item:focus {
background-color: var(--secondary-color) !important; background-color: var(--secondary-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
} }
/* Ensure the button itself uses the light text color. Occurred in Mastodon */ /* Ensure the button itself uses the light text color. Occurred in Mastodon */
button.icon-button { button.icon-button {
color: var(--button-text-color) !important; color: var(--most-bright) !important;
}
/** Keycloak **/
body#keycloak-bg main{
background-color: var(--card-bg-color) !important;
}
div#app header, div#app header *{
background-color: var(--primary-color) !important;
color: var(--brightest-color);
}
div#app div#page-sidebar, div#app main#kc-main-content-page-container{
background-color: var(--card-bg-color) !important;
}
div#app main#kc-main-content-page-container section,
div#app main#kc-main-content-page-container section *,
div#app main#kc-main-content-page-container section a
{
background-color: transparent !important;
color: var(--dark-color);
} }
/** LAM Specific **/ /** LAM Specific **/
@ -187,16 +207,16 @@ button.icon-button {
/** Mastodon Specific **/ /** Mastodon Specific **/
div#mastodon div.compose-panel div.compose-form__highlightable{ div#mastodon div.compose-panel div.compose-form__highlightable{
background-color: var(--background-color) !important; background-color: var(--bright-color) !important;
} }
div#mastodon strong{ div#mastodon strong{
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
/** Nextcloud specific **/ /** Nextcloud specific **/
html.ng-csp header#header{ html.ng-csp header#header{
color: var(--background-color) !important; color: var(--bright-color) !important;
background-color: var(--button-bg-color) !important; background-color: var(--button-bg-color) !important;
} }
@ -214,13 +234,13 @@ html.ng-csp div#postsetupchecks ul.info{
} }
div#content-vue p, div#content-vue span{ div#content-vue p, div#content-vue span{
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
/** OpenProject **/ /** OpenProject **/
header.op-app-header{ header.op-app-header{
background-color: var(--background-dark-color) !important; background-color: var(--dark-color) !important;
color: var(--text-color) !important; color: var(--dark-color) !important;
} }
/** Open Project **/ /** Open Project **/
@ -245,9 +265,9 @@ section.main.kanban{
div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{ div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
background-color: var(--info-color) !important; background-color: var(--info-color) !important;
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }
section.kanban h1, section.kanban h2{ section.kanban h1, section.kanban h2{
color: var(--background-dark-color) !important; color: var(--dark-color) !important;
} }