/* ==========================================================================
IPDS — Info Plus Design System
File: ipds.css
Version: 1.0.2 (remover height: 25px !important global de input/select)
--------------------------------------------------------------------------
Componentes próprios do design system Info Plus.
MUDANÇAS DA v1.0.1 → v1.0.2:
• Regra global "input:not(.cbox), select:not(.cbox) { height: 25px
!important }" foi modernizada: agora usa var(--ipds-input-height)
(32px) e SEM !important. Antes, esse !important global vencia até
componentes específicos (.divFormField input, .chosen-search input)
e fixava todos os inputs em 25px, criando inconsistência visual
(Chosen em 32px ao lado de inputs nativos em 25px). Agora a
altura padrão é 32px para tudo, e componentes podem override
via especificidade normal.
MUDANÇAS DA v1.0.0 → v1.0.1:
• .iconeDialogTitle e .textoDialogTitle: removido `float: left`
(conflitava com display: flex do .ui-dialog-title), corrigido
tamanho da fonte (sm → md), adicionado color/text-decoration
explícitos para o não herdar visual de link.
ESCOPO DESTE ARQUIVO:
• Componentes reusáveis migrados do index.css antigo (dialog, accordion,
treeview, menu flutuante, splitter, tabs verticais, etc)
• Overrides de classes .ui-* específicos da aplicação Info Plus
• Animações e estados de UX genéricos
• Reset complementar de form (input/textarea focus)
• Componentes de tela: títulos, cabeçalhos, formulário multíplo,
formulário simples, tela grid formulário, dashboards
FORA DO ESCOPO:
• Tokens (em ipds.tokens.css)
• Tema do jQuery UI (em jquery-ui.ipds.theme.css)
• Material Symbols (em material-symbols.css)
• Componentes do Grid (em grid.css)
• Componentes de Form base (em formField.css)
• Shell da aplicação (em index.css)
• Componentes novos (KPI, gradient cards, sidebar, action chips,
calendário, hero panel) — virão na Entrega 3.4
DEPENDE DE: ipds.tokens.css
ÍNDICE:
1. Reset complementar de form
2. Títulos de tela e cabeçalhos
3. Form fields — extensões e overrides
4. Botões genéricos (.buttonRedondo, etc)
5. Animações de UX
6. Tabs verticais
7. Combobox customizado (.custom-combobox)
8. Accordion (.ip-accordion)
9. Autocomplete e opções
10. Menu genérico
11. Treeview / highchecktree
12. Splitter
13. Dialog — classes auxiliares e overrides
14. Menu Flutuante (Info Plus Menu)
15. Utilitários (.bordaInferiorSeparador, .imgCentroButton, etc)
16. Responsivo — Tablet (até 768px)
17. Responsivo — Mobile (até 480px)
COMPATIBILIDADE COM HTML EXISTENTE: 100%
Todas as classes mantêm os mesmos nomes do index.css antigo. HTML não
precisa de nenhuma mudança.
========================================================================== */
/* ==========================================================================
1. RESET COMPLEMENTAR DE FORM
--------------------------------------------------------------------------
Estados focus globais para input e textarea. O formField.css tem o
estilo base; aqui temos só o focus border que é global.
========================================================================== */
input[type=radio] {
height: 20px !important;
}
/* Altura default para inputs/selects da página inteira.
Substituímos o "height: 25px !important" legado por --ipds-input-height
(32px) e removemos o !important: assim componentes específicos
(formField, chosen, etc.) podem definir sua própria altura via
especificidade normal, sem precisar de hacks. */
input:not(.cbox), select:not(.cbox) {
height: var(--ipds-input-height);
outline: none;
border-radius: var(--ipds-input-radius);
background-color: var(--ipds-input-bg);
}
input:focus {
border: 1px solid var(--ipds-border-focus);
}
textarea:focus {
border: 1px solid var(--ipds-border-focus);
}
textarea {
resize: none;
outline: none;
border-radius: var(--ipds-input-radius);
background-color: var(--ipds-input-bg);
}
label > span {
font-family: var(--ipds-font-sans);
font-size: 12px;
vertical-align: top;
}
div > label {
margin-bottom: 10px;
}
fieldset {
margin: 0px;
}
legend {
color: var(--ipds-text-primary) !important;
font-family: var(--ipds-font-sans);
font-weight: var(--ipds-font-weight-bold);
font-size: var(--ipds-font-size-xs);
float: none !important;
}
/* ==========================================================================
2. TÍTULOS DE TELA E CABEÇALHOS
========================================================================== */
.tituloTela {
color: var(--ipds-text-primary) !important;
font-size: var(--ipds-font-size-xl);
font-family: var(--ipds-font-display);
font-weight: var(--ipds-font-weight-bold);
text-shadow: -3px -3px 0px var(--ipds-color-navy-200);
}
.subTituloTela {
color: var(--ipds-text-secondary) !important;
font-size: var(--ipds-font-size-lg);
font-family: var(--ipds-font-display);
font-weight: var(--ipds-font-weight-bold);
}
.tituloInfoPlus {
color: var(--ipds-text-primary);
font-weight: var(--ipds-font-weight-bold);
}
.aTitulo {
color: var(--ipds-text-primary);
font-family: var(--ipds-font-display);
font-size: var(--ipds-font-size-md);
font-weight: var(--ipds-font-weight-bold);
}
/* Cabeçalho de tela genérico (com imagem + título + subtítulo) */
.divCabecalho {
display: flex;
align-items: center;
gap: 25px;
height: 90px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.divCabecalhoTextos {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
min-width: 0;
}
.divCabecalho .cabecalhoImagem {
display: block;
max-height: 100%;
width: auto;
}
.divCabecalho .tituloTela,
.divCabecalho .subTituloTela {
text-align: left;
margin: 0;
}
.containerCabecalho {
width: 100%;
float: left;
border-bottom: 1px solid var(--ipds-border-default);
}
.containerMenu {
float: left;
border: 1px solid var(--ipds-border-default);
border-top: none;
}
/* ==========================================================================
3. FORM FIELDS — EXTENSÕES E OVERRIDES
--------------------------------------------------------------------------
O formField.css tem a base. Aqui estão extensões que vinham do index.css.
========================================================================== */
.nomeCampo {
color: var(--ipds-text-primary);
font-weight: var(--ipds-font-weight-bold);
display: inline-block;
}
.nomeCampoExcluir {
color: var(--ipds-color-red-500) !important;
}
.divFormField {
cursor: default;
display: inline-block;
vertical-align: top;
}
/* TextArea container deve crescer com o textarea */
.divFormField:has(textarea) {
display: block;
height: auto;
}
.formularioCampoExcluir {
background-color: var(--ipds-color-red-500);
}
.fieldsetRadioFormularioCampo {
padding: 0;
display: inline-block;
vertical-align: top;
height: 100%;
width: calc(100% - 25px);
margin: 0px;
}
.divContainerElementoFormulario {
position: relative;
}
.divContainerFormularioCampo {
float: left;
}
/* SelectArrow customizado (legado, possivelmente substituído pelo Chosen) */
select.selectArrow {
background-image:
linear-gradient(45deg, transparent 50%, var(--ipds-color-blue-500) 50%),
linear-gradient(135deg, var(--ipds-color-blue-500) 50%, transparent 50%),
linear-gradient(to bottom, var(--ipds-color-blue-50), var(--ipds-color-blue-50));
background-position:
calc(100% - 10px) calc(1em - 2px),
calc(100% - 5px) calc(1em - 2px),
100% 0;
background-size: 5px 5px, 5px 5px, 2em 3.5em;
background-repeat: no-repeat;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top-right-radius: var(--ipds-radius-sm);
border-bottom-right-radius: var(--ipds-radius-sm);
}
/* ==========================================================================
4. BOTÕES GENÉRICOS
========================================================================== */
.buttonRedondo {
border-radius: var(--ipds-radius-full);
padding: 0px;
position: relative;
}
.buttonRedondo:focus {
outline: none;
}
.buttonRedondo::-moz-focus-inner {
border: 0;
}
.imgTelaImagemClicavel {
cursor: pointer;
}
.imgCentroButton {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* ==========================================================================
5. ANIMAÇÕES DE UX
========================================================================== */
/* Sombra animada em hover (botões/imagens com destaque) */
@keyframes sombraImagemAnimacaoHover {
from { box-shadow: none; }
to { box-shadow: 0 8px 20px rgba(10, 22, 40, 0.20); }
}
.sombraImagemAnimacao:hover {
animation: sombraImagemAnimacaoHover 1.0s 1 forwards;
}
.sombraImagemAnimacao:active {
transform: scale(0.98);
box-shadow: var(--ipds-shadow-md);
}
/* Brilho pulsante em formulários "apontados" (destaque guiado de tutorial) */
.formularioCampoApontado {
animation: brilho 1.5s infinite alternate;
}
@keyframes brilho {
from {
text-shadow:
0 0 10px var(--ipds-color-white),
0 0 20px var(--ipds-color-white),
0 0 30px var(--ipds-color-gold-300),
0 0 40px var(--ipds-color-gold-400),
0 0 50px var(--ipds-color-gold-500),
0 0 60px var(--ipds-color-gold-500),
0 0 70px var(--ipds-color-gold-500);
}
to {
text-shadow:
0 0 5px var(--ipds-color-white),
0 0 10px var(--ipds-color-gold-100),
0 0 15px var(--ipds-color-gold-100),
0 0 20px var(--ipds-color-gold-100),
0 0 25px var(--ipds-color-gold-100),
0 0 30px var(--ipds-color-gold-100),
0 0 35px var(--ipds-color-gold-100);
}
}
/* ==========================================================================
6. TABS VERTICAIS
--------------------------------------------------------------------------
Override do .ui-tabs do jQuery UI quando aplicada classe .ui-tabs-vertical.
========================================================================== */
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
/* ==========================================================================
7. COMBOBOX CUSTOMIZADO (.custom-combobox)
========================================================================== */
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
/* ==========================================================================
8. ACCORDION (.ip-accordion)
--------------------------------------------------------------------------
Marker class. O estilo principal vem do jquery-ui.ipds.theme.css.
========================================================================== */
.ip-accordion {
cursor: pointer;
}
.ui-accordion-content + .ip-accordion {
margin-top: 16px;
}
/* ==========================================================================
9. AUTOCOMPLETE E OPÇÕES
========================================================================== */
.ui-autocomplete {
z-index: 9999;
}
.flatpickr-calendar {
z-index: 999999 !important;
}
.containerAutoComplete {
background-color: var(--ipds-bg-surface);
border: 1px solid var(--ipds-border-default);
border-radius: var(--ipds-input-radius);
box-shadow: var(--ipds-shadow-md);
}
.opcaoAutoComplete:hover {
background-color: var(--ipds-state-hover-bg);
}
.opcaoAutoComplete:active {
transform: translateY(2px);
}
/* ==========================================================================
10. MENU GENÉRICO (context menu, dropdown simples)
========================================================================== */
.menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid var(--ipds-border-default);
white-space: nowrap;
font-family: var(--ipds-font-sans);
background: var(--ipds-bg-surface);
color: var(--ipds-text-primary);
border-radius: var(--ipds-radius-sm);
padding: 0;
}
.menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: var(--ipds-transition-base);
user-select: none;
}
.menu li:hover {
background-color: var(--ipds-state-hover-bg);
}
/* ==========================================================================
11. TREEVIEW / HIGHCHECKTREE
--------------------------------------------------------------------------
Componente da lib highchecktree. As imagens ficam no caminho original
(jquery/images/checktree_icon.png) — a refatoração não troca os PNGs do
sprite. Ver Entrega 4 para migração para Material Symbols.
========================================================================== */
.treeview {
width: 100%;
display: flow-root;
}
.treeview, .treeview * {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.treeview ul {
margin-top: 5px;
margin-bottom: 5px;
}
li.treeview {
padding-top: 0px;
padding-bottom: 0px;
float: left;
width: 100%;
list-style-type: none;
overflow: hidden;
white-space: nowrap;
}
.treeview.arrow {
height: 14px;
width: 14px;
margin-top: 5px;
margin-right: 8px;
margin-bottom: 0px;
margin-left: 8px;
cursor: pointer;
float: left;
background-image: url(jquery/images/checktree_icon.png);
background-repeat: no-repeat;
}
.treeview.arrow.collapsed { background-position: 0px -22px; }
.treeview.arrow.expanded { background-position: -14px -22px; }
.treeview.arrow.no-children {
background-image: none;
cursor: auto;
}
.treeview.checkbox {
height: 18px;
width: 18px;
cursor: pointer;
float: left;
margin-right: 7px;
background-image: url(jquery/images/checktree_icon.png);
background-repeat: no-repeat;
}
.treeview.checkbox.unchecked { background-position: 1px 0px; }
.treeview.checkbox.partiallyChecked { background-position: -31px 0px; }
.treeview.checkbox.checked { background-position: -15px 0px; }
.treeview label {
cursor: pointer;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 0px;
font-size: var(--ipds-font-size-xs);
line-height: 15px;
vertical-align: middle;
font-family: var(--ipds-font-sans);
display: inline-flex;
height: auto;
}
/* ==========================================================================
12. SPLITTER (.splitter_panel)
========================================================================== */
.splitter_panel {
position: relative;
}
.splitter_panel .vsplitter {
background-color: var(--ipds-border-default);
cursor: col-resize;
z-index: 1;
width: 5px;
}
.splitter_panel .hsplitter {
background-color: var(--ipds-border-default);
cursor: row-resize;
z-index: 800;
height: 5px;
}
.splitter_panel .vsplitter.splitter-invisible,
.splitter_panel .hsplitter.splitter-invisible {
background: none;
}
.splitter_panel .vsplitter,
.splitter_panel .left_panel,
.splitter_panel .right_panel,
.splitter_panel .hsplitter,
.splitter_panel .top_panel,
.splitter_panel .bottom_panel,
.splitter_panel .horizontal_panel,
.splitter_panel .vertical_panel {
position: absolute;
overflow: auto;
}
.splitter_panel .vsplitter,
.splitter_panel .left_panel,
.splitter_panel .right_panel,
.splitter_panel .vertical_panel {
height: 100%;
}
.splitter_panel .hsplitter,
.splitter_panel .top_panel,
.splitter_panel .bottom_panel,
.splitter_panel .horizontal_panel {
width: 100%;
}
.splitter_panel .top_panel,
.splitter_panel .left_panel,
.splitter_panel .vsplitter,
.splitter_panel .vertical_panel {
top: 0;
}
.splitter_panel .top_panel,
.splitter_panel .bottom_panel,
.splitter_panel .left_panel,
.splitter_panel .hsplitter,
.splitter_panel .horizontal_panel {
left: 0;
}
.splitter_panel .bottom_panel { bottom: 0; }
.splitter_panel .right_panel { right: 0; }
.splitterMask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.gutter-horizontal {
cursor: col-resize;
}
/* ==========================================================================
13. DIALOG — CLASSES AUXILIARES E OVERRIDES
--------------------------------------------------------------------------
O estilo base do .ui-dialog vem de jquery-ui.ipds.theme.css.
Aqui são as classes auxiliares específicas do uso do dialog no SIGAME.
========================================================================== */
.ui-dialog-buttonpane {
background-color: var(--backgroundDialogPane);
}
.ui-dialog .ui-dialog-buttonpane button {
height: 33px !important;
}
/* DEPRECATED v2.5+: as dimensões e posicionamento dos botões da titlebar
agora são definidos exclusivamente em ipds.dialog.css com !important.
Bloco mantido vazio para histórico — pode ser removido em uma futura
limpeza do ipds.css. */
/* Remove outline de foco em links dentro de dialogs */
.ui-dialog-content a:focus {
outline: none;
}
/* Ícone dentro de botão do dialog */
.iconeBotaoDialog {
float: left;
max-height: 16px;
margin-right: 5px;
}
/* Ícone do título do dialog (injetado pelo wrapper Dialog quando há ícone) */
.iconeDialogTitle {
height: 20px;
width: auto;
flex-shrink: 0;
vertical-align: middle;
}
/* Texto do título do dialog (injetado pelo wrapper Dialog).
É um , por isso precisa de color/text-decoration explícitos
para não herdar visual de link (azul/sublinhado). */
.textoDialogTitle {
font-size: var(--ipds-font-size-md);
font-weight: var(--ipds-font-weight-semibold);
line-height: 1.4;
color: var(--ipds-text-on-dark);
text-decoration: none;
cursor: default;
}
.textoDialogTitle:hover,
.textoDialogTitle:focus,
.textoDialogTitle:visited {
color: var(--ipds-text-on-dark);
text-decoration: none;
}
/* Imagem de resposta servlet (aviso/erro) */
.imgRespostaServlet {
float: left;
max-width: 80px;
margin-right: 5px;
}
/* Parágrafo de resposta servlet */
.paragrafoRespostaServlet {
font-size: var(--ipds-font-size-md);
line-height: 1.4;
display: block;
overflow: hidden;
width: calc(100% - 47px);
float: right;
}
/* Imagem em dialog de confirmação */
.imgDialogConfirmacao {
float: left;
margin-right: 10px;
}
/* Container do dialog de ajuda */
.containerDialogAjuda {
height: 100%;
width: 100%;
float: left;
}
/* ==========================================================================
14. MENU FLUTUANTE (Info Plus Menu)
--------------------------------------------------------------------------
Componente lateral com avatar/menu de configurações do usuário.
========================================================================== */
/* Wrapper externo - controla posição, não tem overflow */
.menuFlutuanteWrapper {
z-index: 1002;
top: 0;
position: absolute;
}
/* Menu interno - conteúdo scrollável */
.menuFlutuante {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
box-shadow: var(--ipds-shadow-lg);
background-color: var(--ipds-bg-surface);
}
.iconeMenuFlutuante {
width: 24px;
position: absolute;
right: -35px;
top: 10px;
cursor: pointer;
z-index: 1;
}
.tituloMenuFlutuante {
width: 100%;
text-align: center;
margin-top: 50px;
display: inline-block;
color: var(--ipds-color-blue-500);
font-size: 12px;
font-weight: var(--ipds-font-weight-bold);
}
.subtituloMenuFlutuante {
width: 100%;
margin-left: 5px;
margin-top: 5px;
display: inline-block;
color: var(--ipds-color-blue-500);
font-size: 9px;
text-align: center;
}
.separadorMenuFlutuante {
width: 65%;
margin-top: 50px;
background-color: var(--ipds-border-default);
height: 1px;
border: none;
}
.buttonMenuFlutuante {
margin-left: 10px;
margin-top: 5px;
cursor: pointer;
}
/* ==========================================================================
15. UTILITÁRIOS
========================================================================== */
/* Separador horizontal abaixo de cabeçalhos de tela/dialog */
.bordaInferiorSeparador {
border-bottom: 1px solid var(--ipds-border-default);
margin-bottom: 10px;
padding-bottom: 5px;
}
/* Container genérico com borda padrão */
.containerElementoPaginaPrincipal {
border-color: var(--ipds-border-default);
border-style: solid;
border-radius: 0.2em;
border-width: 0.05em;
}
.containerRecursos {
height: 90%;
}
/* Estado: recurso selecionado em menu/lista */
.recursoSelecionado {
text-decoration: underline;
font-weight: var(--ipds-font-weight-bold);
}
/* Marker class — borda padrão da aplicação */
.corBordaPadrao {
border-color: var(--ipds-border-default) !important;
}
/* Input invisível (usado para foco programático) */
.textFieldInvisivel {
border: none !important;
background: transparent !important;
}
/* Container com checkboxes em popup */
.containerCheckboxesSelectBox {
box-shadow: var(--ipds-shadow-lg);
font-weight: var(--ipds-font-weight-bold);
}
/* ==========================================================================
16. RESPONSIVO — TABLET (até 768px)
--------------------------------------------------------------------------
Apenas regras que mexem em componentes deste arquivo. Componentes do Grid
têm seus media queries em grid.css; form fields em formField.css; shell
em index.css.
========================================================================== */
@media (max-width: 768px) {
/* ========== DIALOG — Fullscreen no mobile ========== */
.ui-dialog {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
border-radius: 0;
display: flex;
flex-direction: column;
}
.ui-dialog-titlebar {
flex-shrink: 0;
padding: 5px 8px !important;
min-height: 28px !important;
height: auto !important;
display: flex !important;
align-items: center !important;
}
.ui-dialog-content {
flex: 1 1 auto;
overflow-y: auto;
height: auto !important;
max-height: none;
min-height: 0;
padding-bottom: 10px !important;
}
/* Container do dialog precisa de position relative para o menu flutuante */
.ui-dialog-content > div {
position: relative;
}
.ui-dialog-buttonpane {
flex-shrink: 0;
position: relative;
background: var(--backgroundDialogPane);
padding: 10px;
box-shadow: 0 -2px 5px rgba(10, 22, 40, 0.20);
}
/* ========== DIALOG — Botões responsivos ========== */
.ui-dialog-buttonset {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100% !important;
justify-content: center !important;
}
.ui-dialog-buttonset .ui-button {
flex: 1 1 auto !important;
min-width: 100px !important;
max-width: 100% !important;
height: 40px !important;
font-size: 13px !important;
margin: 0 !important;
}
.ui-dialog-buttonset .ui-button img {
max-height: 18px !important;
margin-right: 5px !important;
}
/* Botões extras (informação, ajuda, clonar) — esconder no mobile */
.ui-dialog-buttonset-extra {
display: none !important;
}
/* Botão de fechar (X) no titlebar - tamanho reduzido */
.ui-dialog-titlebar-close {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
position: absolute !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
padding: 1px !important;
margin: 0 !important;
}
.ui-dialog-titlebar-close .ui-icon {
width: 12px !important;
height: 12px !important;
}
/* Botão de ajuda (?) no titlebar */
.ui-dialog-titlebar-help {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
position: absolute !important;
right: 28px !important;
top: 50% !important;
transform: translateY(-50%) !important;
padding: 1px !important;
margin: 0 !important;
}
.ui-dialog-titlebar-help .ui-icon {
width: 12px !important;
height: 12px !important;
}
/* Texto do título */
.ui-dialog-title {
font-size: 12px !important;
line-height: 18px !important;
flex: 1 !important;
padding-right: 55px !important;
display: flex !important;
align-items: center !important;
}
.ui-dialog-title img.iconeDialogTitle {
max-height: 16px !important;
margin-right: 5px !important;
vertical-align: middle !important;
}
.ui-dialog-title a {
font-size: 13px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Imagens de aviso/confirmação no dialog */
.imgRespostaServlet {
max-width: 60px !important;
max-height: 60px !important;
margin-right: 10px !important;
}
.paragrafoRespostaServlet {
font-size: 13px !important;
line-height: 1.4 !important;
}
/* ========== TÍTULO — Responsivo genérico ========== */
.tituloTela {
font-size: var(--ipds-font-size-lg) !important;
text-shadow: -2px -2px 0px var(--ipds-color-navy-200) !important;
}
.subTituloTela {
font-size: 13px !important;
}
/* Cabeçalho de telas responsivo */
.divCabecalho {
height: auto !important;
min-height: 60px;
gap: 15px;
padding: 8px;
}
.divCabecalho .cabecalhoImagem {
max-height: 50px;
height: auto !important;
width: auto !important;
}
.divCabecalho .tituloTela {
font-size: clamp(14px, 4vw, 18px) !important;
}
.divCabecalho .subTituloTela {
font-size: clamp(11px, 3vw, 13px) !important;
}
/* ========== DIALOG — Conteúdo do menu rodapé (Perfil Usuário) ========== */
.divConteudoMenuRodape {
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: 100%;
}
.divConteudoMenuRodape > div:not([class*="ui-jqgrid"]):not([id*="gview"]):not([id*="gbox"]):not([style*="text-align: center"]):not([style*="z-index: 1002"]) {
float: none !important;
width: 100% !important;
height: auto !important;
margin-left: 0 !important;
}
.divConteudoMenuRodape img:not([class*="ui-"]):not(.imgPagerButton):not(.imgFiltroGrid):not(.btnTogglePager) {
display: block;
margin: 0 auto 10px auto !important;
float: none !important;
}
.divConteudoMenuRodape .imgFiltroGrid {
margin-bottom: 5px;
}
.divFormFieldsPerfilUsuario {
width: 100% !important;
float: none !important;
}
.divFormFieldsPerfilUsuario > span {
width: 100% !important;
margin-left: 0 !important;
text-align: center !important;
}
.divConteudoMenuRodape > a,
.divConteudoMenuRodape > div > a:not([style*="inline"]) {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center;
margin: 0 0 10px 0 !important;
}
.divConteudoMenuRodape label {
display: block !important;
width: 100% !important;
float: none !important;
margin-bottom: 8px !important;
}
.divConteudoMenuRodape label > span {
display: block !important;
width: 100% !important;
text-align: left !important;
margin-bottom: 3px !important;
}
.divConteudoMenuRodape label > input,
.divConteudoMenuRodape label > select,
.divConteudoMenuRodape label > textarea {
width: 100% !important;
max-width: 100% !important;
}
.divConteudoMenuRodape .ui-jqgrid {
width: 100% !important;
max-width: 100% !important;
}
.divConteudoMenuRodape .ui-jqgrid-bdiv {
max-height: 200px !important;
overflow-y: auto;
}
/* Paginador customizado no dialog do menu rodapé */
.divConteudoMenuRodape div[style*="text-align: center"][style*="margin-left: auto"] {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.divConteudoMenuRodape .divPagerButton {
float: none !important;
}
.divConteudoMenuRodape div[style*="text-align: center"][style*="margin-left: auto"] > a {
margin-top: 0 !important;
}
/* Contador de registros - não quebrar linha */
.divConteudoMenuRodape div[style*="float: right"][style*="font-size: 11px"][style*="font-weight: bold"] {
white-space: nowrap;
min-width: 170px;
text-align: right !important;
}
/* ========== TABS RESPONSIVAS ========== */
.ui-tabs {
width: 100% !important;
height: auto !important;
}
.ui-tabs > .ui-tabs-nav {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
float: none !important;
}
.ui-tabs > .ui-tabs-nav > li {
flex-shrink: 0 !important;
float: none !important;
clear: none !important;
margin: 0 2px 0 0 !important;
white-space: nowrap !important;
}
.ui-tabs > .ui-tabs-nav > li > a {
padding: 8px 12px !important;
font-size: 12px !important;
min-height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ui-tabs > .ui-tabs-panel {
width: 100% !important;
float: none !important;
padding: 10px !important;
overflow-x: auto !important;
}
/* Tabs verticais - converter para horizontal no mobile */
.ui-tabs-vertical {
width: 100% !important;
}
.ui-tabs-vertical .ui-tabs-nav {
float: none !important;
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: none !important;
width: auto !important;
border-bottom-width: 0 !important;
border-right-width: 1px !important;
margin: 0 2px 0 0 !important;
}
.ui-tabs-vertical .ui-tabs-panel {
float: none !important;
width: 100% !important;
}
/* ========== SPLITTER RESPONSIVO ========== */
/* Apenas para splitters dentro de .divCorpoSplitter (dialogs) */
.divCorpoSplitter .vsplitter,
.divCorpoSplitter .hsplitter {
display: none !important;
}
.divCorpoSplitter .left_panel,
.divCorpoSplitter .right_panel,
.divCorpoSplitter .top_panel,
.divCorpoSplitter .bottom_panel {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 200px !important;
max-height: 400px !important;
overflow: auto !important;
}
.divCorpoSplitter .right_panel,
.divCorpoSplitter .bottom_panel {
margin-top: 10px !important;
border-top: 1px solid var(--ipds-border-default) !important;
padding-top: 10px !important;
}
.divCorpoSplitter {
display: flex !important;
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
}
/* ========== TELA GRID FORMULÁRIO ========== */
.divContainerParametrosConsultaTelaGridFormulario:not([style*="height: 0"]):not([style*="height:0"]) {
flex-wrap: wrap !important;
padding: 10px !important;
padding-left: 10px !important;
height: auto !important;
max-height: none !important;
}
.imgParametrosConsultaTelaGridFormulario {
display: none !important;
}
.divFormFieldsParametrosConsultaTelaGridFormulario {
width: 100% !important;
height: auto !important;
flex-grow: 0 !important;
order: 1 !important;
}
.divButtonsParametrosConsultaTelaGridFormulario {
width: 100% !important;
height: auto !important;
float: none !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 10px !important;
border-left: none !important;
border-top: 1px solid var(--ipds-border-default) !important;
padding: 10px 0 !important;
margin-top: 10px !important;
justify-content: center !important;
order: 2 !important;
}
.divContainerGridTelaGridFormulario {
margin-top: 5px !important;
height: calc(100% - 20px) !important;
padding-bottom: 10px !important;
display: flex !important;
flex-direction: column !important;
}
.divContainerGridTelaGridFormulario .ui-jqgrid {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
.divContainerGridTelaGridFormulario .ui-jqgrid-view {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
.divContainerGridTelaGridFormulario .ui-jqgrid-bdiv {
flex: 1 !important;
height: auto !important;
min-height: 100px !important;
max-height: none !important;
overflow-y: auto !important;
}
.divContainerGridTelaGridFormulario .ui-jqgrid-pager,
.divContainerGridTelaGridFormulario .divContainerPagerButtons {
flex-shrink: 0 !important;
}
/* ========== DASHBOARDS ========== */
/* Container de form fields do dashboard */
.divFormFieldsDashboard {
flex-direction: column !important;
align-items: stretch !important;
}
.divFormFieldsDashboard .divFormField {
width: 100% !important;
}
.divFormFieldsDashboard .telaButton,
.divFormFieldsDashboard button {
width: 100% !important;
margin-left: 0 !important;
margin-top: 5px !important;
}
/* Cards do dashboard */
.divCardsDashboard {
flex-direction: column !important;
}
.divCardsDashboard > div {
width: 100% !important;
min-width: 100% !important;
}
/* Container de gráficos */
.divGraficosDashboard {
flex: 1 1 auto !important;
overflow: visible !important;
min-height: auto !important;
}
.divGraficosWrapperDashboard {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
height: auto !important;
min-height: auto !important;
padding-bottom: 20px !important;
}
.divGraficosWrapperDashboard > div {
width: 100% !important;
min-height: 450px !important;
height: 450px !important;
flex-shrink: 0 !important;
display: block !important;
}
.divGraficosWrapperDashboard > div:first-child {
min-height: 550px !important;
height: 550px !important;
}
/* Dashboard Ordem de Serviço */
.divFormFieldsDashboardOS {
height: auto !important;
min-height: 50px !important;
padding: 10px 0 !important;
}
.divCardsDashboardOS {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
gap: 10px !important;
}
.cardDashboardOS {
width: calc(50% - 10px) !important;
float: none !important;
margin-right: 0 !important;
min-height: 60px !important;
padding: 8px !important;
box-sizing: border-box !important;
}
.divGraficosDashboardOS {
height: auto !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
padding-bottom: 20px !important;
}
.graficoWrapperDashboardOS {
width: 100% !important;
height: 350px !important;
float: none !important;
margin: 0 !important;
}
.graficoBarrasDashboardOS {
height: 450px !important;
}
.graficoPizzaDashboardOS {
height: 300px !important;
}
/* ========== FORMULARIO MULTIPLO ========== */
/* Menu lateral do FormularioMultiplo - esconder no mobile */
.ui-dialog-content > div[style*="box-shadow"][style*="position: absolute"][style*="padding-left: 10px"] {
display: none !important;
}
/* Seta para mostrar/esconder menu - esconder no mobile */
.ui-dialog-content a[style*="position: absolute"][style*="right: -35"] {
display: none !important;
}
/* Form do FormularioMultiplo - ocupar 100% */
.ui-dialog-content > form[style*="float: right"] {
width: 100% !important;
float: none !important;
padding-right: 10px !important;
padding-left: 10px !important;
}
/* Cabeçalho do FormularioMultiplo - ocupar 100% e altura auto */
.ui-dialog-content > div[style*="float: right"].bordaInferiorSeparador {
width: 100% !important;
height: auto !important;
min-height: 60px !important;
float: none !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 10px !important;
}
/* ========== CABEÇALHO DO FORMULÁRIO SIMPLES ========== */
/* Container do cabeçalho - CSS Grid para posicionar imagem e títulos */
.ui-dialog-content > form > div[style*="width: 100%"].bordaInferiorSeparador {
width: 100% !important;
height: auto !important;
min-height: 50px !important;
padding: 8px !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 10px !important;
row-gap: 0 !important;
align-items: end !important;
}
.ui-dialog-content > form > div.bordaInferiorSeparador > img {
max-height: 40px !important;
width: auto !important;
float: none !important;
grid-row: 1 / 3 !important;
grid-column: 1 !important;
align-self: center !important;
}
.ui-dialog-content > form > div.bordaInferiorSeparador > .tituloTela {
width: auto !important;
margin-left: 0 !important;
font-size: 14px !important;
float: none !important;
grid-row: 1 !important;
grid-column: 2 !important;
align-self: end !important;
text-align: left !important;
}
.ui-dialog-content > form > div.bordaInferiorSeparador > .subTituloTela {
width: auto !important;
margin-left: 0 !important;
padding-left: 0 !important;
font-size: 11px !important;
float: none !important;
grid-row: 2 !important;
grid-column: 2 !important;
align-self: start !important;
text-align: left !important;
}
/* ========== FORMULARIO CAMPO ========== */
.containerFormularioCampo {
width: 100% !important;
height: auto !important;
min-height: 45px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 5px !important;
}
.containerFormularioCampo[style*="width: calc(25%"],
.containerFormularioCampo[style*="width: calc(20%"],
.containerFormularioCampo[style*="width: calc(15%"],
.containerFormularioCampo[style*="width: calc(10%"],
.containerFormularioCampo[style*="width: calc(33%"],
.containerFormularioCampo[style*="width: calc(30%"] {
width: 50% !important;
padding: 0 3px !important;
}
.containerFormularioCampo > label {
width: 100% !important;
display: block !important;
}
.containerFormularioCampo > label > span {
font-size: 11px !important;
display: block !important;
width: 100% !important;
margin-bottom: 2px !important;
}
.containerFormularioCampo input:not([type="checkbox"]):not([type="radio"]),
.containerFormularioCampo select,
.containerFormularioCampo textarea {
width: 100% !important;
max-width: 100% !important;
font-size: 14px !important;
min-height: 32px !important;
}
.containerFormularioCampo .chosen-container .chosen-single {
height: 32px !important;
line-height: 30px !important;
}
.containerFormularioCampo > label > span + br {
display: none !important;
}
.containerFormularioCampo .telaButton,
.containerFormularioCampo button:not(.ui-datepicker-trigger) {
width: 28px !important;
height: 28px !important;
padding: 3px !important;
flex-shrink: 0 !important;
}
.containerFormularioCampo .telaButton img,
.containerFormularioCampo button:not(.ui-datepicker-trigger) img {
max-width: 18px !important;
max-height: 18px !important;
}
/* ========== ACCORDION ========== */
.ui-accordion {
width: 100% !important;
}
.ui-accordion-header {
padding: 12px 10px !important;
font-size: 13px !important;
min-height: 38px !important;
}
.ui-accordion-content {
padding: 10px 5px !important;
}
/* ========== CABEÇALHO DO FORMULÁRIO MÚLTIPLO ========== */
.ui-dialog-content .bordaInferiorSeparador {
height: auto !important;
min-height: 50px !important;
padding: 8px !important;
}
.ui-dialog-content .bordaInferiorSeparador > img {
max-height: 40px !important;
width: auto !important;
}
.ui-dialog-content .bordaInferiorSeparador > .tituloTela {
width: calc(100% - 55px) !important;
margin-left: 8px !important;
font-size: 14px !important;
float: left !important;
}
.ui-dialog-content .bordaInferiorSeparador > .subTituloTela {
width: 100% !important;
margin-left: 0 !important;
padding-left: 55px !important;
font-size: 11px !important;
float: none !important;
clear: both !important;
display: block !important;
}
/* Grid no FormularioMultiplo */
.ui-dialog-content form .ui-jqgrid {
width: 100% !important;
}
.ui-dialog-content form > .telaButton {
margin-left: 5px !important;
}
}
/* ==========================================================================
17. RESPONSIVO — TELAS MUITO PEQUENAS (até 480px)
========================================================================== */
@media (max-width: 480px) {
/* Títulos */
.tituloTela {
font-size: 14px !important;
text-shadow: -1px -1px 0px var(--ipds-color-navy-200) !important;
}
.subTituloTela {
font-size: 11px !important;
}
/* Dialog */
.ui-dialog-buttonset .ui-button {
min-width: 80px !important;
height: 38px !important;
font-size: 12px !important;
padding: 5px 8px !important;
}
.ui-dialog-titlebar {
padding: 6px 8px !important;
}
.ui-dialog-title {
font-size: 12px !important;
}
.ui-dialog-title img {
max-height: 18px !important;
}
.ui-dialog-title a {
font-size: 11px !important;
}
.imgRespostaServlet {
max-width: 50px !important;
max-height: 50px !important;
}
.paragrafoRespostaServlet {
font-size: 12px !important;
}
/* Tabs */
.ui-tabs > .ui-tabs-nav > li > a {
padding: 6px 10px !important;
font-size: 11px !important;
}
.ui-tabs > .ui-tabs-panel {
padding: 8px !important;
}
/* Dashboard EPII */
.divCardsDashboard > div {
padding: 8px !important;
min-height: 70px !important;
}
.divGraficosWrapperDashboard > div {
min-height: 400px !important;
height: 400px !important;
}
.divGraficosWrapperDashboard > div:first-child {
min-height: 500px !important;
height: 500px !important;
}
/* Dashboard OS */
.cardDashboardOS {
width: 100% !important;
}
.graficoBarrasDashboardOS {
height: 400px !important;
}
.graficoPizzaDashboardOS {
height: 280px !important;
}
/* Formulário Campo */
.containerFormularioCampo,
.containerFormularioCampo[style*="width: calc(25%"],
.containerFormularioCampo[style*="width: calc(20%"],
.containerFormularioCampo[style*="width: calc(15%"],
.containerFormularioCampo[style*="width: calc(10%"],
.containerFormularioCampo[style*="width: calc(33%"],
.containerFormularioCampo[style*="width: calc(30%"] {
width: 100% !important;
}
.containerFormularioCampo > label > span {
font-size: 10px !important;
}
.containerFormularioCampo input:not([type="checkbox"]):not([type="radio"]),
.containerFormularioCampo select,
.containerFormularioCampo textarea {
font-size: 13px !important;
min-height: 30px !important;
}
/* Accordion */
.ui-accordion-header {
padding: 10px 8px !important;
font-size: 12px !important;
min-height: 36px !important;
}
.ui-accordion-content {
padding: 8px 5px !important;
}
/* Chosen no FormulárioCampo */
.containerFormularioCampo .chosen-container .chosen-single {
height: 30px !important;
line-height: 28px !important;
font-size: 12px !important;
}
/* Botões ao lado dos campos - menores */
.containerFormularioCampo .telaButton,
.containerFormularioCampo button:not(.ui-datepicker-trigger) {
width: 26px !important;
height: 26px !important;
}
/* Cabeçalho do formulário ainda mais compacto */
.ui-dialog-content .bordaInferiorSeparador {
min-height: 40px !important;
padding: 5px !important;
}
.ui-dialog-content .bordaInferiorSeparador > img {
max-height: 30px !important;
}
.ui-dialog-content .bordaInferiorSeparador > .tituloTela {
font-size: 12px !important;
}
.ui-dialog-content .bordaInferiorSeparador > .subTituloTela {
font-size: 10px !important;
}
}