mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-02-23 21:01:53 +01:00
318 lines
9.2 KiB
Django/Jinja
318 lines
9.2 KiB
Django/Jinja
/***
|
||
|
||
Global Theming Styles – Color and Shadow Variables
|
||
|
||
HINT: Better overwritte CSS variables instead of individual elements.
|
||
|
||
*/
|
||
|
||
:root {
|
||
/** Derived Colors from the Base Color **/
|
||
|
||
/* Primary Color: the base color itself */
|
||
--primary-color: {{ global_theming.css.colors.base }};
|
||
|
||
/* Secondary Color: slightly lightened */
|
||
--secondary-color: {{ global_theming.css.colors.base | adjust_color(15) }};
|
||
|
||
/* Complementary Color: moderately lightened to fall within a mid-brightness range */
|
||
--complementary-color: {{ global_theming.css.colors.base | adjust_color(30) }};
|
||
|
||
/* Bright Background: significantly lightened */
|
||
--bright-color: {{ global_theming.css.colors.base | adjust_color(45) }};
|
||
|
||
/* Brightest Tone (e.g., for button text or accents): nearly white */
|
||
--brightest-color: {{ global_theming.css.colors.base | adjust_color(60) }};
|
||
|
||
/* Dark Background: a darker variant of the base color */
|
||
--dark-color: {{ global_theming.css.colors.base | adjust_color(-30) }};
|
||
|
||
/* Border Color: slightly offset with a light adjustment */
|
||
--border-color: {{ global_theming.css.colors.base | adjust_color(10) }};
|
||
|
||
/* Button Background: a gentle lightening for soft contrast */
|
||
--button-bg-color: {{ global_theming.css.colors.base | adjust_color(20) }};
|
||
|
||
/** Special Action Colors **/
|
||
--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 }};
|
||
|
||
}
|
||
|
||
|
||
|
||
/* Bootstrap Overrides (Color/Shadow Variables Only) */
|
||
:root {
|
||
--bs-primary: var(--primary-color);
|
||
--bs-secondary: var(--secondary-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(--primary-color);
|
||
--bs-btn-color: var(--dark-color);
|
||
}
|
||
|
||
/** Keycloak Overrides **/
|
||
:root{
|
||
--pf-v5-global--Color--100: {{ global_theming.css.colors.base | adjust_color(-30) }};
|
||
--pf-v5-global--Color--200: {{ global_theming.css.colors.base | adjust_color(-10) }};
|
||
--pf-v5-global--Color--light-100: {{ global_theming.css.colors.base | adjust_color(-30) }};
|
||
--pf-v5-global--Color--light-200: {{ global_theming.css.colors.base | adjust_color(-10) }};
|
||
--pf-v5-global--Color--light-300: {{ global_theming.css.colors.base | adjust_color(10) }};
|
||
}
|
||
|
||
/** Mastodon Overrides **/
|
||
:root{
|
||
--surface-variant-background-color: var(--button-bg-color);
|
||
}
|
||
|
||
/** Nextcloud Specific**/
|
||
:root{
|
||
--color-main-background: var(--bright-color);
|
||
--color-main-background-rgb: var(--bright-color);
|
||
--color-primary-element: var(--button-bg-color);
|
||
--color-main-text: var(--dark-color);
|
||
--color-background-hover: var(--secondary-color);
|
||
|
||
/** Calendar **/
|
||
--color-background-dark: var(--info-color); /** Days which aren't in the current month **/
|
||
--color-primary-element-light: var(--secondary-color);
|
||
}
|
||
|
||
/** Peertube **/
|
||
:root {
|
||
--mainColor: var(--primary-color);
|
||
}
|
||
|
||
/** Pixelfed **/
|
||
:root {
|
||
--card-bg: var(--complementary-color);
|
||
--light-gray: var(--complementary-color);
|
||
}
|
||
|
||
|
||
/* Global Defaults (Colors Only) */
|
||
body {
|
||
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(--primary-color) !important;
|
||
}
|
||
|
||
/* 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(--button-bg-color) !important;
|
||
color: var(--primary-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
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;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
.warning, .alert-warning {
|
||
background-color: var(--warning-color) !important;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
.error, .alert-danger {
|
||
background-color: var(--error-color) !important;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
.info, .alert-info {
|
||
background-color: var(--info-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(--bright-color) */
|
||
color: var(--dark-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color: var(--primary-color) !important;
|
||
}
|
||
|
||
/* Navigation (Background and Text Colors) */
|
||
.navbar, .navbar-light, .navbar-dark {
|
||
background-color: var(--bright-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
.navbar a {
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
.navbar a.dropdown-item {
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
.card-body {
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/* Tables (Borders and Header Colors) */
|
||
th, td {
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
thead {
|
||
background-color: var(--button-bg-color) !important;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/* Cards / Containers (Background, Border, and Shadow)
|
||
Cards now use a slightly lighter background and a bold, clear shadow */
|
||
.card {
|
||
background-color: var(--complementary-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
/* Headings (Text Color) */
|
||
h1, h2, h3, h4, h5, h6, p{
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
|
||
.navbar .dropdown-menu,
|
||
.nav-item .dropdown-menu {
|
||
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(--dark-color) !important;
|
||
background-color: var(--bright-color) !important;
|
||
}
|
||
|
||
.dropdown-item:hover,
|
||
.dropdown-item:focus {
|
||
background-color: var(--secondary-color) !important;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/* Ensure the button itself uses the light text color. Occurred in Mastodon */
|
||
button.icon-button {
|
||
color: var(--most-bright) !important;
|
||
}
|
||
|
||
/** Keycloak **/
|
||
body#keycloak-bg main{
|
||
background-color: var(--complementary-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(--complementary-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-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
|
||
background-color: transparent !important;
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
/** Mailu **/
|
||
[class*=sidebar-dark-], .bg-mailu-logo {
|
||
background-color: var(--bright-color) !important;
|
||
}
|
||
|
||
|
||
/** Mastodon Specific **/
|
||
div#mastodon div.compose-panel div.compose-form__highlightable{
|
||
background-color: var(--bright-color) !important;
|
||
}
|
||
|
||
div#mastodon strong{
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/** Nextcloud specific **/
|
||
html.ng-csp header#header{
|
||
color: var(--bright-color) !important;
|
||
background-color: var(--button-bg-color) !important;
|
||
}
|
||
|
||
html.ng-csp button.files-list__row-name-link, html.ng-csp button.button-vue{
|
||
background-color: transparent !important;
|
||
color: background-color: var(--button-bg-color) !important;
|
||
}
|
||
|
||
html.ng-csp div#postsetupchecks ul.warnings{
|
||
color: var(--error-color) !important;
|
||
}
|
||
|
||
html.ng-csp div#postsetupchecks ul.info{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
div#content-vue p, div#content-vue span{
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/** OpenProject **/
|
||
header.op-app-header{
|
||
background-color: var(--dark-color) !important;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
/** Open Project **/
|
||
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
main-menu-toggle button{
|
||
border: 0px none !important;
|
||
}
|
||
|
||
/* Peertube specific configuration */
|
||
.peertube-container button {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/** Taiga specific configuration **/
|
||
|
||
section.main.kanban{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
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(--dark-color) !important;
|
||
}
|
||
|
||
section.kanban h1, section.kanban h2{
|
||
color: var(--dark-color) !important;
|
||
}
|