/* * Ad Agentur — UTM Builder * * Loaded ON TOP of aa-preview-tool.css, which supplies the card frame, the util bar, * the fields, the checklist rows and every design token. This file is only what the * builder adds. Registered with the base stylesheet as a dependency, so the order is * WordPress's to keep rather than a coincidence. * * Every rule is scoped to .aa-utm, not just .aa-preview. Both shortcodes can appear on * one page, and rules like `.check-row { grid-template-areas: ... }` below would * otherwise re-lay-out the Sichtbarkeits-Check's own Prüfliste rows. * * Two data-aa names are deliberately NOT reused from the preview tool — its stylesheet * already styles [data-aa="openAll"] and [data-aa="clearList"] at .aa-preview level, so * the builder's header buttons are openAllLinks / clearAll instead. Reusing the names * would drag in the other tool's box sizing and its armed-state padding, and the armed * padding alone would move the header (§10: the armed state must not move anything). * * @package AA_Preview_Tool */ /* The platform / analytics picker, kept as the card grid it already is — the selection affordance is the only thing that changes: the theme blue becomes --navy on --navy-bg, which is exactly how .pill-toggle and .aa-sug already mark "chosen" elsewhere in the widget. */ .aa-preview.aa-utm .utm-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .aa-preview.aa-utm .utm-cards.tags { grid-template-columns: repeat(4, 1fr); } .aa-preview.aa-utm .utm-card { display: flex; align-items: center; gap: 9px; padding: 11px 12px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; /* Named properties, not `transition: .15s` — see the note on .util-link. */ transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .aa-preview.aa-utm .utm-card:hover { border-color: var(--navy); } .aa-preview.aa-utm .utm-card.active { border-color: var(--navy); background: var(--navy-bg); color: var(--navy); } .aa-preview.aa-utm .utm-card svg { width: 18px; height: 18px; flex: none; } .aa-preview.aa-utm .utm-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Top block full width, then the two columns — the shape of the current builder, which works: pick the platform once, then fill on the left and watch the result build on the right. */ .aa-preview.aa-utm .utm-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .aa-preview.aa-utm .utm-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .aa-preview.aa-utm .utm-result { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; } .aa-preview.aa-utm .utm-result .url-preview { background: var(--surface); } .aa-preview.aa-utm .utm-result h3 { margin: 0 0 8px; } .aa-preview.aa-utm .utm-result [data-aa="tmplWrap"] { margin-top: 18px; } .aa-preview.aa-utm .utm-result .cta-row { margin-top: 18px; } .aa-preview.aa-utm .h2-hint, .aa-preview.aa-utm .h3-hint { font-weight: 500; color: var(--ink-faint); text-transform: none; letter-spacing: 0; } .aa-preview.aa-utm .req { color: var(--bad); font-weight: 700; margin-left: 3px; } .aa-preview.aa-utm .utm-label-row { display: flex; align-items: baseline; gap: 6px; } .aa-preview.aa-utm .utm-label-row .label-spacer { flex: 1; } .aa-preview.aa-utm .utm-param { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; white-space: nowrap; } .aa-preview.aa-utm .utm-result .utm-param { background: var(--surface); } /* The Preview Tool's switch chips name a URL parameter (`adtest=on`), so the slot is sized for ~10 characters. These settings have only a before/after example, which is longer and overflowed the card at 320. Below 560 the example goes and the label carries it — the same trade `.label-hint` already makes at 640. */ @media (max-width: 560px) { .aa-preview.aa-utm .utm-settings .switch-code { display: none; } } /* Grid items default to min-width:auto, so the long generated URL in the right column refused to shrink and starved the left one down to ~150px. This is the fix, and it is why .url-preview code already scrolls on its own. */ .aa-preview.aa-utm .utm-split > * { min-width: 0; } /* The widget styles `.card h2` as its section heading but leaves h3 to `.checklist`. These three headings sit outside it, so they borrow the same treatment rather than inventing a second one. */ .aa-preview.aa-utm .utm-fields h3, .aa-preview.aa-utm .utm-result h3 { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; } /* Vertical rhythm for the two picker blocks. `.hintline` is scoped to `.field` in the widget, so a standalone one needs its own size and the spacing that follows it. */ .aa-preview.aa-utm .card-body > h2 { margin-bottom: 10px; } .aa-preview.aa-utm .card-body > h2 ~ h2 { margin-top: 22px; } .aa-preview.aa-utm .utm-custom .hintline, .aa-preview.aa-utm .utm-result .hintline { font-size: 11px; color: var(--ink-faint); margin-top: 8px; } .aa-preview.aa-utm .utm-cards + .hintline { font-size: 11px; color: var(--ink-faint); margin-top: 8px; } /* Macro chips under each field. The live builder shows the platform's own ValueTrack variables plus its date placeholders once a field has focus; they are the fastest way to get {keyword} or {{ad.name}} right without leaving the form. Kept always-visible here rather than focus-only — on a phone a chip row that appears on focus sits under the keyboard. */ .aa-preview.aa-utm .utm-chips { display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px; } /* Revealed for the field being edited only. Six fields' worth of chips at once added about 200px of height and buried the result panel; the live builder shows them on focus for the same reason. focus-within, so clicking a chip does not close the row. */ .aa-preview.aa-utm .field:focus-within .utm-chips { display: flex; } .aa-preview.aa-utm .utm-chip { font: inherit; font-family: var(--mono); font-size: 10.5px; color: var(--navy); background: var(--navy-bg); border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .aa-preview.aa-utm .utm-chip:hover { border-color: var(--navy); } .aa-preview.aa-utm .utm-chip.is-date { color: var(--ink-soft); background: var(--paper); } /* Favicon of the destination, inside the field. Confirms at a glance that the URL points where you think it does. */ .aa-preview.aa-utm .url-input-wrap { position: relative; } /* The widget sets `.aa-preview.aa-utm .field input[type="text"] { padding: 11px 12px }` at (0,3,1). A plain `.url-input-wrap input` is (0,2,1) and loses on specificity, so the favicon sat on top of the URL text. Beat it outright rather than relying on order. */ .aa-preview.aa-utm[data-aa-root] .url-input-wrap input[type="text"] { padding-left: 34px; } .aa-preview.aa-utm .url-favicon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 3px; pointer-events: none; } .aa-preview.aa-utm .url-favicon:not([src]), .aa-preview.aa-utm .url-favicon[src=""] { display: none; } .aa-preview.aa-utm .url-test { font-size: 11.5px; color: var(--navy); font-weight: 600; } .aa-preview.aa-utm [data-aa="urlMsg"]:empty, .aa-preview.aa-utm [data-aa="macroWarn"]:empty { display: none; } .aa-preview.aa-utm .utm-explain { margin-top: 16px; } /* The header grid is "title count rest clear" with four columns; the CSV export is a fifth child and wrapped onto its own line until the template was extended. */ .aa-preview.aa-utm .checklist-head { grid-template-columns: 1fr auto auto auto auto auto; grid-template-areas: "title count share rest csv clear"; } .aa-preview.aa-utm [data-aa="csv"] { grid-area: csv; } /* The header's own share button. The util bar's carries data-aa="share"; this one is shareList so the two are addressable separately — same handler, different placement. */ .aa-preview.aa-utm [data-aa="shareList"] { grid-area: share; } /* All four header controls need an explicit area. The Preview Tool places its two via [data-aa="openAll"] / [data-aa="clearList"]; these carry no such hook, so two of them were auto-placed and only lined up by coincidence of column widths. */ .aa-preview.aa-utm [data-aa="openAllLinks"] { grid-area: rest; } /* "Testen" was never a peer of copy and save — it inspects the URL, exactly as "Seite öffnen" inspects the Ziel-URL. Putting it on the field it acts on makes both URL rows read the same way and gives the button row two real peers instead of three competing ones. */ .aa-preview.aa-utm .utm-result-head { display: flex; align-items: baseline; gap: 12px; } .aa-preview.aa-utm .utm-result-head h3 { flex: 1; margin: 0 0 8px; } .aa-preview.aa-utm .url-test { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--navy); white-space: nowrap; } .aa-preview.aa-utm .url-test-icon { width: 12px; height: 12px; flex: none; } /* The QR panel is ~420px wide and the code is 168px; stacking the buttons under it spent a whole row on dead space beside it. */ .aa-preview.aa-utm .qr-body { display: flex; align-items: flex-start; gap: 16px; } .aa-preview.aa-utm .qr-body .qr-wrap { padding: 0; flex: none; } .aa-preview.aa-utm .qr-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .aa-preview.aa-utm .qr-side .qr-actions { flex-direction: column; align-items: stretch; gap: 6px; } .aa-preview.aa-utm .qr-side .btn-secondary { justify-content: flex-start; } .aa-preview.aa-utm .qr-side .qr-sheet { margin-left: 0; } @media (max-width: 560px) { .aa-preview.aa-utm .qr-body { flex-direction: column; align-items: center; } .aa-preview.aa-utm .qr-side { width: 100%; } } /* A QR code carrying {keyword} is never right: the scanner sends the literal text, the visitor lands on a broken URL and the report fills with "{keyword}". This is the one place the tool can catch it, because it is the only place that knows the link is heading for print. Warn loudly, but still allow the download — the tool informs, it does not lock people out. */ .aa-preview.aa-utm .qr-warn { display: flex; gap: 8px; align-items: flex-start; background: var(--bad-bg); border: 1px solid var(--bad); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 11.5px; color: var(--bad); line-height: 1.45; } .aa-preview.aa-utm .qr-warn[hidden] { display: none; } .aa-preview.aa-utm .qr-warn code { font-family: var(--mono); font-size: 10.5px; background: var(--surface); border-radius: 4px; padding: 0 4px; } .aa-preview.aa-utm .qr-note-soft { font-size: 11px; color: var(--amber); margin-bottom: 10px; } .aa-preview.aa-utm .qr-note-soft[hidden] { display: none; } /* What the sheet left out. --bad rather than --amber: this is the same finding as the row chip and the dialog banner, just reported after the fact, and one warning that changes colour depending on which surface says it is two warnings to the reader. :empty so the line takes no space until there is something to report — it sits in a flex column with gap, where an empty box would still add one gap. */ .aa-preview.aa-utm .qr-sheet-note { font-size: 11px; color: var(--bad); line-height: 1.45; } .aa-preview.aa-utm .qr-sheet-note:empty { display: none; } /* Undo beats a prompt for a single row: no friction when you meant it, full recovery when you did not. The header's "clear everything" keeps the Preview Tool's two-tap arm, because that one is not recoverable. */ .aa-preview.aa-utm .utm-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--navy-ink); color: #fff; border-radius: var(--r-sm); padding: 9px 12px; margin-top: 10px; font-size: 12px; } .aa-preview.aa-utm .utm-undo[hidden] { display: none; } .aa-preview.aa-utm [data-aa="clearAll"].armed { background: var(--bad-bg); color: var(--bad); } .aa-preview.aa-utm .utm-undo button { font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 2px 4px; } .aa-preview.aa-utm [data-aa="clearAll"] { grid-area: clear; } /* The list is the thing being kept, so it gets a name. Styled as the heading it replaces — it only looks like a field once you are in it. */ .aa-preview.aa-utm .list-name { font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; width: 100%; max-width: 320px; transition: border-color .15s ease, background-color .15s ease; } .aa-preview.aa-utm .list-name:hover { border-color: var(--line); } .aa-preview.aa-utm .list-name:focus { border-color: var(--navy); background: var(--surface); box-shadow: 0 0 0 3px var(--navy-bg); outline: none; } .aa-preview.aa-utm .list-name::placeholder { color: var(--ink-soft); opacity: 1; } .aa-preview.aa-utm .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* A shared list never overwrites silently — the recipient may have their own work open. Merge, replace and discard are all one click, and nothing happens until one of them is chosen. */ .aa-preview.aa-utm .utm-import { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--navy-bg); border: 1px solid var(--navy); border-radius: var(--r-md); padding: 14px 16px; margin-top: 22px; } .aa-preview.aa-utm .utm-import[hidden] { display: none; } .aa-preview.aa-utm .utm-import-text { flex: 1; min-width: 200px; font-size: 13px; color: var(--navy-ink); } .aa-preview.aa-utm .utm-import-text b { font-weight: 700; } .aa-preview.aa-utm .utm-import-actions { display: flex; gap: 8px; flex-wrap: wrap; } .aa-preview.aa-utm .utm-import .btn-secondary { background: var(--surface); } /* The Preview Tool pins its two header icons to a 28px box with padding:0 so they land in the rows' icon columns rather than near them. These three inherited .util-link's 6px/10px padding instead and measured 34px, which put their glyph centres 15/9/3px left of the qr/copy/bin columns below — only the last pair happened to line up, because the grids share a right edge. Same box, same gap, same columns. */ .aa-preview.aa-utm .checklist-head .util-link { display: grid; place-items: center; width: 28px; min-width: 28px; height: 28px; padding: 0; } @media (max-width: 640px) { .aa-preview.aa-utm .checklist-head .util-link { width: 22px; min-width: 22px; height: 22px; } } /* At 320 the header needs 250px in a 208px box: "GESPEICHERTE LINKS" cannot shrink below its longest word, so the three icons were pushed 33.6px past the content edge and out of the rows' columns. The Preview Tool gets away with the same grid because it has a shorter title and one icon fewer. Dropping "Gespeicherte" brings it to 192px and the header keeps its single row. */ @media (max-width: 480px) { .aa-preview.aa-utm .checklist-head .head-long { display: none; } } .aa-preview.aa-utm .checklist-head h3 { min-width: 0; } /* Field tooltip. The widget's own info popovers are body-appended and viewport-clamped; this is the inline stand-in for the mockup. */ .aa-preview.aa-utm .info-wrap { position: relative; display: inline-flex; } /* The info glyph is 16px; WCAG 2.5.8 asks for 24px of target. Growing the button would move the label row, so the target is extended with an overlay instead — box, glyph and every §10 alignment measurement stay exactly where they were. */ .aa-preview.aa-utm .infobtn { position: relative; } .aa-preview.aa-utm .infobtn::after { content: ''; position: absolute; inset: -4px; } .aa-preview.aa-utm .aa-tip { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 20; width: 250px; max-width: 60vw; background: var(--navy-ink); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.45; padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow-pop); } .aa-preview.aa-utm .utm-explain .no-ad-body b { color: var(--navy); font-weight: 600; } /* Two peers, side by side. This was a full-width primary over two 50/50 secondaries while "Testen" was still a button here; moving Testen onto the URL field it acts on left exactly two actions, which fit a single row without any of them shrinking. */ .aa-preview.aa-utm .utm-result .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 480px) { /* Below 480 a half column is ~140px and "URL kopieren" with its icon needs ~150 — the label wrapped and the primary grew to 71px against the secondary's 47. Full width each, rather than shrinking the type to force a fit. */ .aa-preview.aa-utm .utm-result .cta-row { grid-template-columns: 1fr; } } .aa-preview.aa-utm [data-aa="save"] { cursor: pointer; } /* Analyse-Tool, collapsed to one line. Expanded it pushed the first input to 37% of the card height; the summary keeps the current choice readable and one click away. */ .aa-preview.aa-utm .utm-tagbar { margin: 0 0 6px; } .aa-preview.aa-utm .utm-tagsummary { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .aa-preview.aa-utm .utm-tagsummary:hover { border-color: var(--navy); color: var(--navy); } .aa-preview.aa-utm .utm-tagsummary-label { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; } .aa-preview.aa-utm .utm-tagsummary-val { color: var(--ink); font-weight: 600; } .aa-preview.aa-utm .utm-caret { width: 13px; height: 13px; transition: transform .15s ease; } .aa-preview.aa-utm .utm-tagsummary[aria-expanded="true"] .utm-caret { transform: rotate(180deg); } .aa-preview.aa-utm .utm-cards.tags[hidden], .aa-preview.aa-utm [data-aa="tagHint"][hidden] { display: none; } /* Verification chips. A 300-character monospace line that scrolls sideways is not checkable — this shows what each parameter will actually carry, and strikes through the raw value whenever normalisation changed it, which is otherwise invisible. */ .aa-preview.aa-utm .utm-verify { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .aa-preview.aa-utm .v-chip { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; color: var(--ink); } .aa-preview.aa-utm .v-chip b { color: var(--ink-soft); font-weight: 500; } .aa-preview.aa-utm .v-chip s { color: var(--ink-faint); } .aa-preview.aa-utm .v-chip.is-missing { border-style: dashed; color: var(--ink-faint); } .aa-preview.aa-utm .v-chip.is-missing b { color: var(--ink-faint); } .aa-preview.aa-utm .v-chip.is-required-missing { border-color: var(--amber); color: var(--amber); } .aa-preview.aa-utm .v-chip.is-required-missing b { color: var(--amber); } .aa-preview.aa-utm .v-chip.is-macro { border-color: var(--navy); color: var(--navy); } /* The result follows you down the form instead of scrolling away. */ @media (min-width: 1001px) { .aa-preview.aa-utm .utm-result { position: sticky; top: 16px; } } .aa-preview.aa-utm .btn-primary.is-blocked { background: var(--line); color: var(--ink-soft); pointer-events: none; } /* --- spacing audit ------------------------------------------------------------ Measured every vertical gap in the card body. Two real defects, both mine: the hint under the platform cards sat 0px from the Analyse-Tool bar, so it read as a label for the bar rather than for the cards it describes; and the two section gaps disagreed (22px above the split, 20px below it). The widget's own rhythm is 6 / 8 / 10 / 12 / 14 / 16 / 20 / 22 / 24 — these now sit on it, and the three values of mine that were off it (9px card gap, 3/7 chip, 7/11 summary) are corrected. The widget's own paddings (input 11/12, url-preview 6/12, checklist 14/16, btn-primary 12/22) are deliberately untouched. */ .aa-preview.aa-utm .utm-cards + .hintline { margin-bottom: 16px; } .aa-preview.aa-utm .utm-tagbar { margin: 0 0 8px; } .aa-preview.aa-utm .utm-split { margin-top: 22px; padding-top: 22px; } .aa-preview.aa-utm .checklist { margin-top: 22px; } .aa-preview.aa-utm .utm-card { gap: 8px; } .aa-preview.aa-utm .v-chip { padding: 4px 8px; } .aa-preview.aa-utm .utm-tagsummary { padding: 8px 12px; } /* One secondary tier, so the panel's own actions stop borrowing the row-control look. Same height and radius as the primary; navy on white instead of white on green. */ .aa-preview.aa-utm .btn-secondary { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--navy); background: var(--surface); border: 1px solid var(--line); border-radius: 100px; /* 15px/11px, not 14px/11px: the primary is borderless at 12px padding and 15px type, so a bordered button needs one less padding pixel and the same type size to land on the identical 47px box. At 14px it measured 46px and sat 1px high in the row. */ padding: 11px 20px; cursor: pointer; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .aa-preview.aa-utm .btn-secondary:hover { border-color: var(--navy); background: var(--navy-bg); } .aa-preview.aa-utm .btn-secondary.btn-sm { font-size: 12px; padding: 5px 11px; font-weight: 600; } /* Custom parameters */ .aa-preview.aa-utm .utm-custom { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .aa-preview.aa-utm .utm-custom-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .aa-preview.aa-utm .utm-custom-head h3 { margin: 0; flex: 1; } .aa-preview.aa-utm .utm-crow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; } .aa-preview.aa-utm .utm-crow input { font-family: var(--mono); font-size: 12px; /* min-width:auto is the grid default and the long placeholder refused to shrink below it — the row pushed 106px past the card at 320 and gave the whole page a horizontal scrollbar. Third time this default has bitten in this build. */ min-width: 0; } .aa-preview.aa-utm .utm-crow .check-del { align-self: center; } .aa-preview.aa-utm [data-aa="customRows"]:empty + .hintline { margin-top: 0; } /* Saved links: the URL is the thing you are actually saving, so show it. A flex row rather than one ellipsing box, because the line carries two things of very different importance: the macro warning must never be what gets truncated. The warning is flex:none, the URL takes the remainder and absorbs all of the ellipsis. */ .aa-preview.aa-utm .check-url { grid-area: url; display: flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); overflow: hidden; } .aa-preview.aa-utm .check-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aa-preview.aa-utm .check-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "state kw open qr copy del" "state url open qr copy del" "state meta open qr copy del"; } .aa-preview.aa-utm .check-qr { grid-area: qr; } .aa-preview.aa-utm .check-qr { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink-faint); background: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .aa-preview.aa-utm .check-qr:hover { color: var(--navy); background: var(--navy-bg); } .aa-preview.aa-utm .check-qr svg { width: 14px; height: 14px; } @media (max-width: 640px) { .aa-preview.aa-utm .check-qr { width: 22px; height: 22px; } } /* --- the settings panel --------------------------------------------------------- One row per setting: toggle, what it does, what it does to a value. The base stylesheet's .switch-row is a bordered, tinted box because there each switch sits under its own field label; here that border made the description read as an input someone could type into, and stacking the example under the label spent two lines on four words. Left to right in reading order — state, meaning, effect. */ .aa-preview.aa-utm .utm-switches { display: grid; gap: 4px; } .aa-preview.aa-utm .utm-switch { display: flex; align-items: center; gap: 12px; padding: 7px 0; min-width: 0; } .aa-preview.aa-utm .utm-switch .switch { flex: none; } .aa-preview.aa-utm .utm-switch-label { font-size: 13px; font-weight: 600; color: var(--ink); } /* Pushed to the far end so the three examples line up as a column of their own, which is what makes them scannable as a set rather than three loose fragments. */ .aa-preview.aa-utm .utm-switch-example { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; } .aa-preview.aa-utm .utm-switch-example code { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } .aa-preview.aa-utm .utm-switch-arrow { color: var(--ink-faint); font-size: 11px; } @media (max-width: 560px) { /* At 320 the label plus both examples need ~300px in a 244px row. The example is the illustration, the label is the setting — so the example wraps to its own line and indents to the label, rather than either of them ellipsing to nothing. flex-basis:100% is what forces the wrap; flex-shrink then takes the 46px indent back off it, which is why the right edge still lands on the rail. Spelled out because `width:100%` did the same thing by accident and read like a bug. */ .aa-preview.aa-utm .utm-switch { flex-wrap: wrap; row-gap: 2px; } .aa-preview.aa-utm .utm-switch-example { flex: 0 1 100%; margin-left: 46px; } } /* What is still missing, on its own line — never on the button. Putting it on the label turned the primary action grey, wrapped it to two lines and changed its width on every keystroke, which shoved the neighbouring button sideways. */ .aa-preview.aa-utm .cta-note { margin-top: 8px; font-size: 11.5px; color: var(--amber); line-height: 1.45; } .aa-preview.aa-utm .cta-note:empty { display: none; } /* A saved row carrying a platform macro used to look exactly like a clean one — the warning arrived only once the QR dialog was already open, which is after the decision. A QR code with {keyword} in it is always wrong: a scanner transmits the literal text, so the visitor lands on a broken URL and the report fills with "{keyword}". So the row says it first, in three places that each survive a different width: * the words, as a chip on the URL line — always visible, even at 320 * the macro itself, marked where it actually sits — the ellipsis can eat this one on a phone, which is why it is the supporting signal and not the only one * the QR icon in --bad, the same "this control does damage" colour the header's bin already carries at rest; its title/aria-label name the macro and the consequence Warn, don't block — the dialog still opens and the download still works. Same red as .qr-warn, which is the same finding one surface later. #B23B3B on #FBEAEA is 5.07:1. The chip NAMES the macro rather than only pointing at it. First version relied on the inline mark to do that, and the render showed why it cannot: the placeholder sits at the end of a utm_ query string, so the URL ellipsed before it at every width including 1140 — the one signal that identified the actual problem was the one never on screen. */ .aa-preview.aa-utm .check-macro { flex: none; display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--bad); background: var(--bad-bg); border-radius: 4px; padding: 0 4px; } .aa-preview.aa-utm .check-macro code { font-family: var(--mono); font-size: 10px; font-weight: 500; background: var(--surface); border-radius: 3px; padding: 0 3px; } .aa-preview.aa-utm .url-macro { color: var(--bad); background: var(--bad-bg); border-radius: 4px; padding: 0 2px; } /* (0,3,0) and (0,4,0) — both outrank .check-qr's own (0,2,0) rest and hover colours outright rather than relying on which rule sits lower in the file (§7.8). */ .aa-preview.aa-utm .check-row.has-macro .check-qr { color: var(--bad); } .aa-preview.aa-utm .check-row.has-macro .check-qr:hover { color: var(--bad); background: var(--bad-bg); } .aa-preview.aa-utm .check-src { display: inline-flex; align-items: center; gap: 5px; } .aa-preview.aa-utm .check-src svg { width: 12px; height: 12px; flex: none; } .aa-preview.aa-utm .check-row.is-dupe { background: var(--amber-bg); border-radius: 6px; } @media (max-width: 560px) { /* Two inputs plus a delete button do not fit a phone row; name over value. */ .aa-preview.aa-utm .utm-crow { grid-template-columns: 1fr auto; } .aa-preview.aa-utm .utm-crow input:first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { /* Four controls no longer fit beside the name: at 320 the campaign collapsed to "s…", and the name is the one thing that identifies the row. The actions get their own line, right-aligned under the meta. Costs ~30px of height and buys back the entire name — the Preview Tool kept three controls inline because three fit. */ .aa-preview.aa-utm .check-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "state kw kw kw kw kw" ". url url url url url" ". meta meta meta meta meta" ". . open qr copy del"; row-gap: 2px; } .aa-preview.aa-utm .check-row .check-open { justify-self: end; margin-top: 4px; } .aa-preview.aa-utm .check-row .check-qr, .aa-preview.aa-utm .check-row .check-copy, .aa-preview.aa-utm .check-row .check-del { margin-top: 4px; } } /* Icons on the three result actions. 15px to sit with 15px type; the primary keeps its text on the optical centre because the icon is inside the same flex box. */ .aa-preview.aa-utm .btn-icon { width: 15px; height: 15px; flex: none; } .aa-preview.aa-utm .btn-primary { display: inline-flex; align-items: center; gap: 8px; } .aa-preview.aa-utm .btn-secondary { gap: 7px; } /* Weitere Parameter — the inputs were inheriting the tall .field padding meant for single-column fields, which made a two-up row look heavier than the fields above it. */ .aa-preview.aa-utm .utm-crow input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); } .aa-preview.aa-utm .utm-crow input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-bg); } .aa-preview.aa-utm .utm-crow input::placeholder { color: var(--ink-faint); } .aa-preview.aa-utm .utm-crow .check-del { width: 28px; height: 28px; /* .check-del carries `grid-area: del` for the Pruefliste rows. Reused here it names a line this grid never declared, so the browser invented tracks — the row computed as `277px 277px 0px 0px 28px` over two rows and dropped the bin onto its own line. Reusing a class outside the grid it was written for is the whole bug. */ grid-area: auto; align-self: center; } .aa-preview.aa-utm .utm-custom-head { align-items: baseline; } .aa-preview.aa-utm .url-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .aa-preview.aa-utm .url-actions .hintline { margin: 0; } /* QR */ .aa-preview.aa-utm .qr-wrap { display: flex; justify-content: center; padding: 10px 0 12px; } .aa-preview.aa-utm .qr-wrap svg { width: 168px; height: 168px; display: block; border: 1px solid var(--line); border-radius: var(--r-sm); } .aa-preview.aa-utm .qr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aa-preview.aa-utm .qr-actions .btn-secondary { gap: 6px; } .aa-preview.aa-utm .qr-actions .btn-icon { width: 13px; height: 13px; } .aa-preview.aa-utm .qr-sheet { margin-left: auto; } .aa-preview.aa-utm .utm-qr { margin-top: 14px; } /* Consistency: a value that nearly matches one already used is the single most common way UTM reporting silently splits in two. Amber, not red — it is a question, not an error. */ .aa-preview.aa-utm .utm-near { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--amber); } .aa-preview.aa-utm .utm-near button { font: inherit; font-family: var(--mono); font-size: 10.5px; color: var(--amber); background: var(--amber-bg); border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; cursor: pointer; } .aa-preview.aa-utm .utm-near button:hover { border-color: var(--amber); } .aa-preview.aa-utm .field.has-warn input { border-color: var(--amber); } @media (max-width: 1000px) { .aa-preview.aa-utm .utm-cards { grid-template-columns: repeat(3, 1fr); } /* .tags must be restated here. A media query adds no specificity, so the base `.utm-cards.tags` (0,3,0) still outranks `.utm-cards` (0,2,0) inside it — the tag row silently stayed 4-up and ellipsed "Google Analytics" at 768. */ .aa-preview.aa-utm .utm-cards.tags { grid-template-columns: repeat(2, 1fr); } .aa-preview.aa-utm .utm-split { grid-template-columns: 1fr; } } @media (max-width: 640px) { .aa-preview.aa-utm .utm-cards, .aa-preview.aa-utm .utm-cards.tags { grid-template-columns: repeat(2, 1fr); } /* A 2-up cell is ~155px here and "Google Analytics" is the longest label; at 13px it ellipsed. One step down fits every label without truncation. */ .aa-preview.aa-utm .utm-card { font-size: 12px; padding: 10px; gap: 8px; } .aa-preview.aa-utm .utm-card svg { width: 16px; height: 16px; } /* One column: at 390 a 2-up cell is ~155px and "Kampagne" + its utm_campaign badge needs ~156px, so the badge clipped. Wrapping it instead would make some label rows two lines tall and break the input-top alignment §10 measures. */ .aa-preview.aa-utm .utm-pairs { grid-template-columns: 1fr; } } @media (max-width: 380px) { /* At 320 a 2-up cell is ~127px and the longest labels still ellipsed. One column. */ .aa-preview.aa-utm .utm-cards, .aa-preview.aa-utm .utm-cards.tags { grid-template-columns: 1fr; } } /* --- the row QR dialog ---------------------------------------------------------- * A dialog rather than an immediate download: guessing SVG when the user may have * wanted PNG — and handing them a file they have not seen — is two decisions taken on * their behalf. * * Appended to , not to the widget, and created once for the whole page. It is * position:fixed, and a fixed element inside an ancestor with transform, filter or * perspective is positioned against THAT ancestor instead of the viewport — so on a * page builder that animates a section, a full-screen overlay would end up trapped * inside the card. The same reason .aa-preview-pop is body-appended in the base * stylesheet. * * Being outside .aa-preview it inherits no custom properties, so the colours here are * literal. They are the same tokens: --navy-ink #173F69, --surface #fff, --ink-faint * #a39a98, --line #E6E1DF, --bad #B23B3B, --bad-bg #FBEAEA, --navy #265E9A, * --navy-bg #E8EFF6. */ .aa-utm-qrmodal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(23, 63, 105, .45); /* Body-appended, so it inherits the theme's typeface exactly as the widget does. */ font-family: inherit; font-size: 16px; line-height: 1.55; color: #423838; text-align: left; box-sizing: border-box; } .aa-utm-qrmodal[hidden] { display: none; } .aa-utm-qrmodal *, .aa-utm-qrmodal *::before, .aa-utm-qrmodal *::after { box-sizing: border-box; } .aa-utm-qrmodal .qr-dialog { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(16, 24, 32, .18); padding: 20px; max-width: 380px; width: 100%; } .aa-utm-qrmodal h3 { margin: 0 0 4px; padding: 0 34px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7C7170; } .aa-utm-qrmodal .qr-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; color: #a39a98; word-break: break-all; margin-bottom: 12px; max-height: 48px; overflow: hidden; } .aa-utm-qrmodal .qr-url.has-macro { color: #B23B3B; } /* Same red banner as the panel's, because it is the same finding one surface later. */ .aa-utm-qrmodal .qr-warn { display: flex; gap: 8px; align-items: flex-start; background: #FBEAEA; border: 1px solid #B23B3B; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 11.5px; line-height: 1.45; color: #B23B3B; } .aa-utm-qrmodal .qr-warn[hidden] { display: none; } .aa-utm-qrmodal .qr-warn code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; background: #fff; border-radius: 4px; padding: 0 4px; } .aa-utm-qrmodal .qr-wrap { display: flex; justify-content: center; padding: 0 0 12px; } .aa-utm-qrmodal .qr-wrap svg { width: 168px; height: 168px; display: block; border: 1px solid #E6E1DF; border-radius: 8px; } .aa-utm-qrmodal .qr-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } /* The dialog is outside .aa-preview, so .btn-icon's sizing does not reach it. */ .aa-utm-qrmodal .btn-icon { width: 13px; height: 13px; flex: none; } .aa-utm-qrmodal .btn-secondary { gap: 6px; } .aa-utm-qrmodal .btn-secondary { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 12px; font-weight: 600; color: #265E9A; background: #fff; border: 1px solid #E6E1DF; border-radius: 100px; padding: 5px 11px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .aa-utm-qrmodal .btn-secondary:hover { border-color: #265E9A; background: #E8EFF6; } .aa-utm-qrmodal .qr-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #a39a98; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .aa-utm-qrmodal .qr-close:hover { color: #265E9A; background: #E8EFF6; } .aa-utm-qrmodal .qr-close svg { width: 15px; height: 15px; } /* * The theme reset, again — this element is outside .aa-preview, so the base * stylesheet's .aa-preview[data-aa-root] rules do not reach it and Kadence's * `button:hover, button:focus, button:active { box-shadow: ... }` would paint its * shadow on all three buttons here (§7.8). An id would be cleaner than a class for * winning that fight, but ids must stay per-instance; the class is doubled instead, * which is (0,2,1) against the theme's (0,1,1) and does not depend on source order. */ .aa-utm-qrmodal.aa-utm-qrmodal button:hover, .aa-utm-qrmodal.aa-utm-qrmodal button:focus, .aa-utm-qrmodal.aa-utm-qrmodal button:active { box-shadow: none; } .aa-utm-qrmodal.aa-utm-qrmodal button:focus-visible { outline: 2px solid #265E9A; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .aa-utm-qrmodal * { transition: none !important; } }