roundabout,
created on Friday, 3 January 2025, 17:34:44 (1735925684),
received on Friday, 3 January 2025, 17:34:49 (1735925689)
Author identity: vlad <vlad.muntoiu@gmail.com>
e7a0fd8d14e69490dff06d70e8f045d94d4aa10f
experiments/dark.css
@@ -0,0 +1,171 @@
:root, ::backdrop {
/* GENERAL COLOURS */
/* background */ /* foreground */
--color-primary: #FF9800; --color-primary-text: #ffffff;
--color-primary-1: #F57C00; --color-primary-1-text: #ffffff;
--color-primary-2: #E65100; --color-primary-2-text: #ffffff;
--color-primary-3: #FFB74D; --color-primary-3-text: #000000;
--color-primary-4: #FFE0B2; --color-primary-4-text: #000000;
--color-accent: #00BCD4; --color-accent-text: #000000;
--color-accent-1: #0097A7; --color-accent-1-text: #ffffff;
--color-accent-2: #006064; --color-accent-2-text: #ffffff;
--color-accent-3: #4DD0E1; --color-accent-3-text: #000000;
--color-accent-4: #B2EBF2; --color-accent-4-text: #000000;
--color-background: #000000; --color-background-text: #ffffffdf;
--color-caption-text: #ffffffb9;
--color-label-text: #ffffffdf;
--color-error: #FF1744; --color-error-text: #000000;
--color-alert: #FFEA00; --color-alert-text: #000000;
--color-info: #00E5FF; --color-info-text: #000000;
--color-success: #00C853; --color-success-text: #ffffff;
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
--color-scheme: light;
/* CODE BLOCKS */
--color-code: #263238; --color-code-text: #ffffff;
--color-quote: #212121; --color-quote-text: #ffffffcc;
--color-short-code: #424242; --color-short-code-text: #ffffffcc;
--color-keyboard: #37474F; --color-keyboard-text: #ffffff;
--color-scheme-code: dark;
--size-keyboard: 1.5em;
--padding-keyboard: 0.375em;
--padding-code: 12px;
--radius-code: 0;
--radius-short-code: 0.125em;
--border-code: none;
--border-short-code: none;
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
/* BUTTONS */
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
--color-flat-button-hover: #FF980020; --color-flat-button-hover-text: var(--color-primary-2);
--color-flat-button-active: #FF980030; --color-flat-button-active-text: var(--color-primary-3);
/* LINKS */
--color-link-text: #C6FF00;
--color-link-hover-text: #EEFF41;
--color-link-active-text: #C6FF0080;
--color-link-visited-text: #C6FF00;
--color-link-visited-hover-text: #EEFF41;
/* TOASTS */
--color-callout: #546e7a; --color-callout-text: #ffffff;
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
--color-callout-button-text: var(--color-accent-4);
/* CHECKBOXES */
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
--color-switch: #eeeeee; --color-switch-thumb: #757575;
--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent);
--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575;
--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent);
/* RANGES */
--color-range: var(--color-accent-4); --color-range-text: var(--color-accent);
--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent);
/* CARDS */
--color-card: #212121; --color-card-text: #000000df;
--color-figcaption-text: #000000df;
/* NAVBAR */
--color-navbar: #212121; --color-navbar-text: var(--color-primary-text);
--color-navbar-link: var(--color-primary-text);
/* NAVRAIL */
--color-navrail: #424242; --color-navrail-text: var(--color-primary-text);
--color-navrail-link: var(--color-primary-text);
--color-navrail-link-hover: var(--color-primary-3);
--color-navrail-link-selected: var(--color-primary-3);
/* SIDENAV */
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
/* BREADCRUMBS */
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
--color-breadcrumbs-link: var(--color-navbar-text);
--color-breadcrumbs-separator: var(--color-navbar-text);
--height-breadcrumbs: 48px;
--padding-breadcrumbs: 8px;
--shadow-breadcrumbs: var(--shadow-navbar);
--border-breadcrumbs: none;
--radius-breadcrumbs: 0;
--separator-breadcrumbs: " > ";
/* TABS */
--color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text);
--color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text);
--color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text);
--color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);
/* DIVIDERS */
--line-divider: 1px solid #00000080;
--color-table: #fafafa; --color-table-text: #000000;
--color-row-odd: #00000010; --color-row-odd-text: #000000;
--color-row-even: transparent; --color-row-even-text: #000000;
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
/* BADGES */
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
/* AVATARS */
--radius-avatar: 0;
/* BUBBLES */
--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text);
--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text);
/* INPUTS */
--color-input: #ffffff; --color-input-text: #000000bb;
--color-input-hover: #ffffff; --color-input-hover-text: #000000bb;
--color-input-active: #ffffff; --color-input-active-text: #000000df;
--color-flat-input: transparent; --color-flat-input-text: #000000bb;
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb;
--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df;
/* TEXTAREAS */
--color-textarea: #ffffff; --color-textarea-text: #000000bb;
--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb;
--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df;
--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb;
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb;
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df;
/* MENUS */
--color-toolbar: #ffffff; --color-toolbar-text: #000000bb;
--color-menu: #ffffff; --color-menu-text: #000000bb;
--color-menu-item: transparent; --color-menu-item-text: #000000bb;
--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb;
/* DIALOGS */
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
--tap-highlight-color: transparent;
}
static/style.css
@@ -614,7 +614,7 @@ dd {
}
#picture-view > x-frame {
flex: 1 0 var(--width);
flex: 1 1 var(--width);
margin: 0;
}
templates/gallery.html
@@ -85,7 +85,9 @@
<div class="list-more">
<form action="/gallery/{{ gallery.id }}/remove-picture" method="POST">
<input type="hidden" name="picture_id" value="{{ picture.resource.id }}">
<button type="submit" class="button-flat">Remove</button>
{% if have_permission %}
<button type="submit" class="button-flat"><iconify-icon icon="mdi:close">Remove</iconify-icon></button>
{% endif %}
</form>
</div>
</li>