/* ========================================================================== theme_ous.css — OUS visual profile for "RegERP Rapportplattform" Nasjonalt profilprogram for helseforetakene (2022). Spec §9. Target: Oracle APEX 26.1, Universal Theme 42, theme style "Redwood Light". HOW TO LOAD (pick ONE; option A is recommended) ------------------------------------------------------------------------- A) Static application file + CSS File URLs 1. Shared Components > Static Application Files > upload this file (becomes #APP_FILES#theme_ous.css ). 2. Shared Components > User Interface Attributes > (Desktop) > "CSS File URLs" -> add: #APP_FILES#theme_ous.css This loads AFTER the theme's Core.css/Redwood.css, which this file REQUIRES: several rules below (.oj-dvt-category*, .t-Button--hot) have equal specificity to the theme's own and win only on load order. B) Theme Roller > Custom CSS Shared Components > Themes > Universal Theme > Theme Roller, paste the body of this file into the "Custom CSS" box and Save As "OUS". NOTE: for Redwood Light, Theme Roller exposes NO colour swatches at all (its controls only emit body classes: rw-pillar--*, rw-mode-nav--*, rw-mode-header--*, rw-layout--*). The generated #THEME_DB_FILES#.css is therefore essentially just this Custom CSS. Font: profile font "Scala Sans" is not web-available -> Inter + system-ui. Inter is NOT bundled here. Either upload Inter as a static file and add an at-font-face rule, or the stack falls back to system-ui (on purpose). ACCESSIBILITY: colour is never the sole carrier of meaning. The status badge classes below emit a shape glyph (checkmark / ! / x / ?) in addition to colour, and expect a real text label as their content. ========================================================================== */ /* -------------------------------------------------------------------------- 1. OUS palette tokens (spec §9). Stable order — app code (M_FARGE) assigns categories POSITIONALLY against --ous-cat-1..6, so DO NOT reorder these. -------------------------------------------------------------------------- */ :root { /* Brand */ --ous-primary: #003087; /* dark blue — primary / 1st data series */ --ous-accent: #6CACE4; /* light blue — 2nd data series / accent */ --ous-neutral: #BFCED6; /* grey — borders / neutral */ /* Secondary palette — fixed order, category colours */ --ous-cat-1: #6FA287; /* green */ --ous-cat-2: #00C19F; /* teal */ --ous-cat-3: #FFC845; /* yellow */ --ous-cat-4: #FF671F; /* orange */ --ous-cat-5: #CB333B; /* red */ --ous-cat-6: #87189D; /* purple */ /* Status — fixed meaning, never reused as a category colour */ --ous-status-ok: #6FA287; --ous-status-warn: #FFC845; --ous-status-error: #CB333B; --ous-status-unknown: #BFCED6; /* Ink. --ous-ink on every light fill >= 5.9:1; white on primary 11.85:1. */ --ous-ink: #1a1a1a; --ous-on-dark: #ffffff; /* Accessible TEXT-only variants. The profile fills fail as text on white (#FFC845 1.54:1, #6FA287 2.92:1), so these darkened equivalents carry the same meaning in text form. Derived here, not from the profile. */ --ous-warn-text: #8A5A00; /* 5.93:1 on white */ --ous-ok-text: #4F7A63; /* 4.89:1 on white */ --ous-error-text: #A32A31; /* 7.16:1 on white */ /* Darker primary for hover/active states. 15.4:1 with white. */ --ous-primary-shade: #00205C; } /* -------------------------------------------------------------------------- 2. Universal Theme 42 overrides. All names below were verified present in the shipped 26.1 files (themes/theme_42/26.1/css/Redwood.css and Core.css), where they are declared on :root — so this :root block overrides them on load order. -------------------------------------------------------------------------- */ :root { /* Primary palette. --a-palette-* aliases these in Core.css automatically. */ --ut-palette-primary: var(--ous-primary); --ut-palette-primary-contrast: var(--ous-on-dark); --ut-palette-primary-shade: var(--ous-primary-shade); /* Status palette. -contrast is the text drawn ON the fill, so it must be dark for warning/success/generic — white would fail (2.9:1 and 1.5:1). */ --ut-palette-success: var(--ous-status-ok); --ut-palette-success-contrast: var(--ous-ink); --ut-palette-warning: var(--ous-status-warn); --ut-palette-warning-contrast: var(--ous-ink); --ut-palette-danger: var(--ous-status-error); --ut-palette-danger-contrast: var(--ous-on-dark); --ut-palette-info: var(--ous-primary); --ut-palette-info-contrast: var(--ous-on-dark); --ut-palette-generic: var(--ous-status-unknown); --ut-palette-generic-contrast: var(--ous-ink); /* Base font. Redwood.css sets this to "Oracle Sans"; Core.css to system-ui. This is the correct single hook — do NOT restyle body/.t-Body directly. */ --a-base-font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Links. Redwood default is --rw-palette-blue-120. */ --ut-link-text-color: var(--ous-primary); /* Focus ring. Redwood default is a 1px DASHED neutral outline, which is easy to miss; a 2px solid brand ring is clearer and 11.85:1 on white. */ --ut-focus-outline-color: var(--ous-primary); --ut-focus-outline: var(--ut-focus-outline-color) solid 2px; --ut-focus-outline-offset: 2px; /* Header bar. Redwood default is --rw-palette-neutral-20 (light grey) and does NOT follow --ut-palette-primary, so it must be set explicitly. */ --ut-header-background-color: var(--ous-primary); --ut-header-text-color: var(--ous-on-dark); --ut-header-border-color: var(--ous-primary-shade); /* Side navigation stays light for long-list legibility; only the selected node carries brand colour. */ --ut-body-nav-border-color: var(--ous-neutral); } /* Selected / current item in the navigation tree. */ .a-TreeView-node, .t-TreeNav { --a-treeview-node-selected-background-color: var(--ous-primary); --a-treeview-node-selected-text-color: var(--ous-on-dark); } /* Call-to-action buttons. IMPORTANT: in Redwood Light these are hardcoded to --rw-palette-neutral-* and do NOT inherit --ut-palette-primary, so setting the palette alone leaves them grey. Verified in 26.1/css/Redwood.css. */ .t-Button--hot, .a-Button--hot, .ui-button--hot, .t-Button--primary { --a-button-background-color: var(--ous-primary); --a-button-text-color: var(--ous-on-dark); --a-button-border-color: var(--ous-primary); --a-button-hover-background-color: var(--ous-primary-shade); --a-button-hover-text-color: var(--ous-on-dark); --a-button-hover-border-color: var(--ous-primary-shade); --a-button-active-background-color: var(--ous-primary-shade); --a-button-active-text-color: var(--ous-on-dark); --a-button-focus-background-color: var(--ous-primary-shade); --a-button-focus-text-color: var(--ous-on-dark); } /* WCAG guard. Core.css defines .u-warning-text { color: var(--ut-palette- warning) } — with the profile yellow that is 1.54:1 on white. Re-point the text-only utilities at the darkened variants. Fills are left untouched. */ .u-warning-text { color: var(--ous-warn-text); } .u-success-text { color: var(--ous-ok-text); } .u-danger-text { color: var(--ous-error-text); } /* -------------------------------------------------------------------------- 3. Status badges. Fill + dark/light ink chosen so every combination clears WCAG AA (4.5:1) for normal text: ok #1a1a1a on #6FA287 = 5.96:1 warn #1a1a1a on #FFC845 = 11.27:1 (never yellow text — fill only) error #ffffff on #CB333B = 5.15:1 unknown #1a1a1a on #BFCED6 = 10.79:1 Markup: Nærmer seg terskel The ::before glyph makes the state readable without colour. If the page already renders its own icon, add .ous-status--noglyph to suppress it. -------------------------------------------------------------------------- */ .ous-status { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border: 1px solid rgba(0, 0, 0, .18); border-radius: 1rem; font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .ous-status::before { font-weight: 700; } /* NB: !important er noedvendig, ikke kosmetikk. .ous-status-error::before osv. staar LENGER NED i filen med samme spesifisitet (0,2,1), saa uten dette vant de -- og Datastatus-banneret rendret dobbel glyf ("x ✗ Foreldet"), fordi verdien allerede inneholder ikonet fra V_DATAFERSKHET.STATUS_IKON. */ .ous-status--noglyph::before { content: none !important; } .ous-status-ok { background-color: var(--ous-status-ok); color: var(--ous-ink); } .ous-status-warn { background-color: var(--ous-status-warn); color: var(--ous-ink); } .ous-status-error { background-color: var(--ous-status-error); color: var(--ous-on-dark); } .ous-status-unknown { background-color: var(--ous-status-unknown); color: var(--ous-ink); } .ous-status-ok::before { content: "\2713"; } /* check */ .ous-status-warn::before { content: "\0021"; } /* ! */ .ous-status-error::before { content: "\00D7"; } /* x */ .ous-status-unknown::before { content: "\003F"; } /* ? */ /* -------------------------------------------------------------------------- 4. Chart series colours (Oracle JET / DVT). There is NO CSS variable for the APEX chart palette — no --ut-chart-*, no --a-charts-*. Setting JET's --oj-palette-dvt-rgb-* has no effect either, because APEX's Core.css replaces the rules that consumed them with .oj-dvt-categoryN { color: var(--u-color-M) } using a NON- sequential M (cat2 -> --u-color-4, cat3 -> --u-color-7, ...). Overriding --u-color-* would therefore scramble series order and also repaint badges/cards. Redeclaring the 12 category classes is the surgical fix. This is only the DEFAULT ramp for series with no explicit colour. Stable per-category assignment still comes from M_FARGE at app level. Order follows spec §9: primary, accent, then the secondary palette. Must load after Core.css (see option A at top) — specificity is equal. WARNING: slots 3, 5 and 7 below are the same hexes as the OK / warning / deviation status colours. Any chart that also encodes status must set its series colours explicitly rather than rely on this ramp. Slots 9-12 are deliberately left at theme defaults: the profile defines only 8 colours, and a chart needing more must assign them at app level. -------------------------------------------------------------------------- */ .oj-dvt-category1 { color: var(--ous-primary); } .oj-dvt-category2 { color: var(--ous-accent); } .oj-dvt-category3 { color: var(--ous-cat-1); } .oj-dvt-category4 { color: var(--ous-cat-2); } .oj-dvt-category5 { color: var(--ous-cat-3); } .oj-dvt-category6 { color: var(--ous-cat-4); } .oj-dvt-category7 { color: var(--ous-cat-5); } .oj-dvt-category8 { color: var(--ous-cat-6); } /* -------------------------------------------------------------------------- 5. Tallformat i rapporter (M12/N20/N27). Norsk tusenskille ER et mellomrom, og et mellomrom er et lovlig linjebrytingspunkt. I en smal IR-kolonne brakk derfor "573 809" til "573" / "809" over to linjer -- to tall der det skulle stått ett. BUILD_IR_PAGE setter .ous-num paa alle numeriske kolonner og .ous-ident paa ID-kolonner. -------------------------------------------------------------------------- */ .ous-num, .ous-num td, td.ous-num, .ous-ident, td.ous-ident { white-space: nowrap; font-variant-numeric: tabular-nums; } .ous-ident { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* -------------------------------------------------------------------------- L5 — nedborings-lenker skilles kun med farge (WCAG 1.4.1). PO-nummerlenkene paa side 1/31/32/71/101 ble rendret #003087 mot broedtekst #161513, text-decoration:none, vekt 400 -- fargen var eneste skille, og hele oppdagbarheten til nedboringen hang paa aa legge merke til moerkeblaa tekst. -------------------------------------------------------------------------- */ .a-IRR-table td a, .t-Report-report td a, .a-CardView-title a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; } .a-IRR-table td a:hover, .a-IRR-table td a:focus-visible, .t-Report-report td a:hover, .t-Report-report td a:focus-visible { text-decoration-thickness: 2px; } .a-IRR-table td a::after, .t-Report-report td a::after { content: "\203A"; margin-left: .25em; opacity: 0; transition: opacity .12s ease-in-out; } .a-IRR-table td a:hover::after, .a-IRR-table td a:focus-visible::after, .t-Report-report td a:hover::after, .t-Report-report td a:focus-visible::after { opacity: 1; } /* En doed ikonlenke (href="#") skal ikke arve affordansen. */ .a-IRR-table td a[href="#"] { text-decoration: none; font-weight: 400; } .a-IRR-table td a[href="#"]::after { content: none; } /* N36 — lange tekstkolonner (Merknad paa 92, Problem paa 93, Begrunnelse paa 94) loep ut over hoeyre skjermkant ved 1500 px. Bryt ord i stedet. Tall- og ID-kolonnene beholder nowrap via .ous-num/.ous-ident over. M12-rest (runde 2): "overflow-wrap: anywhere" var for hardt. `anywhere` teller nemlig MED i tabellens min-content-beregning, saa nettleseren fikk lov til aa krympe hver kolonne ned til ETT tegn og brakk deretter midt i verdien: "10.03.20 26", "COLOPLAS T NORGE", "TRU E", "REGERP_DEM O", "JOB_REFRESH_AGG REGATER". `break-word` gir nøyaktig samme beskyttelse mot at en enkelt lang verdi loeper ut av skjermen -- den bryter et ord som ikke faar plass paa en linje for seg -- men paavirker IKKE min-content, saa kolonnen beholder minst bredden til sitt lengste ord. */ .a-IRR-table td { max-width: 34rem; overflow-wrap: break-word; } /* Samme for klassiske rapporter (bl.a. Datastatus-banneret). */ .t-Report-report td { overflow-wrap: break-word; } /* M12-rest: datoer og noekkelverdier skal aldri brytes. BUILD_IR_PAGE setter .ous-dato paa alle DATE-kolonner (ID-kolonnene har .ous-ident fra foer). min-width hindrer at en smal kolonne presses under sin egen verdi. */ .ous-dato, .ous-dato td, td.ous-dato { white-space: nowrap; min-width: 7.5rem; } td.ous-ident { min-width: 6rem; } /* Kolonneoverskrifter skal bryte paa ord, ikke midt i ordet. */ .a-IRR-table th, .t-Report-report th { overflow-wrap: break-word; hyphens: none; } /* -------------------------------------------------------------------------- FIKSRUNDE 3, punkt 4 — hoeyre kolonner klippes bort uten synlig scroll. Maalt i kjoerende app: side 31 har tabellbredde 1936 px i en container paa 1422 px. Scroll-containeren FINNES (.t-fht-tbody har overflow-x:auto og scrollWidth 1936 > clientWidth 1422, og overskriftsklonen synkroniseres korrekt) -- men Chrome tegner den som en OVERLAY-scrollbar: offsetHeight - clientHeight = 0, altsaa null piksler layout, altsaa ingen synlig affordans. «Avvik (NOK)» paa selve avviksrapporten var dermed utilgjengelig for en bruker som ikke gjettet at tabellen kunne dras. Aa style ::-webkit-scrollbar tvinger Chrome over paa KLASSISK scrollbar (den tar plass i layout og er alltid synlig naar innholdet flyter over). scrollbar-color/-width daekker Firefox. Ingen JS, ingen metadataendring. -------------------------------------------------------------------------- */ .t-fht-tbody, .a-IRR-tableContainer, .ous-scroll-x { scrollbar-width: auto; scrollbar-color: var(--ous-graa, #BFCED6) transparent; } .t-fht-tbody::-webkit-scrollbar, .a-IRR-tableContainer::-webkit-scrollbar, .ous-scroll-x::-webkit-scrollbar { height: 12px; } .t-fht-tbody::-webkit-scrollbar-track, .a-IRR-tableContainer::-webkit-scrollbar-track, .ous-scroll-x::-webkit-scrollbar-track { background: #EDF0F3; border-radius: 6px; } .t-fht-tbody::-webkit-scrollbar-thumb, .a-IRR-tableContainer::-webkit-scrollbar-thumb, .ous-scroll-x::-webkit-scrollbar-thumb { background: #BFCED6; border-radius: 6px; } .t-fht-tbody::-webkit-scrollbar-thumb:hover, .a-IRR-tableContainer::-webkit-scrollbar-thumb:hover, .ous-scroll-x::-webkit-scrollbar-thumb:hover { background: #003087; } /* -------------------------------------------------------------------------- FIKSRUNDE 3, punkt 12 — side 20 (Interactive Grid, veiviser-bygget). Gridet delte bredden LIKT paa alle 12 kolonner (maalt: 99,16 px hver), saa «Bestilling» viste «PO202600075...» og «Vare» «Forbruksartik...» paa hver eneste rad, mens overskriften «Hvorfor den trenger handling» ble kuttet til «Hvorfor den tre» uten ellipse. Bredden kommer IKKE fra CSS eller fra inline-stil, men fra `` som IG-widgeten skriver ved rendering. Et HTML-width-attributt er en «presentational hint» med lavest prioritet, saa en CSS-regel med !important vinner over den. Maalt etter fiksen: 150/240/230 px paa de tre kolonnene, og gridet faar sin egen horisontale scroll (scrollWidth 1523 mot clientWidth 1202) -- den er innebygget i IG og alltid synlig. Siden er veiviser-bygget og kan IKKE bygges om fra SQL: dette er ren CSS og roerer verken kolonnesettet, spoerringen eller gridets oppfoersel. -------------------------------------------------------------------------- */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="0"] { width: 150px !important; } /* Bestilling */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="1"] { width: 80px !important; } /* Linjenr. */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="2"] { width: 110px !important; } /* Sykehus */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="3"] { width: 100px !important; } /* Klinikk */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="4"] { width: 230px !important; } /* Vare */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="5"] { width: 170px !important; } /* Leverandoer */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="6"] { width: 140px !important; } /* Mottaksstatus */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="7"] { width: 215px !important; } /* Hvorfor den trenger handling */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="8"] { width: 105px !important; } /* Opprettet */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="9"] { width: 105px !important; } /* Mottatt */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="10"] { width: 105px !important; } /* Forfall */ #R8546308244992761_ig_grid_vc .a-GV-table col[data-idx="11"] { width: 125px !important; } /* Beloep NOK */ /* -------------------------------------------------------------------------- FIKSRUNDE 3, punkt 13 — Interactive Report-regioner rendret ALDRI sin regiontittel. Titlene ligger i metadataen, og region-malen «Interactive Report» har #TITLE# i markupen -- men Universal Theme setter `.t-IRR-title { display: none }` fordi malen er ment for sider med ett enkelt rapport. Appen har to-tre stablede IR-er paa 12/13/73/81/92/102, og uten overskrift er de ikke til aa skille fra hverandre. Vist som en vanlig regiontittel, med samme typografi som .t-Region-title. -------------------------------------------------------------------------- */ /* Universal Themes egen regel er `.t-IRR-region:not(.t-IRR-region--hideHeader) > .t-IRR-title { display:none }` (spesifisitet 0,3,0). En regel med lavere spesifisitet taper uansett rekkefolge -- derfor `!important` paa akkurat display, og bare der. */ .t-IRR-region > .t-IRR-title { display: block !important; font-size: 1rem; font-weight: 600; line-height: 1.4; color: #161513; margin: 0 0 .5rem 0; padding: 0; } /* M24 — fulltellings-badge (§8.3), bygget av PKG_UI.FULLTELLING_BADGE. */ .ous-fulltelling { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; } .ous-fulltelling-note { font-size: .8125rem; color: #4A5560; } /* Sidevise forbehold med gul kantmarkoer (N10/N18/N19/N38). */ .ous-note-warn { border-left: 4px solid var(--ous-status-warn); padding: .5rem .75rem; background: rgba(255, 200, 69, .12); margin-top: .5rem; } /* L1 — koblingskart paa side 92. Ren HTML/CSS: APEX 26.1 har ingen Mermaid-renderer, og appen laster ikke eksterne JS-bibliotek. */ .ous-kart-legend { font-size: .8125rem; margin-bottom: .75rem; } .ous-kart-node { font-size: .875rem; font-weight: 700; margin: 1rem 0 .25rem; padding-bottom: .125rem; border-bottom: 2px solid var(--ous-primary); } .ous-kart-edges { list-style: none; margin: 0; padding: 0; } .ous-kart-edge { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem 0 .25rem .75rem; border-left: 3px solid #BFCED6; font-size: .8125rem; } .ous-kart-edge.is-fanout { border-left-color: var(--ous-status-error); } .ous-kart-edge.is-dead { border-left-color: #BFCED6; opacity: .65; } .ous-kart-key, .ous-kart-target { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .ous-kart-arrow { color: #4A5560; } .ous-kart-rate--none { color: #7A8590; font-style: italic; } /* M21 - kildestripe paa side 900 (ankerlenker til hver kilderegion). Region Display Selector plukket ikke opp regionene i denne appens display point; se merknaden i sql/31. */ .ous-kilder { display: flex; flex-wrap: wrap; gap: .25rem .5rem; } .ous-kilder a, .ous-kilder .ous-kilder-her { padding: .25rem .625rem; border: 1px solid var(--ous-neutral); border-radius: 1rem; font-size: .8125rem; font-weight: 600; text-decoration: none; } .ous-kilder a { color: var(--ous-primary); } .ous-kilder a:hover, .ous-kilder a:focus-visible { background: var(--ous-primary); color: var(--ous-on-dark); } .ous-kilder .ous-kilder-her { background: var(--ous-primary); color: var(--ous-on-dark); border-color: var(--ous-primary); } /* L7 — mobil (390 px): filterets inline-etiketter brakk slik at "Kilde" floet loesrevet fra sin nedtrekksliste. Under md-breakpointet stables etikett over felt. Ren layout -- roerer ikke submit-mekanismen. */ /* L7 mobil. NB: kommentaren foran @media er PAAKREVD -- SQL*Plus tolker en linje der foerste ikke-blanke tegn er @ som en @script-kommando (SP2-0310), uavhengig av hvordan strengen er sitert i PL/SQL. Samme felle som font-face-regelen traff i forste runde. */ /**/ @media (max-width: 640px) { .t-Form-fieldContainer { display: block !important; } .t-Form-labelContainer { width: 100% !important; max-width: 100% !important; text-align: left !important; padding: 0 0 .125rem !important; } .t-Form-inputContainer { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; } .t-Form-fieldContainer + .t-Form-fieldContainer { margin-top: .5rem; } .ous-fulltelling-note { display: none; } } /* -------------------------------------------------------------------------- L7-rest — det globale filteret hadde IKKE .t-Form-*-markupen reglene over forutsetter. Maalt i kjoerende app: itemene har INGEN feltmal (ITEM_LABEL_ TEMPLATE er NULL paa alle sju), saa APEX rendrer etiketten som en NAKEN TEKSTNODE rett foran kontrollen:
Sykehus