/*
* ECOSOCC design system — ResourceSpace token layer
* ==================================================
*
* ResourceSpace renders its own DOM (.ResourcePanel, .Listview, .BasicsBox, #Header).
* PatternFly's component classes (.pf-v6-c-*) cannot attach to it, and rewriting the
* PHP pages to emit PatternFly markup would be a fork that fights every upgrade.
*
* What DOES transfer is the token layer. This file redefines ResourceSpace's own
* custom properties from two sources:
*
* brand colour ....... Atlas AU green ramp
* erpnext/.../vendor/atlas/0.1.0/tokens/_generated/au-reference.css
* and au-semantic.css (the same values the intake portal uses)
* everything else .... PatternFly 6.6.1 global tokens
* erpnext/.../vendor/patternfly/6.6.1/base/patternfly-variables.css
*
* Every literal below carries the token it came from. Nothing is eyeballed.
*
* LOAD ORDER (include/header.php)
* global.css (184) -> light.css (186) -> css_override.php (188) -> get_plugin_css() (250)
* so this file wins at equal specificity. `:root` and `.mode-green` are both (0,1,0),
* so source order decides and this file's :root beats global.css's .mode-green.
*
* IMPORTANT — css_override.php remaps --colour-surface-*, --colour-typography-* and
* --form-* for dark mode BEFORE this file loads. Anything in those families that is
* set here must also be set in style-dark.php, or dark mode inherits the light value.
* The neutral and brand ramps are NOT remapped by css_override, so setting them here
* is safe and is where most of the leverage is: ResourceSpace's dark mode is built by
* pointing surfaces at the neutral ramp in reverse, so a PatternFly neutral ramp gives
* PatternFly dark surfaces for free.
*
* Dark and high-contrast live in style-dark.php (the only plugin CSS hook that can
* read $user_pref_appearance / $high_contrast_mode).
*/
/* ---------------------------------------------------------------------------
* 1. Primitives — PatternFly 6.6.1 values, named for this application
* ------------------------------------------------------------------------ */
:root {
/* Radius — --pf-t--global--border--radius--* */
--ecosocc-radius-sharp: 0px; /* --border--radius--0 */
--ecosocc-radius-tiny: 4px; /* --border--radius--100 / --tiny */
--ecosocc-radius-sm: 6px; /* --border--radius--200 / --small */
--ecosocc-radius-md: 16px; /* --border--radius--300 / --medium */
--ecosocc-radius-pill: 999px; /* --border--radius--500 / --pill */
/* Border width — --pf-t--global--border--width--* */
--ecosocc-border-regular: 1px; /* --border--width--100 / --regular */
--ecosocc-border-strong: 2px; /* --border--width--200 / --strong */
/* Elevation — --pf-t--global--box-shadow--sm|md|lg composed from X/Y/blur/spread/color */
--ecosocc-shadow-sm: 0px 1px 6px 0px rgba(41, 41, 41, 0.15);
--ecosocc-shadow-md: 0px 4px 10px 0px rgba(41, 41, 41, 0.15);
--ecosocc-shadow-lg: 0px 10px 20px 0px rgba(41, 41, 41, 0.15);
/* Focus ring — --pf-t--global--focus-ring--* (PatternFly keeps focus blue even
when the brand colour is replaced; au-patternfly.css overrides brand only) */
--ecosocc-focus-ring: #0066cc; /* --focus-ring--color--100 = blue--50 */
--ecosocc-focus-width: 2px; /* --focus-ring--width--offset */
--ecosocc-focus-offset: 2px; /* --focus-ring--position--offset */
/* Motion — --pf-t--global--motion--* */
--ecosocc-duration-sm: 100ms; /* --duration--100 */
--ecosocc-duration-md: 200ms; /* --duration--200 */
--ecosocc-ease: cubic-bezier(0.4, 0, 0.2, 1); /* --timing-function--200 */
/* Type — --pf-t--global--font--* (scale and rhythm only; see divergences) */
--ecosocc-line-height-body: 1.5; /* --font--line-height--200 / --body */
--ecosocc-line-height-heading: 1.3; /* --font--line-height--100 / --heading */
--ecosocc-weight-body: 400; /* --font--weight--100 / --body--default */
--ecosocc-weight-body-bold: 600; /* --font--weight--200 / --body--bold */
--ecosocc-weight-heading: 600; /* --font--weight--300 / --heading--default */
--ecosocc-weight-heading-bold: 800; /* --font--weight--400 / --heading--bold */
/* Spacing — --pf-t--global--spacer--* .
ResourceSpace's --space-N ramp is already a superset of PatternFly's steps
(4 8 16 24 32 48 64 80), so it is left alone. These aliases name the PF steps
for the rules in this file. */
--ecosocc-space-xs: 4px; /* --spacer--100 / --xs */
--ecosocc-space-sm: 8px; /* --spacer--200 / --sm */
--ecosocc-space-md: 16px; /* --spacer--300 / --md */
--ecosocc-space-lg: 24px; /* --spacer--400 / --lg */
--ecosocc-space-xl: 32px; /* --spacer--500 / --xl */
}
/* ---------------------------------------------------------------------------
* 2. Neutral ramp — PatternFly's gray scale, 1:1
*
* ResourceSpace derives every surface and every text colour from this ramp, in both
* light AND dark (css_override.php maps surfaces to it in reverse). Replacing it with
* PatternFly's grays therefore lands the DAM on PatternFly's real surfaces in both
* modes: neutral-850 (#292929) is PF's dark card, neutral-950 (#151515) is PF's dark
* page canvas and PF's light regular text.
* ------------------------------------------------------------------------ */
:root {
--colour-neutral-50: #ffffff; /* --pf-t--color--white */
--colour-neutral-100: #fafafa; /* ResourceSpace value kept: PatternFly has no 2% gray */
--colour-neutral-200: #f2f2f2; /* --pf-t--color--gray--10 = PF background secondary */
--colour-neutral-300: #e0e0e0; /* --pf-t--color--gray--20 = PF border default */
--colour-neutral-400: #c7c7c7; /* --pf-t--color--gray--30 = PF dark text subtle */
--colour-neutral-500: #a3a3a3; /* --pf-t--color--gray--40 */
--colour-neutral-600: #707070; /* --pf-t--color--gray--50 = PF icon subtle */
--colour-neutral-700: #4d4d4d; /* --pf-t--color--gray--60 = PF text subtle */
--colour-neutral-800: #383838; /* --pf-t--color--gray--70 */
--colour-neutral-850: #292929; /* --pf-t--color--gray--80 = PF dark card surface */
--colour-neutral-900: #1f1f1f; /* --pf-t--color--gray--90 */
--colour-neutral-950: #151515; /* --pf-t--color--gray--95 = PF text regular / dark canvas */
--colour-neutral-1000: #000000; /* --pf-t--color--black */
}
/* ---------------------------------------------------------------------------
* 3. Brand — Atlas AU green
*
* ResourceSpace's whole brand surface is these six values; links, breadcrumbs, card
* accents, card icons, chips and the focus token all derive from them.
*
* Measured (light):
* default #1a5632 8.67:1 on #ffffff 7.75:1 on #f2f2f2 AAA
* hover #216c3f 6.40:1 on #ffffff 5.72:1 on #f2f2f2 AA+
* pressed #236f42 6.13:1 on #ffffff 5.48:1 on #f2f2f2 AA+
* (the design's #26804b measured 4.39:1 on #f2f2f2 — below AA — and is
* darkened here, as instructed)
* dark #134829 10.57:1 on #ffffff 9.80:1 on #eef9f2 AAA
* darkest #0d3a20 12.78:1 on #ffffff 11.42:1 on #f2f2f2 AAA
* white on #1a5632 = 8.67:1 (button face)
* ------------------------------------------------------------------------ */
:root {
--colour-brand-primary-default: #1a5632; /* --atlas-color-primary / --au-green-200 */
--colour-brand-primary-hover: #216c3f; /* --au-green-325 */
--colour-brand-primary-dark: #134829; /* interpolated between AU brand and AU high-contrast */
--colour-brand-primary-darkest: #0d3a20; /* AU high-contrast green */
--colour-brand-primary-light: #cdedda; /* --atlas-color-background-green-soft / --au-green-775 */
--colour-brand-primary-lightest: #eef9f2; /* --atlas-color-background-green-delicate */
/* Not part of ResourceSpace's six; used for :active below. */
--ecosocc-brand-pressed: #236f42;
}
/* ---------------------------------------------------------------------------
* 4. Semantic re-points
*
* Each of these is remapped for dark mode by css_override.php, so each one is
* mirrored in style-dark.php. Keep the two lists in step.
* ------------------------------------------------------------------------ */
:root {
/* Page canvas: PF --background--color--secondary--default = gray-10.
ResourceSpace's default is neutral-300, which under the PatternFly ramp
would be #e0e0e0 — too dark for a page. */
--colour-surface-view-background: var(--colour-neutral-200);
/* Text: PF --text--color--regular = gray-95, --text--color--subtle = gray-60.
PatternFly separates subtle TEXT (gray-60) from subtle ICONS (gray-50);
neutral-600 (gray-50) measures 4.42:1 on the #f2f2f2 page canvas, below AA,
so subtle text takes neutral-700. */
--colour-typography-900: var(--colour-neutral-950); /* #151515 18.26:1 on white */
--colour-typography-600: var(--colour-neutral-700); /* #4d4d4d 8.45:1 on white, 7.55:1 on #f2f2f2 */
/* Control borders: PF --border--color--control--default resolves to
--border--color--300 = gray-45 in light. 3.36:1 against the control's white
fill, clearing the 3:1 non-text floor of WCAG 1.4.11. ResourceSpace's default
is rgba(0,0,0,0.25) = #bfbfbf on white = 1.9:1, which does not. */
--form-field-border: #8c8c8c; /* --pf-t--color--gray--45 */
--form-focus: var(--ecosocc-focus-ring);
}
/* ---------------------------------------------------------------------------
* 5. Typography rhythm
* ------------------------------------------------------------------------ */
body,
html {
color: var(--colour-typography-900);
line-height: var(--ecosocc-line-height-body);
}
h1, h2, h3, h4, h5, h6 {
line-height: var(--ecosocc-line-height-heading);
font-weight: var(--ecosocc-weight-heading);
}
h1 {
color: var(--colour-typography-900);
}
h2 {
color: var(--colour-typography-900);
}
/* ---------------------------------------------------------------------------
* 6. Focus — PatternFly's ring, replacing ResourceSpace's blue glow
*
* light.css uses `box-shadow: 0 0 6px hsla(205,79%,54%,0.5)` on :focus, which is a
* soft halo rather than a ring and does not read on a light surface. PatternFly uses
* a 2px solid outline at 2px offset.
* ------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--ecosocc-focus-width) solid var(--ecosocc-focus-ring);
outline-offset: var(--ecosocc-focus-offset);
border-radius: var(--ecosocc-radius-tiny);
}
input:focus,
textarea:focus,
select:focus,
.RecordPanel .RecordDownloadSpace .DownloadDBlend a:focus {
box-shadow: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: var(--ecosocc-focus-width) solid var(--ecosocc-focus-ring);
outline-offset: var(--ecosocc-focus-offset);
}
/* ---------------------------------------------------------------------------
* 7. Actions
*
* PatternFly 6 buttons are pill-shaped (--border--radius--action--default = --pill).
* ResourceSpace's action row mixes buttons with anchors, selects and icon strips at
* 28-32px heights; pill radius on that row reads as unrelated capsules rather than a
* toolbar, so --border--radius--tiny (--radius--100) is used instead. Recorded as a
* divergence in THEMING.md.
* ------------------------------------------------------------------------ */
button,
input[type=submit],
input[type=button],
.RecordPanel .RecordDownloadSpace .DownloadDBlend a,
.UploadButton a {
background-color: var(--colour-brand-primary-default);
color: var(--colour-global-white);
border: var(--ecosocc-border-regular) solid transparent;
border-radius: var(--ecosocc-radius-tiny);
box-shadow: var(--ecosocc-shadow-sm);
font-weight: var(--ecosocc-weight-body-bold);
transition: background-color var(--ecosocc-duration-md) var(--ecosocc-ease),
box-shadow var(--ecosocc-duration-md) var(--ecosocc-ease);
}
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.RecordPanel .RecordDownloadSpace .DownloadDBlend a:hover,
.UploadButton a:hover {
background-color: var(--colour-brand-primary-hover);
box-shadow: var(--ecosocc-shadow-md);
}
button:active,
input[type=submit]:active,
input[type=button]:active,
.UploadButton a:active {
background-color: var(--ecosocc-brand-pressed);
box-shadow: none;
}
input[type="submit"]:disabled,
button:disabled {
background: var(--colour-neutral-200);
color: var(--colour-neutral-700);
box-shadow: none;
border-color: var(--colour-neutral-300);
}
/* ---------------------------------------------------------------------------
* 8. Form controls — PF --border--radius--control--form-element = --small (6px)
* ------------------------------------------------------------------------ */
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select,
.sp-replacer {
border: var(--ecosocc-border-regular) solid var(--form-field-border);
border-radius: var(--ecosocc-radius-sm);
box-shadow: none;
}
select,
.sp-replacer {
box-shadow: none;
/* ResourceSpace's chevron is an inline SVG stroked #2E99E6. Same geometry,
stroked with the AU brand green. */
background-image: url('data:image/svg+xml;utf8,');
}
select::before {
color: var(--colour-brand-primary-default);
}
/* ---------------------------------------------------------------------------
* 9. Surfaces and elevation
* ------------------------------------------------------------------------ */
#Header {
background: var(--colour-surface-header-background);
border-bottom: var(--ecosocc-border-regular) solid var(--colour-neutral-300);
box-shadow: var(--ecosocc-shadow-sm);
}
.HomePanel,
.ResourcePanel,
.CollectionPanelShell,
.RecordPanel,
.ResourcePanelLarge,
#ResearchBoxPanel {
border-radius: var(--ecosocc-radius-sm);
}
.HomePanel,
.ResourcePanel {
box-shadow: var(--ecosocc-shadow-sm);
transition: box-shadow var(--ecosocc-duration-md) var(--ecosocc-ease);
}
.ResourcePanel:hover,
a.HomePanel:hover {
box-shadow: var(--ecosocc-shadow-md);
}
.Listview {
border-radius: var(--ecosocc-radius-sm);
border: var(--ecosocc-border-regular) solid var(--colour-neutral-300);
}
/* Selection: light.css hardcodes #2E99E6 (a ResourceSpace blue) and a #d5eafa tint. */
.ResourcePanel.Selected {
outline: var(--ecosocc-border-strong) solid var(--colour-brand-primary-default);
outline-offset: -1px;
}
tr[id^="ResourceShell"].Selected {
background-color: var(--colour-brand-primary-lightest);
}
.ListViewBulkActions span:hover {
color: var(--colour-brand-primary-hover);
}
/* ---------------------------------------------------------------------------
* 10. Muted text that light.css hardcodes below PatternFly's subtle step
* ------------------------------------------------------------------------ */
.ResourcePanelInfo {
color: var(--colour-typography-600);
}
.ResourcePanelInfo a {
color: var(--colour-typography-900);
}
.RecordPanel .item h3,
.RecordPanel .itemNarrow h3,
th {
color: var(--colour-typography-600);
}
.SearchBreadcrumbs > span,
.BreadcrumbsBox a,
.BreadcrumbsBox a:link,
.BreadcrumbsBox a:visited {
color: var(--colour-typography-900);
}
.ListViewBulkActions .DisabledLink:hover {
color: var(--colour-typography-600);
}
.HorizontalWhiteNav a:link,
.HorizontalWhiteNav a:visited,
.HorizontalWhiteNav a:active,
.BasicsBox .VerticalNav a:link,
.BasicsBox .VerticalNav a:visited,
.BasicsBox .VerticalNav a:active,
.ListTitle a:link,
.ListTitle a:visited,
.ListTitle a:active {
color: var(--colour-typography-700);
}
/* ---------------------------------------------------------------------------
* 10a. Uppy (the upload widget) — its own stylesheet, its own colours
*
* Uppy is vendored with its own --uppy-* variables and does not read
* ResourceSpace's tokens, so the "add files" link stays Uppy blue (#1269cf,
* 4.84:1 on its #f4f4f4 panel). Only the pieces the reader actually reads as
* brand are re-pointed; the widget's internals are left alone.
* AU green on #f4f4f4 measures 7.89:1; in dark the same declaration follows the
* dark brand token to #71ce96 (8.61:1 on the widget's dark panel).
* ------------------------------------------------------------------------ */
.uppy-Dashboard-browse,
.uppy-Dashboard-browse:hover,
.uppy-Dashboard-browse:focus {
color: var(--colour-brand-primary-default);
}
/* ---------------------------------------------------------------------------
* 10b. Home hero scrim
*
* #HomeSiteTextPanel prints white text over whatever the slideshow is showing,
* behind ResourceSpace's own --Hero-Gradient: rgba(0,0,0,.5) fading to zero at
* 50%. Over a light photograph the right-hand end of that gradient leaves white
* on a near-white plate — measured 2.24:1 against the panel's own fallback.
*
* The floor here is 0.62 alpha of #151515 (PF --text--color--regular). Over a
* pure white image that composites to #6e6e6e, so white text holds 5.2:1 no
* matter which asset the slideshow serves.
* ------------------------------------------------------------------------ */
:root {
--Hero-Gradient: linear-gradient(90deg, rgba(21, 21, 21, 0.80) 0%, rgba(21, 21, 21, 0.62) 100%);
}
/* ---------------------------------------------------------------------------
* 11. Header logo — the AU emblem keeps its official colours; give it room.
* ------------------------------------------------------------------------ */
#Header .HeaderImg,
#Header #HeaderImg img,
#Header a img.HeaderImg {
max-height: 48px;
width: auto;
}
/* ---------------------------------------------------------------------------
* 12. No horizontal overflow at 390px
* ------------------------------------------------------------------------ */
html {
overflow-x: hidden;
}
@media (max-width: 480px) {
.Listview,
.Listview table {
overflow-x: auto;
}
}
/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
button,
input[type=submit],
input[type=button],
.HomePanel,
.ResourcePanel {
transition: none;
}
}
/* ---------------------------------------------------------------------------
* Brand lockup
*
* Ported from ECOSOCC Connect's brand-logo component
* (resources/views/filament/components/brand-logo.blade.php): the institutional
* mark, a hairline rule, then the product name. Connect carries a "Beta" chip
* in that slot; this does not.
*
* ResourceSpace renders the header as
and
* gives no hook for extra markup, so the product name is a pseudo-element. It
* is not lost to assistive technology: the alt already reads
* "ECOSOCC Media Library - ", built from $applicationname.
*
* The tagline Connect shows under the product name is omitted here — the DAM
* header bar is roughly half the height of Connect's and it would crowd it.
* ------------------------------------------------------------------------- */
#header-container .logo a {
align-items: center;
display: inline-flex;
gap: 0.75rem;
text-decoration: none;
}
#header-container .logo a::after {
/* --ecosocc-border-regular is a WIDTH (1px), not a colour; using it as one
* makes the shorthand invalid and the rule silently drops to `none`.
* --colour-neutral-300 is the border colour the rest of this file uses, and
* both it and --colour-typography-900 are redefined by style-dark.php, so
* the lockup follows light / dark / high-contrast with no second rule. */
border-left: var(--ecosocc-border-regular) solid var(--colour-neutral-300);
color: var(--colour-typography-900);
content: "Media Library";
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
padding-left: 0.75rem;
white-space: nowrap;
}
@media (max-width: 700px) {
/* The mark alone carries the brand on a phone. */
#header-container .logo a::after {
display: none;
}
}
/* ---------------------------------------------------------------------------
* Quotable asset reference (hooks/all.php).
*
* Monospace because this gets transcribed by hand and read out over the phone,
* where 0/O and 1/l have to stay distinguishable - the same reasoning as the
* submission reference on the Opportunities portal's confirmation page.
* ------------------------------------------------------------------------- */
.ecosocc-asset-reference {
align-items: baseline;
display: flex;
gap: 0.5rem;
margin-block: 0 var(--ecosocc-space-md, 0.75rem);
}
.ecosocc-asset-reference__label {
color: var(--colour-typography-600, #6a6e73);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ecosocc-asset-reference__value {
color: var(--colour-typography-900);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.9375rem;
font-weight: 600;
}