/* Aparência do Kitso: temas "standard" e "standard-dark" do Radzen, com as cores, a fonte e os cantos do Windows 11. O modo vem do atributo data-tema do ("claro" ou "escuro"), gravado pelo servidor a partir do cookie kitso.tema e trocado na hora pelo botão do cabeçalho (wwwroot/js/tema.js). Os seletores html[data-tema] têm especificidade maior que o :root do Radzen, então valem qualquer que seja a ordem dos arquivos. */ /* ---------- Comum aos dois modos */ :root { --kitso-fonte: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --kitso-fonte-titulo: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; --kitso-raio: 8px; --kitso-raio-pequeno: 4px; --kitso-transicao: 150ms cubic-bezier(0.33, 0, 0.67, 1); } html[data-tema] { --rz-text-font-family: var(--kitso-fonte); --rz-root-font-size: 15px; --rz-border-radius: var(--kitso-raio-pequeno); --rz-card-border-radius: var(--kitso-raio); --rz-card-padding: 1.25rem; --rz-layout-body-padding: 1.5rem; --rz-sidebar-width: 260px; --rz-header-min-height: 3.25rem; /* Títulos: mesma família e peso em todas as telas. */ --rz-text-h4-font-size: 1.75rem; --rz-text-h4-line-height: 1.25; --rz-text-h4-letter-spacing: -0.01em; --rz-text-h5-font-size: 1.375rem; --rz-text-h5-line-height: 1.3; --rz-text-h5-letter-spacing: -0.01em; --rz-text-h6-font-size: 1.125rem; --rz-text-h6-line-height: 1.35; --rz-text-h6-letter-spacing: 0; /* Menu lateral no estilo do Windows 11: itens arredondados, sem bordas, com o indicador do item ativo. */ --rz-panel-menu-item-border: none; --rz-panel-menu-item-border-radius: var(--kitso-raio-pequeno); --rz-panel-menu-item-2nd-level-border-radius: var(--kitso-raio-pequeno); --rz-panel-menu-item-margin-block: 2px; --rz-panel-menu-item-margin-inline: 0.375rem; --rz-panel-menu-item-2nd-level-margin-block: 2px; --rz-panel-menu-item-2nd-level-margin-inline: 0.375rem; --rz-panel-menu-item-padding-block: 0.625rem; --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; --rz-panel-menu-font-weight: 400; --rz-panel-menu-item-active-color: inherit; --rz-panel-menu-item-active-indicator: var(--rz-primary); } /* ---------- Modo claro (Mica claro do Windows 11) */ html[data-tema="claro"] { color-scheme: light; --rz-primary: #0067c0; --rz-primary-light: #1975c5; --rz-primary-lighter: rgba(0, 103, 192, 0.12); --rz-primary-dark: #005a9e; --rz-primary-darker: #004c87; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #0067c0; --rz-on-primary-dark: #ffffff; --rz-on-primary-darker: #ffffff; --kitso-fundo: #f3f3f3; --kitso-superficie: #ffffff; --kitso-borda: rgba(0, 0, 0, 0.0578); --kitso-texto: #1a1a1a; --kitso-texto-secundario: #5d5d5d; --kitso-realce: rgba(0, 0, 0, 0.0373); --kitso-realce-forte: rgba(0, 0, 0, 0.0578); --kitso-sombra: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.08); --rz-body-background-color: var(--kitso-fundo); --rz-base-background-color: var(--kitso-superficie); --rz-text-title-color: var(--kitso-texto); --rz-text-color: var(--kitso-texto); --rz-text-secondary-color: var(--kitso-texto-secundario); } /* ---------- Modo escuro (Mica escuro do Windows 11) */ html[data-tema="escuro"] { color-scheme: dark; --rz-primary: #4cc2ff; --rz-primary-light: #6ccbff; --rz-primary-lighter: rgba(76, 194, 255, 0.16); --rz-primary-dark: #3aa8e0; --rz-primary-darker: #2f8fc2; --rz-on-primary: #000000; --rz-on-primary-light: #000000; --rz-on-primary-lighter: #4cc2ff; --rz-on-primary-dark: #000000; --rz-on-primary-darker: #000000; --kitso-fundo: #202020; --kitso-superficie: #2b2b2b; --kitso-borda: rgba(255, 255, 255, 0.0698); --kitso-texto: #ffffff; --kitso-texto-secundario: #c5c5c5; --kitso-realce: rgba(255, 255, 255, 0.0605); --kitso-realce-forte: rgba(255, 255, 255, 0.0837); --kitso-sombra: 0 2px 4px rgba(0, 0, 0, 0.26), 0 0 1px rgba(0, 0, 0, 0.4); --rz-body-background-color: var(--kitso-fundo); --rz-base-background-color: var(--kitso-superficie); --rz-text-title-color: var(--kitso-texto); --rz-text-color: var(--kitso-texto); --rz-text-secondary-color: var(--kitso-texto-secundario); } /* ---------- Estrutura: cabeçalho, menu e cartões usam as mesmas superfícies nos dois modos */ html[data-tema] { --rz-header-background-color: var(--kitso-fundo); --rz-header-color: var(--kitso-texto); --rz-header-border: none; --rz-header-shadow: none; --rz-sidebar-background-color: var(--kitso-fundo); --rz-sidebar-color: var(--kitso-texto); --rz-sidebar-border-inline-end: none; --rz-sidebar-toggle-background-color: transparent; --rz-sidebar-toggle-hover-background-color: var(--kitso-realce); --rz-sidebar-toggle-hover-border-radius: var(--kitso-raio-pequeno); --rz-sidebar-toggle-border: none; --rz-sidebar-toggle-color: var(--kitso-texto); --rz-sidebar-toggle-hover-color: var(--kitso-texto); --rz-panel-menu-item-color: var(--kitso-texto); --rz-panel-menu-icon-color: var(--kitso-texto); --rz-panel-menu-item-background-color: transparent; --rz-panel-menu-item-hover-background-color: var(--kitso-realce); --rz-panel-menu-item-active-background-color: var(--kitso-realce-forte); --rz-panel-menu-item-2nd-level-background-color: transparent; --rz-panel-menu-item-2nd-level-hover-background-color: var(--kitso-realce); --rz-panel-menu-item-2nd-level-active-background-color: var(--kitso-realce-forte); --rz-panel-menu-item-3rd-level-background-color: transparent; --rz-panel-menu-item-3rd-level-hover-background-color: var(--kitso-realce); --rz-panel-menu-item-3rd-level-active-background-color: var(--kitso-realce-forte); --rz-card-background-color: var(--kitso-superficie); --rz-card-border: 1px solid var(--kitso-borda); --rz-card-shadow: var(--kitso-sombra); } body { font-family: var(--kitso-fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--rz-body-background-color); color: var(--rz-text-color); } /* Fundo do conteúdo igual ao do cabeçalho e do menu (Mica); os cartões se destacam por cima. */ .rz-body { background-color: var(--kitso-fundo); } .rz-button { font-weight: 500; letter-spacing: 0; text-transform: none; } .rz-sidebar .rz-navigation-item-link, .rz-sidebar .rz-navigation-item-wrapper { border-radius: var(--kitso-raio-pequeno); } /* Troca de modo suave (sem transição nas animações próprias dos componentes). */ body, .rz-header, .rz-sidebar, .rz-body, .rz-card, .rz-datatable, .rz-data-grid { transition: background-color var(--kitso-transicao), color var(--kitso-transicao), border-color var(--kitso-transicao); } /* ---------- Títulos das páginas (componente TituloPagina) */ .kitso-titulo-pagina { margin-block-end: 1.25rem; } .rz-text-h4.kitso-titulo, .kitso-titulo { font-family: var(--kitso-fonte-titulo); font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--rz-text-title-color); margin: 0; } .kitso-subtitulo { color: var(--rz-text-secondary-color); margin: 0; } /* Títulos de seção dentro das páginas (H2 com TextStyle H6/Subtitle1) usam a fonte de títulos. */ h2.rz-text-h6, h2.rz-text-subtitle1, h3.rz-text-h6, h3.rz-text-subtitle1 { font-family: var(--kitso-fonte-titulo); } .kitso-marca { font-family: var(--kitso-fonte-titulo); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } /* ---------- Diversos */ h1:focus { outline: none; } .blazor-error-boundary { background: var(--rz-danger); padding: 1rem; color: var(--rz-on-danger); } .blazor-error-boundary::after { content: "Ocorreu um erro."; } /* Impressão: sempre claro, sem fundo. */ @media print { html[data-tema] { color-scheme: light; } body, .rz-body { background: #ffffff !important; color: #000000 !important; } }