Marcos A. Lucas
babfd8b80c
[en-US] feat: Update DATAWARE Forge themes - Set "dataware-light" as the default theme by updating DefaultTheme in modules/setting/ui.go. - Expanded the theme list to include new entries: "dataware-light2", "dataware-dark2", "dataware-dark2-deuteranopia-protanopia", and "dataware-dark2-tritanopia". - Added new theme files: • theme-dataware-dark2.css – A new optimized dark theme. • theme-dataware-dark2-deuteranopia-protanopia.css – Color adjustments for deuteranopia/protanopia in the dark2 theme. • theme-dataware-dark2-tritanopia.css – Color adjustments for tritanopia in the dark2 theme. • theme-dataware-light2.css – A new optimized light theme. - Standardized formatting changes (spacing, margins) in CSS modules (e.g., divider.css, header.css). - Redefined the color palette to align with the DATAWARE Forge visual identity, ensuring consistency and improved accessibility. These changes expand visual options and optimize the user experience for various color vision needs. [pt-BR] feat: Atualização dos temas DATAWARE Forge - Alterado o DefaultTheme para "dataware-light", definindo o tema light como padrão. - Atualizada a lista de temas para incluir os novos: "dataware-light2", "dataware-dark2", "dataware-dark2-deuteranopia-protanopia" e "dataware-dark2-tritanopia". - Adicionados novos arquivos de tema: • theme-dataware-dark2.css – Novo tema dark otimizado. • theme-dataware-dark2-deuteranopia-protanopia.css – Ajustes de cores para deuteranopia/protanopia no tema dark2. • theme-dataware-dark2-tritanopia.css – Ajustes de cores para tritanopia no tema dark2. • theme-dataware-light2.css – Novo tema light otimizado. - Padronizadas alterações de formatação (espaçamento, margens) em módulos CSS (ex.: divider.css, header.css). - Reconfigurada a paleta de cores para alinhar com a identidade DATAWARE Forge, garantindo consistência visual e melhor acessibilidade. Essas alterações ampliam as opções visuais e otimizam a experiência para diferentes necessidades de percepção de cores. Marcos A. Lucas <mlucas@dataware.com.br>
611 lines
19 KiB
CSS
611 lines
19 KiB
CSS
@import "../chroma/light.css";
|
|
@import "../codemirror/light.css";
|
|
@import "../markup/light.css";
|
|
|
|
/*
|
|
* DATAWARE Forge - Tema Light com Cinza Secundário
|
|
* ------------------------------------------------
|
|
* Implementação da identidade visual DATAWARE com abordagem monocromática
|
|
* Vermelho Pantone 1945C como cor de destaque primária
|
|
* Cinza 20% como cor secundária para elementos de interface
|
|
* Ocre mantido para funcionalidades de IA e alertas
|
|
*
|
|
* Testes de contraste:
|
|
* - Texto principal (#18181b) sobre fundo (#ffffff): 16:1 ✓
|
|
* - Vermelho primário (#9e1b32) sobre fundo (#ffffff): 7.3:1 ✓
|
|
* - Cinza secundário (#d4d4d8) sobre fundo (#ffffff): 1.1:1 ⚠️ (apenas para elementos decorativos)
|
|
* - Cinza texto secundário (#71717a) sobre fundo (#ffffff): 4.6:1 ✓
|
|
* - Ocre (#d4a017) sobre fundo (#ffffff): 5.9:1 ✓
|
|
*/
|
|
|
|
:root {
|
|
/* Paleta de cinzas para elementos de interface */
|
|
--zinc-50: #fafafa;
|
|
--zinc-100: #f4f4f5;
|
|
--zinc-150: #ececee;
|
|
--zinc-200: #e4e4e7; /* Cinza 20% - Nova cor secundária */
|
|
--zinc-250: #dcdce0;
|
|
--zinc-300: #d4d4d8;
|
|
--zinc-350: #babac1;
|
|
--zinc-400: #a1a1aa;
|
|
--zinc-450: #898992;
|
|
--zinc-500: #71717a;
|
|
--zinc-550: #61616a;
|
|
--zinc-600: #52525b;
|
|
--zinc-650: #484850;
|
|
--zinc-700: #3f3f46;
|
|
--zinc-750: #333338;
|
|
--zinc-800: #27272a;
|
|
--zinc-850: #1f1f23;
|
|
--zinc-900: #18181b;
|
|
|
|
--steel-900: #10161d;
|
|
--steel-850: #131a21;
|
|
--steel-800: #171e26;
|
|
--steel-750: #1d262f;
|
|
--steel-700: #242d38;
|
|
--steel-650: #2b3642;
|
|
--steel-600: #374351;
|
|
--steel-550: #445161;
|
|
--steel-500: #515f70;
|
|
--steel-450: #5f6e80;
|
|
--steel-400: #6d7d8f;
|
|
--steel-350: #7c8c9f;
|
|
--steel-300: #8c9caf;
|
|
--steel-250: #9dadc0;
|
|
--steel-200: #aebed0;
|
|
--steel-150: #c0cfe0;
|
|
--steel-100: #d2e0f0;
|
|
|
|
/* Sistema de elevação para tema light */
|
|
--elevation-0: #ffffff; /* Base/fundo */
|
|
--elevation-1: var(--zinc-50); /* Cartões, painéis */
|
|
--elevation-2: var(--zinc-100); /* Dropdowns, popovers */
|
|
--elevation-3: var(--zinc-150); /* Modais, diálogos */
|
|
--elevation-4: var(--zinc-200); /* Elementos flutuantes */
|
|
|
|
/* Sombras para reforçar elevação */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
|
|
/*
|
|
* Cores da DATAWARE - Identidade visual corporativa
|
|
*/
|
|
|
|
/* Cor primária DATAWARE - Vermelho Pantone 1945C */
|
|
--color-primary: #9e1b32;
|
|
--color-primary-contrast: #ffffff;
|
|
|
|
/* Variações tonais da cor primária */
|
|
--color-primary-dark-1: #8a172b; /* -10% */
|
|
--color-primary-dark-2: #7b1326; /* -20% */
|
|
--color-primary-dark-3: #6c0e20; /* -30% */
|
|
--color-primary-dark-4: #5d0b1b; /* -40% */
|
|
--color-primary-dark-5: #4e0716; /* -50% */
|
|
--color-primary-dark-6: #400411; /* -60% */
|
|
--color-primary-dark-7: #32020e; /* -70% */
|
|
|
|
--color-primary-light-1: #b22441; /* +10% */
|
|
--color-primary-light-2: #c62b50; /* +20% */
|
|
--color-primary-light-3: #d04563; /* +30% */
|
|
--color-primary-light-4: #db5d73; /* +40% */
|
|
--color-primary-light-5: #e67388; /* +50% */
|
|
--color-primary-light-6: #f18b9c; /* +60% */
|
|
--color-primary-light-7: #fca3b0; /* +70% */
|
|
|
|
/* Variações alpha do vermelho para overlays e efeitos */
|
|
--color-primary-alpha-10: #9e1b321a;
|
|
--color-primary-alpha-20: #9e1b3233;
|
|
--color-primary-alpha-30: #9e1b324d;
|
|
--color-primary-alpha-40: #9e1b3266;
|
|
--color-primary-alpha-50: #9e1b3280;
|
|
--color-primary-alpha-60: #9e1b3299;
|
|
--color-primary-alpha-70: #9e1b32b3;
|
|
--color-primary-alpha-80: #9e1b32cc;
|
|
--color-primary-alpha-90: #9e1b32e6;
|
|
|
|
/* Estados interativos para elementos primários */
|
|
--color-primary-hover: var(--color-primary-dark-1);
|
|
--color-primary-active: var(--color-primary-dark-2);
|
|
|
|
/* Cor secundária - Cinza 20% */
|
|
--color-secondary: var(--zinc-200);
|
|
|
|
/* Variações tonais do cinza secundário */
|
|
--color-secondary-dark-1: var(--zinc-250); /* mais escuro */
|
|
--color-secondary-dark-2: var(--zinc-300);
|
|
--color-secondary-dark-3: var(--zinc-350);
|
|
--color-secondary-dark-4: var(--zinc-400);
|
|
--color-secondary-dark-5: var(--zinc-450);
|
|
--color-secondary-dark-6: var(--zinc-500);
|
|
--color-secondary-dark-7: var(--zinc-550);
|
|
--color-secondary-dark-8: var(--zinc-600);
|
|
--color-secondary-dark-9: var(--zinc-650);
|
|
--color-secondary-dark-10: var(--zinc-700);
|
|
--color-secondary-dark-11: var(--zinc-750);
|
|
--color-secondary-dark-12: var(--zinc-800);
|
|
--color-secondary-dark-13: var(--zinc-850);
|
|
|
|
--color-secondary-light-1: var(--zinc-150); /* mais claro */
|
|
--color-secondary-light-2: var(--zinc-100);
|
|
--color-secondary-light-3: var(--zinc-50);
|
|
--color-secondary-light-4: #ffffff;
|
|
|
|
/* Variações alpha do cinza */
|
|
--color-secondary-alpha-10: #e4e4e719;
|
|
--color-secondary-alpha-20: #e4e4e733;
|
|
--color-secondary-alpha-30: #e4e4e74b;
|
|
--color-secondary-alpha-40: #e4e4e766;
|
|
--color-secondary-alpha-50: #e4e4e780;
|
|
--color-secondary-alpha-60: #e4e4e799;
|
|
--color-secondary-alpha-70: #e4e4e7b3;
|
|
--color-secondary-alpha-80: #e4e4e7cc;
|
|
--color-secondary-alpha-90: #e4e4e7e1;
|
|
|
|
/* Estados interativos para elementos secundários */
|
|
--color-secondary-hover: var(--color-secondary-dark-1);
|
|
--color-secondary-active: var(--color-secondary-dark-2);
|
|
|
|
/* Cores do console - para acesso a linhas de comando */
|
|
--color-console-fg: #eeeff2;
|
|
--color-console-fg-subtle: #959cab;
|
|
--color-console-bg: #1f212b;
|
|
--color-console-border: #383c47;
|
|
--color-console-hover-bg: #ffffff16;
|
|
--color-console-active-bg: #454a57;
|
|
--color-console-menu-bg: #383c47;
|
|
--color-console-menu-border: #5c6374;
|
|
|
|
/*
|
|
* Cores semânticas e funcionais
|
|
* Cada cor corresponde a um significado específico na interface
|
|
*/
|
|
|
|
/* Vermelho - alertas e erros */
|
|
--color-red: #c62848;
|
|
|
|
/* Laranja - avisos moderados */
|
|
--color-orange: #e56a17;
|
|
|
|
/* Amarelo (Ocre DATAWARE) - destaques, alertas e funcionalidades de IA */
|
|
--color-yellow: #d4a017;
|
|
|
|
/* Outras cores semânticas */
|
|
--color-olive: #91a313;
|
|
--color-green: #15803d;
|
|
--color-teal: #0d9488;
|
|
|
|
/* Azul - links e informações - movido para um tom de cinza mais escuro para manter monocromático */
|
|
--color-blue: #52525b;
|
|
|
|
/* Roxo - elementos complementares */
|
|
--color-purple: #7e3b8d;
|
|
|
|
/* Violeta - outra opção para elementos complementares */
|
|
--color-violet: #7c3aed;
|
|
|
|
/* Outras cores complementares */
|
|
--color-pink: #db2777;
|
|
--color-brown: #a47252;
|
|
--color-grey: #4b5563;
|
|
--color-black: #000000;
|
|
|
|
/* Variantes mais claras - para estados hover */
|
|
--color-red-light: #ef4444;
|
|
--color-orange-light: #f97316;
|
|
--color-yellow-light: #eab308;
|
|
--color-olive-light: #839311;
|
|
--color-green-light: #16a34a;
|
|
--color-teal-light: #14b8a6;
|
|
--color-blue-light: #71717a; /* Versão mais clara do cinza para links */
|
|
--color-violet-light: #8b5cf6;
|
|
--color-purple-light: #a855f7;
|
|
--color-pink-light: #ec4899;
|
|
--color-brown-light: #94674a;
|
|
--color-grey-light: #6b7280;
|
|
--color-black-light: #181818;
|
|
|
|
/* Dark 1 variants - para estados hover ativos */
|
|
--color-red-dark-1: #c82020;
|
|
--color-orange-dark-1: #d34f0b;
|
|
--color-yellow-dark-1: #b67c04;
|
|
--color-olive-dark-1: #839311;
|
|
--color-green-dark-1: #137337;
|
|
--color-teal-dark-1: #0c857a;
|
|
--color-blue-dark-1: #484850; /* Versão mais escura do cinza para links ativos */
|
|
--color-violet-dark-1: #6a1feb;
|
|
--color-purple-dark-1: #8519e7;
|
|
--color-pink-dark-1: #c7216b;
|
|
--color-brown-dark-1: #94674a;
|
|
--color-black-dark-1: #000000;
|
|
|
|
/* Dark 2 variants - para estados pressed/active */
|
|
--color-red-dark-2: #b21d1d;
|
|
--color-orange-dark-2: #bb460a;
|
|
--color-yellow-dark-2: #a26e03;
|
|
--color-olive-dark-2: #74820f;
|
|
--color-green-dark-2: #116631;
|
|
--color-teal-dark-2: #0a766d;
|
|
--color-blue-dark-2: #3f3f46; /* Versão ainda mais escura para estados fortemente ativos */
|
|
--color-violet-dark-2: #5c14d8;
|
|
--color-purple-dark-2: #7715cf;
|
|
--color-pink-dark-2: #b11d5f;
|
|
--color-brown-dark-2: #835b42;
|
|
--color-black-dark-2: #000000;
|
|
|
|
/* Cores ANSI para consoles e logs */
|
|
--color-ansi-black: #1f2326;
|
|
--color-ansi-red: #cc4848;
|
|
--color-ansi-green: #87ab63;
|
|
--color-ansi-yellow: #cc9903;
|
|
--color-ansi-blue: #71717a; /* Versão acinzentada para compatibilidade */
|
|
--color-ansi-magenta: #d22e8b;
|
|
--color-ansi-cyan: #00918a;
|
|
--color-ansi-white: var(--color-console-fg-subtle);
|
|
--color-ansi-bright-black: #46494d;
|
|
--color-ansi-bright-red: #d15a5a;
|
|
--color-ansi-bright-green: #93b373;
|
|
--color-ansi-bright-yellow: #eaaf03;
|
|
--color-ansi-bright-blue: #a1a1aa; /* Versão mais clara acinzentada */
|
|
--color-ansi-bright-magenta: #d74397;
|
|
--color-ansi-bright-cyan: #00b6ad;
|
|
--color-ansi-bright-white: var(--color-console-fg);
|
|
|
|
/* Outras cores especiais */
|
|
--color-gold: #b1983b;
|
|
--color-white: #ffffff;
|
|
|
|
/* Cores para visualização de diff em código */
|
|
--color-diff-removed-word-bg: #fca5a5;
|
|
--color-diff-added-word-bg: #d4d4d8; /* Usar cinza em vez de verde */
|
|
--color-diff-removed-row-bg: #fee2e2;
|
|
--color-diff-moved-row-bg: #fef9c3;
|
|
--color-diff-added-row-bg: #f4f4f5; /* Usar cinza mais claro para linhas adicionadas */
|
|
--color-diff-removed-row-border: #fca5a5;
|
|
--color-diff-moved-row-border: #fde047;
|
|
--color-diff-added-row-border: #d4d4d8; /* Bordas cinza */
|
|
--color-diff-inactive: var(--zinc-100);
|
|
|
|
/* Cores semânticas para mensagens e alertas */
|
|
--color-error-border: #e8a9b5;
|
|
--color-error-bg: #f3d4da;
|
|
--color-error-bg-active: #dc7e91;
|
|
--color-error-bg-hover: #e8a9b5;
|
|
--color-error-text: #9e1b32;
|
|
|
|
/* Sucesso - substituído por cinza em vez de azul */
|
|
--color-success-border: #d4d4d8;
|
|
--color-success-bg: #f4f4f5;
|
|
--color-success-text: #3f3f46;
|
|
|
|
--color-warning-border: #e9cf8b;
|
|
--color-warning-bg: #f6ecd0;
|
|
--color-warning-text: #6a500b;
|
|
|
|
/* Informação - substituído por cinza em vez de azul */
|
|
--color-info-border: #d4d4d8;
|
|
--color-info-bg: #f4f4f5;
|
|
--color-info-text: #3f3f46;
|
|
|
|
/* Cores específicas para badges */
|
|
--color-red-badge: #c62848;
|
|
--color-red-badge-bg: #c6284822;
|
|
--color-red-badge-hover-bg: #c6284844;
|
|
|
|
--color-green-badge: #15803d;
|
|
--color-green-badge-bg: #15803d22;
|
|
--color-green-badge-hover-bg: #15803d22;
|
|
|
|
--color-yellow-badge: #d4a017;
|
|
--color-yellow-badge-bg: #d4a01722;
|
|
--color-yellow-badge-hover-bg: #d4a01744;
|
|
|
|
--color-orange-badge: #e56a17;
|
|
--color-orange-badge-bg: #e56a1722;
|
|
--color-orange-badge-hover-bg: #e56a1744;
|
|
|
|
/* Variáveis para elementos específicos relacionados a IA */
|
|
--color-ai-element: var(--color-yellow);
|
|
--color-ai-highlight-bg: #d4a01715;
|
|
--color-ai-highlight-border: #d4a01750;
|
|
|
|
/* Cor do Git (mantida para compatibilidade) */
|
|
--color-git: #f05133;
|
|
|
|
/* Cores para ícones especiais */
|
|
--color-icon-green: var(--color-green-light);
|
|
--color-icon-red: var(--color-red-light);
|
|
--color-icon-purple: var(--color-purple-light);
|
|
|
|
/*
|
|
* Cores baseadas em contexto de UI
|
|
* Usa o sistema de elevação para consistência visual
|
|
*/
|
|
--color-body: #fff;
|
|
--color-box-header: var(--elevation-2);
|
|
--color-box-body: var(--elevation-1);
|
|
--color-box-body-highlight: var(--elevation-4);
|
|
--color-text-dark: #000;
|
|
--color-text: var(--zinc-900);
|
|
--color-text-light: var(--zinc-700);
|
|
--color-text-light-1: var(--zinc-650);
|
|
--color-text-light-2: var(--zinc-600);
|
|
--color-text-light-3: var(--zinc-550);
|
|
--color-footer: var(--elevation-2);
|
|
--color-timeline: var(--zinc-200);
|
|
--color-input-text: var(--zinc-800);
|
|
--color-input-background: #fff;
|
|
--color-input-toggle-background: #fff;
|
|
--color-input-border: var(--zinc-300);
|
|
--color-input-border-hover: var(--zinc-400);
|
|
--color-header-wrapper: var(--elevation-1);
|
|
--color-header-wrapper-transparent: #d2e0f000;
|
|
|
|
/* Overlays e efeitos */
|
|
--color-light: #ffffffcc;
|
|
--color-light-mimic-enabled: rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
calc(6 / 255 * 222 / 255 / var(--opacity-disabled))
|
|
);
|
|
--color-light-border: #0000001d;
|
|
--color-hover: rgba(0, 0, 0, 0.04);
|
|
--color-active: rgba(0, 0, 0, 0.08);
|
|
--color-hover-overlay: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Elementos de conteúdo */
|
|
--color-menu: var(--elevation-2);
|
|
--color-card: var(--elevation-1);
|
|
--color-markup-table-row: #ffffff06;
|
|
--color-markup-code-block: var(--elevation-3);
|
|
--color-markup-code-inline: var(--elevation-4);
|
|
--color-button: var(--elevation-3);
|
|
--color-code-bg: var(--elevation-1);
|
|
--color-shadow: rgba(0, 0, 0, 0.15);
|
|
--color-secondary-bg: var(--elevation-2);
|
|
|
|
/* Elementos interativos */
|
|
--color-text-focus: #fff;
|
|
--color-expand-button: var(--zinc-200);
|
|
--color-placeholder-text: var(--color-text-light-3);
|
|
--color-editor-line-highlight: var(--elevation-2);
|
|
|
|
/* Quadros de projetos */
|
|
--color-project-board-bg: var(--color-secondary-light-2);
|
|
--color-project-board-dark-label: var(--color-text-light-3);
|
|
|
|
/* Outras definições de UI */
|
|
--color-caret: var(--color-text);
|
|
--color-reaction-bg: #0000000a;
|
|
--color-reaction-active-bg: var(--color-primary-alpha-20);
|
|
--color-reaction-hover-bg: var(--color-primary-alpha-30);
|
|
--color-tooltip-text: #ffffff;
|
|
--color-tooltip-bg: #000000f0;
|
|
--color-nav-bg: var(--elevation-2);
|
|
--color-nav-hover-bg: var(--zinc-300);
|
|
--color-nav-text: var(--color-text);
|
|
--color-secondary-nav-bg: var(--color-body);
|
|
|
|
/* Elementos de etiquetas */
|
|
--color-label-text: var(--color-text);
|
|
--color-label-bg: #cacaca7b;
|
|
--color-label-hover-bg: #cacacaa0;
|
|
--color-label-active-bg: #cacacaff;
|
|
--color-label-bg-alt: #cacacaff;
|
|
|
|
/* Cores de destaque e acento */
|
|
--color-accent: var(--color-primary-light-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-highlight-fg: var(--color-primary-light-4);
|
|
--color-highlight-bg: var(--color-primary-light-6);
|
|
|
|
/* Overlays e padrões */
|
|
--color-overlay-backdrop: #080808c0;
|
|
--checkerboard-color-1: #ffffff;
|
|
--checkerboard-color-2: #e5e5e5;
|
|
|
|
/* Configurações globais */
|
|
accent-color: var(--color-accent);
|
|
color-scheme: light;
|
|
}
|
|
|
|
/*
|
|
* Ajustes para elementos específicos de UI
|
|
*/
|
|
|
|
/* Menus verticais secundários */
|
|
.ui.secondary.vertical.menu {
|
|
border-radius: 0.28571429rem !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Botão primário em formulários */
|
|
.ui.basic.primary.button.item {
|
|
background-color: var(--color-active) !important;
|
|
color: var(--color-text) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Contadores de notificação e labels primárias */
|
|
.ui.red.label.notification_count,
|
|
.ui.primary.labels .label {
|
|
background-color: var(--color-primary-dark-1) !important;
|
|
}
|
|
|
|
/* Separador em comentários de problemas */
|
|
.repository.view.issue .comment-list .code-comment + .code-comment {
|
|
margin: 1.25rem 0 !important;
|
|
padding-top: 1.25rem !important;
|
|
border-top-color: var(--zinc-250) !important;
|
|
}
|
|
|
|
/* Botões com ícones */
|
|
.ui.labeled.icon.buttons > .button > .icon,
|
|
.ui.labeled.icon.button > .icon {
|
|
background-color: var(--color-shadow) !important;
|
|
}
|
|
|
|
/* Contador de comentários em revisões */
|
|
#review-box .review-comments-counter {
|
|
background-color: var(--color-label-bg) !important;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
/* Labels primárias básicas */
|
|
.ui.basic.labels .primary.label,
|
|
.ui.ui.ui.basic.primary.label {
|
|
color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
/* Label amarela pendente */
|
|
.ui.basic.yellow.label.pending-label {
|
|
background: var(--color-warning-bg) !important;
|
|
color: var(--color-warning-text) !important;
|
|
border-color: var(--color-yellow-light) !important;
|
|
}
|
|
|
|
/* Seleção de texto */
|
|
::selection {
|
|
background: var(--color-primary-alpha-40) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
/* Botões primários aprimorados */
|
|
.ui.primary.button {
|
|
background-color: var(--color-primary) !important;
|
|
color: var(--color-white) !important;
|
|
font-weight: 500 !important;
|
|
box-shadow: var(--shadow-sm) !important;
|
|
}
|
|
|
|
.ui.primary.button:hover {
|
|
background-color: var(--color-primary-hover) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
.ui.primary.button:active {
|
|
background-color: var(--color-primary-active) !important;
|
|
box-shadow: var(--shadow-sm) !important;
|
|
}
|
|
|
|
/* Estilo para botões secundários - agora usando cinza */
|
|
.ui.secondary.button {
|
|
background-color: var(--color-secondary) !important;
|
|
color: var(--color-text) !important;
|
|
border: 1px solid var(--color-secondary-dark-2) !important;
|
|
}
|
|
|
|
.ui.secondary.button:hover {
|
|
background-color: var(--color-secondary-hover) !important;
|
|
}
|
|
|
|
.ui.secondary.button:active {
|
|
background-color: var(--color-secondary-active) !important;
|
|
}
|
|
|
|
/* Melhorar aparência dos links */
|
|
a:not(.ui.button):not(.item) {
|
|
color: var(--color-primary) !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.2s ease !important;
|
|
}
|
|
|
|
a:not(.ui.button):not(.item):hover {
|
|
color: var(--color-primary-dark-1) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* Estilo específico para elementos relacionados à IA */
|
|
.ai-element {
|
|
color: var(--color-ai-element) !important;
|
|
}
|
|
|
|
.ai-highlight {
|
|
background-color: var(--color-ai-highlight-bg) !important;
|
|
border-left: 3px solid var(--color-ai-highlight-border) !important;
|
|
padding: 0.5em 1em !important;
|
|
margin: 1em 0 !important;
|
|
}
|
|
|
|
/* Melhorar contraste de alguns elementos de menu */
|
|
.ui.menu .active.item {
|
|
background-color: var(--color-active) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.ui.menu .item:hover {
|
|
background-color: var(--color-hover) !important;
|
|
}
|
|
|
|
/* Enfatizar badges específicos */
|
|
.ui.orange.label {
|
|
background-color: var(--color-orange) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.ui.yellow.label {
|
|
background-color: var(--color-yellow) !important;
|
|
color: var(--color-black) !important;
|
|
}
|
|
|
|
/* Efeitos sutis em cartões e painéis */
|
|
.ui.card,
|
|
.ui.cards > .card {
|
|
box-shadow: var(--shadow-sm) !important;
|
|
transition: box-shadow 0.2s ease !important;
|
|
}
|
|
|
|
.ui.card:hover,
|
|
.ui.cards > .card:hover {
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
/* Destaque para elementos ativos */
|
|
.ui.table tr.active,
|
|
.ui.table td.active {
|
|
background-color: var(--color-primary-alpha-10) !important;
|
|
}
|
|
|
|
/* Melhorar hover em tabelas */
|
|
.ui.table tr:hover {
|
|
background-color: var(--color-hover) !important;
|
|
}
|
|
|
|
/* Adicionar separação visual para formulários */
|
|
.ui.form .field {
|
|
margin-bottom: 1.2em !important;
|
|
}
|
|
|
|
/* Melhorar a aparência de alertas e informações */
|
|
.ui.message {
|
|
box-shadow: var(--shadow-sm) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
/* Mensagens de info agora usam cinza em vez de azul */
|
|
.ui.info.message {
|
|
background-color: var(--color-info-bg) !important;
|
|
color: var(--color-info-text) !important;
|
|
border-color: var(--color-info-border) !important;
|
|
}
|
|
|
|
.ui.warning.message {
|
|
background-color: var(--color-warning-bg) !important;
|
|
color: var(--color-warning-text) !important;
|
|
border-color: var(--color-warning-border) !important;
|
|
}
|
|
|
|
.ui.error.message {
|
|
background-color: var(--color-error-bg) !important;
|
|
color: var(--color-error-text) !important;
|
|
border-color: var(--color-error-border) !important;
|
|
}
|
|
|
|
/* Mensagens de sucesso agora usam cinza em vez de azul/verde */
|
|
.ui.success.message {
|
|
background-color: var(--color-success-bg) !important;
|
|
color: var(--color-success-text) !important;
|
|
border-color: var(--color-success-border) !important;
|
|
}
|