/* =========================================================================== MAVELY UI PLUS v1 (MV118) — style only, nothing behavioural =========================================================================== Loaded AFTER mavely-redesign.v1.min.css so it can win a tie without needing a heavier selector than the rule it is correcting. Everything here is ADDITIVE. No existing selector was edited or deleted in any other stylesheet; this file only adds rules of its own. Delete the one tag in index.html and the site returns to exactly what it was. Sections A Dark / Light switch moved to the END of the language bar (Task 2) B "Opens a panel" icon on the two frame-border options (Task 3) C EDIT YOUR DEALS IMAGE — shiny tab + NEW badge (Task 4) D The empty space in the shorten row (Task 5) E HOT DEAL popup — the click count is hidden (Task 6) F The Download button in the header (Task 7.1) =========================================================================== */ /* ------------------------------------------------------------------ A ---- TASK 2 — THE SWITCH GOES TO THE FAR RIGHT Why this is CSS and not a change to placeToggle(). mavely-redesign.v1.js builds the switch and places it with: if (toggle.parentNode !== box || toggle.nextSibling !== fr) box.insertBefore(toggle, fr); — and that runs again on every pass. Moving the NODE to the end would make that test fail for ever, so the script would drag it back in front of "Français" on the next tick and the two would fight. There is a second reason, and it is the stronger one. The phone rules in mavely-redesign.v1.css label the first two buttons by POSITION: .mv-rd-langs>button:nth-child(1)::after{content:"EN"} .mv-rd-langs>button:nth-child(2)::after{content:"ع"} Re-ordering the DOM would shift those indices and put the wrong short label under the wrong flag on mobile. `order` moves the switch on screen while leaving it exactly where the script expects to find it and exactly where nth-child counts it. Nothing to fight, nothing to re-label. In Arabic the bar is RTL, so "the end" correctly becomes the left-hand side with no extra rule. ------------------------------------------------------------------------- */ html[data-mv-rd] .mv-rd-langs > button:not(.mv-rd-theme) { order: 1; } html[data-mv-rd] .mv-rd-langs > .mv-rd-theme { order: 9; margin-inline-start: 5px !important; margin-inline-end: 0 !important; } /* ------------------------------------------------------------------ B ---- TASK 3 — "THIS ONE OPENS SOMETHING" Only two of the switches open a panel, so only those two get the icon: label.mv-sf-check ADD SIMPLE FRAME BORDER label.mv-bd-check ADD or Build Your Own Frame Border (.mv-fr-check on an install without frameguard) THE OVERLAP IN YOUR REFERENCE IMAGE IS FIXED BY WHERE THE ICON LIVES. In orpntabindelasimage.png the icon floats on top of the row, so it lands over "...FRAME BORDER" and over the eye. Here it is a real flex child at the END of the label, pushed over by margin-inline-start:auto, and the title beside it is allowed to shrink and ellipsise. A flex layout cannot overlap itself, so the three parts — checkbox, title, icon — always share the row instead of stacking on each other. The eye button (.mv-fr-eye) is a SIBLING of the label, not a child, so it sits outside this box entirely and can never be covered. ------------------------------------------------------------------------- */ /* the title gives way before the icon does */ .mv-imgopts label.mv-sf-check > span, .mv-imgopts label.mv-bd-check > span, .mv-imgopts label.mv-fr-check > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-imgopts .mv-ot-open { flex: 0 0 26px; width: 26px; height: 26px; margin-inline-start: auto; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: linear-gradient(145deg, #fb923c 0%, #f97316 55%, #ea580c 100%); color: #fff; box-shadow: 0 2px 6px -1px rgba(234, 88, 12, .55); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; } .mv-imgopts .mv-ot-open svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .mv-imgopts .mv-ot-open:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(234, 88, 12, .7); } .mv-imgopts .mv-ot-open:active { transform: translateY(0) scale(.94); } .mv-imgopts .mv-ot-open:focus-visible { outline: 2px solid var(--rd-accent, #6672f0); outline-offset: 2px; } /* inside the redesign panel the rows are 40 px tall — keep the icon centred and stop the label's own 10 px gap from doubling up with the auto margin */ html[data-mv-rd] .mv-rd-imgpanel label.mv-imgopt > .mv-ot-open { margin-block: 0; } @media (prefers-reduced-motion: reduce) { .mv-imgopts .mv-ot-open { transition: none; } .mv-imgopts .mv-ot-open:hover, .mv-imgopts .mv-ot-open:active { transform: none; } } /* ------------------------------------------------------------------ C ---- TASK 4 — THE EDIT YOUR DEALS IMAGE TAB, MADE TO BE NOTICED The tab is mavely-redesign's .mv-rd-imgtab button. Its markup, its label and its click handler are untouched; this is a background, a sweep and a badge drawn with ::before and ::after, both of which were free on this element. The sweep is a single transform on a composited pseudo-element — no repaint of anything around it — and it is switched off entirely under prefers-reduced-motion, so it costs nothing in the Lighthouse run either. The shine only runs while the tab is NOT the open one: once you are inside the panel the tab is the active tab and mavely-redesign's own accent rule takes it, which is why every rule here is behind body:not(.mv-rd-img-active). ------------------------------------------------------------------------- */ html[data-mv-rd] .mv-rd-strip > button.mv-rd-imgtab { position: relative; overflow: hidden; isolation: isolate; padding-inline-end: 26px !important; /* the badge's own lane */ } html[data-mv-rd] body:not(.mv-rd-img-active) .mv-rd-strip > button.mv-rd-imgtab { background: linear-gradient(135deg, #6672f0 0%, #8b5cf6 52%, #5561e2 100%) !important; color: #fff !important; box-shadow: 0 6px 16px -9px rgba(102, 114, 240, .95) !important; } html[data-mv-rd] body:not(.mv-rd-img-active) .mv-rd-strip > button.mv-rd-imgtab:hover { background: linear-gradient(135deg, #7480f5 0%, #9668f8 52%, #6672f0 100%) !important; color: #fff !important; box-shadow: 0 8px 20px -9px rgba(102, 114, 240, 1) !important; } html[data-mv-rd] body:not(.mv-rd-img-active) .mv-rd-strip > button.mv-rd-imgtab svg { opacity: 1; } /* the light sweep */ html[data-mv-rd] body:not(.mv-rd-img-active) .mv-rd-strip > button.mv-rd-imgtab::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .40) 50%, transparent 62%); transform: translateX(-130%); animation: mv-up-shine 4.2s ease-in-out infinite; } @keyframes mv-up-shine { 0%, 58% { transform: translateX(-130%); } 100% { transform: translateX(130%); } } /* the NEW starburst */ html[data-mv-rd] .mv-rd-strip > button.mv-rd-imgtab::after { content: "NEW"; position: absolute; top: 3px; inset-inline-end: 3px; width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; font: 900 7.5px/1 var(--rd-font); letter-spacing: .04em; color: #4a2c00; background: linear-gradient(160deg, #ffd54a 0%, #f5b301 60%, #e09600 100%); clip-path: polygon(50.0% 0.0%,58.5% 13.0%,71.7% 5.0%,73.7% 20.3%,89.1% 18.8%,84.2% 33.5%,98.7% 38.9%,88.0% 50.0%,98.7% 61.1%,84.2% 66.5%,89.1% 81.2%,73.7% 79.7%,71.7% 95.0%,58.5% 87.0%,50.0% 100.0%,41.5% 87.0%,28.3% 95.0%,26.3% 79.7%,10.9% 81.2%,15.8% 66.5%,1.3% 61.1%,12.0% 50.0%,1.3% 38.9%,15.8% 33.5%,10.9% 18.8%,26.3% 20.3%,28.3% 5.0%,41.5% 13.0%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { html[data-mv-rd] body:not(.mv-rd-img-active) .mv-rd-strip > button.mv-rd-imgtab::before { animation: none; opacity: 0; } } /* very narrow phones: the strip font already drops to 10 px, so the badge would crowd a two-line label. Keep the shine, shrink the badge. */ @media (max-width: 420px) { html[data-mv-rd] .mv-rd-strip > button.mv-rd-imgtab { padding-inline-end: 20px !important; } html[data-mv-rd] .mv-rd-strip > button.mv-rd-imgtab::after { width: 19px; height: 19px; font-size: 6px; top: 2px; inset-inline-end: 2px; } } /* ------------------------------------------------------------------ D ---- TASK 5 — THE EMPTY SPACE IN THE SHORTEN ROW WHERE IT COMES FROM. mavely-subdomain.v1.js injects this, and only above 640 px, where the shorten row is a single line: .mv-sd-on{flex-wrap:wrap} .mv-sd-on>.mv-sd-wrap{flex:1 1 100%} .mv-sd-on>.mv-sd-wrap+*{margin-left:auto} The first child (list + url + bin) takes the whole first line, so QR Code + Shorten drop to a second line, and `margin-left:auto` shoves them to the right. THAT AUTO MARGIN IS THE GAP — it is empty by construction. THE FIX. The group is given the full width instead of an auto margin, and the space on the left is filled with a line of reassurance text carried on ::before. QR Code and Shorten keep their own widths and stay hard right, exactly where they are today. Nothing in the shortener is touched: not the checkbox, not the button, not the domain list. The row is one flex container and this only says how its free space is spent. Below 640 px none of this applies — the row is a column there, there is no second line and no gap, so the hint is never shown. ------------------------------------------------------------------------- */ @media (min-width: 640px) { html[data-mv-rd] .mv-rd-card .mv-sd-on > .mv-sd-wrap + * { margin-left: 0 !important; margin-inline-start: 0 !important; flex: 1 1 100% !important; display: flex !important; align-items: center !important; min-width: 0; } html[data-mv-rd] .mv-rd-card .mv-sd-on > .mv-sd-wrap + *::before { content: "Free forever · no signup · your short link never expires."; margin-inline-end: auto; padding-inline-start: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.2 var(--rd-font); color: var(--rd-text-3); letter-spacing: .01em; pointer-events: none; } html[data-mv-rd][lang="ar"] .mv-rd-card .mv-sd-on > .mv-sd-wrap + *::before { content: "مجاني للأبد · بدون تسجيل · رابطك القصير لا ينتهي."; } html[data-mv-rd][lang="es"] .mv-rd-card .mv-sd-on > .mv-sd-wrap + *::before { content: "Gratis para siempre · sin registro · tu enlace no caduca."; } html[data-mv-rd][lang="fr"] .mv-rd-card .mv-sd-on > .mv-sd-wrap + *::before { content: "Gratuit pour toujours · sans inscription · votre lien n'expire jamais."; } /* a narrow desktop column: drop the hint rather than squeeze the button */ @media (max-width: 860px) { html[data-mv-rd] .mv-rd-card .mv-sd-on > .mv-sd-wrap + *::before { display: none; } html[data-mv-rd] .mv-rd-card .mv-sd-on > .mv-sd-wrap + * { justify-content: flex-end; } } } /* ------------------------------------------------------------------ E ---- TASK 6 — NO CLICK COUNT IN THE HOT DEAL POPUP mavely-deals builds the line as .mv-hotpop-sub and then measures the card with card.offsetHeight to decide whether the popup opens below or above the badge. Because the measurement happens AFTER the card is in the document, a display:none here is already accounted for: the popup is measured at its real, shorter height and places itself correctly. Nothing about the position logic had to change. The spacing also corrects itself. .mv-hotpop-body already carries margin:0 0 10px and .mv-hotpop-sub's own margin:-6px 0 10px goes with it, so the body sits 10 px above the green button — the same gap the popup uses for a deal that never had a count in the first place. display:none, not removal: the node is still built by code that is not being edited, and the count never reaches the screen. ------------------------------------------------------------------------- */ .mv-hotpop-sub { display: none !important; } /* ------------------------------------------------------------------ F ---- TASK 7.1 — THE DOWNLOAD BUTTON IN THE HEADER mavely-uiplus.v1.js inserts .mv-dl-wrap directly after the logo link inside .mv-rd-head-in, which is `flex items-center justify-between`. The wrapper takes margin-inline-end:auto so it stays beside the logo and the social icons and the language bar keep the right-hand side. Two looks, chosen in the dashboard: .mv-dl-shiny and .mv-dl-simple. ------------------------------------------------------------------------- */ html[data-mv-rd] .mv-dl-wrap { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-inline-start: clamp(10px, 3vw, 44px); margin-inline-end: auto; } html[data-mv-rd] .mv-dl-label { font: 800 12.5px/1 var(--rd-font); letter-spacing: .10em; text-transform: uppercase; color: var(--rd-text-2); white-space: nowrap; } html[data-mv-rd] .mv-dl-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 20px; border-radius: 11px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font: 800 13px/1 var(--rd-font); letter-spacing: .02em; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease; } html[data-mv-rd] .mv-dl-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } html[data-mv-rd] .mv-dl-btn:active { transform: translateY(1px); } html[data-mv-rd] .mv-dl-btn:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } /* simple: the same primary button the rest of the site uses */ html[data-mv-rd] .mv-dl-btn.mv-dl-simple { background: var(--rd-accent); color: var(--rd-accent-ink); box-shadow: 0 8px 18px -10px rgba(102, 114, 240, .95); } html[data-mv-rd] .mv-dl-btn.mv-dl-simple:hover { background: var(--rd-accent-2); } /* shiny: the gradient + sweep, in the site's own accent rather than yellow */ html[data-mv-rd] .mv-dl-btn.mv-dl-shiny { background: linear-gradient(135deg, #6672f0 0%, #8b5cf6 52%, #5561e2 100%); color: #fff; box-shadow: 0 8px 20px -10px rgba(102, 114, 240, 1), inset 0 1px 0 rgba(255, 255, 255, .28); } html[data-mv-rd] .mv-dl-btn.mv-dl-shiny:hover { background: linear-gradient(135deg, #7480f5 0%, #9668f8 52%, #6672f0 100%); } html[data-mv-rd] .mv-dl-btn.mv-dl-shiny::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%); transform: translateX(-130%); animation: mv-up-shine 4.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html[data-mv-rd] .mv-dl-btn.mv-dl-shiny::before { animation: none; opacity: 0; } html[data-mv-rd] .mv-dl-btn { transition: none; } html[data-mv-rd] .mv-dl-btn:active { transform: none; } } /* tablet: the label is the first thing to go, then the whole block wraps under the logo rather than squashing the language bar */ @media (max-width: 1100px) { html[data-mv-rd] .mv-dl-label { display: none; } html[data-mv-rd] .mv-dl-wrap { margin-inline-start: clamp(8px, 2vw, 20px); } } @media (max-width: 720px) { html[data-mv-rd] .mv-dl-wrap { order: 5; flex: 1 1 100%; margin-inline: 0; justify-content: center; padding-top: 2px; } html[data-mv-rd] .mv-dl-btn { height: 36px; padding: 0 16px; font-size: 12.5px; } }