/* Musiveo Theme Extended — frontend. Scoped to [data-mte-*] + html.mte-enabled. */ html[data-mte-accent] { color-scheme: dark; } /* Musicon and the site's custom-theme-musiveo.css declare their own --body-bg-color / --color-grey-* on , which shadows anything set on . head_vars() and the runtime both re-declare the whole map on as !important, so the values below resolve to the selected background. The !important here is for the theme's own high-specificity dark rules (`.dark .site-sidebar { background: var(--color-grey-700) }` and friends), which are 0,2,0 and would otherwise outrank these 0,1,1 rules. */ html.mte-enabled body { background-color: var(--mte-bg, #000) !important; color: var(--text-color, #F2F3F4); } /* Chrome surfaces use the selected background, exactly. These used to read --mte-surface / --mte-header-bg, which are lighter/darker steps of the same ramp. On Charcoal that meant the sidebar painted #141414 instead of #101010, and .mobile-menu -- a full-screen panel -- made the whole page look like the wrong colour. Fidelity to the picked swatch wins over a decorative lift; separation now comes from borders and the wallpaper layer. */ html.mte-enabled .site-header { background-color: var(--mte-bg) !important; } html.mte-enabled .site-header .search-form { background-color: var(--mte-surface-2) !important; } html.mte-enabled .site-sidebar { background-color: var(--mte-bg) !important; } html.mte-enabled .site-footer { background-color: var(--mte-bg) !important; } html.mte-enabled .navigation { background-color: var(--mte-bg) !important; } html.mte-enabled .plyr-playlist, html.mte-enabled .plyr-playlist .plyr { background-color: var(--mte-bg) !important; } html.mte-enabled .mobile-menu { background-color: var(--mte-bg) !important; color: var(--text-color); } /* Prompt field in the music generator keeps its native look. */ html.mte-enabled .musiveo-form-group input[type="text"], html.mte-enabled .musiveo-form-group textarea, html.mte-enabled .musiveo-form-group input[type="text"]:focus, html.mte-enabled .musiveo-form-group textarea:focus { background-color: #181818 !important; -webkit-box-shadow: 0 0 0 1000px #181818 inset !important; box-shadow: 0 0 0 1000px #181818 inset !important; -webkit-text-fill-color: #fff !important; color: #fff !important; border-color: #181818; } /* ---------- Companion plugins (var-driven; their files are untouched) ---------- */ html.mte-enabled .mshub-dashboard { background-color: var(--mshub-background); color: var(--mshub-text); } html.mte-enabled .mshub-card { background: var(--mshub-card-bg); border-color: var(--mshub-border); } html.mte-enabled .aie-container { background: var(--aie-bg-secondary); color: var(--aie-text-primary); } html.mte-enabled .musiveo-container.musiveo-theme-dark, html.mte-enabled .musiveo-theme-dark { background-color: transparent; color: var(--musiveo-dark-text); } .dark .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; margin: auto; padding: 0.3rem; border-radius: 9px; background-color: #00000000; box-shadow: none; z-index: 1; } html.mte-enabled .site-footer { background-color: transparent; } /* ---------- Brand gradients (purple -> ice blue signature) ---------- */ html[data-mte-gradient="1"] .btn-play-normal, html[data-mte-gradient="1"] .nav li.btn-link a { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); border-color: transparent; color: #fff; } html[data-mte-gradient="1"] [data-mte-switcher] .mte-trigger__dot { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); } html[data-mte-gradient="1"] #mte-progress { /* Weighted stops: the body of the bar stays purple and the ice blue only arrives at the leading tip. A plain 0%/100% two-stop ramp paints the whole range across the bar's own width, so even a short bar read as "all light blue". */ background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 58%, var(--color-primary-2) 100%); box-shadow: 0 0 6px -1px var(--color-primary); } html[data-mte-gradient="1"] [data-mte-menu] .mte-accent.is-active span { box-shadow: 0 0 0 2px #0e0e10, 0 0 16px var(--color-primary); } /* ---------- Page transitions (coexist with theme page-progress) ---------- Musicon ships its own .page-progress that animates on the same pjax events. Two bars at two heights and two timings read as one broken/doubled bar, so the theme's is suppressed and this plugin owns exactly one bar. The theme file is untouched. */ html.mte-enabled .page-progress { display: none; } #mte-progress { position: fixed; top: 0; left: 0; z-index: 200000; width: 0; height: 2px; /* Rounded leading edge + a bright head so it reads as a smooth comet rather than a square slab. The head is a pseudo-element so the rounding is not stretched by the animating width. */ border-radius: 0 2px 2px 0; background: linear-gradient(90deg, rgba(255,255,255,.25) 0%, var(--color-primary, #8E50F8) 100%); opacity: 0; transition: width .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease; will-change: width, opacity; pointer-events: none; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } #mte-progress::after { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 24px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%); } html.mte-navigating #mte-progress { opacity: 1; } /* Never taller than 2px of glow: the previous 8/10px shadow read as a second, thicker bar sitting under the first one. */ html.mte-enabled #mte-progress { box-shadow: 0 0 5px -1px var(--color-primary, #8E50F8); } html.mte-motion body main { animation: mtewx-enter .55s cubic-bezier(.22,.61,.36,1) both; } @keyframes mtewx-enter { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } html.mte-motion.mte-navigating body main { opacity: .25; transition: opacity .25s ease; } /* ---------- Switcher trigger ---------- */ [data-mte-switcher] { font-family: inherit; display: inline-flex; max-width: 100%; } [data-mte-switcher] .mte-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; /* No fill: a hardcoded #111318 chip fought the selected background (Charcoal is #101010, Pure Black is #000000), so the trigger now sits directly on whatever the visitor picked. The border alone keeps the affordance. */ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.14); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; } [data-mte-switcher] .mte-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35); } [data-mte-switcher] .mte-trigger:focus-visible { outline: 2px solid var(--color-primary, #E8EAED); outline-offset: 2px; } [data-mte-switcher] .mte-trigger__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--color-primary, #E8EAED); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } [data-mte-switcher] .mte-trigger__name { opacity: .65; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mte-switcher--icon .mte-trigger { padding: 9px; } /* ---------- Popup (portaled to , viewport-centered like mt overlay) ---------- */ [data-mte-menu].mte-overlay { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; background: rgba(0,0,0,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-mte-menu].mte-overlay[hidden] { display: none !important; pointer-events: none !important; } [data-mte-menu] .mte-dialog { display: flex; flex-direction: column; width: 720px; max-width: 100%; max-height: calc(100vh - 48px); overflow: hidden; color: #fff; /* The selected background, exactly. --mte-surface/--mte-surface-2 are lighter steps of the ramp, so the panel showed a different colour than the swatch the visitor had picked (Pure Black rendered as #08080A). Reading --mte-bg means the popup is the same colour as the page it sits on, and with wallpaper = none the two are indistinguishable by design. Deliberately NOT transitioned: a background-color transition whose value comes from a custom property on does not re-resolve when that property changes, so it pinned the dialog to the first background ever painted. Verified in-browser. */ background-color: var(--mte-bg, #0e0e10); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.65); } html.mte-motion [data-mte-menu]:not([hidden]) .mte-dialog { animation: mtewx-pop .28s cubic-bezier(.22,.61,.36,1) both; } @keyframes mtewx-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } [data-mte-menu] .mte-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1); } [data-mte-menu] .mte-dialog__eyebrow { display: block; margin-bottom: 5px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } [data-mte-menu] .mte-dialog__header strong { display: block; font-size: 19px; line-height: 1.2; } [data-mte-menu] .mte-dialog__sub { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-size: 12px; } [data-mte-menu] .mte-dialog__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; font-size: 24px; line-height: 1; } [data-mte-menu] .mte-dialog__close:hover { background: rgba(255,255,255,.16); } [data-mte-menu] .mte-dialog__body { overflow: auto; padding: 16px 18px 20px; -webkit-overflow-scrolling: touch; } [data-mte-menu] .mte-section-title { margin: 6px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); } [data-mte-menu] .mte-section-title:not(:first-child) { margin-top: 18px; } [data-mte-menu] .mte-section-hint { margin: 0 0 10px; color: rgba(255,255,255,.4); font-size: 11.5px; } /* Accent swatches */ [data-mte-menu] .mte-accents { display: flex; flex-wrap: wrap; gap: 10px; } [data-mte-menu] .mte-accent { position: relative; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; } [data-mte-menu] .mte-accent span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: transform .15s ease; } [data-mte-menu] .mte-accent:hover span { transform: scale(1.1); } [data-mte-menu] .mte-accent:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } [data-mte-menu] .mte-accent.is-active { border-color: #fff; } [data-mte-menu] .mte-accent.is-active span { box-shadow: 0 0 0 2px #0e0e10, 0 0 14px rgba(255,255,255,.25); } [data-mte-menu] .mte-accent--custom { border-style: dashed; border-color: rgba(255,255,255,.35); overflow: hidden; } [data-mte-menu] .mte-accent--custom input[type="color"] { position: absolute; inset: -8px; width: 200%; height: 200%; padding: 0; border: 0; background: none; cursor: pointer; } [data-mte-menu] .mte-accent--custom span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; color: #fff; pointer-events: none; border: 0; } /* Contrast notice: shown only when the guard actually lifted the accent. Carries the two swatches so "which colour changed" is answerable at a glance without opening anything. */ [data-mte-menu] .mte-contrast { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.72); font-size: 11.5px; line-height: 1.45; } [data-mte-menu] .mte-contrast[hidden] { display: none; } [data-mte-menu] .mte-contrast__chip { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.28); } [data-mte-menu] .mte-contrast__arrow { flex: none; opacity: .5; } [data-mte-menu] .mte-contrast__text { flex: 1 1 140px; min-width: 0; } /* ---------- Custom accent: solid or two-stop gradient ---------- */ [data-mte-menu] .mte-custom { display: none; margin: 12px 0 0; padding: 12px; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); } [data-mte-menu] .mte-custom.is-open { display: flex; flex-wrap: wrap; align-items: center; } [data-mte-menu] .mte-custom__mode { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } [data-mte-menu] .mte-custom__mode-track { position: relative; display: block; width: 38px; height: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); } [data-mte-menu] .mte-custom__mode-track i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #6b7078; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform .22s cubic-bezier(.22,.61,.36,1), background .22s ease; } [data-mte-menu] .mte-custom__mode.is-on .mte-custom__mode-track { border-color: var(--color-primary, #E8EAED); } [data-mte-menu] .mte-custom__mode.is-on .mte-custom__mode-track i { transform: translateX(18px); background: #fff; } [data-mte-menu] .mte-custom__mode:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; } [data-mte-menu] .mte-custom__stops { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; } [data-mte-menu] .mte-custom__stop { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 0; font-size: 11.5px; color: rgba(255,255,255,.55); cursor: pointer; } [data-mte-menu] .mte-custom__stop input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; } [data-mte-menu] .mte-custom__stop input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } [data-mte-menu] .mte-custom__stop input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; } [data-mte-menu] .mte-custom__stop input[type="color"]::-moz-color-swatch { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; } /* Hex field: the path that works on browsers with no native colour picker. */ [data-mte-menu] .mte-custom__hex { box-sizing: border-box; width: 74px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; -webkit-appearance: none; appearance: none; } [data-mte-menu] .mte-custom__hex:focus { outline: none; border-color: var(--color-primary, #E8EAED); } [data-mte-menu] .mte-custom__hex::selection { background: var(--color-primary, #E8EAED); color: #000; } /* ---------- In-page colour picker ---------- The native stays as the value holder, but its own popup is suppressed and this replaces it: several browsers (iOS Safari, some Android WebViews) accept the element and then never show anything, which is what made the custom colour control look dead. Pure CSS gradients, so there is no canvas, no image request and no extra paint cost. Deliberately NOT scoped to [data-mte-menu]. The popover is portalled to on first use, because the overlay's backdrop-filter makes it the containing block for position:fixed children and the popover then lands outside the popup. Once it is on a menu-scoped selector stops matching and it renders as an unstyled full-width box, so these are global and the .mte-picker- names keep them out of everyone else's way. */ .mte-picker { position: fixed; z-index: 999999; width: 196px; padding: 10px; box-sizing: border-box; font: inherit; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(12,12,14,.985); box-shadow: 0 18px 44px rgba(0,0,0,.6); } .mte-picker[hidden] { display: none; } .mte-picker__sv { position: relative; height: 124px; border-radius: 8px; cursor: crosshair; touch-action: none; overflow: hidden; background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(var(--mte-h, 260), 100%, 50%)); } .mte-picker__hue { position: relative; height: 12px; margin-top: 10px; border-radius: 999px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .mte-picker__dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: transparent; border: 2px solid #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.6); } .mte-picker__sv .mte-picker__dot { left: calc(var(--mte-s, 0) * 100%); top: calc((1 - var(--mte-v, 1)) * 100%); } .mte-picker__hue .mte-picker__dot { left: calc(var(--mte-h, 0) / 360 * 100%); top: 50%; } .mte-picker__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .mte-picker__chip { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); background: var(--mte-pick, #8E50F8); } /* The picker's own hex field lives on too, so it needs the base hex styling as well as the flex behaviour -- the [data-mte-menu] scoped rule no longer reaches it. */ .mte-picker .mte-custom__hex { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; padding: 4px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; -webkit-appearance: none; appearance: none; } .mte-picker .mte-custom__hex:focus { outline: none; border-color: var(--color-primary, #E8EAED); } .mte-picker .mte-custom__hex::selection { background: var(--color-primary, #E8EAED); color: #000; } /* Hide the second stop entirely in solid mode so the row never looks broken. */ [data-mte-menu] .mte-custom__stop.is-off { display: none; } [data-mte-menu] .mte-custom__preview { flex: 1 1 40px; min-width: 40px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); } [data-mte-menu] .mte-grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } [data-mte-menu] .mte-grid--wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } [data-mte-menu] .mte-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.04); color: inherit; font: inherit; text-align: left; } [data-mte-menu] .mte-card:hover { background: rgba(255,255,255,.09); } [data-mte-menu] .mte-card:focus-visible { outline: 2px solid var(--color-primary, #E8EAED); outline-offset: 1px; } [data-mte-menu] .mte-card.is-active { border-color: var(--color-primary, #E8EAED); background: rgba(255,255,255,.08); } [data-mte-menu] .mte-card__preview { position: relative; flex: none; width: 52px; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); } [data-mte-menu] .mte-card__preview--wall { width: 44px; } [data-mte-menu] .mte-live-badge { position: absolute; top: 3px; right: 3px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.65); font-size: 8px; font-weight: 800; letter-spacing: .08em; } [data-mte-menu] .mte-card__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 2px; } [data-mte-menu] .mte-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; } [data-mte-menu] .mte-card__text small { color: rgba(255,255,255,.55); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-mte-menu] .mte-card__check { flex: none; color: var(--color-primary, #E8EAED); font-size: 16px; font-weight: 800; opacity: 0; } [data-mte-menu] .mte-card.is-active .mte-card__check { opacity: 1; } /* Motion toggle: labeled pill switch */ [data-mte-menu] .mte-motion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); } [data-mte-menu] .mte-motion-row strong { display: block; font-size: 13.5px; } [data-mte-menu] .mte-motion-row small { color: rgba(255,255,255,.55); font-size: 11.5px; } /* Live-wallpapers switch. Musicon sets `*, *::before, *::after { box-sizing: border-box }`, so the declared width/height include padding and border. The old geometry was internally inconsistent: 22px - 3px*2 - 1px*2 left a 14px content box for a 16px knob, and 52px left 44px for a 46px travel, so the knob was shaved on both axes and read as "someone overrode the CSS". Sizing is now explicit and the track is built to fit the 18px knob with room around it: content = 58 - 2*2 = 54 wide, 26 - 2*2 = 22 tall travel = 54 - 18 = 36px (knob lands flush against the right padding) box-sizing is pinned rather than inherited, so the geometry is correct whatever the theme sets. Geometry properties carry !important so a button reset (Musicon ships a bare `button { border-radius: 0 }`) cannot reshape or resize this control. */ [data-mte-menu] .mte-toggle { display: inline-block !important; flex: none !important; box-sizing: border-box !important; width: 58px !important; min-width: 58px !important; height: 26px !important; min-height: 26px !important; padding: 2px !important; border: 0 !important; border-radius: 999px !important; cursor: pointer; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; -webkit-appearance: none; appearance: none; } [data-mte-menu] .mte-toggle__knob { display: block !important; box-sizing: border-box !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 50% !important; background: #6b7078; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform .22s cubic-bezier(.22,.61,.36,1), background .22s ease, box-shadow .22s ease; } [data-mte-menu] .mte-toggle.is-on { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--color-primary, #E8EAED) !important; } [data-mte-menu] .mte-toggle.is-on .mte-toggle__knob { transform: translateX(36px) !important; background: #fff; box-shadow: 0 0 8px var(--color-primary, #E8EAED); } [data-mte-menu] .mte-motion-state { flex: none; min-width: 26px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.4); } [data-mte-menu] .mte-toggle.is-on + .mte-motion-state { color: #fff; } /* Live row: status glow dot + locked live options when calm. */ [data-mte-menu] .mte-live-row { padding: 14px 16px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); } [data-mte-menu] .mte-live-ico { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #4a4e55; transition: background .25s ease, box-shadow .25s ease; } [data-mte-menu] .mte-live-row.is-on .mte-live-ico { background: var(--color-primary, #E8EAED); box-shadow: 0 0 10px var(--color-primary, #E8EAED); animation: mtewx-live-pulse 2.2s ease-in-out infinite; } @keyframes mtewx-live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .6; } } [data-mte-menu] .mte-card--wall.is-disabled { opacity: .35; filter: grayscale(.7); } [data-mte-menu] .mte-card--wall:disabled { cursor: not-allowed; } [data-mte-menu] .mte-card--wall:disabled:hover { background: rgba(255,255,255,.04); } [data-mte-menu] .mte-dialog__note { margin: 14px 2px 0; color: rgba(255,255,255,.5); font-size: 11.5px; } [data-mte-menu] .mte-motion-note { margin: 12px 2px 0; padding: 9px 12px; border-radius: 9px; background: rgba(245,165,36,.1); border: 1px solid rgba(245,165,36,.35); color: #f5cf8a; font-size: 12px; } [data-mte-menu] .mte-motion-note[hidden] { display: none; } /* ---------- Switcher trigger: neutral button, color shown in the dot ---------- */ [data-mte-switcher] .mte-trigger { border: 1px solid rgba(255,255,255,.14); box-shadow: none; } [data-mte-switcher] .mte-trigger__dot { width: 20px; height: 20px; background: linear-gradient(135deg, var(--color-primary, #8E50F8), var(--color-primary-2, #3AC4F7)); } /* ---------- Responsive ---------- */ @media (max-width: 560px) { [data-mte-menu].mte-overlay { padding: 12px; } [data-mte-menu] .mte-dialog { max-height: calc(100vh - 24px); border-radius: 15px; } [data-mte-menu] .mte-dialog__header { padding: 16px 16px 12px; } [data-mte-menu] .mte-dialog__body { padding: 12px 12px 16px; } [data-mte-menu] .mte-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } [data-mte-switcher] .mte-trigger__name { display: none; } } /* ---------- Reduced motion (only when the admin enables respect AND the user never chose) ---------- */ @media (prefers-reduced-motion: reduce) { html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion body main { animation: none; } html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion [data-mte-menu]:not([hidden]) .mte-dialog { animation: none; } }