mirror of
https://github.com/gramps-project/gramps-web.git
synced 2026-07-31 07:56:12 -04:00
6caa40322b
* Fix bugs in GrampsjsTable * Refactor sort logic * CSS improvements * Remove unused variable * Comment
255 lines
13 KiB
CSS
255 lines
13 KiB
CSS
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background-color: var(--md-sys-color-background);
|
|
}
|
|
|
|
@media print {
|
|
|
|
html,
|
|
body {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
color: var(--md-sys-color-on-surface);
|
|
/* Web Awesome color token overrides.
|
|
default.css (loaded in index.html) defines --wa-* tokens inside @layer wa-theme,
|
|
so these unlayered declarations win without !important. The --md-sys-color-*
|
|
values on the right are set dynamically by applyColors() in theme.js. */
|
|
--wa-color-surface-raised: var(--md-sys-color-surface-container-high);
|
|
--wa-color-surface-default: var(--md-sys-color-surface);
|
|
--wa-color-surface-border: var(--md-sys-color-outline-variant);
|
|
--wa-color-neutral-fill-normal: var(--md-sys-color-surface-container);
|
|
--wa-color-brand-fill-loud: var(--md-sys-color-primary);
|
|
--wa-color-text-normal: var(--md-sys-color-on-surface);
|
|
--wa-color-focus: var(--md-sys-color-primary);
|
|
--wa-form-control-border-color: var(--md-sys-color-outline);
|
|
/* End Web Awesome overrides */
|
|
--md-fab-secondary-container-color: var(--mdc-theme-secondary);
|
|
--color-boy: #64b5f6;
|
|
--color-girl: #ef9a9a;
|
|
--color-unknown: #b0bec5;
|
|
--color-other: #ce93d8;
|
|
--mdc-theme-primary: var(--md-sys-color-primary);
|
|
--mdc-theme-on-primary: var(--md-sys-color-on-primary);
|
|
--mdc-theme-secondary: var(--md-sys-color-secondary);
|
|
--mdc-theme-on-secondary: rgba(255, 255, 255, 0.95);
|
|
--mdc-theme-background: var(--md-sys-color-background);
|
|
--mdc-theme-surface: var(--md-sys-color-surface);
|
|
--mdc-theme-on-surface: var(--md-sys-color-on-surface);
|
|
--mdc-theme-text-primary-on-light: var(--md-sys-color-on-surface);
|
|
--mdc-theme-text-secondary-on-light: var(--grampsjs-body-font-color);
|
|
--mdc-theme-text-hint-on-light: var(--grampsjs-body-font-color);
|
|
--mdc-theme-text-disabled-on-light: var(--grampsjs-body-font-color);
|
|
--mdc-theme-text-icon-on-light: var(--grampsjs-body-font-color);
|
|
--mdc-theme-text-primary-on-background: var(--grampsjs-body-font-color);
|
|
--mdc-theme-text-secondary-on-background: var(--grampsjs-body-font-color-45);
|
|
--grampsjs-face-rect-border-color: rgba(255, 255, 255, 0.6);
|
|
--grampsjs-face-rect-border-shadow-color: rgba(0, 0, 0, 0.4);
|
|
--grampsjs-face-rect-label-background-color: rgba(1, 1, 1, 0.25);
|
|
--grampsjs-face-rect-label-color: #fff;
|
|
--grampsjs-lightbox-background-color: #000;
|
|
--grampsjs-lightbox-font-color: #fff;
|
|
--grampsjs-lightbox-nav-color: #aaa;
|
|
--grampsjs-lightbox-nav-hover-color: #fff;
|
|
--grampsjs-alert-background-color: color-mix(in srgb,
|
|
var(--md-sys-color-primary) 15%,
|
|
transparent);
|
|
--grampsjs-alert-border-color: color-mix(in srgb,
|
|
var(--md-sys-color-primary) 70%,
|
|
transparent);
|
|
--grampsjs-alert-error-background-color: color-mix(in srgb,
|
|
var(--md-sys-color-error) 20%,
|
|
transparent);
|
|
--grampsjs-alert-error-border-color: color-mix(in srgb,
|
|
var(--md-sys-color-error) 70%,
|
|
transparent);
|
|
--grampsjs-alert-error-font-color: var(--md-sys-color-error);
|
|
--grampsjs-map-marker-color: #ea4335;
|
|
--grampsjs-map-filter-badge-color: #ba1b1b;
|
|
--grampsjs-logout-font-color: #c62828;
|
|
--grampsjs-alert-warn-background-color: rgba(251, 192, 45, 0.2);
|
|
--grampsjs-alert-warn-border-color: rgba(251, 192, 45, 0.7);
|
|
--grampsjs-alert-warn-font-color: #f9a825;
|
|
--grampsjs-alert-success-font-color: #41ad49;
|
|
--grampsjs-task-open: #007bff;
|
|
--grampsjs-task-progress: #ff9800;
|
|
--grampsjs-task-done: rgba(65, 173, 73, 0.4);
|
|
--grampsjs-editable-title-hover-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 20%,
|
|
transparent);
|
|
--grampsjs-delete-all-filter-chip-color: color-mix(in srgb,
|
|
var(--md-sys-color-primary) 32%,
|
|
transparent);
|
|
--grampsjs-connection-chart-border-color: color-mix(in srgb,
|
|
var(--md-sys-color-primary) 40%,
|
|
transparent);
|
|
--grampsjs-connection-chart-person-box: #e6e6e6;
|
|
--grampsjs-editable-list-hover-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 10%,
|
|
transparent);
|
|
--grampsjs-editable-list-active-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 20%,
|
|
transparent);
|
|
--grampsjs-editable-list-selected-active-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 30%,
|
|
transparent);
|
|
--grampsjs-editable-list-selected-hover-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 40%,
|
|
transparent);
|
|
--grampsjs-editable-list-selected-background-color: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 50%,
|
|
transparent);
|
|
--grampsjs-color-link-font: var(--mdc-theme-secondary);
|
|
--grampsjs-color-link-hover: color-mix(in srgb,
|
|
var(--mdc-theme-secondary) 80%,
|
|
black);
|
|
--grampsjs-color-page-loading-progress: var(--mdc-theme-secondary);
|
|
}
|
|
|
|
:root[data-theme='light'] {
|
|
--grampsjs-top-app-bar-background-color: var(--mdc-theme-primary);
|
|
--grampsjs-top-app-bar-font-color: var(--mdc-theme-on-primary);
|
|
--grampsjs-body-font-color: rgba(0, 0, 0, 0.8);
|
|
--grampsjs-body-font-color-0: rgba(0, 0, 0, 0);
|
|
--grampsjs-body-font-color-2: rgba(0, 0, 0, 0.02);
|
|
--grampsjs-body-font-color-5: rgba(0, 0, 0, 0.05);
|
|
--grampsjs-body-font-color-6: rgba(0, 0, 0, 0.06);
|
|
--grampsjs-body-font-color-10: rgba(0, 0, 0, 0.1);
|
|
--grampsjs-body-font-color-15: rgba(0, 0, 0, 0.15);
|
|
--grampsjs-body-font-color-20: rgba(0, 0, 0, 0.2);
|
|
--grampsjs-body-font-color-25: rgba(0, 0, 0, 0.25);
|
|
--grampsjs-body-font-color-30: rgba(0, 0, 0, 0.3);
|
|
--grampsjs-body-font-color-35: rgba(0, 0, 0, 0.35);
|
|
--grampsjs-body-font-color-38: rgba(0, 0, 0, 0.38);
|
|
--grampsjs-body-font-color-40: rgba(0, 0, 0, 0.4);
|
|
--grampsjs-body-font-color-45: rgba(0, 0, 0, 0.45);
|
|
--grampsjs-body-font-color-48: rgba(0, 0, 0, 0.48);
|
|
--grampsjs-body-font-color-50: rgba(0, 0, 0, 0.5);
|
|
--grampsjs-body-font-color-60: rgba(0, 0, 0, 0.6);
|
|
--grampsjs-body-font-color-70: rgba(0, 0, 0, 0.7);
|
|
--grampsjs-body-font-color-75: rgba(0, 0, 0, 0.75);
|
|
--grampsjs-body-font-color-78: rgba(0, 0, 0, 0.78);
|
|
--grampsjs-body-font-color-87: rgba(0, 0, 0, 0.87);
|
|
--grampsjs-body-font-color-90: rgba(0, 0, 0, 0.9);
|
|
--grampsjs-body-font-color-100: rgba(0, 0, 0, 1);
|
|
--grampsjs-color-shade-40: rgb(40, 40, 40);
|
|
--grampsjs-color-shade-120: rgb(120, 120, 120);
|
|
--grampsjs-color-shade-200: rgb(200, 200, 200);
|
|
--grampsjs-color-shade-220: rgb(220, 220, 220);
|
|
--grampsjs-color-shade-230: rgb(230, 230, 230);
|
|
--grampsjs-color-shade-240: rgb(240, 240, 240);
|
|
--grampsjs-color-shade-255: rgb(255, 255, 255);
|
|
--grampsjs-color-monospace: rgba(125, 0, 0, 0.8);
|
|
--grampsjs-color-drawer-text: #444;
|
|
--grampsjs-color-icon-default: #9e9e9e;
|
|
--grampsjs-color-icon-selected: #393939;
|
|
--grampsjs-color-skeleton-background: #eee;
|
|
--grampsjs-color-skeleton-base: #ececec;
|
|
--grampsjs-color-skeleton-shine: #f5f5f5;
|
|
--grampsjs-color-revision-deleted-background-red: #ffebe9;
|
|
--grampsjs-color-revision-added-background-green: #dafbe1;
|
|
--grampsjs-color-revision-moved-background-blue: #ddf4ff;
|
|
--grampsjs-color-revision-moved-font: #888;
|
|
--grampsjs-color-revision-error-background: #f00;
|
|
--grampsjs-color-revision-error-font: #fff;
|
|
--grampsjs-color-icon-background: rgba(0, 0, 0, 0.25);
|
|
--grampsjs-color-icon: #fff;
|
|
--grampsjs-color-ytree-expand-background: #eee;
|
|
--grampsjs-color-ytree-expand-font: #555;
|
|
--grampsjs-color-ytree-default-person-icon-background: #bbb;
|
|
--grampsjs-note-color: #333;
|
|
/* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--grampsjs-top-app-bar-background-color: var(--md-sys-color-surface-container);
|
|
--grampsjs-top-app-bar-font-color: var(--md-sys-color-on-surface);
|
|
--grampsjs-body-font-color: rgba(255, 255, 255, 0.8);
|
|
--grampsjs-body-font-color-0: rgba(255, 255, 255, 0);
|
|
--grampsjs-body-font-color-2: rgba(255, 255, 255, 0.05);
|
|
--grampsjs-body-font-color-5: rgba(255, 255, 255, 0.08);
|
|
--grampsjs-body-font-color-6: rgba(255, 255, 255, 0.1);
|
|
--grampsjs-body-font-color-10: rgba(255, 255, 255, 0.12);
|
|
--grampsjs-body-font-color-15: rgba(255, 255, 255, 0.18);
|
|
--grampsjs-body-font-color-20: rgba(255, 255, 255, 0.22);
|
|
--grampsjs-body-font-color-25: rgba(255, 255, 255, 0.27);
|
|
--grampsjs-body-font-color-30: rgba(255, 255, 255, 0.32);
|
|
--grampsjs-body-font-color-35: rgba(255, 255, 255, 0.37);
|
|
--grampsjs-body-font-color-38: rgba(255, 255, 255, 0.4);
|
|
--grampsjs-body-font-color-40: rgba(255, 255, 255, 0.42);
|
|
--grampsjs-body-font-color-45: rgba(255, 255, 255, 0.47);
|
|
--grampsjs-body-font-color-48: rgba(255, 255, 255, 0.5);
|
|
--grampsjs-body-font-color-50: rgba(255, 255, 255, 0.52);
|
|
--grampsjs-body-font-color-60: rgba(255, 255, 255, 0.6);
|
|
--grampsjs-body-font-color-70: rgba(255, 255, 255, 0.7);
|
|
--grampsjs-body-font-color-75: rgba(255, 255, 255, 0.75);
|
|
--grampsjs-body-font-color-78: rgba(255, 255, 255, 0.78);
|
|
--grampsjs-body-font-color-87: rgba(255, 255, 255, 0.87);
|
|
--grampsjs-body-font-color-90: rgba(255, 255, 255, 0.9);
|
|
--grampsjs-body-font-color-100: rgba(255, 255, 255, 1);
|
|
--grampsjs-color-shade-40: rgb(215, 215, 215);
|
|
--grampsjs-color-shade-120: rgb(135, 135, 135);
|
|
--grampsjs-color-shade-200: rgb(55, 55, 55);
|
|
--grampsjs-color-shade-220: rgb(35, 35, 35);
|
|
--grampsjs-color-shade-230: rgb(25, 25, 25);
|
|
--grampsjs-color-shade-240: rgb(15, 15, 15);
|
|
--grampsjs-color-shade-255: rgb(0, 0, 0);
|
|
--grampsjs-color-monospace: rgba(255, 100, 100, 0.85);
|
|
--grampsjs-color-drawer-text: #bbb;
|
|
--grampsjs-color-icon-default: #616161;
|
|
--grampsjs-color-icon-selected: #c6c6c6;
|
|
--grampsjs-color-skeleton-background: #222;
|
|
--grampsjs-color-skeleton-base: #232323;
|
|
--grampsjs-color-skeleton-shine: #1a1a1a;
|
|
--grampsjs-color-revision-deleted-background-red: rgba(248, 81, 73, 0.3);
|
|
--grampsjs-color-revision-added-background-green: rgba(46, 160, 67, 0.15);
|
|
--grampsjs-color-revision-moved-background-blue: rgba(56, 139, 253, 0.1);
|
|
--grampsjs-color-revision-moved-font: #777;
|
|
--grampsjs-color-revision-error-background: #f00;
|
|
--grampsjs-color-revision-error-font: #fff;
|
|
--grampsjs-color-icon-background: rgba(255, 255, 255, 0.15);
|
|
--grampsjs-color-icon: rgba(255, 255, 255, 0.6);
|
|
--grampsjs-color-ytree-expand-background: var(--md-sys-color-surface-container);
|
|
--grampsjs-color-ytree-expand-font: var(--md-sys-color-on-surface);
|
|
--grampsjs-color-ytree-default-person-icon-background: var(--md-sys-color-surface-container);
|
|
--grampsjs-note-color: #ccc;
|
|
--grampsjs-map-marker-color: #bb1f11;
|
|
/* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
|
|
--mdc-select-fill-color: var(--md-sys-color-surface-container-highest);
|
|
--mdc-select-ink-color: var(--md-sys-color-on-surface);
|
|
--mdc-select-label-ink-color: rgba(255, 255, 255, 0.5);
|
|
--mdc-select-dropdown-icon-color: var(--grampsjs-body-font-color);
|
|
--mdc-select-idle-line-color: var(--grampsjs-body-font-color);
|
|
--mdc-select-hover-line-color: var(--md-sys-color-on-surface);
|
|
--mdc-select-outlined-idle-border-color: var(--grampsjs-body-font-color);
|
|
--mdc-select-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
|
|
--mdc-select-disabled-fill-color: rgba(229, 226, 225, 0.04);
|
|
--mdc-select-disabled-ink-color: var(--grampsjs-body-font-color-40);
|
|
--mdc-select-disabled-dropdown-icon-color: var(--grampsjs-body-font-color-40);
|
|
--mdc-select-outlined-disabled-border-color: var(--grampsjs-body-font-color-30);
|
|
--mdc-text-field-idle-line-color: var(--grampsjs-body-font-color);
|
|
--mdc-text-field-hover-line-color: var(--md-sys-color-on-surface);
|
|
--mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color);
|
|
--mdc-text-field-outlined-idle-border-color: var(--grampsjs-body-font-color);
|
|
--mdc-text-field-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
|
|
--mdc-text-field-outlined-disabled-border-color: var(--grampsjs-body-font-color);
|
|
--mdc-text-field-fill-color: var(--md-sys-color-surface-container-highest);
|
|
--mdc-text-field-ink-color: var(--md-sys-color-on-surface);
|
|
--mdc-text-field-label-ink-color: var(--grampsjs-body-font-color);
|
|
--mdc-text-field-disabled-fill-color: rgba(229, 226, 225, 0.04);
|
|
--mdc-text-field-disabled-ink-color: var(--grampsjs-body-font-color-40);
|
|
--mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color-40);
|
|
--mdc-linear-progress-buffer-color: var(--md-sys-color-surface-container-highest);
|
|
--mdc-button-outline-color: var(--md-sys-color-outline);
|
|
--mdc-button-disabled-outline-color: rgba(229, 226, 225, 0.12);
|
|
--mdc-button-disabled-fill-color: rgba(229, 226, 225, 0.12);
|
|
--mdc-button-disabled-ink-color: rgba(229, 226, 225, 0.38);
|
|
--mdc-theme-text-icon-on-background: var(--grampsjs-body-font-color-60);
|
|
--mdc-checkbox-unchecked-color: var(--md-sys-color-on-surface-variant);
|
|
--mdc-checkbox-disabled-color: rgba(229, 226, 225, 0.38);
|
|
} |