Files
computer-playbook/roles/sys-front-inj-css/templates/css/default.css.j2
kevinveenbirkenbachandClaude Opus 5 5137465c6f style: delete every comment the comments-valid policy rejects
3529 invalid comments in 528 files, grandfathered in while the linter
only saw the working-tree diff. Removal ran through the linter's own
collectors, so detection and deletion cannot drift: a comment whose
opener line is blank before it and whose closer line is blank after it
loses all its lines, anything else loses only the comment region, and a
line left holding a bare delimiter goes with it.

Five files keep their comments behind a nocheck marker instead. Four are
upstream configs whose inline docs are upstream's own (mautrix, systemd
journald, nextcloud-oidc-login, MediaWiki). In littlejs the
commented-out entries ARE the deactivation mechanism for an example
tile, so deleting them would delete configuration.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 03:22:02 +02:00

252 lines
8.6 KiB
Django/Jinja
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/***
Global Theming Styles – Color and Shadow Variables
HINT:
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.
*/
{% if design.font.import_url %}
@import url('{{ design.font.import_url }}');
{% endif %}
/* Auto-generated by colorscheme-generator */
:root {
{% for var_name, color in CSS_COLOR_PALETTE.items() %}
{{ var_name }}: {{ color }};
{% endfor %}
}
@media (prefers-color-scheme: dark) {
:root {
{% for var_name, color in CSS_COLOR_PALETTE_INVERTED.items() %}
{{ var_name }}: {{ color }};
{% endfor %}
}
}
:root, ::after, ::before, ::backdrop {
--native-dark-accent-color: var(--color-01-60);
--native-dark-bg-color: var(--color-01-10);
--native-dark-bg-image-color: rgba(var(--color-rgb-01-01), 0.10);
--native-dark-border-color: var(--color-01-40);
--native-dark-box-shadow: 0 0 0 1px rgb(var(--color-rgb-01-99), / 10%);
--native-dark-cite-color: var(--color-01-70);
--native-dark-fill-color: var(--color-01-50);
--native-dark-font-color: var(--color-01-95);
--native-dark-link-color: var(--color-01-80);
--native-dark-visited-link-color: var(--color-01-85);
}
/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
--bs-black: var(--color-01-01);
--bs-white: var(--color-01-99);
--bs-gray: var(--color-01-50);
--bs-gray-dark: var(--color-01-20);
{% for i in range(1, 10) %}
{% set gray = i * 100 %}
{% set color = 100 - i * 10 %}
--bs-gray-{{ gray }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}
--bs-primary: var(--color-01-65);
--bs-light: var(--color-01-95);
--bs-dark: var(--color-01-10);
--bs-primary-rgb: var(--color-rgb-01-65);
--bs-secondary-rgb: var(--color-rgb-01-50);
--bs-light-rgb: var(--color-rgb-01-95);
--bs-dark-rgb: var(--color-rgb-01-10);
--bs-white-rgb: var(--color-rgb-01-99);
--bs-black-rgb: var(--color-rgb-01-01);
--bs-body-color-rgb: var(--color-rgb-01-10);
--bs-body-bg-rgb: var(--color-rgb-01-99);
--bs-body-color: var(--color-01-10);
--bs-body-bg: var(--color-01-99);
--bs-border-color: var(--color-01-85);
--bs-link-color: var(--color-01-65);
--bs-link-hover-color: var(--color-01-60);
--bs-code-color: var(--color-01-55);
--bs-highlight-bg: var(--color-01-93);
--bs-list-group-bg: var(--color-01-40);
--bs-emphasis-color: var(--color-01-01);
--bs-emphasis-color-rgb: var(--color-rgb-01-01);
--bs-secondary-color: rgba(var(--color-rgb-01-10), 0.75);
--bs-secondary-color-rgb: var(--color-rgb-01-10);
--bs-secondary-bg: var(--color-01-90);
--bs-secondary-bg-rgb: var(--color-rgb-01-90);
--bs-tertiary-color: rgba(var(--color-rgb-01-10), 0.5);
--bs-tertiary-color-rgb: var(--color-rgb-01-10);
--bs-tertiary-bg: var(--color-01-95);
--bs-tertiary-bg-rgb: var(--color-rgb-01-95);
--bs-link-color-rgb: var(--color-rgb-01-65);
--bs-link-hover-color-rgb: var(--color-rgb-01-60);
--bs-highlight-color: var(--color-01-10);
--bs-border-color-translucent: rgba(var(--color-rgb-01-01), 0.175);
--bs-focus-ring-color: rgba(var(--color-rgb-01-65), 0.25);
--bs-table-color: var(--bs-emphasis-color);
--bs-table-bg: var(--color-01-99);
--bs-table-border-color: var(--color-01-99);
--bs-table-striped-bg: var(--color-01-85);
--bs-table-hover-color: var(--color-01-01);
--bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}
/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
background-color: var(--color-01-93);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-93), var(--color-01-91), var(--color-01-95), var(--color-01-93));
background-attachment: fixed;
color: var(--color-01-40);
font-family: {{ design.font.type }};
}
{# All links (applies to all anchor elements regardless of state) #}
a {
color: var(--color-01-50);
}
{# Unvisited links (applies only to links that have not been visited) #}
a:link {
color: var(--color-01-55);
}
{# Visited links (applies only to links that have been visited) #}
a:visited {
color: var(--color-01-45);
}
{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
color: var(--color-01-60);
}
{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
color: var(--color-01-65);
}
/** Set default buttons transparent **/
html[native-dark-active] button, button{
background-color: var(--color-01-87);
}
button:hover,
.btn:not(.stretched-link):hover {
filter: brightness(0.9);
}
input:invalid,
textarea:invalid,
select:invalid {
background-color: var(--color-01-01);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-01), var(--color-01-10));
color: var(--bs-danger);
border-color: var(--color-01-20);
}
input:valid,
textarea:valid,
select:valid {
background-color: var(--color-01-80);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-80), var(--color-01-90));
color: var(--bs-success);
border-color: var(--color-01-70);
}
input:required,
textarea:required,
select:required {
background-color: var(--color-01-50);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-50), var(--color-01-60));
color: var(--bs-warning);
border-color: var(--color-01-70);
}
input:optional,
textarea:optional,
select:optional {
background-color: var(--color-01-60);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-60), var(--color-01-70));
color: var(--bs-info);
border-color: var(--color-01-70);
}
input:read-only,
textarea:read-only,
select:read-only {
background-color: var(--color-01-80);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-90), var(--color-01-70));
color: var(--color-01-20);
border-color: var(--color-01-50);
}
input:read-write,
textarea:read-write,
select:read-write {
background-color: var(--color-01-70);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-70), var(--color-01-80));
color: var(--color-01-40);
border-color: var(--color-01-70);
}
input:in-range,
textarea:in-range,
select:in-range {
background-color: var(--color-01-70);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-70), var(--color-01-85));
color: var(--color-01-40);
border-color: var(--color-01-70);
}
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
background-color: var(--color-01-10);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-10), var(--color-01-30));
color: var(--color-01-10);
border-color: var(--color-01-50);
}
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
background-color: var(--color-01-82);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-82), var(--color-01-90));
color: var(--color-01-40);
border-color: var(--color-01-70);
}
input:focus,
textarea:focus,
select:focus {
background-color: var(--color-01-75);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-75), var(--color-01-85));
color: var(--color-01-40);
border-color: var(--color-01-50);
}
input:hover,
textarea:hover,
select:hover {
background-color: var(--color-01-78);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-78), var(--color-01-88));
color: var(--color-01-40);
border-color: var(--color-01-65);
}
input:active,
textarea:active,
select:active {
background-color: var(--color-01-68);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-68), var(--color-01-78));
color: var(--color-01-40);
border-color: var(--color-01-60);
}
/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
background-color: var(--color-01-90);
background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-90), var(--color-01-99));
color: var(--color-01-40);
border-color: var(--color-01-70);
}
input[type="checkbox"] {
appearance: auto;
-webkit-appearance: auto;
-moz-appearance: auto;
background: none;
}
option {
background-color: var(--color-01-82);
color: var(--color-01-07);
}
/* Tables (Borders and Header Colors) */
th, td {
border-color: var(--color-01-70);
}
thead {
background-color: var(--color-01-80);
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-40);
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
color: var(--color-01-10);
}
label {
color: var(--color-01-20);
}