kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-11-03 19:58:14 +00: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
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 */
:root {
--primary-color: {{ global_theming.css.colors.primary }};
--secondary-color: {{ global_theming.css.colors.secondary }};
--background-color: {{ global_theming.css.colors.background }};
--background-dark-color: {{ global_theming.css.colors.background_dark }};
--text-color: {{ global_theming.css.colors.text }};
--accent-color: {{ global_theming.css.colors.accent }};
--success-color: {{ global_theming.css.colors.success }};
--warning-color: {{ global_theming.css.colors.warning }};
--error-color: {{ global_theming.css.colors.error }};
--info-color: {{ global_theming.css.colors.info }};
--link-color: {{ global_theming.css.colors.link }};
--button-text-color: {{ global_theming.css.colors.button_text }};
--shadow-color: {{ global_theming.css.colors.shadow }};
--border-color: {{ global_theming.css.colors.border }};
--primary-color: {{ global_theming.css.colors.primary }};
--secondary-color: {{ global_theming.css.colors.secondary }};
--brightest-color: {{ global_theming.css.colors.button_text }};
--bright-color: {{ global_theming.css.colors.background }};
--dark-color: {{ global_theming.css.colors.background_dark }};
--success-color: {{ global_theming.css.colors.success }};
--warning-color: {{ global_theming.css.colors.warning }};
--error-color: {{ global_theming.css.colors.error }};
--info-color: {{ global_theming.css.colors.info }};
--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 }};
--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) */
:root {
--bs-primary: var(--primary-color);
--bs-secondary: var(--secondary-color);
--bs-body-bg: var(--background-color);
--bs-body-color: var(--text-color);
--bs-body-bg: var(--bright-color);
--bs-body-color: var(--dark-color);
--bs-danger: var(--error-color);
--bs-warning: var(--warning-color);
--bs-success: var(--success-color);
--bs-info: var(--info-color);
--bs-link-color: var(--link-color);
--bs-btn-color: var(--background-dark-color);
--bs-link-color: var(--primary-color);
--bs-btn-color: var(--dark-color);
}
/** Mastodon Overrides **/
@@ -43,10 +40,10 @@
/** Nextcloud Specific**/
:root{
--color-main-background: var(--background-color);
--color-main-background-rgb: var(--background-color);
--color-main-background: var(--bright-color);
--color-main-background-rgb: var(--bright-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);
/** Calendar **/
@@ -61,15 +58,16 @@
/* Global Defaults (Colors Only) */
body {
background-color: var(--background-color) !important;
color: var(--text-color) !important;
background-color: var(--bright-color) !important;
background-image: none !important;
color: var(--dark-color) !important;
/* Use the corporate-design font family */
font-family: "Liberation Sans", Arial, sans-serif;
}
/* Links (Color Only) */
a {
color: var(--link-color) !important;
color: var(--primary-color) !important;
}
/* Buttons (Background, Text, Border, and Shadow)
@@ -88,25 +86,25 @@ button:hover, .btn:hover {
/* States: Success, Warning, Error, Info (Background and Text Colors) */
.success, .alert-success {
background-color: var(--success-color) !important;
color: var(--text-color) !important;
color: var(--dark-color) !important;
}
.warning, .alert-warning {
background-color: var(--warning-color) !important;
color: var(--text-color) !important;
color: var(--dark-color) !important;
}
.error, .alert-danger {
background-color: var(--error-color) !important;
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
.info, .alert-info {
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) */
input, textarea, select {
background-color: var(--info-color) !important; /* Instead of var(--background-color) */
color: var(--text-color) !important;
background-color: var(--info-color) !important; /* Instead of var(--bright-color) */
color: var(--dark-color) !important;
border-color: var(--border-color) !important;
}
input:focus, textarea:focus, select:focus {
@@ -116,20 +114,20 @@ input:focus, textarea:focus, select:focus {
/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
background-color: var(--background-color) !important;
background-color: var(--bright-color) !important;
color: var(--primary-color) !important;
}
.navbar a {
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
.navbar a.dropdown-item {
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
.card-body {
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
/* Tables (Borders and Header Colors) */
@@ -139,7 +137,7 @@ th, td {
thead {
background-color: var(--button-bg-color) !important;
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
/* Cards / Containers (Background, Border, and Shadow)
@@ -152,31 +150,53 @@ thead {
/* Headings (Text Color) */
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) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
background-color: var(--background-color) !important;
color: var(--text-color) !important;
background-color: var(--bright-color) !important;
color: var(--dark-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;
color: var(--dark-color) !important;
background-color: var(--bright-color) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
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 */
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 **/
@@ -187,16 +207,16 @@ button.icon-button {
/** Mastodon Specific **/
div#mastodon div.compose-panel div.compose-form__highlightable{
background-color: var(--background-color) !important;
background-color: var(--bright-color) !important;
}
div#mastodon strong{
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
/** Nextcloud specific **/
html.ng-csp header#header{
color: var(--background-color) !important;
color: var(--bright-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{
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
/** OpenProject **/
header.op-app-header{
background-color: var(--background-dark-color) !important;
color: var(--text-color) !important;
background-color: var(--dark-color) !important;
color: var(--dark-color) !important;
}
/** 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{
background-color: var(--info-color) !important;
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}
section.kanban h1, section.kanban h2{
color: var(--background-dark-color) !important;
color: var(--dark-color) !important;
}