mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-09-09 19:57:16 +02:00
feat(frontend): rename inj roles to sys-front-*, add sys-svc-cdn, cache-busting lookup
Introduce sys-svc-cdn (cdn_paths/cdn_urls/cdn_dirs) and ensure CDN directories + latest symlink. Rename sys-srv-web-inj-* → sys-front-inj-*; update includes/templates; serve shared/per-app CSS & JS via CDN. Add lookup_plugins/local_mtime_qs.py for mtime-based cache busting; split CSS into default.css/bootstrap.css + optional per-app style.css. CSP: use style-src-elem; drop unsafe-inline for styles. Services: fix SYS_SERVICE_ALL_ENABLED bool and controlled flush. BREAKING CHANGE: role names changed; replace includes and references accordingly. Conversation: https://chatgpt.com/share/68b55494-9ec4-800f-b559-44707029141d
This commit is contained in:
141
roles/web-app-gitea/templates/style.css.j2
Normal file
141
roles/web-app-gitea/templates/style.css.j2
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
/* Base and derived colors are now referenced from the computed scale */
|
||||
--color-01-primary: var(--color-01-50);
|
||||
--color-01-primary-contrast: var(--color-01-99);
|
||||
--color-01-primary-dark-1: var(--color-01-48);
|
||||
--color-01-primary-dark-2: var(--color-01-47);
|
||||
--color-01-primary-dark-3: var(--color-01-46);
|
||||
--color-01-primary-dark-4: var(--color-01-45);
|
||||
--color-01-primary-dark-5: var(--color-01-44);
|
||||
--color-01-primary-dark-6: var(--color-01-43);
|
||||
--color-01-primary-dark-7: var(--color-01-42);
|
||||
--color-01-primary-light-1: var(--color-01-52);
|
||||
--color-01-primary-light-2: var(--color-01-53);
|
||||
--color-01-primary-light-3: var(--color-01-54);
|
||||
--color-01-primary-light-4: var(--color-01-55);
|
||||
--color-01-primary-light-5: var(--color-01-57);
|
||||
--color-01-primary-light-6: var(--color-01-59);
|
||||
--color-01-primary-light-7: var(--color-01-61);
|
||||
|
||||
/* Alpha variants reference the base RGB variable */
|
||||
{% for i in range(1, 10) %}
|
||||
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
|
||||
{% set alpha = i * 10 %}
|
||||
--color-01-primary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-50), 0.{{ alpha }});
|
||||
{% endfor %}
|
||||
|
||||
--color-01-primary-hover: var(--color-01-primary-dark-1);
|
||||
--color-01-primary-active: var(--color-01-primary-dark-2);
|
||||
|
||||
/* Secondary colors */
|
||||
--color-01-secondary: var(--color-01-80);
|
||||
--color-01-secondary-dark-1: var(--color-01-78);
|
||||
--color-01-secondary-dark-2: var(--color-01-76);
|
||||
--color-01-secondary-dark-3: var(--color-01-74);
|
||||
--color-01-secondary-dark-4: var(--color-01-72);
|
||||
--color-01-secondary-dark-5: var(--color-01-70);
|
||||
--color-01-secondary-dark-6: var(--color-01-68);
|
||||
--color-01-secondary-dark-7: var(--color-01-66);
|
||||
--color-01-secondary-dark-8: var(--color-01-64);
|
||||
--color-01-secondary-dark-9: var(--color-01-62);
|
||||
--color-01-secondary-dark-10: var(--color-01-60);
|
||||
--color-01-secondary-dark-11: var(--color-01-58);
|
||||
--color-01-secondary-dark-12: var(--color-01-56);
|
||||
--color-01-secondary-dark-13: var(--color-01-54);
|
||||
--color-01-secondary-light-1: var(--color-01-92);
|
||||
--color-01-secondary-light-2: var(--color-01-93);
|
||||
--color-01-secondary-light-3: var(--color-01-94);
|
||||
--color-01-secondary-light-4: var(--color-01-95);
|
||||
|
||||
{% for i in range(1, 10) %}
|
||||
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
|
||||
{% set alpha = i * 10 %}
|
||||
--color-01-secondary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-80), 0.{{ alpha }});
|
||||
{% endfor %}
|
||||
|
||||
--color-01-secondary-button: var(--color-01-secondary-dark-4);
|
||||
--color-01-secondary-hover: var(--color-01-secondary-dark-5);
|
||||
--color-01-secondary-active: var(--color-01-secondary-dark-6);
|
||||
|
||||
/* Console Colors */
|
||||
--color-01-console-fg: var(--color-01-98);
|
||||
--color-01-console-fg-subtle: var(--color-01-85);
|
||||
--color-01-console-bg: var(--color-01-10);
|
||||
--color-01-console-border: var(--color-01-40);
|
||||
--color-01-console-hover-bg: var(--color-01-42);
|
||||
--color-01-console-active-bg: var(--color-01-40);
|
||||
--color-01-console-menu-bg: var(--color-01-38);
|
||||
--color-01-console-menu-border:var(--color-01-45);
|
||||
|
||||
/* Body, Text, and Miscellaneous Colors */
|
||||
--color-01-white: var(--color-01-99);
|
||||
--color-01-grey: var(--color-01-60);
|
||||
--color-01-grey-light: var(--color-01-65);
|
||||
|
||||
--color-01-body: var(--color-01-white);
|
||||
--color-01-text-dark: var(--color-01-10);
|
||||
--color-01-text: var(--color-01-40);
|
||||
--color-01-text-light: var(--color-01-60);
|
||||
--color-01-text-light-1: var(--color-01-65);
|
||||
--color-01-text-light-2: var(--color-01-70);
|
||||
--color-01-text-light-3: var(--color-01-75);
|
||||
|
||||
--color-01-footer: var(--color-01-nav-bg);
|
||||
--color-01-timeline: var(--color-01-80);
|
||||
|
||||
/* Input Colors */
|
||||
--color-01-input-text: var(--color-01-10);
|
||||
--color-01-input-background: var(--color-01-white);
|
||||
--color-01-input-toggle-background: var(--color-01-80);
|
||||
--color-01-input-border: var(--color-01-secondary);
|
||||
--color-01-input-border-hover: var(--color-01-secondary-dark-1);
|
||||
|
||||
/* Effects */
|
||||
--color-01-light: var(--color-01-05);
|
||||
--color-01-light-mimic-enabled: rgba(var(--color-01-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
|
||||
--color-01-light-border: var(--color-01-05);
|
||||
--color-01-hover: var(--color-01-05);
|
||||
--color-01-hover-opaque: var(--color-01-95);
|
||||
--color-01-active: var(--color-01-05);
|
||||
|
||||
/* Menu, Card, and Markup Colors */
|
||||
--color-01-menu: var(--color-01-99);
|
||||
--color-01-card: var(--color-01-99);
|
||||
--color-01-markup-table-row: var(--color-01-01);
|
||||
--color-01-markup-code-block: var(--color-01-01);
|
||||
--color-01-markup-code-inline: var(--color-01-01);
|
||||
--color-01-button: var(--color-01-99);
|
||||
--color-01-code-bg: var(--color-01-99);
|
||||
--color-01-shadow: var(--color-01-05);
|
||||
--color-01-shadow-opaque: var(--color-01-85);
|
||||
--color-01-secondary-bg: var(--color-01-95);
|
||||
--color-01-expand-button: var(--color-01-98);
|
||||
--color-01-placeholder-text: var(--color-01-text-light-3);
|
||||
--color-01-editor-line-highlight: var(--color-01-primary-light-6);
|
||||
--color-01-project-column-bg: var(--color-01-secondary-light-4);
|
||||
--color-01-caret: var(--color-01-10);
|
||||
|
||||
/* Reaction and Tooltip Colors */
|
||||
--color-01-reaction-bg: var(--color-01-05);
|
||||
--color-01-reaction-hover-bg: var(--color-01-primary-light-5);
|
||||
--color-01-reaction-active-bg: var(--color-01-primary-light-6);
|
||||
--color-01-tooltip-text: var(--color-01-99);
|
||||
--color-01-tooltip-bg: var(--color-01-05);
|
||||
|
||||
/* Navigation Colors */
|
||||
--color-01-nav-bg: var(--color-01-99);
|
||||
--color-01-nav-hover-bg: var(--color-01-secondary-light-1);
|
||||
--color-01-nav-text: var(--color-01-40);
|
||||
--color-01-secondary-nav-bg: var(--color-01-99);
|
||||
|
||||
/* Label and Accent Colors */
|
||||
--color-01-label-text: var(--color-01-40);
|
||||
--color-01-label-bg: var(--color-01-50);
|
||||
--color-01-label-hover-bg: var(--color-01-60);
|
||||
--color-01-label-active-bg: var(--color-01-70);
|
||||
--color-01-accent: var(--color-01-primary-light-1);
|
||||
--color-01-small-accent: var(--color-01-primary-light-6);
|
||||
--color-01-highlight-fg: var(--color-01-10);
|
||||
--color-01-highlight-bg: var(--color-01-99);
|
||||
--color-01-overlay-backdrop: var(--color-01-05);
|
||||
}
|
||||
Reference in New Issue
Block a user