/* ------------------------------------------------------------------------------------------- */ /* Portal GHC glue for GMX 3 pages. Load after ui/gmx/gmx.min.css, with ui/portal/gmx-runtime.js. */ /* Holds the styles of the jQuery plugins that lived in the legacy ui.min.css (Pikaday, */ /* autocomplete) redrawn with GMX 3 tokens, plus the few overrides GMX 3 needs inside the portal. */ /* ------------------------------------------------------------------------------------------- */ /* Page ground: GMX 3 panels are white and borderless, so they need a gray page behind them. A step below gray-100, which is the tone of an unselected tab: with both at gray-100 the tabs dissolved into the page */ body { background: color-mix(in srgb, var(--color-gray-100) 60%, var(--color-gray-200)); } body.night-mode { background: var(--color-gray-900); } /* SimpleAjaxUploader (ui.plugins.js) appends an invisible file input with font-size 480px to : until the pointer reaches the upload button its box is thousands of pixels wide and the page scrolls sideways. It also sits, transparent and above everything, at the end of the page, where it took the clicks meant for what lies under it (the bottom .actions bar: "Relatório" opened the file picker). Hidden until the plugin first places it over its button, which writes visibility into the style attribute and takes over from there */ body > div[style*="16777270"] { max-width: 100%; } body > div[style*="16777270"]:not([style*="visibility"]) { visibility: hidden; } /* Links take the brand colour, as on legacy pages (GMX 3 makes them blue). (0,3,2) beats GMX's night rule */ a { color: var(--color-default); } body.night-mode a:not(.btn):not(.label) { color: var(--color-default-night); } /* Actions bar (.actions, bottom centre): the portal's page buttons. GMX centres it on the whole window and never wraps it, so on pages with the side menu it slid under the menu and ran off the screen with many buttons. Here it is centred on the content area, clear of the assistant FAB on both sides, wraps, and sits above page content (GMX gives it 200). The field app and the dmode frame (no .portal-shell) keep GMX's own bar */ body.portal-shell { --portal-actions-side: 74px; /* assistant FAB: 20px offset + 44px + 10px gap */ --portal-actions-mobile-min: 105px; /* phone grid cell: three per row from a 360px screen */ } body.portal-shell .actions { --actions-z-index: 8000; /* below the assistant FAB (9000), the menu (9002-9005), dialogs, pickers, growl and loading */ } /* Buttons behind permissions or conditions leave an empty bar: no glass strip for it. !important because the phone grid below is more specific */ body.portal-shell .actions:not(:has(> *)) { display: none !important; } @media (width > 900px) { body.portal-shell .actions:not(.actions-left, .actions-right, .actions-top) { --actions-x: 0; left: calc(var(--portal-shell-space) + var(--portal-actions-side)); right: var(--portal-actions-side); width: fit-content; margin-inline: auto; box-sizing: border-box; flex-wrap: wrap; justify-content: center; gap: 10px var(--actions-btn-gap); white-space: normal; } body.portal-shell.portal-shell-collapsed .actions:not(.actions-left, .actions-right, .actions-top) { left: var(--portal-actions-side); } /* A floor on the width evens out the buttons and balances the rows when the bar wraps: the twelve of a NR-12 document went from 7+5 ragged to 6+6. Buttons are never stretched (no flex-grow), so a bar that fits on one line keeps its natural size */ body.portal-shell .actions:not(.actions-left, .actions-right, .actions-top) > .btn { margin-right: 0; min-width: 130px; } /* The page's end spacers (160px) cover a one-row bar; this covers up to three rows */ body.portal-shell:has(.actions > *) > section.content { padding-bottom: 60px; } } /* Phone: a grid of buttons instead of GMX's column of full-width ones (seven buttons took 280px and scrolled). The assistant FAB would cover the last cells, so on pages with the bar it goes to the top-right corner, across from the menu FAB, and the page gets room at the end to scroll its last lines above the bar */ @media (width <= 900px) { body.portal-shell .actions:not(.actions-left, .actions-right, .actions-top) { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--portal-actions-mobile-min), 1fr)); } /* GMX keeps bar buttons on one line and clips them: in a 120px cell a long label ("Backup do documento") lost its end and pushed the icon out. Here it wraps */ body.portal-shell .actions:not(.actions-left, .actions-right, .actions-top) > .btn { white-space: normal; text-align: center; text-wrap: balance; } body.portal-shell .ai-widget-fab { right: 12px; /* the menu FAB's phone offset */ bottom: 12px; } body.portal-shell:has(.actions > *, .tools-panel) .ai-widget-fab /* .tools-panel: the NR-12 spreadsheets' own bottom bar */ { top: 16px; /* centred on the 52px menu FAB at 12px */ bottom: auto; right: 12px; } body.portal-shell:has(.actions > *) > section.content { padding-bottom: 120px; /* with the page's 160px of end spacers, the bar's 280px ceiling (GMX) */ } /* A bar with more than three buttons (gmx-runtime.js adds .actions-collapsible and the .actions-more button first) shows one row: "Mais" and the last two buttons, the page's main ones. Eight buttons took four rows, a third of the screen, over the content. Opened, it is the grid above with all of them */ body.portal-shell .actions.actions-collapsible:not(.actions-open, .actions-left, .actions-right, .actions-top) { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.portal-shell .actions.actions-collapsible:not(.actions-open) > :not(.actions-more, :nth-last-child(-n + 2)) { display: none; } } /* The "Mais" button exists only where the bar collapses */ .actions > .actions-more { display: none; } @media (width <= 900px) { body.portal-shell .actions > .actions-more { display: inline-flex; } } /* Tabs on the phone: GMX's tab list neither wraps nor scrolls, so the last tabs ("Laudos Técnicos", "Opções") were cut off at the screen edge and could not be reached. It scrolls sideways, like the tables */ @media (width <= 900px) { .tabs > .tabs-list { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .tabs > .tabs-list::-webkit-scrollbar { display: none; } .tabs > .tabs-list > a { flex-shrink: 0; } } /* Filters on the phone: gmx-runtime.js marks a grid of four or more filters .filters-collapsible and puts the .filters-more button after it. Closed, the grid shows its first field only */ .filters-more { display: none; } @media (width <= 900px) { body.portal-shell .filters-more { display: inline-flex; width: 100%; margin-bottom: 10px; } body.portal-shell .filters-collapsible:not(.filters-open) > :nth-child(n + 2) { display: none; } } /* Quick filter tiles of the list pages (status counters in Requisições de Compras, periods in Relatórios): a.dashboard-item, with

text

and an optional

count

, or .dashboard-item-single (text only, centred). .dashboard-item-active marks the filter in use. The tiles work in any grid: .dashboard fits as many 180px columns as the width allows, .grid.grid-N splits it into N equal ones */ .dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: top; grid-gap: 10px; margin-bottom: 10px; padding: 2px; } @media (width <= 900px) { .dashboard { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* two per row on the phone: twelve statuses took a screen */ } /* At half the width a one-line name ("Aguardando Recebimento") lost its end: it wraps instead */ .dashboard .dashboard-item { grid-template-columns: 1fr auto; align-items: center; grid-gap: 5px; } .dashboard .dashboard-item p { white-space: normal; } } .dashboard-item { display: grid; grid-template-columns: 1fr 60px; align-items: middle; grid-gap: 1px; border: 1px solid #ddd; padding: 10px; font-size: 13px; font-weight: bold; } .dashboard-item.dashboard-item-single { grid-template-columns: 1fr; text-align: center; } .dashboard-item p { margin: 0; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .dashboard-item .label { height: auto; min-width: 0; padding: 0 8px; font-size: 12px; line-height: 20px; } .dashboard-item.dashboard-item-active, .dashboard-item:hover { background-color: #ddd; text-decoration: none; } body.night-mode .dashboard-item.dashboard-item-active, body.night-mode .dashboard-item:hover { background-color: #222; } /* GMX gives .panel-content 20px at the sides but only --padding / 1.8 (11px) above and below, which reads as a misalignment: a field inside the panel sits closer to the bottom edge than to the sides. Squaring it here fixes every panel at once; panel-0/10/20/30 (and the -ps variants) set `padding` on .panel-content directly, so they still win over this */ .panel { --panel-content-padding-y: var(--panel-content-padding-x); } /* Form field rows (scripts/ui/form_grid.py): columns are `no-pdv` and rows are spaced by their own mgt-20. On the phone the columns stack, and no-pdv would leave the stacked fields touching: this gives them the same 20px the rows keep between them. !important to beat no-pdv's */ body.is-mobile .row.row-20:not(.row-unbreak) > [class^=col].no-pdv + [class^=col].no-pdv { padding-top: 20px !important; } /* A button in a grid cell has the width the cell gives it, so GMX's nowrap would clip the label instead of using the next line. This is the same treatment the bar gets on the phone */ .grid > .btn { white-space: normal; text-align: center; text-wrap: balance; } /* Legacy markup floats items inside panels (checkbox grids, photos); the legacy panel-content contained them */ .panel > .panel-content::after, .tabs-panels > .tab::after { content: ""; display: table; clear: both; } /* Page gutters (the legacy .container had them; GMX 3's has none) */ body > section.content > .container { padding-inline: var(--padding); } @media (width <= 900px) { body > section.content > .container { padding-inline: 10px; } } /* Tables on the phone: GMX gives every .tbl a 960px floor (--tbl-min-width-ps) and the .h-scroll around it scrolls sideways, which hid columns of tables that fit on the screen: a record sheet (label | value) showed half of its values, a four-column list only its first column. The floor now follows the column count: up to four columns none (the table fits the screen and wraps its text), five or six 640px, more keeps GMX's 960px. min() keeps a page that zeroes the variable (the field app) at zero */ body.is-mobile .tbl:not(:has(> * > tr > :nth-child(5))) { min-width: min(var(--tbl-min-width-ps), 0px); } body.is-mobile .tbl:has(> * > tr > :nth-child(5)):not(:has(> * > tr > :nth-child(7))) { min-width: min(var(--tbl-min-width-ps), 640px); } /* Loading overlay that is taking long (gmx-runtime.js adds .loading-dismissable after a few seconds): the navigation behind it may have been stopped or turned into a download, so it says it can be closed */ body > .loading.loading-dismissable { cursor: pointer; } body > .loading.loading-dismissable::after { content: "Demorando? Clique aqui ou aperte Esc para fechar"; position: absolute; left: 16px; right: 16px; bottom: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(--color-gray); animation: loading-fade-in 0.4s ease-out both; } body.night-mode > .loading.loading-dismissable::after { color: var(--color-gray-300); } /* GMX 3 has no night variant for .btn-white, so the side buttons of the NR-12 screens and the home shortcuts stayed white blocks on the dark page. Same idea as the GMX night .btn-light, one step darker (panel colour) */ body.night-mode .btn.btn-white { background: var(--color-gray-800); color: var(--color-white-glass-9); } /* Dialogs: jQuery blockUI with a GMX 3 panel as the message, dressed as the GMX 3 dialog. The z-index (9500, between the side menu and growl) and the rest of the behaviour are blockUI defaults in gmx-runtime.js */ body > .blockUI.blockOverlay { background-color: var(--dialog-overlay-bg); backdrop-filter: blur(var(--dialog-overlay-blur)); cursor: default !important; animation: dialog-show 0.2s forwards cubic-bezier(0.215, 0.61, 0.355, 1); } body.night-mode > .blockUI.blockOverlay { background-color: var(--dialog-overlay-bg-night); } body > .blockUI.blockMsg.blockPage { inset: 0; display: flex !important; align-items: center; justify-content: center; padding: var(--dialog-padding); box-sizing: border-box; } body > .blockUI.blockMsg > .panel { width: 100%; max-width: var(--dialog-panel-max-width); max-height: 100%; margin: 0; overflow: hidden auto; overscroll-behavior: contain; box-shadow: var(--dialog-panel-shadow); animation: dialog-showdown 0.5s forwards cubic-bezier(0.215, 0.61, 0.355, 1); } body.performance-mode > .blockUI, body.performance-mode > .blockUI.blockMsg > .panel { animation: none; } body.night-mode.performance-mode > .blockUI.blockOverlay { background-color: var(--dialog-overlay-bg-night-performance); } @media (width <= 900px) { body > .blockUI.blockMsg.blockPage { padding: var(--dialog-mobile-padding); } body > .blockUI.blockMsg > .panel { max-width: none !important; } } /* dmode: another portal page inside an iframe dialog */ body > .blockUI.blockMsg > .portal-frame { max-width: 1240px; } .portal-frame iframe { display: block; width: 100%; height: calc(100vh - 180px); border: 0; background: var(--color-white) var(--img-loading) center / 38px no-repeat; } .portal-frame iframe.is-loaded { background-image: none; } .row-selector, .row-selector-multiple { cursor: pointer; } /* Plain checkboxes and radios (without GMX 3's .input + label pair) follow the brand colour */ input[type="checkbox"]:not(.input), input[type="radio"]:not(.input) { accent-color: var(--color-default); } body.night-mode input[type="checkbox"]:not(.input), body.night-mode input[type="radio"]:not(.input) { accent-color: var(--color-default-night); } /* Character counter added under .count-chars / .count-words fields by the jQuery counter plugin */ .char-counter { margin-top: 4px; font-size: var(--font-size-small); text-align: right; color: var(--color-gray-500); } /* ------------------------------------------------------------------------------------------- */ /* Portal utilities that lived in modules/_core/styles/*.gmx2.css (legacy pages only) */ /* ------------------------------------------------------------------------------------------- */ /* "Ambiente de Testes" badge, outside production */ .fixed-ambient-label { position: fixed; left: 50%; bottom: 10px; z-index: 9800; /* above the menu (9002-9005) and dialogs (9500), below growl (9900) and loading (10000) */ transform: translateX(-50%); pointer-events: none; } @keyframes portal-blink { 50% { opacity: 0; } } .blink { animation: portal-blink 1s step-start infinite; } .blink-fade { animation: portal-blink 1s linear infinite; } .drop-shadow { filter: drop-shadow(var(--color-black-glass-2) 0 5px 5px); } .cke_notification_warning { display: none !important; } /* ------------------------------------------------------------------------------------------- */ /* Pikaday (date-picker) */ /* ------------------------------------------------------------------------------------------- */ .pika-single { z-index: 10001; /* above dialogs, growl and loading, so it also works inside a dialog */ display: block; position: relative; font-family: var(--font); color: var(--color-gray-900); background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 10px 30px var(--color-black-glass-2); } .pika-single::before, .pika-single::after { content: " "; display: table; } .pika-single::after { clear: both; } .pika-single.is-hidden { display: none; } .pika-single.is-bound { position: absolute; } .pika-lendar { float: left; width: 250px; margin: 10px; } .pika-title { position: relative; text-align: center; } .pika-label { display: inline-block; position: relative; z-index: 2; overflow: hidden; margin: 0; padding: 5px 3px; font-size: 14px; line-height: 20px; font-weight: 800; background: transparent; } .pika-title select { cursor: pointer; position: absolute; z-index: 1; top: 5px; left: 0; margin: 0; opacity: 0; } .pika-prev, .pika-next { display: block; position: relative; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; outline: 0; overflow: hidden; cursor: pointer; font-size: 0; color: transparent; background: transparent; } .pika-prev { float: left; } .pika-next { float: right; } .pika-prev::before, .pika-next::before { display: block; font: normal 18px/30px FontAwesome; text-align: center; color: var(--color-gray-600); } .pika-prev::before { content: "\f104"; } .pika-next::before { content: "\f105"; } .pika-prev:hover, .pika-next:hover { background: var(--color-gray-100); } .pika-prev.is-disabled, .pika-next.is-disabled { cursor: default; opacity: 0.2; } .pika-select { display: inline-block; } .pika-table { width: 100%; border: 0; border-collapse: collapse; border-spacing: 0; } .pika-table th, .pika-table td { width: 14.2857%; padding: 1px; } .pika-table th { font-size: 11px; line-height: 25px; font-weight: 700; text-align: center; color: var(--color-gray-500); } .pika-table abbr { border-bottom: 0; text-decoration: none; } .pika-button { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 6px; border: 0; border-radius: 8px; outline: 0; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 15px; text-align: center; color: var(--color-gray-700); background: transparent; } .pika-week { font-size: 11px; color: var(--color-gray-500); } .is-today .pika-button { font-weight: 800; color: var(--color-default); } .pika-button:hover, .is-selected .pika-button { font-weight: 800; color: var(--color-white); background: var(--color-default); } .is-disabled .pika-button { pointer-events: none; cursor: default; opacity: 0.3; } body.night-mode .pika-single { color: var(--color-gray-100); background: var(--color-gray-900); border-color: var(--color-border-night); } body.night-mode .pika-button { color: var(--color-gray-300); } body.night-mode .pika-prev:hover, body.night-mode .pika-next:hover { background: var(--color-gray-800); } body.night-mode .is-today .pika-button { color: var(--color-default-night); } body.night-mode .pika-button:hover, body.night-mode .is-selected .pika-button { color: var(--color-black); background: var(--color-default-night); } /* ------------------------------------------------------------------------------------------- */ /* Autocomplete suggestions */ /* ------------------------------------------------------------------------------------------- */ .autocomplete-suggestions { display: none; position: absolute; z-index: 10001; box-sizing: border-box; max-height: 300px; overflow: hidden auto; text-align: left; cursor: default; font-family: var(--font); background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 30px var(--color-black-glass-2); } .autocomplete-suggestion { position: relative; padding: 0.45em 0.9em; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-gray-800); } .autocomplete-suggestion b { font-weight: 800; color: var(--color-default); } .autocomplete-suggestion.selected { color: var(--color-white); background: var(--color-default); } .autocomplete-suggestion.selected b { color: inherit; } body.night-mode .autocomplete-suggestions { background: var(--color-gray-900); border-color: var(--color-border-night); } body.night-mode .autocomplete-suggestion { color: var(--color-gray-100); } body.night-mode .autocomplete-suggestion b { color: var(--color-default-night); } body.night-mode .autocomplete-suggestion.selected { color: var(--color-black); background: var(--color-default-night); }