196 lines
7.2 KiB
CSS
196 lines
7.2 KiB
CSS
/**
|
||
* Material Design 3 тема
|
||
* Оптимизированная версия с CSS Variables
|
||
*/
|
||
|
||
/* Material Design 3 цветовая система */
|
||
:root {
|
||
/* Primary colors */
|
||
--md-sys-color-primary: #7444FD;
|
||
--md-sys-color-on-primary: #FFFFFF;
|
||
--md-sys-color-primary-container: #FAF8FF;
|
||
--md-sys-color-on-primary-container: #282C32;
|
||
|
||
/* Secondary colors */
|
||
--md-sys-color-secondary: #7444FD;
|
||
--md-sys-color-on-secondary: #FFFFFF;
|
||
--md-sys-color-secondary-container: #F9F3EF;
|
||
--md-sys-color-on-secondary-container: #282C32;
|
||
|
||
/* Surface colors */
|
||
--md-sys-color-surface: #FFFFFF;
|
||
--md-sys-color-on-surface: #282C32;
|
||
--md-sys-color-surface-variant: #F6F7FF;
|
||
--md-sys-color-on-surface-variant: #858585;
|
||
--md-sys-color-surface-container: #FFFFFF;
|
||
--md-sys-color-surface-container-high: #F6F7FF;
|
||
--md-sys-color-surface-container-highest: #E6E6E6;
|
||
|
||
/* Background colors */
|
||
--md-sys-color-background: #F6F7FF;
|
||
--md-sys-color-on-background: #282C32;
|
||
|
||
/* Error colors */
|
||
--md-sys-color-error: #BA1A1A;
|
||
--md-sys-color-on-error: #FFFFFF;
|
||
--md-sys-color-error-container: #FFDAD6;
|
||
--md-sys-color-on-error-container: #410002;
|
||
|
||
/* Outline colors */
|
||
--md-sys-color-outline: #E6E6E6;
|
||
--md-sys-color-outline-variant: #F1F1F1;
|
||
|
||
/* Shadow colors */
|
||
--md-sys-color-shadow: rgba(0, 0, 0, 0.2);
|
||
--md-sys-color-scrim: rgba(0, 0, 0, 0.3);
|
||
|
||
/* Elevation */
|
||
--md-sys-elevation-level0: none;
|
||
--md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||
--md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
||
--md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||
--md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||
--md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||
|
||
/* Typography */
|
||
--md-sys-typescale-body-large-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-body-large-size: 16px;
|
||
--md-sys-typescale-body-large-weight: 400;
|
||
--md-sys-typescale-body-large-line-height: 24px;
|
||
|
||
--md-sys-typescale-body-medium-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-body-medium-size: 14px;
|
||
--md-sys-typescale-body-medium-weight: 400;
|
||
--md-sys-typescale-body-medium-line-height: 20px;
|
||
|
||
--md-sys-typescale-body-small-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-body-small-size: 12px;
|
||
--md-sys-typescale-body-small-weight: 400;
|
||
--md-sys-typescale-body-small-line-height: 16px;
|
||
|
||
--md-sys-typescale-headline-large-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-headline-large-size: 32px;
|
||
--md-sys-typescale-headline-large-weight: 400;
|
||
--md-sys-typescale-headline-large-line-height: 40px;
|
||
|
||
--md-sys-typescale-headline-medium-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-headline-medium-size: 28px;
|
||
--md-sys-typescale-headline-medium-weight: 400;
|
||
--md-sys-typescale-headline-medium-line-height: 36px;
|
||
|
||
--md-sys-typescale-headline-small-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-headline-small-size: 24px;
|
||
--md-sys-typescale-headline-small-weight: 400;
|
||
--md-sys-typescale-headline-small-line-height: 32px;
|
||
|
||
--md-sys-typescale-title-large-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-title-large-size: 22px;
|
||
--md-sys-typescale-title-large-weight: 400;
|
||
--md-sys-typescale-title-large-line-height: 28px;
|
||
|
||
--md-sys-typescale-title-medium-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-title-medium-size: 16px;
|
||
--md-sys-typescale-title-medium-weight: 500;
|
||
--md-sys-typescale-title-medium-line-height: 24px;
|
||
|
||
--md-sys-typescale-title-small-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-title-small-size: 14px;
|
||
--md-sys-typescale-title-small-weight: 500;
|
||
--md-sys-typescale-title-small-line-height: 20px;
|
||
|
||
--md-sys-typescale-label-large-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-label-large-size: 14px;
|
||
--md-sys-typescale-label-large-weight: 500;
|
||
--md-sys-typescale-label-large-line-height: 20px;
|
||
|
||
--md-sys-typescale-label-medium-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-label-medium-size: 12px;
|
||
--md-sys-typescale-label-medium-weight: 500;
|
||
--md-sys-typescale-label-medium-line-height: 16px;
|
||
|
||
--md-sys-typescale-label-small-font: 'Roboto', sans-serif;
|
||
--md-sys-typescale-label-small-size: 11px;
|
||
--md-sys-typescale-label-small-weight: 500;
|
||
--md-sys-typescale-label-small-line-height: 16px;
|
||
}
|
||
|
||
/* Темная тема */
|
||
[data-theme="dark"] {
|
||
--md-sys-color-primary: #9D6AFF;
|
||
--md-sys-color-on-primary: #000000;
|
||
--md-sys-color-primary-container: #4A148C;
|
||
--md-sys-color-on-primary-container: #E1BEE7;
|
||
|
||
--md-sys-color-secondary: #9D6AFF;
|
||
--md-sys-color-on-secondary: #000000;
|
||
--md-sys-color-secondary-container: #4A148C;
|
||
--md-sys-color-on-secondary-container: #E1BEE7;
|
||
|
||
--md-sys-color-surface: #161921;
|
||
--md-sys-color-on-surface: #FFFFFF;
|
||
--md-sys-color-surface-variant: #282C32;
|
||
--md-sys-color-on-surface-variant: #cbcbcb;
|
||
--md-sys-color-surface-container: #282C32;
|
||
--md-sys-color-surface-container-high: #363A42;
|
||
--md-sys-color-surface-container-highest: #454A54;
|
||
|
||
--md-sys-color-background: #161921;
|
||
--md-sys-color-on-background: #FFFFFF;
|
||
|
||
--md-sys-color-error: #FFB4AB;
|
||
--md-sys-color-on-error: #690005;
|
||
--md-sys-color-error-container: #93000A;
|
||
--md-sys-color-on-error-container: #FFDAD6;
|
||
|
||
--md-sys-color-outline: #565656;
|
||
--md-sys-color-outline-variant: #282C32;
|
||
|
||
--md-sys-color-shadow: rgba(0, 0, 0, 0.4);
|
||
--md-sys-color-scrim: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Применение темы к Material компонентам */
|
||
md-filled-button,
|
||
md-outlined-button,
|
||
md-text-button,
|
||
md-elevated-button,
|
||
md-tonal-button {
|
||
--md-sys-color-primary: var(--md-sys-color-primary);
|
||
--md-sys-color-on-primary: var(--md-sys-color-on-primary);
|
||
}
|
||
|
||
md-filled-text-field,
|
||
md-outlined-text-field {
|
||
--md-sys-color-primary: var(--md-sys-color-primary);
|
||
--md-sys-color-on-surface: var(--md-sys-color-on-surface);
|
||
--md-sys-color-outline: var(--md-sys-color-outline);
|
||
}
|
||
|
||
md-filled-card,
|
||
md-elevated-card,
|
||
md-outlined-card {
|
||
--md-sys-color-surface: var(--md-sys-color-surface);
|
||
--md-sys-color-on-surface: var(--md-sys-color-on-surface);
|
||
}
|
||
|
||
/* Стили для чипов (md-assist-chip) */
|
||
md-assist-chip {
|
||
--md-sys-color-primary: var(--md-sys-color-primary);
|
||
--md-sys-color-on-primary: var(--md-sys-color-on-primary);
|
||
--md-sys-color-surface: var(--md-sys-color-surface);
|
||
--md-sys-color-on-surface: var(--md-sys-color-on-surface);
|
||
}
|
||
|
||
/* Выбранный чип должен иметь primary цвет */
|
||
md-assist-chip[selected] {
|
||
--md-assist-chip-container-color: var(--md-sys-color-primary);
|
||
--md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
|
||
background-color: var(--md-sys-color-primary) !important;
|
||
color: var(--md-sys-color-on-primary) !important;
|
||
}
|
||
|
||
/* Убираем атрибут selected при клике, если чип уже выбран */
|
||
md-assist-chip:not([selected]):hover {
|
||
cursor: pointer;
|
||
}
|