mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2026-11-06 10:59:59 +00:00
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>
252 lines
8.6 KiB
Django/Jinja
252 lines
8.6 KiB
Django/Jinja
/***
|
||
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);
|
||
}
|