Files
computer-playbook/roles/web-app-nextcloud/templates/style.css.j2
Kevin Veen-Birkenbach bee833feb4 Introduce deterministic CSS gradient angle and shared color palette facts
This ensures CSS output remains stable between runs, preventing unnecessary OpenResty restarts for every service caused by randomized gradients or regenerated CSS files.

Ref: https://chatgpt.com/share/69281d4b-2488-800f-8c0c-c0db44810d1d
2025-11-27 10:44:01 +01:00

65 lines
2.3 KiB
Django/Jinja

:root{
--color-01-main-background: var(--color-01-84);
--color-01-main-background-rgb: rgba(var(--color-01-rgb-84),0.83);
--color-01-primary-element: var(--color-01-80);
--color-01-main-text: var(--color-01-40);
--color-01-background-hover: var(--color-01-65);
/** Calendar **/
--color-01-background-dark: var(--color-01-73); /** Days which aren't in the current month **/
--color-01-primary-element-light: var(--color-01-65);
}
/** Nextcloud specific **/
html.ng-csp header#header{
background-color: var(--color-01-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
color: var(--color-01-17);
}
.files-list__row-name button, button.button-vue{
background: transparent;
}
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent;
}
/** I wounder if this is correct here or if it belongs to the mastodon role */
div#mastodon .column-link{
color: var(--color-01-55);
}
div#mastodon .column-back-button {
color: var(--color-01-58);
}
div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
background-color: var(--color-01-89);
/* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-84), var(--color-01-89), var(--color-01-90), var(--color-01-94));
color: var(--color-01-19);
}
div#mastodon .status-card__title, div#mastodon .display-name strong{
color: var(--color-01-33);
}
div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
color: var(--color-01-29);
}
div#mastodon .dropdown-button{
border: 1px solid #8c8dff;
}
div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
background-color: var(--color-01-71);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-66), var(--color-01-71), var(--color-01-72), var(--color-01-76));
}
.compose-form__actions .icon-button {
color: var(--color-01-28);
}