/** * Пресеты интерфейса: strict | balanced | friendly | soft | focus * Класс на : ui-preset-* */ html.ui-preset-strict { --radius: 0.4rem; --shadow-sm: none; --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.08); --space-page-y: 0.5rem; --space-section: 0.6rem; --space-card: 0.65rem; --space-panel: 0.7rem; } html.ui-preset-strict .card { border-width: 1px; box-shadow: none; } html.ui-preset-strict .btn { border-radius: 0.35rem; font-weight: 600; } html.ui-preset-balanced { /* базовые токены из :root */ } html.ui-preset-friendly { --radius: 1rem; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.07); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1); --space-page-y: 0.5rem; --space-card: 0.85rem; --space-panel: 1rem; } html.ui-preset-friendly .card { border-radius: var(--radius); } html.ui-preset-friendly .nav-item { border-radius: 0.65rem; } html.ui-preset-soft { --radius: 0.85rem; } html.ui-preset-focus { --layout-sidebar-width: 172px; --space-page-y: 0.5rem; --space-section: 0.6rem; --space-card: 0.65rem; } html.ui-preset-focus .top-header-row--page { min-height: 2.5rem; } html.ui-preset-focus .page-header--merged { display: none; } /* Сетка пресетов в меню оформления */ .preset-picker { display: grid; grid-template-columns: 1fr; gap: 0.4rem; } .preset-option { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0.65rem; border: 2px solid hsl(var(--border)); border-radius: 0.65rem; background: hsl(var(--muted) / 0.2); cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, background 0.15s; } .preset-option:hover { border-color: hsl(var(--primary) / 0.35); } .preset-option.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); } .preset-option-icon { width: 2rem; height: 2rem; border-radius: 0.45rem; flex-shrink: 0; border: 1px solid hsl(var(--border)); } .preset-option-icon--strict { background: linear-gradient(135deg, #f1f5f9 50%, #e2e8f0 50%); } .preset-option-icon--balanced { background: linear-gradient(135deg, #fff7ed 40%, #f8fafc 40%, #1e293b 70%); } .preset-option-icon--friendly { background: linear-gradient(135deg, #ffedd5, #fed7aa); border-radius: 0.75rem; } .preset-option-icon--soft { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); } .preset-option-icon--focus { background: repeating-linear-gradient( 90deg, #e2e8f0, #e2e8f0 4px, #f8fafc 4px, #f8fafc 8px ); } .preset-option-text strong { display: block; font-size: 0.8125rem; color: var(--text-primary); } .preset-option-text small { display: block; font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.1rem; line-height: 1.35; } .appearance-section--advanced summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); padding: 0.35rem 0; list-style: none; } .appearance-section--advanced summary::-webkit-details-marker { display: none; } .appearance-section--advanced[open] summary { margin-bottom: 0.5rem; color: var(--text-primary); }