/* skin-creme.css — a mesma identidade da Central de B.O. e da Pataquada: creme, menu lateral preto e solto, pastéis, tudo em pílula. Só troca tokens e acabamento; nenhuma tela muda de lugar. Liga com (padrão; o botão no rodapé do menu alterna com o escuro original e guarda em localStorage 'mathoso_skin'). Arquivo separado do base.css de propósito. */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap'); :root[data-skin="creme"] { color-scheme: light; --fundo: #FBF3E4; --lateral: #151515; --card: #F1E9DA; --card-2: #E9DFCC; --campo: #FBF3E4; --borda: #E1D6C1; --borda-2: #D5C8AE; --linha: #E1D6C1; --texto: #151515; --texto-2: #151515; --muted: #7b7364; --muted-2: #9a917f; --verde: #4c6b1f; --verde-txt: #3f6b1d; --verde-bg: #DDE5C4; --verde-escuro: #FBF3E4; --ambar: #b97a10; --ambar-txt: #8a5a00; --ambar-bg: #F9E7A6; --vermelho: #b3261e; --cinza-dot: #b9ae98; --raio: 24px; --raio-2: 16px; --raio-3: 12px; --sans: 'Figtree', 'Instrument Sans', system-ui, -apple-system, sans-serif; --rosa: #F5B8DB; --azul: #B6CAEB; --amarelo: #F5D867; --preto: #151515; } :root[data-skin="creme"] .wrap a:hover { color: #151515; } /* só no conteúdo: dentro do menu preto o hover tem que continuar claro */ /* menu lateral = bloco preto solto e arredondado; dentro dele os tokens mudam e o conteúdo acompanha */ :root[data-skin="creme"] .side { --card: #242424; --card-2: #2c2c2c; --texto: #FBF3E4; --texto-2: #FBF3E4; --muted: #a59c8b; --linha: #2c2c2c; --borda: #2c2c2c; --verde-txt: #F5B8DB; --verde-bg: transparent; background: #151515; color: #FBF3E4; border-right: none; } @media (min-width: 901px) { :root[data-skin="creme"] .side { margin: 14px 0 14px 14px; height: calc(100vh - 28px); top: 14px; border-radius: 28px; padding: 24px 14px 14px; } :root[data-skin="creme"] .item.on { box-shadow: inset 2px 0 0 #F5B8DB; border-radius: 0 14px 14px 0; } } @media (max-width: 900px) { :root[data-skin="creme"] .side { margin: 8px 8px 0; width: auto; border-radius: 24px; top: 8px; } } :root[data-skin="creme"] .item { border-radius: 14px; } :root[data-skin="creme"] .side .item:hover, :root[data-skin="creme"] .side a:hover { color: #FBF3E4; } :root[data-skin="creme"] .side .item:hover { background: #2a2a2a; } :root[data-skin="creme"] .side .item.on:hover { color: #F5B8DB; } :root[data-skin="creme"] .brand { color: #FBF3E4; } :root[data-skin="creme"] .troca a.on { background: #F5B8DB; color: #151515; } :root[data-skin="creme"] .side-foot { border-radius: 18px; } :root[data-skin="creme"] .avatar { background: #F5B8DB; color: #151515; } /* superfícies e controles */ :root[data-skin="creme"] .card { border: none; } :root[data-skin="creme"] .btn-primary { background: #151515; color: #FBF3E4; } :root[data-skin="creme"] .btn-primary:hover { background: #2a2a2a; color: #FBF3E4; } :root[data-skin="creme"] .btn-ghost { border-color: transparent; background: var(--card-2); } :root[data-skin="creme"] .btn-ghost:hover { background: #ded3bd; } :root[data-skin="creme"] .btn-perigo { color: #b3261e; border-color: transparent; background: #F8D2CA; } :root[data-skin="creme"] .btn-perigo:hover { background: #f3c0b5; color: #7a1f12; } :root[data-skin="creme"] .chip-muted { background: var(--card-2); color: var(--muted); } :root[data-skin="creme"] .word { background: var(--campo); } /* no base.css o fundo é cravado em #232323 */ :root[data-skin="creme"] .btn, :root[data-skin="creme"] .btn-sm, :root[data-skin="creme"] .chip { border-radius: 999px; } :root[data-skin="creme"] .input, :root[data-skin="creme"] input[type=text], :root[data-skin="creme"] input[type=email], :root[data-skin="creme"] input[type=password], :root[data-skin="creme"] input[type=date], :root[data-skin="creme"] input[type=time], :root[data-skin="creme"] input[type=number], :root[data-skin="creme"] input[type=url], :root[data-skin="creme"] input[type=search], :root[data-skin="creme"] select { border-radius: 999px; padding-left: 16px; } :root[data-skin="creme"] textarea, :root[data-skin="creme"] textarea.input { border-radius: 18px; } :root[data-skin="creme"] input:focus, :root[data-skin="creme"] select:focus, :root[data-skin="creme"] textarea:focus { border-color: #151515; } :root[data-skin="creme"] input[type=checkbox], :root[data-skin="creme"] input[type=radio] { accent-color: #151515; } :root[data-skin="creme"] dialog.modal { border: none; border-radius: 28px; background: var(--fundo); box-shadow: 0 30px 80px rgba(40,32,18,.25); } :root[data-skin="creme"] dialog.modal::backdrop { background: rgba(40,32,18,.42); backdrop-filter: blur(2px); } :root[data-skin="creme"] .fab { background: #151515; color: #FBF3E4; } /* botão que alterna a skin (rodapé do menu) */ .skin-btn { appearance: none; background: none; border: 0; padding: 0; color: var(--muted); display: flex; cursor: pointer; } .skin-btn:hover { color: var(--texto); }