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

Implemented new gradients, removed important and mapped bootstrap css variables new

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-02-20 19:32:24 +01:00
parent 6597d980df
commit 63c2538027
1 changed files with 119 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
roles/nginx-modifier-css/templates/global.css.j2
View File

@ -45,12 +45,38 @@ HINT:
/* Bootstrap Overrides (Color/Shadow Variables Only) */ /* Bootstrap Overrides (Color/Shadow Variables Only) */
:root { :root {
--bs-primary: var(--color-50); --bs-black: var(--color-01); /* Original tone: Black (#000) */
--bs-secondary: var(--color-65); --bs-white: var(--color-99); /* Original tone: White (#fff) */
--bs-body-bg: var(--color-90); --bs-gray: var(--color-50); /* Original tone: Gray (#6c757d) */
--bs-body-color: var(--color-40); --bs-gray-dark: var(--color-20); /* Original tone: Dark Gray (#343a40) */
--bs-link-color: var(--color-50); --bs-gray-100: var(--color-95); /* Original tone: Very Light Gray (#f8f9fa) */
--bs-btn-color: var(--color-40); --bs-gray-200: var(--color-90); /* Original tone: Lighter Gray (#e9ecef) */
--bs-gray-300: var(--color-85); /* Original tone: Light Gray (#dee2e6) */
--bs-gray-400: var(--color-80); /* Original tone: Gray (#ced4da) */
--bs-gray-500: var(--color-70); /* Original tone: Medium Gray (#adb5bd) */
--bs-gray-600: var(--color-50); /* Original tone: Gray (#6c757d) */
--bs-gray-700: var(--color-40); /* Original tone: Darker Gray (#495057) */
--bs-gray-800: var(--color-20); /* Original tone: Dark Gray (#343a40) */
--bs-gray-900: var(--color-10); /* Original tone: Very Dark Gray (#212529) */
--bs-primary: var(--color-65); /* Original tone: Blue (#0d6efd) */
--bs-light: var(--color-95); /* Original tone: Light (#f8f9fa) */
--bs-dark: var(--color-10); /* Original tone: Dark (#212529) */
--bs-primary-rgb: var(--color-rgb-65); /* Original tone: Blue (13, 110, 253) */
--bs-secondary-rgb: var(--color-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */
--bs-light-rgb: var(--color-rgb-95); /* Original tone: Light (248, 249, 250) */
--bs-dark-rgb: var(--color-rgb-10); /* Original tone: Dark (33, 37, 41) */
--bs-white-rgb: var(--color-rgb-99); /* Original tone: White (255, 255, 255) */
--bs-black-rgb: var(--color-rgb-01); /* Original tone: Black (0, 0, 0) */
--bs-body-color-rgb: var(--color-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */
--bs-body-bg-rgb: var(--color-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */
--bs-body-color: var(--color-10); /* Original tone: Dark (#212529) */
--bs-body-bg: var(--color-99); /* Original tone: White (#fff) */
--bs-border-color: var(--color-85); /* Original tone: Gray (#dee2e6) */
--bs-link-color: var(--color-65); /* Original tone: Blue (#0d6efd) */
--bs-link-hover-color: var(--color-60); /* Original tone: Darker Blue (#0a58ca) */
--bs-code-color: var(--color-55); /* Original tone: Pink (#d63384) */
--bs-highlight-bg: var(--color-93); /* Original tone: Light Yellow (#fff3cd) */
--bs-list-group-bg: var(--color-40);
} }
/* Discourse */ /* Discourse */
@ -714,73 +740,89 @@ input:checked {
/* Tables (Borders and Header Colors) */ /* Tables (Borders and Header Colors) */
th, td { th, td {
border-color: var(--color-70) !important; border-color: var(--color-70);
} }
thead { thead {
background-color: var(--color-80) !important; background-color: var(--color-80);
color: var(--color-40) !important; /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
} }
/* Headings (Text Color) */ /* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{ h1, h2, h3, h4, h5, h6, p{
color: var(--color-10) !important; color: var(--color-10);
} }
/* Navigation (Background and Text Colors) */ /* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark { .navbar, .navbar-light, .navbar-dark {
background-color: var(--color-90) !important; background-color: var(--color-90);
color: var(--color-50) !important; /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
border-color: var(--color-85) !important; background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
color: var(--color-50);
border-color: var(--color-85);
} }
.navbar a { .navbar a {
color: var(--color-40) !important; color: var(--color-40);
} }
.navbar a.dropdown-item { .navbar a.dropdown-item {
color: var(--color-40) !important; color: var(--color-43);
} }
/* Cards / Containers (Background, Border, and Shadow) /* Cards / Containers (Background, Border, and Shadow)
Cards now use a slightly lighter background and a bold, clear shadow */ Cards now use a slightly lighter background and a bold, clear shadow */
.card { .card {
background-color: var(--color-90) !important; background-color: var(--color-90);
border-color: var(--color-85) !important; /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
border-color: var(--color-85);
} }
.card-body { .card-body {
color: var(--color-40) !important; color: var(--color-40);
} }
/* 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(--color-80) !important; background-color: var(--color-80);
color: var(--color-40) !important; /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
} }
.dropdown-item { .dropdown-item {
color: var(--color-40) !important; color: var(--color-40);
background-color: var(--color-80) !important; background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
} }
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus { .dropdown-item:focus {
background-color: var(--color-65) !important; background-color: var(--color-65);
color: var(--color-40) !important; /* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-65), var(--color-66), var(--color-70));
color: var(--color-40);
} }
/* Keycloak Header */ /* Keycloak Header */
div#app header, div#app header *{ div#app header, div#app header *{
background-color: var(--color-60) !important; background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
color: var(--color-98); color: var(--color-98);
} }
/** LAM Specific **/ /** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{ .lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
background-color: transparent !important; background-color: transparent;
border-color: transparent !important; /* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
border-color: transparent;
} }
/* Not changable due to inline css */ /* Not changable due to inline css */
@ -789,40 +831,46 @@ div#app header, div#app header *{
} }
.titleBar { .titleBar {
background-image: linear-gradient(var(--color-83), var(--color-92)); background-image: linear-gradient(var(--color-83), var(--color-92));
border-top-color: var(--color-78); /* New Gradient based on original background (83 -5, 83, 83 +1, 83 +5) */
border-left-color: var(--color-87); background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-78), var(--color-83), var(--color-84), var(--color-88));
border-top-color: var(--color-78);
border-left-color: var(--color-87);
border-right-color: var(--color-87); border-right-color: var(--color-87);
} }
div.statusInfo { div.statusInfo {
background-color: var(--color-81); background-color: var(--color-81);
color: var(--color-23); /* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-76), var(--color-81), var(--color-82), var(--color-86));
color: var(--color-23);
} }
/** Mailu **/ /** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo { [class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90) !important; background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
} }
/** Lead to errors in portfolio
.content-wrapper, .main-footer {
background-color: var(--color-92);
color: var(--color-18);
} */
div.statusError { div.statusError {
background-color: var(--color-60); background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
} }
/** Nextcloud specific **/ /** Nextcloud specific **/
html.ng-csp header#header{ html.ng-csp header#header{
color: var(--color-90) !important; background-color: var(--color-80);
background-color: var(--color-80) !important; /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-90);
} }
html.ng-csp div#postsetupchecks ul.info{ html.ng-csp div#postsetupchecks ul.info{
background-color: transparent !important; background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
} }
div#mastodon .column-link{ div#mastodon .column-link{
@ -835,6 +883,8 @@ div#mastodon .column-back-button {
div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable { div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
background-color: var(--color-89); background-color: var(--color-89);
/* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-84), var(--color-89), var(--color-90), var(--color-94));
color: var(--color-19); color: var(--color-19);
} }
@ -851,6 +901,8 @@ div#mastodon .dropdown-button{
div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{ div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
background-color: var(--color-71); background-color: var(--color-71);
/* New Gradient based on original background (71 -5, 71, 71 +1, 71 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-66), var(--color-71), var(--color-72), var(--color-76));
} }
.compose-form__actions .icon-button { .compose-form__actions .icon-button {
@ -859,47 +911,61 @@ div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, d
/** OpenProject **/ /** OpenProject **/
header.op-app-header{ header.op-app-header{
background-color: var(--color-40) !important; background-color: var(--color-40);
color: var(--color-40) !important; /* New Gradient based on original background (40 -5, 40, 40 +1, 40 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-35), var(--color-40), var(--color-41), var(--color-45));
color: var(--color-40);
} }
/** Open Project **/ /** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
background-color: transparent !important; background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
} }
/* Peertube specific configuration */ /* Peertube specific configuration */
.peertube-container button { .peertube-container button {
background-color: transparent !important; background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
} }
/* Pixelfed */ /* Pixelfed */
div.page-wrapper{ div.page-wrapper{
background: none !important; background: none;
background-color: none !important; background-color: none;
} }
/** Taiga specific configuration **/ /** Taiga specific configuration **/
section.main.kanban{ section.main.kanban{
background-color: transparent !important; background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
} }
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(--color-92) !important; background-color: var(--color-92);
color: var(--color-40) !important; /* New Gradient based on original background (92 -5, 92, 92 +1, 92 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-87), var(--color-92), var(--color-93), var(--color-97));
color: var(--color-40);
} }
section.kanban h1, section.kanban h2{ section.kanban h1, section.kanban h2{
color: var(--color-40) !important; color: var(--color-40);
} }
.home-project { .home-project {
background: var(--color-88); background: var(--color-88);
/* New Gradient based on original background (88 -5, 88, 88 +1, 88 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-83), var(--color-88), var(--color-89), var(--color-93));
border-color: var(--color-60); border-color: var(--color-60);
color: var(--color-12); color: var(--color-12);
} }
.home-wrapper .title-bar { .home-wrapper .title-bar {
background: var(--color-75); background: var(--color-75);
/* New Gradient based on original background (75 -5, 75, 75 +1, 75 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-75), var(--color-76), var(--color-80));
} }