/* SFAF Calendar — /caladmin portal */ /* --------------------------------------------------------------------------- THE BRAND, AND THE ONE RULE THE GUIDE IS EXPLICIT ABOUT. The guide (v3.0) approves ten colours and then says not to use them all: too many produces a kaleidoscope. It directs a neutral gray or black plus ONE OR TWO accents, with lighter and darker variations of those for contrast. So this portal is Dark Gray and white, TEAL as the single structural accent, and YELLOW reserved for one job. YELLOW MEANS "THIS IS THE ACTION" AND NOTHING ELSE. Save and Add. The moment it decorates a heading or a border it stops carrying that meaning and there is no colour left that does. EVERY PAIRING BELOW IS MEASURED, NOT CHOSEN BY EYE. Brand teal #16BECF is 2.26:1 against white and has been banned as a text colour here since 3.1.0. The guide permits darker variations of an approved colour, and p.18's #0E818C is the usual one, but it measures 4.27:1 on the 10% teal heading band and 4.28:1 on the page background, both of which fail AA. So teal that carries text is one step darker again: --uc-accent-text below clears 4.5:1 on white, on the page background and on both bands. ------------------------------------------------------------------------- */ :root { /* Approved SFAF brand palette (brand guide v3.0, p.9), verbatim. */ --sfaf-yellow: #FFD900; --sfaf-orange: #F7921E; --sfaf-red: #F04937; --sfaf-burgundy: #A30C33; --sfaf-pink: #F1668C; --sfaf-purple: #8D54A2; --sfaf-green: #8CC745; --sfaf-teal: #16BECF; --sfaf-lightgray: #D1D3D4; --sfaf-darkgray: #373433; --sfaf-black: #000000; --sfaf-gray: #373433; --uc-primary: #FFD900; /* SFAF yellow, Pantone 109 CP. PRIMARY ACTIONS ONLY. */ --uc-accent: #16BECF; /* teal fill/border, Pantone 7710 UP. Decoration only. */ /* Teal that CARRIES TEXT, or has to be seen as a control boundary. 5.35:1 on white, 4.95:1 on the page background, 4.94:1 and 4.56:1 on the two heading bands. See the note above for why not #0E818C. */ --uc-accent-text: #0E7680; /* The 10% teal heading band, pre-flattened. A translucent fill over an unknown backdrop cannot be contrast-checked; a flat colour can, and these are the two values the alpha actually resolves to here. */ --uc-band: #E8F9FA; /* over a white card */ --uc-band-alt: #DFF0F3; /* over the page background */ /* The dim behind a modal, the value the confirm and scope dialogs' ::backdrop has always used, named for the tour (3.108.0). */ --p-scrim: rgba(15, 23, 42, 0.55); /* The editors' inline notices (3.108.1): the palette's success state is the Green family, its tint and ink 6.08:1; a failure is the Red family's tint and ink, 6.10:1. */ --p-ok-tint: #F1F8E9; --p-ok-ink: #46661F; --p-error-tint: #FDE9E7; --p-error-ink: #AD1C0D; --p-shadow-raised: 0 24px 60px rgba(0, 0, 0, 0.28); --p-bg: #F5F6F7; --p-panel: #ffffff; /* Hairlines between rows: decorative, so brand Light Gray at low contrast is right. A control's OWN boundary is --p-border-strong below, which is a darker variation of the same brand gray and clears 3:1. */ --p-border: #E2E5EA; --p-border-strong: #8C8D8E; /* --------------------------------------------------------------------- THE TWO CONTROL FACES. WHITE IS THE STATEMENT, AND IT ONLY WORKS IF SOMETHING ELSE IS NOT WHITE. DESIGN.md settled this on the public filter bar in 3.61.0: white fill with a boundary means you TYPE in this or it OPENS; no fill means you PRESS it. Caladmin had the first half and not the second, so a secondary button and a text field were the same object twice, white with a 1px --p-border-strong edge and an 8px radius, differing only in font-weight. That is the whole of the reported complaint, reported three times on three screens. In caladmin "no fill" is not available: a button sits on a white card as often as on the page, so transparent IS white there. So the pair is inverted and the BUTTON takes the surface. Brand Light Gray at its own value, which spends no accent and cannot compete with the one yellow. MEASURED, in .claude/control-standard-audit.php, which fails the build if these two ever come to the same value again: #D1D3D4 face against a white card 1.50:1 #D1D3D4 face against the page #F5F6F7 1.39:1 #373433 ink on the face 8.22:1 #BFC2C4 hover face, ink on it 6.89:1 IT IS NOT THE DISABLED STATE, and the numbers are how that is kept true rather than a hope. A disabled control here is LIGHTER than the page with MUTED ink: #F3F4F6 with #6B7280 (.uc-field-nobulk) or #F9FAFB with #4B5563 (.uc-field-locked). This is darker than both, at full ink and 600 weight, and measures 1.37:1 against the nearer of them. --------------------------------------------------------------------- */ --p-control-face: #ffffff; /* you type in this, or it opens */ --p-btn-face: #D1D3D4; /* you press this */ --p-btn-face-hover: #BFC2C4; --p-text: #373433; /* brand Dark Gray, not pure black */ --p-muted: #6B6764; /* a warm gray from the same family, 5.60:1 on white */ /* The bento cards sit on the page background and need to read as raised panels without a heavy border. surface-2 is a hair off white so a card inside a card is still legible. */ --surface-2: #FFFFFF; --p-sidebar: #373433; --p-sidebar-text: #D1D3D4; --p-green: #8CC745; /* Pantone 3561 UP */ --p-gray: #D1D3D4; --p-danger: #F04937; /* Red, Pantone 179 CP. FILLS AND ICONS ONLY. */ /* The darkened red that can carry TEXT, exactly as --uc-teal-text is the darkened teal that can. Brand red measures 3.68:1 on a card and 3.40:1 on the page, both under the 4.5:1 floor, which is why DESIGN.md has it as large-text only. This is 5.44:1 and 5.03:1 on the same two grounds, and is not a new colour: it is what the danger button is filled with. */ --p-danger-text: #c0392b; /* Web brand typefaces (brand guide v3.0, p.10). */ --uc-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --uc-font-body: 'Merriweather', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; } body.uc-portal { margin: 0; background: var(--p-bg); color: var(--p-text); font-family: var(--uc-font-heading); font-size: 14px; line-height: 1.55; } .uc-portal .sfaf-icon { display: inline-block; vertical-align: -0.135em; flex-shrink: 0; } /* --------------------------------------------------------------------------- THE LINK COLOUR IS A FLOOR, NOT A RULING. THIS ONE LINE WAS REPAINTING HALF THE PORTAL. Written as `.uc-portal a` this is (0,1,1), and an anchor that declares a colour of its own through a single class is (0,1,0). One class does not beat one class plus one type, so EVERY styled link in caladmin lost its own colour to the page's link teal and there was no way to tell by reading the rule that declared it, because that rule is correct and simply never won. Nine distinct anchors were affected, found by walking each one's class list against every colour rule in this file rather than by looking at screens: a.uc-nav-item ............ the whole sidebar nav, the visible complaint a.uc-btn, a.uc-btn-sm .... every link-shaped button: Cancel, Manage, Rename a.uc-btn-primary ......... teal on SFAF yellow, 3.87:1, an actual failure a.uc-view-tab ............ the All events / My events tabs a.uc-page-num ............ the pager a.uc-portal-logout ....... meant to be --p-muted a.uc-tlink, a.uc-source-link :where() CONTRIBUTES ZERO SPECIFICITY, so the ancestor stops counting and this becomes (0,0,1): a bare still gets link teal, and anything that names a colour of its own now wins by declaring it once. Same instrument as the control fallback further down, applied to the opposite problem: there it stops a catch-all from outranking classes, here it stops a base rule from doing it. THE HOVER UNDERLINE STAYS AT (0,1,1) DELIBERATELY. Dropping it to zero too would underline every button and tab that never declares text-decoration. Anything that must not underline says so in its own :hover rule, which is (0,2,0) and wins; .uc-btn:hover and .uc-nav-item:hover both do. ------------------------------------------------------------------------- */ :where(.uc-portal) a { color: var(--uc-accent-text); text-decoration: none; } .uc-portal a:hover { text-decoration: underline; } .uc-portal h1 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -0.01em; } /* 17px sat between the section step and the subhead, and this is what every h2 in the portal falls back to when it is not a card heading. Subhead. */ .uc-portal h2 { font-size: 16px; font-weight: 600; margin: 0; } /* --------------------------------------------------------------------------- THE TYPE SCALE. FIVE STEPS, AND EVERY ONE OF THEM IS VISIBLY DIFFERENT. The coloured card headers fixed the outermost level and stopped there, so INSIDE a card everything was still within a point or two of everything else: a subhead, a field label and a line of helper text all read as one texture, which is the same complaint one level down. The ladder, largest to smallest, and nothing may sit between two steps: PAGE TITLE 24px 800 h1 SECTION 20px 700 .uc-section-head h2 CARD HEADING 14px 600 UPPERCASE, tracked, on the tinted band SUBHEAD 16px 600 Montserrat, 22px of space above FIELD LABEL 13px 600 BODY 14px 400 HELPER 12px 400 muted THE CARD HEADING IS SMALLER THAN THE SUBHEAD ON PURPOSE. Size is not what makes it dominant: uppercase, letter-spacing and a coloured band across the full width of the card do that, and all three are things no other level has. Making it larger as well would push every field further down the page for a distinction that is already unmistakable. THE SUBHEAD IS THE STEP THAT WAS MISSING. It has to beat body text at a glance, so it is larger, heavier, in the display face, and carries real space above it. Space is half the signal: a heading with a line of air over it reads as starting something, and one without reads as continuing. ------------------------------------------------------------------------- */ .uc-portal { font-size: 14px; } .uc-portal .uc-subhead, .uc-portal .uc-notify-subhead, .uc-portal .uc-schedule-head, .uc-portal .uc-picker-heading, .uc-portal h3 { font-family: var(--uc-font-heading); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--sfaf-darkgray); margin: 22px 0 8px; } /* A subhead at the very top of its container has nothing to be spaced away from, and the gap would read as a mistake. */ .uc-portal .uc-subhead:first-child, .uc-portal .uc-notify-subhead:first-child, .uc-portal .uc-schedule-head:first-child, .uc-portal .uc-picker-heading:first-child, .uc-portal h3:first-child { margin-top: 0; } /* Helper text is the quietest thing on the screen and must never be mistaken for a label. Two steps below the subhead and one below the label. */ .uc-portal .uc-hint { font-size: 12px; line-height: 1.55; font-weight: 400; color: var(--p-muted); } .uc-portal .uc-field-label { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--sfaf-darkgray); } .uc-portal .uc-muted { font-size: inherit; color: var(--p-muted); } /* --------------------------------------------------------------------------- HEADINGS HAVE TO READ AS HEADINGS. The core complaint about this portal was that everything looked the same weight, so a card heading was indistinguishable from the label of a field inside it. A heading is now three things at once, which is what makes it unmistakable at a glance rather than on inspection: Montserrat (the brand's web headline face), UPPERCASE with letter-spacing, and sitting on a tinted band that a field label never has. 14px and semibold, not big and bold. A heading does not have to be large to be a heading; it has to be DIFFERENT. Making it large would push the fields down the page for nothing. ------------------------------------------------------------------------- */ .uc-heading, .uc-card-head h2, .uc-bento-title { font-family: var(--uc-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--sfaf-darkgray); } /* ---------- Login ---------- */ /* ON TOKENS SINCE 3.109.0, and the layout the forgotten-password and reset pages share. THE LOGO is the wide one, as wide as the form and never wider than 320px: 320px at desktop, the form's whole width on a phone. The logo guide sets no clear space, so it is the card's 40px on three sides and 24px under it, above the heading. */ .uc-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--sfaf-black), var(--sfaf-darkgray)); } .uc-login-card { background: var(--p-panel); border-radius: 16px; padding: 40px; width: 400px; max-width: 100%; box-sizing: border-box; box-shadow: var(--p-shadow-raised); text-align: center; } .uc-login-brand { margin: 0 0 24px; } .uc-login-brand .uc-login-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; } .uc-login-card h1 { font-size: 22px; margin-bottom: 4px; } .uc-login-sub { color: var(--p-muted); margin: 0 0 24px; } .uc-login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .uc-login-form label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 6px; } /* Nothing about the box, only about the screen: a login field is the standard field and gets it from the baseline. It kept a 15px face and the decorative hairline as its boundary until 3.64.0, which is why the sign-in box read fainter than every field behind it. */ .uc-login-form input[type=text], .uc-login-form input[type=password] { width: 100%; } .uc-login-remember { flex-direction: row !important; align-items: flex-start; gap: 8px; font-weight: 500 !important; } .uc-login-error { background: var(--p-error-tint); color: var(--p-error-ink); padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; } .uc-login-card .uc-login-notice { margin: 0 0 16px; text-align: left; } .uc-login-aside { margin: 16px 0 0; font-size: 13px; } .uc-login-aside a { color: var(--uc-accent-text); font-weight: 600; } /* --------------------------------------------------------------------------- THE SIDEBAR. DARK, AND MEASURED ON THE DARK. THIS IS THE OPPOSITE CASE FROM EVERY OTHER SURFACE IN THIS FILE, and getting it wrong in the obvious way would have been easy. --uc-accent-text (#0E7680) exists because brand teal #16BECF is 2.26:1 on white and cannot carry text there. On #373433 the arithmetic runs the other way: #0E7680 measures 2.30:1 and is unreadable, and BRAND TEAL AT FULL VALUE IS THE CORRECT CHOICE. So the darkened teal is banned here exactly as brand teal is banned on white. NONE OF WHICH WAS ON SCREEN. Every value in the table below was correct and none of it applied: `.uc-portal a` at (0,1,1) outranked `.uc-nav-item` at (0,1,0), so the nav rendered in exactly the #0E7680 this note calls unreadable, at 2.30:1, and the icons with it because they are currentColor. The rule that says #D1D3D4 has been here since 3.16.0 and never won once. See the :where() note at the top of this file for the fix and for the eight other anchors it was doing the same thing to. EVERY PAIRING ON THIS BACKGROUND, MEASURED. Floors: 4.5:1 where there is text, 3:1 for anything that is only a shape. Dark Gray #373433 the background, relative luminance 0.0351 Light Gray #D1D3D4 inactive label + icon .................. 8.22:1 AAA White #FFFFFF hover label + icon, on #43403F ......... 10.28:1 AAA White #FFFFFF ACTIVE label 14/600, on the tint ....... 10.47:1 AAA Brand teal #16BECF ACTIVE icon, on the tint (icon, 3:1) .... 4.64:1 ok Brand teal #16BECF ACTIVE bar vs the tint (shape, 3:1) ..... 4.64:1 ok Brand teal #16BECF ACTIVE bar vs the bare bg (shape, 3:1) .. 5.47:1 ok Dark Gray #373433 on the yellow Pending badge ............. 8.92:1 AAA Yellow #FFD900 the badge itself, as a shape on the bg .. 8.92:1 White #FFFFFF brand text, footer name ................ 12.34:1 AAA #9EA1A3 the footer role label ................... 4.75:1 AA Light Gray #D1D3D4 the footer Sign out link ................ 8.22:1 AAA THE ACTIVE TINT IS 10 PERCENT, NOT 15, AND IT NO LONGER CARRIES ANYTHING. Teal at 15% over #373433 flattens to #32494A, and brand teal on that is 4.253:1, under the 4.5:1 AA floor for a 14px semibold nav label. At 10% it flattens to #344243 and the same teal measures 4.638:1. That constraint is what made "more tint" a dead end, and it is why the active state is now carried by a bar and a white label instead: with the label white at 10.47:1 the tint has no contrast job left, so the ceiling stopped mattering rather than being raised. The value stays pre-flattened, for the same reason as --uc-band: a translucent fill over an unknown backdrop cannot be contrast-checked and a flat colour can. NO COLLAPSE-TO-ICONS. A 64px rail of glyphs is a memory test. The sidebar is 240px or it is the off-canvas drawer below 720px, and nothing in between. ------------------------------------------------------------------------- */ .uc-portal-layout { display: flex; min-height: 100vh; } .uc-portal-sidebar { width: 240px; background: var(--p-sidebar); color: var(--p-sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; } /* THE STACKED LOGO, STRAIGHT ON THE SIDEBAR (3.110.0). The file is transparent, so it sits on --p-sidebar with 12px of padding all round, as wide as the sidebar's 200px of content, and "Calendar Admin" 10px under it. 3.109.0 put it on a white tile, which Mark took away. */ .uc-portal-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.10); } .uc-portal-logo-wrap { display: block; box-sizing: border-box; width: 100%; padding: 12px; } .uc-portal-logo-wrap .uc-portal-logo { display: block; width: 100%; height: auto; } .uc-portal-brandtext { font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -0.01em; } .uc-portal-nav { padding: 12px 10px; flex: 1; min-height: 0; overflow-y: auto; } .uc-nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 2px; border-radius: 9px; color: var(--p-sidebar-text); font-weight: 500; font-size: 14px; transition: background-color .15s ease, color .15s ease; } .uc-portal .uc-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; } .uc-nav-item:focus-visible { outline: 2px solid var(--sfaf-teal); outline-offset: -2px; } /* --------------------------------------------------------------------------- THE ACTIVE ROW: A BAR, A WHITE LABEL AND A TEAL ICON. NO MORE TINT. The previous treatment made the whole signal out of colour: teal label on a 10% teal tint. That is the version that could not be pushed any further, because 10% is the ceiling documented above: at 15% the tint flattens to #32494A and teal on it is 4.253:1, under the AA floor for a 14px semibold label. The way out is not more tint. It is to stop asking colour to do the whole job. So the signal is now three things that do not compete for the same contrast budget: POSITION a 4px solid brand teal bar down the row's left edge, full height. 5.47:1 against the bare sidebar and 4.64:1 against the row's own tint, so it reads as a shape either way (3:1 applies). WEIGHT the label goes WHITE at 600. 10.47:1 on the tint, against the 8.22:1 an inactive label gets, so active is the brighter of the two rather than merely a different hue from it. HUE the icon keeps brand teal, 4.64:1 on the tint. It is an icon, so 3:1 applies and it clears it comfortably. THE TINT IS KEPT, at the same 10%. It has no contrast job left now that the label is white, but it is what makes the row read as one block behind the bar rather than a bar with some text next to it. The value stays pre-flattened for the reason given above. THE LEFT CORNERS GO SQUARE WHEN ACTIVE. A full-height bar against a 9px rounded corner is either a lozenge or a sliver; squaring that one edge is what lets the bar be a clean rectangle flush against the row. THE ICON DECLARES ITS OWN COLOUR IN THIS ONE STATE ONLY. Everywhere else it is still color: inherit, so inactive and hover cannot drift from the label beside them; active is the state where they are deliberately different, and the rule says so rather than leaving it to be discovered. ------------------------------------------------------------------------- */ .uc-portal .uc-nav-item.active { background: #344243; color: #fff; font-weight: 600; border-radius: 0 9px 9px 0; } .uc-portal .uc-nav-item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sfaf-teal); } .uc-portal .uc-nav-item.active:hover { background: #344243; color: #fff; } .uc-portal .uc-nav-item.active .uc-nav-icon { color: var(--sfaf-teal); } /* The icon takes the row's colour rather than declaring its own, so the inactive and hover states cannot drift apart from the label beside them. Active is the one exception, and it is stated above. */ .uc-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; color: inherit; } .uc-nav-label { flex: 1 1 auto; min-width: 0; } /* THE ONE YELLOW THING IN THE SIDEBAR. Same discipline as the primary button: yellow means "act on this", so it appears once, on the queue. */ .uc-nav-badge { flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--uc-primary); color: var(--sfaf-darkgray); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; } /* ---------- Sidebar footer: who is signed in ---------- */ .uc-portal-foot { padding: 14px 14px 16px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; gap: 14px; } .uc-portal-me { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .uc-portal-me-name { font-size: 13.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uc-portal-me-role { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9EA1A3; } .uc-portal-signout { margin-top: 4px; font-size: 12px; font-weight: 600; align-self: flex-start; } /* .uc-portal a is (0,1,1) and would paint this the page's link teal, which is the colour that fails on this background. Two classes beat it. */ .uc-portal .uc-portal-signout { color: var(--p-sidebar-text); } .uc-portal .uc-portal-signout:hover { color: #fff; } .uc-portal-signout:focus-visible { outline: 2px solid var(--sfaf-teal); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------------------- WEGLOT'S LANGUAGE DROPDOWN, HIDDEN ON THESE SCREENS AND ONLY ON THESE. HIDING, NOT DISABLING. Weglot 5.4 is a separate plugin and its switcher is appended after , which every browser then reparents into , so it lands inside body.uc-portal and floats over the sidebar. It is not ours to remove and nothing here touches how Weglot runs: this is display: none on our own screens, and every public page keeps its switcher exactly as it is. THIS IS ALSO WHAT 3.16.0 SHOULD HAVE DONE. That release read "tidy the English/Espanol control" as a reason to build a language toggle the plugin had never had. The control was always Weglot's. The attribute and class list is Weglot's own switcher markup. The [class*="weglot"] catch is deliberate and safe: no class in this plugin contains that string, so it can only ever match theirs, and it survives them renaming a wrapper. ------------------------------------------------------------------------- */ body.uc-portal aside.country-selector, body.uc-portal .country-selector, body.uc-portal .weglot-container, body.uc-portal .wg-drop, body.uc-portal .wgcurrent, body.uc-portal #weglot_here, body.uc-portal [class*="weglot"], body.uc-portal [id*="weglot"], body.uc-portal [data-wg-hidden] { display: none !important; } .uc-portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .uc-portal-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--p-panel); border-bottom: 1px solid var(--p-border); position: sticky; top: 0; z-index: 20; } .uc-portal-menu-btn { display: none; background: none; border: none; font-size: 22px; cursor: pointer; } /* ONE SIGN-OUT (3.107.0). Log out left this bar, which then held only the menu button, and that shows only below 720px; so the bar does too. */ @media (min-width: 721px) { .uc-portal-topbar { display: none; } } .uc-portal-content { padding: 28px; max-width: 1100px; width: 100%; } .uc-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- ALL EVENTS / MY EVENTS, and every other PICK ONE OF THESE. THE SEGMENTED CONTROL IS DECLARED HERE ONCE (3.64.0) and worn by both of the places that need it. It was written out twice, 1500 lines apart and value for value identical: this, built from two real links, and the recurrence control's Repeats switch, built from radios. Two copies of one control is how the two come to disagree, and it is the same fault as the fourteen separate declarations of a text field. The elements stay different on purpose. All events / My events are LINKS, because each is a URL that can be bookmarked and shared and that survives paging and sorting. Repeats is a group of RADIOS, because it is a value on a form. Nothing about the two shapes differs, so nothing about the two declarations does either: each selector keeps its own specificity in the list, (0,2,0) for the anchor so it beats `.uc-portal a`, and (0,1,1) for the span the radio paints. AND IT IS NOT A ROW OF BUTTONS, which is the distinction the whole standard turns on. Pressing a segment picks a value; it does not do a thing. So it wears one continuous boundary with seams inside it rather than four separate edges, and the chosen one FILLS: the darkened teal with white on it, 5.35:1. Brand teal would have been 2.26:1 and is never used behind text. ------------------------------------------------------------------------- */ .uc-scope-switch, .uc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--p-border-strong); border-radius: 9px; overflow: hidden; } .uc-scope-switch { align-self: center; } .uc-seg { align-self: flex-start; } .uc-portal .uc-scope-opt, .uc-seg-opt span { display: block; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--p-text); background: var(--p-control-face); border-left: 1px solid var(--p-border); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; } .uc-portal .uc-scope-opt:first-child, .uc-seg-opt:first-child span { border-left: 0; } .uc-portal .uc-scope-opt:hover, .uc-seg-opt input:hover + span { background: var(--uc-band); color: var(--p-text); text-decoration: none; } .uc-portal .uc-scope-opt.is-on, .uc-seg-opt input:checked + span { background: var(--uc-accent-text); color: #fff; } .uc-portal .uc-scope-opt:focus-visible, .uc-seg-opt input:focus-visible + span { outline: 2px solid var(--uc-accent-text); outline-offset: -2px; } .uc-scope-switch + .uc-view-hint { margin-top: 14px; } /* The read-only table other people's events are drawn in. No actions column, no registration column, nothing clickable: see public_events_table(). */ .uc-table-public td { vertical-align: top; } /* ---------- Flash ---------- */ .uc-flash { background: #d1fae5; color: #065f46; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; } .uc-flash-info { background: #dbeafe; color: #1e40af; } /* --------------------------------------------------------------------------- EVERY CONTROL, INCLUDING THE ONES NOBODY HAS THOUGHT OF YET. THE FAULT THIS FIXES IS STRUCTURAL, not a list of misses. Until now a control was styled because it happened to sit inside a wrapper that styled it: .uc-field, .uc-filters-bar, .uc-login-form, .uc-picker-filter and a dozen others. Every one of those is a rule about a CONTAINER, so a control rendered outside all of them fell through to the browser's own chrome, and nothing said so. That is why the opt-ins search box was a raw Chrome input for four releases while the identical search box on Registrations was not: one form carried .uc-filters-bar and the other carried .uc-inline-form, which styles a `select` and nothing else. Sweeping by eye finds the ones somebody happens to open; it cannot find the ones nobody has opened yet. SO THE BASELINE IS NOW A PROPERTY OF BEING A CONTROL IN THIS PORTAL, and the wrappers only refine it. A new field in a new card is styled before anybody writes a rule for it. :where() IS LOad-BEARING, NOT TIDINESS. It contributes ZERO specificity, so this whole block scores (0,0,0) and loses to literally every class rule in this file. Written as `.uc-portal input` it would score (0,1,1) and would OUTRANK .uc-btn, .uc-link-danger, .uc-seg-opt input and the rest, which is precisely the specificity accident documented at .uc-btn-source below, where `.uc-portal a` silently repainted a button. A fallback must never be able to win an argument. WHAT IS DELIBERATELY NOT HERE: checkbox and radio, which get sizing and an accent instead of a box (a box is not a text field, see .uc-field); submit and button inputs, which are buttons; and file, which the browser draws its own way and is styled separately below. ------------------------------------------------------------------------- */ :where(.uc-portal) :where( input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select, textarea ) { padding: 9px 12px; border: 1px solid var(--p-border-strong); border-radius: 8px; /* background-color, never the shorthand: `background` resets background-image, which is what draws the chevron on a select. WHITE IS SAID OUT LOUD because it is the statement, not the default: in this portal white fill plus a boundary means you type in this or it opens, and the button face beside it is Light Gray. See --p-btn-face. */ background-color: var(--p-control-face); color: var(--p-text); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; max-width: 100%; } :where(.uc-portal) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--uc-accent-text); box-shadow: 0 0 0 3px rgba(22,190,207,0.18); } :where(.uc-portal) :where(textarea) { min-height: 72px; resize: vertical; } /* --------------------------------------------------------------------------- THE SAME CHEVRON caladmin AND wp-admin, drawn by us in both. The portal was not showing the fault the embed generator was, because nothing here sets appearance: none, so the platform still drew its own arrow. That is a working control by luck rather than by decision: the box, the border and the radius are ours and the one part that says "this opens" was the operating system's, which is why the two surfaces looked like different controls side by side. Both draw the same mark now, and the `background` shorthand in the baseline above cannot delete it, because it is set after it on background-image. ------------------------------------------------------------------------- */ /* THE END CAP CAME WITH IT IN 3.64.0, and it is the public filter bar's answer rather than a second one. The chevron alone was not enough: a select and a text field were the same white box with the same boundary, and the only difference was a 16px glyph at the far right that reads as an icon inside the field rather than as part of the control. calendar.css draws a 1px hairline just inside the right-hand end, which turns that end into a PART of the control, and that is the thing a text box does not have. HERE IT IS A SECOND BACKGROUND LAYER, NOT AN ELEMENT, and the difference between the two surfaces is why. On the public calendar the affordance has to be in the markup, because a host stylesheet saying `background: none` would delete it and the failure would be invisible. Nothing hosts /caladmin: this file is the only stylesheet on the page, and the rule that would delete it is the `background` shorthand, which is banned in the baseline above and checked by .claude/control-standard-audit.php. Two layers means the renderers do not have to wrap 21 bare selects in a span. Layer order is cap then chevron, both painted over the fill. */ :where(.uc-portal) :where(select) { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; background-image: linear-gradient(var(--p-border), var(--p-border)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E7680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: right 33px center, right 10px center; background-size: 1px 60%, 16px 16px; } /* Open, and pointing the way it opens. `:focus` rather than `:focus-visible` deliberately: the native menu is up for exactly as long as the select has focus however it was reached, including by mouse, which is the state this describes. The same reasoning as `:focus-within` on the public bar. */ :where(.uc-portal) :where(select):focus { background-image: linear-gradient(var(--p-border), var(--p-border)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E7680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); } /* A list box has no menu to open, so a chevron on it would be a lie, and an end cap with nothing behind it is the same lie in a quieter voice. */ :where(.uc-portal) :where(select[multiple], select[size]:not([size="1"])) { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 12px; } /* A BOX IS SIZED AND TINTED, NEVER BOXED. accent-color is the one property that recolors a native checkbox or radio without replacing it, so the control a keyboard and a screen reader get is still the platform's own. */ :where(.uc-portal) :where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--uc-accent-text); cursor: pointer; } :where(.uc-portal) :where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--uc-accent-text); outline-offset: 2px; } /* DATE, TIME AND FILE ARE PARTLY THE BROWSER'S, AND THAT IS NOT A MISS. The box, its border, its radius, its font and its focus ring are ours and are set above. What is NOT ours, in any browser, is the picker chrome: the calendar popover a date field opens, the spinner a time field draws, the "Choose file" button and the filename beside it. Those are UA shadow DOM with no standard hook. The list of every control in that category is in the 3.16.0 changelog rather than being chased here. What this rule does add is the one thing that IS reachable: the indicator glyph, tinted to the brand. */ :where(.uc-portal) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; } :where(.uc-portal) :where(input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator:hover { opacity: 1; } :where(.uc-portal) :where(input[type="file"]) { font-family: inherit; font-size: 13px; color: var(--p-text); padding: 8px; border: 1px dashed var(--p-border-strong); border-radius: 8px; background: var(--p-bg); max-width: 100%; } /* The one part of a file input that IS a button gets the button face, so "Choose file" reads as pressable next to every other button on the form. */ :where(.uc-portal) :where(input[type="file"])::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--p-border-strong); border-radius: 7px; background: var(--p-btn-face); color: var(--p-text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* The same fallback for buttons. Zero specificity again, so .uc-btn, .uc-link-danger, .uc-link-ok, .uc-picker-tab, .uc-help-btn and every other button class in this file override it completely. This only ever catches a button that carries no class of its own. */ /* NO `display` AND NO `gap` HERE, deliberately. Several button classes in this file position themselves (.uc-help-btn is a 16px circle, .uc-chip-remove sits inside a pill) and set no display of their own, so a display in the fallback would silently change them even though it loses every other property. A fallback should supply a surface, not a layout. */ :where(.uc-portal) :where(button, input[type="submit"], input[type="button"], input[type="reset"]) { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--p-border-strong); background: var(--p-btn-face); color: var(--p-text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; } :where(.uc-portal) :where(button, input[type="submit"]):focus-visible { outline: 2px solid var(--uc-accent-text); outline-offset: 2px; } /* --------------------------------------------------------------------------- THE BUTTON VOCABULARY. FOUR WEIGHTS AND A QUIET FIFTH, AND NOTHING ELSE. A SECONDARY BUTTON HAS A SURFACE (3.64.0). It was a white box with a 1px --p-border-strong outline and an 8px radius, which is byte for byte what a text input was, so Choose Image, Add these questions, Add FAQ, Add category, Save Draft and Back all read as the same thing as the Title field beside them. An outline on white does not say "press me"; it says "there is an edge here". The fill is what says it, and the fill is brand Light Gray: PRIMARY yellow #FFD900, ink #373433, 8.92:1. ONE per view. SECONDARY Light Gray #D1D3D4, ink #373433, 8.22:1. The default. UTILITY solid teal #0E7680, white ink, 5.35:1. "Go and get it again". DESTRUCTIVE solid #c0392b, white ink, 5.44:1. Behind a disclosure. QUIET no surface at all: .uc-action-link, .uc-link-danger, .uc-link-ok. A verb in a row of verbs, never a box. The border stays. The fill is 1.50:1 against a white card, which is a visible surface and not a boundary, so the edge is still the thing clearing WCAG 1.4.11's 3:1 at 3.33:1. Two jobs, two declarations. HOVER MOVES THE FACE, not just the edge. The old hover changed border and text colour only, so on a white card the thing that moved was a hairline. ------------------------------------------------------------------------- */ .uc-btn, .uc-form-links-open { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--p-border-strong); background: var(--p-btn-face); color: var(--p-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; } .uc-btn:hover, .uc-form-links-open:hover { background: var(--p-btn-face-hover); border-color: var(--uc-accent-text); color: var(--p-text); text-decoration: none; } .uc-btn:focus-visible, .uc-form-links-open:focus-visible { outline: 2px solid var(--uc-accent-text); outline-offset: 2px; } .uc-btn-primary, .uc-form-links-open { background: var(--uc-primary); border-color: #E0BE00; color: var(--sfaf-darkgray); } /* THE FILL IS NAMED IN THE HOVER TOO, and that is not redundancy. Until the secondary button had a face of its own, `.uc-btn:hover` set no background and a yellow button simply kept its own through the hover. It sets one now, so a rule that only darkens with a filter would hover from yellow to grey. Same shape as the 3.39.0 fault: a state rule inheriting a fill from the resting rule, which holds right up until the resting rule changes. */ .uc-btn-primary:hover, .uc-form-links-open:hover { background: var(--uc-primary); filter: brightness(0.94); color: var(--sfaf-darkgray); border-color: #E0BE00; } /* --------------------------------------------------------------------------- THE UTILITY BUTTON: "go and get it again". A THIRD WEIGHT, AND IT DOES NOT COMPETE WITH YELLOW. Fetch updates fills the pending queue; it is not what the queue is for. Publishing and dismissing are, and those are the yellow and the links on the rows. A plain white outline button said nothing about which of the two it was, which is why this one was indistinguishable from "Export CSV" on a screen where they do very different things. MEASURED. Solid --uc-accent-text #0E7680 with a white label is 5.35:1, and the fill against the page background #F5F6F7 is 4.95:1, well past the 3:1 WCAG 1.4.11 asks of a control's own boundary, so the button reads as a button without a separate border. Yellow stays the single primary. ------------------------------------------------------------------------- */ .uc-btn-utility { background: var(--uc-accent-text); border-color: var(--uc-accent-text); color: #fff; } .uc-btn-utility:hover { background: #0B5F67; border-color: #0B5F67; color: #fff; } .uc-portal a.uc-btn-utility { color: #fff; } .uc-portal a.uc-btn-utility:hover { color: #fff; } /* The mark turns when the fetch is running, so the button says "working" without losing its label. portal.js sets [disabled] for the duration. */ .uc-btn-utility .sfaf-icon { transition: transform .25s ease; } .uc-btn-utility:hover .sfaf-icon { transform: rotate(-45deg); } .uc-btn-utility[disabled] .sfaf-icon { animation: uc-spin 1.1s linear infinite; } @media (prefers-reduced-motion: reduce) { .uc-btn-utility .sfaf-icon, .uc-btn-utility:hover .sfaf-icon { transition: none; transform: none; } .uc-btn-utility[disabled] .sfaf-icon { animation-duration: 2.4s; } } .uc-btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 15px; } .uc-btn-sm { padding: 6px 12px; font-size: 13px; } .uc-link-danger { background: none; border: none; color: var(--p-danger-text); cursor: pointer; font-size: 13px; padding: 0; font-weight: 600; } /* NO SURFACE IN ANY STATE. Both of these are worn alongside .uc-btn in a few places, and since 3.64.0 `.uc-btn:hover` names a fill. A quiet action that inherited "no fill" through the hover would grow a grey box on the way past. The pair is declared together, which is the 3.39.0 rule. */ .uc-link-danger:hover { background: none; text-decoration: underline; } .uc-link-ok { background: none; border: none; color: var(--p-green); cursor: pointer; font-size: 13px; padding: 0; font-weight: 600; } .uc-link-ok:hover { background: none; text-decoration: underline; } /* ---------- Stats ---------- */ .uc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .uc-stat { background: var(--p-panel); border: 1px solid var(--p-border); border-radius: 12px; padding: 20px; text-align: center; } .uc-stat-num { display: block; font-size: 32px; font-weight: 800; color: var(--uc-accent-text); } .uc-stat-label { font-size: 13px; color: var(--p-muted); } .uc-stat-accent .uc-stat-num { color: var(--uc-accent-text); } /* To review (3.111.0) is a link to the reviewer's Pending screen, drawn as a stat. */ a.uc-stat { display: block; color: inherit; text-decoration: none; } a.uc-stat:hover, a.uc-stat:focus-visible { border-color: var(--uc-accent-text); } /* ---------- Cards / tables ---------- */ /* --------------------------------------------------------------------------- THE CARD: A TEAL EDGE AND A TINTED HEADER BAND. ONE accent, used the same way everywhere, rather than a colour per card. Colouring cards individually is exactly the kaleidoscope the guide warns against, and it would also collide with the category colours, which are a different system with real meaning behind each hue. The 3px edge is decoration and is deliberately brand teal #16BECF, which measures 2.26:1 against white. That is below the 3:1 that WCAG 1.4.11 asks of non-text content, and it is fine here because the edge carries no information: the card is identified by its heading and its own border, and removing the stripe entirely would lose nothing but the brand. Anything that DOES carry information uses --uc-accent-text, which is measured. ------------------------------------------------------------------------- */ /* NO ACCENT EDGE. Until 3.38.0 every card carried a 3px teal left border and an asymmetric 4/12/12/4 radius. An accent every card has distinguishes nothing, and the curved coloured edge is the most recognisable tell of generated UI. The card is a white panel with a hairline. Where a coloured edge survives in this plugin it is because the colour IS the fact: the category band on an event page, and the amber locator on a field that still needs filling in. */ .uc-card { background: var(--p-panel); border: 1px solid var(--p-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; overflow: hidden; } /* The band is full bleed, pulled out to the padding edge rather than achieved by unpadding the card and re-padding every child. */ .uc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -20px -20px 16px; padding: 11px 20px; background: var(--uc-band); border-bottom: 1px solid var(--p-border); } .uc-card-head h2, .uc-card-head h3 { font-size: 14px; } /* --------------------------------------------------------------------------- A HEADING AT THE TOP OF A CARD **IS** THE CARD'S HEADING, whether or not somebody wrapped it in a .uc-card-head. THE 3.14.0 TREATMENT WAS BEING APPLIED PER SCREEN, WHICH IS WHY IT DRIFTED. The band was a thing you had to remember to add, so on the series screen the Schedule card had one and the details card immediately above it did not, and the "Remove this series" card had a bare

that took the generic subhead style instead. Sixteen of thirty-nine cards in caladmin were in that state. That is the same structural fault as the 3.16.0 control sweep: a rule about a CONTAINER somebody has to opt into, rather than a rule about what a thing is. So the band now follows from being the first element of a card. A card cannot be built without it, and a heading cannot be styled two ways depending on which screen it is on. .uc-card-head is still there and still preferred, because it is the only one that can also hold a count or a status on the right of the band; this is what happens when it is absent. ------------------------------------------------------------------------- */ .uc-card > h2:first-child, .uc-card > h3:first-child { font-family: var(--uc-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 14px; color: var(--sfaf-darkgray); margin: -20px -20px 16px; padding: 11px 20px; background: var(--uc-band); border-bottom: 1px solid var(--p-border); } /* THE SAME RULE FOR THE OTHER KIND OF CARD. .uc-card got this because sixteen of thirty-nine cards had a bare heading and no band. .uc-bento-card did not, and has only escaped the same fate because every one of its headings happens to carry .uc-bento-title today. A heading at the top of a card IS that card's heading, and should not depend on somebody remembering a class, which is the argument DESIGN.md already makes. */ .uc-bento-card > h2:first-child, .uc-bento-card > h3:first-child { font-family: var(--uc-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 14px; color: var(--sfaf-darkgray); margin: -18px -18px 16px; padding: 10px 18px; background: var(--uc-band); border-bottom: 1px solid var(--p-border); } /* THE TREATMENT IS THE HEADING'S OWN TEXT, AND NOTHING THAT SITS INSIDE IT (3.105.0). text-transform and letter-spacing INHERIT, so every rule above that sets them on a heading also set them on whatever was put inside that heading. The series card and the team card carry their help button on the title, and the help panel opens inside the title, so a paragraph of help text was rendering in tracked capitals. caps-sweep-live.php reads every screen for that in Chrome, hidden panels included. Fixed here, at the treatment, and not on the panel: anything that is not the heading's own words (help, a hint, a label, a control, a sentence) is given its case and spacing back wherever a card heading holds it. :where() on both sides keeps this at zero specificity, which is all it needs: a declared value beats an inherited one at any weight, and this must never outrank a component that sets its own. */ :where(.uc-heading, .uc-card-head h2, .uc-card-head h3, .uc-bento-title, .uc-card > h2:first-child, .uc-card > h3:first-child, .uc-bento-card > h2:first-child, .uc-bento-card > h3:first-child) :where(.uc-help-body, .uc-hint, .uc-muted, .uc-field-label, p, label, small, input, select, textarea, button) { text-transform: none; letter-spacing: normal; } .uc-empty { color: var(--p-muted); padding: 24px; text-align: center; } .uc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .uc-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--p-muted); padding: 10px 12px; border-bottom: 2px solid var(--p-border); } .uc-table td { padding: 12px; border-bottom: 1px solid var(--p-border); vertical-align: middle; } .uc-table tr:last-child td { border-bottom: none; } .uc-tlink { font-weight: 600; } .uc-muted { color: var(--p-muted); } .uc-col-actions { white-space: nowrap; } .uc-row-actions { white-space: nowrap; } .uc-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .uc-actions form { display: inline; margin: 0; line-height: 1; } /* --------------------------------------------------------------------------- THE EVENTS LIST'S ACTIONS ARE ICONS (3.73.0). WHAT WAS THERE. Edit, Duplicate and Remove as three text links, one weight, two similar colours, across 259 rows. The common action did not stand out and the destructive one did not either, and the column was wide enough that some rows wrapped and some did not, so the edge of the table looked broken. NEVER WRAPS, BY CONSTRUCTION. `flex-wrap: nowrap` and three fixed-width targets: the column's width is now the same on every row whatever the row holds, which is the half of the complaint that was about the table rather than about the controls. 44px IS THE TOUCH TARGET and it is the reason for the padding rather than the glyph size. The icons are 17px; the box around them is what a finger has to hit. WCAG 2.5.5 asks for 44 and a phone is a real way to reach caladmin. SHAPE IS NEVER THE ONLY CARRIER. Each control has a `title` for a mouse and a `.uc-visually-hidden` name for a screen reader, and the destructive one has a colour on top of both. See the note in the events table for what a touch device gets, which is the clipped name, not the title. ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- BULK ADD A CATEGORY (3.73.0). ABOVE THE TABLE, NOT BELOW IT. The ticks are in the rows and the control acts on them, so it reads top to bottom: choose a category, tick the rows, press. Below the table it would be found after the scrolling rather than before it, on a list that runs to 259 rows. IT IS NOT A CARD. A second panel above a table that is already inside one would be a box in a box; this is a row of controls on the card it belongs to, separated by the same hairline the table uses. ------------------------------------------------------------------------- */ .uc-bulk-cat { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--p-border); } .uc-bulk-cat-pick { flex: 0 1 320px; margin: 0; } .uc-bulk-cat-go { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 2px; } .uc-bulk-cat-go .uc-hint { margin: 0; } .uc-bulk-cat button[disabled] { opacity: 0.55; cursor: not-allowed; } /* The tick column. Narrow, and the box centred in it so a column of them reads as a column rather than as a ragged left edge. IT IS WIDER NOW BECAUSE IT CARRIES A SECOND THING (3.79.0). A draft the bulk publish may not touch says so under its box, in the column where somebody is already deciding what to tick. 34px fitted a checkbox and nothing else. */ .uc-col-tick { width: 92px; text-align: center; padding-right: 0; } .uc-col-tick input[type="checkbox"] { margin: 0; width: auto; } .uc-tick-all { display: inline-flex; margin: 0; } /* WHY A TICKED ROW MIGHT STILL NOT PUBLISH. THE BOX STAYS AND THE REASON SITS UNDER IT, which is the opposite of the schedule screen, where an ineligible row gets no box at all. It has to be: this tick is shared with the bulk category control, which reaches every row the viewer can edit, past events and imports included. Taking the box away to protect the publish button would take the category control's reach with it, and that reach is a 3.73.0 guarantee. SO IT IS TYPED DOWN, NOT COLOURED. It is a footnote on a row, not a warning and not a status: the pills two columns over are what say what the event IS. Small, muted, and it wraps rather than widening the column further. */ .uc-tick-block { display: block; margin-top: 3px; font-size: 10px; line-height: 1.25; color: var(--p-muted, #6B6764); text-align: center; cursor: help; } /* The publish button sits on its own line under the category row, because the two are different acts and one of them is public. */ .uc-bulk-publish { flex: 1 0 100%; } .uc-actions-icons { gap: 2px; flex-wrap: nowrap; } .uc-actions-icons form { display: inline-flex; } .uc-icon-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--p-muted, #6B6764); cursor: pointer; line-height: 0; } /* THE HIT AREA IS LARGER THAN THE BOX THAT IS DRAWN, so three icons can sit two pixels apart and still be 44px to a finger. Centred on the control rather than anchored to its corner, or it would overhang one side by ten pixels and the leftmost icon would steal taps from the table's edge. */ .uc-icon-action::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .uc-icon-action:hover { color: var(--p-text); background: var(--p-surface-2, #f6f7f8); border-color: var(--p-border); text-decoration: none; } .uc-icon-action:focus-visible { outline: 2px solid var(--uc-accent-text); outline-offset: 1px; } /* THE DESTRUCTIVE ONE CARRIES ITS COLOUR AT REST, not only on hover, because a row of three identical grey glyphs is the thing this replaced. #c0392b on white is 5.44:1, which is the DESTRUCTIVE ink in the control standard. */ .uc-icon-action-danger { color: var(--p-danger-text); } .uc-icon-action-danger:hover { color: #fff; background: var(--p-danger-text); border-color: var(--p-danger-text); } /* CANCEL IS NOT A VARIANT OF REMOVE and does not take its red. It is reversible, it keeps the registrations, and it is the action offered when removing is refused. Ordinary action ink, and a different glyph. */ .uc-icon-action-cancel { color: var(--uc-accent-text); } .uc-icon-action-cancel:hover { color: var(--uc-accent-text); background: var(--p-surface-2, #f6f7f8); border-color: var(--uc-accent-text); } /* A STATE, NOT A CONTROL. No hover, no pointer, no focus ring: an imported event with registrations is removed at its source and there is nothing here to press. */ .uc-icon-action-locked { color: var(--p-muted, #6B6764); cursor: default; opacity: 0.75; } .uc-icon-action-locked:hover { background: none; border-color: transparent; color: var(--p-muted, #6B6764); } /* 14px, up from 13px. A row of actions is not helper text: Publish, Dismiss, Approve and Reject are the only things on this screen that DO anything, and they were being drawn one step below body size. Body size is the floor. */ .uc-actions .uc-action-link, .uc-actions .uc-link-danger, .uc-actions .uc-link-ok { font-size: 14px; font-weight: 600; line-height: 1; } /* --------------------------------------------------------------------------- .uc-action-link ON A