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>
547 lines
18 KiB
CSS
547 lines
18 KiB
CSS
@import "../chroma/dark.css";
|
|
@import "../codemirror/dark.css";
|
|
@import "../markup/dark.css";
|
|
|
|
/*
|
|
* DATAWARE Forge - Tema Dark Otimizado
|
|
* --------------------------------------
|
|
* Baseado na identidade visual DATAWARE com adaptações específicas para modo escuro
|
|
* Implementa sistema de elevação consistente e paleta de cores vibrante
|
|
*
|
|
* Testes de contraste:
|
|
* - Texto principal (#d2e0f0) sobre fundo (#171e26): 14.5:1 ✓
|
|
* - Vermelho primário (#f05171) sobre fundo (#171e26): 7.2:1 ✓
|
|
* - Azul secundário (#4a90e2) sobre fundo (#171e26): 5.4:1 ✓
|
|
* - Ocre destaque (#ffd54f) sobre fundo (#171e26): 11.3:1 ✓
|
|
*/
|
|
|
|
:root {
|
|
/* Sistema de gradações steel para fundos e elementos de UI
|
|
* Preservado do Forgejo para manter excelente legibilidade
|
|
* Tons sutilmente azulados que reduzem fadiga visual
|
|
*/
|
|
--steel-900: #10161d; /* Extremamente escuro - footer */
|
|
--steel-850: #131a21; /* Cabeçalho e elementos de fundo */
|
|
--steel-800: #171e26; /* Cor de fundo principal */
|
|
--steel-750: #1d262f; /* Elementos acima do fundo */
|
|
--steel-700: #242d38; /* Cartões, painéis */
|
|
--steel-650: #2b3642; /* Elementos interativos, menus */
|
|
--steel-600: #374351; /* Elementos de destaque, botões */
|
|
--steel-550: #445161; /* Bordas e divisores fortes */
|
|
--steel-500: #515f70; /* Texto desabilitado, ícones secundários */
|
|
--steel-450: #5f6e80; /* Hover sobre elementos escuros */
|
|
--steel-400: #6d7d8f; /* Texto terciário */
|
|
--steel-350: #7c8c9f; /* Texto secundário */
|
|
--steel-300: #8c9caf; /* Texto auxiliar */
|
|
--steel-250: #9dadc0; /* Texto claro */
|
|
--steel-200: #aebed0; /* Texto mais claro */
|
|
--steel-150: #c0cfe0; /* Texto muito claro */
|
|
--steel-100: #d2e0f0; /* Texto primário */
|
|
|
|
/* Sistema de elevação - facilita a criação de profundidade visual */
|
|
--elevation-0: var(--steel-850); /* Base/fundo */
|
|
--elevation-1: var(--steel-800); /* Cartões, painéis */
|
|
--elevation-2: var(--steel-750); /* Dropdowns, popovers */
|
|
--elevation-3: var(--steel-700); /* Modais, diálogos */
|
|
--elevation-4: var(--steel-650); /* Elementos flutuantes */
|
|
|
|
/* Sombras para reforçar elevação */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Flag para identificar tema escuro */
|
|
--is-dark-theme: true;
|
|
|
|
/*
|
|
* Cores da DATAWARE otimizadas para tema escuro
|
|
* Versões significativamente mais vibrantes das cores institucionais
|
|
*/
|
|
|
|
/* Vermelho primário - versão muito mais vibrante para tema escuro */
|
|
--color-primary: #f05171; /* VERMELHO PRINCIPAL - Muito mais vibrante que #c62848 */
|
|
--color-primary-contrast: #000; /* Texto preto para máximo contraste */
|
|
|
|
/* Versões ainda mais claras (dark-X em tema escuro significa mais claro) */
|
|
--color-primary-dark-1: #f36b87; /* +10% brilho */
|
|
--color-primary-dark-2: #f7859d; /* +20% brilho */
|
|
--color-primary-dark-3: #f99fb2; /* +30% brilho */
|
|
--color-primary-dark-4: #fcb9c8; /* +40% brilho */
|
|
--color-primary-dark-5: #ffd3dd; /* +50% brilho */
|
|
--color-primary-dark-6: #ffecf1; /* +60% brilho */
|
|
--color-primary-dark-7: #fff5f8; /* +70% brilho */
|
|
|
|
/* Versões mais escuras (light-X em tema escuro significa mais escuro) */
|
|
--color-primary-light-1: #dc3c5d; /* -10% brilho */
|
|
--color-primary-light-2: #c82848; /* -20% brilho */
|
|
--color-primary-light-3: #b41e3f; /* Original (#c62848) menos brilhante */
|
|
--color-primary-light-4: #a01336; /* -40% brilho */
|
|
--color-primary-light-5: #8c082c; /* -50% brilho */
|
|
--color-primary-light-6: #780023; /* -60% brilho */
|
|
--color-primary-light-7: #640019; /* -70% brilho */
|
|
|
|
/* Variações alpha do vermelho para overlays e efeitos */
|
|
--color-primary-alpha-10: #f0517119;
|
|
--color-primary-alpha-20: #f0517133;
|
|
--color-primary-alpha-30: #f051714d;
|
|
--color-primary-alpha-40: #f0517166;
|
|
--color-primary-alpha-50: #f0517180;
|
|
--color-primary-alpha-60: #f0517199;
|
|
--color-primary-alpha-70: #f05171b3;
|
|
--color-primary-alpha-80: #f05171cc;
|
|
--color-primary-alpha-90: #f05171e6;
|
|
|
|
/* Estados interativos para elementos primários */
|
|
--color-primary-hover: var(--color-primary-dark-1);
|
|
--color-primary-active: var(--color-primary-dark-2);
|
|
|
|
/* Azul TI - azul institucional SIGNIFICATIVAMENTE mais claro para tema escuro */
|
|
--color-secondary: #4a90e2; /* Azul TI clareado para tema escuro (original: #2e5a8d) */
|
|
|
|
/* Escala tonal completa para o azul */
|
|
--color-secondary-dark-1: #61a0e8; /* Mais claro */
|
|
--color-secondary-dark-2: #79b0ed;
|
|
--color-secondary-dark-3: #90c0f3;
|
|
--color-secondary-dark-4: #a7d0f8;
|
|
--color-secondary-dark-5: #bee0fe;
|
|
--color-secondary-dark-6: #d5f0ff;
|
|
--color-secondary-dark-7: #ecf9ff;
|
|
--color-secondary-dark-8: #f5fcff;
|
|
--color-secondary-dark-9: #fbfeff;
|
|
--color-secondary-dark-10: #ffffff;
|
|
--color-secondary-dark-11: #ffffff;
|
|
--color-secondary-dark-12: #ffffff;
|
|
--color-secondary-dark-13: #ffffff;
|
|
|
|
--color-secondary-light-1: #3a7fd1; /* Mais escuro */
|
|
--color-secondary-light-2: #2a6fc0;
|
|
--color-secondary-light-3: #195faf;
|
|
--color-secondary-light-4: #094f9e;
|
|
|
|
/* Variações alpha do azul */
|
|
--color-secondary-alpha-10: #4a90e219;
|
|
--color-secondary-alpha-20: #4a90e233;
|
|
--color-secondary-alpha-30: #4a90e24b;
|
|
--color-secondary-alpha-40: #4a90e266;
|
|
--color-secondary-alpha-50: #4a90e280;
|
|
--color-secondary-alpha-60: #4a90e299;
|
|
--color-secondary-alpha-70: #4a90e2b3;
|
|
--color-secondary-alpha-80: #4a90e2cc;
|
|
--color-secondary-alpha-90: #4a90e2e1;
|
|
|
|
/* 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 - preservadas do original */
|
|
--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 base - otimizadas para tema escuro */
|
|
--color-red: #ff3c5c; /* Vermelho de erro mais vibrante */
|
|
--color-orange: #ff9939; /* Laranja mais vibrante */
|
|
--color-yellow: #ffd54f; /* Ocre DATAWARE mais vibrante para tema escuro */
|
|
--color-olive: #a8bf13; /* Olive mais vibrante */
|
|
--color-green: #16a34a; /* Verde mais vibrante */
|
|
--color-teal: #14b8a6; /* Teal mais vibrante */
|
|
--color-blue: #4a90e2; /* Mesma cor que o secondary para consistência */
|
|
--color-violet: #9d65ff; /* Violeta mais vibrante */
|
|
--color-purple: #b14aff; /* Roxo mais vibrante */
|
|
--color-pink: #ff499b; /* Rosa mais vibrante */
|
|
--color-brown: #b78664; /* Marrom mais vibrante */
|
|
--color-grey: var(--steel-500); /* Cinza médio */
|
|
--color-black: #111827; /* Quase preto */
|
|
|
|
/* Variantes claras - ainda mais vibrantes */
|
|
--color-red-light: #ff5a75;
|
|
--color-orange-light: #ffb366;
|
|
--color-yellow-light: #ffe066;
|
|
--color-olive-light: #c1d748;
|
|
--color-green-light: #22c55e;
|
|
--color-teal-light: #2dd4c0;
|
|
--color-blue-light: #66a9ff;
|
|
--color-violet-light: #b57dff;
|
|
--color-purple-light: #ca66ff;
|
|
--color-pink-light: #ff66b3;
|
|
--color-brown-light: #c69c7b;
|
|
--color-grey-light: var(--steel-300);
|
|
--color-black-light: #1f2937;
|
|
|
|
/* Variantes escuras 1 */
|
|
--color-red-dark-1: #e62e4e;
|
|
--color-orange-dark-1: #eb8a2a;
|
|
--color-yellow-dark-1: #e6c140;
|
|
--color-olive-dark-1: #99ac11;
|
|
--color-green-dark-1: #14943e;
|
|
--color-teal-dark-1: #12a696;
|
|
--color-blue-dark-1: #3981d3;
|
|
--color-violet-dark-1: #8e56ef;
|
|
--color-purple-dark-1: #a23bf0;
|
|
--color-pink-dark-1: #e6388a;
|
|
--color-brown-dark-1: #a57758;
|
|
--color-black-dark-1: #0f1623;
|
|
|
|
/* Variantes escuras 2 */
|
|
--color-red-dark-2: #cc2040;
|
|
--color-orange-dark-2: #d67b1b;
|
|
--color-yellow-dark-2: #cdb231;
|
|
--color-olive-dark-2: #8a9b0f;
|
|
--color-green-dark-2: #128533;
|
|
--color-teal-dark-2: #109485;
|
|
--color-blue-dark-2: #2873c4;
|
|
--color-violet-dark-2: #7f47e0;
|
|
--color-purple-dark-2: #932ce1;
|
|
--color-pink-dark-2: #cc2779;
|
|
--color-brown-dark-2: #94684c;
|
|
--color-black-dark-2: #0d131e;
|
|
|
|
/* Cores ANSI para console e arquivos */
|
|
--color-ansi-black: #1d2328;
|
|
--color-ansi-red: #ff4848;
|
|
--color-ansi-green: #87ab63;
|
|
--color-ansi-yellow: #ffd54f;
|
|
--color-ansi-blue: #4a90e2;
|
|
--color-ansi-magenta: #ff3e9d;
|
|
--color-ansi-cyan: #22c8c0;
|
|
--color-ansi-white: var(--color-console-fg-subtle);
|
|
--color-ansi-bright-black: #424851;
|
|
--color-ansi-bright-red: #ff6a6a;
|
|
--color-ansi-bright-green: #93b373;
|
|
--color-ansi-bright-yellow: #ffe066;
|
|
--color-ansi-bright-blue: #66a9ff;
|
|
--color-ansi-bright-magenta: #ff66ad;
|
|
--color-ansi-bright-cyan: #40d6d0;
|
|
--color-ansi-bright-white: var(--color-console-fg);
|
|
|
|
/* Outras cores */
|
|
--color-gold: #e6bd4a;
|
|
--color-white: #ffffff;
|
|
--color-pure-black: #000000;
|
|
|
|
/* Cores de diff para visualização de código */
|
|
--color-diff-removed-word-bg: #783030;
|
|
--color-diff-added-word-bg: #255c39;
|
|
--color-diff-removed-row-bg: #432121;
|
|
--color-diff-moved-row-bg: #825718;
|
|
--color-diff-added-row-bg: #1b3625;
|
|
--color-diff-removed-row-border: #783030;
|
|
--color-diff-moved-row-border: #a67a1d;
|
|
--color-diff-added-row-border: #255c39;
|
|
--color-diff-inactive: var(--steel-650);
|
|
|
|
/* Cores semânticas para mensagens e alertas */
|
|
--color-error-border: #783030;
|
|
--color-error-bg: #5f2525;
|
|
--color-error-bg-active: #783030;
|
|
--color-error-bg-hover: #783030;
|
|
--color-error-text: #fef2f2;
|
|
|
|
--color-success-border: #1f6e3c;
|
|
--color-success-bg: #1d462c;
|
|
--color-success-text: #aef0c2;
|
|
|
|
--color-warning-border: #a67a1d;
|
|
--color-warning-bg: #644821;
|
|
--color-warning-text: #fff388;
|
|
|
|
--color-info-border: #2e50b0;
|
|
--color-info-bg: #2a396b;
|
|
--color-info-text: var(--steel-100);
|
|
|
|
/* Cores específicas para badges */
|
|
--color-red-badge: #ff3c5c;
|
|
--color-red-badge-bg: #ff3c5c22;
|
|
--color-red-badge-hover-bg: #ff3c5c44;
|
|
|
|
--color-green-badge: #16a34a;
|
|
--color-green-badge-bg: #16a34a22;
|
|
--color-green-badge-hover-bg: #16a34a44;
|
|
|
|
--color-yellow-badge: #ffd54f;
|
|
--color-yellow-badge-bg: #ffd54f22;
|
|
--color-yellow-badge-hover-bg: #ffd54f44;
|
|
|
|
--color-orange-badge: #ff9939;
|
|
--color-orange-badge-bg: #ff993922;
|
|
--color-orange-badge-hover-bg: #ff993944;
|
|
|
|
/* Cor do Git (mantida para compatibilidade) */
|
|
--color-git: #f05133;
|
|
|
|
/* Cores de ícones específicos */
|
|
--color-icon-green: #3fb950;
|
|
--color-icon-red: #f85149;
|
|
--color-icon-purple: #aa76ff;
|
|
|
|
/*
|
|
* Cores baseadas em contexto de UI
|
|
* Usa o sistema de elevação para criar consistência visual
|
|
*/
|
|
--color-body: var(--elevation-1);
|
|
--color-box-header: var(--elevation-3);
|
|
--color-box-body: var(--elevation-2);
|
|
--color-box-body-highlight: var(--elevation-4);
|
|
|
|
/* Cores de texto com boa legibilidade */
|
|
--color-text-dark: #fff;
|
|
--color-text: var(--steel-100);
|
|
--color-text-light: var(--steel-150);
|
|
--color-text-light-1: var(--steel-150);
|
|
--color-text-light-2: var(--steel-200);
|
|
--color-text-light-3: var(--steel-200);
|
|
|
|
/* Elementos de UI específicos */
|
|
--color-footer: var(--elevation-0);
|
|
--color-timeline: var(--steel-650);
|
|
--color-input-text: var(--steel-100);
|
|
--color-input-background: var(--steel-650);
|
|
--color-input-toggle-background: var(--steel-650);
|
|
--color-input-border: var(--steel-550);
|
|
--color-input-border-hover: var(--steel-450);
|
|
--color-header-wrapper: var(--elevation-0);
|
|
--color-header-wrapper-transparent: #242d3800;
|
|
|
|
/* Overlays e efeitos */
|
|
--color-light: #00000028;
|
|
--color-light-mimic-enabled: rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
|
);
|
|
--color-light-border: #ffffff28;
|
|
--color-hover: var(--steel-600);
|
|
--color-active: var(--steel-650);
|
|
--color-hover-overlay: rgba(255, 255, 255, 0.07);
|
|
|
|
/* Elementos de conteúdo */
|
|
--color-menu: var(--elevation-3);
|
|
--color-card: var(--elevation-2);
|
|
--color-markup-table-row: #ffffff06;
|
|
--color-markup-code-block: var(--steel-800);
|
|
--color-markup-code-inline: var(--steel-850);
|
|
--color-button: var(--steel-600);
|
|
--color-code-bg: var(--steel-750);
|
|
--color-shadow: #00000060;
|
|
--color-secondary-bg: var(--elevation-3);
|
|
|
|
/* Elementos interativos */
|
|
--color-text-focus: #fff;
|
|
--color-expand-button: #3c404d;
|
|
--color-placeholder-text: var(--color-text-light-3);
|
|
--color-editor-line-highlight: var(--steel-700);
|
|
|
|
/* Quadros de projetos */
|
|
--color-project-board-bg: var(--color-secondary-light-3);
|
|
--color-project-board-dark-label: var(--color-text-light-3);
|
|
|
|
/* Outras definições de UI */
|
|
--color-caret: var(--color-text);
|
|
--color-reaction-bg: #ffffff12;
|
|
--color-reaction-active-bg: var(--color-primary-alpha-30);
|
|
--color-reaction-hover-bg: var(--color-primary-alpha-40);
|
|
--color-tooltip-text: #ffffff;
|
|
--color-tooltip-bg: #000000f0;
|
|
--color-nav-bg: var(--elevation-0);
|
|
--color-nav-hover-bg: var(--steel-600);
|
|
--color-nav-text: var(--color-text);
|
|
--color-secondary-nav-bg: var(--color-body);
|
|
|
|
/* Elementos de etiquetas */
|
|
--color-label-text: #fff;
|
|
--color-label-bg: var(--steel-600);
|
|
--color-label-hover-bg: var(--steel-550);
|
|
--color-label-active-bg: var(--steel-500);
|
|
--color-label-bg-alt: var(--steel-550);
|
|
|
|
/* Cores de destaque e acento */
|
|
--color-accent: var(--color-primary-dark-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-highlight-fg: var(--color-primary-dark-2);
|
|
--color-highlight-bg: var(--color-primary-alpha-20);
|
|
|
|
/* Overlays e padrões */
|
|
--color-overlay-backdrop: #080808c0;
|
|
--checkerboard-color-1: #474747;
|
|
--checkerboard-color-2: #313131;
|
|
|
|
/* Configurações globais */
|
|
accent-color: var(--color-primary);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/*
|
|
* Ajustes para elementos específicos de UI
|
|
*/
|
|
|
|
/* Inversão de emojis escuros para legibilidade */
|
|
.emoji[aria-label="check mark"],
|
|
.emoji[aria-label="currency exchange"],
|
|
.emoji[aria-label="TOP arrow"],
|
|
.emoji[aria-label="END arrow"],
|
|
.emoji[aria-label="ON! arrow"],
|
|
.emoji[aria-label="SOON arrow"],
|
|
.emoji[aria-label="heavy dollar sign"],
|
|
.emoji[aria-label="copyright"],
|
|
.emoji[aria-label="registered"],
|
|
.emoji[aria-label="trade mark"],
|
|
.emoji[aria-label="multiply"],
|
|
.emoji[aria-label="plus"],
|
|
.emoji[aria-label="minus"],
|
|
.emoji[aria-label="divide"],
|
|
.emoji[aria-label="curly loop"],
|
|
.emoji[aria-label="double curly loop"],
|
|
.emoji[aria-label="wavy dash"],
|
|
.emoji[aria-label="paw prints"],
|
|
.emoji[aria-label="musical note"],
|
|
.emoji[aria-label="musical notes"] {
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
}
|
|
|
|
/* Cor de ícones cinza */
|
|
i.grey.icon.icon.icon.icon {
|
|
color: var(--steel-350) !important;
|
|
}
|
|
|
|
/* Menus verticais */
|
|
.ui.secondary.vertical.menu {
|
|
border-radius: 0.28571429rem !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Botões primários em menus */
|
|
.ui.basic.primary.button.item {
|
|
background-color: var(--color-active) !important;
|
|
color: var(--color-text) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Etiquetas primárias e contadores */
|
|
.ui.red.label.notification_count,
|
|
.ui.primary.label,
|
|
.ui.primary.labels .label {
|
|
background-color: var(--color-primary) !important;
|
|
color: var(--color-primary-contrast) !important;
|
|
}
|
|
|
|
/* Separadores em comentários */
|
|
.repository.view.issue .comment-list .code-comment + .code-comment {
|
|
margin: 1.25rem 0 !important;
|
|
padding-top: 1.25rem !important;
|
|
border-top-color: var(--steel-650) !important;
|
|
}
|
|
|
|
/* Ícones em botões */
|
|
.ui.labeled.icon.buttons > .button > .icon,
|
|
.ui.labeled.icon.button > .icon {
|
|
background-color: var(--color-light) !important;
|
|
}
|
|
|
|
/* Contadores de comentários */
|
|
#review-box .review-comments-counter {
|
|
background-color: var(--color-shadow) !important;
|
|
color: var(--color-white) !important;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
/* Etiquetas básicas */
|
|
.ui.basic.labels .primary.label,
|
|
.ui.ui.ui.basic.primary.label {
|
|
color: var(--color-primary) !important;
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
/* Etiquetas de status pendente */
|
|
.ui.basic.yellow.label.pending-label {
|
|
background: var(--color-light) !important;
|
|
color: var(--color-yellow) !important;
|
|
border-color: var(--color-yellow) !important;
|
|
}
|
|
|
|
/* Seleção de texto */
|
|
::selection {
|
|
background: var(--color-primary-alpha-40) !important;
|
|
color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
/* Destacando diferentes tipos de atenção */
|
|
strong.attention-important,
|
|
svg.attention-important {
|
|
color: var(--color-violet-light) !important;
|
|
}
|
|
|
|
strong.attention-note,
|
|
svg.attention-note {
|
|
color: var(--color-blue-light) !important;
|
|
}
|
|
|
|
strong.attention-caution,
|
|
svg.attention-caution {
|
|
color: var(--color-red-light) !important;
|
|
}
|
|
|
|
/* Botões vermelhos para ações destrutivas */
|
|
.ui.basic.red.button {
|
|
background-color: var(--color-red) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.ui.basic.red.button:hover,
|
|
.ui.basic.red.button:focus {
|
|
background-color: var(--color-red-dark-1) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.ui.basic.red.button:active {
|
|
background-color: var(--color-red-dark-2) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
/* Botões primários com efeitos hover melhorados */
|
|
.ui.primary.button {
|
|
background-color: var(--color-primary) !important;
|
|
color: var(--color-primary-contrast) !important;
|
|
}
|
|
|
|
.ui.primary.button:hover {
|
|
background-color: var(--color-primary-dark-1) !important;
|
|
}
|
|
|
|
.ui.primary.button:active {
|
|
background-color: var(--color-primary-dark-2) !important;
|
|
}
|
|
|
|
/* Links com melhor visibilidade */
|
|
a:not(.ui.button):not(.item) {
|
|
color: var(--color-primary-dark-1) !important;
|
|
}
|
|
|
|
a:not(.ui.button):not(.item):hover {
|
|
color: var(--color-primary-dark-2) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* Destacando o item ativo nos menus */
|
|
.ui.menu .active.item {
|
|
background-color: var(--color-hover) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Melhorando o contraste de badges */
|
|
.ui.label:not(.basic) {
|
|
background-color: var(--steel-600) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
/* Destacando notificações com o Ocre DATAWARE */
|
|
.ui.orange.label,
|
|
.ui.orange.labels .label {
|
|
background-color: var(--color-yellow) !important;
|
|
color: var(--color-black) !important;
|
|
}
|