/** * TrustLens control layer — the one place a button, a field or a select is * given its shape. * * The screens had eleven rules spread over seven stylesheets deciding what a * button looks like, which is why there were six corner radii, five type * sizes and thirty-seven `!important`s: each new screen had to out-specify the * last one. This file replaces all of them. * * It restyles WordPress's own `.button` rather than introducing a class of our * own, because the markup already asks for WordPress's button in 103 places * and for anything else in a handful. Keeping that markup means the shape * changes here and nowhere else; switching it would have meant editing every * view to gain the same result. * * The shape itself is the Automation rule dialog's, which is the one surface * built as a whole rather than screen by screen: 8px corners, 13px text at * 600, fields 38px tall with a soft focus ring. * * SCOPE. Every selector is nested inside a TrustLens container. WordPress and * WooCommerce draw their own buttons on the order screen and inside notices, * and the plugin has no business restyling those — `admin/css/order-screen.css` * in particular loads on a screen that is WooCommerce's, so an unscoped * `.button` here would repaint their toolbar. `:is()` keeps that list readable, * but note what it does to specificity: it counts as its *strongest* argument, * so anything element-qualified inside one silently outranks the plain-class * rules meant to refine it. The base rule is therefore a bare `.button`, and * each variant qualifies on `.button` so it also clears WordPress's own * `.wp-core-ui .button.button-small`. No `!important` anywhere. * * Enqueued as `trustlens-controls`, after the token layer it reads from. */ /* The plugin's own surfaces, and nothing else. */ /* --------------------------------------------------------------- Buttons */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 33px; padding: 9px 16px; border: 1px solid var(--wstl-border); border-radius: var(--wstl-radius-control); background: var(--wstl-surface); color: var(--wstl-ink-muted); font-size: var(--wstl-text-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button:hover { border-color: var(--wstl-ink-faint); color: var(--wstl-ink); background: var(--wstl-surface); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.button-primary { background: var(--wstl-color-primary); border-color: var(--wstl-color-primary); color: var(--wstl-surface); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.button-primary:hover { background: var(--wstl-segment-trusted); border-color: var(--wstl-segment-trusted); color: var(--wstl-surface); } /* The destructive one. Quiet until the pointer is on it, because a red button standing among ordinary ones reads as an error rather than as a choice. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.is-danger:hover { color: var(--wstl-danger); border-color: var(--wstl-danger); } /* An emergency lever, not a routine deletion. `.is-danger` above stays quiet until the pointer finds it, which is right for Delete — a red button sitting among ordinary ones reads as an error rather than as a choice. This one is the opposite case: it is the control someone reaches for while an attack is running, so it has to be found in seconds. Solid red, and only ever on the action that starts the dangerous state — the one that ends it stays calm. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.button-primary.is-danger { background: var(--wstl-danger); border-color: var(--wstl-danger); color: var(--wstl-surface); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.button-primary.is-danger:hover { background: color-mix(in srgb, var(--wstl-danger) 86%, #000); border-color: color-mix(in srgb, var(--wstl-danger) 86%, #000); color: var(--wstl-surface); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button.button-small { min-height: 29px; padding: 6px 12px; font-size: var(--wstl-text-sm); /* WordPress's own `.wp-core-ui .button.button-small` sets a line-height of its own and outranks the base rule above, so the base's value is restated here rather than left to lose. It is the one property it reaches. */ line-height: 1; } /* WordPress dresses its own list-table toolbar at `.wp-core-ui .tablenav .button`, which is one class heavier than the base rule above, so a filter bar would keep WordPress's button while the rest of the screen wore the plugin's. The layer restates itself here rather than lose one toolbar to a different button. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .tablenav .button { min-height: 33px; padding: 9px 16px; line-height: 1; } /* A button standing in a row of fields takes their height. On its own 33px is right — it is a button, not a field — but beside a 38px select it reads as a mistake, so a row that mixes the two says so and they line up. Centring matters as much as the height: a flex row stretches its children by default, which was making the panic freeze's duration menu 42px tall next to a 38px button for no reason either of them asked for. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-inline-fields { align-items: center; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-inline-fields .button { min-height: var(--wstl-control-height); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button:disabled, :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button[disabled] { opacity: .55; cursor: not-allowed; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .button:focus-visible { outline: 0; border-color: var(--wstl-color-primary); box-shadow: 0 0 0 3px rgba(51, 119, 238, .12); } /* ---------------------------------------------------------------- Fields */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is( input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], textarea, select) { box-sizing: border-box; min-height: var(--wstl-control-height); padding: 9px var(--wstl-control-pad-x); border: 1px solid var(--wstl-border); border-radius: var(--wstl-radius-control); background: var(--wstl-surface); color: var(--wstl-ink); font-size: var(--wstl-text-base); line-height: 1.4; transition: border-color .12s, box-shadow .12s; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is( input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], textarea, select):focus { outline: 0; border-color: var(--wstl-color-primary); box-shadow: 0 0 0 3px rgba(51, 119, 238, .12); } /* One chevron, drawn here, so a select looks like a select on every screen instead of taking whatever the browser and the platform agree on. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6d80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) textarea { min-height: 84px; line-height: 1.5; resize: vertical; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) ::placeholder { color: var(--wstl-ink-faint); opacity: 1; } /* ------------------------------------------------------------------ Range Left to the browser this was the one control on the plugin still wearing the operating system's clothes: a grey groove and a native thumb beside fields that had been given a shape. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; min-height: 0; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--wstl-line); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--wstl-line); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 1px solid var(--wstl-border); border-radius: 50%; background: var(--wstl-surface); box-shadow: 0 1px 2px rgba(16, 42, 67, .16); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 1px solid var(--wstl-border); border-radius: 50%; background: var(--wstl-surface); box-shadow: 0 1px 2px rgba(16, 42, 67, .16); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--wstl-color-primary); box-shadow: 0 0 0 3px rgba(51, 119, 238, .18); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="range"]:focus-visible::-moz-range-thumb { border-color: var(--wstl-color-primary); box-shadow: 0 0 0 3px rgba(51, 119, 238, .18); } /* ------------------------------------------------------ Checkbox and radio WordPress leaves these to the operating system, so the same screen showed a grey Windows box beside a blue brand toggle. Drawn here instead: the same border and the same brand fill as every other control, at the size a tick needs rather than the size a text field needs. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"]) { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--wstl-border); border-radius: 5px; background: var(--wstl-surface); cursor: pointer; transition: border-color .12s, background .12s; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="radio"] { border-radius: 50%; } /* WordPress draws its own tick into `::before` and does not stop doing it just because the box was given `appearance: none`, so every checked box carried two — its 30px SVG spilling out of an 18px box, and ours inside it. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"])::before { content: none; } /* ----------------------------------------------------------------- Switch One switch, defined once. There were two: this one, and a skin in settings.css that reshaped every raw checkbox inside a settings form-table into something that looked like a switch — same 42x24, same 18px knob, all of it restated as literals. So half the plugin's on/off settings were switches and half were checkboxes wearing a switch, and a genuine checkbox that happened to sit in a form-table was drawn as a switch too. The label is the control: it holds the track and, when the setting has text, the text — so the whole row is clickable either way. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } /* The track sizes itself, so it does not need the label to be a fixed box. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle-slider { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--wstl-border); transition: background-color .2s ease; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--wstl-surface); box-shadow: 0 1px 2px rgba(16, 42, 67, .22); transition: transform .2s ease; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle input:checked + .wstl-toggle-slider { background: var(--wstl-brand); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle input:checked + .wstl-toggle-slider::before { transform: translateX(18px); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle input:focus-visible + .wstl-toggle-slider { outline: 2px solid var(--wstl-brand); outline-offset: 2px; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle-text { font-size: var(--wstl-text-base); line-height: 1.4; color: var(--wstl-ink); } /* The switch's input is not a box to draw: it is a hidden control behind a track, and sizing it the way a checkbox is sized put an invisible 18px square inside the switch and WordPress's tick along with it. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) .wstl-toggle input { position: absolute; /* WordPress floors every checkbox at min-width: 1rem, so width: 0 alone left a 16px invisible box behind the track. */ width: 0; min-width: 0; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"]):hover { border-color: var(--wstl-ink-faint); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"]):checked { background: var(--wstl-color-primary); border-color: var(--wstl-color-primary); } /* The tick and the dot are drawn on the box, so they cannot drift out of step with it the way a dashicon or a background image would. */ :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="checkbox"]:checked::after { content: ""; display: block; width: 4px; height: 8px; margin: 2px auto 0; border: solid var(--wstl-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) input[type="radio"]:checked::after { content: ""; display: block; width: 6px; height: 6px; margin: 5px auto 0; border-radius: 50%; background: var(--wstl-surface); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 0; border-color: var(--wstl-color-primary); box-shadow: 0 0 0 3px rgba(51, 119, 238, .12); } :is(.wstl-wrap, .wstl-ct-page, .wstl-modal, .wstl-rule-modal, .wstl-rd, .wstl-ct) :is(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; } /* -------------------------------------------------------------------- Badge One badge. There were seven: a solid segment pill here, a second definition of the same class on the customers page that fought this one off with `!important`, a soft-filled one on customer detail with its own inks, a solid one on the dashboard whose colour arrived through an inline style, a third shape for the sync state, a status pill on the modules tab, and a segment pill on the WooCommerce order screen. Unscoped, unlike the controls below: nothing in WordPress or WooCommerce claims these class names, and the order screen and the WP dashboard widget render badges while loading neither admin.css nor a page sheet. All of them say the same thing — a short status on a coloured ground — so there is one, and the ground is a soft tint with an ink dark enough to read on it rather than white on full-strength colour. */ .wstl-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: var(--wstl-text-xs); font-weight: 600; line-height: 1.7; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; background: var(--wstl-line-soft); color: var(--wstl-ink-dim); } /* States, by what they mean. */ .wstl-badge.is-info { background: var(--wstl-color-primary-soft); color: var(--wstl-segment-trusted-ink); } .wstl-badge.is-success { background: var(--wstl-success-soft); color: var(--wstl-segment-vip); } .wstl-badge.is-warning { background: var(--wstl-segment-caution-soft); color: var(--wstl-segment-caution-ink); } .wstl-badge.is-danger { background: var(--wstl-danger-soft); color: var(--wstl-segment-critical); } /* Segments, by name. */ .wstl-badge.is-vip { background: var(--wstl-success-soft); color: var(--wstl-segment-vip); } .wstl-badge.is-trusted { background: var(--wstl-color-primary-soft); color: var(--wstl-segment-trusted-ink); } .wstl-badge.is-normal { background: var(--wstl-line-soft); color: var(--wstl-ink-dim); } .wstl-badge.is-caution { background: var(--wstl-segment-caution-soft); color: var(--wstl-segment-caution-ink); } .wstl-badge.is-risk { background: var(--wstl-segment-risk-soft); color: var(--wstl-segment-risk-ink); } .wstl-badge.is-critical { background: var(--wstl-danger-soft); color: var(--wstl-segment-critical); } /* Quiet: a dot and a word, for a dense table where a filled badge on every row would be louder than the rows themselves. */ .wstl-badge.is-quiet { padding: 0; background: none; color: var(--wstl-ink-muted); } .wstl-badge.is-quiet::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; } .wstl-badge.is-quiet.is-vip::before { background: var(--wstl-segment-vip); } .wstl-badge.is-quiet.is-trusted::before { background: var(--wstl-segment-trusted); } .wstl-badge.is-quiet.is-normal::before { background: var(--wstl-segment-normal); } .wstl-badge.is-quiet.is-caution::before { background: var(--wstl-segment-caution); } .wstl-badge.is-quiet.is-risk::before { background: var(--wstl-segment-risk); } .wstl-badge.is-quiet.is-critical::before { background: var(--wstl-segment-critical); } /* ------------------------------------------------------- Segmented control One choice out of a set: a single sunken track with the chosen option raised on it. Written for both shapes it is used in — a