Files
gramps-web/global.css
David Straub a25af9a51b Note style tweaks (#1075)
* Tweak note display style

* CSS

* Remove unused var
2026-04-12 21:41:18 +02:00

331 lines
17 KiB
CSS

html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: var(--md-sys-color-background);
}
: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 defined in the light/dark blocks below, so the
color picker automatically adapts to the active theme. */
--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: #0277bd;
--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: rgba(109, 76, 65, 0.15);
--grampsjs-alert-border-color: rgba(109, 76, 65, 0.7);
--grampsjs-alert-error-background-color: rgba(191, 54, 12, 0.2);
--grampsjs-alert-error-border-color: rgba(191, 54, 12, 0.7);
--grampsjs-alert-error-font-color: #bf360c;
--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: rgba(2, 119, 189, 0.2);
--grampsjs-delete-all-filter-chip-color: rgba(109, 76, 65, 0.32);
--grampsjs-connection-chart-border-color: rgba(137, 107, 94, 0.4);
--grampsjs-connection-chart-person-box: #e6e6e6;
--grampsjs-editable-list-hover-background-color: rgba(2, 119, 189, 0.1);
--grampsjs-editable-list-active-background-color: rgba(2, 119, 189, 0.2);
--grampsjs-editable-list-selected-active-background-color: rgba(2, 119, 189, 0.3);
--grampsjs-editable-list-selected-hover-background-color: rgba(2, 119, 189, 0.4);
--grampsjs-editable-list-selected-background-color: rgba(2, 119, 189, 0.5);
--grampsjs-mobile-table-sort-menu-color: rgba(109, 76, 65, 0.3);
}
: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-link-font: #0d47a1;
--grampsjs-color-link-hover: #1976d2;
--grampsjs-color-page-loading-progress: #4fc3f7;
--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-primary: rgb(109, 76, 65);
--md-sys-color-surface-tint: rgb(109, 76, 65);
--md-sys-color-on-primary: rgb(255, 255, 255);
--md-sys-color-primary-container: rgb(255, 219, 207);
--md-sys-color-on-primary-container: rgb(57, 12, 0);
--md-sys-color-secondary: rgb(49, 98, 141);
--md-sys-color-on-secondary: rgb(255, 255, 255);
--md-sys-color-secondary-container: rgb(207, 229, 255);
--md-sys-color-on-secondary-container: rgb(0, 29, 52);
--md-sys-color-tertiary: rgb(106, 94, 47);
--md-sys-color-on-tertiary: rgb(255, 255, 255);
--md-sys-color-tertiary-container: rgb(243, 226, 167);
--md-sys-color-on-tertiary-container: rgb(34, 27, 0);
--md-sys-color-error: rgb(186, 26, 26);
--md-sys-color-on-error: rgb(255, 255, 255);
--md-sys-color-error-container: rgb(255, 218, 214);
--md-sys-color-on-error-container: rgb(65, 0, 2);
--md-sys-color-background: #fff;;
--md-sys-color-on-background: var(--grampsjs-body-font-color);
--md-sys-color-surface: #fff;
--md-sys-color-on-surface: var(--grampsjs-body-font-color);
--md-sys-color-surface-variant: rgb(232, 224, 222);
--md-sys-color-on-surface-variant: rgb(83, 67, 63);
--md-sys-color-outline: rgb(133, 115, 110);
--md-sys-color-outline-variant: rgb(200, 200, 200);
--md-sys-color-shadow: rgb(0, 0, 0);
--md-sys-color-scrim: rgb(0, 0, 0);
--md-sys-color-inverse-surface: rgb(57, 46, 43);
--md-sys-color-inverse-on-surface: rgb(255, 237, 232);
--md-sys-color-inverse-primary: rgb(255, 181, 156);
--md-sys-color-primary-fixed: rgb(255, 219, 207);
--md-sys-color-on-primary-fixed: rgb(57, 12, 0);
--md-sys-color-primary-fixed-dim: rgb(255, 181, 156);
--md-sys-color-on-primary-fixed-variant: rgb(114, 53, 32);
--md-sys-color-secondary-fixed: rgb(207, 229, 255);
--md-sys-color-on-secondary-fixed: rgb(0, 29, 52);
--md-sys-color-secondary-fixed-dim: rgb(157, 203, 251);
--md-sys-color-on-secondary-fixed-variant: rgb(18, 74, 115);
--md-sys-color-tertiary-fixed: rgb(243, 226, 167);
--md-sys-color-on-tertiary-fixed: rgb(34, 27, 0);
--md-sys-color-tertiary-fixed-dim: rgb(214, 198, 141);
--md-sys-color-on-tertiary-fixed-variant: rgb(81, 70, 26);
--md-sys-color-surface-dim: rgb(232, 214, 209);
--md-sys-color-surface-bright: rgb(255, 248, 246);
--md-sys-color-surface-container-lowest: rgb(245, 245, 245);
--md-sys-color-surface-container-low: rgb(240, 240, 240);
--md-sys-color-surface-container: #fff;
--md-sys-color-surface-container-high: #fff;
--md-sys-color-surface-container-highest: whitesmoke;
}
: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-link-font: #5193f6;
--grampsjs-color-link-hover: #62adf8;
--grampsjs-color-page-loading-progress: #42a6d2;
--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-primary: #8d7168;
--md-sys-color-surface-tint: rgb(233, 189, 174);
--md-sys-color-on-primary: rgba(0, 0, 0, 0.8);
--md-sys-color-primary-container: rgb(109, 76, 65);
--md-sys-color-on-primary-container: rgb(235, 190, 176);
--md-sys-color-secondary: rgb(156, 203, 251);
--md-sys-color-on-secondary: rgb(0, 51, 84);
--md-sys-color-secondary-container: rgb(49, 98, 141);
--md-sys-color-on-secondary-container: rgb(189, 220, 255);
--md-sys-color-tertiary: rgb(214, 198, 141);
--md-sys-color-on-tertiary: rgb(57, 48, 5);
--md-sys-color-tertiary-container: rgb(106, 94, 47);
--md-sys-color-on-tertiary-container: rgb(233, 216, 158);
--md-sys-color-error: rgb(255, 180, 171);
--md-sys-color-on-error: rgb(105, 0, 4);
--md-sys-color-error-container: rgb(186, 26, 26);
--md-sys-color-on-error-container: rgb(255, 205, 199);
--md-sys-color-background: rgb(22, 19, 18);
--md-sys-color-on-background: rgb(233, 225, 222);
--md-sys-color-surface: rgb(20, 19, 19);
--md-sys-color-on-surface: rgb(229, 226, 225);
--md-sys-color-surface-variant: rgb(68, 71, 72);
--md-sys-color-on-surface-variant: rgb(196, 199, 200);
--md-sys-color-outline: rgb(142, 145, 146);
--md-sys-color-outline-variant: rgb(68, 71, 72);
--md-sys-color-shadow: rgb(0, 0, 0);
--md-sys-color-scrim: rgb(0, 0, 0);
--md-sys-color-inverse-surface: rgb(229, 226, 225);
--md-sys-color-inverse-on-surface: rgb(49, 48, 48);
--md-sys-color-inverse-primary: rgb(121, 86, 75);
--md-sys-color-primary-fixed: rgb(255, 219, 207);
--md-sys-color-on-primary-fixed: rgb(45, 21, 13);
--md-sys-color-primary-fixed-dim: rgb(233, 189, 174);
--md-sys-color-on-primary-fixed-variant: rgb(94, 63, 53);
--md-sys-color-secondary-fixed: rgb(207, 229, 255);
--md-sys-color-on-secondary-fixed: rgb(0, 29, 51);
--md-sys-color-secondary-fixed-dim: rgb(156, 203, 251);
--md-sys-color-on-secondary-fixed-variant: rgb(17, 74, 115);
--md-sys-color-tertiary-fixed: rgb(243, 226, 167);
--md-sys-color-on-tertiary-fixed: rgb(34, 27, 0);
--md-sys-color-tertiary-fixed-dim: rgb(214, 198, 141);
--md-sys-color-on-tertiary-fixed-variant: rgb(81, 70, 26);
--md-sys-color-surface-dim: rgb(20, 19, 19);
--md-sys-color-surface-bright: rgb(58, 57, 57);
--md-sys-color-surface-container-lowest: rgb(14, 14, 14);
--md-sys-color-surface-container-low: rgb(28, 27, 27);
--md-sys-color-surface-container: rgb(32, 31, 31);
--md-sys-color-surface-container-high: rgb(42, 42, 42);
--md-sys-color-surface-container-highest: rgb(53, 52, 52);
--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);
}