From ce01a2f387d78ef2f2110babe828043b82ae8d9d Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Mon, 17 Feb 2025 16:53:56 +0100 Subject: [PATCH] Optimized CSS and LDAP role --- roles/docker-keycloak/vars/main.yml | 9 +- .../nginx-global-css/templates/global.css.j2 | 107 +++++++++++++++++- 2 files changed, 111 insertions(+), 5 deletions(-) diff --git a/roles/docker-keycloak/vars/main.yml b/roles/docker-keycloak/vars/main.yml index f492c700..476b972a 100644 --- a/roles/docker-keycloak/vars/main.yml +++ b/roles/docker-keycloak/vars/main.yml @@ -1,4 +1,5 @@ -application_id: "keycloak" -database_type: "postgres" -database_password: "{{applications.keycloak.database_password}}" -ldap_enabled: True \ No newline at end of file +application_id: "keycloak" +database_type: "postgres" +database_password: "{{applications.keycloak.database_password}}" +ldap_enabled: True +realm: "{{primary_domain}}" # This is the name of the default realm which is used by the applications \ No newline at end of file diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2 index df362930..4cef0e02 100644 --- a/roles/nginx-global-css/templates/global.css.j2 +++ b/roles/nginx-global-css/templates/global.css.j2 @@ -72,6 +72,111 @@ HINT: Better overwritte CSS variables instead of individual elements. --bs-btn-color: var(--color-40); } +/* Discourse */ +:root { + --scheme-type: light; + + /* Base Colors */ + --primary: var(--color-20); /* originally #203243 */ + --secondary: var(--color-95); /* originally #eef4f7 */ + --tertiary: var(--color-40); /* originally #416376 */ + --quaternary: var(--color-50); /* originally #5e99b9 */ + + /* Header & Highlight */ + --header_background: var(--color-70); /* originally #86bddb */ + --header_primary: var(--color-20); /* same as --primary */ + --highlight: var(--color-70); /* same as header_background */ + --d-selected: var(--color-85); /* originally #bee0f2 */ + --d-hover: var(--color-90); /* originally #d2efff */ + + /* RGB values remain unchanged */ + --always-black-rgb: 0, 0, 0; + --primary-rgb: 32, 50, 67; + --primary-low-rgb: 227, 235, 242; + --primary-very-low-rgb: 247, 249, 251; + --secondary-rgb: 238, 244, 247; + --header_background-rgb: 134, 189, 219; + --tertiary-rgb: 65, 99, 118; + --highlight-rgb: 134, 189, 219; + --success-rgb: 112, 219, 130; + + /* Primary Scale */ + --primary-very-low: var(--color-100); /* originally #f7f9fb */ + --primary-low: var(--color-95); /* originally #e3ebf2 */ + --primary-low-mid: var(--color-75); /* originally #acc2d7 */ + --primary-medium: var(--color-60); /* originally #7499bd */ + --primary-high: var(--color-40); /* originally #487096 */ + --primary-very-high: var(--color-20); /* originally #34516d */ + --primary-50: var(--color-100); /* originally #f7f9fb */ + --primary-100: var(--color-95); /* originally #eef3f7 */ + --primary-200: var(--color-90); /* originally #e3ebf2 */ + --primary-300: var(--color-80); /* originally #c7d6e4 */ + --primary-400: var(--color-75); /* originally #acc2d7 */ + --primary-500: var(--color-70); /* originally #90aeca */ + --primary-600: var(--color-60); /* originally #7499bd */ + --primary-700: var(--color-50); /* originally #5381ad */ + --primary-800: var(--color-40); /* originally #487096 */ + --primary-900: var(--color-20); /* originally #34516d */ + + /* Header Primary Scale */ + --header_primary-low: var(--color-75); /* rgb(128, 180, 209) */ + --header_primary-low-mid: var(--color-70); /* rgb(110, 155, 181) */ + --header_primary-medium: var(--color-60); /* rgb(93, 132, 155) */ + --header_primary-high: var(--color-50); /* rgb(78, 112, 132) */ + --header_primary-very-high: var(--color-20); /* rgb(52, 76, 94) */ + + /* Secondary Scale */ + --secondary-low: var(--color-20); /* originally #2f5163 */ + --secondary-medium: var(--color-40); /* originally #4e88a5 */ + --secondary-high: var(--color-60); /* originally #7ba9c1 */ + --secondary-very-high: var(--color-90); /* originally #d7e5ec */ + + /* Tertiary Scale */ + --tertiary-very-low: var(--color-100); /* originally #eaf0f3 */ + --tertiary-low: var(--color-95); /* originally #dfe8ee */ + --tertiary-medium: var(--color-60); /* originally #96b4c5 */ + --tertiary-high: var(--color-40); /* originally #5886a0 */ + --tertiary-hover: var(--color-20); /* originally #314a59 */ + --tertiary-50: var(--color-100); /* originally #eaf0f3 */ + --tertiary-100: var(--color-95); /* originally #e6edf1 */ + --tertiary-200: var(--color-90); /* originally #e4ebf0 */ + --tertiary-300: var(--color-85); /* originally #dfe8ee */ + --tertiary-400: var(--color-75); /* originally #c8d8e1 */ + --tertiary-500: var(--color-65); /* originally #b1c7d4 */ + --tertiary-600: var(--color-60); /* originally #96b4c5 */ + --tertiary-700: var(--color-55); /* originally #80a5b9 */ + --tertiary-800: var(--color-50); /* originally #6b96ae */ + --tertiary-900: var(--color-40); /* originally #5886a0 */ + + /* Quaternary */ + --quaternary-low: var(--color-80); /* originally #cfe0ea */ + + /* Highlight */ + --highlight-bg: var(--color-90); /* originally #dbebf4 */ + --highlight-low: var(--color-90); /* originally #dbebf4 */ + --highlight-medium: var(--color-80); /* originally #c3deed */ + --highlight-high: var(--color-30); /* originally #286688 */ + + /* Combination Variables */ + --blend-primary-secondary-5: var(--color-95); /* originally rgb(232, 238, 241) */ + --primary-med-or-secondary-med: var(--color-60); /* originally #7499bd */ + --primary-med-or-secondary-high: var(--color-60); /* originally #7499bd */ + --primary-high-or-secondary-low: var(--color-40); /* originally #487096 */ + --primary-low-mid-or-secondary-high: var(--color-75); /* originally #acc2d7 */ + --primary-low-mid-or-secondary-low: var(--color-75); /* originally #acc2d7 */ + --primary-or-primary-low-mid: var(--color-20); /* originally #203243 */ + --highlight-low-or-medium: var(--color-90); /* originally #dbebf4 */ + --tertiary-or-tertiary-low: var(--color-40); /* originally #416376 */ + --tertiary-low-or-tertiary-high: var(--color-95); /* originally #dfe8ee */ + --tertiary-med-or-tertiary: var(--color-60); /* originally #96b4c5 */ + --secondary-or-primary: var(--color-95); /* originally #eef4f7 */ + --tertiary-or-white: var(--color-40); /* originally #416376 */ + + /* Float Kit */ + --float-kit-arrow-stroke-color: var(--primary-low); /* already mapped above */ + --float-kit-arrow-fill-color: var(--secondary); /* already mapped above */ +} + /** Keycloak Overrides **/ :root{ --pf-v5-global--Color--100: var(--color-40); @@ -368,7 +473,7 @@ a { /* Buttons (Background, Text, Border, and Shadow) Now using a button background that is only slightly darker than the overall background */ -button, .btn { +html[native-dark-active] button, html[native-dark-active] .btn, button, .btn { background-color: var(--color-87) !important; color: var(--color-50) !important; border-color: var(--color-80) !important;