/* =========================================================================== lumo.css — a Vaadin 14 Lumo téma design tokenjei, CSS változókként. A Java projekt minden stílusa ezekre a változókra hivatkozik (ui/util/LumoStyles.java, TextColor.java, FontSize.java, IconSize.java), ezért ezek nélkül a megjelenés nem reprodukálható. =========================================================================== */ :root { /* --- Alap színpaletta --- */ --lumo-base-color: #fff; /* Kontraszt (semleges szürkék) */ --lumo-contrast-5pct: hsla(214, 61%, 25%, 0.05); --lumo-contrast-10pct: hsla(214, 57%, 24%, 0.1); --lumo-contrast-20pct: hsla(214, 53%, 23%, 0.16); --lumo-contrast-30pct: hsla(214, 50%, 22%, 0.26); --lumo-contrast-40pct: hsla(214, 47%, 21%, 0.38); --lumo-contrast-50pct: hsla(214, 45%, 20%, 0.52); --lumo-contrast-60pct: hsla(214, 43%, 19%, 0.6); --lumo-contrast-70pct: hsla(214, 42%, 18%, 0.69); --lumo-contrast-80pct: hsla(214, 41%, 17%, 0.83); --lumo-contrast-90pct: hsla(214, 40%, 16%, 0.94); --lumo-contrast: hsl(214, 35%, 15%); /* Elsődleges */ --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1); --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5); --lumo-primary-color: hsl(214, 90%, 52%); --lumo-primary-text-color: hsl(214, 90%, 42%); --lumo-primary-contrast-color: #fff; /* Hiba */ --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1); --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5); --lumo-error-color: hsl(3, 85%, 48%); --lumo-error-text-color: hsl(3, 89%, 42%); --lumo-error-contrast-color: #fff; /* Siker */ --lumo-success-color-10pct: hsla(145, 72%, 30%, 0.1); --lumo-success-color-50pct: hsla(145, 72%, 30%, 0.5); --lumo-success-color: hsl(145, 80%, 33%); --lumo-success-text-color: hsl(145, 100%, 26%); --lumo-success-contrast-color: #fff; /* Szövegszínek */ --lumo-header-text-color: var(--lumo-contrast); --lumo-body-text-color: var(--lumo-contrast-90pct); --lumo-secondary-text-color: var(--lumo-contrast-70pct); --lumo-tertiary-text-color: var(--lumo-contrast-50pct); --lumo-disabled-text-color: var(--lumo-contrast-30pct); /* --- Méretek --- */ --lumo-size-xs: 1.625rem; --lumo-size-s: 1.875rem; --lumo-size-m: 2.25rem; --lumo-size-l: 2.75rem; --lumo-size-xl: 3.5rem; /* --- Ikonméretek (ui/util/IconSize.java) --- */ --lumo-icon-size-s: 1.25em; --lumo-icon-size-m: 1.5em; --lumo-icon-size-l: 2.25em; /* --- Térközök (ui/util/LumoStyles.Spacing) --- */ --lumo-space-xs: 0.25rem; --lumo-space-s: 0.5rem; --lumo-space-m: 1rem; --lumo-space-l: 1.5rem; --lumo-space-xl: 2.5rem; --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs); --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s); --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m); --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l); --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl); /* --- Tipográfia (ui/util/FontSize.java, FontWeight.java, LineHeight.java) --- */ --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --lumo-font-size-xxs: 0.75rem; --lumo-font-size-xs: 0.8125rem; --lumo-font-size-s: 0.875rem; --lumo-font-size-m: 1rem; --lumo-font-size-l: 1.125rem; --lumo-font-size-xl: 1.375rem; --lumo-font-size-xxl: 1.75rem; --lumo-font-size-xxxl: 2.5rem; --lumo-line-height-xs: 1.25; --lumo-line-height-s: 1.375; --lumo-line-height-m: 1.625; /* --- Lekerekítés (ui/util/css/BorderRadius.java) --- */ --lumo-border-radius-s: 0.25em; --lumo-border-radius-m: 0.25em; --lumo-border-radius-l: 0.5em; --lumo-border-radius: 0.25em; /* --- Árnyékok (ui/util/css/Shadow.java) --- */ --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct); --lumo-box-shadow-s: 0 1px 2px 0 var(--lumo-shade-20pct), 0 2px 8px -2px var(--lumo-shade-40pct); --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct); --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct); --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct); --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05); --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1); --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16); --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26); --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38); --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52); --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6); --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69); --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83); --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94); --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3); --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37); --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7); --lumo-tint: #fff; } /* --- Sötét variáns (az AppBar fejléce Lumo.DARK témát használ a Java kódban) --- */ [theme~="dark"] { --lumo-base-color: hsl(214, 35%, 21%); --lumo-contrast-5pct: hsla(214, 65%, 85%, 0.06); --lumo-contrast-10pct: hsla(214, 60%, 80%, 0.14); --lumo-contrast-20pct: hsla(214, 64%, 82%, 0.23); --lumo-contrast-30pct: hsla(214, 69%, 84%, 0.32); --lumo-contrast-50pct: hsla(214, 78%, 88%, 0.5); --lumo-contrast-60pct: hsla(214, 82%, 90%, 0.6); --lumo-contrast: hsl(214, 100%, 98%); --lumo-header-text-color: hsl(214, 100%, 98%); --lumo-body-text-color: hsla(214, 96%, 96%, 0.9); --lumo-secondary-text-color: hsla(214, 87%, 92%, 0.7); --lumo-tertiary-text-color: hsla(214, 78%, 88%, 0.5); --lumo-primary-text-color: hsl(214, 90%, 77%); color: var(--lumo-body-text-color); background-color: var(--lumo-base-color); } /* --- A projekt saját színei: ui/util/TextColor.java 1:1 --- */ :root { --color-okkersarga: #FDBA15; --color-vilagoskek: #4BAAF8; --color-halvanykek: #4BAAF830; --color-vilagoszold: #73C477; --color-halvanyzold: #73C47730; --color-bibor: #8A61C9; --color-halvanybibor: #8A61C930; --color-szurke: #738D9A; --color-pink: #F04D84; --color-turkiz: #2BCADF; --color-narancssarga: #FFA500; --color-paradicsom: #FF6347; --color-halvanypiros: #FF000050; }