/* Bestillingsside (tyvek): LYS fargeprofil som original (Woodmart) + fargerik header-banner. */ .pagefilm,.pagefilm-veil{display:none!important} /* Original fargeprofil (Woodmart-tokens) – overstyrer designerens variabler */ :root{ --accent:#04a9fc; --accent-ink:#0284c7; --bg:#f7f7f7; --ink:#232323; --ink-soft:#767676; --line:#e6e6e6; --font-ui:"Sora", Arial, Helvetica, sans-serif; } /* Mobiladapterens kontroller eksisterer i DOM også på PC, men presenteres utelukkende av den autoritative mobilblokken nederst i filen. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ .mobile-full-band-button,.mobile-object-controls{display:none} body,.wrap,.masthead,.step,.card,.cartbar,.bandline,h1,h2,h3,h4{font-family:"Sora", Arial, Helvetica, sans-serif} /* Full-bredde header-banner (konsertbilde – som original butikk-side) */ .page-hero{position:relative;min-height:440px;display:flex;align-items:center;background:#151a26 url("assets/header-bg.jpg") center/cover no-repeat} .page-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.4) 100%)} .page-hero .wrap{position:relative;z-index:1;width:100%;text-align:center;padding:40px 22px} .page-hero .masthead{margin:0} .page-hero .eyebrow{color:#dbeeff;letter-spacing:2px} .page-hero h1{color:#fff;font-size:clamp(46px,7vw,88px);margin:.12em 0 .1em;font-weight:800;letter-spacing:.5px} .page-hero .masthead p{color:#eef3fa} /* Prototype-flagg med luft i innholdet */ /* Bredde lik forsiden/headeren */ .wrap{max-width:1280px;padding-left:22px;padding-right:22px} /* Band-linje: layout-fikser (større bånd, ekte proporsjoner, move inntil) */ .wrap .bandline{grid-template-columns:112px minmax(0,1fr) 96px!important; grid-template-areas:"ctrl band act"!important;column-gap:16px!important; padding-top:7px!important;padding-bottom:7px!important;overflow:visible} /* Dra-haandtaket ligger UTENFOR tabellen, helt til venstre. Smalt og hoyt, og synlig foerst naar musa er i omraadet. */ /* Plass til haandtaket UTENFOR boksene -- legges paa hele venstre kolonne, slik at haand-bilde-kortet og baand-radene faar helt lik marg. */ .wrap #steps{padding-left:22px} @media(max-width:960px){.wrap .prod-topp{padding-left:22px}} .wrap .bl-move{position:absolute!important;grid-area:auto!important; left:-20px;top:6px;bottom:6px;width:13px;min-height:0!important; align-self:auto!important;border-radius:6px;padding:4px 0!important; opacity:0;transition:opacity .16s ease;box-shadow:none!important; background:#eef2f7;border:1px solid #d3d9e0} .wrap .bandline:hover .bl-move, .wrap .bl-move:hover, .wrap .bl-move:focus-visible{opacity:1} .wrap .bl-move .ar{font-size:9px} /* "Velg antall" skal få plass: litt bredere kolonne + tettere polstring (skrift uendret) */ .wrap .bl-antsel,.wrap .bl-trykk{padding-left:8px!important;padding-right:6px!important} /* Ingen boks, ramme eller glow rundt baandet */ /* Antall- og Trykk?-boksen tett sammen (styles.css spredte dem med space-between) */ .wrap .bl-move{align-self:center!important;justify-self:end!important;min-height:0!important;height:auto!important;margin-right:-4px} /* Transparent header oppå banner-bildet (som original – ingen svart topp) */ #site-header{position:absolute;top:0;left:0;right:0;z-index:20} #site-header .sh-bar{background:transparent!important} #site-header .sh-nav a,#site-header .sh-icons a{text-shadow:0 1px 4px rgba(0,0,0,.5)} /* banneren starter i toppen (bak headeren) */ body{padding-top:0!important} /* Steg 1: bytt plass – hånd-bilde til venstre, fargevelger til høyre */ .wrap .s1preview{order:0} .wrap .s1left{order:1} /* Bånd-farge-overlay på hånd-bildet (posisjon = båndets bbox) */ .armwrap{position:relative;display:block;line-height:0;width:100%} .armwrap .arm-photo{width:100%;height:auto;display:block} .band-overlay{position:absolute;left:23.56%;top:12.89%;width:13.73%;height:54.60%;pointer-events:none} /* --- Finpuss steg 1 / kurv --- */ /* Fargeprøver fyller HELE raden (dynamisk bredde), én rad */ .wrap .palwrap{display:block;width:100%} .wrap .palette{flex-wrap:nowrap} .wrap .swatch{flex:1 1 0;min-width:0;width:auto;height:auto;aspect-ratio:1/1;border:1px solid #aeb8c2} /* Lagerstatus litt mindre (styles.css sin .sthd .stock traff aldri – .stock ligger i .stockline) */ .wrap .stockline .stock{font-size:14px} /* "Valgte farger" en linje lenger ned */ .wrap .chosen-wrap{margin-top:18px} /* Grå glød bak hvite kort OG band-linjer (kontrast mot lys bakgrunn) */ .wrap .step,.wrap .card,.wrap .cartbar,.wrap .bandline{ box-shadow:0 8px 30px rgba(28,40,56,.18),0 2px 9px rgba(28,40,56,.12)!important} /* "Flytt til handlekurv": original knappfarge (firkantet, hvit, Sora) + lavere høyde = som båndet */ /* Kurv-knapp dekker baandet NOEYAKTIG: toppen flukter med baandets topp, og avstanden til rad-kanten blir dermed lik over og under (radens polstring). */ /* Alle UI-fonter = Sora */ .wrap button,.wrap input,.wrap select,.wrap textarea{font-family:"Sora",Arial,Helvetica,sans-serif} /* ===== Produktvelger-overlay ("Se øvrige båndtyper") ===== */ /* Overskriftsrad: produktnavn + liten lenke ved siden av */ /* Egen rad i rutenettet: hoeyre kolonne (kurv) starter da i hoeyde med den hvite boksen */ .wrap .grid{grid-template-areas:"topp topp" "steps cart" "design cart"} @media(max-width:960px){.wrap .grid{grid-template-areas:"topp" "steps" "design" "cart"}} .prod-topp{grid-area:topp;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0;padding-left:22px} .prod-topp .prod-navn{margin:0} /* Lenkestil = samme som nav-lenkene paa den gamle siden (system-ui, versaler, 14px/700/.4px) */ .prod-topp .velg-prod-lenke{background:none;border:0;padding:0;cursor:pointer; font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; color:#2ea3f2;line-height:1.3;white-space:nowrap} .prod-topp .velg-prod-lenke:hover{color:#0284c7;text-decoration:underline} @media(max-width:640px){.prod-topp .velg-prod-lenke{white-space:normal;text-align:left}} #prodVelger{display:none} #prodVelger.open{display:block} .pv-bak{position:fixed;inset:0;background:rgba(12,18,28,.62);z-index:1000} .pv-panel{position:fixed;inset:3vh 2vw;z-index:1001;background:#f7f7f7;border-radius:14px; overflow:auto;padding:26px 26px 34px;box-shadow:0 20px 60px rgba(0,0,0,.4)} .pv-lukk{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%; border:1px solid #d3d9e0;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:#232323} .pv-tittel{font-family:"Sora",Arial,sans-serif;text-align:center;margin:2px 0 22px;font-size:clamp(22px,3vw,34px)} .pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;max-width:1400px;margin:0 auto} .pv-kort{background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:14px;display:flex;flex-direction:column; box-shadow:0 4px 16px rgba(28,40,56,.10);transition:transform .14s ease,box-shadow .14s ease} .pv-kort:not(.pv-snart){cursor:pointer} .pv-kort:not(.pv-snart):hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(28,40,56,.20)} .pv-kort:focus-visible{outline:3px solid rgba(4,169,252,.5);outline-offset:2px} .pv-bilde{background:#eef1f5;border-radius:9px;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;margin-bottom:11px} .pv-bilde img{width:100%;height:100%;object-fit:cover;display:block} .pv-nobilde{color:#8a94a0;font-size:13px} .pv-kort h3{font-family:"Sora",Arial,sans-serif;font-size:16.5px;margin:0 0 6px} .pv-ingress{font-size:13.5px;line-height:1.45;color:#5c6672;margin:0 0 10px} .pv-spec{list-style:none;margin:0 0 12px;padding:0;font-size:12.5px} .pv-spec li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid #f0f2f5} .pv-spec li span{color:#767676} .pv-spec li b{font-weight:600;text-align:right} .pv-cta{margin-top:auto;background:#04a9fc;color:#fff;text-align:center;padding:10px;border-radius:8px;font-weight:600;font-size:14px; border:0;width:100%;cursor:pointer;font-family:"Sora",Arial,sans-serif} .pv-cta:hover{background:#0284c7} .pv-merke{margin-top:auto;background:#eef1f5;color:#8a94a0;text-align:center;padding:9px;border-radius:8px;font-weight:600;font-size:14px} .pv-snart{opacity:.72} /* Pris-oppdeling per produkt i handlekurven */ .pris-gruppe{font-family:"Sora",Arial,sans-serif;font-weight:700;font-size:12px;text-transform:uppercase; letter-spacing:.6px;color:#767676;margin:12px 0 4px;padding-top:8px;border-top:1px solid #e6e6e6} .pris-gruppe:first-child{margin-top:2px;padding-top:0;border-top:0} /* Produktnavn over hånd-bildet */ .wrap .prod-navn{font-family:"Sora",Arial,sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:700; color:#232323;margin:0 0 12px;line-height:1.25} /* Nøkkelfakta + "Les mer"-utvidelse i produktvelgeren */ .pv-hoved{list-style:none;margin:0 0 10px;padding:0;font-size:13px} .pv-hoved li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #f0f2f5} .pv-hoved li span{color:#767676} .pv-hoved li b{font-weight:600;text-align:right;color:#232323} .pv-mer{background:none;border:0;padding:6px 0 8px;margin:0 0 4px;cursor:pointer;align-self:flex-start; font-family:"Sora",Arial,sans-serif;font-size:13px;font-weight:600;color:#04a9fc;display:flex;align-items:center;gap:5px} .pv-mer:hover{text-decoration:underline} .pv-pil{display:inline-block;transition:transform .22s ease;font-size:11px} .pv-mer[aria-expanded="true"] .pv-pil{transform:rotate(180deg)} .pv-detalj{max-height:0;overflow:hidden;transition:max-height .28s ease} .pv-detalj .pv-spec{margin-bottom:12px} @media (prefers-reduced-motion:reduce){.pv-detalj{transition:none}.pv-pil{transition:none}} /* EN stiplet ramme markerer synlig trykkomraade. Alle andre hjelpestreker og skraverte felt er slaatt av. */ #bigBand{overflow:visible!important} /* saa rammen kan gaa utenfor baandet */ /* [FAMILIE:BANDKANT] se docs/architecture/FAMILIE_bandkant.md Baandet maa skille seg fra flaten BAK det, ogsaa naar de har samme farge. Maalt 29.09: 28 av 55 baandfarger faller under 3:1 mot det hvite lerretet. Skyggen som fantes laa paa SCENEN og tegnet lerretets kant mot siden - ikke baandets kant mot lerretet. KANTEN FOELGER BAKGRUNNEN, IKKE BAANDET. Foerste utgave regnet kantfargen fra baandets luminans. Beviset felte den: lyseblaa (#00b1f0), groenn (#52ae32) og turkis (#00a8b5) havner saa vidt under terskelen, fikk HVIT kant, og den er usynlig mot hvitt lerret. Naar kanten i stedet er motsatt av BAKGRUNNEN, er den alltid synlig der den trengs: er baandet likt bakgrunnen, staar kanten fram; er baandet ulikt, trengs den ikke og gjoer ingen skade. Derfor bor fargen i CSS og ikke i JS: den settes i SAMME blokk som setter flaten, saa de to kan ikke komme i utakt. Lys flate her - den moerke mobilflaten overstyrer lenger nede, ved siden av sin egen bakgrunnsregel. */ #bigBand{ --band-rim:#111111; --band-rim-soft:rgba(17,17,17,.30); box-shadow:0 0 0 1.5px var(--band-rim),0 0 14px 3px var(--band-rim-soft) } /* Nøkkelbånd design-stripe: krok til venstre (utenfor båndet), klips på midten. */ #bigBand.har-krok{margin-left:44px;margin-bottom:22px;box-sizing:border-box} #bigBand .design-krok{position:absolute;right:100%;top:50%;transform:translateY(-50%);height:135%;width:auto;margin-right:-10px;pointer-events:none;z-index:7} /* [FAMILIE:STORRELSE] punkt 12. left er bare en reserve: settBaandTilbehoer() setter den fra produktets klipsPct, slik ordrelista alltid har gjort. Stod den hardkodet her, var designeren og kurven to kilder til samme tall. */ #bigBand .design-klips{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:110.5%;width:auto;pointer-events:none;z-index:7} #bigBand .trykkboks{position:absolute;pointer-events:none;z-index:6;border:1px solid #d71920;box-sizing:border-box} #bigBand .trykkboks::after{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px dashed #fff;box-sizing:border-box} #bigBand .trykkboks-tekst{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:12px; font-family:"Sora",Arial,sans-serif;font-size:11px;font-weight:400;color:#687583;line-height:1.35;white-space:nowrap;text-align:center} /* Ingen lang samleklamme: kun den godkjente rød/hvite trykkgrensen + en liten pil. */ /* Liten pil under teksten; spissen peker ned mot grenselinjen uten å flytte teksten. */ /* alle andre hjelpestreker og skraverte felt av */ #bigBand .safebox,#bigBand .ovlshade,#bigBand .ovlline{display:none!important} #bigBand .pboard.editing{outline:none!important} #zones{display:none!important} /* luft over baandet saa etiketten faar plass */ #resultArea .stage,#bigBand{margin-top:0} .band.edit{margin-top:26px} /* Fargekode (FJG/Matte) under baandet i hovedvinduet */ /* ===== Tekstil: palett-rutenett (hovedrad fyller bredden, alle ruter like store) ===== */ /* Tekstil: lager-status paa neon-raden, hoyrestilt mot hovedpalettens hoyre kant */ /* ===== Hånd-kort: ALDRI strekk av palett-høyden (laas til bildehoyde) ===== */ /* styles.css har .s1row{align-items:stretch}+.s1prevcard{height:100%}+.arm-photo{object-fit:cover} -> hoy palett-boks strakk baandet. Overstyres her: */ .wrap .s1row .s1preview{align-self:flex-start} .wrap .s1prevcard{height:auto;align-items:flex-start} .wrap .s1prevcard .armwrap{align-self:flex-start} .wrap .armwrap .arm-photo{height:auto;object-fit:initial} /* Legg-i-kurv: inaktiv (graa) + rod hoppepil-krav ved klikk foer valg */ @keyframes kravhopp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* ===== TEKSTIL: utstrakt visning (Bytt visningstype) ===== */ #resultArea h2{position:relative} @keyframes vishoppV{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} #bigBand.utstrakt{aspect-ratio:350/15;background-image:none!important;margin-top:38px} #bigBand.utstrakt>.zone-left,#bigBand.utstrakt>.pboard,#bigBand.utstrakt>.trykkboks{display:none!important} .utstrakt-lag{position:absolute;inset:0;border-radius:2px} .rekt-guider .ugrense{position:absolute;top:-15px;bottom:-3px;border-left:1px dashed #f39c12} .rekt-guider .ugrense.v{left:21.43%} .rekt-guider .ugrense.h{left:78.57%} .rekt-guider .uklamme{position:absolute;top:-17px;height:10px;border:2px solid #9aa2ab;border-bottom:0;border-radius:4px 4px 0 0} .rekt-guider .uklamme.venstre{left:0;right:calc(78.57% + 8px)} .rekt-guider .uklamme.midt{left:21.43%;right:21.43%;border-color:#555} .rekt-guider .uklamme.hoyre{left:calc(78.57% + 8px);right:0} .rekt-guider .uklamme-tekst{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11px "Sora",Arial,sans-serif;letter-spacing:.2px} .rekt-guider .uklamme.midt .uklamme-tekst{color:#555} .rekt-guider .uklamme.venstre .uklamme-tekst,.rekt-guider .uklamme.hoyre .uklamme-tekst{color:#8a8f96} /* (A) rektangel-designer: guide-overlay + luft over baandet */ #bigBand.rekt{position:relative;margin-top:38px} .rekt-guider{position:absolute;inset:0;pointer-events:none;z-index:5} /* Kveil-visning ("Se på armbånd") */ .kveil-dlg{position:fixed;inset:0;background:rgba(10,15,25,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px} .kveil-dlg.skjul{display:none} .kveil-inner{background:#fff;border-radius:14px;padding:16px 16px 20px;max-width:min(900px,92vw);position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35)} .kveil-tit{font:700 16px "Sora",Arial,sans-serif;color:#22303f;margin:2px 4px 12px} .kveil-img{display:block;width:100%;height:auto;border-radius:8px} .kveil-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:1px solid #dfe4ea;background:#fff;border-radius:8px;font-size:20px;line-height:1;cursor:pointer} /* Kveil-forhaandsvisning som mini i ordre-lista (tekstil) */ /* Produkttype-rad oeverst (alle baandtyper paa én linje) -- aligne med #steps (padding-left 22) */ .wrap .type-rad-tittel{font-family:"Sora",Arial,sans-serif;font-weight:800;font-size:19px;color:#232323;margin:0} .wrap .prod-topp.type-topp{display:block;padding-right:0} .wrap .prod-topp.type-topp .type-rad-tittel{margin:0 0 10px} .wrap .type-rad{display:flex;gap:10px;flex-wrap:nowrap;margin:0;align-items:flex-start} .wrap .type-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:stretch;border:1px solid rgba(33,38,48,.20);border-radius:12px;background:#fff;padding:6px 6px;box-shadow:0 2px 12px rgba(33,38,48,.46);cursor:pointer;transition:box-shadow .15s,border-color .15s} .wrap .type-navn{font-family:inherit;font-weight:700;font-size:11.5px;color:#232323;text-align:center;line-height:1.15;min-height:1.35em;display:flex;align-items:center;justify-content:center} /* Bildet inni item-boksen -- ingen egen kant, IKKE beskjaer (contain), behold fasong */ .wrap .type-fig{padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;height:80px;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center} .wrap .type-fig img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .wrap .type-item:hover .type-fig img{animation:typeShake .4s ease} @keyframes typeShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-2.2deg)}60%{transform:rotate(2.2deg)}80%{transform:rotate(-1.2deg)}} .wrap .type-item.snart{cursor:default} .wrap .type-item.snart:hover{border-color:rgba(70,74,82,.18);box-shadow:0 1px 8px rgba(58,62,72,.34)} .wrap .type-item.snart .type-fig{opacity:.55} .wrap .type-item.snart:hover .type-fig img{animation:none} .wrap .type-om{background:none;border:0;color:#2f8ef0;font-weight:600;font-size:10.5px;cursor:pointer;padding:1px;font-family:inherit;text-align:center} .wrap .type-om:hover{text-decoration:underline} /* Den gamle mobilfordelingen (flex:1 1 21% / min-width:80px) er fjernet. Produktrekken i heroen eies nå utelukkende av mobilkarusellen under. */ /* L93: Hovedkort og scrollbar rad er separate presentasjonslag. Raden eier bare kvadratiske minikort; spotlighten ligger fast utenfor flexen. */ @media(max-width:760px){ .eventro-shop-page .page-hero{ min-height:350px!important; overflow:hidden; } .eventro-shop-page .page-hero .masthead{ margin:0 0 10px!important; text-align:center; } .eventro-shop-page .page-hero h1{ margin:0!important; font-size:27px!important; line-height:1.06!important; white-space:nowrap; } .eventro-shop-page .page-hero h1 .shop-title-rest{display:none} .eventro-shop-page .page-hero .hero-product-picker{ display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; overflow:visible; } .eventro-shop-page .page-hero .type-rad-tittel{ color:#fff!important; margin:0 0 6px!important; text-align:center; font-size:17px!important; text-shadow:0 1px 3px rgba(0,0,0,.65); } .eventro-shop-page .page-hero .type-rad{ display:block; width:100%; height:100%; margin:0; position:absolute; left:0; right:0; top:0; z-index:1; padding:0; box-sizing:border-box; overflow:visible; scrollbar-width:none; touch-action:pan-y; } .eventro-shop-page .page-hero .type-rad::-webkit-scrollbar{display:none} .eventro-shop-page .page-hero .mobile-product-stage{ position:relative; width:100%; height:154px; overflow:hidden; } .eventro-shop-page .page-hero .type-item{ position:absolute;left:50%;top:50%; width:var(--mobile-card-width,52px)!important; min-width:0!important;max-width:205px!important;height:var(--mobile-card-height,52px)!important; padding:8px;gap:3px; box-sizing:border-box; scroll-snap-align:center; scroll-snap-stop:always; opacity:1!important; transform:translate(calc(-50% + var(--mobile-card-x,0px)),-50%); background:#fff!important; transform-origin:center; border-radius:10px; transform-origin:center center;will-change:transform; transition:transform .2s cubic-bezier(.2,.75,.25,1),width .2s cubic-bezier(.2,.75,.25,1),height .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease; } .eventro-shop-page .page-hero .mobile-product-swiping .type-item{transition:none} .eventro-shop-page .page-hero .type-navn{ position:absolute;left:8px;right:8px;top:7px;z-index:2; display:flex;align-items:center;justify-content:center;min-height:2.3em; color:#232323;font-size:15px;font-weight:700;line-height:1.12;text-align:center; opacity:var(--mobile-card-detail,0); } .eventro-shop-page .page-hero .type-fig{ position:absolute; left:7px;right:7px; top:calc(7px + 32px * var(--mobile-card-detail,0)); bottom:calc(7px + 19px * var(--mobile-card-detail,0)); width:auto;height:auto;min-height:0; } .eventro-shop-page .page-hero .type-fig img{display:block!important;opacity:1!important;visibility:visible!important;max-width:100%!important;max-height:100%!important} .eventro-shop-page .page-hero .type-om{ position:absolute;left:8px;right:8px;bottom:5px;z-index:2; display:block;padding:2px 0;border:0;background:none;color:#04A9FC; font:700 12px "Sora",Arial,sans-serif;opacity:var(--mobile-card-detail,0); } .eventro-shop-page .page-hero .mobile-product-spotlight{ display:none!important; } .eventro-shop-page .page-hero .mobile-product-spotlight .type-navn{ display:flex;align-items:center;justify-content:center;min-height:2.3em; color:#232323;font-size:15px;font-weight:700;line-height:1.12;text-align:center; } .eventro-shop-page .page-hero .mobile-product-spotlight .type-fig{flex:1 1 auto;min-height:0} .eventro-shop-page .page-hero .mobile-product-spotlight .type-om{ display:block; padding:2px 0;border:0;background:none;color:#04A9FC;font:700 12px "Sora",Arial,sans-serif; } } @keyframes mobileProductSpotlightPop{from{transform:translateX(-50%) scale(.92)}to{transform:translateX(-50%) scale(1)}} /* L97: Kun nettbutikkens mobilhero. Headeren eies felles av site-header.js. */ @media(max-width:760px){ .eventro-shop-page .page-hero{min-height:330px!important} .eventro-shop-page .page-hero>.wrap{transform:translateY(24px)!important} } /* Farge-felt venter paa valg: rod hoppepil (.bl-arrow/blbounce) + boks flasher lyseblaa<->hvit (antflash) */ .wrap .bl-col.bl-farge{position:relative} /* "Om produktet"-popover */ /* ===== «Les mer»-modalen. Anders 05.10 ===================== SJIKTET. Laa paa z-index 200. #site-header er position:fixed med z-index 1000, saa menyen dekket de oeverste 105 px - og krysset. Maalt: knappen kunne bare treffes i en 6 px stripe nederst. 1200 er samme sjikt som #helpDlg bruker. STILEN. Panelet har klassen keep-dlg og arver derfor ramme, radius, skygge, .dhead, h3, .xclose og .keep-body fra «L310 - Eventro visuell standard» i styles.css. Under her staar BARE det som er nytt: to kolonner og pristabellen. Ingenting fra standarden er kopiert eller overstyrt. */ .om-produkt{position:fixed;inset:0;z-index:1200;display:none} .om-produkt.open{display:block} .om-produkt .om-bak{position:absolute;inset:0;background:rgba(1,37,65,.42);backdrop-filter:blur(1.5px)} /* keep-dlg kapper paa max-width:760px (styles.css). Det er riktig for en smal dialog, men denne har to kolonner og trenger mer. Dette er den ENESTE regelen fra standarden som loftes, og bare for denne boksen. */ .om-produkt .om-panel{position:relative;width:min(940px,94vw);max-width:none;margin:6vh auto;max-height:88vh;display:flex;flex-direction:column} .om-produkt .dhead{flex:0 0 auto} /* Kroppen scroller bare hvis innholdet faktisk er for hoyt. Paa PC skal den ikke gjore det - derfor to kolonner. */ .om-produkt .om-body{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(252px,.85fr);gap:20px;padding:16px 20px 18px;align-content:start} .om-produkt .om-kol{min-width:0} /* Bildet er et hoyt produktfoto og spiste 330 px av hoyden - det var det som gjorde at boksen scrollet selv med to kolonner. Taket er satt etter maaling: med 160 px faar alle aatte kortene plass paa 1280x800 uten scroll. contain, ikke cover, saa hele baandet synes. */ .om-produkt .om-bilde img{width:100%;max-height:160px;object-fit:contain;border-radius:10px;display:block;margin-bottom:12px;background:#fff} .om-produkt .om-ingress{color:var(--ink-soft,#767676);margin:0 0 12px;font-size:14px;line-height:1.5} .om-produkt .om-spec{list-style:none;padding:0;margin:0} .om-produkt .om-spec li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px solid var(--line,#e6e6e6);font-size:13.5px;line-height:1.4} .om-produkt .om-spec li:last-child{border-bottom:0} .om-produkt .om-spec li span{color:var(--ink-soft,#767676)} .om-produkt .om-spec li b{text-align:right;font-weight:600} .om-produkt .om-kol-pris{background:#f6fcff;border:1px solid rgba(0,0,0,.10);border-radius:12px;padding:14px 16px;align-self:start} .om-produkt .om-pris-h{margin:0 0 8px;font-family:var(--font-ui,"Sora",Arial,sans-serif);font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft,#767676)} .om-produkt .om-pris-h+.om-pris{margin-bottom:14px} .om-produkt .om-pris{width:100%;border-collapse:collapse;font-size:13.5px} .om-produkt .om-pris th{text-align:left;font-weight:400;color:var(--ink-soft,#767676);padding:5px 0;border-bottom:1px solid rgba(0,0,0,.07)} .om-produkt .om-pris td{text-align:right;font-weight:600;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.07);white-space:nowrap} .om-produkt .om-pris tr:last-child th,.om-produkt .om-pris tr:last-child td{border-bottom:0} .om-produkt .om-pris-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft,#767676)} @media (max-width:820px){ .om-produkt .om-panel{width:96vw;margin:3vh auto;max-height:94vh} /* Paa telefon er det ikke plass til to kolonner. Da scroller den, og prisen legger seg under spec-en. */ .om-produkt .om-body{grid-template-columns:1fr;gap:16px;padding:14px 16px 16px} } /* "Velg flere"-knapp over oeverste varelinje */ /* Baandlinje (mockup v13): morkt innrammet kort. Haand venstre (full hoyde) | hoyre-kolonne [preview oeverst + kontroll-rad nederst]. Aligne linjer. */ .wrap .bandline.har-bredde{display:flex!important;align-items:stretch!important;gap:16px!important;grid-template-areas:none!important;position:relative;padding:14px 16px!important;border:1px solid rgba(33,38,48,.18);border-radius:16px;box-sizing:border-box;box-shadow:0 4px 20px rgba(33,38,48,.44)} /* Glow-behind (moerk graa) paa alle input-bokser i varelinja i stedet for harde streker */ /* Haand-bilde venstre, full hoyde */ .wrap .bl-hand{position:relative;flex:0 0 120px;align-self:stretch;border-radius:10px;overflow:hidden;line-height:0;background:#e9edf3} .wrap .bl-hand-inner{position:absolute;top:0;left:50%;height:100%;transform:translateX(-50%);line-height:0} .wrap .bl-hand-base{display:block;height:100%;width:auto} /* Nøkkelhals-miniatyr: bildet fyller boksbredden (cover) uten grå kant. Gated med .bl-hand-cover så bbox-baserte bånd (tyvek/plast/vinyl/tekstil) er urørt. */ .wrap .bl-hand.bl-hand-cover{align-self:flex-start;aspect-ratio:1016/611;height:auto;flex:0 0 120px} .wrap .bl-hand.bl-hand-cover .bl-hand-inner{left:0;width:100%;height:100%;transform:none} .wrap .bl-hand.bl-hand-cover .bl-hand-base{width:100%;height:100%;object-fit:fill} .wrap .bl-hand.bl-hand-cover .bl-hand-band{width:100%;height:100%;object-fit:fill} .wrap .bl-hand-band{position:absolute;display:block} /* Hoyre kolonne: preview (topp) + kontroll-rad (bunn) */ .wrap .bl-rightcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:space-between} /* Baand-forhaandsvisning oeverst -- venstre kant = kontroll-rad venstre, hoyre kant = kurv hoyre */ .wrap .bl-preview{width:100%;box-sizing:border-box} /* Nøkkelhals forhåndsvisnings-stripe: krok til venstre + fade til høyre (båndet fortsetter). */ /* [FAMILIE:STORRELSE] punkt 13. Paddingen staar som variabel fordi band-list.js maa trekke den fra naar rykeklipsen plasseres i prosent - .bl-klips ligger absolutt inne i denne boksen, mens baandet begynner foerst etter paddingen. To tall som maa vaere like, ett sted. */ .wrap .bl-preview.bl-preview-krok{--bl-krok-pad:46px;position:relative;padding-left:var(--bl-krok-pad)} /* [FAMILIE:STORRELSE] punkt 13. Raden er et VINDU, ikke hele baandet. Boksen er P.stripeAspect (27:1), baandet er 45:1. Det er med vilje: hele lengden i full bredde ville gitt en haartynn strek. Fade-masken til hoyre er skiltet som sier at baandet fortsetter utenfor. Standard object-fit er FILL - toeyning. Maalt 14.10: innholdet ble presset til 60,7 % av sin egen bredde, saa et rundt smilefjes ble en oval. «cover» + «left» gir det vinduet alltid var ment aa vaere: baandet i sine egne proporsjoner, vist fra venstre, kuttet der masken toner ut. 27/45 = 60 % av baandet faar plass. Alt design foelger samme lov av seg selv, fordi designet ligger i selve bildet. («contain» var mitt foerste forsoek og ga riktig form, men tegnet hele baandet nedskalert - da ble det for tynt mot krok og klips, og vinduet loey om hvor langt baandet er.) */ .wrap .bl-preview.bl-preview-krok img{object-fit:cover;object-position:left center;position:relative;z-index:2;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);mask-image:linear-gradient(to right,#000 88%,transparent 100%)} .wrap .bl-preview.bl-preview-krok .bl-krok{position:absolute;left:-2px;top:50%;transform:translateY(-50%);height:150%;width:auto;max-height:34px;-webkit-mask-image:none!important;mask-image:none!important;z-index:1} .wrap .bl-preview.bl-preview-krok .bl-klips{position:absolute;top:50%;transform:translate(-50%,-50%);height:auto;width:auto;max-height:30px;-webkit-mask-image:none!important;mask-image:none!important;z-index:3;pointer-events:none} .wrap .bl-preview img{display:block;width:100%;height:auto;border:0;border-radius:4px} .wrap .bl-preview.bl-preview-hvitt-band img{border:1.5px solid rgba(15,34,51,.62);box-sizing:border-box} .wrap .bl-preview.clickable{cursor:pointer} .wrap .bl-preview.clickable:hover img{filter:brightness(1.03)} /* Kontroll-rad nederst: [Båndfarge | Antall | Design | Legg i handlekurv] spredt jevnt, bunn-justert */ .wrap .bl-boxes{display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;width:100%} .wrap .bandline.har-bredde .bl-col{display:flex;flex-direction:column;gap:4px;flex:0 1 auto;min-width:0} .wrap .bandline.har-bredde .bl-col-lbl{display:none} .wrap .bandline.har-bredde .bl-col select,.wrap .bandline.har-bredde .bl-col .bl-cta{height:34px!important;box-sizing:border-box} .wrap .bandline.har-bredde .bl-col .bl-cta{display:flex;align-items:center;justify-content:center} .wrap .bandline.har-bredde .bl-antall,.wrap .bandline.har-bredde .bl-trykk-wrap{width:100%} .wrap .bandline.har-bredde .bl-antall select{width:100%;box-sizing:border-box} /* Kategori-overskrift over hver produkt-gruppe (type + art.nr) + Velg-flere hoyre */ html{overflow-anchor:none} .wrap #bandList{gap:18px!important} .wrap .bl-kat-head{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap} .wrap .bl-kat-head:not(:first-child){margin-top:22px} .wrap .bl-kat-tittel{display:flex;align-items:baseline;gap:8px} @keyframes flereBlink{0%,100%{opacity:1}50%{opacity:0}} /* Per-linje "legg til flere bånd-farger"-lenke -- flush hoyre, hevet 8px mot antall-boksens midt */ /* Stor "Legg alle baand i handlekurv" nederst under siste linje */ .wrap .bl-kat-navn{font-family:"Sora",Arial,sans-serif;font-weight:800;font-size:17px;color:#232323} .wrap .bl-kat-art{font-family:"Sora",Arial,sans-serif;font-weight:600;font-size:13px;color:#7a7a7a} /* Kurv som lang, smal knapp i raden -- hele teksten paa ÉN linje */ /* Ghost-baand (hvit, stiplede streker) foer farge er valgt */ /* Baandfarge-boks (lik Antall) -- palett aapner OPPOVER (boksen staar nederst) */ .wrap .bandline.har-bredde .bl-farge{position:relative} .wrap .bl-farge-vis{display:flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;padding:4px 12px;background:#d6ebff;border:1px solid #8fc3ef;border-radius:10px;cursor:pointer;font-family:"Sora",Arial,sans-serif;min-width:118px} .wrap .bl-farge-sq{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.2);flex:0 0 auto;background-size:cover;background-position:center} .wrap .bl-farge-kode{font-size:14px;color:#111;font-family:"Sora",Arial,sans-serif;white-space:nowrap} .wrap .bl-farge-pop2{position:absolute;z-index:40;bottom:calc(100% + 6px);left:0;background:#fff;border:1px solid #dfe4ea;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:12px;display:flex;flex-wrap:wrap;gap:7px;width:max-content;max-width:330px;opacity:0;transform:scale(.75);transform-origin:bottom left;pointer-events:none;transition:transform .16s ease,opacity .16s ease} .wrap .bl-farge-pop2.open{opacity:1;transform:scale(1);pointer-events:auto} .wrap .bl-pop-head{flex:0 0 100%;font-size:11px;font-weight:700;color:#767676;margin:4px 0 1px;text-transform:uppercase;letter-spacing:.02em} .wrap .bl-pop-sw{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;background-size:cover;background-position:center} .wrap .bl-pop-sw:hover{outline:2px solid #2f8ef0;outline-offset:1px} /* Tyvek: diskret lagerstatus i ledig palettplass, kun mens en farge hover/fokuseres */ .wrap .bl-pop-stock-hover{height:26px;min-width:86px;display:inline-flex;align-items:center;padding:0 4px;color:#2e7d32;font-family:"Sora",Arial,sans-serif;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .1s ease} .wrap .bl-pop-stock-hover.vis{opacity:1} /* Bredde + Lås i DESIGNEREN */ .wrap #designSize,.designer-size{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin:16px 0 10px;padding:0 18px} .designer-size .ds-field{display:flex;flex-direction:column;gap:3px} .designer-size .ds-lbl{font-size:11px;color:#767676;font-weight:600;line-height:1} .designer-size select{height:44px;box-sizing:border-box;padding:4px 8px;border:1px solid #8fc3ef;border-radius:8px;background:#d6ebff;font-weight:600;color:#232323;font-size:13px;font-family:"Sora",Arial,sans-serif;cursor:pointer} /* [FAMILIE:STORRELSE] se docs/architecture/FAMILIE_storrelse.md punkt 8 RYKEKLIPSEN. Her stod «.designer-size select.ds-klips{height:32px;min-width:480px}» - en nedtrekksmeny paa 480 px for ett ja/nei-valg. Den laa i raden CSS-en skjulte, saa ingen kunde har noen gang sett den. Anders 14.10 ba om noe beskjedent i stedet: avkryssing, ordet Rykeklips, og et spoersmaalstegn. Bobla aapnes av hover OG av klikk. Begge deler, fordi en telefon ikke har hover - uten klikket ville spoersmaalstegnet vaert pynt der. */ .designer-size .ds-klips-field{flex-direction:row;align-items:center;gap:6px;position:relative} /* Raden staar naa INNE i .stage, rett foran baandet (session-ui.js plasserer den der). Grunnregelens margin:16px 0 10px er laget for plassen under overskriften og ville lagt igjen luft her. */ #designSize.har-klipsvalg{margin:0!important;padding:0 18px!important} .designer-size .ds-klips-valg{display:flex;align-items:center;gap:6px;cursor:pointer;font:600 13px "Sora",Arial,sans-serif;color:#3a4658} /* Prisen skal staa der kunden velger, men ikke rope. Lettere vekt og dempet farge gjoer at «Rykeklips» fremdeles er det man leser foerst. */ .designer-size .ds-klips-pris{font-weight:500;color:#8494a4;white-space:nowrap} .designer-size input.ds-klips{width:16px;height:16px;margin:0;accent-color:#2f8ef0;cursor:pointer;flex:0 0 auto} .designer-size .ds-klips-hjelp{width:18px;height:18px;flex:0 0 auto;padding:0;border:1px solid #b9c6d6;border-radius:50%;background:#fff;color:#5b7086;font:700 12px "Sora",Arial,sans-serif;line-height:1;cursor:pointer} .designer-size .ds-klips-hjelp:hover{border-color:#2f8ef0;color:#2f8ef0} .designer-size .ds-klips-boble{position:absolute;left:0;top:calc(100% + 7px);z-index:40;width:270px;max-width:78vw;padding:10px 12px;background:#fff;border:1px solid #e2e9f1;border-radius:10px;box-shadow:0 6px 22px rgba(20,30,45,.14);font:500 12px "Sora",Arial,sans-serif;color:#3a4658;line-height:1.45;text-align:left;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .13s,transform .13s,visibility .13s} .designer-size .ds-klips-hjelp:hover~.ds-klips-boble, .designer-size .ds-klips-hjelp:focus-visible~.ds-klips-boble, .designer-size .ds-klips-field.viser .ds-klips-boble{opacity:1;visibility:visible;transform:translateY(0)} /* Plast/vinyl (L-form band): kontroll-boksene trekkes OPP saa de staar 'oppaa' baandet, bunn foelger L-tappens bunn. Foerste forsoek -- juster -px etter behov. */ .wrap .bl-lform .bl-rightcol{gap:0} .wrap .bl-lform .bl-boxes{margin-top:-46px;padding-left:44px;position:relative;z-index:3} .wrap .bl-lform .bl-preview img{transform:translateY(-4px)} .wrap .bl-lform-tv .bl-boxes{margin-top:6px;position:relative;z-index:3} .wrap .bl-lform .bl-preview{padding-bottom:0} @media(max-width:760px){ .wrap .bl-boxes{flex-wrap:wrap;gap:12px} .wrap .bandline.har-bredde .bl-col{flex:1 1 40%;min-width:120px} .wrap .bl-hand{flex-basis:96px} } /* ===== "+ Legg til en farge til"-rad (tydelig full-bredde CTA) ===== */ .wrap #leggFargeRad .lfr-plus{font-size:21px;font-weight:800;line-height:1;margin-top:-2px} .wrap #leggFargeRad.attn{animation:flereBlink .2s linear 5} /* ===== Mini-toast ===== */ .mini-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:#1f2530;color:#fff;font-family:"Sora",Arial,sans-serif;font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.32);opacity:0;pointer-events:none;z-index:9999;transition:opacity .25s ease, transform .25s ease;max-width:90vw;text-align:center} .mini-toast.vis{opacity:1;transform:translateX(-50%) translateY(0)} /* ===== Per-linje "+ Legg til flere bånd-farger" (etter Trykk?, fyller ut til båndets høyre kant) ===== */ .wrap .bl-flere-btn{flex:1 1 auto;align-self:stretch;min-height:34px;display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;padding:0 14px;border:2px dashed #7fb2ec;border-radius:10px;background:#eef6ff;color:#0a6bd6;font-family:"Sora",Arial,sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s} .wrap .bl-flere-btn .lfr-plus{font-size:18px;line-height:1;margin-top:-1px} .wrap .bl-flere-btn.attn{animation:flereBlink .2s linear 5} /* Ghost-linjas hånd = klikkbar båndtype-velger */ .wrap .bl-hand.bl-hand-klikk{cursor:pointer} .wrap .bl-hand.bl-hand-klikk::after{content:"Bytt båndtype";position:absolute;left:0;right:0;bottom:0;background:rgba(15,20,28,.72);color:#fff;font-size:10px;font-weight:700;letter-spacing:.2px;padding:3px 2px;text-align:center;opacity:0;transition:opacity .15s;z-index:3} .wrap .bl-hand.bl-hand-klikk:hover::after{opacity:1} .wrap .bl-hand.bl-hand-klikk:hover{box-shadow:inset 0 0 0 2px #2f8ef0} /* ===== Båndtype-velger (overlay) ===== */ .type-velger{position:fixed;inset:0;z-index:10000;display:none} .type-velger.open{display:block} .type-velger .tv-bak{position:absolute;inset:0;background:rgba(15,20,28,.5)} .type-velger .tv-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:20px 22px;max-width:900px;width:92vw;max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)} .type-velger .tv-lukk{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#555} .type-velger h3{font-family:"Sora",Arial,sans-serif;font-weight:800;font-size:20px;color:#232323;margin:0 0 14px} .type-velger .tv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .type-velger .tv-card{border:1px solid rgba(33,38,48,.2);border-radius:12px;background:#fff;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 10px rgba(33,38,48,.16);transition:box-shadow .15s,border-color .15s} .type-velger .tv-card:hover{border-color:#2f8ef0;box-shadow:0 4px 16px rgba(47,142,240,.3)} .type-velger .tv-navn{font-family:"Sora",Arial,sans-serif;font-weight:700;font-size:12.5px;color:#232323;text-align:center} .type-velger .tv-fig{height:82px;background:#f2f4f7;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden} .type-velger .tv-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .type-velger .tv-card.snart{opacity:.55;cursor:default} .type-velger .tv-snart{font-size:10.5px;color:#a04;text-align:center;font-weight:700} @media(max-width:640px){.type-velger .tv-grid{grid-template-columns:repeat(2,1fr)}} /* ===== Høyre-side speil (levende skygge av venstre) ===== */ /* redigering skjer på venstre side */ .wrap .rcol .cqty.cqty-vent{color:#9aa4b2;font-style:italic;font-weight:600} /* ===== "Ta bort design og lukk" (stiplet knapp ved Ferdig) ===== */ /* ===== Kompakt tyvek/ikke-L-linje: bånd + bokser høyere opp, mindre boks (hånd følger) ===== */ .wrap .bandline.har-bredde.bl-lform-tv{padding-top:8px!important;padding-bottom:10px!important} .wrap .bl-lform-tv .bl-rightcol{gap:6px} .wrap .bl-lform-tv .bl-boxes{margin-top:0} /* ===== Ensartet Sora + størrelse på valg-boksene (Antall/Trykk = samme som Båndfarge-koden) ===== */ .wrap .bandline.har-bredde select{font-family:"Sora",Arial,sans-serif;font-size:14px} /* ===== Fargekode-felt i designeren (vises ved fargetrykk != svart/hvit) ===== */ /* ===== TEKSTIL: logo-fargekvantisering (weave-colors) ===== */ .weave-wrap{margin-top:12px;padding:10px 12px;border:1px solid #d7deea;border-radius:12px;background:#f6f9fe} .weave-wrap.hidden{display:none} .weave-hdr{font-family:"Sora",Arial,sans-serif;font-weight:700;font-size:13px;color:#243;margin-bottom:8px} .weave-rows{display:flex;flex-direction:column;gap:6px} .weave-row{display:flex;align-items:center;gap:10px;cursor:pointer} .weave-sw{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.2);flex:0 0 auto} .weave-pick{width:26px;height:26px;padding:0;border:1px solid #cfd6df;border-radius:6px;background:none;cursor:pointer;flex:0 0 auto} .weave-hex{font-family:"Sora",Arial,sans-serif;font-size:13px;color:#222} .weave-note{font-family:"Sora",Arial,sans-serif;font-size:12px;color:#5b6572;margin:8px 0 6px} /* popup */ /* ===== weave popup: slider + fargevelger ===== */ /* ===== Designer: zoom + panorering ===== */ .design-zoom-wrap{overflow:auto;position:relative;max-width:100%} .design-zoom-wrap.pan{cursor:grab} .design-zoom-wrap.pan *{cursor:grab!important} .design-zoom-bar{display:flex;align-items:center;gap:10px;margin:8px 0 4px} .design-zoom-bar button{width:36px;height:30px;border:1px solid #cfd6df;border-radius:8px;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:#243;font-family:"Sora",Arial,sans-serif;display:flex;align-items:center;justify-content:center} .design-zoom-bar button:disabled{opacity:.4;cursor:default} .design-zoom-bar button:hover:not(:disabled){background:#eef4fc;border-color:#9fc3ec} .design-zoom-bar #zoomLbl{font-family:"Sora",Arial,sans-serif;font-size:13px;font-weight:700;color:#243;min-width:46px;text-align:center} /* ===== weave designer-rader: Før/Justert-kolonner, lik fasong ===== */ .wrap .weave-pick{width:22px;height:22px;border-radius:5px} .weave-pick,.weave-card .weave-pick{-webkit-appearance:none;appearance:none;padding:0} .weave-pick::-webkit-color-swatch-wrapper{padding:0} .weave-pick::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:5px} .weave-pick::-moz-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:5px} /* ===== weave popup: horisontale kort (PC), vertikalt (mobil), adaptiv bg ===== */ .weave-card{flex:1 1 200px;max-width:260px;border:1px solid #e6ebf2;border-radius:12px;background:#fafcff;padding:10px;display:flex;flex-direction:column;gap:8px} .weave-card.samlet{background:#eef6ff;border-color:#c8e0f7;flex-basis:100%;max-width:100%} .weave-card-img{width:100%;height:120px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden} .weave-card-img img{max-width:94%;max-height:94%;object-fit:contain} .weave-card-meta{display:flex;align-items:center;gap:8px} .weave-card-lbl{font-family:"Sora",Arial,sans-serif;font-size:12px;color:#243} .weave-card-btns{display:flex;align-items:center;gap:8px} .weave-card .weave-pick{width:28px;height:28px;border-radius:7px} .weave-card .weave-pick::-webkit-color-swatch{border-radius:6px} .weave-card-vis{font-family:"Sora",Arial,sans-serif;font-size:12px;font-weight:700;color:#2f8ef0;background:#fff;border:1px solid #bcd8f5;border-radius:8px;padding:6px 12px;cursor:pointer;margin-left:auto} .weave-card-vis:hover{background:#eef4fc} @media(max-width:640px){.weave-card{flex-basis:100%;max-width:100%}} /* ===== weave stor detalj-modal (Vis stort) ===== */ .weave-big-ov{position:fixed;inset:0;background:rgba(12,18,26,.62);display:none;align-items:center;justify-content:center;z-index:10000} .weave-big-ov.open{display:flex} .weave-big{background:#fff;border-radius:16px;max-width:780px;width:94%;max-height:88vh;overflow:auto;display:flex} .weave-big-img{flex:1 1 auto;min-height:360px;display:flex;align-items:center;justify-content:center;border-radius:16px 0 0 16px} .weave-big-img img{max-width:94%;max-height:82vh;object-fit:contain} .weave-big-side{flex:0 0 230px;padding:22px;display:flex;flex-direction:column;gap:14px} .weave-big-side h3{font-family:"Sora",Arial,sans-serif;margin:0;font-size:22px;color:#12202e} .weave-big-row{display:flex;align-items:center;gap:8px;font-family:"Sora",Arial,sans-serif;font-size:14px;color:#243} .weave-big-lbl{font-family:"Sora",Arial,sans-serif;font-size:13px;font-weight:600;color:#333} .weave-big-pick{width:100%;height:46px;border:1px solid #cfd6df;border-radius:9px;padding:0;cursor:pointer;background:none} .weave-big-ok{margin-top:auto;font-family:"Sora",Arial,sans-serif;font-size:15px;font-weight:700;color:#fff;background:var(--good,#2e9e5b);border:0;border-radius:10px;padding:13px;cursor:pointer} .weave-big-ok:hover{filter:brightness(1.05)} @media(max-width:640px){.weave-big{flex-direction:column}.weave-big-side{flex-basis:auto}.weave-big-img{border-radius:16px 16px 0 0;min-height:220px}} /* ===== "Et øyeblikk…"-overlay under sanntids tråd-farge-oppdatering ===== */ .busy-ov{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(12,18,28,.35);z-index:100000} .busy-ov.open{display:flex} .busy-box{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:16px 22px;box-shadow:0 18px 60px rgba(0,0,0,.4);font:600 15px "Sora",Arial,sans-serif;color:#12202e} .busy-spin{width:22px;height:22px;border-radius:50%;border:3px solid #d7deea;border-top-color:#2f8ef0;animation:busySpin .8s linear infinite;flex:0 0 auto} @keyframes busySpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.busy-spin{animation:none}} /* [FAMILIE:OPTIMIZER] Last ned vektorfil-knapp i traad-kalibreringen. BEVISST BEHOLDT selv om knappen ble fjernet i steg 13: funksjonen nedlastTekstilVektor() i weave-calibration.js staar ogsaa igjen, slik at eksporten kan kobles paa igjen med én HTML-linje. Slett begge, eller ingen. */ .thread-cal-svg{font-family:"Sora",Arial,sans-serif;font-size:13px;font-weight:700;color:#2f8ef0;background:#eaf4ff;border:1px solid #bcdcff;border-radius:9px;padding:9px 14px;cursor:pointer;margin-right:10px} .thread-cal-svg:hover{background:#dcecff} .thread-cal-svg:disabled{opacity:.6;cursor:default} /* Tråd-kalibrering: zoom + scroll i detaljvisning, ryddet slider-stil (despeckle=kontur), veiledning */ .thread-cal{--zoom:100%} .thread-cal .thread-speck{margin-top:14px;background:#fff;border:1px solid #d8e0e8;border-radius:10px;padding:11px} .thread-cal .thread-speck label{display:flex;justify-content:space-between;font-weight:750;font-size:12px;margin:0} .thread-cal .thread-speck input{width:100%;accent-color:#2589ee} .thread-cal .thread-speck small,.thread-cal .thread-stroke small{display:block;margin-top:5px;color:#71808e;font-size:10px;line-height:1.35} .thread-guide{margin:9px 0 0;padding:8px 10px;background:#eef6ff;border:1px solid #cfe4ff;border-radius:9px;color:#33566f;font-size:11px;line-height:1.4} .thread-zoom{display:flex;align-items:center;gap:8px;margin:2px 0 9px;flex-wrap:wrap} .thread-zoom button{width:30px;height:30px;border:1px solid #cfd8e2;background:#fff;border-radius:8px;font-size:18px;font-weight:800;line-height:1;cursor:pointer} .thread-zoom button:hover{background:#f0f5fb} .thread-zoom-val{font-weight:800;font-size:13px;min-width:46px;text-align:center} .thread-zoom .thread-zoom-hint{color:#687887;font-size:11px;flex:1 1 160px;min-width:120px} .thread-cal .thread-snap-img{height:220px;overflow:auto} .thread-cal .thread-snap-img img{width:var(--zoom,100%)!important;max-width:none!important;max-height:none!important;height:auto!important;object-fit:initial!important} .thread-cal .thread-cal-band img{width:var(--zoom,100%)!important;max-width:none!important} @media(max-height:820px) and (min-width:721px){.thread-cal .thread-snap-img{height:150px}} /* Per-element-innstillinger i tråd-kalibreringen */ .thread-scope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #d8e0e8;border-radius:10px;padding:8px 10px;margin-bottom:10px} .thread-scope-lbl{font-weight:800;font-size:12px;color:#33566f;flex:1 1 120px} .thread-scope button{border:1px solid #cfd8e2;background:#f5f9ff;color:#2f6fbf;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer} .thread-scope button:hover{background:#e9f2ff} .thread-cal .thread-snap-title{cursor:default;display:flex;align-items:center;gap:6px} .thread-cal .thread-snap-title:has(.thread-snap-hint){cursor:pointer} .thread-cal .thread-snap-title:has(.thread-snap-hint):hover{color:#2589ee} .thread-cal .thread-snap-hint{font-weight:600;font-size:9.5px;color:#9aa4b2} .thread-cal .thread-snap-badge{margin-left:auto;font-size:9.5px;font-weight:800;color:#2589ee;background:#eaf4ff;border:1px solid #bcdcff;border-radius:7px;padding:1px 6px} .thread-cal .thread-snap.sel{outline:2px solid #2589ee;outline-offset:1px;border-radius:10px} /* Per-element fargevalg */ .thread-cal .thread-color.disabled{opacity:.38;cursor:not-allowed} .thread-cal .thread-pal-note{margin:6px 0 0;padding:7px 9px;background:#fff7ea;border:1px solid #ffe0b0;border-radius:9px;color:#7a5a1f;font-size:10.5px;line-height:1.35} /* Farge-merge (dra og slipp) + forenklet per-element */ .thread-cal .thread-color{position:relative} .thread-cal .thread-color-hex{flex:1} .thread-cal .thread-merge-handle{margin-left:auto;cursor:grab;font-size:13px;color:#8697a6;opacity:.75;user-select:none;padding:1px 4px;border:1px solid #d8e0e8;border-radius:5px;background:#fff;line-height:1.15} .thread-cal .thread-merge-handle:hover{opacity:1;color:#2589ee;border-color:#bcdcff;background:#f2f8ff} .thread-cal .thread-merge-handle:active{cursor:grabbing} .thread-cal .thread-color.dragging{opacity:.5} .thread-cal .thread-color.merge-target{outline:2px dashed #2589ee;outline-offset:1px;background:#eaf4ff} /* Merge-verktøy: angre + tilbakestill */ .thread-pal-tools{display:flex;gap:8px;margin:8px 0 0;flex-wrap:wrap} .thread-pal-tools button{border:1px solid #cfd8e2;background:#fff;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;color:#3a4a5a} .thread-pal-tools button:hover:not(:disabled){background:#f0f5fb;border-color:#bcdcff;color:#2f6fbf} .thread-pal-tools button:disabled{opacity:.45;cursor:default} .thread-pal-tools .thread-reset-all{color:#b4432b;border-color:#f0c9bf} .thread-pal-tools .thread-reset-all:hover{background:#fdeee9;border-color:#e6b3a6;color:#a6371f} /* Per-farge angre-knapp (splitt sammenslåing) */ .thread-cal .thread-color-undo{cursor:pointer;font-size:12px;color:#b4432b;opacity:.85;user-select:none;padding:1px 5px;border:1px solid #f0c9bf;border-radius:5px;background:#fff;line-height:1.15;margin-left:4px} .thread-cal .thread-color-undo:hover{background:#fdeee9;opacity:1;color:#a6371f} /* Auto-velg-knapp */ .thread-pal-tools .thread-auto-farger{color:#0a7d55;border-color:#b7e3cf;background:#f1fbf6} .thread-pal-tools .thread-auto-farger:hover{background:#e2f6ec;border-color:#8fd3b3;color:#086a48} /* Farge-oppsett-forslag */ .thread-cal .thread-forslag{margin:8px 0 0;display:flex;flex-direction:column;gap:6px;background:#f4f8fd;border:1px solid #d5e3f2;border-radius:10px;padding:9px} .thread-cal .thread-forslag .fl-tit{font-weight:800;font-size:11px;color:#33566f} .thread-cal .thread-forslag-alt{display:flex;align-items:center;gap:9px;border:1px solid #cfd8e2;background:#fff;border-radius:9px;padding:6px 9px;cursor:pointer;text-align:left} .thread-cal .thread-forslag-alt:hover{border-color:#8fc0f5;background:#f2f8ff} .thread-cal .thread-forslag-alt.valgt{border-color:#2589ee;box-shadow:0 0 0 2px rgba(37,137,238,.18)} .thread-cal .thread-forslag-alt .fl-lbl{font-size:11px;font-weight:700;color:#3a4a5a;flex:1 1 auto} .thread-cal .thread-forslag-alt .fl-sws{display:flex;gap:3px;flex:none} .thread-cal .thread-forslag-alt .fl-chip{width:16px;height:16px;border-radius:4px;border:1px solid #0002} /* Item 2: hjørne-håndtak synlige utenfor båndet i redigering (designet klippes fortsatt av .designclip) */ /* Item 3: rød hoppepil-hint på tekst/opplasting ved start */ @keyframes obhop{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* === linje106: håndtak-bunn, rød hoppepil (overstyrer linje104), panel-animasjon === */ /* Bunn-håndtak: gi rom under båndet i redigering + ikke klipp */ .wrap .stage{overflow:visible} .wrap #resultArea .stage{margin-bottom:26px} .wrap .band.edit{overflow:visible} .wrap .band.edit .hlayer{z-index:40} /* Onboarding-hjelp: rød boble m/OK + hoppende rød pil (bouncer ALLTID) */ @keyframes obhop{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} /* Panel "faller ut" fra båndet ved inngang */ @keyframes panelDrop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}} /* Blikkfang: større bånd i design-modus (v1 – bredere modal) */ .wrap #resultArea.as-modal.bandshow{width:min(1440px,99vw)} /* linje107: løft hele bånd-wrapperen over zoom-verktøylinja så BUNN-håndtaket ikke dekkes (.hlayer er pointer-events:none, så verktøylinja er fortsatt klikkbar utenom håndtakene) */ .wrap .design-zoom-wrap{position:relative;z-index:5} .wrap #designZoomBar{position:relative;z-index:1} /* [FAMILIE:VERKTOYRAD] DET ER DENNE SOM STENGER HAANDTAKENE INNE. 02.11.2026 MAALT i nettleseren, kjeden opp fra markeringsramma: .hset.solo -> .hlayer z=1100 -> .pboard.editing z=2 -> .design-zoom-wrap z=5 <- her stopper det -> #resultArea.as-modal z=1000 .design-zoom-wrap har position:relative og z-index, og lager derfor en egen stabel. Alt inni den - ogsaa .hlayer paa 1100 - kan ikke komme hoeyere enn 5 sett utenfra. Og 5 taper mot verktoyskallet (.designer-start-shell) paa 1010. Derfor ble forsoeket i levering 347 virkningsloest: det loeftet .hlayer INNE i en boks som selv laa for lavt. Det er den samme feilen som da noen i sin tid satte 40 - riktig tanke, feil nabo. MAALT etter loeftet, i Anders' egen nettleser: ramma tegnes over opplastingspanelet JA knapp-punkt traff designer-tool-icon (raden lever) panel-punkt traff designerUploadPrompt 1100 ligger over skallet paa 1010 og under dialogene paa 1200. TO TING STAAR IGJEN, OG DE ER KLIPPING - IKKE DEKKING. Ingen z-index hjelper mot dem. 1) Toppen. MAALT: ramma blir synlig foerst paa y=145, og `.body` (diven inne i modalen, ikke ) har overflow:hidden med boks fra y=143. Alt over den kanten klippes bort. 2) .design-zoom-wrap har selv overflow:auto, se linje 666. Den SKAL altsaa klippe nedover ogsaa. I en rigg med samme regler gjorde den nettopp det. Men i Anders' nettleser tegnes ramma likevel tvers over opplastingspanelet, langt utenfor wrapperens egen boks (maalt til y 260-312). Det henger ikke sammen, og det er IKKE forstaatt. Mulig forklaring som ikke er sjekket: det finnes mer enn ett element med denne klassen, og proeven leste feil. Loeftet under er beholdt fordi Anders saa at det virket i sin egen nettleser. Det er én verdi og lett aa ta bort igjen. Men ingen skal tro at saken er forstaatt foer punkt 2 er oppklart. */ #resultArea.as-modal .design-zoom-wrap{z-index:1100} .wrap #bigBand.band.edit{overflow:visible} /* [FAMILIE:VERKTOYRAD] MARKERINGSRAMMA SKAL ALLTID LIGGE OEVERST. 02.11.2026 Anders: «select-boksen legger seg bakom tool-boksene.» 40 var for lavt, og grunnen er at det ble satt mot FEIL nabo. MAALT: #resultArea.as-modal z-index:1000 + will-change:transform .stage ingen z-index paa PC - altsaa INGEN egen stabel #bigBand heller ingen (bare box-shadow og margin) .hlayer 40 <- haandtakene .designer-quick-dock .designer-start-shell 1010 <- hele verktoyraden .designer-quick-tools 3 Fordi hverken .stage eller #bigBand lager en egen stabel, moetes .hlayer og skallet DIREKTE inne i #resultArea. Da staar 40 mot 1010, og haandtakene taper hver gang. Tallet 3 paa selve knappene er uten betydning - det gjelder bare inne i skallet. (will-change:translate paa .stage finnes, men bare inne i @media(max-width:720px). Paa mobil ligger verktoyraden i flyten og overlapper ikke, saa der er det ikke noe problem aa loese.) 1100 er valgt bevisst: over skallet paa 1010 og over zoom-laget paa 1060, men UNDER dialogene paa 1200. En advarsel skal fortsatt komme foran et haandtak. Prisen: et haandtak som havner oppaa et aapent panel tar klikket der. Selve rammen er pointer-events:none, saa det gjelder bare de smaa knappene. Det er bevisst - uten det naar man ikke strekk-haandtaket paa et design som er hoeyere enn baandet, og det var nettopp problemet. */ .wrap #bigBand.band.edit .hlayer{z-index:1100} /* linje109: standard musepeker-ikon på zoom "Rediger"-knappen (erstatter CSS-trekant) */ .zoom-point .zoom-arrow{width:17px!important;height:17px!important;border:0!important;transform:none!important;filter:none!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l0 15.6 3.9-3.6 2.3 5.2 2.5-1.05-2.25-5.05 5.15 0z' fill='%23111' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important} .zoom-point.zoom-edit.active .zoom-arrow{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l0 15.6 3.9-3.6 2.3 5.2 2.5-1.05-2.25-5.05 5.15 0z' fill='%23fff' stroke='%23111' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important} /* === linje110: ombygd verktøylinje under båndet (3 soner) === */ .design-zoom-bar{display:flex;align-items:center;gap:12px} .design-zoom-bar .zbar-left{display:flex;align-items:center;gap:6px} .design-zoom-bar .zoom-lbl{min-width:66px;height:40px;text-align:center;font-weight:800;font-size:14px;color:#123;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} /* Standard musepeker-pil: STØRRE og svart, fyller ruten */ .design-zoom-bar #zoomEdit.zoom-point{min-width:46px;height:40px;display:inline-flex;align-items:center;justify-content:center} .design-zoom-bar #zoomEdit .zoom-arrow{width:26px!important;height:26px!important;border:0!important;transform:none!important;filter:none!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 1.5l0 17 4.4-4 2.5 5.8 2.9-1.2-2.5-5.65 5.8 0z' fill='%23111' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important} .design-zoom-bar #zoomEdit.zoom-edit.active{background:#e8eff7!important;box-shadow:0 0 0 2px rgba(22,119,232,.28)!important} .design-zoom-bar #zoomEdit.zoom-edit.active .zoom-arrow{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 1.5l0 17 4.4-4 2.5 5.8 2.9-1.2-2.5-5.65 5.8 0z' fill='%23111' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important} /* === linje111: lupe-verktøy-bar (revidert), tekst-knapper, blikkfang-intro === */ .design-zoom-bar .zoom-mag{min-width:44px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0!important} .design-zoom-bar .zoom-mag svg{display:block} .design-zoom-bar .zoom-point.zoom-mag.active{background:#dbeafe!important;color:#123!important;box-shadow:0 0 0 2px rgba(22,119,232,.35)!important} .design-zoom-bar input.zoom-lbl{width:70px;height:40px;text-align:center;font-weight:800;font-size:14px;color:#123;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 4px;outline:none;font-family:inherit} .design-zoom-bar .zoom-reset{min-width:46px!important;height:40px;font-weight:800;font-size:13px} /* Blikkfang-intro: båndet vises først, panelet "faller"/glir ned under det */ @keyframes bandSpread{0%{transform:scale(.5);opacity:0}70%{opacity:1}100%{transform:scale(1);opacity:1}} @keyframes flowIn{0%{opacity:0;transform:translateY(-46px)}100%{opacity:1;transform:none}} .wrap #resultArea.intro .stage{animation:bandSpread .7s cubic-bezier(.2,.75,.25,1);position:relative;z-index:40;transform-origin:center top} .wrap #resultArea.intro .body>*:not(.stage){animation:flowIn .75s cubic-bezier(.2,.75,.25,1) 2.6s both} /* linje113: to hoppepiler + alternerende blink på tekst/opplasting-knappene */ .create-row{position:relative;overflow:visible} /* Gjenbrukbar hint-effekt (rod hoppepil + flash) – .bl-arrow/antflash gjenbrukes fra farge/antall-hintene */ .hint-host{position:relative} .hint-flash{animation:antflash .7s ease infinite} .create-row>.tbtn.hint-flash{color:#0f2233;border-color:#8fc3ef} @media(prefers-reduced-motion:reduce){.hint-flash{animation:none}} /* linje115: TO-FASE vekst. Fase 1: kun båndet vokser til full bredde (boks følger båndhøyden). Fase 2: båndet står i ro, boksen vokser opp/ned og resten flyter inn. Slow-mo for iterasjon. */ /* Fase 1: skjul alt untatt selve båndet, båndet fyller boksen */ /* skjul guide-chrome (klammer/etiketter/grenselinjer) inne i båndet i fase 1 – kun rent bånd flyr */ /* Fase 2: modalen står ferdig, clip-path ruller opp/ned fra det stillestående båndet (rullegardin) */ @keyframes flipFadeIn{from{opacity:0}to{opacity:1}} /* === linje124: to-kolonne trådfarge-panel (#4) === */ .wrap #weaveWrap .weave-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .wrap #weaveWrap .weave-col-hdr{font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#5b7086;margin-bottom:6px} .wrap #weaveWrap .weave-2col .weave-row{display:flex!important;align-items:center;gap:9px;grid-template-columns:none!important;min-height:26px!important;padding:2px 0} .wrap #weaveWrap .weave-2col .weave-sw{width:22px!important;height:22px!important;min-width:22px;border-radius:5px!important;flex:none} .wrap #weaveWrap .weave-2col .weave-hex{font-size:12px!important;white-space:normal;overflow:visible;text-overflow:clip} .wrap #weaveWrap .weave-forklaring{font-size:12px;line-height:1.4;color:#3a4a5a;margin:0 0 8px} .wrap #weaveWrap .weave-forslag-list{border:1px solid #cfe0f2;background:#f5faff;border-radius:10px;padding:8px 10px} .wrap #weaveWrap .weave-knapper{display:flex;gap:8px;margin-top:10px;position:relative} .wrap #weaveWrap .weave-knapper .tbtn{flex:1 1 0;min-height:38px;justify-content:center;font-weight:700} .wrap #weaveWrap .weave-godkjenn{background:var(--good,#2e9e5b);color:#fff;border-color:transparent} .wrap #weaveWrap .weave-godkjenn:hover{filter:brightness(1.05)} .wrap #weaveWrap .weave-korriger{background:#fff;color:#2f6fbf;border:1px solid #bcdcff} .wrap #weaveWrap .weave-korriger:hover{background:#f0f5fb} @media(max-width:900px){.wrap #weaveWrap .weave-2col{grid-template-columns:1fr}} /* === linje126: trådfarge-kalibrering som egen side i vinduet (dra-merge) === */ .wrap #kalSide.kal-side{padding:4px 2px 8px} .wrap #kalSide .kal-2col{display:grid;grid-template-columns:2fr 3fr;gap:20px;align-items:stretch;overflow:hidden} .wrap #kalSide .kal-forklaring{font-size:13.5px;line-height:1.5;color:#2b3a49;margin:0 0 14px;padding-left:14px;border-left:3px solid #d9e6f5} .wrap #kalSide .kal-colhdr{font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#5b7086;margin:0 0 8px} .wrap #kalSide .kal-liste-wrap{position:relative} .wrap #kalSide .kal-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px} .wrap #kalSide .kal-farge{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;cursor:grab;user-select:none;transition:box-shadow .15s ease,transform .12s ease,border-color .15s ease} .wrap #kalSide .kal-farge.kal-dragging{opacity:.4} .wrap #kalSide .kal-farge.kal-target{border-color:#2e9e5b;box-shadow:0 0 0 3px rgba(46,158,91,.3);transform:scale(1.03)} .wrap #kalSide .kal-farge.kal-band-farge{border-color:#f0c36b;background:#fffaf0} .wrap #kalSide .kal-farge.kal-smelter{animation:kalSmelt .5s ease} @keyframes kalSmelt{0%{transform:scale(1)}40%{transform:scale(1.14);box-shadow:0 0 0 6px rgba(46,158,91,.25)}100%{transform:scale(1)}} .wrap #kalSide .kal-sw{width:30px;height:30px;min-width:30px;border-radius:7px;border:1px solid rgba(0,0,0,.12);flex:none} .wrap #kalSide .kal-hex{font-size:13px;color:#243;font-weight:600} .wrap #kalSide .kal-laas{margin-left:auto;font-size:13px;opacity:.7} .wrap #kalSide .kal-teller{margin-top:14px;text-align:center;font-weight:800;font-size:13.5px;padding:11px 12px;border-radius:12px;background:#eef1f4;color:#8a97a5;border:1.5px dashed #c7cfd8} .wrap #kalSide .kal-teller.kal-ferdig{background:#e9f7ef;color:#1f8a4c;border:1.5px solid #2e9e5b} .wrap #kalSide .kal-hjelp{margin-top:10px;font-size:12.5px;line-height:1.45;color:#2f6fbf;background:#f0f7ff;border:1px solid #cfe4fb;border-radius:10px;padding:9px 12px} .wrap #kalSide .kal-manuelt{background:#fff;color:#2f6fbf;border:1px solid #bcdcff} .wrap #kalSide .kal-manuelt:hover{background:#f0f5fb} .wrap #kalSide .kal-band-note{display:block;font-size:11.5px;color:#7386a0;margin-top:6px} /* dra-hjelpere (globale, ikke inne i #kalSide) */ .kal-drag-clone{position:fixed;width:36px;height:36px;border-radius:8px;border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:99999;pointer-events:none} .kal-drag-tip{position:fixed;transform:translateX(-50%);max-width:240px;background:#1f2a37;color:#fff;font-size:12px;line-height:1.35;padding:7px 10px;border-radius:9px;z-index:99999;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.3);text-align:center} @keyframes kalListeBlink{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(47,111,191,.35)}} @media(max-width:820px){.wrap #kalSide .kal-2col{grid-template-columns:1fr}} /* linje127: manuell-hjelp (rød ramme rundt fargene + hoppepil + tekst) */ .wrap #kalSide .kal-liste.kal-ramme{position:relative;border-radius:12px} .wrap #kalSide .kal-liste.kal-ramme::after{content:"";position:absolute;inset:0;border:3px solid #e2001a;border-radius:12px;pointer-events:none;z-index:6;box-shadow:0 0 0 3px rgba(226,0,26,.2)} .kal-man-hjelp{display:flex;position:fixed;z-index:100000;align-items:center;gap:10px;width:max-content;max-width:300px} .kal-man-pil{color:#e2001a;font-size:30px;line-height:1;animation:kalManHop .6s ease infinite} @keyframes kalManHop{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}} .kal-man-boks{background:#fff;border:2px solid #e2001a;border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(200,20,20,.18)} .kal-man-boks p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#2b3a49} .kal-man-ok{background:#e2001a;color:#fff;border:0;border-radius:9px;padding:7px 20px;font-weight:800;cursor:pointer;min-height:0} .kal-man-ok:hover{background:#c00016} @media(max-width:820px){.wrap #kalSide .kal-man-hjelp{position:static;transform:none;margin-top:14px;max-width:none}.wrap .kal-man-pil{transform:rotate(-90deg)}} /* === linje128: designSize skjult i kal/opt + optimaliserings-side === */ .wrap #resultArea.kal-aktiv #designSize{display:none!important} /* Videre-knapp nederst på kalibrering (bunn høyre) */ .wrap #kalSide .kal-jobb{background:#fff;color:#2f6fbf;border:1px solid #bcdcff} .wrap #kalSide .kal-jobb:hover{background:#f0f5fb} /* Design-optimaliserings-siden */ .wrap #optSide.opt-side{padding:4px 2px 8px} .wrap #optSide .opt-2col{display:grid;grid-template-columns:2fr 3fr;gap:20px;align-items:stretch;overflow:hidden} .wrap #optSide .opt-forklaring{font-size:13.5px;line-height:1.5;color:#2b3a49;margin:0 0 14px;padding-left:14px;border-left:3px solid #d9e6f5} .wrap #optSide .opt-knapp{background:#fff;border:1.5px solid #bcdcff;color:#1c6fd0;font-weight:700;font-size:12.5px;border-radius:9px;padding:8px 12px;cursor:pointer;transition:all .12s} .wrap #optSide .opt-knapp:hover{background:#eef6ff} .wrap #optSide .opt-knapp.on{background:#1c6fd0;border-color:#1c6fd0;color:#fff} .wrap #optSide .opt-knapper-tom{font-size:12.5px;color:#8a97a5} .wrap #optSide .opt-laast{opacity:.45;pointer-events:none;filter:saturate(.4)} .wrap #optSide .opt-prev-card.opt-prev-graa{opacity:1;filter:none;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(20,30,45,.14),0 2px 8px rgba(0,0,0,.06)} .wrap #optSide .opt-prev-card.opt-prev-graa:hover{box-shadow:inset 0 0 0 3px rgba(28,111,208,.6),0 5px 14px rgba(28,111,208,.2)} .wrap #optSide .opt-prev-card.opt-prev-valgt{box-shadow:inset 0 0 0 5px #1c6fd0,0 0 0 3px rgba(28,111,208,.35),0 8px 22px rgba(28,111,208,.42);transform:scale(1.025);z-index:3;transition:transform .12s,box-shadow .12s} .wrap #optSide .opt-prev-card.opt-prev-tegnbar{cursor:crosshair;touch-action:none} .wrap #optSide .opt-tegn{background:#f7fafe;border:1px solid #d9e6f5;border-radius:12px;padding:12px 14px;margin-top:4px} .wrap #optSide .opt-tegn-tit{font-weight:800;font-size:13px;color:#243;margin-bottom:4px} .wrap #optSide .opt-tegn-farger{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .wrap #optSide .opt-farge-sw{width:34px;height:34px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);cursor:pointer;padding:0} .wrap #optSide .opt-farge-sw.on{box-shadow:0 0 0 3px #1c6fd0} /* [FAMILIE:TRAADFARGE] Baandfargen staar sist og maa kunne skilles fra en designfarge selv naar baandet er hvitt eller lyst. Derfor en egen, moerk ramme rundt den - ikke en svak nyanse, som forsvinner helt paa en lys skjerm. Pluss et lite hakk i hjoernet som sier «dette er bunnen». */ .wrap #optSide .opt-farge-sw.opt-farge-band{ border:2px dashed #2b3a46;box-shadow:0 0 0 1px rgba(0,0,0,.35)} .wrap #optSide .opt-farge-sw.opt-farge-band.on{ box-shadow:0 0 0 3px #1c6fd0,0 0 0 4px rgba(0,0,0,.35)} .wrap #optSide .opt-farger-tom{font-size:12px;color:#8a97a5} .wrap #optSide .opt-tegn-rad{display:flex;align-items:center;gap:10px;margin-bottom:10px} .wrap #optSide .opt-tegn-lbl{font-size:12px;font-weight:700;color:#5b7086;min-width:48px} .wrap #optSide .opt-tegn-zoom{display:flex;align-items:center;gap:8px} .wrap #optSide .opt-tegn-zoom button{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:16px;font-weight:800;cursor:pointer;color:#2f6fbf;line-height:1} .wrap #optSide .opt-tegn-zoom button:hover{background:#f0f5fb} .wrap #optSide .opt-tegn-knapper{display:flex;gap:8px;margin-top:4px} .wrap #optSide .opt-tegn-knapper button{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12.5px;font-weight:700;color:#3a4a5a;padding:8px 10px;cursor:pointer} .wrap #optSide .opt-tegn-knapper button:hover{background:#f2f6fb;border-color:#bcdcff;color:#2f6fbf} .wrap #optSide .opt-colhdr{font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#5b7086;margin:0 0 8px} .wrap #optSide .opt-spak{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 12px;margin-bottom:6px} .wrap #optSide .opt-spak label{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12.5px;color:#243;margin-bottom:4px} .wrap #optSide .opt-spak .opt-val{font-weight:800;color:#2f6fbf} .wrap #optSide .opt-spak input[type=range]{width:100%;margin:2px 0} .wrap #optSide .opt-spak .opt-ends{display:flex;justify-content:space-between;font-size:10px;color:#8a97a5;margin-top:2px} .wrap #optSide .opt-spak small{display:block;margin-top:3px;font-size:11px;color:#7386a0;line-height:1.3} /* [FAMILIE:VEKTORVEI] Spaker uten funksjon paa vektor. Anders 29.10.2026: «OG saa tar vi bort de spakene som ikke har funksjon paa vektorgrafikk (kan evnt utgraaes og gjoeres utilgjengelig med en liten tekst som sier: "Har kun funksjon ved pixel-grafikk")». Kontrasten er bevisst tydelig - Anders kjoerer skjermen med hoey lysstyrke og mister svake rammer og lys graa tekst. */ .wrap #optSide .opt-spak.opt-spak-av{background:#eef1f4;border-color:#c3ccd6;opacity:.75} .wrap #optSide .opt-spak.opt-spak-av label, .wrap #optSide .opt-spak.opt-spak-av .opt-ends{color:#6b7886} .wrap #optSide .opt-spak.opt-spak-av .opt-val{color:#6b7886} .wrap #optSide .opt-spak.opt-spak-av input[type=range]{filter:grayscale(1);cursor:not-allowed} .wrap #optSide .opt-spak .opt-spak-note{display:block;margin-top:4px;font-size:11px;font-weight:600;color:#44525f;line-height:1.3} .wrap #optSide .opt-spak .opt-tynn-varsel{margin-top:6px;padding:7px 9px;border-radius:8px;background:#fff4e0;border:1px solid #f0c06a;color:#9a5b00;font-size:11.5px;font-weight:600;line-height:1.35} /* [FAMILIE:VEKTORVEI] TO TILSTANDER PAA SAMME BOKS. 30.10.2026 Roed naar minste strekbredde staar under vevens grense, groenn naar den er over. Anders: «rød skrift med rød ramme ... grønn skrift med grønn ramme». MERK SELEKTOREN. Foerste utgave skrev «.opt-tynn-varsel.opt-tynn-info» uten .opt-spak. Den har NOEYAKTIG samme spesifisitet som grunnregelen over - og grunnregelen staar seinere i fila, saa den vant hver gang. Fargen slo aldri gjennom; boksen forble oransje i hele levetiden. Oppdaget 30.10.2026 ved aa se paa et skjermbilde fra Anders. Derfor er .opt-spak med her: da er disse ett hakk sterkere og vinner uansett rekkefoelge. Kraftig kontrast med vilje - Anders kjoerer skjermen lyst og mister svake rammer helt. */ .wrap #optSide .opt-spak .opt-tynn-varsel.opt-tynn-fare{ background:#fdeaea;border:1.5px solid #c62828;color:#8a1212} .wrap #optSide .opt-spak .opt-tynn-varsel.opt-tynn-ok{ background:#e7f6ec;border:1.5px solid #2e7d4f;color:#14532d} /* Startposisjonen: vi HAR rettet noe, og sier hva vi gjorde. Blaa fordi det verken er en advarsel eller en klarering - det er en opplysning om en endring vi gjorde paa kundens design. */ .wrap #optSide .opt-spak .opt-tynn-varsel.opt-tynn-start{ background:#e8f1fb;border:1.5px solid #2b6cb0;color:#17395e} .wrap #optSide .opt-band-note{display:block;font-size:11.5px;color:#7386a0;margin-top:6px} .wrap #optSide .opt-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;padding-bottom:8px;border-top:1px solid var(--line)} @media(max-width:820px){.wrap #optSide .opt-2col{grid-template-columns:1fr}} /* linje129: angre-knapp + band-farge som vanlig celle */ .wrap #kalSide .kal-angre{background:#fff;color:#8a5a00;border:1px solid #e6c88a} .wrap #kalSide .kal-angre:hover:not(:disabled){background:#fff8ec} .wrap #kalSide .kal-angre:disabled{opacity:.45;cursor:default} /* === linje130: back-knapp + per-element zoomet preview + spaker === */ /* skjul den gamle høyre-kolonne tilbake-lenken (erstattet av topp-knapp) */ /* per-element forhåndsvisninger */ .wrap .opt-previews{display:flex;flex-direction:column;gap:18px;min-height:0;flex:1;overflow:hidden} .wrap .opt-prev-card{position:relative;width:100%;flex:1 1 0;min-height:0;border-radius:10px;overflow:auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .wrap #optSide .opt-previews-multi .opt-prev-card{min-height:150px} .wrap .opt-prev-svg{width:var(--optZoom,100%);height:var(--optZoom,100%);min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box} .wrap .opt-prev-svg svg{width:100%;height:100%;display:block} .wrap .opt-prev-lbl{position:sticky;float:left;top:6px;left:8px;margin:6px 0 0 8px;z-index:2;font-size:10.5px;font-weight:800;color:#fff;background:rgba(20,30,45,.55);padding:2px 8px;border-radius:20px} .wrap .opt-prev-merke{position:sticky;float:right;top:6px;right:8px;margin:6px 8px 0 0;z-index:4;font-size:11px;font-weight:800;color:#1c6fd0;background:#fff;border:1.5px solid #1c6fd0;padding:2px 10px;border-radius:20px;pointer-events:none;box-shadow:0 1px 5px rgba(0,0,0,.12)} .wrap .opt-prev-merke.aktiv{background:#1c6fd0;color:#fff;border-color:#1c6fd0;box-shadow:0 2px 10px rgba(28,111,208,.55);font-size:12.5px;padding:4px 13px} .wrap .opt-prev-tom{padding:30px;text-align:center;color:#7386a0;font-size:13px;background:#eef2f7;border-radius:10px} /* linje131: opt-zoom-bar */ .wrap #optSide .opt-zoom-val{font-weight:800;font-size:13px;color:#243;min-width:44px;text-align:center} /* === linje135: Vår anbefaling (opt) === */ /* linje137: per-element farge-fjerning i preview-kort */ .wrap .opt-prev-card{flex-direction:column} .wrap .prev-farger{position:sticky;bottom:0;width:100%;box-sizing:border-box;background:rgba(255,255,255,.92);backdrop-filter:blur(2px);border-top:1px solid rgba(0,0,0,.08);padding:7px 9px;z-index:3} .wrap .prev-farger-tit{display:block;font-size:10.5px;color:#5b7086;margin-bottom:5px;font-weight:700} .wrap .prev-farge-sw{width:24px;height:24px;border-radius:6px;border:1.5px solid rgba(0,0,0,.15);cursor:pointer;padding:0;position:relative} .wrap .prev-farge-sw:hover{transform:scale(1.1)} .wrap .prev-farge-sw.fjernet{opacity:.5} .wrap .prev-farge-sw.fjernet::after{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent 44%,#e2001a 44%,#e2001a 56%,transparent 56%)} /* linje138: fordel høyde uten side-scroll */ .wrap #kalSide .kal-left,.wrap #optSide .opt-left{overflow-y:auto;min-height:0;padding-right:6px} .wrap #kalSide .kal-right,.wrap #optSide .opt-right{display:flex;flex-direction:column;min-height:0} /* ============================================================ linje147: kalibrerings-siden — animert auto + omstrukturering ============================================================ */ /* (E) Symmetrisk avstand topp/bunn (2vh hver), flex-kolonne, foten festet */ .wrap #resultArea.as-modal.kal-aktiv{display:flex!important;flex-direction:column!important;top:2vh!important;bottom:2vh!important;height:auto!important;max-height:none!important;overflow:hidden!important;padding-bottom:10px!important} .wrap #resultArea.as-modal.kal-aktiv>h2{flex:0 0 auto;font-size:24px!important;padding:16px 16px 4px!important;margin:0 0 18px!important} .wrap #resultArea.kal-aktiv #kalSide.kal-side{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:2px 12px 0} .wrap #resultArea.kal-aktiv #kalSide .kal-2col{flex:1 1 auto;min-height:0} .wrap #resultArea.kal-aktiv #kalSide .kal-foot{flex:0 0 auto} .wrap #kalSide .kal-forklaring{margin:0 0 8px} .wrap #kalSide .kal-teller{margin-top:10px} /* (1) "Tilbake" nederst til venstre i foten */ .wrap #kalSide .kal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .wrap #kalSide .kal-foot .side-tilbake{margin:0} /* (3) Rød ramme + lyserød boks når det er FLERE enn 6 farger */ .wrap #kalSide .kal-teller.kal-ikke-ferdig{background:#fdecec;color:#c0261f;border:1.5px solid #e2001a} /* (C+B+4) Valg-knappene OVER fargelista: to blå knapper stablet med mellomrom, beskrivelse i rød firkant med pil ved siden (gjenbruker .kal-man-pil/.kal-man-boks). */ /* (A) Vent-banner (der valg-knappene stod) mens automatisk kalibrering animeres */ .wrap #kalSide .kal-auto-banner{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:#eaf4ff;border:1px solid #bcdcff;border-radius:12px;padding:14px 16px;color:#1f6fbf;font-weight:700;font-size:14px} .wrap #kalSide .kal-auto-spin{width:18px;height:18px;border:3px solid #bcdcff;border-top-color:#2f8ef0;border-radius:50%;animation:kalSpin .8s linear infinite;flex:none} @keyframes kalSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.wrap #kalSide .kal-auto-spin{animation:none}} /* (5) Angre + Tilbakestill side om side under fargelista */ .wrap #kalSide .kal-knapper-rad{display:flex;gap:9px;margin-top:24px} .wrap #kalSide .kal-reset{background:#fff;color:#7a5a2a;border:1px solid #e6c88a;font-weight:700} .wrap #kalSide .kal-reset:hover{background:#fff8ec} /* (6+D) Boksene ser "løse" ut FØRST i manuell-modus (etter "Manuell"-knappen). */ .wrap #kalSide .kal-farge{cursor:default} .wrap #kalSide .kal-grip{display:none;margin-left:auto;align-items:center;color:#9aa4b2;flex:none} .wrap #kalSide .kal-liste.kal-manuell .kal-farge{border-radius:0;border:1.5px solid #c3ccd6;box-shadow:0 2px 0 #c3ccd6,0 5px 11px rgba(20,40,80,.16);cursor:grab} .wrap #kalSide .kal-liste.kal-manuell .kal-farge:hover{border-color:#9ab6d6;box-shadow:0 2px 0 #9ab6d6,0 7px 15px rgba(20,40,80,.22);transform:translateY(-1px)} .wrap #kalSide .kal-liste.kal-manuell .kal-farge:active{cursor:grabbing;transform:translateY(1px);box-shadow:0 1px 0 #9ab6d6,0 3px 8px rgba(20,40,80,.2)} .wrap #kalSide .kal-liste.kal-manuell .kal-farge.kal-band-farge{cursor:default;box-shadow:0 2px 0 #ecd9a8,0 4px 10px rgba(240,195,107,.28)} .wrap #kalSide .kal-liste.kal-manuell .kal-farge.kal-band-farge:hover{transform:none} .wrap #kalSide .kal-liste.kal-manuell .kal-grip{display:inline-flex} .wrap #kalSide .kal-liste.kal-manuell .kal-band-farge .kal-grip{display:none} .wrap #kalSide .kal-liste.kal-manuell .kal-farge:hover .kal-grip{color:#5b7086} /* linje150: "Videre" inaktiv til <=6 farger + forklaring ved forsøk */ @keyframes kalShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} @media(prefers-reduced-motion:reduce){.wrap #kalSide .kal-videre.kal-videre-shake{animation:none}} /* ===== linje179: Produktkontroller = to tabeller (Tekst / Logo) + kolonne-omfordeling ===== */ .wrap #resultArea .edit-cols .pk-table{background:#fff;border:1px solid #e2ecf6;border-radius:12px;padding:12px;margin-top:12px;box-shadow:0 0 0 1px rgba(90,112,134,.05),0 8px 22px rgba(60,72,88,.14)} .wrap #resultArea .edit-cols .pk-btn{display:flex;align-items:center;justify-content:center;width:100%;margin:0;text-align:center;background:#1c6fd0;color:#fff;border-color:transparent;font-weight:700;min-height:46px;box-sizing:border-box} .wrap #resultArea .edit-cols .pk-btn:hover{filter:brightness(1.06)} .wrap #resultArea .edit-cols .tekst-row{display:flex;gap:10px;align-items:flex-end} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ .wrap #resultArea .edit-cols .tekst-row .tekst-col{flex:1 1 auto;min-width:0} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ .wrap #resultArea .edit-cols .tekst-row .tekst-col input{width:100%;box-sizing:border-box} .wrap #resultArea .edit-cols .tekst-row .farge-col{flex:0 0 auto;width:150px} .wrap #resultArea .edit-cols .tekst-row .farge-col .pk-farge-row{display:flex;align-items:center;gap:6px} .wrap #resultArea .edit-cols .tekst-row .farge-col .inksel{flex:1 1 auto;min-width:0} .wrap #resultArea .edit-cols .pk-fall{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1),opacity .32s ease} .wrap #resultArea .edit-cols .pk-fall.open{grid-template-rows:1fr;opacity:1;margin-top:12px} .wrap #resultArea .edit-cols .pk-fall>.pk-fall-inner{overflow:hidden;min-height:0} .wrap #resultArea .edit-cols .pk-fall.hidden{display:none} .wrap #resultArea .edit-cols .logo-filer{font-size:12px;margin:0 0 8px;word-break:break-all} @media (prefers-reduced-motion:reduce){.wrap #resultArea .edit-cols .pk-fall{transition:none}} .wrap #resultArea .edit-cols .pk-farge-row{display:flex;align-items:center;gap:8px} .wrap #resultArea .edit-cols .pk-farge-row .inksel{flex:1 1 auto;min-width:0} .wrap #resultArea .edit-cols .ctrls{margin-top:10px} /* Kolonner: bredere venstre, smalere midt + hoyre */ /* Objektredigering: 3 knapper pr linje (smalere kolonne) */ .wrap #resultArea .edit-right .tgrp{flex-wrap:wrap;gap:6px} .wrap #resultArea .edit-right .tgrp .tbtn{flex:0 0 calc(33.333% - 4px)} .wrap #resultArea .edit-right .tgrp .tbtn.wide{flex:1 1 100%} .wrap #resultArea .edit-right .band-helpers{display:flex;flex-wrap:wrap;gap:6px} .wrap #resultArea .edit-right .band-helpers .tbtn{flex:0 0 calc(33.333% - 4px)} /* ===== linje182: pil-rad ved knapper, filrad-tabeller, glow ===== */ .wrap #resultArea .edit-cols .pk-hop{flex:0 0 auto;color:#e2001a;font-size:22px;line-height:1;font-weight:900;animation:kalManHop .6s ease infinite;pointer-events:none} @media (prefers-reduced-motion:reduce){.wrap #resultArea .edit-cols .pk-hop{animation:none}} .wrap #resultArea .edit-cols .logo-filer:empty{display:none} /* ===== linje184: kompakt venstre-panel + fast-kolonne fil-grid ===== */ /* Alt lavere i Produktkontroller (mindre scrolling) */ .wrap #resultArea .edit-cols .pk-btn{min-height:38px;padding-top:8px;padding-bottom:8px} .wrap #resultArea .edit-cols .pk-table{padding:9px} .wrap #resultArea .edit-cols .pk-fall.open{margin-top:8px} .wrap #resultArea .edit-cols .lbl{margin-bottom:3px;font-size:11px} .wrap #resultArea .edit-cols .ctrls .tekst-row{gap:8px;margin-bottom:8px} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ .wrap #resultArea .edit-cols select.inksel,.wrap #resultArea .edit-cols #textCtrls input[type=text],.wrap #resultArea .edit-cols #tFont{padding-top:6px;padding-bottom:6px;min-height:34px;box-sizing:border-box} .wrap #resultArea .edit-cols .font-row{margin-top:16px;display:flex;gap:10px;align-items:flex-end} .wrap #resultArea .font-row .font-col{flex:1 1 auto;min-width:0} .wrap #resultArea .font-row .font-col select{width:100%;height:38px;font-size:13px;box-sizing:border-box} .wrap #resultArea .font-row .size-col{flex:0 0 auto;margin-right:14px} .wrap #resultArea .font-row .size-inp-wrap{position:relative;display:inline-flex;align-items:center} .wrap #resultArea .font-row .size-inp-wrap select{height:38px;padding:2px 6px;border:1px solid #cdd6e0;border-radius:8px;font-size:13px;background:#fff;cursor:pointer;min-width:64px} .wrap #resultArea .font-row .size-cust-wrap{position:relative;display:inline-flex;align-items:center} .wrap #resultArea .font-row .size-cust-wrap input{width:64px;height:38px;padding:2px 24px 2px 10px;border:1px solid #0a6bd6;border-radius:8px;font-size:13px;background:#fff;cursor:text;box-sizing:border-box} .wrap #resultArea .font-row .size-cust-wrap .size-suff{position:absolute;right:9px;font-size:12px;color:#8a97a5;pointer-events:none} .wrap #resultArea .font-row .size-inp-wrap .hidden{display:none} .wrap #resultArea .font-row .style-col{flex:0 0 auto} .wrap #resultArea .font-row .stylebtns{display:inline-flex;gap:5px} .wrap #resultArea .font-row .stylebtns button{min-width:34px;width:34px;height:38px;padding:0;box-sizing:border-box} /* Fil-grid: faste kolonner (hvert element blir staaende i sin kolonne) */ .wrap #resultArea .edit-cols .logo-grid{display:grid;grid-template-columns:minmax(40px,1fr) 146px 196px;gap:6px 12px;align-items:center;margin-top:12px} .wrap #resultArea .edit-cols .logo-grid .lg-hdr{font-size:10.5px;font-weight:700;color:#33475b;line-height:1.15;align-self:end;padding-bottom:7px;border-bottom:1px solid #e2ecf6;margin-bottom:4px} .wrap #resultArea .edit-cols .logo-grid .lg-navn{font-size:12px;font-weight:600;color:#8a94a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .wrap #resultArea .edit-cols .logo-grid .lg-sep{grid-column:1/-1;border-top:1px solid #cfd8e3;margin:5px 0} .wrap #resultArea .edit-cols .logo-grid .lg-farge .inksel{width:100%;min-height:30px;padding-top:4px;padding-bottom:4px;font-size:11.5px} .wrap #resultArea .edit-cols .logo-grid .lg-thr{display:flex;align-items:center} .wrap #resultArea .edit-cols .logo-grid .lg-thr .fil-thr{width:100%;margin:0} /* ===== linje187: verktøylinje = 2 rader grupperte knapper (variant B) ===== */ .wrap #resultArea .design-zoom-bar{flex-direction:column;align-items:flex-start;gap:8px;flex-wrap:nowrap} /* [FAMILIE:PANELER] VERKTOEYRADEN KRYMPER, DEN BREKKER IKKE. Anders 29.10.2026: «Det ekstra verktoeypanelet oeverst blir helt rart naar man har browservinduet litt mindre enn full size ... Dette ekstra-tool- panelet maa tilpasse stoerrelsen til vinduets maksimale lengde. Saa naar det blir smalere maa alt krympe.» Raden sto paa flex-wrap:wrap. Naar plassen tok slutt braekk siste gruppe - Tegne-verktoeyet - ned paa en linje baaren ikke hadde hoyde til, og den la seg oppaa baandet. Naa staar alt paa én linje i sin naturlige bredde, og tilpassZoomBar() i zoom-pan.js skalerer den ned til den passer. */ .wrap #resultArea .design-zoom-bar .dz-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:nowrap;transform-origin:left top} /* Gruppene skal beholde sin naturlige bredde. Klemmes de sammen av flex-shrink, kan ikke tilpassZoomBar() regne ut hvor bred raden egentlig er - og etikettene staar paa white-space:nowrap og renner ut av sine egne bokser i stedet. Samme regel som linje 5064 alt setter paa smal skjerm. */ .wrap #resultArea .design-zoom-bar .dz-row>*{flex:0 0 auto} .wrap #resultArea .design-zoom-bar .dz-grp{display:inline-flex;flex-direction:column;gap:3px} .wrap #resultArea .design-zoom-bar .dz-lbl{font-size:9.5px;color:#5b7086;text-align:center;line-height:1.1;white-space:nowrap;font-weight:600} .wrap #resultArea .design-zoom-bar .dz-btns{display:flex;gap:3px;align-items:center;background:#fff;border:0.5px solid #e2ecf6;border-radius:8px;padding:4px} .wrap #resultArea .design-zoom-bar .dz-btns .tbtn{min-height:0;height:30px;min-width:32px;padding:0 7px;font-size:15px;border-radius:6px;flex:0 0 auto;flex-direction:row;gap:0} .wrap #resultArea .design-zoom-bar .dz-btns .tbtn .tlbl{display:none} /* skjul tomme knapp-containere i midt-boksen etter at knappene er flyttet opp */ .wrap #resultArea .edit-right .tgrp:empty,.wrap #resultArea .edit-right .band-helpers:empty{display:none} /* ===== linje190: knapp-høyde, svart Ta bort, zoom-gruppe, full-bredde toolbar ===== */ /* 1) logo-knapp = tekst-knapp (override styles.css .edit-right .tbtn height/flex) */ .wrap #resultArea .edit-cols .pk-btn{height:46px!important;min-height:46px!important;flex-direction:row!important} .wrap #resultArea .edit-cols .pk-btn-row .pk-btn{flex:1 1 auto!important;flex-basis:auto!important;width:auto} /* 3) "Ta bort design og lukk": rødt -> svart */ /* 4) zoom-delen som ÉN tabell + lik høyde som resten */ .wrap #resultArea .design-zoom-bar .zbar-left{background:#fff;border:0.5px solid #e2ecf6;border-radius:8px;padding:4px;gap:3px;align-items:center;margin:0;flex:0 0 auto} .wrap #resultArea .design-zoom-bar .zbar-left .zoom-point{height:30px!important;min-width:32px!important;border:0.5px solid #e2ecf6!important;border-radius:6px;background:#fff;font-size:13px} .wrap #resultArea .design-zoom-bar .zbar-left .zoom-lbl{height:30px!important;min-width:46px;text-align:center;padding:0 4px;font-size:12px} /* 4b) hele knapperekka strekker seg fra venstre til høyre under båndet */ /* 4c) Merk flere: hele ordet får plass */ .wrap #resultArea .design-zoom-bar .dz-btns .tbtn#multiToggle{font-size:12px;padding:0 14px;min-width:auto!important;white-space:nowrap;width:auto} /* ===== linje191: bokser like, italic filnavn, tettere+større toolbar, glow, kompakt ===== */ /* 1) blå knapper helt like + mer luft etter logo-knapp */ .wrap #resultArea .edit-cols .pk-btn{box-sizing:border-box} .wrap #resultArea .edit-cols .pk-table{margin-top:14px} .wrap #resultArea .edit-cols .logo-grid{margin-top:22px;row-gap:11px} .wrap #resultArea .edit-cols .logo-grid .lg-hdr{margin-bottom:10px} /* 3) italic filnavn */ .wrap #resultArea .edit-cols .logo-grid .lg-navn{font-style:italic} /* 2/4) toolbar: mindre luft mellom knapper, større knapper + tekst */ .wrap #resultArea .design-zoom-bar .dz-btns{gap:2px;padding:4px} .wrap #resultArea .design-zoom-bar .dz-btns .tbtn{height:34px;min-width:36px;font-size:16px} .wrap #resultArea .design-zoom-bar .dz-lbl{font-size:10.5px} .wrap #resultArea .design-zoom-bar .zbar-left{gap:2px} .wrap #resultArea .design-zoom-bar .zbar-left .zoom-point{height:34px!important;min-width:36px!important;font-size:14px} .wrap #resultArea .design-zoom-bar .zbar-left .zoom-lbl{height:34px!important;font-size:13px} /* 5) glow på band+toolbar-boksen (samme som edit-boksene) */ .wrap #resultArea.as-modal .stage{box-shadow:0 0 14px rgba(45,50,56,.42),0 5px 12px rgba(15,34,51,.12)!important} /* 4) kompakt modal -> unngå scroll (fyll høyden, mindre luft) */ .wrap #resultArea.as-modal{max-height:100vh} .wrap #resultArea.as-modal .stage{padding:6px 10px!important} .wrap #resultArea.as-modal .edit-cols{gap:12px!important} .wrap #resultArea.as-modal .edit-left,.wrap #resultArea.as-modal .edit-right,.wrap #resultArea.as-modal .edit-simple{padding:10px!important} .wrap #resultArea.as-modal .simple-btn{padding:7px 10px!important} /* ===== linje192: forén tekst/logo-knapp + pil-plass + sentrert toolbar ===== */ /* Én autoritativ regel -> begge knappene helt like (button + label), kortere + sentrert */ .wrap #resultArea .edit-cols .pk-btn-row{position:relative;display:flex;justify-content:center;align-items:center;gap:0;padding:0} .wrap #resultArea .edit-cols .pk-btn-row .pk-btn{flex:0 0 auto!important;width:88%!important;max-width:none!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 14px!important;font-size:15px!important;font-weight:700!important;line-height:1!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;background:#1c6fd0!important;color:#fff!important;border:1px solid transparent!important;border-radius:10px!important} .wrap #resultArea .edit-cols .pk-btn-row .pk-hop{position:absolute!important;right:2%;top:50%;transform:translateY(-50%);margin:0!important} /* toolbar: fortett (få px mellom bokser) + sentrer hele rekka under båndet */ /* ===== linje193: ALLE toolbar-knapper lik størrelse + tett+sentrert rekke ===== */ /* én størrelse på alt: dz-knapper, zoom-knapper, zoom-felt OG pila */ .wrap #resultArea .design-zoom-bar .dz-btns .tbtn, .wrap #resultArea .design-zoom-bar .zoom-point, .wrap #resultArea .design-zoom-bar .zoom-lbl{height:34px!important;min-width:38px!important;box-sizing:border-box!important;font-size:15px!important} .wrap #resultArea .design-zoom-bar .zoom-point.zoom-edit{width:38px!important;min-width:38px!important;max-width:38px!important;padding:0!important} /* Midtstill-symbol får være stort uten å endre knappe-størrelsen */ .wrap #resultArea .design-zoom-bar .dz-btns .center-btn{font-size:20px!important} /* tett + sentrert: rekka krymper til innhold og sentreres under båndet */ .wrap #resultArea .design-zoom-bar{align-items:center!important} .wrap #resultArea .design-zoom-bar .dz-row{justify-content:center!important;gap:6px!important;width:auto!important;max-width:100%} /* ===== linje195: lik gap i begge bokser -> knappene aligner ===== */ /* ===== linje196: skuddsikker knapp-align -- fjern ALLE variabler mellom overskrift og knapp ===== */ .wrap #resultArea.as-modal .edit-left,.wrap #resultArea.as-modal .edit-right{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:10px!important} .wrap #resultArea.as-modal .edit-left>.sec-hdr,.wrap #resultArea.as-modal .edit-right>.sec-hdr{margin:0!important;padding:0!important} .wrap #resultArea.as-modal .edit-left>.pk-table,.wrap #resultArea.as-modal .edit-right>.pk-table{margin-top:14px!important} /* linje196b: begge knappene NØYAKTIG like dimensjoner (overstyr styles.css:409 font/flex + evt media-queries) */ .wrap #resultArea.as-modal .edit-left .pk-btn,.wrap #resultArea.as-modal .edit-right .pk-btn{height:48px!important;min-height:48px!important;max-height:48px!important;font-size:15px!important;font-weight:700!important;line-height:1!important;flex-basis:auto!important;width:88%!important;padding:0 14px!important;box-sizing:border-box!important} /* ===== linje198: kal-preview -- element fyller vinduet uten å gå utenfor ===== */ .wrap #resultArea #kalPreviews .opt-prev-svg{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:6px;box-sizing:border-box} .wrap #resultArea #kalPreviews .opt-prev-svg>*{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important} .wrap #resultArea #kalPreviews .opt-prev-svg svg,.wrap #resultArea #kalPreviews .opt-prev-svg img,.wrap #resultArea #kalPreviews .opt-prev-svg canvas{max-width:100%!important;max-height:100%!important;object-fit:contain!important} /* ===== linje213: opt-preview hover/valgt ===== */ .wrap #resultArea .opt-prev-card:not(.opt-prev-valgt):hover{transform:scale(1.012);box-shadow:inset 0 0 0 3px rgba(28,111,208,.6),0 8px 20px rgba(28,111,208,.22);z-index:2;transition:transform .12s,box-shadow .12s} /* pkt 5: sliders + tegneverktoy som to bokser m/graa glow + mer luft */ .wrap #resultArea .opt-spaker{background:#f7fafe;border:1px solid #d9e6f5;border-radius:12px;padding:14px 14px 6px;margin:0 0 16px 14px;box-shadow:0 5px 20px rgba(20,30,45,.10),0 1px 4px rgba(0,0,0,.05)} .wrap #resultArea .opt-tegn{margin:0 0 8px 14px !important;box-shadow:0 5px 20px rgba(20,30,45,.10),0 1px 4px rgba(0,0,0,.05)} .wrap #resultArea .opt-spak{margin-bottom:12px} .wrap #resultArea .opt-tegn-farger{margin-bottom:14px} .wrap #resultArea .opt-tegn-knapper{margin-top:6px} /* pkt 8: lik venstre-marg fra "Juster element" og nedover (matcher forklaringen) */ .wrap #resultArea #optKnapper{margin-left:14px} /* pkt 6: mer luft under Ferdig-raden */ /* ===== linje213 batch2: contain (ingen kutt) + roede piler ===== */ /* pkt 2: hele designet synlig i vinduet uten kutt ved 0% zoom (zoom gir fortsatt overflow/scroll) */ /* pkt 4: roed pil som peker hoyre, gaar frem/tilbake, vertikal-sentrert paa venstre kant */ .wrap #resultArea .opt-prev-card .opt-pil{position:absolute;left:6px;top:50%;transform:translateY(-50%);color:#e2001a;font-size:24px;line-height:1;font-weight:900;z-index:7;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.35);animation:optpil .85s ease-in-out infinite} @keyframes optpil{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(8px)}} /* ===== linje214: contain-vertikal + piler i gutter + hoyre-luft ===== */ /* A) contain baade horisontalt OG vertikalt ved 0% zoom */ /* B) piler i venstre gutter, rett utenfor design-boksene */ .wrap #resultArea .opt-previews{position:relative;padding-left:30px} .wrap #resultArea .opt-previews .opt-pil{left:2px} /* C) litt mer luft til hoyre for boksene */ .wrap #resultArea .opt-spaker{margin-right:8px} .wrap #resultArea .opt-tegn{margin-right:8px !important} /* ===== linje215 ===== */ /* E: traadfarge-preview -- design passer i vinduet uten scroll (samme som opt) */ /* B: av/paa-knapp for tegneverktoy */ /* C: egne "tabeller" (bokser) for hver linje i tegneverktoyet */ .wrap #resultArea .opt-tegn-linje{background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:10px 12px;margin-bottom:12px} .wrap #resultArea .opt-tegn-rad{background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:10px 12px;margin-bottom:12px !important} .wrap #resultArea .opt-tegn-knapper{background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:10px 12px;display:flex;gap:8px} /* D: opt-footer samme plassering/utseende som kal-footer */ .wrap #resultArea .opt-foot{justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;padding-bottom:8px;gap:12px} .wrap #resultArea .opt-foot .side-tilbake{margin:0} /* ===== linje216: kompakt tegneverktoy (pensel-stepper ved siden av farger) ===== */ .wrap #resultArea .opt-tegn-fargerad{display:flex;gap:10px;align-items:stretch;margin-bottom:12px} .wrap #resultArea .opt-tegn-fargerad > .opt-tegn-farger{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:8px;align-content:center;margin:0;background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:10px 12px} .wrap #resultArea .opt-tegn-pensel-boks{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:8px 10px;min-width:118px} .wrap #resultArea .pensel-step{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1.5px solid #cfd8e3;background:#eef2f7;color:#3a4a5a;font-size:19px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .wrap #resultArea .pensel-step:hover{background:#e2e9f2} .wrap #resultArea .pensel-dot{width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .wrap #resultArea .pensel-dot i{display:block;width:20px;height:20px;border-radius:50%;background:#2b3a49;transition:width .1s,height .1s,background .1s} /* ===== linje217: zoom + angre paa samme rad (to bokser) + eksakt pensel-dot ===== */ .wrap #resultArea .opt-tegn-nedrad{display:flex;gap:10px;align-items:stretch;margin-bottom:8px} .wrap #resultArea .opt-tegn-nedrad > .opt-tegn-zoomboks{flex:1 1 auto;margin-bottom:0;display:flex;align-items:center;gap:10px} .wrap #resultArea .opt-tegn-nedrad > .opt-tegn-knapper{flex:0 0 auto;margin:0;background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:8px 10px;gap:6px} .wrap #resultArea .opt-tegn-nedrad .opt-tegn-knapper button{padding:7px 12px;font-size:13px;white-space:nowrap} /* ===== linje218: opt-preview -- fyller kortet symmetrisk, ingen scroll, zoom via transform ===== */ .wrap #resultArea #optPreviews .opt-prev-card{overflow:hidden} .wrap #resultArea #optPreviews .opt-prev-svg{position:absolute;inset:8px;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;padding:0;display:flex;align-items:center;justify-content:center;transform:scale(var(--optZoomN,1));transform-origin:center center} .wrap #resultArea #optPreviews .opt-prev-svg svg,.wrap #resultArea #optPreviews .opt-prev-svg img,.wrap #resultArea #optPreviews .opt-prev-svg canvas{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain} /* ===== linje219: robuste piler (wrapper) + kal-contain + hoyre-marg + skjelett vekk ===== */ /* pkt1: pil-wrapper -- kortet fyller holderen, pilen CSS-sentreres utenfor (ingen JS) */ .wrap #resultArea #optPreviews{padding-left:30px;padding-right:10px} .wrap #resultArea .opt-prev-holder{position:relative;flex:1 1 0;min-height:0} .wrap #resultArea .opt-previews-multi .opt-prev-holder{min-height:150px} .wrap #resultArea .opt-prev-holder > .opt-prev-card{position:absolute;inset:0;min-height:0;width:auto} .wrap #resultArea .opt-prev-holder > .opt-pil{position:absolute;left:-26px;top:50%;transform:translateY(-50%);color:#e2001a;font-size:24px;line-height:1;font-weight:900;z-index:7;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.35);animation:optpil .85s ease-in-out infinite} /* pkt2: samme contain-teknikk paa traadfarge-siden */ .wrap #resultArea #kalPreviews{padding-right:10px} .wrap #resultArea #kalPreviews .opt-prev-card{overflow:hidden;position:relative} .wrap #resultArea #kalPreviews .opt-prev-svg{position:absolute;inset:8px;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;padding:0;display:flex;align-items:center;justify-content:center} .wrap #resultArea #kalPreviews .opt-prev-svg svg,.wrap #resultArea #kalPreviews .opt-prev-svg img,.wrap #resultArea #kalPreviews .opt-prev-svg canvas{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain} /* ===== linje224: kompakt tegneverktoy (mindre hoyde) ===== */ .wrap #resultArea .opt-tegn-tit{letter-spacing:.4px;margin-bottom:8px} .wrap #resultArea .opt-tegn-fargerad{margin-bottom:8px !important} .wrap #resultArea .opt-tegn-fargerad > .opt-tegn-farger{padding:6px 10px !important;gap:6px !important} .wrap #resultArea .opt-farge-sw{width:28px !important;height:28px !important} .wrap #resultArea .opt-tegn-pensel-boks{padding:5px 8px !important;min-width:112px} .wrap #resultArea .pensel-dot{width:40px !important;height:40px !important} /* ===== linje227: "Behold design fra" som header-knapp (venstre for Forhaandsvisning) ===== */ #resultArea h2 .keep-hdr-btn{position:absolute;top:12px;height:32px;background:#fff;color:#2f8ef0;border:1.5px solid #2f8ef0;border-radius:8px;font:600 13px "Sora",Arial,sans-serif;padding:0 14px;cursor:pointer;z-index:6;white-space:nowrap;width:auto;display:inline-flex;align-items:center} /* ===== linje228: ?-knapp over boksen + hoyre-kolonne scroll ===== */ #resultArea .stage > .helpbtn{top:-30px;right:2px} .wrap #resultArea .opt-previews{overflow-x:hidden;overflow-y:auto} /* ===== linje229: grense-linjer -> moerkegraa strek + lysegraa mellomrom, mer mellomrom ===== */ .wrap #resultArea .rekt-guider .ugrense,.wrap #resultArea .utstrakt-lag .ugrense{border-left:none !important;width:2px;background-image:repeating-linear-gradient(to bottom,#5b6673 0 4px,#d5dbe2 4px 14px) !important} /* linje230: sentrer SVG-ikon i simple-btn b */ .simple-btn>b{display:inline-flex;align-items:center;justify-content:center} .simple-btn>b svg{display:block} /* L43: visuelt galleri for ti automatiske designoppsett */ .layout-gallery-dlg{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:0;border:1px solid #d7e1ea;border-radius:16px;background:#fff;color:#183247;box-shadow:0 24px 80px rgba(14,35,52,.30);font-family:"Sora",Arial,sans-serif} .layout-gallery-dlg::backdrop{background:rgba(16,31,44,.50)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .layout-gallery-dlg .dhead{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid #e2e9f1} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .layout-gallery-dlg .dhead h3{margin:0 0 4px;font-size:18px}.layout-gallery-dlg .dhead p{margin:0;color:#667b8e;font-size:12px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .layout-size-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:#f7fafc;border-bottom:1px solid #e2e9f1}.layout-size-bar>span{display:flex;flex-direction:column;gap:2px}.layout-size-bar strong{font-size:12px}.layout-size-bar small{font-size:10px;color:#667b8e}.layout-size-buttons{display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));gap:6px}.layout-size-buttons button{min-height:34px;padding:6px 12px;border:1px solid #cfdce7;border-radius:8px;background:#fff;color:#183247;font:700 11px "Sora",Arial,sans-serif;cursor:pointer}.layout-size-buttons button:hover,.layout-size-buttons button:focus-visible{border-color:#08a9ee;background:#eef9fe;outline:none}.layout-size-buttons button.is-active{border-color:#08a9ee;background:#08a9ee;color:#fff}.layout-content-summary{padding:10px 20px 0;color:#526b7e;font-size:10px;font-weight:700}.layout-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 20px 16px;overflow:auto;max-height:calc(100vh - 264px)} .layout-choice{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 25px;align-items:center;gap:6px;min-height:58px;padding:6px;border:1.5px solid #d9e4ed;border-radius:10px;background:#fff;color:#183247;text-align:left;cursor:pointer;box-shadow:none} .layout-choice:hover,.layout-choice:focus-visible{border-color:#08a9ee;background:#f5fbfe;outline:none;box-shadow:0 0 0 3px rgba(8,169,238,.12)} .layout-choice-number{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#edf4f8;color:#183247;font:800 10px "Sora",Arial,sans-serif} .layout-mini{position:relative;display:block;height:42px;border-radius:6px;background:#f3acd0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(94,57,79,.12)} .layout-mini>u{position:absolute;left:22%;right:22%;top:4px;bottom:4px;border:1px dashed rgba(48,83,104,.7);text-decoration:none} .layout-mini>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 5px} .layout-mini i,.layout-mini b,.layout-mini em{display:block;height:12px;width:14px;border-radius:3px;background:#6f3e98;font-style:normal}.layout-mini b{width:28px}.layout-mini em{width:42px;height:9px;border-radius:2px} .layout-mini.layout-mini-live>span{display:flex;align-items:center;justify-content:center;gap:3px;padding:2px 5px;overflow:hidden} .layout-mini.layout-mini-live>span>.layout-live-obj{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:3px;overflow:hidden;background:transparent;border-radius:0;color:#111;font-size:15px;line-height:1;white-space:nowrap;font-style:normal} .layout-mini.layout-mini-live .layout-live-obj img{display:block;width:100%;height:100%;object-fit:contain;filter:none} .layout-mini.layout-mini-live-spread>span{justify-content:space-between;padding-left:4px;padding-right:4px} .layout-mini.layout-mini-live-air>span{gap:10px} .layout-mini.layout-mini-live>u{display:none!important} /* [FAMILIE:SILIKONGRENSE] se docs/architecture/FAMILIE_silikongrense.md Minibildet i oppsett-galleriet viste hele baandet, ogsaa for silikon - der designet bare kan ligge i EN halvdel. Kortet lovet altsaa noe produktet ikke kan levere. Her snevres raden inn til trykkomraadet og de striplede strekene tegnes, slik at forslaget viser det samme som brettet over. Raden er posisjonert absolutt (inset:0), saa left/right styrer den, og tilpassLevendeLayoutMini maaler row.clientWidth - elementene skalerer seg selv. */ .layout-mini.sil-halv>span{left:25%;right:25%} .layout-mini.sil-halv.sil-gjenta>span{left:0;right:50%} .layout-mini.sil-halv::before,.layout-mini.sil-halv::after{content:"";position:absolute;top:0;bottom:0;border-left:1px dashed rgba(48,83,104,.75);pointer-events:none;z-index:2} .layout-mini.sil-halv::before{left:25%} .layout-mini.sil-halv::after{left:75%} .layout-mini.sil-halv.sil-gjenta::before{left:50%} .layout-mini.sil-halv.sil-gjenta::after{display:none} .layout-mini.sil-halv.sil-gjenta>span.sil-kopi{left:50%;right:0;opacity:.62} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .layout-gallery-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 16px;border-top:1px solid #e2e9f1;color:#667b8e;font-size:11px}.layout-gallery-foot span{display:flex;align-items:center;gap:6px}.layout-gallery-foot i{width:20px;height:10px;border:1px dashed #667b8e} @media(max-width:700px){/* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .layout-size-bar{align-items:stretch;flex-direction:column;padding:10px 12px;gap:8px}.layout-size-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}.layout-size-buttons button{padding:5px 3px;font-size:9px}.layout-content-summary{padding:8px 12px 0}.layout-gallery{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 12px 12px;max-height:calc(100vh - 300px)}.layout-choice{grid-template-columns:minmax(0,1fr) 22px;min-height:52px}.layout-gallery-dlg .dhead{padding:14px}.layout-gallery-foot{padding:10px 14px}.layout-gallery-dlg{width:calc(100vw - 16px)}} /* L46: Oppsett bruker den samme animerte hurtigboksen som innholdsverktøyene. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel{display:flex;flex-direction:column;width:100%;max-height:min(52vh,470px);background:#fff;border-radius:inherit;overflow:hidden} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel>.dhead{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 18px 10px;border-bottom:1px solid #e2e9f1} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel>.dhead h3{margin:0 0 2px;font-size:14px;color:#183247} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel>.dhead p{margin:0;color:#667b8e;font-size:10px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel #layoutGalleryX, #resultArea.as-modal .designer-quick-panel .designer-layout-panel #layoutGalleryClose{display:none!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-size-bar{padding:8px 18px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-content-summary{padding:7px 18px 0} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-gallery{flex:1;min-height:0;max-height:none;padding:6px 18px 8px;gap:6px;overflow-y:auto;overscroll-behavior:contain} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-choice{min-height:48px;grid-template-columns:minmax(0,1fr) 25px;gap:5px;padding:5px 6px;border-radius:9px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-mini{height:34px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-gallery-foot{padding:7px 18px 9px} @media(max-width:700px){#resultArea.as-modal[data-designer-quick-mode="layout"] .designer-quick-panel{width:calc(100vw - 14px)!important}#resultArea.as-modal .designer-quick-panel .designer-layout-panel{max-height:48vh}#resultArea.as-modal .designer-quick-panel .designer-layout-panel>.dhead{padding:9px 11px 7px}#resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-size-bar{padding:7px 11px}#resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-content-summary{padding:6px 11px 0}#resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-gallery{padding:6px 11px 8px}#resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-choice{grid-template-columns:minmax(0,1fr) 22px;min-height:52px}#resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-gallery-foot{padding:6px 11px 8px}} /* linje231: laas-foto ved siden av Laasetype */ /* linje232: stoerre laas-thumb + hover-forstoerrelse (fast-posisjonert, klippes ikke) */ .designer-size .laas-foto-stor{position:fixed;top:12vh;left:50%;transform:translateX(-50%) scale(.35);transform-origin:center top;width:min(340px,62vw);display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;visibility:hidden;z-index:3000;background:#fff;border:1px solid #d3dae2;border-radius:16px;padding:16px 16px 18px;box-shadow:0 22px 64px rgba(0,0,0,.38);pointer-events:none;transition:opacity .18s ease,transform .3s cubic-bezier(.2,.85,.3,1.06)} .designer-size .laas-foto-stor .lfs-tit{font:800 18px "Sora",Arial,sans-serif;color:#1c2230;letter-spacing:.2px} .designer-size .laas-foto-stor .lfs-img{width:100%;height:auto;border-radius:9px;display:block} .designer-size .laas-foto-stor .lfs-cap{font:500 13px "Sora",Arial,sans-serif;color:#5b7086;text-align:center;line-height:1.4} .designer-size .laas-opt-wrap.viser .laas-foto-stor{opacity:1;visibility:visible;transform:translateX(-50%) scale(1);pointer-events:auto} /* ===== linje234: laas-velger boks med to ikoner + radio ===== */ .designer-size .laas-velger-field{align-self:flex-start} .designer-size .laas-velger{display:flex;gap:8px} .designer-size .laas-opt-wrap{position:relative} .designer-size .laas-opt{display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 12px 5px 9px;border:1.5px solid #e2e9f1;border-radius:9px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s} .designer-size .laas-opt:hover{border-color:#b9c6d6} .designer-size .laas-opt input{margin:0;accent-color:#2f8ef0;cursor:pointer;flex:0 0 auto} .designer-size .laas-opt-wrap.valgt .laas-opt{border-color:#2f8ef0;box-shadow:0 0 0 2px rgba(47,142,240,.25)} .designer-size .laas-opt-ikon{height:30px;width:auto;object-fit:contain;border-radius:5px;pointer-events:none} .designer-size .laas-opt-navn{font:600 12px "Sora",Arial,sans-serif;color:#3a4658;white-space:nowrap;pointer-events:none} .designer-size .laas-foto-stor .lfs-ok{margin-top:4px;background:#2f8ef0;color:#fff;border:0;border-radius:8px;font:700 14px "Sora",Arial,sans-serif;padding:8px 26px;cursor:pointer} .designer-size .laas-foto-stor .lfs-ok:hover{filter:brightness(1.06)} /* ===== linje236: metall to-knapper + tang-boks ===== */ .designer-size .laas-foto-stor .lfs-btn{background:#2f8ef0;color:#fff;border:0;border-radius:8px;font:700 14px "Sora",Arial,sans-serif;padding:8px 22px;cursor:pointer} .designer-size .laas-foto-stor .lfs-btn:hover{filter:brightness(1.06)} .designer-size .laas-foto-stor .lfs-tangsp{height:34px} .designer-size .laas-foto-stor .tang-boks{margin-top:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px;background:#fff;border:1px solid #eef1f4;border-radius:12px;box-shadow:0 5px 20px rgba(20,30,45,.10),0 1px 4px rgba(0,0,0,.05)} .designer-size .laas-foto-stor .tang-tit{font:700 11.5px "Sora",Arial,sans-serif;color:#5b6673;letter-spacing:.6px;text-align:center;margin-bottom:10px} .designer-size .laas-foto-stor .tang-ok{margin-top:2px} .designer-size .laas-foto-stor .tang-lagt{color:#2f8ef0;font:700 14px "Sora",Arial,sans-serif;letter-spacing:.3px} .designer-size .laas-foto-stor .tang-lagt[hidden]{display:none} .designer-size .laas-foto-stor .tang-img{width:min(240px,80%);height:auto;border-radius:8px} .designer-size .laas-foto-stor .tang-rad{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center} .designer-size .laas-foto-stor .tang-antall-lbl{font:600 13px "Sora",Arial,sans-serif;color:#3a4658;display:flex;align-items:center;gap:6px} .designer-size .laas-foto-stor .tang-antall{width:64px;padding:6px 8px;border:1.5px solid #cdd6e0;border-radius:8px;font:600 14px "Sora",Arial,sans-serif;text-align:center} .designer-size .laas-foto-stor .tang-pris{font:800 15px "Sora",Arial,sans-serif;color:#1c2230} /* linje239: tang-linje i handlekurven */ #cartList .citem-tang{opacity:.95} #cartList .ctang-img{flex:0 0 auto;height:22px;width:auto;object-fit:contain} #cartList .ctang-navn{flex:1;min-width:0;font:700 11px "Sora",Arial,sans-serif;color:#5b6673;letter-spacing:.4px;align-self:center} /* Linje 407: Full pris med strikethrough-stil */ .line.full-price .strike{text-decoration:line-through;opacity:.7} /* Standard grensemarkering i alle designere: rød hel linje under + hvite streker over. */ #bigBand .safebox, #bigBand .rekt-guider .ugrense{ border-color:#d71920!important; } #bigBand .rekt-guider .ugrense{position:absolute} #bigBand .rekt-guider .ugrense::after{ content:"";position:absolute;pointer-events:none; border-color:#fff;border-style:dashed; } #bigBand .rekt-guider .ugrense.v::after, #bigBand .rekt-guider .ugrense.h::after{inset:-1px} /* L113: etiketten skal ligge INNE i stage-boksen, i toppsonen over baandet. */ /* Fjern v2-klammen som la seg over stage-kanten. */ /* Enkel nedoverpeker fra etiketten til den markerte rammen. */ /* L115: luft mellom nedre trykkgrense/bånd og verktøylinjens etiketter. */ /* L116: "Synlig trykkomraade under bruk" visuelt INNE i stage-toppsonen. Etiketten sentreres over den markerte bredden og peker ned paa rammen. */ #bigBand .trykkboks-tekst{ left:50%!important; bottom:100%!important; transform:translateX(-50%)!important; margin-bottom:24px!important; color:#4b5563!important; font-weight:700!important; text-align:center!important; white-space:nowrap!important; } #bigBand .trykkboks::before{ content:""!important; display:block!important; position:absolute!important; left:-1px!important; right:-1px!important; top:-13px!important; height:9px!important; border-top:1px solid #7b8794!important; border-left:1px solid #7b8794!important; border-right:1px solid #7b8794!important; box-sizing:border-box!important; } #bigBand .trykkboks-tekst::after{ content:""!important; display:block!important; position:absolute!important; left:50%!important; top:calc(100% + 4px)!important; width:7px!important; height:7px!important; border-right:1px solid #7b8794!important; border-bottom:1px solid #7b8794!important; border-left:0!important; border-top:0!important; transform:translateX(-50%) rotate(45deg)!important; background:transparent!important; } /* ============================================================ [FAMILIE:KONTRAST] «SYNLIG TRYKKOMRAADE» MAA SES PAA ALLE BAANDFARGER Anders 09.10: «paa mobil vet jeg at moerk tekst ligger paa moerk bakgrunn der. Kan du sjekke hvordan vi kan faa teksten til aa alltid gi kontrast mot bakgrunnen uansett bakgrunnsfarge?» MAALT paa tekstil og refleks, baade 1400 px og 390 px: baand #ffffff #4b5563 paa rgb(255,255,255) kontrast 7.56 OK baand #000000 #4b5563 paa rgb(0,0,0) kontrast 2.78 for lav Bakgrunnen ER baandfargen: etiketten staar inne i #bigBand. data-moerk settes av designer-geometry.js, som spoer markorFarge() i engine/core/ink.js - den samme regelen alle andre markoerer paa baandet bruker. Den eies ETT sted; her staar bare fargene. Den lyse varianten har i tillegg en svak moerk skygge, og den moerke en svak lys, saa begge taaler et baand som ligger midt imellom. */ /* «SYNLIG TRYKKOMRAADE»-ETIKETTEN HAR INGEN PLATE - SE [FAMILIE:ETIKETTFLATE] lenger ned. Den ligger ALDRI over baandet, saa baandfargen er irrelevant for den. Reglene under gjelder KLAMMETEKSTENE i .rekt-guider, som faktisk staar oppe paa baandet. KLAMMETEKSTENE FAAR EN PLATE UNDER SEG. Et rent fargeskifte (lys tekst paa moerkt baand, moerk paa lyst) loeser ytterpunktene, men ikke midten. MAALT paa tekstil #00b1f0: lys tekst paa rgb(0,177,240) kontrast 1.79 moerk tekst kontrast 2.26 Ingen av dem naar 4.5. En halvdekkende plate gjoer bakgrunnen KJENT: uansett baandfarge havner teksten paa omtrent platefargen, og kontrasten blir den samme overalt. Det er ogsaa det eneste som holder hvis baandet en dag faar et bilde eller en overgang bak seg. */ #bigBand[data-moerk] .rekt-guider .uklamme-tekst{ padding:1px 7px!important; border-radius:7px!important; backdrop-filter:saturate(135%)!important; } #bigBand[data-moerk="1"] .rekt-guider .uklamme-tekst, #bigBand[data-moerk="1"] .rekt-guider .uklamme.midt .uklamme-tekst{ color:#f4f8fb!important; background:rgba(14,22,30,.74)!important; } #bigBand[data-moerk="1"] .rekt-guider :is(.uklamme.venstre,.uklamme.hoyre) .uklamme-tekst{ color:#e2e9ef!important; } #bigBand[data-moerk="0"] .rekt-guider .uklamme-tekst, #bigBand[data-moerk="0"] .rekt-guider .uklamme.midt .uklamme-tekst{ color:#39434f!important; background:rgba(255,255,255,.82)!important; } #bigBand[data-moerk="0"] .rekt-guider :is(.uklamme.venstre,.uklamme.hoyre) .uklamme-tekst{ color:#56616e!important; } /* Klammene er tynne streker og kan ikke ha plate. De foelger flagget. */ #bigBand[data-moerk="1"] .trykkboks::before{ border-top-color:#e3ecf3!important; border-left-color:#e3ecf3!important; border-right-color:#e3ecf3!important; } #bigBand[data-moerk="1"] .trykkboks-tekst::after, #bigBand[data-moerk="1"] .rekt-guider .uklamme.midt .uklamme-tekst::after{ border-right-color:#e3ecf3!important; border-bottom-color:#e3ecf3!important; } #bigBand[data-moerk="1"] .rekt-guider .uklamme{border-color:#cdd9e3!important;border-bottom:0!important} #bigBand[data-moerk="1"] .rekt-guider .uklamme.midt{border-color:#f0f5f9!important;border-bottom:0!important} /* ============================================================ [FAMILIE:GUIDE] MARKOER, STJERNE, TEKSTBOKS OG LENKE se docs/architecture/FAMILIE_guide.md Hele laget ligger over alt annet og tar ingen klikk selv - bare skjoldet gjoer det, og det er med vilje: kundens egne klikk skal svelges mens filmen gaar, mens filmen selv kaller element.click() direkte og gaar rett gjennom. z-index 2147483000 er valgt UNDER rotasjonskortets 2147483600, saa det kortet fortsatt kommer oeverst hvis begge skulle staa samtidig. */ .guide-lag{position:fixed;inset:0;z-index:2147483000;pointer-events:none} .guide-skjold{position:absolute;inset:0;pointer-events:auto;background:transparent} body.guide-gaar{cursor:none} /* Markoeren. will-change holder den paa GPU-en - uten den hakket bevegelsen synlig naar baandet tegnes om samtidig. */ .guide-markor{ position:absolute;top:0;left:0;width:24px;height:24px; pointer-events:none;will-change:transform; filter:drop-shadow(0 2px 3px rgba(0,0,0,.38)); } /* TRYKKET KRYMPER SVG-EN INNI, IKKE MARKOEREN SELV. Anders 10.10: «rett for hvert museklikk flytter musen seg et langt stykke opp og til venstre og saa tilbake til klikket ... den treffer det punktet den skal, saa dette er en visuell feil.» Han hadde rett i baade observasjon og diagnose. Markoeren plasseres med transform:translate3d(x,y,0). Laa `scale:.82` paa SAMME element, ble de to slaatt sammen i én matrise - og fordi den frittstaaende scale-egenskapen regnes ETTER transform, ble den allerede flyttede posisjonen skalert om transform-origin. Markoeren ble dratt 18 % inn mot skjermens oevre venstre hjoerne: stil 1363,893 -> gjengitt 1156,758 1156/1363 = 0,848 758/893 = 0,849 Samme faktor i begge akser: en skalering om origo, ikke en flytting. Jo lenger ut paa skjermen, jo lengre hopp - derfor saa det ut som en konsekvent sprett rett for hvert klikk. MAALT etter rettingen: stoerste avvik stil -> gjengitt er 1 px. Nede i SVG-en har skaleringen ingen posisjon aa gripe tak i, og transform-origin paa pilspissen gjoer at trykket krymper DER pila peker - slik en ekte markoer gjoer. */ .guide-markor>svg{ display:block;transform-origin:4px 3px; transition:scale .12s ease; } .guide-markor.er-trykket>svg{scale:.82} /* Stjerna som markerer trykket. */ .guide-stjerne{ position:absolute;width:26px;height:26px;pointer-events:none; animation:guide-blink .6s ease-out forwards; } @keyframes guide-blink{ 0%{opacity:0;transform:scale(.3) rotate(-25deg)} 35%{opacity:1;transform:scale(1.25) rotate(5deg)} 100%{opacity:0;transform:scale(1.6) rotate(20deg)} } /* Tekstboksen. Moerk flate med lys tekst, saa den leses over baade den hvite scenen og mobilens moerke flate uten aa bytte farge. */ /* ROED, IKKE SVART. Anders 10.10: «gjor forklarings-teksten rod, saa den er lettere aa faa oeye paa, i stedet for svart som naa.» Baandene er ofte sterke i fargen - groenn, gul, blaa - og en moerk boks forsvant inn i dem. Roedt staar for seg selv mot alt sammen. Hvit tekst paa denne roeden gir kontrast 5,9:1, altsaa godt over AA-kravet paa 4,5:1. */ .guide-tekst{ position:absolute;max-width:300px;box-sizing:border-box; padding:11px 15px;border-radius:11px; background:#c0251c;color:#fff; font:600 13px/1.45 "Sora",Arial,sans-serif; box-shadow:0 10px 30px rgba(120,20,14,.42); opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity .22s ease, transform .22s ease; } .guide-tekst.er-synlig{opacity:1;transform:translateY(0)} /* Et steg kan gi en overskrift og en punktliste i stedet for én setning - brukt der én linje ikke rekker, som paa den ekstra verktoeylinja. */ .guide-tekst.har-liste{max-width:360px} .guide-tekst strong{display:block;margin-bottom:7px;font-weight:800} .guide-tekst ul{margin:0;padding:0 0 0 17px} .guide-tekst li{margin:3px 0;font-weight:600} .guide-tekst li::marker{color:rgba(255,255,255,.72)} /* «Avbryt guide». Anders 10.10: «Vi maa ogsaa ha en Avbryt guide et sted paa skjermen saa man kan avbryte visningen naar man vil.» OEVERST til hoeyre, ikke nederst: designerens egne knapper ligger nede i hoeyre hjoerne (zoom, angre), og en avbryt-knapp oppaa dem ville sett ut som en av dem. Her staar den for seg selv. pointer-events:auto fordi selve laget ikke tar klikk - bare skjoldet og denne knappen gjoer. */ .guide-hopp{ position:absolute;right:24px;top:24px;pointer-events:auto; display:inline-flex;align-items:center;gap:12px; padding:18px 34px;border:0;border-radius:999px;cursor:pointer; background:rgba(16,26,34,.95);color:#fff; font:800 20px/1 "Sora",Arial,sans-serif;letter-spacing:.01em; box-shadow:0 14px 38px rgba(10,20,30,.45); } .guide-hopp span{font-size:24px;line-height:1;opacity:.9} .guide-hopp:hover{background:#c0392b} .guide-hopp:focus-visible{outline:4px solid #8fd4f3;outline-offset:3px} /* Paa smale skjermer faar den ikke ta halve bredden. */ @media (max-width:560px){ .guide-hopp{right:12px;top:12px;padding:13px 20px;font-size:16px;gap:8px} .guide-hopp span{font-size:19px} } /* Husets egne hjelpebobler holder kjeft mens filmen gaar. Guiden har sin egen tekstboks, og to forklaringer oppaa hverandre er ingen forklaring. #multiHint er «hold inne Shift for aa merke flere» - den dukket opp midt i opptaket og la seg over baandet. */ body.guide-gaar #multiHint, body.guide-gaar .mini-toast, body.guide-gaar .kal-drag-tip{display:none!important} /* Lenka under Start-boblen. Den skal vaere liten og rolig - boblen er hovedsaken, dette er tilbudet ved siden av. MAALT: .designer-start-shell er et 94 px hoeyt grid, og Start-knappen ligger ABSOLUTT inni det (y 442..530). En lenke i vanlig flyt havner derfor midt BAK boblen. Derfor absolutt plassering under skallet. */ .guide-lenke{ position:absolute;top:100%;left:50%;transform:translateX(-50%); margin-top:10px;z-index:4;white-space:nowrap; padding:4px 8px;border:0;background:transparent;cursor:pointer; font:600 12px/1.4 "Sora",Arial,sans-serif; color:#4b5563;text-align:center; } /* Naar verktoeyene er ute er ikke dette startbildet lenger, og lenka ville lagt seg under verktoeyrekka og rotet. Den hoerer til boblen. */ .designer-start-shell.is-open .guide-lenke{display:none} .guide-lenke span{display:block;font-weight:700;color:#0698d7;text-decoration:underline} .guide-lenke:hover span{color:#0b84bd} /* I mobildesigneren ligger lenka paa den moerke gradienten. Samme begrunnelse som [FAMILIE:ETIKETTFLATE]: flata er kjent, saa vi bytter bare tekstfarge. */ #resultArea.as-modal.mobile-simple-designer .guide-lenke{color:#c6cfd8} /* ============================================================ [FAMILIE:ETIKETTFLATE] «SYNLIG TRYKKOMRAADE UNDER BRUK» Anders 10.10: «ikke la det vaere en stor boks rundt teksten. La heller teksten bli lysegraa paa moerk bakgrunn og moerkegraa paa lys bakgrunn, uten rammen rundt med fargefyll inni.» DEN GAMLE PLATA VAR STYRT AV FEIL TING. Den laa i [FAMILIE:KONTRAST]- reglene over, som fargelegger etter data-moerk - altsaa etter BAANDETS farge. Men denne etiketten ligger aldri paa baandet. MAALT, 12 tilfeller (3 produkter x 4 visninger): overlapper baandet = false i ALLE PC 1500 etikett y 150..167 baand y 191..400 mobil etikett y 27.. 44 baand y 59..156 Og flagget snudde aldri: alle 12 tyvek-farger, svart inkludert, gir data-moerk=0. Plata ble derfor alltid hvit - ogsaa oppe paa den moerke mobilflata. Det var boksen Anders saa. DET SOM FAKTISK LIGGER BAK: paa PC den hvite scene-boksen, paa mobil gradienten paa #resultArea, rgb(23,35,45) -> rgb(16,26,34). Begge er KJENTE farger. Da trengs ingen plate - bare riktig tekstfarge. #4b5563 paa hvit scene 7.56 #c6cfd8 paa gradientens to stopp 10.13 / 11.16 AA krever 4.5. Klammen og pila staar urort paa #7b8794: maalt 3.99-4.41 mot mobilflata, over kravet paa 3.0 for grafikk. KLAMMETEKSTENE I .rekt-guider BEHOLDER PLATA. De staar oppe paa baandet, der fargen varierer - og der naadde ren fargeveksling bare 2.26 paa #00b1f0. Det er to ulike problemer, og de har hver sin loesning. */ #bigBand .trykkboks-tekst{ background:transparent!important; padding:0!important; border-radius:0!important; backdrop-filter:none!important; color:#4b5563!important; } /* INGEN mediaspoerring her. MAALT: mobildesigneren i landskap er 860 px bred, saa max-width:720px slo ikke inn og teksten ble staaende moerk paa den moerke flata - nettopp feilen vi retter. Klassen settes av start-launcher.js naar den forenklede mobildesigneren aapnes, og den er det eneste stedet gradienten ligger bak etiketten. */ #resultArea.as-modal.mobile-simple-designer #bigBand .trykkboks-tekst{ color:#c6cfd8!important; } /* Tydelig, men moderat vertikal luft mellom trykkrammens bunn og verktøyetikettene. */ .wrap #resultArea.as-modal #bigBand{margin-bottom:18px!important} /* L117: etiketten ligger i den frigjorte toppen INNE i stage, rett over baandet. */ #resultArea.as-modal.designer-uten-toppvalg #bigBand .trykkboks-tekst{ margin-bottom:8px!important; } /* Hold verktøyrekken fri fra den nedflyttede baandrammen. */ /* L118: etiketten beholder plasseringen over baandet; ekstra 6px kommer fra nedflytting av baandet. */ .wrap #resultArea.as-modal.designer-uten-toppvalg #bigBand{margin-bottom:52px!important} /* L121: fly-snapshot skal vaere selve baandet, uten L118-layoutforskyvningen. */ /* Animation lab: isolated source-band clone. The real designer modal does not resize. */ /* L-FORMEDE BAAND (PLAST OG VINYL) SKAL VAERE GJENNOMSIKTIGE I HAKKET Se engine/ui/lform-band.js for hele begrunnelsen. Anders 11.10: «kan vi faa dette omraadet til aa bli transparent i stedet for hvitt? Saerlig naar baandet forflytter seg fra ordrelisten over til design-modulen i animasjon.» Baandbildet har ekte alfa - MAALT: rgba(0,0,0,0) i hele det nedre feltet av forhaandsvisningen. Det hvite laa i flatene BAK bildet. */ #bigBand.band.lform-band{ background-color:transparent; /* Boksskyggen tegnes rundt hele rektangelet og ville rammet inn det tomme hjoernet. drop-shadow foelger bildets alfa, altsaa L-en. */ box-shadow:none; filter:drop-shadow(0 3px 9px rgba(15,34,51,.26)); } .band-flight-clone{ box-sizing:border-box!important; border-radius:0!important; box-shadow:none!important; /* Klonen er en kopi av forhaandsvisningsbildet, som baerer sine egne piksler. En hvit flate bak den hjelper ingen, og paa et L-formet baand flyr det et hvitt rektangel over sida. */ background:transparent; will-change:left,top,width,height; } .band-flight-clone .zone-left, .band-flight-clone .pboard{height:100%!important} .band-flight-clone .pboard{overflow:hidden!important} .band-flight-clone button,.band-flight-clone .trykkboks,.band-flight-clone .safebox,.band-flight-clone .ovlshade,.band-flight-clone .ovlline{display:none!important} /* L126: stabil header-rad + finjusteringer etter visuell browser-test. */ /* Logo/fil trenger litt mer plass til filnavn; tas fra plassering-panelet. */ .wrap #resultArea.as-modal .edit-cols{grid-template-columns:minmax(300px,1fr) minmax(330px,1.10fr) minmax(280px,1.05fr)!important} /* Guide-etiketter matcher forklaringsteksten i hoyrepanelet. */ #bigBand .rekt-guider .uklamme-tekst{font-family:"Sora",Arial,sans-serif!important;font-size:11px!important;font-weight:400!important;line-height:1.35!important;color:#687583!important;letter-spacing:0!important} #bigBand .rekt-guider .uklamme.midt .uklamme-tekst{color:#687583!important} /* Liten nedoverpeker under teksten i midtfeltet. */ #bigBand .rekt-guider .uklamme.midt .uklamme-tekst::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:6px;height:6px;border-right:1px solid #687583;border-bottom:1px solid #687583;transform:translateX(-50%) rotate(45deg);background:transparent;pointer-events:none} /* Tynne standard grenser: rod grunnlinje med tynn hvit stipling oppa. */ .wrap #resultArea #bigBand .rekt-guider .ugrense{width:1px!important;background:none!important;border-left:1px solid #d71920!important} .wrap #resultArea #bigBand .rekt-guider .ugrense::after{inset:-1px!important;border-width:0 0 0 1px!important;border-left-style:dashed!important;border-left-color:#fff!important} /* L127: topphandlinger som én ekte rad – ingen overlappende lag/koordinater. */ /* L129: Header-handlinger bygget som én fysisk 4-cellers rad i H2. Overstyrer eldre fixed/absolute-regler for #helpBtn/#back4 i styles.css. */ /* L130: visuell finjustering av første celle i header-raden. Alle fire kontroller forblir i samme grid; kun Behold design flyttes mot neste celle slik at den synlige avstanden matcher 10px-gapet mellom ? og X. */ /* L132: kompakt handlekurvoverskrift – ikon ved antall/sum i stedet for egen tittel. */ .wrap .cartbar .cart-summary-line{display:flex;align-items:center;justify-content:center;gap:7px} .wrap .cartbar .cart-summary-icon{font-size:15px;line-height:1;flex:0 0 auto} /* L133: grovt handlekurvikon til venstre, sammendrag beholdes sentrert */ .wrap .cartbar .cart-summary-line{position:relative;display:flex;align-items:center;justify-content:center;min-height:22px} .wrap .cartbar .cart-summary-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center} .wrap .cartbar .cart-summary-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round} /* L133: fjern-knapp for låsetang, samme visuelle X-familie som båndlinjene */ #cartList .citem-tang{position:relative;padding-right:34px} #cartList .ctang-close{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin:0;z-index:2} /* ===== Forventet leveringstid i høyre kolonne ===== */ .wrap .delivery-estimate{ background:#fff;border:1px solid var(--line);border-radius:12px; padding:12px 14px;text-align:center; box-shadow:0 8px 30px rgba(28,40,56,.18),0 2px 9px rgba(28,40,56,.12)!important; } .wrap .delivery-estimate[hidden]{display:none!important} /* L137: harmonisert typografi og tettere vertikal rytme i høyre handlekurvkolonne */ .wrap .rcol{gap:10px!important} .wrap .rcol>.cartbar, .wrap .rcol>.delivery-estimate, .wrap .rcol>.card.price{font-family:"Sora",Arial,Helvetica,sans-serif;color:var(--ink-soft)} .wrap .delivery-estimate{padding:12px 18px;text-align:left} .wrap .cartbar .cbl, .wrap .cartbar #cartBarDetail{font-family:"Sora",Arial,Helvetica,sans-serif;color:var(--ink-soft)} /* L138: jevn vertikal rytme og sentrert levering/handlekurv */ .wrap .rcol>.cartbar{margin-bottom:0!important} .wrap .delivery-estimate{text-align:center} .wrap .rcol>.card.price>h2{text-align:center} /* L139: sentrer HANDLEKURV-overskriften eksplisitt over hele kortbredden */ .wrap .rcol > .card.price > h2{ display:block!important; width:100%!important; box-sizing:border-box!important; margin-left:0!important; margin-right:0!important; text-align:center!important; } /* L140: leveringstid integrert kompakt under HANDLEKURV i stedet for eget kort */ .wrap .delivery-estimate{display:none!important} .wrap .rcol > .card.price > .delivery-estimate-inline{ display:block; width:100%; box-sizing:border-box; margin:9px 0 9px; padding:0 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:"Sora",Arial,Helvetica,sans-serif; font-size:10px; font-weight:500; line-height:1.25; color:var(--ink-soft); } .wrap .rcol > .card.price > .delivery-estimate-inline[hidden]{display:none!important} /* Debug 161 — kompakt fargevalg + tydelig elementvelger i vevoptimalisering */ .wrap .prev-farger{display:flex;align-items:center;gap:9px;padding:5px 9px;min-height:28px} .wrap .prev-farger-tit{display:inline-block;flex:0 1 auto;margin:0;white-space:nowrap} .wrap .prev-farger-rad{display:flex;flex-wrap:nowrap;align-items:center;gap:6px} .wrap .opt-element-velger{display:flex;align-items:center;gap:12px;padding:6px 8px;margin:0 0 8px;border:1px solid #d9e2ec;border-radius:10px;background:#f8fafc;color:#5b7086;font-size:12px} .wrap .opt-element-velger>span{flex:0 1 auto;white-space:nowrap} .wrap .opt-element-nav{display:flex;gap:7px;min-width:0;overflow-x:auto;padding:1px 0} .wrap .opt-element-thumb{display:flex;align-items:center;gap:5px;flex:0 0 auto;border:1px solid #cbd8e6;border-radius:8px;background:#fff;padding:4px 6px;cursor:pointer} .wrap .opt-element-thumb.on{box-shadow:inset 0 0 0 2px #2589ee;border-color:#2589ee} .wrap .opt-element-thumb-vis{display:flex;width:52px;height:30px;align-items:center;justify-content:center;overflow:hidden;border-radius:5px;background:#eef2f7;color:#263746;font-weight:700;font-size:9px;background-size:contain;background-position:center;background-repeat:no-repeat} .wrap .opt-element-thumb small{font-size:10px;white-space:nowrap;color:#5b7086} .wrap #optPreviews .opt-prev-holder{height:100%;min-height:0} .wrap #optPreviews .opt-prev-card{height:100%;min-height:0} /* Debug 162 — kompakt kalibreringsrad + tydelige optimizer-kort/valg */ .wrap #resultArea #kalPreviews .opt-prev-card{display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden!important} .wrap #resultArea #kalPreviews .opt-prev-svg{position:relative!important;inset:auto!important;grid-row:1;width:100%!important;height:100%!important;min-height:0!important;padding:6px!important} .wrap #resultArea #kalPreviews .prev-farger{position:relative!important;bottom:auto!important;grid-row:2;width:100%;z-index:5;border-top:1px solid rgba(0,0,0,.08);padding:5px 9px!important;min-height:30px!important;background:rgba(255,255,255,.94)} .wrap #resultArea #kalPreviews .prev-farger-tit{font-size:10.5px;line-height:1.1;margin:0!important} .wrap .opt-element-velger{align-items:stretch;flex-direction:column;gap:6px;padding:8px 10px;background:#fff} .wrap .opt-element-velger>span{font-weight:700;color:#5b7086} .wrap .opt-element-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;overflow:visible;width:100%} .wrap .opt-element-thumb{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:5px;background:#fff;border:1px solid #cbd8e6;border-radius:9px;min-width:0} .wrap .opt-element-thumb-vis{width:100%;height:58px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);font-size:12px;box-sizing:border-box;padding:3px} .wrap .opt-element-thumb-vis img{display:block;width:100%;height:100%;object-fit:contain} .wrap .opt-element-thumb-vis>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} .wrap .opt-element-thumb small{text-align:center;font-size:10px} .wrap #optPreviews .opt-velg-placeholder{height:100%;min-height:280px;border:3px dashed #9fb0c2;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#f8fafc;color:#64788e;font-size:20px;font-weight:800;text-align:center;padding:24px;box-sizing:border-box} .wrap #optPreviews.opt-fly-mottar{opacity:1} /* L165 debug: optimizer-flight som ekte snapshot-lignende transform.\n Hele thumbnailen skaleres som ett lag; ingen intern reflow under flyvning. */ /* L166 debug — geometrisk korrekt optimizer-flight. Startflaten er et crop med samme aspect ratio som hovedvinduet. Hele thumbnailen ligger urørt inni cropen; viewporten skaleres UNIFORMT. */ /* L167 debug — flylaget må være synlig fra første frame; selve bevegelsen styres av Web Animations API for deterministisk 4 s slow-motion. */ /* L168 debug — ekte rasterisert thumbnail-flight. Canvaset er én udelelig bitmap. */ /* Debug 171 — bred desktopmodal + dynamisk optimizer-landingsflate */ @media (min-width:1100px){ .wrap #resultArea.as-modal{width:min(1480px,98vw)!important;max-width:1480px!important;} .wrap #resultArea.as-modal.kal-aktiv{width:min(1480px,98vw)!important;max-width:1480px!important;} } .wrap #optPreviews{transition:height .18s ease,min-height .18s ease;box-sizing:border-box;} /* L173: thumbnail og optimizer bruker samme SVG/viewBox/crop. */ /* L174: optimizer-thumbnails skal forbli kompakte. Samme viewBox brukes inni vinduet, men ytre kort/viewport beholder fast thumbnail-geometri. */ .wrap .opt-element-thumb-vis.opt-thumb-samme-viewport{height:58px!important;min-height:58px!important;aspect-ratio:auto!important;padding:0;overflow:hidden;display:block} .wrap .opt-element-thumb-vis.opt-thumb-samme-viewport svg{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none} /* L177 — kompakt thumbnail-kort, men flight starter fra en sentrert virtuell viewport med samme aspect ratio/viewBox som den store optimizer-visningen. */ .wrap .opt-element-thumb-vis.opt-thumb-samme-viewport{position:relative!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .wrap .opt-element-thumb-vis .opt-thumb-flight-vp{display:block;height:58px;max-height:100%;width:auto;max-width:100%;overflow:hidden;flex:0 0 auto;background:inherit} .wrap .opt-element-thumb-vis .opt-thumb-flight-vp svg{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important} /* DEBUG L179 — canonical optimizer stage. Thumbnail-flight og storvisning bruker samme SVG/viewBox. Storvisningen har ingen arvet flex/zoom/min-height fra forrige element; hver selection starter fra null. */ .wrap #resultArea #optPreviews.opt-canonical-stage{ position:relative!important;display:block!important;overflow:hidden!important; padding:0!important;gap:0!important; } .wrap #resultArea #optPreviews.opt-canonical-stage .opt-prev-holder{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important; } .wrap #resultArea #optPreviews.opt-canonical-stage .opt-prev-card{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important; transform:none!important;border-radius:0!important;overflow:hidden!important; } .wrap #resultArea #optPreviews.opt-canonical-stage .opt-prev-svg{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; min-width:0!important;min-height:0!important;padding:0!important;transform:none!important; } .wrap #resultArea #optPreviews.opt-canonical-stage .opt-prev-svg svg{ display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important; } /* DEBUG L180 — fit-to-stage + kompakt optimizer på desktop. Hovedpreviewets eksakte dimensjoner settes per element i JS. Disse reglene hindrer flex/min-height i å blåse det opp igjen, og komprimerer venstresiden slik at tegneverktøyet normalt er synlig uten vertikal scrolling. */ .wrap #optSide .opt-right{overflow:hidden!important;} .wrap #optSide #optPreviews.opt-canonical-stage{flex:0 0 auto!important;max-width:100%!important;} @media (min-width:1100px){ .wrap #optSide .opt-2col{grid-template-columns:minmax(360px,38%) minmax(0,62%)!important;gap:14px!important;} /* L189: strammet ytterligere. Anders 28.10.2026: «Zoom-verktoeyet er under modalens bunn, saa vi maa bruke scrollbar for aa se verktoeyene.» Blokken over hadde alt dette som maal, men var ikke stram nok. Alle tall under er redusert ett hakk til, og fargeprovene fra 34 til 27 px - de alene tok tre rader naar de brot. Scrollingen staar igjen som reserve paa lave skjermer. */ .wrap #optSide .opt-forklaring{font-family:inherit!important;font-size:11px!important;line-height:1.22!important;margin:0 0 4px!important;padding-left:8px!important;} .wrap #resultArea .opt-spaker{padding:4px 9px 2px!important;margin:0 6px 4px 10px!important;} .wrap #resultArea .opt-spak{padding:3px 9px!important;margin-bottom:3px!important;border-radius:9px!important;} .wrap #resultArea .opt-spak label{font-family:inherit!important;font-size:11.5px!important;margin-bottom:1px!important;} .wrap #resultArea .opt-spak input[type=range]{margin:0!important;} .wrap #resultArea .opt-spak .opt-ends{font-family:inherit!important;font-size:9px!important;margin-top:0!important;} .wrap #resultArea .opt-spak small{font-size:10px!important;margin-top:1px!important;line-height:1.2!important;} .wrap #resultArea .opt-tegn{padding:5px 9px!important;margin:0 6px 2px 10px!important;} .wrap #resultArea .opt-tegn-tit{font-family:inherit!important;font-size:11.5px!important;margin-bottom:3px!important;} .wrap #resultArea .opt-tegn-linje,.wrap #resultArea .opt-tegn-rad{padding:4px 7px!important;margin-bottom:4px!important;} .wrap #resultArea .opt-tegn-fargerad{margin-bottom:4px!important;} .wrap #resultArea .opt-tegn-farger{gap:5px!important;margin-bottom:4px!important;} .wrap #optSide .opt-farge-sw{width:24px!important;height:24px!important;border-radius:6px!important;} .wrap #optSide .opt-tegn-lbl{font-size:11px!important;min-width:40px!important;} .wrap #optSide .opt-tegn-zoom button{width:26px!important;height:26px!important;font-size:14px!important;} .wrap #resultArea .opt-tegn-nedrad{margin-bottom:2px!important;gap:6px!important;} .wrap #resultArea .opt-tegn-nedrad .opt-tegn-knapper button{padding:5px 9px!important;font-size:11.5px!important;} .wrap #optSide .opt-left{font-family:inherit!important;} } /* L190: DESIGNERENS EGNE KONTROLLER HOERER IKKE HJEMME PAA KAL-/OPT-SIDENE. Begge sidene legger klassen kal-aktiv paa #resultArea, men #designerCornerControls (zoom + en permanent utgraaet angreknapp) er bygget rett inn i #resultArea av designeren og ble aldri skjult. Anders 28.10.2026: «det ligger en utgraaet angreknapp her ... ta den bort». #designSize (baandbredde + laasetype) skjules IKKE herfra: den hadde allerede sin kal-aktiv-regel paa linje 953, og aarsaken til at raden likevel sto var to [FAMILIE:STORRELSE]-unntak nede ved 7956/7977 som henter raden tilbake for tekstilbaand. De er rettet der, ikke overstyrt her. */ #resultArea.kal-aktiv #designerCornerControls{ display:none!important; } /* L181: canonical square optimizer scene. Thumbnail-card stays compact/wide; its inner flight viewport is square. */ .wrap .opt-element-thumb-vis .opt-thumb-flight-vp{height:58px!important;width:58px!important;aspect-ratio:1/1!important;margin:0 auto!important} .wrap #optPreviews.opt-canonical-stage{aspect-ratio:1/1!important;overflow:hidden!important} .wrap #optPreviews .opt-prev-holder,.wrap #optPreviews .opt-prev-card,.wrap #optPreviews .opt-prev-svg{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important} .wrap #optPreviews .opt-prev-svg svg{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important} /* DEBUG L182 — hovedpreview trenger ingen ekstra blå selected-ramme. Valgt element markeres kun i thumbnail-navigasjonen. */ .wrap #optSide .opt-prev-card.opt-prev-valgt, .wrap #optSide #optPreviews.opt-canonical-stage .opt-prev-card.opt-prev-valgt{ box-shadow:none!important; transform:none!important; outline:0!important; border-color:transparent!important; } /* L268: kompakt bestillingshero på desktop – mer plass til selve bestillingen. */ @media (min-width:821px){ .page-hero{ min-height:210px; background-position:center 42%; } .page-hero .wrap{padding:22px 22px} .page-hero h1{font-size:clamp(30px,3.2vw,48px);margin:0} } @media (min-width:821px) and (max-height:820px){ .page-hero{min-height:175px;background-position:center 40%} .page-hero .wrap{padding:16px 22px} .page-hero h1{font-size:clamp(28px,2.8vw,40px)} } @media (min-width:821px) and (max-height:700px){ .page-hero{min-height:150px;background-position:center 38%} .page-hero .wrap{padding:12px 22px} .page-hero h1{font-size:32px} } /* L269: vis headerbildet i full bredde uten cover-zoom, og senk Bestilling litt. */ @media (min-width:821px){ .page-hero{ background-size:100% auto; background-position:center 43%; } .page-hero .wrap{transform:translateY(18px)} } @media (min-width:821px) and (max-height:820px){ .page-hero{background-position:center 42%} .page-hero .wrap{transform:translateY(14px)} } @media (min-width:821px) and (max-height:700px){ .page-hero{background-position:center 41%} .page-hero .wrap{transform:translateY(10px)} } /* ============================================================ L270 — Produktvelger i bestillingshero Flytter "Velg produkt" + kortrekken opp i heroen. Det hvite bestillingsfeltet starter dermed direkte med båndlinjene. ============================================================ */ @media (min-width:761px){ .page-hero{min-height:300px!important;align-items:flex-start!important} .page-hero .hero-product-picker{ position:relative;z-index:2;display:block!important; width:min(1080px,calc(100vw - 44px));margin:0 auto!important;padding:0!important; } .page-hero .type-rad-tittel{ color:#fff!important;text-align:left;font-size:16px!important; margin:0 0 6px!important;text-shadow:0 1px 3px rgba(0,0,0,.65) } .page-hero .type-rad{display:flex;gap:8px;flex-wrap:nowrap;margin:0;align-items:flex-start} .page-hero .type-item{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:stretch; border:1px solid rgba(255,255,255,.75);border-radius:10px;background:rgba(255,255,255,.96); padding:4px;box-shadow:0 2px 10px rgba(0,0,0,.28);cursor:pointer; } .page-hero .type-navn{font-weight:700;font-size:10.5px;color:#232323;text-align:center;line-height:1.1;min-height:1.2em;display:flex;align-items:center;justify-content:center} .page-hero .type-fig{padding:0;border:0;border-radius:7px;overflow:hidden;cursor:pointer;background:#fff;height:58px;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center} .page-hero .type-fig img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .page-hero .type-om{background:none;border:0;color:#2f8ef0;font-weight:600;font-size:9.5px;cursor:pointer;padding:0;font-family:inherit;text-align:center} /* Den opprinnelige grid-plassen for prod-topp skal ikke reservere høyde etter flyttingen. */ .wrap>.grid{row-gap:8px} } @media (min-width:761px) and (max-height:820px){ .page-hero .type-rad-tittel{font-size:15px!important;margin-bottom:4px!important} } /* ============================================================ L271 — Bestillingshero: mer original høyde + større produktkort Produktvelgeren beholdes i heroen, men flyttes litt ned og kortrekken får igjen omtrent samme horisontale spenn som før. ============================================================ */ @media (min-width:761px){ .page-hero{min-height:390px!important} .page-hero .wrap{padding:88px 22px 18px!important;transform:none!important} .page-hero .masthead{margin:0 0 26px!important} .page-hero h1{font-size:clamp(34px,3vw,46px)!important;margin:0!important} .page-hero .type-rad-tittel{ font-size:17px!important;margin:0 0 8px!important; } .page-hero .type-rad{gap:10px} .page-hero .type-item{padding:5px;border-radius:11px} .page-hero .type-navn{font-size:11.5px;min-height:1.25em} .page-hero .type-fig{height:72px} .page-hero .type-om{font-size:10px;padding:1px 0 2px} } @media (min-width:761px) and (max-height:820px){ .page-hero{min-height:345px!important} .page-hero .type-fig{height:64px} } @media (min-width:761px) and (max-height:700px){ .page-hero{min-height:310px!important} .page-hero h1{font-size:32px!important} .page-hero .type-fig{height:56px} .page-hero .type-navn{font-size:10.5px} .page-hero .type-om{font-size:9.5px} } /* ============================================================ L272 — Finjustering av bestillingshero - Bestilling litt lavere - produktkortrekken nær bunnen av heroen (~1 cm luft) - første båndlinje trekkes opp i det hvite feltet ============================================================ */ @media (min-width:761px){ .page-hero .wrap{padding-top:104px!important;padding-bottom:10px!important} .page-hero .masthead{margin-bottom:32px!important} .page-hero .hero-product-picker{transform:translateY(18px)} } @media (min-width:761px) and (max-height:820px){ .page-hero .wrap{padding-top:86px!important;padding-bottom:8px!important} .page-hero .masthead{margin-bottom:25px!important} .page-hero .hero-product-picker{transform:translateY(14px)} } @media (min-width:761px) and (max-height:700px){ .page-hero .wrap{padding-top:70px!important;padding-bottom:7px!important} .page-hero .masthead{margin-bottom:20px!important} .page-hero .hero-product-picker{transform:translateY(10px)} } /* ============================================================ L273 — Horisontal innretting + siste vertikale finpuss Produktkortrekken følger samme innholdsbredden som bestillingsområdet, og første båndlinje trekkes 10 px opp fra L272-posisjonen. ============================================================ */ @media (min-width:761px){ .page-hero .hero-product-picker{ width:100%!important; max-width:none!important; } .wrap>.grid{margin-top:-2px!important} } @media (min-width:761px) and (max-height:820px){ .wrap>.grid{margin-top:-4px!important} } @media (min-width:761px) and (max-height:700px){ .wrap>.grid{margin-top:-5px!important} } /* L274: tom handlekurv flukter visuelt med første ghost-båndlinje. Så snart cart får første element fjernes cart-empty av oppdaterPris(). */ @media (min-width:961px){ .wrap .rcol.cart-empty>.card.price{display:none!important} .wrap .rcol.cart-empty>.delivery-estimate{display:none!important} .wrap .rcol.cart-empty>.cartbar{ min-height:116px!important;height:116px!important;box-sizing:border-box!important; display:flex!important;align-items:center!important;justify-content:center!important; margin:0!important;padding:12px 18px!important; background:linear-gradient(180deg,#ffffff 0%,#eef3f9 100%)!important; border-radius:16px!important } .wrap .rcol.cart-empty>.cartbar .cart-summary-line{width:100%} .wrap .rcol.cart-empty>.cartbar #cartBarDetail{display:none!important} } /* ============================================================ L290 — Tyvek lagerstatus + horisontal linjering - Lagerstatus høyrestilles i paletten mot høyre kant / gull-ruten. - Produktkortrekken i hero starter på samme venstrekant som båndlinjene, men beholder samme høyre ytterkant som bestillingsområdet. ============================================================ */ .wrap .bl-farge-pop2 .bl-pop-stock-hover{ margin-left:auto!important; justify-content:flex-end!important; text-align:right!important; padding-left:0!important; padding-right:0!important; } @media (min-width:761px){ .page-hero .hero-product-picker{ box-sizing:border-box!important; padding-left:22px!important; padding-right:0!important; } } /* L304 — Eventro designstandard: bestillingssidens ytre kort/labels/overflater. Kun visuell CSS. Designer-/tegneverktøy og engine-logikk berøres ikke. */ .wrap .type-om{ color:#04A9FC; } .wrap .bl-kat-tittel, .wrap .type-rad-tittel, .wrap .type-navn{ color:#232323; font-family:"Sora",Arial,Helvetica,sans-serif; } .wrap .bandline.har-bredde{ background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 4px 18px rgba(0,0,0,.14); } .wrap .bandline.har-bredde select,.wrap .bandline.har-bredde .bl-farge-vis,.wrap .bandline.har-bredde .bl-cta{ border-color:rgba(0,0,0,.12)!important; box-shadow:0 2px 8px rgba(0,0,0,.16)!important; } .wrap .prod-topp .velg-prod-lenke{color:#04A9FC} /* ========================================================= L313 — Eventro designstandard: faktisk trådfarge-kalibreringsside Kun CSS. Ingen kalibrerings-/designerlogikk. ========================================================= */ /* Modalens toppfelt følger samme lyse Eventro-standard som øvrige modaler. */ .wrap #resultArea.as-modal.kal-aktiv{ background:#fff!important; color:#232323!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; border-radius:12px!important; box-shadow:0 24px 70px rgba(1,37,65,.28)!important; } .wrap #resultArea.as-modal.kal-aktiv>h2{ background:#F6FCFF!important; color:#242424!important; border-bottom:1px solid rgba(0,0,0,.075)!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; font-weight:600!important; } /* Selve kalibreringsflaten skal være lys og nøytral, ikke gammel blågrå. */ .wrap #resultArea.kal-aktiv #kalSide.kal-side{ background:#fff!important; color:#232323!important; } .wrap #kalSide .kal-forklaring{ color:#232323!important; border-left-color:rgba(4,169,252,.18)!important; } .wrap #kalSide .kal-colhdr{ color:#5b7086!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; } /* Automatisk/manuell: samme målte Eventro CTA-standard. */ /* Toppknappen Forhåndsvisning følger samme blå standard i kalibreringssteget. */ /* Behold design er sekundær/outline i samme familie. */ /* Fargekort og statusflater. */ .wrap #kalSide .kal-farge{ color:#232323!important; border-color:rgba(0,0,0,.105)!important; background:#fff!important; } .wrap #kalSide .kal-farge:hover{ border-color:rgba(4,169,252,.55)!important; box-shadow:0 3px 12px rgba(1,37,65,.10)!important; } .wrap #kalSide .kal-hex{color:#334155!important} .wrap #kalSide .kal-teller{ background:#F6FCFF!important; color:#767676!important; border-color:rgba(0,0,0,.12)!important; } .wrap #kalSide .kal-teller.kal-ikke-ferdig{ background:#fff1f1!important; color:#c0261f!important; border-color:#e2001a!important; } /* Angre / reset og videre-knapp beholder funksjonell semantikk, men harmoniseres. */ .wrap #kalSide .kal-reset{ background:#fff!important; color:#767676!important; border:1px solid rgba(0,0,0,.15)!important; } /* ========================================================= L314 — Komplett knappestandard i designer/kalibreringsflyt Visuell standardisering kun. Ingen funksjonslogikk. ========================================================= */ /* Felles font/form på handlingsknapper i designer-/kalibreringsmodalene. */ /* Primære handlinger. Bevarer eventuell disabled-state nedenfor. */ /* Sekundære/tilbake-handlinger. */ /* Toppens "Behold design fra..." er sekundær Eventro-outline. */ /* ? og X er ikonhandlinger og skal ikke tvinges til 42px CTA-geometri. */ /* Disabled skal fortsatt se disabled ut og ikke få primær blå. */ /* Grønn legacy "Ferdig – legg til i handlekurv" skal inn i samme primære Eventro-familie; funksjon/ID beholdes. */ .wrap #resultArea.as-modal button[style*="background"],.wrap #resultArea.as-modal .finish-btn{ font-family:"Sora",Arial,Helvetica,sans-serif!important; } /* ========================================================= L315 — Systematisk UI-standard: kalibrering, optimizer og båndliste Kun visuell CSS. Ingen funksjonslogikk. ========================================================= */ /* --- KALIBRERING: footerhandlinger --- */ /* --- OPTIMIZER: footerhandlinger --- */ /* --- OPTIMIZER: form-/verktøyflater harmoniseres uten CTA-geometri --- */ .wrap #optSide input[type="range"]{accent-color:#04A9FC} /* --- HOVEDBESTILLING: formkontroller og handlinger --- */ .wrap .bandline.har-bredde .bl-antsel, .wrap .bandline.har-bredde .bl-trykk, .wrap .bandline.har-bredde .bl-farge-vis, .wrap .bandline.har-bredde .bl-cta{ font-family:"Sora",Arial,Helvetica,sans-serif!important; color:#232323!important; background:#fff!important; border:1px solid rgba(0,0,0,.15)!important; border-radius:5px!important; box-shadow:none!important; } .wrap .bandline.har-bredde .bl-antsel:hover, .wrap .bandline.har-bredde .bl-trykk:hover, .wrap .bandline.har-bredde .bl-farge-vis:hover, .wrap .bandline.har-bredde .bl-cta:hover{ border-color:rgba(4,169,252,.55)!important; } .wrap .bandline.har-bredde .bl-antsel:focus, .wrap .bandline.har-bredde .bl-trykk:focus, .wrap .bandline.har-bredde .bl-farge-vis:focus-visible, .wrap .bandline.har-bredde .bl-cta:focus-visible{ outline:none!important; border-color:#04A9FC!important; box-shadow:0 0 0 2px rgba(4,169,252,.14)!important; } /* Endre design er sekundær handling, ikke legacy grønn/blå. */ .wrap .bandline.har-bredde .bl-cta.ghost{ background:#fff!important; color:#333!important; border-color:rgba(0,0,0,.15)!important; font-weight:600!important; } .wrap .bandline.har-bredde .bl-cta.ghost:hover{ color:#04A9FC!important; border-color:rgba(4,169,252,.55)!important; } /* Legg til flere bånd-farger: funksjonell outline, men Eventro-tokens. */ .wrap .bl-flere-btn{ background:#F6FCFF!important; color:#04A9FC!important; border-color:rgba(4,169,252,.55)!important; border-radius:5px!important; box-shadow:none!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; font-weight:600!important; } .wrap .bl-flere-btn:hover{ background:#eef8fd!important; color:#04A9FC!important; border-color:#04A9FC!important; box-shadow:none!important; } /* Båndets blå handlingsknapp følger primærfargen. */ /* Hovedbestillingens kort/kurv: samme rolige overflatefamilie. */ .wrap .bandline.har-bredde,.wrap .cartbar{ border-color:rgba(0,0,0,.075)!important; } /* ========================================================= L316 — Eventro semantisk knappesystem Samme geometri/typografi, variantfarge etter funksjon. Ingen funksjonslogikk. ========================================================= */ :root{ --eventro-btn-primary:#04A9FC; --eventro-btn-create:#2f86cc; --eventro-btn-create-hover:#2373b3; --eventro-btn-text:#333; --eventro-btn-border:rgba(0,0,0,.15); --eventro-btn-disabled:#dbe3ec; --eventro-success:#2e9e5b; } /* Felles oppskrift for ordinære handlingsknapper. Ikon-/toolknapper er bevisst ikke med. */ /* PRIMARY / FREMDRIFT / BEKREFTELSE */ /* CREATE / LEGG TIL / LAST OPP Eksakt eksisterende designerblå beholdes som egen standard. */ .wrap :is(#addText,#addLogoBtn){ background:var(--eventro-btn-create)!important; color:#fff!important; border:1px solid var(--eventro-btn-create)!important; } /* SECONDARY / TILBAKE / ANGRE / NEDLASTING / BEHOLD */ /* Behold design er sekundær med blå tekst allerede i hvile. */ .wrap #resultArea .keep-hdr-btn{ color:var(--eventro-btn-primary)!important; border-color:rgba(4,169,252,.55)!important; } /* Disabled er en state, ikke en ny variant. */ /* Grønt reserveres til positiv status/suksess. */ /* === L317: calibration/optimizer semantic compliance === */ .wrap #resultArea.kal-aktiv{background:#F6FCFF!important;color:#232323!important;border:1px solid rgba(0,0,0,.10)!important;border-radius:12px!important;box-shadow:0 18px 48px rgba(1,37,65,.18),0 3px 10px rgba(1,37,65,.10)!important} .wrap #kalSide.kal-side,.wrap #optSide.opt-side{background:#F6FCFF!important;color:#232323!important} /* create/action */ /* confirm/next */ /* secondary */ /* preview is deliberately quieter */ .wrap #kalSide .kal-teller:not(.kal-ikke-ferdig){background:#eef9f3!important;color:#218b4b!important;border-color:#8fd6ae!important} .wrap #optSide input[type=range],.wrap #kalSide input[type=range]{accent-color:#04A9FC!important} /* L318 UI finjustering */ @media(prefers-reduced-motion:reduce){.wrap .bl-farge-vis.bl-farge-vent{animation:none!important}} .wrap .bandline.har-bredde .bl-antsel,.wrap .bandline.har-bredde .bl-trykk,.wrap .bandline.har-bredde .bl-farge-vis{border:1px solid rgba(0,0,0,.15)!important;border-radius:5px!important;box-shadow:none!important}#resultArea.as-modal :is(.edit-left,.edit-right,.edit-simple,.stage){border:1px solid rgba(0,0,0,.10)!important;border-radius:12px!important} /* L319 — modalheader helt opp + eksplisitt lik kontrollhøyde */ /* fargefeltets faktiske pending-state */ .wrap .bl-farge-vis.bl-farge-vent{ background:#F6FCFF!important; animation:evChoiceFlashFilm .20s ease-in-out 5!important; } /* L320 — AUTORITATIV kalibrering/optimizer/modalheader-knappestandard */ .wrap :is(#kalSide .kal-valg,#kalSide .kal-videre,#kalSide .side-tilbake,#kalSide .kal-knapper-rad .tbtn,#optSide .opt-ferdig,#optSide .side-tilbake){min-height:42px;height:42px;padding:5px 20px;border-radius:5px;font-family:"Sora",Arial,Helvetica,sans-serif;font-size:13px;line-height:15.6px;font-weight:600;letter-spacing:normal;text-transform:uppercase;box-shadow:none} .wrap #kalSide .kal-valg{flex:0 0 190px;width:190px;min-width:190px;display:inline-flex;align-items:center;justify-content:center;text-align:center;background:#2F86CC;color:#fff;border:1px solid #2F86CC} .wrap #kalSide .kal-valg:hover{background:#2373B3;border-color:#2373B3} /* [FAMILIE:OPTIMIZER] Standard lysebla, som resten av nettstedet. Var #20B66B gronn. */ .wrap #kalSide .kal-videre:not(.kal-videre-av),.wrap #optSide .opt-ferdig:not(:disabled){background:var(--accent);color:#fff;border:1px solid var(--accent)} .wrap #kalSide .kal-videre:not(.kal-videre-av):hover,.wrap #optSide .opt-ferdig:not(:disabled):hover{background:var(--accent-ink);border-color:var(--accent-ink)} .wrap :is(#kalSide .side-tilbake,#kalSide .kal-knapper-rad .tbtn:not(.kal-videre),#optSide .side-tilbake){background:#fff;color:#333;border:1px solid rgba(0,0,0,.15)} .wrap :is(#kalSide .side-tilbake,#kalSide .kal-knapper-rad .tbtn:not(.kal-videre),#optSide .side-tilbake):hover{background:#fff;color:#04A9FC;border-color:rgba(4,169,252,.55)} .wrap #kalSide .kal-videre.kal-videre-av,.wrap #kalSide .kal-videre:disabled,.wrap #optSide .opt-ferdig:disabled{background:#dbe3ec;color:#fff;border-color:#dbe3ec;cursor:not-allowed} #resultArea.as-modal h2 .designer-head-actions{position:absolute;top:2px;right:8px;height:32px;display:flex;align-items:center;justify-content:flex-end;gap:8px;z-index:1008} #resultArea.as-modal h2 .designer-head-actions>*{position:static;inset:auto;margin:0;transform:none} #resultArea.as-modal h2 .designer-head-actions>.designer-head-preview-slot{display:flex;height:32px;align-items:center} #resultArea.as-modal h2 .designer-head-actions #keepInDesign,#resultArea.as-modal h2 .designer-head-actions #kveilBtn{height:32px;min-height:32px;max-height:32px;padding:0 12px;background:transparent;color:#04A9FC;border:1px solid rgba(4,169,252,.72);border-radius:5px;box-shadow:none;font-family:"Sora",Arial,Helvetica,sans-serif;font-size:12px;line-height:30px;font-weight:600;text-transform:uppercase} #resultArea.as-modal h2 .designer-head-actions #helpBtn,#resultArea.as-modal h2 .designer-head-actions #back4{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;display:grid;place-items:center;background:#fff;color:#232323;border:1px solid rgba(0,0,0,.12);box-shadow:none;line-height:1;font-family:"Sora",Arial,Helvetica,sans-serif} /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal .btn-dashed-remove,.wrap .btn-dashed-remove,.btn-dashed-remove{min-height:42px;padding:5px 20px;background:#fff;color:#222;border:1.5px dashed #333;border-radius:5px;box-shadow:none;font-family:"Sora",Arial,Helvetica,sans-serif;font-size:13px;line-height:15.6px;font-weight:600;text-transform:uppercase} /* ========================================================= L321 — målrettet korrigering etter L320 1) Modalheader tilbake til stabil 4-cellers rad 2) Forhåndsvisning hvit/outline 3) Kalibreringens valg-rad/piler gjenopprettet Kun CSS/presentasjon. ========================================================= */ /* --- MODALHEADER: stabil kjent struktur --- */ #resultArea.as-modal h2{ position:relative!important; } #resultArea.as-modal h2 .designer-head-actions{ position:absolute!important; top:8px!important; right:10px!important; height:32px!important; display:grid!important; grid-template-columns:max-content max-content 32px 32px!important; grid-auto-flow:unset!important; align-items:center!important; justify-items:center!important; gap:8px!important; z-index:1008!important; } #resultArea.as-modal h2 .designer-head-actions > #keepInDesign, #resultArea.as-modal h2 .designer-head-actions > .designer-head-preview-slot, #resultArea.as-modal h2 .designer-head-actions > #helpBtn, #resultArea.as-modal h2 .designer-head-actions > #back4{ position:static!important; inset:auto!important; top:auto!important;right:auto!important;bottom:auto!important;left:auto!important; margin:0!important; transform:none!important; align-self:center!important; } #resultArea.as-modal h2 .designer-head-actions > .designer-head-preview-slot{ display:flex!important; align-items:center!important; justify-content:center!important; height:32px!important; } /* Behold + Forhåndsvisning: samme størrelse. Preview er HVIT, ikke blå. */ #resultArea.as-modal h2 .designer-head-actions #keepInDesign, #resultArea.as-modal h2 .designer-head-actions #kveilBtn{ position:static!important; height:32px!important; min-height:32px!important; max-height:32px!important; padding:0 12px!important; margin:0!important; transform:none!important; background:#fff!important; color:#04A9FC!important; border:1px solid rgba(4,169,252,.70)!important; border-radius:5px!important; box-shadow:none!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; font-size:12px!important; line-height:30px!important; font-weight:600!important; text-transform:uppercase!important; filter:none!important; } #resultArea.as-modal h2 .designer-head-actions #kveilBtn{ border-style:dashed!important; } #resultArea.as-modal h2 .designer-head-actions #keepInDesign:hover, #resultArea.as-modal h2 .designer-head-actions #kveilBtn:hover{ background:#F6FCFF!important; color:#04A9FC!important; filter:none!important; } /* ? direkte til venstre for X, samme høyde. X ytterst til høyre. */ #resultArea.as-modal h2 .designer-head-actions #helpBtn, #resultArea.as-modal h2 .designer-head-actions #back4{ position:static!important; width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; max-width:32px!important; max-height:32px!important; padding:0!important; margin:0!important; display:grid!important; place-items:center!important; background:#fff!important; color:#232323!important; border:1px solid rgba(0,0,0,.12)!important; box-shadow:none!important; line-height:1!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; } #resultArea.as-modal h2 .designer-head-actions #helpBtn{border-radius:50%!important} #resultArea.as-modal h2 .designer-head-actions #back4{border-radius:5px!important} /* --- KALIBRERING: L320 fjernet ved et uhell .kal-valg-rad/hjelp fordi selector-søket var for bredt. Gjenopprett layout og standardpil. --- */ .wrap #kalSide .kal-valg-wrap{ display:flex!important; flex-direction:column!important; gap:16px!important; margin:16px 0 34px!important; } .wrap #kalSide .kal-valg-rad{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px!important; flex-wrap:nowrap!important; } .wrap #kalSide .kal-valg{ flex:0 0 190px!important; width:190px!important; min-width:190px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; } .wrap #kalSide .kal-valg-hjelp{ display:flex; align-items:center!important; gap:8px!important; flex:1 1 auto!important; min-width:0!important; } .wrap #kalSide .kal-valg-boks{ flex:1 1 auto!important; min-width:0!important; font-size:12.5px!important; line-height:1.35!important; color:#2b3a49!important; padding:9px 12px!important; } /* Rød standardpil: peker MOT knappen (venstre) og hopper mot den. */ .wrap #kalSide .kal-man-pil{ display:inline-block!important; flex:0 0 auto!important; color:#e2001a!important; font-size:30px!important; line-height:1!important; transform:none; animation:kalManHopTowardButton .60s ease-in-out infinite!important; } @keyframes kalManHopTowardButton{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-8px)} } /* ========================================================= L322 — kildefiks: preview + bestillingshint ========================================================= */ /* Forhåndsvisning: autoritativ, kontekstuavhengig regel. Legacy .kveil-btn-kilden over er fjernet. */ #kveilBtn.kveil-btn{ position:static!important; inset:auto!important; transform:none!important; width:auto!important; height:32px!important; min-height:32px!important; max-height:32px!important; margin:0!important; padding:0 12px!important; background:#fff!important; color:#04A9FC!important; border:1px dashed #04A9FC!important; border-radius:5px!important; box-shadow:none!important; font-family:"Sora",Arial,Helvetica,sans-serif!important; font-size:12px!important; line-height:30px!important; font-weight:600!important; text-transform:uppercase!important; filter:none!important; cursor:pointer!important; z-index:auto!important; } #kveilBtn.kveil-btn:hover{ background:#F6FCFF!important; color:#04A9FC!important; border-color:#04A9FC!important; filter:none!important; } /* Samme oppmerksomhetsrytme som + Legg til flere bånd-farger: .2s linear x5 = ca. 1 sekund, men med hvit/lysblå bakgrunn i stedet for opacity. */ .wrap .bl-col.bl-farge:has(> .bl-arrow) .bl-farge-vis, .wrap .bl-antall:has(> .bl-arrow) > .bl-antsel, .wrap .bl-trykk-wrap:has(> .bl-arrow) > .bl-trykk{ animation:eventroChoiceBlink .2s linear 5!important; } .wrap .bl-farge-vis.bl-farge-vent{ animation:eventroChoiceBlink .2s linear 5!important; } @media(prefers-reduced-motion:reduce){ .wrap .bl-col.bl-farge:has(> .bl-arrow) .bl-farge-vis, .wrap .bl-antall:has(> .bl-arrow) > .bl-antsel, .wrap .bl-trykk-wrap:has(> .bl-arrow) > .bl-trykk, .wrap .bl-farge-vis.bl-farge-vent{animation:none!important} } /* L323 — endelig preview-eier */ .wrap #resultArea.as-modal h2 .designer-head-actions #kveilBtn.kveil-btn{ position:static!important;inset:auto!important;transform:none!important;width:auto!important; height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0 12px!important; background:#fff!important;color:#04A9FC!important;border:1px dashed #04A9FC!important;border-radius:5px!important; box-shadow:none!important;font-family:"Sora",Arial,Helvetica,sans-serif!important;font-size:12px!important; line-height:30px!important;font-weight:600!important;text-transform:uppercase!important;filter:none!important} .wrap #resultArea.as-modal h2 .designer-head-actions #kveilBtn.kveil-btn:hover{ background:#F6FCFF!important;color:#04A9FC!important;border-color:#04A9FC!important;filter:none!important} /* ========================================================= L324 — sekvensielt blikkfang på FARGE / ANTALL / TRYKK Gjenbruker samme raske rytme som flereBlink (.2s x5). CSS-only: ingen bestillingslogikk endres. ========================================================= */ /* Farge: blink når fargefeltet er i ventestatus. */ .wrap .bandline .bl-farge-vis.bl-farge-vent, /* Antall: blink mens raden viser neste-valg-pilen ved antall. */ .wrap .bandline .bl-antall:has(.bl-arrow) .bl-antsel, /* Trykk: blink mens neste-valg-pilen ligger i trykk-kolonnen. */ .wrap .bandline .bl-trykk-wrap:has(.bl-arrow) .bl-trykk{ animation:eventroOrderChoiceFlash .20s linear 5!important; background:#F6FCFF!important; }/* Denne oppmerksomhetsindikatoren er funksjonell veiledning og skal ikke slås av av generelle reduced-motion-regler; den varer kun ca. 1 sekund. */ /* ========================================================= L329 — AUTORITATIV SEKVENSiELL VALG-FLASH Én triggerklasse, én keyframe, startet av band-list.js etter live DOM. ========================================================= */ @keyframes eventroPendingChoiceFlash{ 0%,100%{ background:#248FD0!important; background-color:#248FD0!important; color:#fff!important; border-color:#0878B8!important; box-shadow:0 0 0 2px rgba(4,169,252,.28)!important; } 50%{ background:#fff!important; background-color:#fff!important; color:#232323!important; border-color:#04A9FC!important; box-shadow:none!important; } } /* ========================================================= L330 — NEXT CHOICE HEARTBEAT Visuelt blikkfang via transform, ikke bakgrunnsfarge. ========================================================= */ @keyframes eventroChoiceHeartbeat{ 0%,100%{transform:scale(1);box-shadow:none} 12%{transform:scale(1.075);box-shadow:0 0 0 3px rgba(4,169,252,.22)} 24%{transform:scale(1);box-shadow:none} 36%{transform:scale(1.045);box-shadow:0 0 0 2px rgba(4,169,252,.16)} 52%{transform:scale(1);box-shadow:none} } .wrap .bandline .eventro-choice-pulse{ position:relative!important; z-index:8!important; transform-origin:center center!important; animation:eventroChoiceHeartbeat .72s ease-in-out 2!important; } /* ========================================================= L331 — heartbeat på WRAPPER, ikke native select/button. Native formkontroller kan beholde tvungen størrelse/farge. Pseudo-elementet ligger utenpå og påvirker ikke layout/piler. ========================================================= */ .wrap .bandline .bl-farge:has(.eventro-choice-pulse), .wrap .bandline .bl-antall:has(.eventro-choice-pulse), .wrap .bandline .bl-trykk-wrap:has(.eventro-choice-pulse){ position:relative!important; overflow:visible!important; } .wrap .bandline .bl-farge:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-antall:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-trykk-wrap:has(.eventro-choice-pulse)::after{ content:""; position:absolute; inset:-4px; border:3px solid #248FD0; border-radius:9px; pointer-events:none; z-index:20; transform-origin:center; animation:eventroWrapperHeartbeat .72s ease-in-out 2; } @keyframes eventroWrapperHeartbeat{ 0%,100%{transform:scale(1);opacity:.20;box-shadow:0 0 0 0 rgba(4,169,252,0)} 12%{transform:scale(1.055);opacity:1;box-shadow:0 0 0 5px rgba(4,169,252,.22)} 24%{transform:scale(1);opacity:.35;box-shadow:0 0 0 0 rgba(4,169,252,0)} 36%{transform:scale(1.03);opacity:.9;box-shadow:0 0 0 3px rgba(4,169,252,.16)} 52%,100%{transform:scale(1);opacity:.20;box-shadow:0 0 0 0 rgba(4,169,252,0)} } /* Slå av transform på selve kontrollen; wrapper-overlayet gjør all animasjon. */ .wrap .bandline .eventro-choice-pulse{ animation:none!important; transform:none!important; } /* ========================================================= L332 — pil over heartbeat + fargepil samme livsløp som antall/trykk ========================================================= */ /* Heartbeat-overlay skal ligge under hintpilen. */ .wrap .bandline .bl-farge:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-antall:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-trykk-wrap:has(.eventro-choice-pulse)::after{ z-index:5!important; } /* Rød hintpil skal alltid ligge foran pulse-overlay og selve kontrollen. */ .wrap .bandline .bl-arrow{ z-index:30!important; pointer-events:none!important; isolation:isolate; } /* ========================================================= L333 — jevn pulsrytme Kun rytmen endres. Fungerende wrapper/pil-oppsett fra L332 beholdes. ========================================================= */ @keyframes eventroWrapperHeartbeatEven{ 0%,100%{ transform:scale(1); opacity:.28; box-shadow:0 0 0 0 rgba(4,169,252,0); } 50%{ transform:scale(1.055); opacity:1; box-shadow:0 0 0 5px rgba(4,169,252,.22); } } .wrap .bandline .bl-farge:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-antall:has(.eventro-choice-pulse)::after, .wrap .bandline .bl-trykk-wrap:has(.eventro-choice-pulse)::after{ animation:eventroWrapperHeartbeatEven .40s ease-in-out 3!important; } /* L391: Bestillingssiden følger samme 1440 px-akse som header og øvrige sider. Interne animasjoner måler fortsatt elementenes faktiske DOM-rektangler, så start- og sluttpunkter følger breddeendringen uten faste x-koordinater. */ @media(min-width:761px){ .wrap{ width:100%; max-width:1440px; padding-left:28px; padding-right:28px; } .wrap #steps, .wrap .prod-topp{ padding-left:0; } .wrap .grid{ grid-template-areas:"steps cart" "design cart"; } } /* L392: Heroens produktkort følger nøyaktig samme venstre og høyre innholdsakse som bestillingslisten. Opphever eldre L290-innrykk på 22 px. */ @media(min-width:761px){ .page-hero .wrap{ padding-left:28px!important; padding-right:28px!important; } .page-hero .hero-product-picker{ padding-left:0!important; padding-right:0!important; } } @media(min-width:761px) and (max-width:960px){ .wrap .grid{ grid-template-areas:"steps" "design" "cart"; } } /* L404: Produktkortene beholder lik høyde når lange navn brytes på smal PC. Tolinjers navn tar plass fra bildeområdet i stedet for å gjøre kortet høyere. */ @media(min-width:761px) and (max-width:1100px){ .page-hero .type-item{ height:120px; min-height:120px; max-height:120px; box-sizing:border-box; } .page-hero .type-navn, .page-hero .type-om{ flex:0 0 auto; } .page-hero .type-fig{ flex:1 1 auto; height:auto!important; min-height:0; } } /* ========================================================= L545 — lavere bestillingshero + presis førstegangsjustering - Kun bestillingssiden får den kortere heroen. - Produktkortene løftes ca. 15 px uten å endre kortstørrelsen. - Handlekurvtoppen følger faktisk høyde på første uferdige båndrad. ========================================================= */ .eventro-shop-page .page-hero h1 .shop-title-accent{ color:#04A9FC; } @media(min-width:761px){ .eventro-shop-page .page-hero{ min-height:365px!important; } .eventro-shop-page .page-hero h1{ font-size:clamp(30px,2.4vw,40px)!important; white-space:nowrap; } .eventro-shop-page .page-hero .hero-product-picker{ transform:translateY(3px)!important; } } @media(min-width:761px) and (max-height:820px){ .eventro-shop-page .page-hero{ min-height:330px!important; } .eventro-shop-page .page-hero .hero-product-picker{ transform:translateY(0)!important; } } @media(min-width:761px) and (max-height:700px){ .eventro-shop-page .page-hero{ min-height:298px!important; } } @media(min-width:961px){ .eventro-shop-page .wrap .rcol.cart-first-pending>.card.price, .eventro-shop-page .wrap .rcol.cart-first-pending>.delivery-estimate{ display:none!important; } .eventro-shop-page .wrap .rcol.cart-first-pending>.cartbar{ min-height:var(--eventro-first-band-height,116px)!important; height:var(--eventro-first-band-height,116px)!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:12px 18px!important; } .eventro-shop-page .wrap .rcol.cart-first-pending>.cartbar .cart-summary-line{ width:100%; } .eventro-shop-page .wrap .rcol.cart-first-pending>.cartbar #cartBarDetail{ display:none!important; } } @media(min-width:761px) and (max-width:1180px){ .eventro-shop-page .page-hero h1{ font-size:clamp(25px,3vw,34px)!important; } } @media(max-width:760px){ .eventro-shop-page .page-hero h1 .shop-title-accent{ color:#04A9FC; } } /* L101: Mobil ordrelinje som én stabil cluster. Originalelementene og deres hendelser beholdes; bare den mobile presentasjonen omorganiseres. */ @media(max-width:760px){ .eventro-shop-page .wrap #steps{padding-left:0!important} .eventro-shop-page .wrap .bandline.har-bredde{ display:grid!important; grid-template-columns:minmax(0,1fr) 96px!important; grid-template-rows:auto auto auto auto auto!important; grid-template-areas:none!important; column-gap:10px!important;row-gap:7px!important; align-items:start!important; padding:11px!important; border-radius:15px!important; overflow:visible!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-rightcol{display:contents!important} .eventro-shop-page .wrap .bandline.har-bredde .bl-preview{ grid-column:1/-1!important;grid-row:4!important; width:100%!important;margin:0!important;padding-bottom:0!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-hand{ grid-column:2!important;grid-row:1/4!important; width:96px!important;height:112px!important;min-height:112px!important; flex:none!important;align-self:start!important;border-radius:9px!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-hand:not(.bl-hand-cover) .bl-hand-inner{ left:calc(50% + 28px)!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-hand.bl-hand-cover{ width:96px!important;height:auto!important;min-height:0!important;aspect-ratio:1016/611!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-boxes{ display:contents!important;margin:0!important;padding:0!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-col{ grid-column:1!important;flex:0 0 auto!important; width:100%!important;min-width:0!important;margin:0!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-col.bl-farge{grid-row:1!important} .eventro-shop-page .wrap .bandline.har-bredde .bl-col:has(.bl-antall){grid-row:2!important} .eventro-shop-page .wrap .bandline.har-bredde .bl-col:has(.bl-trykk-wrap), .eventro-shop-page .wrap .bandline.har-bredde .bl-col:has(.bl-cta){grid-row:3!important} .eventro-shop-page .wrap .bandline.har-bredde .bl-flere-btn{ grid-column:1/-1!important;grid-row:5!important;width:100%!important;min-height:34px!important; } .eventro-shop-page .wrap .bandline.har-bredde :is(.bl-farge-vis,.bl-antsel,.bl-trykk,.bl-cta){ width:100%!important;min-width:0!important;height:34px!important;box-sizing:border-box!important; } /* L547: fargepaletten holdes innenfor skjermen i mobil hoeykant. Popoveren var forankret til hoyre kant av farge-kolonnen (right:0). Kolonnen er ca. 216 px bred og ligger midt paa raden, mens popoveren er inntil 330 px bred - differansen falt utenfor venstre skjermkant, og 4-6 av fargene var uklikkbare (maalt paa 320 / 360 / 390 / 414 px). Naar paletten er aapen gjoeres kolonnen position:static, slik at popoveren forankres til selve baandlinjen og kan spenne hele raden. Hintpilen hoerer til den lukkede tilstanden og skjules imens. */ .eventro-shop-page .wrap .bandline.har-bredde .bl-col.bl-farge:has(> .bl-farge-pop2.open){ position:static!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-col.bl-farge:has(> .bl-farge-pop2.open) > .bl-arrow{ display:none!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-farge-pop2{ left:0!important;right:0!important;width:auto!important; max-width:min(420px,100%)!important;margin-left:auto!important;margin-right:auto!important; transform-origin:bottom center!important; } .eventro-shop-page .wrap .bandline.har-bredde .bl-move{display:none!important} .eventro-shop-page .wrap .bandline.har-bredde .bl-close{right:-7px!important;top:-9px!important} } /* L546: Overskriften senkes én visuell tekstlinje på PC, mens produktkortene beholder L545-posisjonen. Hele «Bestill og design» bruker blå aksent. */ @media(min-width:761px){ .eventro-shop-page .page-hero .masthead{ transform:translateY(32px); } } /* L549: Samme jevne klebekant i designmodulen som i ordrevisningen. tyvek-designer-frame.js setter klassen kun for Tyvek artikkel 001. */ #resultArea.as-modal #bigBand.tyvek-designer-frame>.zone-left{ position:relative!important; box-sizing:border-box!important; border-left:0!important; border-bottom:0!important; } #resultArea.as-modal #bigBand.tyvek-designer-frame>.zone-left::after{ content:""; position:absolute; left:2px; right:1px; top:3px; bottom:3px; box-sizing:border-box; border-left:1px solid rgba(0,0,0,.74); border-bottom:1px solid rgba(0,0,0,.74); pointer-events:none; z-index:8; } /* ============================================================ NyDesignerModul 2 — rolig start og flytende hurtigverktøy ============================================================ */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ .designer-quick-dock{position:relative;z-index:1010;width:min(720px,calc(100% - 24px));margin:26px auto 4px} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-start-shell{ --designer-tool-scale:1; --designer-tool-lift:0px; position:relative; z-index:1010; width:min(430px,calc(100% - 24px)); height:94px; margin:0 auto; display:grid; place-items:center; transform:translateY(var(--designer-tool-lift)) scale(var(--designer-tool-scale)); transform-origin:50% 0; transition:transform .18s ease; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel{display:none;margin:8px auto 0;width:100%} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.designer-tool-panel-open .designer-quick-panel{display:block} #resultArea.as-modal .designer-legacy-add-text{display:none!important} #resultArea.as-modal:not(.designer-intro):not(.designer-quick-open) .designer-start-shell{ display:none; } #resultArea.as-modal .designer-start-button{ position:absolute; z-index:2; width:88px; height:88px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:#04a9fc; color:#fff; font:700 16px "Sora",Arial,sans-serif; box-shadow:0 10px 25px rgba(0,119,184,.24),0 0 0 0 rgba(4,169,252,.38); animation:designerStartPulse 1.65s ease-out infinite; transition:width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1),border-radius .34s ease,opacity .18s ease,transform .34s cubic-bezier(.2,.8,.2,1); } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-quick-tools{ position:absolute; z-index:3; inset:0; padding:9px 11px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; background:#fff; border:1px solid #cbdce5; border-radius:13px; box-shadow:0 14px 28px rgba(25,60,79,.20); opacity:0; visibility:hidden; transform:scale(.22); transform-origin:center; transition:opacity .18s ease,visibility 0s linear .34s,transform .36s cubic-bezier(.16,.9,.25,1.08); } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-start-shell.is-open .designer-start-button{ width:100%; height:100%; border-radius:13px; opacity:0; transform:scale(.94); animation:none; pointer-events:none; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-start-shell.is-open .designer-quick-tools{ opacity:1; visibility:visible; transform:scale(1); transition-delay:.08s,0s,0s; } #resultArea.as-modal .designer-quick-tool{ min-width:0; min-height:72px; padding:7px 5px; border:0; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#eef8fd; color:#25485e; font:700 11px "Sora",Arial,sans-serif; transition:background .15s ease,color .15s ease,transform .15s ease; } #resultArea.as-modal .designer-quick-tool:hover, #resultArea.as-modal .designer-quick-tool:focus-visible{ background:#dff3fc; color:#047fb9; transform:translateY(-1px); } #resultArea.as-modal .designer-quick-tool svg{ width:25px; height:25px; fill:none; stroke:#04a9fc; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #resultArea.as-modal .designer-tool-text{ width:25px; height:25px; display:grid; place-items:center; color:#04a9fc; font:800 24px Georgia,serif; line-height:1; } /* Førsteinntrykket viser bare båndet og inngangen til verktøyene. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-intro #designSize, #resultArea.as-modal.designer-intro #designTools, #resultArea.as-modal.designer-intro #designZoomBar, #resultArea.as-modal.designer-intro #step4hint, #resultArea.as-modal.designer-intro #edFoot{ display:none!important; } #resultArea.as-modal.designer-intro>.body{ padding-bottom:34px!important; } /* Etter Start beholdes hurtigboksen. De gamle hovedboksene er fortsatt skjult frem til kunden faktisk velger et verktøy. */ #resultArea.as-modal.designer-quick-open:not(.designer-tool-panel-open) #designTools, #resultArea.as-modal.designer-quick-open:not(.designer-tool-panel-open) #designZoomBar{ display:none!important; } #resultArea.as-modal.designer-quick-open #designSize{ display:none!important; } /* Vis bare den delen av eksisterende innmat som kunden ba om. */ #resultArea.as-modal.designer-tool-panel-open .edit-cols{ grid-template-columns:minmax(0,1fr)!important; max-width:720px; margin:8px auto 0!important; } #resultArea.as-modal.designer-tool-panel-open #designTools{display:none!important} #resultArea.as-modal .designer-quick-panel #textCtrls, #resultArea.as-modal .designer-quick-panel #logoFiler{ margin:0!important; padding:11px 13px!important; background:#fff!important; border:1px solid #cbdce5!important; border-radius:12px!important; box-shadow:0 12px 26px rgba(25,60,79,.17)!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-row, #resultArea.as-modal .designer-quick-panel #textCtrls .font-row{ display:grid!important; grid-template-columns:minmax(170px,1.5fr) minmax(150px,1fr) auto auto!important; gap:10px!important; align-items:end!important; margin:0!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-row{display:contents!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-col{grid-column:1!important;grid-row:1!important} #resultArea.as-modal .designer-quick-panel #textCtrls .font-row{display:contents!important} #resultArea.as-modal .designer-quick-panel #textCtrls .font-col{grid-column:2!important;grid-row:1!important} #resultArea.as-modal .designer-quick-panel #textCtrls .size-col{grid-column:3!important;grid-row:1!important} #resultArea.as-modal .designer-quick-panel #textCtrls .style-col{grid-column:4!important;grid-row:1!important} #resultArea.as-modal .designer-quick-panel #textCtrls .farge-col{grid-column:1/-1!important;grid-row:2!important;margin-top:8px!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls{display:grid!important;grid-template-columns:minmax(170px,1.5fr) minmax(150px,1fr) auto auto!important;gap:0 10px!important;align-items:end!important} #resultArea.as-modal .designer-quick-panel #textCtrls input, #resultArea.as-modal .designer-quick-panel #textCtrls select{height:38px!important;min-height:38px!important;width:100%!important;max-width:none!important} #resultArea.as-modal .designer-quick-panel #textCtrls .stylebtns{height:38px;display:flex;gap:4px} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls .stylebtns button{width:36px;height:38px;padding:0;font-size:17px;border-radius:7px} #resultArea.as-modal .designer-quick-panel #textCtrls .lbl{font-size:10px!important;margin-bottom:3px!important;color:#5b7086!important} #resultArea.as-modal.designer-tool-panel-open .edit-left, #resultArea.as-modal.designer-tool-panel-open .edit-right, #resultArea.as-modal.designer-tool-panel-open .edit-simple{ display:none!important; } #resultArea.as-modal[data-designer-quick-mode="text"] .edit-left, #resultArea.as-modal[data-designer-quick-mode="color"] .edit-left, #resultArea.as-modal[data-designer-quick-mode="image"] .edit-right{ display:flex!important; } #resultArea.as-modal[data-designer-quick-mode="draw"] #designTools .edit-cols{ display:none!important; } #resultArea.as-modal[data-designer-quick-mode="draw"] #designZoomBar{ display:flex!important; } #resultArea.as-modal[data-designer-quick-mode="image"] .edit-right>.tgrp, #resultArea.as-modal[data-designer-quick-mode="image"] .edit-right>.band-helpers{ display:none!important; } @keyframes designerStartPulse{ 0%{box-shadow:0 10px 25px rgba(0,119,184,.24),0 0 0 0 rgba(4,169,252,.38)} 72%{box-shadow:0 10px 25px rgba(0,119,184,.24),0 0 0 17px rgba(4,169,252,0)} 100%{box-shadow:0 10px 25px rgba(0,119,184,.24),0 0 0 0 rgba(4,169,252,0)} } @media(max-width:720px){ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-quick-dock.is-mobile-dock{ position:fixed; z-index:2147482500; width:min(690px,calc(100vw - 14px)); margin:0; transform-origin:50% 100%; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-start-shell{ width:min(350px,calc(100% - 12px)); height:78px; margin-top:18px; } #resultArea.as-modal .designer-start-button{width:76px;height:76px;font-size:14px} #resultArea.as-modal .designer-quick-tool{min-height:64px;padding:5px 2px;font-size:10px;border-radius:7px} #resultArea.as-modal .designer-quick-tool svg, #resultArea.as-modal .designer-tool-text{width:22px;height:22px} #resultArea.as-modal .designer-tool-text{font-size:21px} } /* NyDesignerModul 20 – scrollbar overtar ved minimumsstørrelse/skjermkant. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #logoFiler, #resultArea.as-modal .designer-quick-panel .designer-draw-object-list{ scrollbar-width:thin; scrollbar-color:var(--eventro-blue,#08a9ee) #edf3f6; } #resultArea.as-modal .designer-quick-panel #logoFiler::-webkit-scrollbar, #resultArea.as-modal .designer-quick-panel .designer-draw-object-list::-webkit-scrollbar{width:7px} #resultArea.as-modal .designer-quick-panel #logoFiler::-webkit-scrollbar-track, #resultArea.as-modal .designer-quick-panel .designer-draw-object-list::-webkit-scrollbar-track{background:#edf3f6;border-radius:8px} #resultArea.as-modal .designer-quick-panel #logoFiler::-webkit-scrollbar-thumb, #resultArea.as-modal .designer-quick-panel .designer-draw-object-list::-webkit-scrollbar-thumb{background:var(--eventro-blue,#08a9ee);border-radius:8px} @media(prefers-reduced-motion:reduce){ #resultArea.as-modal .designer-start-button{animation:none} #resultArea.as-modal .designer-start-button, #resultArea.as-modal .designer-quick-tools, #resultArea.as-modal .designer-start-shell{transition:none} } .rotmsg[data-enabled="false"]{display:none!important} /* ============================================================ NyDesignerModul 4 — kompakt verktøydock, fargebrikker og panelanimasjon ============================================================ */ #resultArea.as-modal .designer-quick-tool{min-height:52px;padding:4px 3px;gap:2px;border-radius:7px;font-size:9px} #resultArea.as-modal .designer-quick-tool svg, #resultArea.as-modal .designer-tool-text{width:20px;height:20px} #resultArea.as-modal .designer-tool-text{font-size:19px} #resultArea.as-modal .designer-layout-tool{background:#edf7f1;color:#24543a} #resultArea.as-modal .designer-layout-tool svg{stroke:#13985b} #resultArea.as-modal .designer-layout-tool:hover,#resultArea.as-modal .designer-layout-tool:focus-visible{background:#def3e7;color:#0c7542} #resultArea.as-modal .designer-quick-panel.quick-panel-forming{ animation:designerQuickPanelForm 3.4s cubic-bezier(.22,.72,.22,1) both; pointer-events:none; } @keyframes designerQuickPanelForm{ 0%{opacity:.38;transform:translateY(-72px) scaleX(.09)} 46%{opacity:1;transform:translateY(0) scaleX(.09)} 52%{opacity:1;transform:translateY(0) scaleX(.09)} 100%{opacity:1;transform:translateY(0) scaleX(1)} } @keyframes designerQuickPanelContent{ 0%,58%{opacity:0} 100%{opacity:1} } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls .stylebtns button{ width:32px!important; font-size:13px!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #inkSelectText{display:none!important} #resultArea.as-modal .designer-text-swatches{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:28px} #resultArea.as-modal .designer-text-swatch{ width:24px;height:24px;min-width:24px;padding:0;border:1px solid rgba(17,45,63,.34);border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:transform .14s ease,box-shadow .14s ease; } #resultArea.as-modal .designer-text-swatch:hover{transform:translateY(-1px) scale(1.06)} #resultArea.as-modal .designer-text-swatch.is-selected{box-shadow:0 0 0 3px #fff,0 0 0 5px #04a9fc,inset 0 0 0 1px rgba(255,255,255,.28)} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal[data-designer-quick-mode="color"] #textCtrls :is(.tekst-col,.font-col,.size-col,.style-col){display:none!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal[data-designer-quick-mode="color"] #textCtrls{grid-template-columns:1fr!important} #resultArea.as-modal[data-designer-quick-mode="color"] #textCtrls .farge-col{grid-column:1!important;grid-row:1!important;margin-top:0!important} #resultArea.as-modal .design-zoom-toggle{ width:34px;height:18px;min-height:18px;margin:0 auto -1px;padding:0;border:1px solid #cbdce5;border-radius:0 0 10px 10px; display:grid;place-items:center;background:#fff;color:#31536a;font:800 15px/1 "Sora",Arial,sans-serif;box-shadow:0 4px 9px rgba(25,60,79,.12);position:relative;z-index:5; } #resultArea.as-modal .design-zoom-toggle.is-expanded{border-radius:10px 10px 0 0} #resultArea.as-modal #designZoomBar{ display:flex!important; max-height:0!important; margin-top:0!important; margin-bottom:0!important; opacity:0; overflow:hidden; transform:scaleY(0); transform-origin:50% 0; transition:max-height 1.45s cubic-bezier(.2,.75,.2,1),opacity .55s ease,transform 1.15s cubic-bezier(.2,.75,.2,1),margin .7s ease; } #resultArea.as-modal #designZoomBar.is-expanded{ max-height:260px!important; margin-top:5px!important; margin-bottom:4px!important; opacity:1; overflow:visible; transform:scaleY(1); } #resultArea.as-modal.designer-intro #designZoomBar, #resultArea.as-modal.designer-quick-open:not(.designer-tool-panel-open) #designZoomBar{display:flex!important} @media(max-width:720px){ #resultArea.as-modal .designer-quick-tool{min-height:47px} #resultArea.as-modal .designer-quick-panel #textCtrls .stylebtns button{width:29px!important;font-size:12px!important} } /* NyDesignerModul 10 – endelige overstyringer. Skal ligge sist fordi eldre leveringsseksjoner nedenfor i historikken ellers kan vinne i kaskaden. */ @keyframes designerQuickPanelSingleDrop{ 0%{opacity:1;border-radius:4px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(var(--quick-panel-start-scale-y))} 38.5%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 100%{opacity:1;border-radius:12px;transform:translateY(0) scaleX(1) scaleY(1)} } @keyframes designerQuickPanelContent{0%,45%{opacity:0}100%{opacity:1}} /* NyDesignerModul 11 – pilposisjon må vinne over L10-sluttseksjonen. */ /* ============================================================ NyDesignerModul 13 — kompakt filliste, hurtig panelbytte og A/B ============================================================ */ /* NyDesignerModul 14 – autoritativ animasjonshastighet */ /* NyDesignerModul 15 – aktivt panel rister; tekstpluss uten knappflate */ @keyframes designerQuickAlreadyOpen{ 0%,100%{transform:translateX(0)} 18%{transform:translateX(-7px) rotate(-.25deg)} 36%{transform:translateX(6px) rotate(.2deg)} 54%{transform:translateX(-4px) rotate(-.12deg)} 72%{transform:translateX(3px) rotate(.08deg)} 88%{transform:translateX(-1px)} } #resultArea.as-modal .designer-add-text-block:hover, #resultArea.as-modal .designer-add-text-block:focus-visible{ background:transparent!important; color:var(--eventro-blue-hover,#0698d7)!important; transform:scale(1.13)!important; outline:none!important; } @media(prefers-reduced-motion:reduce){#resultArea.as-modal .designer-quick-panel.quick-panel-already-open{animation:none!important}} /* NyDesignerModul 14 – raskere vendingsanimasjon og ny tekstblokk */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-col{position:relative!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-col #tTekst{padding-right:38px!important} #resultArea.as-modal .designer-add-text-block{ position:absolute!important; z-index:3!important; right:5px!important; bottom:5px!important; width:28px!important; min-width:28px!important; height:28px!important; min-height:28px!important; padding:0!important; display:grid!important; place-items:center!important; border:1px solid var(--eventro-blue,#08a9ee)!important; border-radius:7px!important; background:var(--eventro-blue,#08a9ee)!important; color:#fff!important; font:800 20px/1 Arial,sans-serif!important; box-shadow:none!important; } #resultArea.as-modal .designer-add-text-block:hover, #resultArea.as-modal .designer-add-text-block:focus-visible{background:var(--eventro-blue-hover,#0698d7)!important} /* ============================================================ NyDesignerModul 11 — lik panelåpning og gjenopprettet filkontroll-grid ============================================================ */ /* styles.css har en eldre curtain-animasjon bare på tekstkontrollen. Inne i hurtigpanelet skal tekst bruke samme ene animasjon som bildeopplasting. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls:not(.hidden){ animation:none!important; } /* logo-grid hadde opprinnelig alle layoutreglene under .edit-cols. Når selve #logoFiler flyttes til hurtigpanelet, må den samme trekolonnelogikken følge med slik at overskrifter, filnavn, fargevalg og modus står i riktig kolonne. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .logo-grid{ display:grid!important; /* [FAMILIE:SILKETRYKK] Fargekolonnen eier bredden. Anders 29.10.2026: «Spre fargeboksene utover saa vi faar brukt lengden bedre ... Vil helst ha alle paa max to linjer.» Med 180 px til raadighet kom det 8 ruter paa hver linje, og 30 farger ble fire linjer. Filnavnet og Modus-kolonnen ga fra seg plassen: navnet kappes uansett med ellipse, og Modus holder bare en A/B-bryter paa 40 px. */ grid-template-columns:minmax(104px,.55fr) minmax(300px,2.6fr) minmax(92px,.5fr)!important; gap:7px 12px!important; align-items:center!important; width:100%!important; margin:0!important; padding:10px 14px 12px!important; box-sizing:border-box!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .logo-grid:empty{display:none!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-hdr{ padding:0 0 6px!important; margin:0!important; border-bottom:1px solid var(--eventro-line,#dce4ea)!important; color:var(--eventro-muted,#687984)!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-navn{ min-width:0!important; overflow:hidden!important; color:var(--eventro-muted,#687984)!important; font-size:12px!important; font-weight:600!important; white-space:nowrap!important; text-overflow:ellipsis!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-farge .inksel{ width:100%!important; min-width:0!important; min-height:34px!important; height:34px!important; padding:4px 8px!important; font-size:11.5px!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr{display:flex!important;align-items:center!important;min-width:0!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .fil-thr{width:100%!important;min-width:80px!important;margin:0!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-sep{grid-column:1/-1!important;border-top:1px solid var(--eventro-line,#dce4ea)!important;margin:3px 0!important} @media(max-width:720px){ #resultArea.as-modal .designer-quick-panel .logo-grid{ grid-template-columns:minmax(86px,.8fr) minmax(130px,1.2fr) minmax(118px,1fr)!important; gap:5px 7px!important; padding:8px!important; } } /* ============================================================ NyDesignerModul 8 — fast arbeidsflate, énradspalett og Eventro-stil ============================================================ */ /* Disse lokale variablene speiler eventro-style-polish.css. Dermed beholder designeren riktig stil også når modalinnhold flyttes til et topplag. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv){ --eventro-navy:#183247; --eventro-blue:#08a9ee; --eventro-blue-hover:#0698d7; --eventro-page:#f6f9fb; --eventro-soft:#f3f8fb; --eventro-selected:#eef8fc; --eventro-muted:#687984; --eventro-line:#dce4ea; --eventro-field-line:#ccd8e0; --eventro-card-shadow:0 8px 24px rgba(24,50,71,.07); --eventro-focus:0 0 0 3px rgba(8,169,238,.13); color:var(--eventro-navy)!important; background:var(--eventro-page)!important; box-shadow:var(--eventro-card-shadow)!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(button,input,select,textarea){ font-family:"Sora",Arial,Helvetica,sans-serif; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(.stage,.designer-quick-tools,.designer-quick-panel,#designZoomBar){ border-color:var(--eventro-line)!important; box-shadow:var(--eventro-card-shadow)!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(.designer-quick-tool,.design-zoom-toggle,.designer-panel-close,.designer-upload-button,.tbtn,.zoom-point,.zoom-lbl){ border-color:var(--eventro-field-line)!important; border-radius:8px!important; color:var(--eventro-navy)!important; box-shadow:none!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(.designer-quick-tool,.designer-upload-button){ background:var(--eventro-selected)!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(.designer-quick-tool,.designer-upload-button):hover{ border-color:var(--eventro-blue)!important; background:#fff!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) :is(button,input,select,textarea):focus-visible{ outline:0!important; box-shadow:var(--eventro-focus)!important; } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #ferdigBtn{ background:var(--eventro-blue)!important; border-color:var(--eventro-blue)!important; border-radius:8px!important; color:#fff!important; box-shadow:none!important; } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #ferdigBtn:hover{ background:var(--eventro-blue-hover)!important; border-color:var(--eventro-blue-hover)!important; } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #taBortDesignBtn{ background:#fff!important; border:1px solid var(--eventro-field-line)!important; border-radius:8px!important; color:var(--eventro-navy)!important; box-shadow:none!important; } /* Antallet kolonner settes fra de faktiske valgene. Alle tekstfargene får derfor alltid én rad, mens rutene automatisk krymper når listen blir lang. */ #resultArea.as-modal .designer-text-swatches{ display:grid!important; grid-template-columns:repeat(var(--designer-palette-count,1),minmax(0,1fr))!important; align-items:center!important; width:100%!important; max-width:100%!important; gap:clamp(2px,.3vw,5px)!important; flex-wrap:nowrap!important; overflow:visible!important; } #resultArea.as-modal .designer-text-swatch{ width:100%!important; min-width:0!important; max-width:20px!important; height:auto!important; aspect-ratio:1/1; justify-self:center; border-radius:4px!important; padding:0!important; } @media(min-width:721px){ /* Modalhøyden er ferdig fra første bilde, så verktøy ikke endrer rammen. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv){ top:2vh!important; bottom:2vh!important; height:96vh!important; max-height:96vh!important; overflow:hidden!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv)>.body{ height:calc(96vh - 58px)!important; min-height:0!important; overflow:hidden!important; } /* Ligger tett under den reserverte avansertlinjen uten overlapping. */ } @media(max-width:720px){ #resultArea.as-modal .designer-text-swatch{max-width:16px!important;border-radius:3px!important} /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open #edFoot{ background:rgba(246,249,251,.98)!important; border-color:var(--eventro-line)!important; box-shadow:0 -4px 14px rgba(24,50,71,.07)!important; } } /* ============================================================ NyDesignerModul 9 — riktig lagdeling, komplett markeringsramme og fast footer ============================================================ */ /* Stoffet er et overflatesjikt på selve båndfargen, men skal aldri matte ned designobjekter, markeringsrammer eller håndtak. */ #resultArea.as-modal.designer-woven-surface #bigBand.rekt::after{ z-index:0!important; } #resultArea.as-modal.designer-woven-surface #bigBand.rekt>.zone-left, #resultArea.as-modal.designer-woven-surface #bigBand.rekt>.pboard{ position:relative; z-index:2; } #resultArea.as-modal.designer-woven-surface #bigBand.rekt>.rekt-guider{ z-index:3; } #resultArea.as-modal.designer-woven-surface #bigBand.rekt>.pboard{ overflow:visible!important; } /* Objektet ligger fortsatt i designclip og trykkes bare innenfor båndet. Den synlige rammen tegnes på hset-laget, som ikke har clip-path, slik at samtlige fire turkise sider følger objektet også utenfor båndhøyden. */ #resultArea.as-modal #bigBand.band.edit .hset.solo{ box-sizing:border-box; border:3px solid #10d9e8; box-shadow:0 0 0 1px rgba(16,217,232,.28); z-index:41; } #resultArea.as-modal #bigBand.band.edit .designclip .obj.sel.solo{ outline:0!important; box-shadow:none!important; } #resultArea.as-modal #bigBand.band.edit :is(.pboard,.hlayer,.hset){ overflow:visible!important; } /* Handlingsknappene eies av modalens kanter, ikke av innholdets flyt. */ @media(min-width:721px){ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv) #edFoot{ position:absolute!important; z-index:1200!important; right:12px!important; bottom:12px!important; left:auto!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; display:flex!important; justify-content:flex-end!important; align-items:center!important; gap:8px!important; background:transparent!important; border:0!important; box-shadow:none!important; } } @media(max-width:720px){ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv) #edFoot{ position:fixed!important; z-index:2147482600!important; left:0!important; right:0!important; bottom:0!important; width:100vw!important; margin:0!important; } } /* ============================================================ NyDesignerModul 10 — samlet arbeidsstasjon og avansertlinje over båndet ============================================================ */ @media(min-width:721px){ /* Avansertlinjen har en fast, reservert sone over båndet. Åpning og lukking flytter derfor verken båndet eller hurtigverktøyene. */ /* Én kompakt arbeidsstasjon tett under båndet. */ } /* Kortere fall, samme omtrentlige sideutvidelseshastighet som før: 0,25 s ned + 0,40 s ut til sidene. */ @keyframes designerQuickPanelSingleDrop{ 0%{opacity:1;border-radius:4px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(var(--quick-panel-start-scale-y))} 38.5%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 100%{opacity:1;border-radius:12px;transform:translateY(0) scaleX(1) scaleY(1)} } @keyframes designerQuickPanelContent{ 0%,45%{opacity:0} 100%{opacity:1} } /* ============================================================ NyDesignerModul 7 — kompakt og ryddig mobilgeometri ============================================================ */ @keyframes designerQuickPanelSingleDrop{ 0%{opacity:1;border-radius:4px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(var(--quick-panel-start-scale-y))} 50%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 100%{opacity:1;border-radius:12px;transform:translateY(0) scaleX(1) scaleY(1)} } @keyframes designerQuickPanelContent{ 0%,62%{opacity:0} 100%{opacity:1} } @media(max-width:720px){ /* Små områdeetiketter som holder seg innenfor sine tre felt. */ #resultArea.as-modal #bigBand .rekt-guider .uklamme-tekst{ bottom:8px!important; max-width:94%!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:7px!important; line-height:1.05!important; letter-spacing:-.15px!important; } #resultArea.as-modal #bigBand .rekt-guider .uklamme.midt .uklamme-tekst{font-size:7.5px!important} #resultArea.as-modal #bigBand .rekt-guider :is(.uklamme.venstre,.uklamme.hoyre) .uklamme-tekst{ max-width:none!important; overflow:visible!important; text-overflow:clip!important; font-size:5.5px!important; } /* Hele avansertlinjen beholdes på én kompakt rad i stedet for desktop-wrapping. */ #resultArea.as-modal .design-zoom-overlay-host #designZoomBar{ top:18px!important; left:50%!important; right:auto!important; width:max-content!important; max-width:none!important; transform:translateX(-50%) scaleY(0)!important; transform-origin:50% 0!important; } #resultArea.as-modal .design-zoom-overlay-host #designZoomBar.is-expanded{ transform:translateX(-50%) scaleY(1)!important; } /* Fullbredde handling nederst; ingen store knapper midt i arbeidsflaten. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open #edFoot{ position:fixed!important; z-index:2147482600!important; left:0!important; right:0!important; bottom:0!important; height:66px!important; margin:0!important; padding:8px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important; gap:7px!important; align-items:stretch!important; background:rgba(246,251,254,.97)!important; border-top:1px solid #cbdce5!important; box-shadow:0 -5px 16px rgba(25,60,79,.12)!important; } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open #edFoot>button{ width:100%!important; min-width:0!important; min-height:48px!important; height:48px!important; margin:0!important; padding:4px 7px!important; font-size:10px!important; line-height:1.15!important; white-space:normal!important; } /* Hurtigverktøyet og innholdspanelet får plass over bunnhandlingen. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel{width:100%!important;max-width:calc(100vw - 12px)!important} #resultArea.as-modal .designer-quick-panel #textCtrls{ grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) 78px!important; padding:10px 8px 8px!important; gap:7px!important; } #resultArea.as-modal .designer-text-swatches{gap:5px!important} #resultArea.as-modal .designer-text-swatch{width:21px!important;height:21px!important;min-width:21px!important} } /* ============================================================ NyDesignerModul 64 — MOBIL: vannmerke og tekstpanel Alle regler i denne blokken er bevisst avgrenset til mobil. ============================================================ */ @media(max-width:720px){ /* Vannmerket følger båndhøyden, ikke båndbredden. start-launcher måler den faktiske ordlengden og setter skalaen til nøyaktig 70 % av pboard-høyden. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #bigBand .pboard .brand{ right:2px!important; font-size:10px!important; line-height:1!important; transform:translateY(-50%) rotate(-90deg) scale(var(--mobile-brand-scale,.4))!important; transform-origin:center center!important; } /* Tre rene mobilrader: tekst / font+størrelse+stil / farge. */ #resultArea.as-modal .designer-quick-panel #textCtrls{ grid-template-columns:minmax(0,1fr) 78px auto!important; column-gap:7px!important; row-gap:7px!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .tekst-col{ grid-column:1/-1!important; grid-row:1!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .font-col{ grid-column:1!important; grid-row:2!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .size-col{ grid-column:2!important; grid-row:2!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .style-col{ grid-column:3!important; grid-row:2!important; } #resultArea.as-modal .designer-quick-panel #textCtrls .farge-col{ grid-column:1/-1!important; grid-row:3!important; width:100%!important; margin-top:1px!important; } } /* ============================================================ NyDesignerModul 5 — drypp-animasjon, flytende avansertpanel og mobilflate ============================================================ */ #resultArea.as-modal .stage{ padding:4px 10px 2px!important; margin-bottom:0!important; } #resultArea.as-modal .design-zoom-wrap{margin-bottom:0!important;padding-bottom:0!important} #resultArea.as-modal .design-zoom-overlay-host{ position:relative; z-index:1060; width:100%; height:0; overflow:visible; } #resultArea.as-modal .design-zoom-overlay-host .design-zoom-toggle{ position:absolute!important; left:50%; top:0; margin:0!important; transform:translateX(-50%); } #resultArea.as-modal .design-zoom-overlay-host #designZoomBar{ position:absolute!important; top:22px; left:0; right:0; width:100%; z-index:1055; margin:0!important; } #resultArea.as-modal .design-zoom-overlay-host #designZoomBar.is-expanded{ margin:0!important; } /* Plassen er fast reservert. Vis/skjul av avansertpanelet flytter derfor ingenting. */ @keyframes designerQuickDrip{ 0%{height:12px;opacity:.85;transform:translateX(-50%) scale(.72)} 12%{height:18px;opacity:1;transform:translateX(-50%) scale(1)} 47%{height:92px;opacity:1;transform:translateX(-50%) scale(1)} 56%{height:92px;opacity:0;transform:translateX(-50%) scale(1)} 100%{height:92px;opacity:0;transform:translateX(-50%) scale(1)} } @keyframes designerQuickPanelDripForm{ 0%,42%{opacity:0;transform:scaleX(.075) scaleY(.04)} 48%{opacity:1;transform:scaleX(.075) scaleY(1)} 55%{opacity:1;transform:scaleX(.075) scaleY(1)} 100%{opacity:1;transform:scaleX(1) scaleY(1)} } @media(max-width:720px){ #resultArea.as-modal:not(.kal-aktiv){ position:fixed!important; inset:0!important; width:100vw!important; max-width:none!important; height:100dvh!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; overflow:hidden!important; } #resultArea.as-modal:not(.kal-aktiv)>.body{ position:relative; height:calc(100dvh - 58px)!important; max-height:none!important; overflow:hidden!important; } #resultArea.as-modal .stage{padding:3px 5px 1px!important} #resultArea.as-modal.designer-intro .designer-quick-dock.is-mobile-dock{ width:min(270px,calc(100vw - 20px)); transform-origin:50% 50%; } } @media(prefers-reduced-motion:reduce){ #resultArea.as-modal .designer-quick-panel.quick-panel-forming{animation:none} } /* ============================================================ NyDesignerModul 6 — sammenhengende paneldrypp, opplasting og vevstruktur ============================================================ */ #resultArea.as-modal.designer-intro>.body{min-height:560px!important} /* Panelet selv er dråpen. Det starter som en liten firkant nøyaktig under valgt knapp, strekkes loddrett og åpnes deretter sideveis. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel{ --quick-panel-origin:50%; --quick-panel-start-y:-10px; --quick-panel-start-x:.03; --quick-panel-start-scale-y:.1; position:relative; box-sizing:border-box; min-height:54px; overflow:visible; border:1px solid #cbdce5; border-radius:12px; background:#fff; box-shadow:0 12px 26px rgba(25,60,79,.17); transform-origin:var(--quick-panel-origin) 0; } #resultArea.as-modal .designer-quick-panel.quick-panel-forming{ overflow:hidden; animation:designerQuickPanelSingleDrop 3.4s cubic-bezier(.22,.72,.22,1) both; } #resultArea.as-modal .designer-quick-panel.quick-panel-forming>*{ animation:designerQuickPanelContent 3.4s ease both; } @keyframes designerQuickPanelSingleDrop{ 0%{opacity:1;border-radius:4px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(var(--quick-panel-start-scale-y))} 12%{opacity:1;border-radius:5px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(.18)} 48%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 55%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 100%{opacity:1;border-radius:12px;transform:translateY(0) scaleX(1) scaleY(1)} } #resultArea.as-modal .designer-quick-panel #textCtrls, #resultArea.as-modal .designer-quick-panel #logoFiler{ border:0!important; box-shadow:none!important; } #resultArea.as-modal .designer-panel-close{ position:absolute; z-index:20; top:4px; right:5px; width:18px; height:18px; min-width:18px; min-height:18px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:#edf3f6; color:#536a78; font:700 13px/1 Arial,sans-serif; box-shadow:0 1px 3px rgba(20,51,70,.14); } #resultArea.as-modal .designer-panel-close:hover{background:#dcebf2;color:#17384c} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-upload-prompt{ min-height:118px; padding:18px 34px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-upload-prompt[hidden]{display:none!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ /* [FAMILIE:INNLIMING] «Velg fil» staar alene fra 29.10.2026, da innlimingsknappen ble tatt bort. Den arver plassen de to delte: Anders ba om at den «kan vi lage stoerre». */ #resultArea.as-modal .designer-upload-button{ min-width:250px; min-height:78px; padding:14px 30px; border:1px dashed #61bff0; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:10px; background:#eef9ff; color:#12658f; font:700 15px "Sora",Arial,sans-serif; } #resultArea.as-modal .designer-upload-button:hover{background:#dff4ff;border-color:#04a9fc} /* [FAMILIE:INNLIMING] Raden hadde to knapper side om side fra 09.10 til 29.10.2026. Naa er det bare «Velg fil» igjen, og raden sentrerer den. */ #resultArea.as-modal .designer-upload-row{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:10px; width:100%; } /* Etiketten var to linjer saa lenge innlimingsknappen hadde «Ctrl+V» under navnet sitt. Med én linje skal den staa midtstilt, ikke venstrestilt. Regelen for span small og .designer-paste-button svg er fjernet sammen med knappen - ingen av dem hadde noe aa treffe lenger. */ #resultArea.as-modal .designer-upload-button span{ display:flex; align-items:center; line-height:1.25; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-upload-button svg{width:32px;height:32px;fill:none;stroke:#04a9fc;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-upload-prompt small{color:#6c8090;font-size:10px} /* [FAMILIE:FILSJEKK] Listen over filtypene vi tar imot staar rett under knappen. Den skal kunne leses, ikke bare anes: Anders kjoerer skjermen med hoey lysstyrke, og den lyseste graatonen forsvinner da helt for ham. */ #resultArea.as-modal .designer-upload-prompt small.designer-upload-typer{ color:#3f5a6e; font-weight:600; } /* [FAMILIE:FILSJEKK] Luft mellom filtypelinja og fillisten. Anders 29.10.2026: «Litt mer linjeskift-avstand mellom SVG gir best resultat og bolken under som starter med Opplastet fil(er).» Skillelinja flyttes ned sammen med luften, saa de to bolkene ikke klistrer seg sammen. */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler:not(:empty){border-top:1px solid #e4edf2!important;border-radius:0!important;margin-top:14px!important;padding-top:4px!important} /* Fin, tett vevtekstur kun på den visuelle båndflaten for artikkel 004. */ #resultArea.as-modal.designer-woven-surface #bigBand.rekt::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,rgba(15,25,32,.045) 1px 2px,transparent 2px 4px), repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,rgba(20,30,36,.035) 1px 2px,transparent 2px 3px); background-size:4px 3px,4px 3px; mix-blend-mode:soft-light; opacity:.72; } @media(max-width:720px){ #resultArea.as-modal.designer-intro>.body{min-height:0!important} #resultArea.as-modal.designer-intro .designer-quick-dock, #resultArea.as-modal.designer-quick-open .designer-quick-dock{margin-top:0!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-upload-prompt{min-height:104px;padding:15px 28px 12px} } @media(prefers-reduced-motion:reduce){ #resultArea.as-modal .designer-quick-panel.quick-panel-forming, #resultArea.as-modal .designer-quick-panel.quick-panel-forming>*{animation:none} } /* NyDesignerModul 10 – autoritativ sluttseksjon */ @media(min-width:721px){ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host{position:relative!important;width:100%!important;height:62px!important;margin:0!important;overflow:visible!important;z-index:1060!important} #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host #designZoomBar{position:absolute!important;left:0!important;right:0!important;top:0!important;width:100%!important;margin:0!important;transform:scaleY(0)!important;transform-origin:50% 100%!important} #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host #designZoomBar.is-expanded{transform:scaleY(1)!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel{width:min(810px,calc(100% - 24px))!important;margin-top:8px!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal .designer-quick-panel #textCtrls{padding:9px 12px 8px!important;row-gap:4px!important} #resultArea.as-modal .designer-quick-panel #textCtrls .farge-col{margin-top:2px!important} } @keyframes designerQuickPanelSingleDrop{ 0%{opacity:1;border-radius:4px;transform:translateY(var(--quick-panel-start-y)) scaleX(var(--quick-panel-start-x)) scaleY(var(--quick-panel-start-scale-y))} 38.5%{opacity:1;border-radius:7px;transform:translateY(0) scaleX(var(--quick-panel-start-x)) scaleY(1)} 100%{opacity:1;border-radius:12px;transform:translateY(0) scaleX(1) scaleY(1)} } @keyframes designerQuickPanelContent{0%,45%{opacity:0}100%{opacity:1}} /* NyDesignerModul 58 – diskret zoom/angre under båndet */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls{ position:absolute;right:auto;bottom:auto;z-index:1070;display:flex; align-items:center;gap:3px; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls button{ width:24px;height:24px;padding:0;border:1px solid #cbd8e5;border-radius:5px; background:#fff;color:#2d4255;font:800 15px/1 Arial,sans-serif; display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(24,45,65,.07); } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls .corner-zoom{ width:27px;border-color:transparent;background:transparent;box-shadow:none; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls .corner-zoom svg{ width:22px;height:22px;display:block;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls .corner-zoom.on-dark{ color:#fff;text-shadow:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)); } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls .corner-undo{ margin-left:3px;font-size:14px; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls button:hover:not(:disabled){ color:#079fe5;border-color:#86cbed;background:#f6fcff; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls .corner-zoom:hover:not(:disabled){ background:transparent;border-color:transparent; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls button:disabled{ opacity:.32;cursor:default;box-shadow:none; } @media(max-width:720px){ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls{right:auto;bottom:auto} #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .designer-corner-controls button{width:22px;height:22px} } /* NyDesignerModul 11 – endelig pilretning og plassering */ @media(min-width:721px){ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle{ top:auto!important;bottom:5px!important;transform:translateX(-50%)!important; } } /* ============================================================ [FAMILIE:PANELER] VERKTOEY-IKONET Anders 09.10: «jeg kan ikke gjemme det igjen, fordi pilen forsvinner bak panelet naar panelet er aapent.» MAALT: pila laa paa y=127 mens panelet dekket 88-146. Den var ikke borte - den laa UNDER panelet. Vertsstripa .design-zoom-overlay-host er 62 px hoey paa skrivebord, og panelet fyller 58 av dem naar det er aapent. Det finnes altsaa ingen ledig plass INNE i stripa naar panelet staar ute. Stripa staar der reservert til panelet; uten den ville baandet hoppet nedover hver gang panelet foldes ut. DERFOR LIGGER IKONET NEDE, RETT INNENFOR DEN HVITE BOKSENS OVERKANT: top:calc(100% + 6px) i hoeyre hjoerne. Vertsstripa slutter der boksen begynner, saa alt fra den kanten og nedover er ledig i BEGGE tilstander. MAALT: ikonet y 156..180 lukket OG aapen. Panelet slutter paa y=146, den hvite boksen begynner paa y=150. De 6 pikslene er Anders' oeye, ikke en regel: 09.10 satt det paa selve kanten, og han ba det ned to ganger - «3 pixler til takk, saa er vi der». Ingen .is-expanded-regel for plassering, og ingen --dzb-h: forrige loesning flyttet kontrollen ned under panelet og maatte maale panelhoeyden for aa vite hvor langt ned. Naar den ikke flytter seg, er det ingenting aa maale. KUN IKONET. Anders 10.10: «kun selve verktoeyikonet (spaker), ikke tekst, litt stoerre, og ikke som knapp.» Ord, flate, ramme og skygge er borte. Meningen ligger i aria-label; tilstanden leses av panelet selv. TREFFLATEN er stoerre enn ikonet: padding 0 8px 10px gir 40 x 34 px aa treffe paa, mens bare de 24 pikslene synes. Padding er lagt NEDOVER, inn i den hvite boksen - oppover ville trefflata lagt seg over panelet og stjaalet klikk fra knappene der. FARGEN #0698d7 er maalt til 3.13 mot sidens flate (#f6fcff) og 3.24 mot den hvite boksen. AA krever 3.0 for grafiske elementer, og ikonet staar over begge flatene. Husets #08a9ee maaler 2.56 / 2.65 og naar ikke kravet; #0698d7 er samme blaa ett hakk dypere og den letteste som klarer det. Paa MOBIL er alt dette av - der staar den nakne pila. */ @media(min-width:721px){ /* :not(.kal-aktiv):not(.opt-aktiv) staar her for VEKTSKYLD, ikke for aa velge noe: linje ~3448 setter color og border-radius paa alle verktoeyknapper med nettopp de vaktene, og uten dem taper vi mot den. MAALT: fargen ble rgb(24,50,71) i stedet for den vi ber om. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle{ width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; padding:0 8px 10px!important; display:inline-flex!important; align-items:flex-start!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; cursor:pointer; /* SAMME PLASS LUKKET SOM AAPEN - PAA BOKSENS OVERKANT */ left:auto!important; right:8px!important; top:calc(100% + 6px)!important; bottom:auto!important; transform:none!important; z-index:1080!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle .dzt-ikon{ /* Ikonet baerer husets «dette kan trykkes»-blaa. */ color:var(--eventro-blue-hover,#0698d7)!important; display:flex!important; align-items:center!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle .dzt-ikon svg{ width:24px!important;height:24px!important;display:block!important; fill:none!important;stroke:currentColor!important; stroke-width:1.8!important;stroke-linecap:round!important; stroke-linejoin:round!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle:hover .dzt-ikon{ color:var(--eventro-navy,#183247)!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle:hover{ background:transparent!important; border:0!important; box-shadow:none!important; } } @media(max-width:720px){ #resultArea.as-modal .design-zoom-overlay-host .design-zoom-toggle .dzt-ikon{display:none} } /* ============================================================ NyDesignerModul 12 — luftigere A/B-kontroll og høyere startpunkt ============================================================ */ #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr{ column-gap:16px!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .ab-wrap{ flex:0 0 auto!important; margin-right:2px!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .ab-lb{ margin-left:1px!important; } #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .fil-thr{ flex:1 1 auto!important; } @media(min-width:721px){ /* Start-knappen og boksen den blir til deler samme anker. Når ankeret løftes, forblir overgangen fysisk sammenhengende og begge ender på riktig høyde. */ #resultArea.as-modal.designer-intro .designer-quick-dock, #resultArea.as-modal.designer-quick-open .designer-quick-dock{ margin-top:14px!important; } } /* NyDesignerModul 13 – autoritativ sluttseksjon */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-prompt{min-height:112px!important;padding:24px 24px 8px!important;justify-content:flex-start!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-prompt small{margin-top:5px!important;transform:translateY(4px)!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #logoFiler{max-height:min(205px,28vh)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .logo-grid{gap:3px 10px!important;padding:6px 10px 8px!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-hdr{padding-bottom:3px!important;line-height:1.05!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .ab-toggle{gap:5px!important;min-height:26px!important} #resultArea.as-modal .designer-quick-panel.quick-panel-forming{animation-duration:.50s!important;animation-timing-function:linear!important} #resultArea.as-modal .designer-quick-panel.quick-panel-forming>*{animation-duration:.50s!important;animation-timing-function:linear!important} #resultArea.as-modal .designer-quick-panel.quick-panel-closing{overflow:hidden!important;pointer-events:none!important;animation:designerQuickPanelSingleDrop .32s linear reverse both!important} #resultArea.as-modal .designer-quick-panel.quick-panel-closing>*{animation:designerQuickPanelContent .32s linear reverse both!important} @media(max-width:720px){ #resultArea.as-modal .designer-quick-panel #logoFiler{max-height:min(178px,25vh)!important} #resultArea.as-modal .designer-quick-panel .logo-grid{gap:2px 6px!important;padding:5px 7px 7px!important} } @media(prefers-reduced-motion:reduce){ #resultArea.as-modal .designer-quick-panel.quick-panel-closing, #resultArea.as-modal .designer-quick-panel.quick-panel-closing>*{animation:none!important} } /* NyDesignerModul 14 – endelig autoritativ animasjonshastighet */ #resultArea.as-modal .designer-quick-panel.quick-panel-forming{animation-duration:.40s!important} #resultArea.as-modal .designer-quick-panel.quick-panel-forming>*{animation-duration:.40s!important} #resultArea.as-modal .designer-quick-panel.quick-panel-closing{animation-duration:.25s!important} #resultArea.as-modal .designer-quick-panel.quick-panel-closing>*{animation-duration:.25s!important} /* NyDesignerModul 15 – endelig autoritativ panelrist og tekstpluss */ #resultArea.as-modal .designer-quick-panel.quick-panel-already-open{animation:designerQuickAlreadyOpen .34s ease-in-out both!important} #resultArea.as-modal .designer-add-text-block{right:7px!important;bottom:6px!important;width:24px!important;min-width:24px!important;height:26px!important;min-height:26px!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--eventro-blue,#08a9ee)!important;font-size:23px!important;box-shadow:none!important} #resultArea.as-modal .designer-add-text-block:hover,#resultArea.as-modal .designer-add-text-block:focus-visible{background:transparent!important;color:var(--eventro-blue-hover,#0698d7)!important;transform:scale(1.13)!important;outline:none!important} /* NyDesignerModul 16 – fargepanel */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 12px;box-sizing:border-box} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-section{min-width:0;padding:9px 11px;border:1px solid var(--eventro-line,#dce4ea);border-radius:9px;background:var(--eventro-soft,#f3f8fb)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-section>strong{display:block;color:var(--eventro-navy,#183247);font-size:12px;margin-bottom:2px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-section>small{display:block;color:var(--eventro-muted,#687984);font-size:9.5px;margin-bottom:8px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-band-colors,#resultArea.as-modal .designer-print-colors{display:flex;align-items:center;flex-wrap:wrap;gap:6px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-band-colors{max-height:98px;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-gutter:stable} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-chip{width:25px;min-width:25px;height:25px;min-height:25px;padding:0;border:1px solid #9eacb7;border-radius:6px;background-position:center;background-size:cover;box-shadow:none;cursor:pointer} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-chip.is-selected{outline:2px solid var(--eventro-blue,#08a9ee);outline-offset:2px} /* [FAMILIE:SILKETRYKK] RUTENE UNDER EN OPPLASTET FIL ER MINDRE ENN I fargeverktoeyet. Anders 29.10.2026: «Gjoer fargeindikator-firkantene mindre.» Her staar 30 farger paa én bredde, ikke 21 i et eget panel. ink-logo-controls.js proevde aa sette 19 px i sin egen injiserte CSS, men den regelen har ingen ID foran seg og tapte for de 25 px over - derfor stod de der uten aa virke. Stoerrelsen eies herfra naa, og den doede regelen er fjernet derfra. */ #resultArea.as-modal .lg-palett-ruter .designer-color-chip{ width:18px;min-width:18px;height:18px;min-height:18px;border-radius:5px; } #resultArea.as-modal .lg-palett-ruter .designer-color-chip.is-selected{outline-width:2px;outline-offset:1px} #resultArea.as-modal .designer-ink-rule{margin:8px 0 0;padding:6px 8px;border-left:3px solid #e59a00;border-radius:4px;background:#fff8df;color:#6c4b00;font-size:10px;line-height:1.3} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-color-reset{grid-column:1/-1;justify-self:end;min-height:31px;padding:6px 11px;border:1px solid var(--eventro-line,#dce4ea);border-radius:7px;background:#fff;color:var(--eventro-navy,#183247);font-size:11px;font-weight:700;box-shadow:none} @media(max-width:720px){#resultArea.as-modal .designer-color-panel{grid-template-columns:1fr;gap:7px;padding:9px}#resultArea.as-modal .designer-color-chip{width:22px;min-width:22px;height:22px;min-height:22px}#resultArea.as-modal .designer-color-reset{grid-column:1}} /* NyDesignerModul 17 – forståelig tegnestudio */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .designer-draw-intro,.designer-draw-tool-list,.designer-draw-controls{display:none} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #designerDrawTools{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important;margin:0!important;padding:12px 14px!important;box-sizing:border-box!important;background:#fff!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #designerDrawTools>.dz-lbl{display:none!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-intro{display:flex;align-items:baseline;gap:9px;padding-right:25px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-intro strong{font-size:12px;color:var(--eventro-navy,#183247)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-intro small{font-size:9.5px;color:var(--eventro-muted,#687984)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-history{display:flex;gap:4px;margin-left:auto;align-self:center} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-history button{width:31px;height:29px;min-height:29px;padding:0;border:1px solid var(--eventro-line,#dce4ea);border-radius:7px;background:#fff;color:var(--eventro-navy,#183247);font-size:18px;line-height:1;box-shadow:none} #resultArea.as-modal .designer-quick-panel .designer-draw-history button:hover:not(:disabled){border-color:var(--eventro-blue,#08a9ee);background:var(--eventro-selected,#eef8fc)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-history button:disabled{opacity:.35;cursor:default} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-list{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:6px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card{min-height:52px;padding:6px 8px;border:1px solid var(--eventro-line,#dce4ea);border-radius:8px;background:var(--eventro-soft,#f3f8fb);color:var(--eventro-navy,#183247);display:flex;align-items:center;gap:7px;text-align:left;box-shadow:none} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card>b{width:25px;flex:0 0 25px;text-align:center;color:var(--eventro-blue,#08a9ee);font-size:22px;line-height:1} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card span{display:flex;flex-direction:column;gap:2px;min-width:0} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card small{font-size:8.5px;line-height:1.15;color:var(--eventro-muted,#687984)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card.active{border-color:var(--eventro-blue,#08a9ee);background:var(--eventro-selected,#eef8fc);box-shadow:inset 0 0 0 1px var(--eventro-blue,#08a9ee)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-control-group{display:flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid var(--eventro-line,#dce4ea);border-radius:8px;background:#fff} #resultArea.as-modal .designer-quick-panel .designer-draw-control-group>span{margin-right:3px;font-size:9.5px;font-weight:700;color:var(--eventro-muted,#687984)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #designerDrawTools>.ddraw-btns{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:visible!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .ddraw-color-menu{z-index:100100!important} @media(max-width:720px){#resultArea.as-modal .designer-quick-panel #designerDrawTools{padding:9px!important;max-height:250px;overflow-y:auto}#resultArea.as-modal .designer-quick-panel .designer-draw-intro{display:block}#resultArea.as-modal .designer-quick-panel .designer-draw-intro small{display:block;margin-top:3px}#resultArea.as-modal .designer-quick-panel .designer-draw-controls{flex-wrap:wrap}} /* NyDesignerModul 18 – adaptive elementlister og levende tegnestyrke */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ /* [FAMILIE:INNLIMING] Den kompakte utgaven i verktoeyraden. Tallene er hevet 29.10.2026: knappen staar alene og skal vaere stoerre, og under den kom en linje til med filtypene. 78 px holdt to linjer; 112 holder fire. */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-prompt{min-height:112px!important;padding:12px 22px 10px!important;gap:4px!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-button{min-height:46px!important;height:46px!important;min-width:208px!important;padding:6px 22px!important;font-size:13.5px!important;transform:none!important} /* [FAMILIE:INNLIMING] Luft mellom knappen og teksten under. Anders 29.10.2026: «Enda et linjeskift mellom den knappen og Last opp bilde eller logo-teksten.» Panelets gap er 4 px; denne legger 9 til. */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-row{margin-bottom:9px!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-button svg{width:26px!important;height:26px!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-prompt small{margin:0!important;transform:none!important;font-size:10px!important} /* Fra element fem komprimeres radene trinnvis. Listen trenger ikke scrollbar. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel #logoFiler{max-height:none!important;overflow:visible!important;scrollbar-gutter:auto!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .logo-grid{--designer-list-scale:1;row-gap:calc(3px * var(--designer-list-scale))!important;padding-top:calc(6px * var(--designer-list-scale))!important;padding-bottom:calc(7px * var(--designer-list-scale))!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-hdr{font-size:max(8px,calc(10.5px * var(--designer-list-scale)))!important;padding-bottom:calc(3px * var(--designer-list-scale))!important;margin-bottom:0!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-navn{font-size:max(8px,calc(11.5px * var(--designer-list-scale)))!important;line-height:1!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-farge .inksel{height:max(20px,calc(29px * var(--designer-list-scale)))!important;min-height:max(20px,calc(29px * var(--designer-list-scale)))!important;padding:1px 6px!important;font-size:max(8px,calc(11px * var(--designer-list-scale)))!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr{min-height:max(20px,calc(29px * var(--designer-list-scale)))!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .ab-toggle{min-height:max(19px,calc(26px * var(--designer-list-scale)))!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .ab-track{transform:scale(var(--designer-list-scale));transform-origin:left center;margin-right:calc(-40px * (1 - var(--designer-list-scale)))} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-thr .fil-thr{height:max(14px,calc(22px * var(--designer-list-scale)))!important} #resultArea.as-modal .designer-quick-panel .logo-grid .lg-sep{margin:calc(1px * var(--designer-list-scale)) 0!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .designer-draw-object-list{display:none} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-object-list{--designer-list-scale:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(5px * var(--designer-list-scale));padding-top:calc(6px * var(--designer-list-scale));border-top:1px solid var(--eventro-line,#dce4ea)} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-object-list:empty{display:none} #resultArea.as-modal .designer-quick-panel .designer-draw-object-title{grid-column:1/-1;color:var(--eventro-muted,#687984);font-size:max(8px,calc(10px * var(--designer-list-scale)));font-weight:700} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row{min-height:max(21px,calc(34px * var(--designer-list-scale)));padding:calc(4px * var(--designer-list-scale)) 7px;border:1px solid var(--eventro-line,#dce4ea);border-radius:7px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;background:#fff;color:var(--eventro-navy,#183247);box-shadow:none;text-align:left} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row i{width:max(10px,calc(16px * var(--designer-list-scale)));height:max(10px,calc(16px * var(--designer-list-scale)));border:1px solid #8b99a3;border-radius:4px;background:var(--draw-color)} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row span{font-size:max(8px,calc(10.5px * var(--designer-list-scale)));font-weight:700} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row small{font-size:max(7px,calc(8.5px * var(--designer-list-scale)));color:var(--eventro-muted,#687984)} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row:hover{border-color:var(--eventro-blue,#08a9ee);background:var(--eventro-selected,#eef8fc)} #resultArea.as-modal .designer-quick-panel .designer-draw-object-row.is-selected{border-color:var(--eventro-blue,#08a9ee);background:var(--eventro-selected,#eef8fc);box-shadow:inset 0 0 0 1px var(--eventro-blue,#08a9ee)} /* Alle verktøysymbolene viser den aktive tykkelsen samtidig. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card>b.designer-draw-live-icon{height:28px;display:grid;place-items:center} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-card>b.designer-draw-live-icon svg{width:28px;height:28px;display:block;overflow:visible} /* [FAMILIE:INNLIMING] 29.10.2026: knappen sto alene og ble stoerre, og under den kom filtypelinja. 68/36 var maalt for to knapper og én tekstlinje. 48 px er ogsaa en hoyde en finger treffer - 36 var i minste laget. */ @media(max-width:720px){#resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-prompt{min-height:104px!important;padding:9px 12px 8px!important}#resultArea.as-modal[data-designer-quick-mode="image"] .designer-upload-button{height:48px!important;min-height:48px!important;min-width:200px!important}#resultArea.as-modal .designer-quick-panel #designerDrawTools{max-height:none!important;overflow:visible!important}#resultArea.as-modal .designer-quick-panel .designer-draw-object-list{grid-template-columns:repeat(2,minmax(0,1fr))}#resultArea.as-modal .designer-quick-panel .designer-draw-object-row small{display:none}} /* NyDesignerModul 19 – samlet tegneverktøylinje og direkte objektoppdatering */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-controls{ display:grid!important; grid-template-columns:34px minmax(0,1fr) auto; /* [FAMILIE:PANELER] Anders 08.10: «+ og - fikk plutselig stor spredning.» align-items:stretch strekker tykkelse-spalten til hele hoyden av verktoylista ved siden av - og lista ble hoeyere da paletten la seg fast. Spalten har grid-template-rows:1fr 1fr, saa de to knappene ble sentrert i hver sin halvdel av en hoey spalte og dro fra hverandre. De skal staa sammen, oeverst, uansett hvor hoey naboen er. */ align-items:start!important; gap:6px!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-size{ display:grid!important; grid-template-rows:auto auto; align-self:start!important; gap:2px!important; padding:0!important; border:0!important; background:transparent!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-size .ddraw-step{ width:34px!important; min-width:34px!important; height:25px!important; min-height:25px!important; padding:0!important; font-size:16px!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-list{grid-template-columns:repeat(5,minmax(78px,1fr))!important;min-width:0} /* NyDesignerModul 24 – komplett tegnefargepalett på én egen rad. */ @media(max-width:720px){ #resultArea.as-modal .designer-quick-panel .designer-draw-controls{grid-template-columns:32px minmax(0,1fr)!important;align-items:start!important} #resultArea.as-modal .designer-quick-panel .designer-draw-size .ddraw-step{width:32px!important;min-width:32px!important} } /* NyDesignerModul 26 – kompakt fargeflis med palett ved behov. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-controls{grid-template-columns:34px minmax(0,1fr)!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-list{grid-template-columns:repeat(7,minmax(68px,1fr))!important;position:relative} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-color-card[hidden]{display:none!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-color-card .designer-draw-color-indicator{ width:22px!important;height:22px!important;flex:0 0 22px!important;border:1px solid #71818e!important;border-radius:5px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45) } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-quick-palette{ grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;padding:7px;border:1px solid var(--eventro-line,#dce4ea);border-radius:8px;background:#fff } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-draw-quick-palette[hidden]{display:none!important} /* [FAMILIE:SILKETRYKK] KOSTNADSTEKSTEN KLUMPET SEG I EN SMAL SPALTE. Anders 08.10: «Teksten klumper seg sammen over mange linjer. Denne burde staatt bortover linjen, kun som en tekstlinje.» .designer-draw-tool-list er et RUTENETT med sju smale spalter. Paletten over har grid-column:1/-1 og gaar derfor i full bredde; noten hadde ingen, og havnet i EN spalte paa 68 px. Den skal ligge paa sin egen linje, som paletten - samme regel, ikke en ny. */ #resultArea.as-modal .designer-quick-panel .designer-draw-tool-list > .sp-kostnadsnote{ grid-column:1/-1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } #resultArea.as-modal .designer-quick-panel .designer-draw-palette-color{ width:22px;min-width:22px;height:22px;min-height:22px;padding:0;border:1px solid #8b99a3;border-radius:5px;background:var(--c);box-shadow:none } #resultArea.as-modal .designer-quick-panel .designer-draw-palette-color.active{outline:2px solid var(--eventro-blue,#08a9ee);outline-offset:1px} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-picker{ grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(54px,1fr));gap:5px;padding:8px;border:1px solid var(--eventro-line,#dce4ea);border-radius:8px;background:#fff;max-height:240px;overflow-y:auto;overscroll-behavior:contain } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-picker[hidden]{display:none!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-category{ grid-column:1/-1;margin:3px 0 0;padding:5px 3px 2px;border-bottom:1px solid #dbe5eb;color:#496476;font:800 10px/1.15 "Sora",Arial,sans-serif;text-transform:uppercase;letter-spacing:.35px } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-choice{ min-width:0;min-height:58px;padding:5px 3px;border:1px solid #d6e0e7;border-radius:8px;background:#f4f9fc;color:#122c3d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:none } #resultArea.as-modal .designer-quick-panel .designer-symbol-choice:hover{border-color:var(--eventro-blue,#08a9ee);background:#eaf7fd} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-choice svg{width:27px;height:27px;display:block;fill:currentColor} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-symbol-choice span{font:700 9px/1.1 "Sora",Arial,sans-serif;white-space:normal;text-align:center} @media(max-width:720px){ #resultArea.as-modal .designer-quick-panel .designer-draw-controls{grid-template-columns:32px minmax(0,1fr)!important} #resultArea.as-modal .designer-quick-panel .designer-draw-tool-list{grid-template-columns:repeat(2,minmax(0,1fr))!important} #resultArea.as-modal .designer-quick-panel .designer-draw-quick-palette{gap:2px;padding:5px;overflow-x:auto;justify-content:flex-start} #resultArea.as-modal .designer-quick-panel .designer-draw-palette-color{width:17px;min-width:17px;height:18px;min-height:18px} #resultArea.as-modal .designer-quick-panel .designer-symbol-picker{grid-template-columns:repeat(4,minmax(48px,1fr));max-height:210px;overflow-y:auto} } /* NyDesignerModul 38 – kompakte tegneverktøy i den etablerte panelbredden. Hjelpeteksten skjules; bare symbol og kort verktøynavn beholdes. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="draw"] .designer-draw-tool-card small{ display:none!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="draw"] .designer-draw-tool-card strong{ font-size:9.5px!important; line-height:1!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal[data-designer-quick-mode="draw"] .designer-draw-tool-card{ min-height:46px!important; padding:5px 6px!important; gap:5px!important; } /* NyDesignerModul 39 – midlertidig Photoshop-lignende dra-markering. */ #resultArea.as-modal #bigBand .selection-marquee{ position:absolute; display:none; box-sizing:border-box; border:1.5px dashed #08a9ee; background:rgba(8,169,238,.10); box-shadow:0 0 0 1px rgba(255,255,255,.55); pointer-events:none; z-index:100; } #resultArea.as-modal #bigBand .selection-marquee.visible{display:block} /* NyDesignerModul 54 – gjenopprettet desktopdock og raskere panelutvidelse. */ @media(min-width:721px){ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-start-shell{width:min(430px,calc(100% - 24px));height:94px} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal .designer-quick-tools{padding:9px 11px;gap:7px;border-radius:13px} #resultArea.as-modal .designer-quick-tool{min-height:72px;padding:7px 5px;gap:5px;border-radius:9px;font-size:11px} #resultArea.as-modal .designer-quick-tool svg, #resultArea.as-modal .designer-tool-text{width:25px;height:25px} #resultArea.as-modal .designer-tool-text{font-size:23px} } #resultArea.as-modal .designer-quick-panel.quick-panel-forming, #resultArea.as-modal .designer-quick-panel.quick-panel-forming>*{animation-duration:.36s!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal .designer-quick-panel .designer-layout-panel .layout-gallery-foot{display:none!important} /* ============================================================ NyDesignerModul 65 — MOBIL: stage-forankret verktøydokk og scroll-redning Autoritativ sluttregel. PC er uttrykkelig utenfor denne blokken. ============================================================ */ @media(max-width:720px){ /* NyDesignerModul 81 — mobilen er en ekte fullskjermsflate. Eldre modalregler bruker 1–2 vh luft, 96/98 vw og max-height; de kan ellers avsløre ordresiden som en glippe langs kanten. */ html:has(#resultArea.as-modal), body:has(#resultArea.as-modal){ width:100%!important; min-width:100%!important; height:100%!important; min-height:100%!important; margin:0!important; overflow:hidden!important; } .wrap #resultArea.as-modal{ position:fixed!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100vw!important; min-width:100vw!important; max-width:none!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; margin:0!important; border:0!important; border-radius:0!important; box-sizing:border-box!important; overflow:hidden!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .stage{ will-change:translate; backface-visibility:hidden; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv)>.body{ height:calc(100dvh - 58px)!important; overflow:hidden!important; overscroll-behavior:none; touch-action:pan-y; } /* Gir reell vertikal scrollreserve selv om den synlige designerinnmaten er lavere enn viewporten. Kunden kan dermed hente båndet tilbake etter zoom. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv)>.body::before, #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv)>.body::after{ content:""; display:block; width:1px; height:100dvh; min-height:100dvh; flex:0 0 100dvh; pointer-events:none; } /* Et åpnet fagpanel erstatter verktøyraden i samme dock-posisjon. Dermed starter Tekst/Fil/Tegn/Farge/Oppsett tett under båndvinduet i stedet for å bruke en ekstra verktøyradshøyde. */ #resultArea.as-modal.designer-tool-panel-open .designer-quick-dock.is-mobile-dock .designer-start-shell{ display:none!important; } #resultArea.as-modal.designer-tool-panel-open .designer-quick-dock.is-mobile-dock .designer-quick-panel{ position:relative!important; width:100%!important; max-width:100%!important; margin:0!important; z-index:2!important; } /* Tastaturmodus: behold båndet øverst og gi inputpanelet resten av den faktiske visual viewport. Sekundære, faste handlinger kommer tilbake når tastaturet lukkes. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.mobile-keyboard-open #edFoot, #resultArea.as-modal.mobile-keyboard-open .designer-corner-controls{ display:none!important; } /* Mens kunden skriver prioriteres bånd + tekstfelt. Det ordinære Tekst/Last opp/Tegn/Farge/Oppsett-skallet kommer tilbake ved blur. */ #resultArea.as-modal.mobile-keyboard-open .designer-start-shell{ display:none!important; } #resultArea.as-modal.mobile-keyboard-open .designer-quick-panel{ margin-top:0!important; max-height:var(--mobile-keyboard-panel-max,150px)!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } #resultArea.as-modal.mobile-keyboard-open .designer-quick-panel #textCtrls{ margin:0!important; } /* Den gamle globale .band-regelen bruker touch-action:none. På mobil skal ledig båndflate kunne starte vanlig én-finger-pan, mens faktiske redigeringsmål fortsatt reserverer fingeren til objektoperasjonen. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #bigBand{ touch-action:none!important; } /* Mobilens eneste bevegelige arbeidsflate: litt høyere enn før, med reserve over og under båndet slik at både X- og Y-scroll faktisk har vandring. */ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #designZoomWrap{ height:clamp(148px,25dvh,210px)!important; min-height:148px!important; padding-block:58px!important; box-sizing:border-box!important; overflow:scroll!important; scrollbar-gutter:stable; touch-action:none!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* Footeren må være synlig uavhengig av bodyens interne scrollanker. Safe-area fylles av samme bakgrunn helt ned. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv) #edFoot{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:2147482600!important; min-height:66px!important; height:calc(66px + env(safe-area-inset-bottom,0px))!important; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important; } /* Last opp fil: ingen faste minstekolonner får presse panelet utenfor skjermen. Alle tre kolonner og modus-slideren krymper innenfor 100 %. */ #resultArea.as-modal[data-designer-quick-mode="image"] .designer-quick-panel, #resultArea.as-modal[data-designer-quick-mode="image"] #logoFiler{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #resultArea.as-modal[data-designer-quick-mode="image"] .logo-grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr)!important; gap:4px 6px!important; padding:7px!important; min-width:0!important; } #resultArea.as-modal[data-designer-quick-mode="image"] .logo-grid>*{min-width:0!important} #resultArea.as-modal[data-designer-quick-mode="image"] .logo-grid .lg-thr .fil-thr{ min-width:0!important; max-width:100%!important; } /* Oppsett stopper fysisk over den faste bunnlinjen. Header/størrelse står, mens bare thumbnailgalleriet får intern vertikal scroll. */ #resultArea.as-modal[data-designer-quick-mode="layout"] .designer-quick-panel, #resultArea.as-modal[data-designer-quick-mode="layout"] .designer-layout-panel{ max-height:var(--mobile-designer-panel-room,calc(100dvh - 150px))!important; } #resultArea.as-modal[data-designer-quick-mode="layout"] .designer-layout-panel .layout-gallery{ min-height:0!important; overflow-y:auto!important; padding-bottom:12px!important; scroll-padding-bottom:12px; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #bigBand :is(.obj,.hset,#gframe,.handle){ touch-action:none!important; } body.designer-draw-active #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) #bigBand{ touch-action:none!important; } /* NyDesignerModul 83 — mobilens avansertlinje er en egen, normalstor vannrett verktøyskinne. Den gamle 54 %-skaleringen gjorde både tekst og treffflater for små, og forsøkte å presse hele desktoplinjen inn samtidig. */ #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host{ overflow:visible!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host .design-zoom-toggle{ top:10px!important; bottom:auto!important; transform:translateX(-50%)!important; width:38px!important; height:22px!important; min-height:22px!important; font-size:17px!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host #designZoomBar{ top:-8px!important; left:8px!important; right:8px!important; width:auto!important; max-width:calc(100vw - 16px)!important; box-sizing:border-box!important; transform:scaleY(0)!important; transform-origin:50% 0!important; overflow:hidden!important; align-items:flex-start!important; } #resultArea.as-modal:not(.kal-aktiv):not(.opt-aktiv) .design-zoom-overlay-host #designZoomBar.is-expanded{ max-height:88px!important; transform:scaleY(1)!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-x:contain; touch-action:pan-x!important; -webkit-overflow-scrolling:touch; scrollbar-width:auto; scrollbar-color:var(--eventro-blue,#08a9ee) #e8f0f4; } #resultArea.as-modal #designZoomBar .dz-row{ width:max-content!important; min-width:max-content!important; max-width:none!important; flex-wrap:nowrap!important; justify-content:flex-start!important; align-self:flex-start!important; flex:0 0 auto!important; margin-left:0!important; margin-right:0!important; gap:7px!important; padding:2px 18px 8px 3px!important; zoom:1!important; } #resultArea.as-modal #designZoomBar .dz-grp{flex:0 0 auto!important} #resultArea.as-modal #designZoomBar .dz-lbl{font-size:10px!important} #resultArea.as-modal #designZoomBar :is(.dz-btns,.zbar-left){flex-wrap:nowrap!important} #resultArea.as-modal #designZoomBar .dz-btns .tbtn, #resultArea.as-modal #designZoomBar .zbar-left :is(.zoom-point,.zoom-lbl){ height:42px!important; min-height:42px!important; min-width:42px!important; font-size:17px!important; } #resultArea.as-modal #designZoomBar::-webkit-scrollbar{height:8px} #resultArea.as-modal #designZoomBar::-webkit-scrollbar-track{background:#e8f0f4;border-radius:9px} #resultArea.as-modal #designZoomBar::-webkit-scrollbar-thumb{background:var(--eventro-blue,#08a9ee);border-radius:9px} /* NyDesignerModul 86 — mobilheaderen viser bare hjelp og lukk. Tittelen reserverer deres faktiske bredde og brytes før handlingsfeltet. */ #resultArea.as-modal>h2{ padding-right:96px!important; min-height:58px!important; box-sizing:border-box!important; align-items:flex-start!important; } #resultArea.as-modal>h2>#step4title{ display:block!important; min-width:0!important; max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.35!important; } #resultArea.as-modal>h2 .designer-head-actions{ grid-template-columns:32px 32px!important; width:72px!important; } #resultArea.as-modal>h2 .designer-head-actions>#keepInDesign, #resultArea.as-modal>h2 .designer-head-actions>.designer-head-preview-slot{ display:none!important; } } /* ============================================================ NyDesignerModul 111 — forenklet mobil-designer Autoritativ mobiladapter. Alle regler er avgrenset til grov peker og maks 720 px. Desktop/PC beholder eksisterende designer uendret. ============================================================ */ @media (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer{touch-action:none!important;overscroll-behavior:none!important} #resultArea.as-modal.mobile-simple-designer:not(.kal-aktiv):not(.opt-aktiv)>.body::before, #resultArea.as-modal.mobile-simple-designer:not(.kal-aktiv):not(.opt-aktiv)>.body::after{display:none!important} #resultArea.as-modal.mobile-simple-designer:not(.kal-aktiv):not(.opt-aktiv)>.body{ padding:8px 10px calc(74px + env(safe-area-inset-bottom,0px))!important; height:calc(100dvh - 58px)!important;overflow:hidden!important;touch-action:none!important } #resultArea.as-modal.mobile-simple-designer .stage{ position:relative!important;padding:24px 10px 12px!important;margin:0!important; min-height:142px!important;height:142px!important;overflow:hidden!important;translate:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ width:100%!important;height:92px!important;min-height:92px!important;padding:24px 0 18px!important; overflow:hidden!important;touch-action:none!important;scrollbar-width:none!important } #resultArea.as-modal.mobile-simple-designer #designZoomWrap::-webkit-scrollbar{display:none!important} /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal.mobile-simple-designer #bigBand{ width:100%!important;max-width:none!important;margin:0!important;transform:none!important;touch-action:none!important } #resultArea.as-modal.mobile-simple-designer .design-zoom-overlay-host, #resultArea.as-modal.mobile-simple-designer .designer-corner-controls{display:none!important} #resultArea.as-modal.mobile-simple-designer #bigBand .hset.solo{ border:2px dashed #04a9fc!important;box-shadow:0 0 0 1px rgba(255,255,255,.78)!important } #resultArea.as-modal.mobile-simple-designer #bigBand .hset .handle, #resultArea.as-modal.mobile-simple-designer #bigBand #gframe{display:none!important} #resultArea.as-modal.mobile-simple-designer #bigBand .obj.sel.solo{outline:0!important;box-shadow:none!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-dock.is-mobile-dock{ position:fixed!important;right:auto!important;bottom:calc(70px + env(safe-area-inset-bottom,0px))!important; width:min(100%,calc(100vw - 20px))!important;max-height:calc(100dvh - 218px - env(safe-area-inset-bottom,0px))!important; margin:0!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain!important;touch-action:pan-y!important;transform-origin:50% 0!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-start-shell{ display:grid!important;width:100%!important;height:68px!important;margin:7px 0 0!important } #resultArea.as-modal.mobile-simple-designer .designer-start-button{display:none!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-tools{ position:relative!important;inset:auto!important;width:100%!important;height:68px!important; padding:7px!important;gap:5px!important;opacity:1!important;visibility:visible!important;transform:none!important; border-radius:12px!important;background:#fff!important } #resultArea.as-modal.mobile-simple-designer .designer-quick-tool{ min-height:52px!important;padding:4px 2px!important;border-radius:8px!important;font-size:10px!important } #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open .designer-start-shell{display:none!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel{ width:100%!important;margin:7px 0 0!important;border-radius:12px!important;touch-action:pan-y!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel :is(input,select,button){min-height:42px} #resultArea.as-modal.mobile-simple-designer .mobile-full-band-button{ display:flex;width:100%;min-height:42px;align-items:center;justify-content:center; margin:0;padding:5px 20px;border:1px solid #04a9fc;border-radius:5px;background:#fff;color:#087fb3; font:600 13px/15.6px "Sora",Arial,sans-serif;text-transform:uppercase } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-object-controls{ margin:7px 0 0;padding:10px;border:1px solid #cbdce5;border-radius:12px;background:#fff; box-shadow:0 7px 18px rgba(25,60,79,.12) } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-object-controls[hidden]{display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open .mobile-object-controls{display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-head strong{font:600 13px "Sora",Arial,sans-serif;color:#183247} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-head button{ min-height:32px;padding:4px 10px;border:1px solid #d98a8a;border-radius:5px;background:#fff;color:#a02a1c; font:600 11px "Sora",Arial,sans-serif;text-transform:uppercase } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid label{display:block;min-width:0;color:#314d60;font:500 11px "Sora",Arial,sans-serif} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid label>span{display:flex;justify-content:space-between;gap:5px;white-space:nowrap} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid output{color:#087fb3;font-weight:600} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid input{display:block;width:100%;height:30px;min-height:30px;margin:0;accent-color:#04a9fc;touch-action:none} } .mobile-full-band-overlay{ position:fixed;inset:0;z-index:2147483646;box-sizing:border-box;background:#f6fcff;color:#183247; font-family:"Sora",Arial,sans-serif;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) } .mobile-full-band-overlay[hidden]{display:none!important} .mobile-full-band-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px} .mobile-full-band-top>div{display:flex;flex-direction:column}.mobile-full-band-top strong{font-size:18px}.mobile-full-band-top small{font-size:11px;color:#617887} .mobile-full-band-top button{width:42px;height:42px;border:1px solid #d6e1e8;border-radius:50%;background:#fff;color:#183247;font-size:25px} .mobile-full-band-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden} .mobile-full-band-scene .mobile-full-band-clone{width:100%!important;max-width:none!important;margin:0!important;transform:none!important} .mobile-full-band-scene :is(.safebox,.ovlshade,.ovlline){display:none!important} .mobile-full-band-tip{text-align:center;color:#617887;font-size:11px;padding-top:8px} @media (orientation:landscape) and (max-height:720px){ .mobile-full-band-overlay{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))} .mobile-full-band-top{min-height:42px}.mobile-full-band-top strong{font-size:16px} .mobile-full-band-scene .mobile-full-band-clone{width:min(100%,calc((100dvh - 110px)*12.5))!important} } /* ============================================================ NyDesignerModul 112 — liggende mobildesigner Presentasjonsadapter over eksisterende objekt-/undo-/render-state. Touch på objektet er hovedbetjening; Juster åpner presisjonsspakene. ============================================================ */ .mobile-adjust-tool{display:none!important} @media (orientation:portrait) and (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg{ display:grid!important;position:fixed!important;inset:0!important;z-index:2147483600!important; place-items:center!important;padding:24px!important;background:#eff9fd!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg-in{ width:min(100%,360px)!important;box-sizing:border-box!important;padding:28px 22px!important; border:1px solid #c9dce5!important;border-radius:12px!important;background:#fff!important; box-shadow:0 14px 34px rgba(25,60,79,.18)!important;text-align:center!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg-ic{ display:block!important;font-size:48px!important;transform:rotate(90deg)!important;margin-bottom:14px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg b{ display:block!important;color:#183247!important;font:600 20px/1.25 "Sora",Arial,sans-serif!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg small{ display:block!important;margin-top:9px!important;color:#557080!important;font:400 13px/1.45 "Sora",Arial,sans-serif!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .rotmsg-x{display:none!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-fullscreen-button{ display:block!important;width:100%!important;min-height:44px!important;margin-top:18px!important;padding:8px 14px!important; border:0!important;border-radius:5px!important;background:#04a9fc!important;color:#fff!important; font:600 13px/1.2 "Sora",Arial,sans-serif!important;text-transform:uppercase!important } } @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ html:has(body.eventro-mobile-simple-designer),body.eventro-mobile-simple-designer{ width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ position:fixed!important;inset:0!important;z-index:2147482500!important;width:100dvw!important;max-width:none!important; height:100dvh!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important; overflow:hidden!important;background:#eff9fd!important } #resultArea.as-modal.mobile-simple-designer>h2{ height:40px!important;min-height:40px!important;margin:0!important;padding:7px 92px 6px 14px!important; border-bottom:1px solid #cfdee6!important;background:#fff!important;font-size:14px!important;line-height:1.25!important } #resultArea.as-modal.mobile-simple-designer>h2>#step4title{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #resultArea.as-modal.mobile-simple-designer>h2 .designer-head-actions{ top:4px!important;right:8px!important;width:70px!important;height:32px!important;grid-template-columns:32px 32px!important;gap:6px!important } #resultArea.as-modal.mobile-simple-designer>h2 .designer-head-actions :is(.helpbtn,.btn-back){width:32px!important;height:32px!important;min-height:32px!important} #resultArea.as-modal.mobile-simple-designer>.body{ position:relative!important;height:calc(100dvh - 40px)!important;min-height:0!important;box-sizing:border-box!important; padding:0 10px calc(48px + env(safe-area-inset-bottom,0px))!important;overflow:hidden!important;background:#eff9fd!important } #resultArea.as-modal.mobile-simple-designer :is(.selhint,#zones){display:none!important} #resultArea.as-modal.mobile-simple-designer .stage{ position:absolute!important;left:10px!important;right:10px!important;top:4px!important;width:auto!important; height:112px!important;min-height:112px!important;box-sizing:border-box!important;margin:0!important;padding:20px 10px 14px!important; overflow:hidden!important;border:1px solid #c9dce5!important;border-radius:12px!important;background:#fff!important } #resultArea.as-modal.mobile-simple-designer .stage .rotmsg{display:none!important} /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ width:100%!important;height:76px!important;min-height:76px!important;margin:0!important;padding:7px 0!important; overflow:hidden!important;touch-action:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal.mobile-simple-designer #bigBand{ width:100%!important;max-width:none!important;height:auto!important;margin:0!important;transform:none!important;touch-action:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ #resultArea.as-modal.mobile-simple-designer #bigBand :is(.obj,.hset){touch-action:none!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-dock.is-mobile-dock{ display:grid!important;grid-template-rows:50px minmax(0,1fr)!important;position:absolute!important; left:10px!important;right:10px!important;top:122px!important;bottom:calc(50px + env(safe-area-inset-bottom,0px))!important; width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important; overflow:hidden!important;transform:none!important;translate:none!important;touch-action:none!important } #resultArea.as-modal.mobile-simple-designer .mobile-full-band-button{display:none!important} /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-start-shell{ display:block!important;grid-row:1!important;width:100%!important;height:50px!important;margin:0!important;overflow:visible!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-tools{ display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;position:static!important; width:100%!important;height:50px!important;box-sizing:border-box!important;margin:0!important;padding:5px!important;gap:5px!important; opacity:1!important;visibility:visible!important;transform:none!important;border:1px solid #c9dce5!important; border-radius:12px!important;background:#fff!important;box-shadow:none!important } #resultArea.as-modal.mobile-simple-designer .mobile-adjust-tool{display:flex!important} #resultArea.as-modal.mobile-simple-designer .designer-quick-tool{ min-width:0!important;min-height:38px!important;height:38px!important;padding:2px 4px!important;border-radius:7px!important; flex-direction:row!important;gap:5px!important;font-size:10px!important;line-height:1!important } #resultArea.as-modal.mobile-simple-designer .designer-quick-tool :is(svg,.designer-tool-icon){width:17px!important;height:17px!important;font-size:16px!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel, #resultArea.as-modal.mobile-simple-designer .mobile-object-controls{ grid-row:2!important;min-height:0!important;width:100%!important;max-width:none!important;max-height:none!important;box-sizing:border-box!important; margin:5px 0 0!important;padding:9px 12px!important;overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important; border:1px solid #c9dce5!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important } #resultArea.as-modal.mobile-simple-designer .designer-quick-panel:empty{display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open .mobile-object-controls{display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-object-controls[hidden]{display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-head{margin:0 0 6px!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid label{font-size:10px!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid label>span{display:flex!important;flex-wrap:wrap!important;line-height:1.2!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid input{height:30px!important;min-height:30px!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel #textCtrls>*{min-width:0!important;margin:0!important} #resultArea.as-modal.mobile-simple-designer .designer-quick-panel #textCtrls .farge-col{grid-column:1/-1!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel #logoFiler{max-height:none!important;overflow:visible!important} /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .logo-grid{ grid-template-columns:minmax(120px,.8fr) minmax(180px,1.2fr) minmax(180px,1fr)!important;gap:5px 10px!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .layout-gallery{ display:grid!important;grid-template-columns:repeat(4,minmax(130px,1fr))!important;gap:8px!important;overflow:visible!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ #resultArea.as-modal.mobile-simple-designer #edFoot #ferdigBtn{width:100%!important;height:42px!important;min-height:42px!important;border-radius:5px!important} } /* ============================================================ NyDesignerModul 116 — ryddig landskapsflate og tekst direkte på båndet ============================================================ */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ position:fixed!important;left:0!important;right:0!important;bottom:auto!important; top:var(--mobile-vv-top,0px)!important;width:100dvw!important; height:var(--mobile-vv-height,100dvh)!important;max-height:var(--mobile-vv-height,100dvh)!important; box-sizing:border-box!important;margin:0!important;border:6px solid #111!important;border-radius:0!important; overflow:hidden!important;background:#eff9fd!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ height:40px!important;min-height:40px!important;padding-right:86px!important;border-radius:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 .designer-head-actions{ grid-template-columns:32px 32px!important;width:70px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 :is(#keepInDesign,.designer-head-preview-slot){display:none!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ height:calc(100% - 40px)!important;min-height:0!important;padding-bottom:54px!important;border-radius:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer :is( #multiHint,.multi-hint,.selhint,#selHint,#step4hint,.ink-hint,#inkHint,.design-zoom-overlay-host,.designer-corner-controls ){display:none!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer :is(.designer-quick-panel,.mobile-object-controls){ border-radius:10px!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>.mobile-footer-secondary-action{ display:block!important;background:#fff!important;color:#183247!important;border:1.5px solid #c9dce5!important; font-weight:700!important;white-space:normal!important;line-height:1.12!important;text-align:center!important; box-shadow:0 2px 6px rgba(20,55,75,.08)!important } } /* NyDesignerModul 119 — ekte native trykkflate over Tekst-knappen. Inputet finnes før fingeren treffer skjermen. Mobilnettleseren åpner dermed tastaturet fra et direkte inputtrykk, ikke fra programmatisk fokus. */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer .mobile-native-text-trigger{ display:block;position:fixed;z-index:2147483646;box-sizing:border-box; margin:0;padding:0;border:0;border-radius:8px;background:transparent; color:transparent;caret-color:transparent;opacity:.01;appearance:none; font-size:16px;pointer-events:auto;touch-action:manipulation } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer .mobile-native-text-trigger[hidden]{display:none!important} } /* NyDesignerModul 120 — kontrollert skrivefelt rett over tastaturet. Draften bor i det native feltet og sendes til båndobjektet først ved OK. */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-trigger{ display:block!important;position:fixed!important;z-index:2147483647!important; box-sizing:border-box!important;margin:0!important;padding:8px 12px!important; border:2px solid #04a9fc!important;border-radius:9px!important;background:#fff!important; color:#183247!important;caret-color:#183247!important;opacity:1!important;appearance:none!important; font:500 17px/1.2 "Sora",Arial,sans-serif!important;pointer-events:auto!important; box-shadow:0 5px 18px rgba(10,48,69,.25)!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-commit{ display:block!important;position:fixed!important;z-index:2147483647!important; box-sizing:border-box!important;margin:0!important;padding:5px!important; border:0!important;border-radius:9px!important;background:#04a9fc!important;color:#fff!important; font:700 14px/1 "Sora",Arial,sans-serif!important;pointer-events:auto!important; box-shadow:0 5px 18px rgba(10,48,69,.25)!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer .mobile-native-text-commit[hidden]{display:none!important} body.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer #bigBand .obj.sel.solo{ visibility:hidden!important } } /* NyDesignerModul 121 — enkel mobilmarkering og tekstkontroller. */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .hset.solo{ display:block!important;border:2px dashed #04a9fc!important;border-radius:3px!important; background:transparent!important;box-shadow:none!important;outline:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .hset :is(.handle,.edge), body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand #gframe{ display:none!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control{ display:block;position:absolute;left:10px;right:10px;top:120px;height:36px;z-index:35; box-sizing:border-box;padding:3px 10px;border:1px solid #c9dce5;border-radius:9px;background:#fff } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control label{ display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:10px;height:100%; color:#183247;font:600 10px/1.1 "Sora",Arial,sans-serif } } /* NyDesignerModul 122 — komplett tekstpanel, kraftig skalering og native filvalg. */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls{ display:grid!important;grid-template-columns:minmax(120px,1.1fr) minmax(130px,1.2fr) minmax(76px,.65fr) minmax(116px,1fr)!important; gap:7px 10px!important;align-items:end!important;width:100%!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls :is(.tekst-row,.font-row){ display:contents!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls :is(.font-col,.size-col,.style-col){ display:block!important;min-width:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .font-col{ grid-column:2!important;grid-row:1!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .size-col{ grid-column:3!important;grid-row:1!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .style-col{ grid-column:4!important;grid-row:1!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .farge-col{ grid-column:1/-1!important;grid-row:2!important;margin-top:1px!important } body.eventro-mobile-simple-designer #addLogo.mobile-native-file-trigger{ display:block!important;position:fixed!important;z-index:2147483645!important; box-sizing:border-box!important;margin:0!important;padding:0!important;border:0!important; opacity:.01!important;pointer-events:auto!important;touch-action:manipulation!important } @keyframes mobileTextToolPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(4,169,252,.08),0 0 0 2px rgba(4,169,252,.32)} 50%{box-shadow:0 0 0 4px rgba(4,169,252,.14),0 0 0 2px rgba(4,169,252,.66)} } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-selected-text-object[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel #textCtrls .font-col{ position:relative!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-selected-text-object[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel #textCtrls .font-col::after{ content:"";position:absolute;inset:-5px -6px -6px!important;border:2px solid rgba(4,169,252,.45)!important;border-radius:11px!important; pointer-events:none!important;animation:mobileTextToolPulse 1.45s ease-in-out infinite!important } } /* NyDesignerModul 124 — typografipanelet erstatter verktøyraden. På liggende mobil må font/stil/farge ligge rett under størrelsesspaken; nettleserens URL-felt får ikke skyve panelet under synlig skjermkant. */ @media (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock{ grid-template-rows:minmax(0,1fr)!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-start-shell{ display:none!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel{ display:block!important;grid-row:1!important;position:relative!important;z-index:40!important; width:100%!important;margin:0!important } } /* ============================================================ NyDesignerModul 132 — kompakt båndsone + én lav footer-rad Mobil-only kalibrering mot fysisk Samsung/Chrome. Henter reell høyde fra båndområdet i stedet for å krympe fontpanelet. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Båndboksen beholder full bredde og omtrent samme båndhøyde, men fjerner overflødig luft over/under. Ca. 20 px frigjøres til typografipanelet. */ /* Vanlig verktøydokk følger den nye, lavere båndboksen. */ /* Størrelsesspaken ligger fortsatt rett under båndet, bare 20 px høyere. */ /* Footeren skal være én lav rad. Ingen ekstra grå høydereserve. */ } /* ============================================================ NyDesignerModul 133 — Samsung-landskap: mobil eier footer-geometrien Rotårsak: fysisk Samsung har CSS-bredde >720 px i landskap, slik at den gamle @media(min-width:721px)-desktopregelen fortsatt traff #edFoot. Mobilmodus overstyrer derfor ALLE footer-egenskaper, ikke bare høyden. Original "Ta bort design og lukk" skjules; mobil-proxyen i footeren utløser den eksisterende handlingen uten å flytte original DOM-node. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ padding-bottom:40px!important } /* Hent ytterligere noen få høydepiksler uten å redusere selve båndbredden. */ /* Full reset av gammel desktop-footer. Dette er nødvendig på Samsung der liggende CSS-viewport er bredere enn 720 px og desktopregelen ellers legger footeren som en smal høyreboks. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows:36px!important; gap:8px!important; position:absolute!important; left:10px!important;right:10px!important;top:auto!important;bottom:2px!important; width:auto!important;max-width:none!important; height:36px!important;min-height:36px!important;max-height:36px!important; margin:0!important;padding:0!important; align-items:stretch!important;justify-items:stretch!important;justify-content:stretch!important; overflow:visible!important; z-index:2147483000!important; background:transparent!important;border:0!important;border-top:0!important; border-radius:0!important;box-shadow:none!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>button{ display:flex!important;position:static!important;inset:auto!important; align-items:center!important;justify-content:center!important; width:100%!important;min-width:0!important;max-width:none!important; height:36px!important;min-height:36px!important;max-height:36px!important; margin:0!important;padding:4px 8px!important; box-sizing:border-box!important;border-radius:6px!important; font-size:10.5px!important;line-height:1.1!important;white-space:normal!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>#taBortDesignBtn{ background:#fff!important;color:#183247!important;border:1.5px solid #c9dce5!important; font-weight:700!important;box-shadow:none!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>#ferdigBtn{ background:#04a9fc!important;color:#fff!important;border-color:#04a9fc!important; box-shadow:none!important } } /* ============================================================ NyDesignerModul 134 — båndet tilpasses faktisk høyde i boksen Mobil-only. Ingen fast Y-koordinat for selve båndet: wrapperen fyller stage-boksen, og båndbredden begrenses av både tilgjengelig bredde og høyde. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand{ width:var(--mobile-band-fit-width,100%)!important; max-width:100%!important; height:auto!important;max-height:100%!important; margin:0 auto!important; flex:0 0 auto!important; transform:none!important } } /* ============================================================ NyDesignerModul 135 — relativ mobilgeometri + 5 % sikkerhetsramme Hele den forenklede designeren bruker 95 % av faktisk visualViewport. Høyder beregnes relativt i start-launcher.js, slik at mindre skjermer komprimerer sonene før noe får lov til å gå utenfor arbeidsflaten. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ position:fixed!important; left:var(--mobile-safe-left,2.5vw)!important; top:var(--mobile-safe-top,2.5vh)!important; right:auto!important;bottom:auto!important; width:var(--mobile-safe-width,95vw)!important; height:var(--mobile-safe-height,95vh)!important; max-width:none!important;max-height:none!important; margin:0!important;box-sizing:border-box!important; border:5px solid #111!important;border-radius:0!important; overflow:hidden!important;background:#eff9fd!important; box-shadow:0 0 0 100vmax #111!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ height:var(--mobile-head-h,38px)!important; min-height:var(--mobile-head-h,38px)!important; max-height:var(--mobile-head-h,38px)!important; box-sizing:border-box!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ position:relative!important; height:calc(100% - var(--mobile-head-h,38px))!important; min-height:0!important; padding:0 8px calc(var(--mobile-footer-h,34px) + var(--mobile-footer-bottom,4px) + 4px)!important; box-sizing:border-box!important;overflow:hidden!important } /* Båndsonen fyller en relativ andel av tilgjengelig høyde. Selve båndet bruker fortsatt L134-fit, så både bredde og høyde må være innenfor boksen. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ position:absolute!important; left:8px!important;right:8px!important; top:var(--mobile-stage-top,4px)!important; width:auto!important; height:var(--mobile-stage-h,84px)!important; min-height:0!important;max-height:none!important; margin:0!important;padding:0!important; box-sizing:border-box!important;overflow:hidden!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ position:absolute!important;inset:3px 7px!important; width:auto!important;height:auto!important;min-height:0!important; margin:0!important;padding:0!important; display:flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important;overflow:hidden!important } /* Størrelsesspaken følger båndets relative nederkant, ikke en fast Y-verdi. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control{ position:absolute!important; left:8px!important;right:8px!important; top:var(--mobile-size-top,94px)!important; width:auto!important; height:var(--mobile-size-h,34px)!important; min-height:0!important;max-height:none!important; margin:0!important;padding:2px 9px!important; box-sizing:border-box!important } /* Dokken følger sonene over. Ingen fast 96/135px-koordinat lenger. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-dock.is-mobile-dock{ position:absolute!important; left:8px!important;right:8px!important; top:var(--mobile-dock-normal-top,94px)!important; bottom:auto!important;width:auto!important; margin:0!important;padding:0!important; transform:none!important;translate:none!important; max-height:calc(100% - var(--mobile-dock-normal-top,94px) - var(--mobile-footer-h,34px) - var(--mobile-footer-bottom,4px) - 6px)!important; overflow:auto!important;box-sizing:border-box!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-start-shell, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tools{ height:var(--mobile-tools-h,56px)!important; min-height:var(--mobile-tools-h,56px)!important; max-height:var(--mobile-tools-h,56px)!important; box-sizing:border-box!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-start-shell{ margin:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool{ min-height:0!important;height:100%!important;padding:2px!important } /* Panelet omslutter innholdet i stedet for å reservere en stor hvit flate. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel{ height:auto!important;min-height:0!important;max-height:100%!important; margin:0!important;padding:5px 7px!important; box-sizing:border-box!important;overflow:auto!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls{ min-height:0!important;height:auto!important;margin:0!important;padding:0!important; align-items:end!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel :is(input,select,button){ min-height:var(--mobile-control-h,38px)!important; height:var(--mobile-control-h,38px)!important; box-sizing:border-box!important } /* Én relativ footer-rad, alltid innenfor sikkerhetsrammen. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows:var(--mobile-footer-h,34px)!important; gap:7px!important; position:absolute!important; left:8px!important;right:8px!important;top:auto!important; bottom:var(--mobile-footer-bottom,4px)!important; width:auto!important;max-width:none!important; height:var(--mobile-footer-h,34px)!important; min-height:0!important;max-height:none!important; margin:0!important;padding:0!important; box-sizing:border-box!important;overflow:hidden!important; background:transparent!important;border:0!important;box-shadow:none!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>button{ width:100%!important;height:100%!important;min-height:0!important;max-height:none!important; margin:0!important;padding:3px 7px!important; box-sizing:border-box!important;font-size:10px!important;line-height:1.05!important } } /* ============================================================ NyDesignerModul 137/138 — autoritativ mobilfooter som direkte modalbarn. HTML eier footerbeholderen. cart-actions.js eier den ekte #taBortDesignBtn og setter den inn rett foran #ferdigBtn. CSS eier bare mobilgeometrien. Footer ligger utenfor .body og kan derfor ikke skyves av panel-/body-geometri eller gamle desktopregler. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ padding:0 8px!important; overflow:hidden!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; gap:6px!important; position:absolute!important; left:8px!important; right:8px!important; top:auto!important; bottom:var(--mobile-footer-bottom,4px)!important; width:auto!important; min-width:0!important; max-width:none!important; height:var(--mobile-footer-h,34px)!important; min-height:var(--mobile-footer-h,34px)!important; max-height:var(--mobile-footer-h,34px)!important; margin:0!important; padding:0!important; box-sizing:border-box!important; align-items:stretch!important; justify-items:stretch!important; overflow:hidden!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; translate:none!important; z-index:2147483000!important; pointer-events:auto!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#taBortDesignBtn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#ferdigBtn{ display:flex!important; position:static!important; inset:auto!important; grid-row:1!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:none!important; height:100%!important; min-height:0!important; max-height:none!important; margin:0!important; padding:3px 6px!important; box-sizing:border-box!important; border-radius:6px!important; font-size:10px!important; line-height:1.05!important; white-space:normal!important; text-align:center!important; transform:none!important; translate:none!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#taBortDesignBtn{ grid-column:1!important; background:#fff!important; color:#183247!important; border:1.5px solid #c9dce5!important; font-weight:700!important; box-shadow:none!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#ferdigBtn{ grid-column:2!important; background:#04a9fc!important; color:#fff!important; border:1.5px solid #04a9fc!important; font-weight:700!important; box-shadow:none!important } } /* ============================================================ NyDesignerModul 139 — én relativ arbeidsflate for alle mobilpaneler. Når et fagpanel er åpent overtar det plassen til hovedverktøyraden. Arbeidsflaten måles mellom siste synlige kontroll over og den autoritative footer-raden under. Bare panelinnholdet får scrolle ved reell plassmangel. ============================================================ */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ .mobile-panel-nav{display:none} @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Lukket tilstand: bare hovedverktøyraden bruker dokken. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ bottom:auto!important; height:var(--mobile-tools-h,56px)!important; max-height:var(--mobile-tools-h,56px)!important; overflow:visible!important } /* Åpent fagpanel/Juster: bruk hele målte arbeidsfeltet frem til footer. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .designer-quick-dock.is-mobile-dock{ display:block!important; top:var(--mobile-live-work-top,var(--mobile-dock-normal-top,94px))!important; bottom:var(--mobile-live-work-bottom,calc(var(--mobile-footer-bottom,4px) + var(--mobile-footer-h,36px) + var(--mobile-panel-gap,4px)))!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:hidden!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected.mobile-adjust-open .designer-quick-dock.is-mobile-dock{ top:var(--mobile-live-work-top,var(--mobile-dock-text-top,134px))!important } /* Fagpanelet erstatter hovedknappene fullstendig. Denne regelen ligger sist og vinner dermed over den eldre regelen som tvang shell tilbake til block. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-start-shell, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .designer-start-shell{ display:none!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .designer-quick-tools{ display:none!important } /* Generisk fagpanel: fyller tilgjengelig høyde. Navlinjen blir stående mens resten av innholdet kan scrolle lokalt dersom telefonen faktisk er lavere. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel{ display:block!important; position:relative!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0 7px 6px!important; box-sizing:border-box!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel{ height:auto!important; max-height:100%!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav>strong{ color:#536b7b!important; font:700 10px/1 "Sora",Arial,sans-serif!important; letter-spacing:.1px!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .mobile-panel-nav .mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-object-controls .mobile-back-tools{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:72px!important; height:24px!important; min-height:24px!important; margin:0!important; padding:2px 9px!important; border:1px solid #c9dce5!important; border-radius:7px!important; background:#f3f9fc!important; color:#183247!important; box-shadow:none!important; font:700 10px/1 "Sora",Arial,sans-serif!important; text-transform:none!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-panel-close{ display:none!important } /* Tegn-panelet bruker nå forelderens fulle arbeidsrom; gammel intern max-height skal ikke lage en ny kunstig bunnkant. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="draw"] .designer-quick-panel #designerDrawTools{ width:100%!important; max-height:none!important; overflow:visible!important; margin:0!important; padding:5px 8px 7px!important; gap:5px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="draw"] .designer-quick-panel .designer-draw-intro{ margin:0!important; min-height:22px!important; padding-right:4px!important } /* Oppsett får hele arbeidsfeltet. Bare selve galleriet trenger intern scroll. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="layout"] .designer-quick-panel .designer-layout-panel{ height:calc(100% - var(--mobile-panel-nav-h,28px) - 4px)!important; max-height:none!important; min-height:0!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="layout"] .designer-quick-panel .layout-gallery{ min-height:0!important; overflow-y:auto!important } /* Juster er samme type fagvisning, men bruker eksisterende objektstate. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-object-controls{ display:block!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; margin:0!important; padding:6px 8px!important; box-sizing:border-box!important; overflow-y:auto!important } } @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.mobile-adjust-open) .mobile-object-controls{ display:none!important } } @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .mobile-panel-nav{display:none!important} } /* ============================================================ NyDesignerModul 140 — LANDSCAPE MOBILE WORKSPACE ARCHITECTURE Mobil-only. Clipart/DOM-bånd beholdes; ingen fotoressurs brukes. ============================================================ */ @media (orientation:landscape) and (max-width:1100px) and (max-height:560px) and (pointer:coarse){ body.eventro-mobile-simple-designer{ --eventro-mobile-bg:#111c25; --eventro-mobile-panel:#172631; --eventro-mobile-panel-2:#1d2d38; --eventro-mobile-line:rgba(208,232,241,.24); --eventro-mobile-text:#f4fbfe; --eventro-mobile-muted:#a9bbc5; --eventro-mobile-accent:#66dff2; } /* [FAMILIE:BANDKANT] Kanten hoerer sammen med flaten under. Endrer noen #0a1117, staar kantfargen rett ved siden av og blir rettet i samme aandedrag. */ body.eventro-mobile-simple-designer #bigBand{ --band-rim:#ffffff!important; --band-rim-soft:rgba(255,255,255,.34)!important } body.eventro-mobile-simple-designer #designBackdrop{ background:#0a1117!important; opacity:.96!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ border:1px solid rgba(185,218,231,.22)!important; border-radius:18px!important; background:linear-gradient(180deg,#17232d 0%,#101a22 100%)!important; box-shadow:0 18px 60px rgba(0,0,0,.42)!important; color:var(--eventro-mobile-text)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ display:flex!important;align-items:center!important; margin:0!important;padding:4px 12px!important; border:0!important;border-bottom:1px solid rgba(205,230,240,.1)!important; background:transparent!important;color:#fff!important; font:700 clamp(13px,2.2vh,17px)/1.1 "Sora",Arial,sans-serif!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 #step4title{ opacity:.9!important;white-space:nowrap!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-head-actions{ margin-left:auto!important;display:flex!important;align-items:center!important;gap:6px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .keep-hdr-btn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-head-preview-slot{ display:none!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .helpbtn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #back4{ width:var(--mobile-touch-target,44px)!important;height:var(--mobile-touch-target,44px)!important; min-width:var(--mobile-touch-target,44px)!important;min-height:var(--mobile-touch-target,44px)!important; border-radius:10px!important;border:1px solid var(--eventro-mobile-line)!important; background:rgba(255,255,255,.04)!important;color:#fff!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ background:transparent!important;padding-left:10px!important;padding-right:10px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .selhint, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #step4hint, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .zones{ display:none!important } /* Den eksisterende DOM-båndgrafikken er selve cliparten. Wrapperen eier kun view-transform. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ border:0!important;border-radius:12px!important;background:transparent!important; overflow:hidden!important;touch-action:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ overflow:visible!important;background:transparent!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-view-transform{ position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important; width:max-content!important;max-width:100%!important;height:auto!important; transform-origin:center center!important;will-change:transform!important;touch-action:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand{ filter:drop-shadow(0 5px 9px rgba(0,0,0,.30))!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .obj{ touch-action:none!important } /* Flyttehåndtak: UI-overlay, aldri del av designstate. */ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ .mobile-band-move-handle{ display:none } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer .mobile-band-move-handle{ display:grid!important;position:absolute!important;z-index:95!important; width:var(--mobile-touch-target,44px)!important;height:var(--mobile-touch-target,44px)!important; min-width:44px!important;min-height:44px!important;padding:0!important; translate:-50% -50%!important;place-items:center!important; border:1.5px solid rgba(102,223,242,.82)!important;border-radius:50%!important; background:rgba(14,31,40,.90)!important;color:#eafcff!important; box-shadow:0 4px 16px rgba(0,0,0,.32),0 0 0 2px rgba(255,255,255,.12)!important; touch-action:none!important;user-select:none!important;-webkit-user-select:none!important } /* Verktøyrad: seks store, men dynamisk fordelte touch-kort. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-start-shell, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tools{ background:transparent!important;border:0!important;box-shadow:none!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tools{ display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:clamp(4px,1vw,9px)!important;padding:3px 0!important;overflow:visible!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool{ display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; gap:2px!important;min-width:0!important;height:100%!important;padding:3px 4px!important; border:1px solid rgba(222,238,245,.32)!important;border-radius:10px!important; background:#f7fbfd!important;color:#0d1820!important; box-shadow:0 3px 10px rgba(0,0,0,.16)!important; font:600 clamp(9px,1.9vh,12px)/1.05 "Sora",Arial,sans-serif!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool svg{ width:clamp(18px,4vh,25px)!important;height:clamp(18px,4vh,25px)!important;stroke:#14232d!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-tool-icon{ font-size:clamp(18px,4vh,25px)!important;line-height:1!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool:active, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[aria-pressed="true"]{ border-color:var(--eventro-mobile-accent)!important;box-shadow:0 0 0 2px rgba(102,223,242,.25)!important } /* Felles panelshell. Header/action står, kun body får scrolle. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .designer-quick-dock.is-mobile-dock{ border:1px solid var(--eventro-mobile-line)!important;border-radius:12px!important; background:rgba(22,38,49,.96)!important;box-shadow:0 6px 20px rgba(0,0,0,.16)!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-object-controls{ color:var(--eventro-mobile-text)!important;background:transparent!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav{ background:rgba(22,38,49,.98)!important;border-bottom:1px solid var(--eventro-mobile-line)!important; color:#fff!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav>strong{ color:#eafcff!important;font-size:11px!important } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .mobile-panel-nav .mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-object-controls .mobile-back-tools{ min-width:78px!important;height:28px!important;border-color:rgba(203,230,240,.3)!important; background:rgba(255,255,255,.045)!important;color:#eafcff!important } /* Tekstpanel: behold eksisterende input og eierskap, men presenter det horisontalt og kompakt. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #textCtrls{ display:grid!important;grid-template-columns:minmax(190px,1.7fr) minmax(130px,.9fr)!important; grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:6px!important; padding:2px 4px 6px!important;background:transparent!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .tekst-row, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .font-row{ display:contents!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .tekst-col{ grid-column:1 / -1!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .farge-col{ grid-column:2!important;grid-row:2!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .font-col{ grid-column:1!important;grid-row:2!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .size-col{ display:none!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .style-col{ grid-column:1 / -1!important;grid-row:3!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .lbl{ color:var(--eventro-mobile-muted)!important;font-size:9px!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] input, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] select, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] button{ min-height:36px!important;border-radius:8px!important } /* Objektkontroll: én stor størrelsesspake først, avansert X/Y osv. kan fortsatt nås under. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px 10px!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control{ border:1px solid var(--eventro-mobile-line)!important;border-radius:10px!important; background:rgba(22,38,49,.92)!important;color:#eafcff!important } /* Footer: alltid tilgjengelig, men aldri unødvendig høy. */ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot{ gap:10px!important;background:transparent!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#taBortDesignBtn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#ferdigBtn{ min-height:var(--mobile-touch-target,44px)!important;border-radius:10px!important; font:700 clamp(9px,2vh,12px)/1.05 "Sora",Arial,sans-serif!important;letter-spacing:.03em!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#taBortDesignBtn{ background:transparent!important;color:#eefaff!important;border:1px solid rgba(214,236,245,.55)!important } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#ferdigBtn{ background:linear-gradient(90deg,#68dfee,#71e8f6)!important;color:#071820!important;border:0!important } /* Keyboard mode: band blir kompakt preview, input/OK prioriteres. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage{ height:clamp(62px,19vh,84px)!important } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .designer-quick-dock.is-mobile-dock{ border:0!important;background:transparent!important;box-shadow:none!important } /* Komprimeringstrinn – aldri skaler hele UI-et. */ body.eventro-mobile-simple-designer #resultArea[data-mobile-compression="2"]>h2 #step4title{font-size:12px!important} body.eventro-mobile-simple-designer #resultArea[data-mobile-compression="2"] .designer-quick-tool span:last-child{font-size:9px!important} body.eventro-mobile-simple-designer #resultArea[data-mobile-compression="3"]>h2 #step4title{display:none!important} } /* ============================================================ NyDesignerModul 141 — koordinert WORK / PANEL / KEYBOARD-geometri. WORK-stage er en ekte arbeidsflate. Panel/keyboard komprimerer bare preview-regionen; bånd-view-state eies fortsatt av mobile-view.js. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ height:var(--mobile-stage-work-h,var(--mobile-stage-h,96px))!important; overflow:hidden!important; /* Her sto: transition:height 220ms cubic-bezier(.2,.72,.2,1) .stage er usynlig - gjennomsiktig bakgrunn, ingen kant - og finnes bare for aa klippe. Aa animere hoyden ga ingenting aa se paa, men gjorde flaten uleselig for den som skulle maale den: onLayout fyrer EN gang, helt i starten av de 220 millisekundene, og leste da en hoyde midt i bevegelsen. Baandet ble plassert etter en flate som ikke var ferdig med aa bli til, og sto der. Naa snapper flaten, og det er baandet som glir - en ting i bevegelse, ett tempo, mot et ferdig utregnet maal. Kontrollert: baandet er ca 62 px, flaten minst 157, og i panelmodus begrenser scaleLimits zoomen til flatens hoyde. Baandet kan derfor ikke bli klippet mens det glir. */ } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .stage{ height:var(--mobile-stage-panel-h,var(--mobile-stage-h,96px))!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .stage, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage{ height:var(--mobile-stage-keyboard-h,68px)!important; } /* HOME-posisjonen må være stabil selv når WORK-stage er høy. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-view-transform{ flex:0 0 auto!important; margin-top:3px!important; max-width:none!important; } /* Toolbar har bare to reelle arbeidsposisjoner. Hysterese styres av JS. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ top:var(--mobile-dock-home-top,var(--mobile-dock-normal-top,96px))!important; transition:top 220ms cubic-bezier(.2,.72,.2,1)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-mobile-toolbar-position="BOTTOM"]:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ top:var(--mobile-dock-bottom-top,var(--mobile-dock-normal-top,96px))!important; } /* Interaktive kontroller skal ikke bli små for å redde en trang layout. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-object-controls .mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] input, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] select, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] button{ min-height:var(--mobile-touch-target,44px)!important; } /* Panelmodus eier ikke båndgestures. Håndtaket skjules også av JS, men CSS-regelen gjør tilstanden deterministisk før neste frame. */ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-band-move-handle{ display:none!important; } } /* ============================================================ NyDesignerModul 142 — trygg objektvalg + tydelig sletting på mobil. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:stretch!important; gap:7px!important; } body.eventro-mobile-simple-designer #bigBand .obj.mobile-delete-armed{ opacity:.42!important; outline:2px dashed rgba(255,88,88,.95)!important; outline-offset:2px!important; } } \n\n/* ============================================================ NyDesignerModul 144 — valgt objekt overtar toolbar-sonen. Størrelsesspaken skal aldri ligge oppå båndet. Når et objekt er valgt skjules hovedtoolbaren og en større objektstripe bruker samme nederste arbeidsregion. Avansert Juster og Slett beholdes på stripen. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Vanlig toolbar erstattes fullstendig så lenge et objekt er valgt. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ display:none!important; } /* Den store størrelsesstripen bruker toolbarens BOTTOM-sone, aldri band-sonen. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ display:grid!important; position:absolute!important; left:8px!important; right:8px!important; top:var(--mobile-dock-bottom-top,var(--mobile-dock-normal-top,96px))!important; width:auto!important; height:var(--mobile-tools-h,60px)!important; min-height:54px!important; max-height:70px!important; z-index:43!important; grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important; gap:9px!important; margin:0!important; padding:7px 8px 7px 12px!important; box-sizing:border-box!important; border:1px solid rgba(113,232,246,.44)!important; border-radius:12px!important; background:rgba(18,34,45,.97)!important; box-shadow:0 7px 20px rgba(0,0,0,.22),0 0 0 1px rgba(113,232,246,.05) inset!important; } /* Ved panel/keyboard/avansert Juster er quick-stripen ikke en konkurrerende region. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open .mobile-text-size-control, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-text-size-control, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .mobile-text-size-control{ display:none!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label{ display:grid!important; grid-template-columns:minmax(105px,132px) minmax(150px,1fr)!important; align-items:center!important; gap:12px!important; min-width:0!important; height:100%!important; margin:0!important; color:#effcff!important; font:700 12px/1.08 "Sora",Arial,sans-serif!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label>span{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:3px!important; min-width:0!important; white-space:nowrap!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label b{ color:#f4fdff!important; font-size:12px!important; letter-spacing:.01em!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ color:#71e8f6!important; font-size:13px!important; font-weight:800!important; } /* Stor, lett å treffe slider. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]{ -webkit-appearance:none!important; appearance:none!important; width:100%!important; height:34px!important; min-height:34px!important; margin:0!important; padding:0!important; background:transparent!important; accent-color:#71e8f6!important; touch-action:none!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-runnable-track{ height:9px!important; border-radius:999px!important; background:linear-gradient(90deg,rgba(113,232,246,.72),rgba(113,232,246,.18))!important; box-shadow:0 0 0 1px rgba(113,232,246,.18) inset!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none!important; width:28px!important; height:28px!important; margin-top:-9.5px!important; border:3px solid #071820!important; border-radius:50%!important; background:#71e8f6!important; box-shadow:0 0 0 2px rgba(255,255,255,.92),0 3px 9px rgba(0,0,0,.28)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-track{ height:9px!important; border:0!important; border-radius:999px!important; background:linear-gradient(90deg,rgba(113,232,246,.72),rgba(113,232,246,.18))!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-thumb{ width:28px!important; height:28px!important; border:3px solid #071820!important; border-radius:50%!important; background:#71e8f6!important; box-shadow:0 0 0 2px rgba(255,255,255,.92),0 3px 9px rgba(0,0,0,.28)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-adjust{ min-width:64px!important; border:1px solid rgba(113,232,246,.52)!important; background:rgba(113,232,246,.10)!important; color:#dffbff!important; } } /* ============================================================ NyDesignerModul 145 — objektstripe nederst + høyere HOME-bånd + kontrollert side-pan. Toolbar glir fysisk ned og ut ved objektvalg. Objektstripen ligger så lavt som mulig uten å dekke den autoritative footer-raden (Ta bort design / Ferdig). ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Båndet starter høyere. Layoutmotoren setter også stageTop=0 og en lavere headerhøyde; denne regelen fjerner siste optiske luft. */ /* Toolbar får en ekte inn/ut-animasjon. I normaltilstand står den på sin beregnede plass. Når objekt er valgt glir hele raden ned forbi skjermen. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ display:block!important; opacity:1!important; transform:translateY(0)!important; transition:top 220ms cubic-bezier(.2,.72,.2,1), transform 240ms cubic-bezier(.2,.72,.2,1), opacity 180ms ease!important; will-change:transform,opacity!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ display:block!important; transform:translateY(calc(100vh + var(--mobile-tools-h,60px)))!important; opacity:0!important; pointer-events:none!important; } /* Objektstripen overtar den nederste tilgjengelige arbeidsplassen, direkte over footeren. Dermed ligger spaken konsekvent nederst i designerflaten. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ display:grid!important; position:absolute!important; left:8px!important; right:8px!important; top:auto!important; bottom:calc(var(--mobile-footer-bottom,4px) + var(--mobile-footer-h,44px) + 5px)!important; width:auto!important; height:clamp(64px,19vh,78px)!important; min-height:64px!important; max-height:78px!important; z-index:2147482998!important; grid-template-columns:minmax(0,1fr) auto auto!important; gap:10px!important; padding:8px 9px 8px 13px!important; border-radius:13px!important; box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 1px rgba(113,232,246,.08) inset!important; animation:eventroObjectBarIn 220ms cubic-bezier(.2,.72,.2,1) both!important; } @keyframes eventroObjectBarIn{ from{transform:translateY(22px);opacity:0} to{transform:translateY(0);opacity:1} } } /* ============================================================ NyDesignerModul 146 — større objektslider, høyere HOME og stabil keyboard-view. Siste autoritet for landscape mobile. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* HOME: sekundær designtittel får minimalt vertikalt budsjett. Båndet starter dermed nesten helt oppe i faktisk visualViewport/safe-area. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ height:var(--mobile-head-h,14px)!important; min-height:var(--mobile-head-h,14px)!important; max-height:var(--mobile-head-h,14px)!important; padding:0 8px!important; overflow:hidden!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 #step4title{ font-size:9px!important;line-height:1!important;opacity:.66!important; } /* Objektstripen: større faktisk gripeflate og lengre/bredere glidebane. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label b{ font-size:13px!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ font-size:16px!important;font-weight:800!important; } /* KEYBOARD: eldre regler skjulte hele .stage og kunne samtidig flytte det fokuserte #tTekst inn i et overlay inne i samme stage. Når visualViewport endret seg i flere trinn, kunne alt synlig UI forsvinne og bare den svarte sikkerhetsbakgrunnen stå igjen. L146 holder i stedet en kompakt band-preview levende og lar body/panel følge den målte visualViewport-geometrien. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open{ inset:auto!important; left:var(--mobile-safe-left,8px)!important; top:var(--mobile-safe-top,4px)!important; width:var(--mobile-safe-width,calc(100vw - 16px))!important; height:var(--mobile-safe-height,100dvh)!important; max-height:var(--mobile-safe-height,100dvh)!important; background:#eff9fd!important; overflow:hidden!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open>h2{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open>.body{ display:block!important; position:relative!important; inset:auto!important; width:100%!important; height:100%!important; min-height:0!important; padding:0 8px!important; box-sizing:border-box!important; overflow:hidden!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage{ display:block!important; position:absolute!important; left:8px!important;right:8px!important;top:0!important; width:auto!important; height:var(--mobile-stage-keyboard-h,62px)!important; min-height:54px!important; margin:0!important;padding:0!important; overflow:hidden!important; } /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open #edFoot, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .designer-start-shell{ display:none!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .designer-quick-dock.is-mobile-dock{ display:block!important; position:absolute!important; left:8px!important;right:8px!important; top:calc(var(--mobile-stage-keyboard-h,62px) + var(--mobile-panel-gap,5px))!important; bottom:auto!important; width:auto!important; max-height:calc(100% - var(--mobile-stage-keyboard-h,62px) - var(--mobile-panel-gap,5px))!important; margin:0!important;padding:0!important; transform:none!important;translate:none!important; overflow:visible!important; } /* Når native trigger eier tastaturet ligger skrivefelt/OK allerede fixed rett over keyboardet. Da trenger dokken ikke konkurrere om den lille høyden. */ body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage{ display:block!important; } } /* ============================================================ NyDesignerModul 147 — robust stor objektslider. Visuell slutt-autoritet for landscape mobile. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Selve objektstripen får nok høyde til en egen informasjonsrad + slider-rad. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ height:clamp(84px,25vh,96px)!important; min-height:84px!important; max-height:96px!important; grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important; column-gap:10px!important; padding:8px 10px 8px 13px!important; } /* Label-kolonnen er nå TO RADER: navn/verdi øverst, bred slider nederst. Dette hindrer at tekst eller prosentverdi havner bak selve spaken. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:24px 54px!important; align-items:center!important; gap:0!important; min-width:0!important; width:100%!important; height:78px!important; margin:0!important; color:#f7fdff!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label>span{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; min-width:0!important; width:100%!important; height:24px!important; line-height:24px!important; position:relative!important; z-index:3!important; color:#f7fdff!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label b{ display:block!important; color:#f7fdff!important; font:800 14px/24px "Sora",Arial,sans-serif!important; text-shadow:0 1px 1px rgba(0,0,0,.45)!important; white-space:nowrap!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ display:block!important; position:static!important; z-index:4!important; min-width:52px!important; padding:2px 7px!important; border:1px solid rgba(113,232,246,.34)!important; border-radius:999px!important; background:rgba(4,169,252,.12)!important; color:#82f2ff!important; font:800 15px/18px "Sora",Arial,sans-serif!important; text-align:center!important; white-space:nowrap!important; } /* Fullt custom WebKit-range. appearance:none settes både på input og thumb slik at Android Chrome ikke faller tilbake til den tynne native varianten. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]{ -webkit-appearance:none!important; appearance:none!important; display:block!important; box-sizing:border-box!important; width:100%!important; height:54px!important; min-height:54px!important; margin:0!important; padding:0 4px!important; border:0!important; outline:0!important; background:transparent!important; accent-color:#71e8f6!important; touch-action:none!important; position:relative!important; z-index:2!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-runnable-track{ -webkit-appearance:none!important; box-sizing:border-box!important; width:100%!important; height:18px!important; border:2px solid rgba(181,247,255,.28)!important; border-radius:999px!important; background:linear-gradient(180deg,#7eeefa 0%,#46cedf 48%,#289aad 52%,#1d6977 100%)!important; box-shadow:0 2px 7px rgba(0,0,0,.30) inset,0 0 0 1px rgba(113,232,246,.12)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none!important; appearance:none!important; box-sizing:border-box!important; width:50px!important; height:50px!important; margin-top:-16px!important; /* exact vertical centering: (18 - 50) / 2 */ border:4px solid #ffffff!important; border-radius:50%!important; background:#08c9e8!important; box-shadow:0 0 0 4px rgba(4,169,252,.28),0 5px 13px rgba(0,0,0,.40)!important; } /* Firefox-equivalent. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-track{ box-sizing:border-box!important; width:100%!important; height:18px!important; border:2px solid rgba(181,247,255,.28)!important; border-radius:999px!important; background:linear-gradient(180deg,#7eeefa 0%,#46cedf 48%,#289aad 52%,#1d6977 100%)!important; box-shadow:0 2px 7px rgba(0,0,0,.30) inset!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-thumb{ box-sizing:border-box!important; width:50px!important; height:50px!important; border:4px solid #ffffff!important; border-radius:50%!important; background:#08c9e8!important; box-shadow:0 0 0 4px rgba(4,169,252,.28),0 5px 13px rgba(0,0,0,.40)!important; } /* Handlingsknappene sentreres mot den samlede sliderblokken. */ } /* ============================================================ NyDesignerModul 148 — Juster-rekkefølge + én animasjonseier. Mobil landscape only. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Juster-panel: tre logiske kolonner, hver med topp/bunn-par: 1) skvis H/V, 2) størrelse/roter, 3) flytt X/Y. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(58px,1fr))!important; gap:8px 12px!important; align-items:stretch!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label{ min-width:0!important; margin:0!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="sx"]{grid-column:1;grid-row:1} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="sy"]{grid-column:1;grid-row:2} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="scale"]{grid-column:2;grid-row:1} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="rot"]{grid-column:2;grid-row:2} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="x"]{grid-column:3;grid-row:1} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label[data-mobile-control="y"]{grid-column:3;grid-row:2} /* Headeren har nå Tilbakestill + OK i stedet for Slett. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-reset, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-ok{ min-height:42px!important; padding:0 14px!important; border-radius:10px!important; font:800 11px/1 "Sora",Arial,sans-serif!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-reset{ border:1px solid rgba(208,232,241,.36)!important; background:rgba(255,255,255,.06)!important; color:#eefaff!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-ok{ border:1px solid rgba(113,232,246,.70)!important; background:#71e8f6!important; color:#071820!important; } /* Mobilpanelene bruker WAAPI fra start-launcher som eneste animasjonseier. De historiske dråpe/keyframe-reglene deaktiveres her eksplisitt. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel.quick-panel-forming, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel.quick-panel-closing, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel.quick-panel-forming>*, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel.quick-panel-closing>*{ animation:none!important; } /* Toolbaren skal ikke både animere top og transform. Layoutmotoren eier top; CSS-animasjonen eier kun inn/ut-bevegelse og opacity. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.designer-tool-panel-open):not(.mobile-adjust-open) .designer-quick-dock.is-mobile-dock{ transition:transform 220ms cubic-bezier(.2,.72,.2,1),opacity 160ms ease!important; } } /* ============================================================ NyDesignerModul 149 — samlet mobilfasit etter skjermgjennomgang. Kun touch/mobile. Desktop-regler overstyres ikke. - én keyboardflyt (native fixed input) - HOME-band helt øverst - quick object-strip: størrelse + flere justeringer + OK - stort, uklippet "Snu telefonen"-kort ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* HOME skal visuelt ligge nesten helt oppe. WORK-stage kan fortsatt være høy for pan/zoom, men selve band-wrapperen bruker kun home-regionen øverst. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ top:0!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ inset:auto 7px auto 7px!important; top:0!important; bottom:auto!important; height:var(--mobile-band-home-h,var(--mobile-stage-h,92px))!important; min-height:0!important; align-items:flex-start!important; justify-content:center!important; padding:0!important; overflow:visible!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-view-transform{ margin-top:0!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] #designZoomWrap{ height:var(--mobile-stage-panel-h,82px)!important } /* Quick objektstripe: prosent hører til navnet, ikke ute ved handlingsknappene. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label>span{ justify-content:flex-start!important; gap:10px!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ margin:0!important; min-width:58px!important; font-size:15px!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-adjust, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-ok{ display:inline-flex!important; align-items:center!important; justify-content:center!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0 12px!important; border-radius:11px!important; font:800 11px/1.15 "Sora",Arial,sans-serif!important; text-align:center!important; white-space:normal!important; touch-action:manipulation!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-adjust{ min-width:156px!important; border:1px solid rgba(210,232,241,.72)!important; background:#f7fbfd!important; color:#172b38!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-ok{ min-width:72px!important; border:1px solid rgba(113,232,246,.82)!important; background:#71e8f6!important; color:#071820!important } /* KEYBOARD VIEW: input-raden vinner alltid høydekampen. Stage kan være 0 px på ekstremt lave visualViewport-er; ved normal høyde vises hele bandet som en sentrert kompakt preview. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage{ top:0!important; height:var(--mobile-stage-keyboard-h,56px)!important; min-height:0!important; border:0!important; background:#eff9fd!important; overflow:hidden!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage:has(#designZoomWrap[style]){ min-height:0!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-trigger{ font-size:20px!important; line-height:1.15!important; padding:7px 12px!important; border-width:2px!important; box-shadow:0 4px 14px rgba(10,48,69,.28)!important } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-commit{ font-size:16px!important; border-radius:9px!important } } /* Portrett-intro må ligge utenfor stage-clipping. start-launcher flytter .rotmsg midlertidig til modalroten på mobil og setter den tilbake ved exit. */ @media (orientation:portrait) and (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg{ display:grid!important; position:absolute!important; inset:0!important; z-index:2147483600!important; place-items:center!important; padding:clamp(18px,6vw,34px)!important; box-sizing:border-box!important; overflow:visible!important; background:rgba(239,249,253,.98)!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg[data-enabled="false"]{ display:none!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .rotmsg-in{ width:min(92vw,430px)!important; min-height:min(54vh,390px)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; padding:34px 28px!important; border:1px solid #c8dce6!important; border-radius:24px!important; background:#fff!important; box-shadow:0 22px 58px rgba(23,59,79,.24)!important; text-align:center!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .rotmsg-ic{ display:grid!important; place-items:center!important; width:96px!important;height:150px!important; margin:0 0 24px!important; font-size:62px!important; transform-origin:50% 50%!important; animation:eventroMobileRotate90 2.2s cubic-bezier(.2,.72,.2,1) infinite alternate!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg b{ color:#183247!important; font:800 28px/1.15 "Sora",Arial,sans-serif!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg small{ max-width:320px!important; margin-top:12px!important; color:#557080!important; font:500 15px/1.5 "Sora",Arial,sans-serif!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .mobile-fullscreen-button{ width:min(100%,320px)!important; min-height:52px!important; margin-top:24px!important; border-radius:12px!important; font-size:14px!important } @keyframes eventroMobileRotate90{ 0%,18%{transform:rotate(0deg) scale(1)} 72%,100%{transform:rotate(90deg) scale(.96)} } } @media (prefers-reduced-motion:reduce){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .rotmsg-ic{animation:none!important;transform:rotate(90deg)!important} } /* ============================================================ NyDesignerModul 155 — AUTORITATIV MOBIL TEKST/KEYBOARD-OVERFLATE Erstatter L151–L154-lagene. Én regelpakke, én visuell eier. Mobil landscape only. Desktop berøres ikke. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Valgt objekt: stor slider beholdes, actionknappene er kompakte. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ height:clamp(76px,22vh,86px)!important; min-height:76px!important; max-height:86px!important; grid-template-columns:minmax(0,1fr) minmax(146px,178px) 68px!important; align-items:center!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-adjust, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-ok{ height:44px!important;min-height:44px!important;max-height:44px!important; padding:0 10px!important;font-size:11px!important;line-height:1.15!important;border-radius:9px!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-adjust{min-width:146px!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-quick-ok{min-width:68px!important} /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-reset, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-ok{ height:40px!important;min-height:40px!important;max-height:40px!important;padding:0 12px!important;font-size:11px!important } /* KEYBOARD er en lukket presentasjonstilstand: ingen objektstripe, dock, footer eller header får dukke opp fordi selection-state fortsatt finnes. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .mobile-text-size-control, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-text-size-control, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control[hidden]{ display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important } body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open, body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open>.body, body.eventro-mobile-simple-designer.mobile-text-flight-out #resultArea.as-modal.mobile-simple-designer, body.eventro-mobile-simple-designer.mobile-text-flight-out #resultArea.as-modal.mobile-simple-designer>.body, body.eventro-mobile-simple-designer.mobile-text-flight-return #resultArea.as-modal.mobile-simple-designer, body.eventro-mobile-simple-designer.mobile-text-flight-return #resultArea.as-modal.mobile-simple-designer>.body{ background:#101a22!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .stage, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .stage{ display:block!important;position:absolute!important; left:8px!important;right:8px!important;top:0!important;width:auto!important; height:var(--mobile-text-keyboard-stage-h,60px)!important; min-height:var(--mobile-text-keyboard-stage-h,60px)!important; max-height:var(--mobile-text-keyboard-stage-h,60px)!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;overflow:hidden!important;translate:none!important } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open #designZoomWrap, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] #designZoomWrap{ position:absolute!important;inset:0 4px!important;width:auto!important;height:auto!important;min-height:0!important; margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important; background:transparent!important;overflow:visible!important } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .mobile-band-view-transform{margin:0!important} /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open #edFoot, body.eventro-mobile-simple-designer.mobile-native-text-active #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open>h2, body.eventro-mobile-simple-designer.mobile-text-flight-out #resultArea.as-modal.mobile-simple-designer .designer-quick-dock.is-mobile-dock{ display:none!important;visibility:hidden!important;pointer-events:none!important } /* Native input follows visualViewport instantly. Fake input is the only animated carrier, so there is no CSS geometry tail competing with JS. */ body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-trigger, body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-commit{ transition:none!important } body.eventro-mobile-simple-designer .mobile-text-flight-box{ display:flex!important;position:fixed!important;z-index:2147483647!important;box-sizing:border-box!important; align-items:center!important;overflow:hidden!important;padding:7px 12px!important; border:2px solid #04a9fc!important;border-radius:9px!important;background:#fff!important;color:#183247!important; box-shadow:0 7px 22px rgba(10,48,69,.28)!important;font:600 16px/1.15 "Sora",Arial,sans-serif!important; white-space:nowrap!important;text-overflow:ellipsis!important;pointer-events:none!important; transform-origin:0 0!important;will-change:transform,left,top,width,height!important;transition:none!important } body.eventro-mobile-simple-designer.mobile-text-flight-out .mobile-native-text-trigger{ opacity:0!important;color:transparent!important;caret-color:transparent!important } body.eventro-mobile-simple-designer.mobile-text-flight-out .mobile-native-text-commit, body.eventro-mobile-simple-designer.mobile-text-flight-return .mobile-native-text-trigger, body.eventro-mobile-simple-designer.mobile-text-flight-return .mobile-native-text-commit{ opacity:0!important;pointer-events:none!important } /* Tekstverdi i fagpanelet er selve redigeringsknappen. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .mobile-text-value-slot{ display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-column:1!important;grid-row:1!important; align-items:stretch!important;gap:0!important;width:100%!important;height:var(--mobile-control-h,38px)!important; min-height:var(--mobile-control-h,38px)!important;margin:0!important;padding:0!important;box-sizing:border-box!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .mobile-text-value-slot[hidden]{display:none!important} /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-value-display{ appearance:none!important;-webkit-appearance:none!important;display:flex!important;align-items:center!important; justify-content:space-between!important;width:100%!important;min-width:0!important;height:100%!important; padding:0 11px!important;box-sizing:border-box!important;border:1px solid #aebfca!important;border-radius:8px!important; background:#fff!important;color:#183247!important;font:600 12px/1 "Sora",Arial,sans-serif!important; box-shadow:inset 0 1px 2px rgba(20,55,75,.08)!important;overflow:hidden!important;white-space:nowrap!important; text-overflow:ellipsis!important;cursor:pointer!important;pointer-events:auto!important;text-align:left!important;touch-action:manipulation!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-value-display>span{ overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-value-display:active{transform:translateY(1px)!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-value-pencil{ flex:0 0 auto!important;margin-left:10px!important;color:#04a9fc!important;font-size:16px!important;line-height:1!important } body.eventro-mobile-simple-designer.mobile-text-flight-return #resultArea.as-modal.mobile-simple-designer .mobile-text-value-display{opacity:0!important} /* L155 ownership rule: stage geometry switches atomically. The only visible motion between WORK/PANEL/KEYBOARD is the band-view transform owned by mobile-view.js. A second height transition was the last source of the two-step/elastic feeling around the keyboard. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ transition:none!important } } @media (prefers-reduced-motion:reduce){ body.eventro-mobile-simple-designer .mobile-text-flight-box{transition:none!important} } /* ============================================================ NyDesignerModul 156 — én mobil inputvei + konteksthandlinger. Siste autoritet for simplified landscape mobile. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* All tekst som ligger direkte på den mørke designerflaten må ha lys kontrast. Dette gjelder IKKE selve designobjektene på båndet. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 #step4title{ color:#e7f3f8!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .rekt-guider .uklamme-tekst, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .rekt-guider .uklamme.midt .uklamme-tekst, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .rekt-guider :is(.uklamme.venstre,.uklamme.hoyre) .uklamme-tekst{ color:#d7e8f0!important; text-shadow:0 1px 2px rgba(0,0,0,.78)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .rekt-guider .uklamme.midt .uklamme-tekst::after{ border-color:#d7e8f0!important; } /* Mobiltekst redigeres aldri contenteditable direkte på båndet. Hvis gammel DOM-state skulle overleve et browser-event, skal den heller ikke få et visuelt/redigerbart inline-lag. */ body.eventro-mobile-simple-designer #bigBand .obj.editing-text .t, body.eventro-mobile-simple-designer #bigBand .obj .t[contenteditable="true"]{ outline:none!important;caret-color:transparent!important; user-select:none!important;-webkit-user-select:none!important; } } /* Konteksthandlingene følger valgt objekt i viewport-koordinater og ligger utenfor band/stage-transformen. Dermed kan de aldri flyttes av band-view. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer .mobile-object-actions{ position:fixed!important;z-index:2147483644!important; display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important; box-sizing:border-box!important;padding:4px!important; border:1px solid rgba(193,222,235,.30)!important;border-radius:10px!important; background:rgba(16,29,38,.94)!important;box-shadow:0 6px 18px rgba(0,0,0,.34)!important; backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); pointer-events:auto!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer .mobile-object-actions[hidden]{display:none!important} body.eventro-mobile-simple-designer .mobile-object-actions button{ appearance:none!important;-webkit-appearance:none!important; min-height:34px!important;height:34px!important;padding:0 11px!important; border-radius:7px!important;font:700 11px/1 "Sora",Arial,sans-serif!important; white-space:nowrap!important;cursor:pointer!important;touch-action:manipulation!important; } body.eventro-mobile-simple-designer .mobile-object-edit{ border:1px solid rgba(4,169,252,.78)!important;background:#12364a!important;color:#dff6ff!important; } body.eventro-mobile-simple-designer .mobile-object-remove{ border:1px solid rgba(255,112,122,.72)!important;background:#4a2028!important;color:#fff!important; } body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-object-actions, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] ~ .mobile-object-actions{ display:none!important; } /* ============================================================ NyDesignerModul 158 — TEKSTSESJON EIER FOOTER-SYNLIGHET Historiske mobilgenerasjoner har flere #edFoot-regler. Under tekst/IME skal ingen av dem kunne vekke footer eller gamle footer-proxyer mens visualViewport og presentationMode skifter. Én varig body-state eier dette fra tekstflyvning starter til returfeltet har landet. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:DESIGNER-FOOTER] se docs/architecture/FAMILIE_designer-footer.md */ body.eventro-mobile-simple-designer.mobile-text-session-active #edFoot, body.eventro-mobile-simple-designer.mobile-text-session-active #taBortDesignBtn, body.eventro-mobile-simple-designer.mobile-text-session-active #ferdigBtn, body.eventro-mobile-simple-designer.mobile-text-session-active .mobile-footer-secondary-action, body.eventro-mobile-simple-designer.mobile-text-session-active [data-mobile-text-session-hidden="1"]{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } } /* ============================================================ NyDesignerModul 160 — faktisk glyfhøyde + konsistente pastellpaneler. Kun simplified landscape mobile. Desktop berøres ikke. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Valgt objekt bruker samme arbeidsregion som fagpanelet ellers bruker. Det gjør OBJECT SELECTED visuelt til en ekte paneltilstand, ikke en separat stripe som konkurrerer med footer/toolbaren nederst. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ top:var(--mobile-panel-top,var(--mobile-dock-home-top,96px))!important; bottom:auto!important; left:8px!important;right:8px!important;width:auto!important; height:clamp(76px,22vh,90px)!important;min-height:76px!important;max-height:90px!important; padding:9px 10px 9px 14px!important; background:#ffe1eb!important; border:1px solid #f1a7bd!important; color:#422433!important; box-shadow:0 8px 22px rgba(83,28,50,.16),0 0 0 1px rgba(255,255,255,.42) inset!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label b, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ color:#422433!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control output{ background:#fff4f7!important;border-color:#e89ab2!important;color:#8f3154!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-runnable-track{ background:#f3a7bd!important;border-color:#dc7898!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-webkit-slider-thumb{ background:#ef6f9c!important;border-color:#fff!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-track{ background:#f3a7bd!important;border-color:#dc7898!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control input[type="range"]::-moz-range-thumb{ background:#ef6f9c!important;border-color:#fff!important; } /* Tool/panel-boksene får en rolig identitetsfarge. Selve controls kan fortsatt være hvite; panelbakgrunnen gjør modusbyttet tydelig uten å bli skrikende. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel :is(.lbl,label,strong,p,small){ color:#183247!important; } /* Den synlige mobilteksten bruker line-height 1 slik at selection/hitbox følger fontstørrelsen tettere. Den faktiske initial-fit beregnes likevel fra Canvas actualBoundingBoxAscent/Descent i start-launcher.js. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand .obj .t{ line-height:1!important; } } /* ============================================================ NyDesignerModul 161 — 85 % standard + fargekodet toolbar + ekte filpanel. Kun simplified landscape mobile. Desktop berøres ikke. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Toolbar-knapp og fagpanel skal høre visuelt sammen. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="text"]{ background:#efffc9!important;border-color:#c8e68d!important;color:#294218!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="image"]{ background:#dff4ff!important;border-color:#a8d9ef!important;color:#183247!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="draw"]{ background:#fff4d6!important;border-color:#ead39a!important;color:#4f3d17!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="color"]{ background:#f1e7ff!important;border-color:#d3b9ef!important;color:#3f2857!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="layout"]{ background:#e2f7eb!important;border-color:#addcc0!important;color:#214b33!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool.mobile-adjust-tool{ background:#ffe1eb!important;border-color:#f1a7bd!important;color:#59283a!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool] svg{ stroke:currentColor!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool]:active, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool][aria-pressed="true"]{ filter:saturate(1.08) brightness(.96)!important; box-shadow:0 2px 7px rgba(16,46,62,.16) inset!important; } /* Image-verktøyet er et fullverdig fagpanel. Native file-input ligger ikke oppå toolbaren; filvelgeren åpnes bare fra den synlige knappen i panelet. */ body.eventro-mobile-simple-designer #addLogo.mobile-native-file-trigger{ position:static!important;inset:auto!important;width:0!important;height:0!important; opacity:0!important;pointer-events:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-prompt{ display:flex!important;min-height:88px!important;padding:9px 12px 8px!important; border:1px solid rgba(110,181,216,.52)!important;border-radius:10px!important; background:rgba(255,255,255,.58)!important;color:#183247!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-button{ min-width:150px!important;min-height:42px!important;height:42px!important; transform:none!important;background:#f5fcff!important;border-color:#70bee2!important;color:#145f82!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-prompt small{ transform:none!important;margin:0!important;max-width:520px!important;color:#345c70!important;font-size:10px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler{ display:block!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important; margin-top:5px!important;border-top:1px solid rgba(111,173,204,.45)!important;background:rgba(255,255,255,.38)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler:empty{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .logo-grid .lg-hdr, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .logo-grid .lg-navn{ color:#183247!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .logo-grid .lg-farge .inksel{ background:#fff!important;color:#183247!important;border:1px solid #9bcce2!important;border-radius:7px!important; } } /* ============================================================ NyDesignerModul 162 — én «← Verktøy»-kontrakt + tydelig navigasjon. «← Verktøy» betyr alltid tilbake til hoved-toolbar. Samme nav-knapp brukes i fagpanel, quick-size og avansert objektjustering. Panelene beholder identitetsfargen fra toolbar-knappen som åpnet dem. Kun simplified landscape mobile. Desktop berøres ikke. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Den essensielle tilbakeknappen skal være lett å oppdage og lett å treffe. */ /* Alle ordinære fagpaneler bruker samme nav-høyde og nav ligger visuelt i selve pastellboksen, ikke som en separat mørk stripe. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav{ display:flex!important; position:sticky!important; top:0!important; z-index:90!important; align-items:center!important; gap:10px!important; width:100%!important; height:46px!important; min-height:46px!important; margin:0 0 6px!important; padding:3px 4px!important; box-sizing:border-box!important; background:transparent!important; border-bottom:1px solid rgba(53,87,103,.18)!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav>strong{ color:#183247!important; font:800 12px/1 "Sora",Arial,sans-serif!important; } /* Autoritativ fargekobling: fagboks = samme pastell som toolbar-knappen. */ /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel{ background:#efffc9!important;border-color:#c8e68d!important;color:#183247!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="draw"] .designer-quick-panel{ background:#fff4d6!important;border-color:#ead39a!important;color:#183247!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="color"] .designer-quick-panel{ background:#f1e7ff!important;border-color:#d3b9ef!important;color:#183247!important; } /* [FAMILIE:VERKTOYRAD] se docs/architecture/FAMILIE_verktoyrad.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="layout"] .designer-quick-panel{ background:#e2f7eb!important;border-color:#addcc0!important;color:#183247!important; } /* QUICK SIZE er også et fullverdig rosa verktøypanel. Egen nav-rad gir samme «← Verktøy»-opplevelse som Tekst/Fil/Tegn/Farge/Oppsett. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected:not(.designer-tool-panel-open):not(.mobile-adjust-open) .mobile-text-size-control{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(142px,176px) 66px!important; grid-template-rows:42px minmax(48px,1fr)!important; height:clamp(104px,30vh,116px)!important; min-height:104px!important; max-height:116px!important; gap:6px 10px!important; padding:5px 10px 8px 12px!important; background:#ffe1eb!important; border-color:#f1a7bd!important; color:#422433!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-size-nav{ grid-column:1/-1!important; grid-row:1!important; display:flex!important; align-items:center!important; gap:10px!important; min-width:0!important; padding:0 0 3px!important; border-bottom:1px solid rgba(143,49,84,.15)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-size-nav>strong{ color:#5b2a3d!important; font:800 12px/1 "Sora",Arial,sans-serif!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control>label{ grid-column:1!important;grid-row:2!important; height:100%!important;min-height:48px!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control .mobile-quick-adjust{ grid-column:2!important;grid-row:2!important; align-self:center!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-size-control .mobile-quick-ok{ grid-column:3!important;grid-row:2!important; align-self:center!important; } /* Flere objekt-justeringer er den rosa søsterboksen. */ /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-object-controls{ background:#ffe1eb!important; border:1px solid #f1a7bd!important; border-radius:12px!important; color:#422433!important; box-shadow:0 8px 22px rgba(83,28,50,.14)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head{ display:grid!important; grid-template-columns:minmax(122px,auto) minmax(0,1fr) auto auto!important; align-items:center!important; gap:8px!important; min-height:44px!important; margin:0 0 6px!important; padding-bottom:4px!important; border-bottom:1px solid rgba(143,49,84,.15)!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head strong{ color:#5b2a3d!important; font:800 12px/1 "Sora",Arial,sans-serif!important; text-align:left!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid>label span, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-grid output{ color:#422433!important; } /* [FAMILIE:SPAKE] se docs/architecture/FAMILIE_spake.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-reset{ background:#fff4f7!important;border-color:#e7afc0!important;color:#71364d!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-adjust-ok{ background:#ef6f9c!important;border-color:#dc7898!important;color:#fff!important; } } /* ============================================================ NyDesignerModul 163 — tydelig Verktøy-knapp + én blå filidentitet. Autoritativ siste mobilregel. Kun simplified landscape mobile. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Tilbake til Verktøy er en kritisk navigasjonskontroll. Tving mørk tekst også mot eldre/global button styling og WebKit text fill. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer button.mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav button.mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-size-nav button.mobile-back-tools, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-controls-head button.mobile-back-tools{ background:#ffffff!important; border-color:#9eb0ba!important; color:#173142!important; -webkit-text-fill-color:#173142!important; opacity:1!important; text-shadow:none!important; filter:none!important; font-weight:800!important; } /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer button.mobile-back-tools:hover, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer button.mobile-back-tools:focus-visible{ background:#f7fbfd!important; border-color:#668797!important; color:#102b3a!important; -webkit-text-fill-color:#102b3a!important; } /* Last opp fil: toolbar-knapp, panel, opplastingsfelt og filliste bruker samme identitetsfarge. Ikke flere hvite/halvtransparente innbokser som får panelet til å se ut som en annen farge. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-tool[data-designer-tool="image"], body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-prompt, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler{ background:#dff4ff!important; border-color:#a8d9ef!important; color:#183247!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-prompt{ box-shadow:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-button{ background:#dff4ff!important; border-color:#70bee2!important; color:#145f82!important; -webkit-text-fill-color:#145f82!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-button:hover, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-button:focus-visible{ background:#cfeeff!important; border-color:#55acd5!important; color:#104d69!important; -webkit-text-fill-color:#104d69!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-upload-prompt small, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="image"] .designer-quick-panel #logoFiler *{ color:#183247!important; } } /* ============================================================ NyDesignerModul 164 — tekstpanel først + større tilbakeknapp. Tekst-knappen åpner først limepanelet. «Skriv inn tekst»-feltet er den synlige startkontrollen for flyvningen. Native input overtar først etter at fake-inputen har landet. Kun simplified landscape mobile. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ --mobile-panel-nav-h:54px!important; } /* Hovednavigasjon, ikke en sekundær mikroknapp. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-panel-nav{ height:54px!important; min-height:54px!important; padding:4px!important; } /* Det gamle desktop-inputet #tTekst er fortsatt autoritativ state-kilde, men skal ikke være en parallell synlig mobilinput. På mobil er verdifeltet nedenfor den eneste synlige inngangen før keyboardfasen. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .designer-quick-panel #textCtrls .tekst-col{ display:none!important; } /* Skriv inn tekst-feltet skal tydelig ligne et input og forklare neste steg. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .mobile-text-value-slot{ grid-column:1/-1!important; min-height:46px!important; height:46px!important; margin:1px 0 7px!important; } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .mobile-text-value-display{ height:46px!important; min-height:46px!important; padding:0 14px!important; border:2px solid #a8c86a!important; border-radius:9px!important; background:#fff!important; color:#183247!important; -webkit-text-fill-color:#183247!important; font:700 14px/1 "Sora",Arial,sans-serif!important; box-shadow:0 2px 8px rgba(69,98,35,.12),inset 0 1px 2px rgba(20,55,75,.06)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .mobile-text-value-display.is-empty [data-mobile-text-value]{ color:#597040!important; -webkit-text-fill-color:#597040!important; font-weight:700!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .mobile-text-value-pencil{ color:#6f8d34!important; font-size:18px!important; } /* Fake input er eneste synlige bevegelse frem til landingen. */ body.eventro-mobile-simple-designer.mobile-text-flight-panel-origin .mobile-text-flight-box{ z-index:2147483647!important; box-shadow:0 9px 28px rgba(12,49,64,.25)!important; } } /* ============================================================ NyDesignerModul 165 — ÉN fysisk «Tilbake til verktøy»-knapp. Samme DOM-node flyttes mellom fagpanel, quick-size og avansert Juster. Dermed kan computed style/geometri ikke divergere mellom boksene. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #mobileSharedBackTools.mobile-back-tools-primary{ display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:0 0 174px!important;width:174px!important;min-width:174px!important;max-width:174px!important; height:46px!important;min-height:46px!important;max-height:46px!important; padding:0 18px!important;margin:0!important;border:1px solid #9eb0ba!important;border-radius:11px!important; background:#fff!important;color:#173142!important;-webkit-text-fill-color:#173142!important; box-shadow:0 2px 7px rgba(33,65,82,.12)!important;opacity:1!important;filter:none!important;text-shadow:none!important; font:800 14px/1 "Sora",Arial,sans-serif!important;letter-spacing:.005em!important;white-space:nowrap!important; transform:none!important;zoom:1!important;touch-action:manipulation!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #mobileSharedBackTools.mobile-back-tools-primary:active{ transform:translateY(1px)!important;filter:brightness(.97)!important; } } /* ============================================================ NyDesignerModul 166 — tydelig mørk tilbakeknapp + tekstguiding. Én rød Eventro-hjelpepil viser kun anbefalt neste steg: Skriv inn tekst -> Font -> ferdig. Stilvalg får kun ramme, ingen blå fill. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Samme fysiske tilbakeknapp i alle mobile arbeidsbokser. Mørkgrå skiller den klart fra hvite inputfelt. */ /* [FAMILIE:PANELER] se docs/architecture/FAMILIE_paneler.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #mobileSharedBackTools.mobile-back-tools-primary{ background:#34434e!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid #24323b!important; box-shadow:0 3px 9px rgba(12,28,39,.24)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #mobileSharedBackTools.mobile-back-tools-primary:active{ background:#2b3942!important;color:#fff!important;-webkit-text-fill-color:#fff!important; } /* Den gamle pulserende blå font-rammen erstattes av Eventros røde hoppepil. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-selected-text-object[data-designer-quick-mode="text"].designer-tool-panel-open:not(.mobile-keyboard-open) .designer-quick-panel #textCtrls .font-col::after{ display:none!important;content:none!important;animation:none!important; } /* Stil: valgt knapp skal se valgt ut, men ikke som en blå OK-knapp. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #tStyle button[data-style]{ background:#fff!important;color:#183247!important;-webkit-text-fill-color:#183247!important; border:1px solid #bdcbd4!important;box-shadow:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #tStyle button[data-style].on{ background:#fff!important;color:#183247!important;-webkit-text-fill-color:#183247!important; border:3px solid #506a7a!important;box-shadow:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #tStyle{ display:flex!important;align-items:center!important;gap:6px!important; } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #mobileTextPanelOk.mobile-text-panel-ok{ width:auto!important;min-width:58px!important;height:38px!important;min-height:38px!important; margin-left:4px!important;padding:0 15px!important;border-radius:8px!important; border:1px solid #078dcc!important;background:#09aaf0!important; color:#fff!important;-webkit-text-fill-color:#fff!important; font:800 13px/1 "Sora",Arial,sans-serif!important;box-shadow:0 2px 6px rgba(4,130,190,.22)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #mobileTextPanelOk.mobile-text-panel-ok:active{ background:#078dcc!important;transform:translateY(1px)!important; } } /* Rød standard-hjelpepil. Gjenbruker den eksisterende obhop-keyframen i film.css i stedet for å introdusere enda en animasjonsmotor. */ /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ .mobile-text-next-arrow{ position:fixed!important;display:block;z-index:2147483646!important;width:30px;height:30px; color:#e2001a!important;-webkit-text-fill-color:#e2001a!important;font:900 28px/30px Arial,sans-serif!important; text-align:center!important;pointer-events:none!important;filter:drop-shadow(0 2px 2px rgba(80,0,0,.18)); animation:obhop .55s ease infinite!important; } /* [FAMILIE:TEKSTFLYT] se docs/architecture/FAMILIE_tekstflyt.md */ .mobile-text-next-arrow[hidden]{display:none!important} @media (prefers-reduced-motion:reduce){.mobile-text-next-arrow{animation:none!important}} /* ============================================================ NyDesignerModul 167 — ekte fontpreview + siste hjelpepil + nytt gripehåndtak. Kun simplified landscape mobile. PC/desktop påvirkes ikke. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Native select beholdes som state-kilde, men mobil viser en egen fontmeny slik at Android ikke kan erstatte font-preview med systemets standardfont. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] #tFont.mobile-font-native-select{ position:absolute!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important; opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important;overflow:hidden!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-designer-quick-mode="text"] .font-col{ position:relative!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-font-picker-button{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important; width:100%!important;height:46px!important;min-height:46px!important;padding:0 13px!important; border:1.5px solid #a8c86a!important;border-radius:9px!important;background:#fff!important; color:#183247!important;-webkit-text-fill-color:#183247!important;box-shadow:inset 0 1px 2px rgba(20,55,75,.06)!important; font-size:17px!important;font-weight:500!important;line-height:1!important;text-align:left!important;white-space:nowrap!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-font-picker-button .mobile-font-chevron{ flex:0 0 auto!important;font-family:"Sora",Arial,sans-serif!important;font-size:18px!important;color:#465d6b!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-text-value-display [data-mobile-text-value]{ font-size:16px!important;line-height:1!important; } /* Det nye gripehåndtaket er større og mer visuelt selvinstruerende, men fortsatt bare en view-kontroll. Halvtransparent bakgrunn holder båndet synlig. */ } /* Fontmenyen ligger i body for å unngå clipping fra panel/stage. */ .mobile-font-menu{ position:fixed!important;z-index:2147483647!important;display:flex!important;flex-direction:column!important;gap:2px!important; padding:6px!important;box-sizing:border-box!important;overflow-y:auto!important;overscroll-behavior:contain!important; border:1px solid #9ab0bc!important;border-radius:11px!important;background:#f8fcff!important; box-shadow:0 12px 34px rgba(7,27,39,.32)!important; } .mobile-font-menu[hidden]{display:none!important} .mobile-font-option{ appearance:none!important;-webkit-appearance:none!important;display:flex!important;align-items:center!important; width:100%!important;min-height:42px!important;padding:7px 11px!important;border:0!important;border-radius:7px!important; background:#fff!important;color:#132c3b!important;-webkit-text-fill-color:#132c3b!important; font-size:18px!important;font-weight:500!important;line-height:1.15!important;text-align:left!important;white-space:nowrap!important; } .mobile-font-option[aria-selected="true"]{outline:2px solid #7ba635!important;background:#f2ffd8!important} .mobile-font-option:active{background:#e9f8ff!important} /* Etter fontvalg: kort venstrepil mot Tilbake til verktøy. */ @keyframes mobileTextHopLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}} .mobile-text-next-arrow[data-step="return"]{ width:34px!important;height:30px!important;font-size:31px!important;line-height:30px!important; animation:mobileTextHopLeft .58s ease-in-out infinite!important; } @media (prefers-reduced-motion:reduce){.mobile-text-next-arrow[data-step="return"]{animation:none!important}} /* ============================================================ NyDesignerModul 168 — tredje tekstguide peker på TEKSTOBJEKTET. Objektets faktiske getBoundingClientRect brukes i JS, så pilen følger båndets pan/zoom. Ingen timeout: den forsvinner først ved tap på objektet. ============================================================ */ @keyframes mobileTextHopTowardLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}} @keyframes mobileTextHopTowardRight{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}} .mobile-text-next-arrow[data-step="object"]{ width:38px!important;height:32px!important;font-size:32px!important;line-height:32px!important; } .mobile-text-next-arrow[data-step="object"][data-side="right"]{ animation:mobileTextHopTowardLeft .58s ease-in-out infinite!important; } .mobile-text-next-arrow[data-step="object"][data-side="left"]{ animation:mobileTextHopTowardRight .58s ease-in-out infinite!important; } /* Legacy L167 'return'-pil brukes ikke lenger. */ .mobile-text-next-arrow[data-step="return"]{display:none!important;animation:none!important} @media (prefers-reduced-motion:reduce){ .mobile-text-next-arrow[data-step="object"]{animation:none!important} } /* ============================================================= NyDesignerModul 169 — rent gripehåndtak uten sirkel. Verktøyikonet skal leses som UI, ikke som en del av designet. ============================================================= */ @media (orientation:landscape) and (pointer:coarse){ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer .mobile-band-move-handle{ width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important; padding:0!important;margin:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; opacity:1!important;overflow:visible!important;color:var(--mobile-band-grip-ink,rgba(0,0,0,.60))!important; } body.eventro-mobile-simple-designer .mobile-band-move-handle:active{ opacity:1!important;transform:scale(.98)!important;background:transparent!important;box-shadow:none!important; } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer .mobile-band-move-icon{ width:76px!important;height:76px!important;display:block!important;overflow:visible!important;pointer-events:none!important; color:inherit!important; } } /* ============================================================= NyDesignerModul 170 — åpent gripehånd + objektspake bruker PANEL/HOME-view. Kun simplified landscape mobile. Desktop påvirkes ikke. ============================================================= */ @media (orientation:landscape) and (pointer:coarse){ /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer .mobile-band-move-hand{ fill:none!important; stroke:currentColor!important; stroke-width:2.15!important; stroke-linecap:round!important; stroke-linejoin:round!important; opacity:.62!important; } /* [FAMILIE:BANDGESTER] se docs/architecture/FAMILIE_bandgester.md */ body.eventro-mobile-simple-designer .mobile-band-move-arrows{ fill:none!important; stroke:currentColor!important; stroke-width:3!important; stroke-linecap:round!important; stroke-linejoin:round!important; opacity:.72!important; } } /* ============================================================= [FAMILIE:OPTIMIZER] se docs/architecture/FAMILIE_optimizer.md Design-optimalisering for vev: designerens egen knapperad (#edFoot med "Ta bort design og lukk" og "Videre til trådfarge-kalibrering") hører ikke hjemme over optimizer-siden. Optimizer-siden har sin egen bunnrad med "Tilbake til trådfarge-kalibrering" og "Ferdig – legg til i handlekurv". Regelen leser optimizer-sidens EGEN tilstand med :has() i stedet for å speile den i en ny klasse. Da kan de to ikke komme ut av synk. ============================================================= */ #resultArea.as-modal:has(#optSide:not(.hidden)) > #edFoot, #resultArea.as-modal:has(#kalSide:not(.hidden)) > #edFoot{ display:none!important } /* [FAMILIE:OPTIMIZER] Steg 14: samme sak en etasje opp. "Behold design fra ..." (#keepInDesign i overskriftsraden) velger et design fra et ANNET baand. Det er en designer-handling, og paa disse to sidene er designet allerede valgt og laast - knappen kunne bare gjoere skade. ? og x blir staaende; de gjelder fortsatt. Samme :has()-teknikk: sidene eier sin egen tilstand, ingen speilklasse. */ #resultArea.as-modal:has(#optSide:not(.hidden)) #keepInDesign, #resultArea.as-modal:has(#kalSide:not(.hidden)) #keepInDesign{ display:none!important } /* [FAMILIE:OPTIMIZER] Steg 14: bunnraden har naa to knapper til venstre (Tilbake + Tilbakestill) og én til hoegre. Uten denne gruppa ville space-between spredd de tre jevnt utover, saa "Tilbakestill" havnet midt i raden som om den var hovedhandlingen. */ .wrap #optSide .opt-foot .opt-foot-venstre{display:flex;align-items:center;gap:10px;min-width:0} .wrap #optSide .opt-foot .opt-foot-venstre .side-tilbake{margin:0;flex:0 0 auto} @media(max-width:700px){ .wrap #optSide .opt-foot .opt-foot-venstre{flex-wrap:wrap;gap:8px} } /* [FAMILIE:TRYKKPRIS] se docs/architecture/FAMILIE_trykkpris.md Opplysningen naar kunden har valgt trykk, men ikke laget noe design. Dempet gul, ikke roed: dette er ikke en feil kunden har gjort, det er en opplysning om hva hun faar. Den skal leses, ikke skremme. */ .bl-trykk-mangler-wrap{display:flex;flex-direction:column;gap:5px;align-items:stretch} .bl-trykk-mangler{ font-family:"Sora",Arial,sans-serif;font-size:11px;font-weight:600;line-height:1.25; color:#8a6100;background:#fff8e1;border:1px solid #f0d998;border-radius:7px; padding:5px 8px;text-align:center } /* [FAMILIE:STORRELSE] se docs/architecture/FAMILIE_storrelse.md Unntak fra de to reglene som skjuler #designSize i den forenklede designeren (designer-intro foer Start, designer-quick-open etter). Begge er riktige for baand der bredde og laas er bivalg - men silikonbaandet velges i STOERRELSE, og uten denne linja kunne kunden bare bestille 200 mm. Maalt 30.09: panelet fantes i DOM-en med display:none i begge tilstander, saa velgeren var bygget og utilgjengelig - ikke slettet. For silikon inneholder panelet bare stoerrelsen: bredden fjernes for sku 006, og ingenLaas slaar av laasevelgeren. Unntaket slipper derfor ikke gjennom noe annet. */ #resultArea.as-modal.designer-intro:not(.kal-aktiv) #designSize.har-storrelser, #resultArea.as-modal.designer-quick-open:not(.kal-aktiv) #designSize.har-storrelser{ display:flex!important; /* Grunnregelen venstrestiller feltene. I den brede modalen ble de liggende klemt mot ytterkanten, langt fra baandet de gjelder. Midtstilt staar de over baandet. */ justify-content:center!important } /* [FAMILIE:STORRELSE] se docs/architecture/FAMILIE_storrelse.md Det samme unntaket for BAANDBREDDEN. Silikon fikk sitt 30.09; tekstilbaandene fikk aldri sitt, og da var 20 mm utilgjengelig - ikke fjernet, bare skjult. Maalt 14.10, kundens egen vei inn (baand i lista -> openDesignFor, som er det eneste som gir as-modal): raden usynlig for 004 og 005 baade foer og etter Start. Silikon synlig i samme maaling, saa regelen over virker som den skal. BARE PC. Anders 14.10: «mobilvisning skal kun ha default-bredden (15mm)». To sperrer, fordi de fanger hver sin ting: medieregelen tar smale skjermer, og :not(.mobile-simple-designer) tar et nettbrett i landskap - bredt nok til aa slippe gjennom medieregelen, men kjoerer den forenklede mobildesigneren. Merket .har-breddevalg settes i session-ui.js fra feltet som faktisk staar i raden, saa denne regelen kan ikke slippe gjennom et felt som ikke finnes. */ @media (min-width:761px){ #resultArea.as-modal.designer-intro:not(.mobile-simple-designer):not(.kal-aktiv) #designSize.har-breddevalg, #resultArea.as-modal.designer-quick-open:not(.mobile-simple-designer):not(.kal-aktiv) #designSize.har-breddevalg{ display:flex!important; justify-content:center!important } } /* [FAMILIE:STORRELSE] se docs/architecture/FAMILIE_storrelse.md punkt 8 Tredje unntak: RYKEKLIPSEN paa noekkelhalsbaand. Samme regel skjulte den, og den fantes ikke noe annet sted - valget var altsaa umulig aa bestille. To forskjeller fra baandbredden over: - INGEN MEDIEREGEL. Bredden er PC-bare fordi Anders har bestemt at mobil skal ha 15 mm. Rykeklipsen er en sikkerhetsmekanisme som koster penger, saa her skal alle som faar plass, faa den. Et smalt PC-vindu har fin peker og kjoerer den vanlige designeren - der er det plass. - INGEN justify-content. Anders 14.10: «rett over baandet paa venstre side». Grunnregelen venstrestiller allerede, saa her skal det ikke staa noe - det er midtstillingen som er unntaket, ikke omvendt. MEN IKKE I DEN FORENKLEDE MOBILDESIGNEREN, og det er ikke et valg jeg tok - det er en maaling. Den designeren er position:fixed, inset:0, overflow:hidden, med en laast topprad paa 40px og en .body paa calc(100dvh - 58px). De to fyller skjermen helt. #designSize er en TREDJE rad mellom dem, og den blir klemt ut: maalt 14.10 i landskap 844x390 laa raden paa y = -15 mens selve kortet begynte paa y = 3. display:flex gjorde den altsaa ikke tilgjengelig, bare usynlig et annet sted. Aa lage plass til den krever at hoyderegnestykket over skrives om, og det er en egen jobb - ikke noe aa snike inn her. */ #resultArea.as-modal.designer-intro:not(.mobile-simple-designer) #designSize.har-klipsvalg, #resultArea.as-modal.designer-quick-open:not(.mobile-simple-designer) #designSize.har-klipsvalg{ display:flex!important } /* ============================================================ BUNNSTRIPE — tegneverktoyene som en smal linje nederst ============================================================ Problemet: i tegnemodus vokste dokken fra baandet og helt ned til footeren. Baandet satt igjen med --mobile-stage-h, altsaa ca. 85 px paa en liggende telefon. Man kunne ikke se det man tegnet, og gikk man ut av panelet for aa zoome, ble tegneverktoyet slaatt av. Loesningen: i tegnemodus blir dokken en stripe paa hoyde med en knapperad, plassert rett over footeren. Baandet faar ALT over den. «Tilbake til verktoy» staar som forste knapp i samme stripe. Alt her er laast til fire ting samtidig: body.evt-bunnstripe (settes av start-launcher.js) .designer-tool-panel-open (et fagpanel er aapent) [data-designer-quick-mode="draw"] (det er tegnepanelet) liggende, grov peker, liten skjerm (media-sporringen) Mangler en av dem, gjelder ingen av reglene og alt er som for. Skru av uten aa rulle tilbake filer: window.EVENTRO_BUNNSTRIPE=false eller i nettleserkonsollen paa telefonen: localStorage.setItem("evtBunnstripe","0") ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ /* Maalene regnes ut ett sted. Stripa er like hoy som den vanlige verktoyraden, slik at knappene har samme fysiske stoerrelse som kunden alt er vant til. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open){ /* To tall styrer hele stripa. Vil du ha den lavere eller hoyere, er det disse to - resten regner seg ut selv. */ --evt-knapp-h:42px; --evt-stripe-h:52px; --evt-stripe-reserve:calc(var(--mobile-footer-h,34px) + var(--mobile-footer-bottom,4px) + 6px); } /* 1 — dokken: smal stripe nederst, ikke hele arbeidsfeltet. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock{ top:auto!important; bottom:var(--evt-stripe-reserve)!important; height:var(--evt-stripe-h)!important; min-height:var(--evt-stripe-h)!important; max-height:var(--evt-stripe-h)!important; overflow:visible!important; } /* 2 — BAANDFLATEN MAA NAA HELT NED TIL STRIPA. .stage har overflow:hidden. Hoyden kommer fra --mobile-stage-panel-h, som motoren regner ut for et HELT panel. Maalt paa 844x390: tekst flate 13..170 boks 176..325 luft 5 px fil flate 13..170 boks 176..325 luft 5 px tegn flate 13..170 stripe 273..325 luft 102 px I tegnemodus er boksen bare en 52 px stripe nede ved footeren. Flaten sluttet likevel paa 170, og de 102 pikslene under var en usynlig vegg: dro man baandet nedover, ble det klippet bort i flatekanten og forsvant inn i den moerke bakgrunnen. Det er den «svarte boksen». Flaten skal derfor gaa helt ned til stripa, slik den gjor i de andre panelene. Tallene er motorens egne, ikke nye: --evt-stripe-reserve footeren + luften under --evt-stripe-h stripa selv --mobile-panel-gap motorens standard mellomrom Hvilestillingen henger IKKE lenger paa denne hoyden - den er flyttet til --mobile-stage-panel-h i mobile-view.js, som er samme tall tekst og fil hviler paa. Derfor blir flaten stor uten at baandet flytter seg, og uten spranget ved «<- Verktoy». */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .stage{ height:calc(100% - var(--evt-stripe-reserve) - var(--evt-stripe-h) - var(--mobile-panel-gap,5px))!important; } /* FJERNET: her sto en egen #designZoomWrap for tegnemodus med height:100% og align-items:center. Den var den fjerde eieren av baandets loddrette plassering, og den som fikk det til aa se ut som to forskjellige baand. Grunnregelen gir wrapperen top:0 og align-items:flex-start, altsaa baandets NULLPUNKT i overkanten av flaten - likt i alle moduser. Min regel flyttet nullpunktet til midten av flaten, men bare i tegnemodus. Maalt ved overgangen verktoyrad -> Tegn: css-en byttet nullpunkt fra 13 til 140 paa ett bilde, mens ty enda sto paa den gamle verdien. Baandet slo 96 px ned i det samme oyeblikket, og gled deretter rolig tilbake. Det var ikke to baand; det var ett baand med to nullpunkter. Naa eier ty plasseringen alene, og nullpunktet staar stille. */ /* Tekst-spaken «Str» hoerer til tekstarbeid. I tegnestripa ville den ligget midt oppe i baandet, som naa dekker den plassen. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .mobile-text-size-control{ display:none!important; } /* 3 — panelet: en rad, ingen egen scroll, ingen hvit flate. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:5px!important; height:100%!important; min-height:0!important; max-height:100%!important; margin:0!important; padding:0!important; overflow:visible!important; /* Samme pastell som tegnepanelet ellers har. Den var satt til transparent, og da ble stripa moerk/graa i stedet for gul. */ background:#fff4d6!important; border:1px solid #ead39a!important; border-radius:12px!important; } /* Tilbakeknappen ligger i navlinja. Den skal staa paa linje med tegneknappene, ikke over dem. Tittelen «Tegn» tas bort - knappen sier alt som trengs, og plassen gaar til verktoyene. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel>.mobile-panel-nav{ /* Grunnreglene gir denne width:100%, height:54px, sticky og en nedre kantlinje - altsaa en egen rad OVER verktoyene. I stripa skal den vaere ett element PAA linja. */ display:flex!important; position:static!important; flex:0 0 auto!important; align-items:center!important; gap:0!important; width:auto!important; margin:0!important; padding:0!important; border:0!important; border-bottom:0!important; height:var(--evt-knapp-h,42px)!important; min-height:var(--evt-knapp-h,42px)!important; max-height:var(--evt-knapp-h,42px)!important; background:transparent!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel>.mobile-panel-nav>strong{ display:none!important; } /* 4 — selve tegneboksen blir en vannrett rad. position:relative fordi farge- og symbolvalget skal sprette opp OVER stripa. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel #designerDrawTools{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:center!important; flex:1 1 0%!important; min-width:0!important; width:auto!important; gap:5px!important; height:100%!important; min-height:0!important; max-height:100%!important; margin:0!important; padding:0!important; background:transparent!important; overflow:visible!important; } /* Hjelpeteksten «Tegn direkte paa baandet» har ingen plass i en stripe, men angre/gjor om skal staa der. Derfor beholdes beholderen og bare teksten skjules. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-intro{ display:flex!important; flex:0 0 auto!important; align-items:center!important; margin:0!important; padding:0!important; min-height:0!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-intro>strong, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-intro>small{ display:none!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-history{ display:flex!important; margin:0!important; gap:4px!important; align-self:center!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-history button{ width:36px!important; min-width:36px!important; height:var(--evt-knapp-h,42px)!important; min-height:var(--evt-knapp-h,42px)!important; padding:0!important; font-size:19px!important; } /* Tykkelse: minus og pluss ved siden av hverandre, ikke oppa hverandre. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-controls{ display:flex!important; flex-direction:row!important; align-items:center!important; flex:1 1 0%!important; min-width:0!important; width:auto!important; gap:5px!important; grid-template-columns:none!important; } /* Tykkelse-knappene (+ og -) er ute av stripa. Plassen gaar til «Pil», som er det som faktisk trengs her: med pila valgt eier ikke tegningen fingrene, og baandet kan flyttes og zoomes som ellers. Knappene lever videre paa desktop og i de andre oppsettene. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-size{ display:none!important; } /* 5 — alle aatte valgene ligger framme: Pil, Farge og de seks tegneverktoyene. Ett trykk, ikke to - et ekstra oppsprett for aa VELGE verktoy ville lagt et trykk paa det man gjor oftest. Symbol og farge beholder sine egne oppsprett, for der finnes det for mange valg til aa staa paa en linje. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-list{ display:flex!important; flex-direction:row!important; align-items:stretch!important; flex:1 1 0%!important; min-width:0!important; width:auto!important; gap:4px!important; grid-template-columns:none!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card{ flex:1 1 0!important; min-width:0!important; width:auto!important; height:var(--evt-knapp-h,42px)!important; min-height:var(--evt-knapp-h,42px)!important; max-height:var(--evt-knapp-h,42px)!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:1px!important; padding:2px 1px!important; text-align:center!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>b{ width:auto!important; flex:0 0 auto!important; font-size:17px!important; line-height:1!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>b.designer-draw-live-icon{ height:19px!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>b.designer-draw-live-icon svg{ width:19px!important; height:19px!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>span{ align-items:center!important; gap:0!important; width:100%!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>span>strong{ display:block!important; width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font:800 9px/1 "Sora",Arial,sans-serif!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card small{ display:none!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-color-card .designer-draw-color-indicator{ width:18px!important; height:18px!important; flex:0 0 18px!important; } /* 6 — oppsprettene legger seg OVER stripa. Laa de i flyten, ville stripa vokst og baandet krympet igjen - altsaa samme feil paa nytt. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-quick-palette, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-symbol-picker{ position:absolute!important; left:0!important; right:0!important; bottom:100%!important; margin:0 0 8px!important; grid-column:auto!important; z-index:100040!important; box-shadow:0 -10px 26px rgba(10,28,40,.22)!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-quick-palette{ display:flex!important; flex-wrap:wrap!important; justify-content:center!important; gap:5px!important; padding:8px!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-palette-color{ width:26px!important; min-width:26px!important; height:26px!important; min-height:26px!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-symbol-picker{ display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; max-height:min(40vh,170px)!important; overflow-y:auto!important; } /* [hidden] maa fortsatt vinne over display:flex/grid over. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-quick-palette[hidden], body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-symbol-picker[hidden]{ display:none!important; } /* 8 — GRIPEPUNKTENE ER PERMANENTE. Her sto tre regler som til sammen ga ETT haandtak til vanlig og TO bare i tegnestripa: .mobile-band-move-handle-left{display:none} alltid ...quick-mode="draw"... {display:grid} unntaket og i grunnreglene i tillegg: [data-presentation-mode="PANEL"] .handle{display:none} [data-presentation-mode="KEYBOARD"] .handle{display:none} Naa er det to gripepunkter, ett i hver ende, i alle moduser. Det er der tomlene settes naar man kniper, og det skal ikke avhenge av hvilket verktoy som tilfeldigvis er valgt. Koordinatoren plasserer dem paa 14 % og 86 % av det SYNLIGE baandet, og i tastaturmodus skjuler den dem - da skriver man. Speilvendingen gjor at haanden peker ut av baandet i begge ender. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .mobile-band-move-handle-left{ display:grid!important; } /* Tastatur er det ene unntaket, og det er JS-en som eier det. Css-en foelger etter saa tilstanden er sikker allerede for neste bilde. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-band-move-handle-left, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle[hidden], body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left[hidden]{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left .mobile-band-move-icon{ transform:scaleX(-1)!important; } /* 10 — FARGENE FOLGER TEGN-KNAPPEN. «Tegn» i hovedraden er gul/oransje, og panelet er alt #fff4d6 med kant #ead39a. Men kortene inne i stripa arvet de generelle --eventro-soft / --eventro-line / --eventro-blue, altsaa lys graablaa. Her settes de i samme familie som knappen man kom fra. Selve knappene var hvite - bare flaten bak dem var gul. Naa er knappene oransje, den valgte er tydelig moerkere enn resten, og symbolene er svarte. Tre toner, og ingenting annet enn disse: #ffc97d knapp #f09325 valgt knapp #111111 symbol og tekst Symbolene tegnes med fill="currentColor", saa fargen paa er det eneste som trengs for aa gjore dem svarte. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card{ background:#ffc97d!important; border-color:#e0a04e!important; color:#111111!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card>b, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card strong, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card small{ color:#111111!important; } /* (Fargekortets rute trenger ingen regel: den faar den valgte tegnefargen som inline background, ikke som color. Maalt.) */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card.active{ background:#f09325!important; border-color:#b96d05!important; box-shadow:inset 0 0 0 1px #b96d05!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card.active>b, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card.active strong, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-tool-card.active small{ color:#111111!important; } /* Angre/gjor om hoerer til samme familie. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-history button{ background:#ffc97d!important; border-color:#e0a04e!important; color:#111111!important; } body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-quick-palette, body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-symbol-picker{ border-color:#ead39a!important; } /* 9 — STOERRE TREFFLATE PAA GRIPEHAANDTAKENE. Haandtakene er 76x76 knapper. Treffer du dem noyaktig, skjer riktig ting. Bommer du med noen piksler - slik man gjor naar to fingre settes ned for aa knipe - traff du baandet i stedet, og tegnet. En sperresone i tegnekoden loste bare halve problemet: da sluttet den aa tegne, men fingeren ble heller ikke gitt til baandet, og man satt igjen med ett grep i stedet for en knipebevegelse. Her er det en mekanisme i stedet for to: et usynlig felt rundt knappen gjor den 30 px storre aa treffe i alle retninger. Da gaar bommen til haandtaket, og knipebevegelsen blir komplett. Utseendet og plasseringen er uendret - bare trefflaten vokser. Den gjaldt for bare i tegnestripa og bare det hoyre haandtaket. Naa er gripepunktene permanente, og da skal trefflaten folge dem - begge to, i alle moduser. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle::after, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left::after{ content:""; position:absolute; inset:-30px; border-radius:50%; } /* 7 — listen over tegnede elementer tar for mye hoyde for en stripe. Elementene staar paa baandet og kan trykkes der, saa listen er ikke den eneste veien til dem. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel .designer-draw-object-list{ display:none!important; } /* ============================================================ STARTKORTET I LIGGENDE ============================================================ Kortet («snu telefonen» + knappen) var stylet BARE i @media (orientation:portrait). Den som aapnet designeren med telefonen alt liggende saa derfor aldri knappen, og kom aldri i fullskjerm. Naa staar kortet til man har trykket start, ogsaa i liggende - og da maa det ha en liggende utgave. I liggende er «snu telefonen» feil beskjed: ikonet og den opprinnelige teksten skjules, og vaar egen startlinje staar der. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg{ display:grid!important; position:absolute!important; inset:0!important; z-index:2147483600!important; place-items:center!important; padding:clamp(10px,3vh,22px)!important; box-sizing:border-box!important; overflow:visible!important; background:rgba(17,28,37,.97)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg[data-enabled="false"]{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .rotmsg-in{ width:min(86vw,430px)!important; min-height:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; padding:20px 24px!important; border:1px solid #c8dce6!important; border-radius:16px!important; background:#fff!important; box-shadow:0 18px 44px rgba(0,0,0,.42)!important; text-align:center!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg[data-retning="liggende"] .rotmsg-ic, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg[data-retning="liggende"] b, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg[data-retning="liggende"] small{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg #evtStartTekst{ display:block!important; color:#183247!important; font:700 17px/1.35 "Sora",Arial,sans-serif!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg #evtStartTekst:empty{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .mobile-fullscreen-button{ display:block!important; width:min(100%,300px)!important; min-height:50px!important; margin-top:16px!important; padding:8px 16px!important; border:0!important; border-radius:12px!important; background:#04a9fc!important; color:#fff!important; font:700 15px/1.2 "Sora",Arial,sans-serif!important; text-transform:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .rotmsg-x{ display:none!important; } } /* Et skjult element skal vaere skjult. Grunnreglene setter display:block med !important paa startknappen fra en selektor med 1 id og 5 klasser. En naken .mobile-fullscreen-button[hidden] taper da paa spesifisitet - maalt i nettleser, ikke antatt. Vi matcher derfor hele kjeden og legger [hidden] paa toppen, slik at den vinner. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-fullscreen-button[hidden], body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg .mobile-fullscreen-button[hidden]{ display:none!important; } /* Startlinja i staaende: en rolig setning under den opprinnelige teksten, ikke en knapp. */ @media (orientation:portrait) and (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.rotmsg #evtStartTekst{ display:block!important; margin-top:14px!important; color:#183247!important; font:600 15px/1.45 "Sora",Arial,sans-serif!important; } } /* END BUNNSTRIPE */ /* ============================================================ STAAENDE MOBIL-DESIGNER ============================================================ Liggende er standarden og skal IKKE roeres. Hver eneste regel her ligger inne i @media (orientation:portrait) and (max-width:720px) and (pointer:coarse) og kan derfor ikke treffe liggende i det hele tatt. Ingen js-fil og ingen motorparameter er endret - hele denne leveransen er css. HVA SOM VAR GALT (maalt paa 390x844, snudd fra liggende): stage 66..208 baandflaten dock 657..774 verktoyboksen -> 449 px DODT FELT mellom dem band 152..180 348 x 28 px bakgrunn #f6f9fb / #f6fcff / #ffffff Hele mobil-designeren er bygget for liggende: 368 css-regler mot 15 for staaende. Staaende hadde aldri faatt en layout, bare rester. HVA SOM GJORES 1) Samme fysikk som liggende, ikke en ny. .stage er den frie flaten, og baandets ty regnes ut av mobile-view.js fra den flaten - helt urort. Her settes bare hoyden paa flaten og hvor boksen begynner. 2) ETT hjem ogsaa staaende: flaten er like hoy i verktoyrad og i panel, saa baandet staar stille naar man bytter verktoy - akkurat som liggende. 3) Det dode feltet lukkes: boksen begynner rett under flaten og gaar ned til footeren. Den har god plass i staaende, saa verktoyene faar puste. 4) Moerk bakgrunn, som liggende. Baandet er 12,5:1. I full bredde paa 390 px blir det 31 px hoyt. Det er ikke noe aa gjore med uten aa zoome - og zoom finnes alt, med de samme gripehaandtakene. Derfor er staaende fortsatt annenrangs, slik du vil ha det. ============================================================ */ @media (orientation:portrait) and (max-width:720px) and (pointer:coarse){ /* ---- 1. MAALENE ----------------------------------------------- Ett tall styrer staaende: hvor stor andel av arbeidsflaten baandflaten skal ha. Resten regner seg ut fra motorens egne variabler, de samme liggende bruker. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ /* Tre tall, alle fra motorens egne variabler - ingen nye parametre, ingen ny utregning av totalhoyden. topp der baandflaten begynner bunn plassen footeren trenger nederst boks verktoyradens hoyde panel hoyden et aapent panel trenger Baandflaten festes i BEGGE ender - top og bottom - i stedet for aa faa en hoyde. Da kan den ikke kollidere med boksen uansett hva skjermen maaler, og jeg slipper aa regne ut totalhoyden selv. (Forste forsok gjorde nettopp det, og bommet med 10 px fordi motoren regner i sin «safe»-boks mens modalen i staaende gaar helt ut i kanten. Flaten la seg da 29 px nedi boksen.) */ --evt-st-topp:var(--mobile-stage-top,4px); --evt-st-bunn:calc(var(--mobile-footer-h,54px) + var(--mobile-footer-bottom,7px) + 8px); --evt-st-boks:calc(var(--mobile-tools-h,70px) + 14px); /* Maalt hva hvert panel faktisk trenger i staaende (390x844): Tekst 240 Last opp fil 224 Tegn 327 Farge 372 Oppsett 217 Farge er verst. Reserven foelger motorens panelMinH saa den skalerer med skjermen, og tar aldri mer enn 54 % av hoyden. Alt som skulle bli hoyere scroller i boksen. */ --evt-st-panel:min(calc(var(--mobile-panel-min-h,210px) * 1.8),54vh); } /* ---- 2. MOERK BAKGRUNN ---------------------------------------- Liggende henter fargene fra en blokk som er laast til orientation:landscape, saa de kan ikke arves hit. De viktigste flatene settes derfor her. Samme verdier som liggende. */ body.eventro-mobile-simple-designer #designBackdrop{ background:#0a1117!important;opacity:.96!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer{ border:1px solid rgba(185,218,231,.22)!important; background:linear-gradient(180deg,#17232d 0%,#101a22 100%)!important; color:#f4fbfe!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ border:0!important;border-bottom:1px solid rgba(205,230,240,.10)!important; background:transparent!important;color:#fff!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 #step4title{ opacity:.9!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>.body{ background:transparent!important; } /* Flaten er en ramme, ikke et hvitt kort. Den skal vaere usynlig, slik den er i liggende. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage{ border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important; } body.eventro-mobile-simple-designer #bigBand{ --band-rim:#ffffff!important;--band-rim-soft:rgba(255,255,255,.34)!important; } /* ---- 3. BAANDFLATEN ------------------------------------------- Samme hoyde i verktoyrad og i panel. Da staar baandet stille naar man bytter verktoy, slik det gjor i liggende. Ingen transition paa hoyden: flaten er usynlig, og en animert hoyde gjor den uleselig for den som skal maale den. Baandet er det som glir - en ting i bevegelse, ett tempo. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .stage, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .stage, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="WORK"] .stage{ position:absolute!important; left:8px!important;right:8px!important; top:var(--evt-st-topp)!important; bottom:calc(var(--evt-st-bunn) + var(--evt-st-panel) + var(--mobile-panel-gap,7px))!important; width:auto!important;height:auto!important; min-height:0!important;max-height:none!important; margin:0!important;padding:0!important; box-sizing:border-box!important;overflow:hidden!important; transition:none!important; } /* Baandets NULLPUNKT. Dette er det samme som grunnregelen i liggende: overkanten av flaten, aldri midten. Da er ty det eneste som flytter baandet, og det kan ikke hoppe fordi nullpunktet byttet plass under det. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #designZoomWrap{ position:absolute!important; inset:auto 7px auto 7px!important; top:0!important;bottom:auto!important; height:var(--mobile-band-home-h,92px)!important; min-height:0!important;max-height:none!important; margin:0!important;padding:0!important; display:flex!important; align-items:flex-start!important;justify-content:center!important; box-sizing:border-box!important;overflow:visible!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-view-transform{ flex:0 0 auto!important;margin-top:0!important;max-width:none!important; } /* ---- 4. VERKTOYBOKSEN ----------------------------------------- Begynner rett under flaten og gaar ned til footeren. Det er det som lukker det dode feltet. I staaende er det god plass, saa boksen faar hele resten - og verktoyene faar puste. Flaten over reserverer ALLTID plass til et helt panel, ogsaa naar bare verktoyraden staar der. Da er flaten like hoy hele veien, og baandet staar stille naar man bytter verktoy - det samme ene hjemmet som i liggende. Boksen vokser oppover inn i plassen som alt er satt av; den tar ikke noe fra baandet. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-dock.is-mobile-dock{ position:absolute!important; left:8px!important;right:8px!important; top:auto!important; bottom:var(--evt-st-bunn)!important; width:auto!important;height:var(--evt-st-boks)!important; min-height:var(--evt-st-boks)!important;max-height:none!important; margin:0!important;padding:0!important; transform:none!important;translate:none!important; box-sizing:border-box!important;overflow:auto!important; transition:none!important; } /* Et aapent panel trenger mer enn en verktoyrad. Boksen vokser oppover inn i plassen flaten alt har satt av. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .designer-quick-dock.is-mobile-dock{ height:var(--evt-st-panel)!important; min-height:var(--evt-st-panel)!important; } /* «Se hele baandet» er en liggende-knapp. I staaende ser man alt uansett, og den spiser en hel rad. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-full-band-button{ display:none!important; } /* ---- 4b. GRIPEPUNKTENE ------------------------------------------ Forrige runde skjulte dem i staaende. Det var feil vei: de skulle formes, ikke fjernes. Grunnen til at de saa ut som en hvit flekk paa 14x28 oppe i hjornet er at BAADE grunnformen og den store 76 px-utgaven ligger i blokker laast til orientation:landscape - i staaende fantes det ingen form i det hele tatt. Her er samme form som liggende: ett stort, rolig ikon i hver ende, som man setter tomlene paa og kniper med. Trefflaten er 30 px storre enn ikonet i alle retninger. Koordinatoren plasserer dem paa 14 % og 86 % av det synlige baandet og skjuler dem i tastaturmodus. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="PANEL"] .mobile-band-move-handle-left{ display:grid!important;position:absolute!important;z-index:95!important; width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important; margin:0!important;padding:0!important; translate:-50% -50%!important;place-items:center!important; border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important; color:var(--mobile-band-grip-ink,rgba(255,255,255,.72))!important; opacity:1!important;overflow:visible!important; touch-action:none!important;user-select:none!important;-webkit-user-select:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-band-move-handle, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer[data-presentation-mode="KEYBOARD"] .mobile-band-move-handle-left, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle[hidden], body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left[hidden]{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-icon{ display:block!important;width:76px!important;height:76px!important; overflow:visible!important;pointer-events:none!important;color:inherit!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left .mobile-band-move-icon{ transform:scaleX(-1)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle::after, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-band-move-handle-left::after{ content:"";position:absolute;inset:-30px;border-radius:50%; } /* ---- 4c. SKRIVEFELTET ------------------------------------------- Maalt i staaende: mobileNativeTextTrigger paa 0,1090 - altsaa 246 px NEDENFOR underkanten av en 844 px skjerm. Ikke bak tastaturet; helt utenfor. Aarsaken: regelen som gjor feltet position:fixed staar i @media (max-width:1000px) and (max-height:720px) og 720-taket feller i staaende (844 hoy). Uten fixed falt feltet ned i dokumentflyten. JS-en regner alt ut riktig fra for: mobilBeregneSkriveRect setter toppen til stage.bottom + 3 - rett under baandet - og klemmer den opp over tastaturet. Den trengte bare et felt som faktisk bruker left/top. Dette er derfor bare form, ingen ny utregning. */ body.eventro-mobile-simple-designer .mobile-native-text-trigger{ display:block;position:fixed;z-index:2147483646;box-sizing:border-box; margin:0;padding:0;border:0;border-radius:8px;background:transparent; color:transparent;caret-color:transparent;opacity:.01;appearance:none; font-size:16px;pointer-events:auto;touch-action:manipulation; } body.eventro-mobile-simple-designer .mobile-native-text-trigger[hidden]{display:none!important} body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-trigger{ display:block!important;position:fixed!important;z-index:2147483647!important; box-sizing:border-box!important;margin:0!important;padding:7px 12px!important; border:2px solid #04a9fc!important;border-radius:9px!important;background:#fff!important; color:#183247!important;caret-color:#183247!important;opacity:1!important;appearance:none!important; font:500 19px/1.15 "Sora",Arial,sans-serif!important;pointer-events:auto!important; box-shadow:0 5px 18px rgba(10,48,69,.25)!important;transition:none!important; } body.eventro-mobile-simple-designer.mobile-native-text-active .mobile-native-text-commit{ display:block!important;position:fixed!important;z-index:2147483647!important; box-sizing:border-box!important;margin:0!important;padding:5px!important; border:0!important;border-radius:9px!important;background:#04a9fc!important;color:#fff!important; font:700 16px/1.1 "Sora",Arial,sans-serif!important;pointer-events:auto!important; transition:none!important; } body.eventro-mobile-simple-designer .mobile-text-flight-box{ display:flex!important;position:fixed!important;z-index:2147483647!important;box-sizing:border-box!important; align-items:center!important;overflow:hidden!important;padding:7px 12px!important; border:2px solid #04a9fc!important;border-radius:9px!important;background:#fff!important;color:#183247!important; box-shadow:0 7px 22px rgba(10,48,69,.28)!important;font:600 16px/1.15 "Sora",Arial,sans-serif!important; white-space:nowrap!important;text-overflow:ellipsis!important;pointer-events:none!important; transform-origin:0 0!important;transition:none!important; } /* ---- 4d. TILBAKEKNAPPEN ----------------------------------------- Maalt: .mobile-panel-nav er display:none i ALLE staaende paneler - Tekst, Farge, Oppsett. Grunnen er en global standard .mobile-panel-nav{display:none} som slaas paa igjen av regler laast til orientation:landscape. I staaende sto man derfor igjen med bare krysset paa panelkortet, og ingen «<- Tilbake til verktoy». Det er min egen mangel fra forrige runde. Samme form som liggende. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel>.mobile-panel-nav{ display:flex!important; align-items:center!important; gap:10px!important; flex:0 0 auto!important; width:100%!important; min-height:46px!important; margin:0!important; padding:5px 8px!important; box-sizing:border-box!important; border:0!important; border-bottom:1px solid rgba(205,230,240,.14)!important; background:rgba(22,38,49,.98)!important; color:#fff!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-keyboard-open .designer-quick-panel>.mobile-panel-nav{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .mobile-panel-nav>strong{ color:#eafcff!important;font-size:12px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .mobile-panel-nav .mobile-back-tools{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-width:150px!important;min-height:36px!important;height:auto!important; padding:6px 12px!important; border:1px solid #9eb0ba!important;border-radius:9px!important; background:#ffffff!important;color:#173142!important; -webkit-text-fill-color:#173142!important; font:800 13px/1.1 "Sora",Arial,sans-serif!important; opacity:1!important; } /* ---- 5. FOOTEREN ---------------------------------------------- Nederst, alltid synlig, utenfor boksen. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot{ position:absolute!important; left:10px!important;right:10px!important;top:auto!important; bottom:calc(var(--mobile-footer-bottom,7px))!important; width:auto!important;max-width:none!important; height:var(--mobile-footer-h,54px)!important; max-height:var(--mobile-footer-h,54px)!important; margin:0!important;padding:0!important; z-index:2147483000!important; background:transparent!important;border:0!important;box-shadow:none!important; } } /* END STAAENDE */ /* ============================================================ OPPSETT — HELE SKJERMEN, SAMME LOESNING BEGGE VEIER ============================================================ Oppsett er ikke et verktoypanel som baandet skal ligge over. Det er en egen skjerm: stoerrelsen oeverst, og alle kombinasjonene tett nedover med scroll. Baandet trengs ikke - det er jo nettopp det man ser i hver enkelt kombinasjon. HVA DET VAR (maalt) staaende 390x844 panelet 217 px hoyt, galleriet 41 px av 70 liggende 844x390 panelet 148 px hoyt, galleriet naadde ikke fram Galleriet fantes altsaa, men fikk 41 px til et rutenett som trengte 70 - og i liggende ble det klippet bort for det kom til syne. HVORFOR EN LOESNING HOLDER BEGGE VEIER Naar boksen tar hele flaten, er det ikke lenger hoyden som skiller liggende fra staaende - det er bredden, og den haandterer rutenettet selv: grid-template-columns: repeat(auto-fill,minmax(150px,1fr)) 390 px bred skjerm gir 2 kolonner, 844 px gir 5. Ingen egen regel for hver retning, og ingen brytepunkter aa vedlikeholde. Baandet skjules IKKE og flyttes IKKE. Boksen legger seg bare over det. Det er med vilje: rorer vi flaten baandet maales mot, flytter vi hvilestillingen, og den staar det nullbevegelse paa i dag. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ /* 1 — BOKSEN TAR HELE ARBEIDSFLATEN. Festet i begge ender, som alt annet: fra toppen av arbeidsflaten ned til footeren. Da virker den likt uansett skjermhoyde. TO SELEKTORER, IKKE EN. Dette var feilen med baandet som dukket opp over oppsett-kortene. Naar et objekt er markert, faar #resultArea klassen .mobile-text-selected, og da treffer denne regelen (film_ren.css linje 5351): ...mobile-simple-designer.mobile-text-selected.designer-tool-panel-open :not(.mobile-keyboard-open) .designer-quick-dock.is-mobile-dock { top: var(--mobile-live-work-top, var(--mobile-dock-text-top,134px)) !important } Den har EN klasse mer enn regelen min hadde, og vinner derfor - ogsaa over !important. Maalt i den tilstanden: med markert objekt: dock top = 172.9 px boks 187..344 uten markert objekt: dock top = 0 px boks 14..344 Altsaa: halv skjerm, og baandet synlig over kortene. Jeg legger ikke paa enda en regel for aa overstyre - jeg skriver den samme regelen ogsaa for den tilstanden jeg hadde glemt. Den staar sist i film.css og vinner da uansett. I Oppsett brukes ikke baandet til noe, saa boksen skal ta hele flaten enten noe er markert eller ikke. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-dock.is-mobile-dock, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-text-selected.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-dock.is-mobile-dock{ top:var(--mobile-stage-top,4px)!important; bottom:calc(var(--mobile-footer-h,54px) + var(--mobile-footer-bottom,7px) + 8px)!important; height:auto!important;min-height:0!important;max-height:none!important; z-index:1200!important; overflow:hidden!important; background:transparent!important; transition:none!important; } /* 2 — PANELET ER EN KOLONNE: fast topp, galleri som fyller resten. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel{ display:flex!important;flex-direction:column!important; height:100%!important;min-height:0!important;max-height:100%!important; margin:0!important;padding:0!important;overflow:hidden!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel>.mobile-panel-nav{ flex:0 0 auto!important;position:static!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-layout-panel{ display:flex!important;flex-direction:column!important; flex:1 1 auto!important; height:auto!important;min-height:0!important;max-height:none!important; overflow:hidden!important; } /* 3 — OVERSKRIFTEN er kort naar den har hele skjermen under seg. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-layout-panel>.dhead{ flex:0 0 auto!important; } /* 4 — STOERRELSEN OEVERST, som du ba om. Den foelger ikke med naar man ruller i kombinasjonene. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-bar{ flex:0 0 auto!important; height:auto!important;min-height:0!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-content-summary{ flex:0 0 auto!important; } /* 5 — KOMBINASJONENE: tett rutenett som fyller resten og ruller. Antall kolonner foelger bredden av seg selv - 2 i staaende, 5 i liggende - saa den samme regelen holder begge veier. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery{ display:grid!important; /* EN kolonne som utgangspunkt - et armbaand er 12,5:1 og taaler ikke aa bli smalt. Maalt i staaende med to kolonner: baandet ble 136 px bredt, og da er baandkroppen saa tynn at teksten (som kappes paa 22 px) stikker ut over og under den. Liggende setter to kolonner selv, der det er bredde nok til det. */ grid-template-columns:1fr!important; gap:9px!important; /* RADHOYDEN. Dette var aarsaken til at baandene klemte seg sammen. Maalt, liggende 900x415 med 12 oppsett: kortet er 44 px hoyt radene ble 28,125 px scrollHeight 224 mot clientHeight 214 - bare 10 px rulling Altsaa laa hvert kort 16 px nedi det neste, og rullingen fantes nesten ikke, saa de nederste var ikke mulig aa naa. Grunnen: et rutenett med bestemt hoyde fordeler plassen paa radene naar de er «auto», ogsaa naar det blir mindre enn innholdet. align-content:start hindrer det ikke - jeg provde. min-content lar hver rad beholde kortets egen hoyde: radene 44 px, scrollHeight 309 mot clientHeight 214 Da er det ekte rulling, og hele baandet er synlig i hver rad. */ grid-auto-rows:min-content!important; /* «Tett», som du sa. Uten denne strekker radene seg for aa fylle hoyden naar det er god plass - maalt i staaende: kortene ble 148 px hoye mot 40 i liggende, med luft over og under hvert baand. align-content:start lar radene beholde sin egen hoyde og pakker dem oppover. */ align-content:start!important; align-items:start!important; flex:1 1 auto!important; height:auto!important;min-height:0!important;max-height:none!important; padding:4px 2px 8px!important; overflow-y:auto!important;overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:thin!important; } /* Synlig rullefelt til hoyre, saa man ser at det er mer under. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery::-webkit-scrollbar{ width:6px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery::-webkit-scrollbar-track{ border-radius:3px!important;background:rgba(24,50,71,.10)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery::-webkit-scrollbar-thumb{ border-radius:3px!important;background:rgba(24,50,71,.48)!important; } /* KORTET: tallet til venstre, baandet til hoyre. Rekkefolgen i dokumentet er baand foerst, saa tall. order flytter tallet foran uten aa roere markupen - som eies av auto-layout-tools.js og brukes av PC-galleriet ogsaa. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-choice{ display:flex!important;flex-direction:row!important;align-items:center!important; gap:7px!important; width:auto!important;min-width:0!important;margin:0!important; padding:4px 6px!important; height:auto!important;min-height:0!important;max-height:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-choice .layout-mini{ flex:1 1 auto!important;min-width:0!important; } /* Trykkflaten settes IKKE herfra lenger. Forrige runde sto det left:13 %, right:0 her - et tall maalt paa tyvek, og ingen hoyre grense. Det ga nettopp overlappet mot hoyre du saa, og det ville dessuten vaert galt for tekstil, plast og vinyl, som har helt andre grenser. Tallene hoerer til produktet, ikke til css: auto-layout-tools.js leser dem fra samme produktfelt som designer-geometry.js bruker paa det ekte baandet, og setter left/right paa raden. Silikon (.sil-halv, 25 % i hver ende) staar fortsatt i film_ren.css og roeres ikke av noen av stedene. */ /* Tallet er valget ditt, ikke en etikett: blaatt, og nesten like hoyt som baandet ved siden av. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-choice .layout-choice-number{ order:-1!important; flex:0 0 auto!important; display:flex!important;align-items:center!important;justify-content:center!important; width:auto!important;min-width:22px!important;height:auto!important; padding:0 2px!important; border-radius:0!important;background:transparent!important; color:#04a9fc!important; font:800 26px/1 "Sora",Arial,sans-serif!important; } } /* ============================================================ HAANDSYMBOLET I STAAENDE ============================================================ Maalt: i staaende var haanden og pilene HELSVARTE, i liggende halvgjennomsiktige. Fargen var den samme i begge - rgba(255,255,255,.68) fra updateHandleContrast - saa det var ikke fargen som var feil. Svg-ene har ingen fill eller stroke i markupen; de er tegnet som streker av css. Reglene som gjor det staar i @media (orientation:landscape) and (pointer:coarse) og i staaende fantes de ikke. Da faller svg tilbake paa standarden, som er fill:black og ingen strek - altsaa en helsvart, fylt haand. Samme to regler, samme verdier, for staaende. ============================================================ */ @media (orientation:portrait) and (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer .mobile-band-move-hand{ fill:none!important; stroke:currentColor!important; stroke-width:2.15!important; stroke-linecap:round!important; stroke-linejoin:round!important; opacity:.62!important; } body.eventro-mobile-simple-designer .mobile-band-move-arrows{ fill:none!important; stroke:currentColor!important; stroke-width:3!important; stroke-linecap:round!important; stroke-linejoin:round!important; opacity:.72!important; } } /* END OPPSETT */ /* ============================================================ OPPSETT I LIGGENDE — HELE ARMBAAND NEDOVER ============================================================ Maalt for: dock 309 px hele boksen nav 54 tilbakeknapp + «Oppsett» dhead 61 «Velg automatisk oppsett ...» sizebar 60 Stoerrelse + fire knapper summary 22 --------------- topp-pynt 197 = 64 % av boksen galleri 102 = 36 % Nesten to tredjedeler gikk med for man fikk se en eneste kombinasjon. Og kombinasjonene laa som et rutenett med smaa miniatyrer, ikke som armbaand. Maalet: 3 hele baand synlige, og litt av det fjerde, saa man ser at det er mer under. Et baand i full bredde (794 px panel) blir ca 61 px hoyt. 3,2 kort a ca 71 px krever rundt 225 px galleri - altsaa maa topp-pynten ned fra 197 til under 90. Her hentes de 110 pikslene: dhead 61 -> 0 «Oppsett» staar alt i navlinja ved siden av tilbakeknappen; overskriften sier det samme en gang til. Null informasjon tapt. nav 54 -> 34 sizebar 60 -> 36 underteksten «Gjor tekst og logoer like hoye» tas bort; de fire knappene sier det selv summary 22 -> 16 beholdes - den forteller hva som faktisk ble tilpasset Alt ligger inne i (max-width:1000px) and (pointer:coarse). En PC har pointer:fine og matcher ingen av reglene. ============================================================ */ @media (orientation:landscape) and (max-width:1000px) and (pointer:coarse){ /* Overskriften ut - tittelen staar i navlinja. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-layout-panel>.dhead{ display:none!important; } /* Navlinja faar BEHOLDE sin naturlige hoyde. Forste forsok krympet den til 34 px, men tilbakeknappen settes av en regel som treffer paa id - #mobileSharedBackTools.mobile-back-tools-primary med flex:0 0 174px og height:46px - og den lot seg ikke krympe fra en regel med hoyere spesifisitet heller. Maalt: knappen ble staaende 174x46 og stakk 12 px opp over en navlinje paa 34. Da er det riktigere aa la den vaere og hente plassen der den faktisk er gratis: overskriften, underteksten og luften. */ /* Stoerrelsesvalget klemmes sammen til en lav rad. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-bar{ height:36px!important;min-height:36px!important;max-height:36px!important; align-items:center!important; padding:0 8px!important;gap:10px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-bar small{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-bar strong{ font-size:11.5px!important;line-height:1!important; } /* [FAMILIE:OPPSETT] Anders 08.10, mobil: «stoerrelses-knappene kommer i konflikt med Tilpasset innholdet ditt ... Her er kanskje loesningen aa ta bort teksten. Ta ogsaa bort Stoerrelse og bruk den ekstra plassen vi da faar til aa gjoere stoerrelses-knappene litt hoeyere.» VILKAARET ER MOBILDESIGNEREN, IKKE SKJERMBREDDEN. Foerste forsoek la reglene i @media(max-width:700px). Maalt: de virket i staaende (393 px), men Anders bruker telefonen LIGGENDE - og da er bredden 852 px, saa ingenting slo inn. body.eventro-mobile-simple-designer settes av MOBILVALG_MQ, som har en egen klausul for liggende telefon, og er derfor sann begge veier. PC-panelet har ikke klassen og er uroert - der staar etiketten noeyaktig som Anders ba om i leveranse 71. MAALT paa 852x393 foer: etiketten «Stoerrelse» 75..87 12 px knapperad 28 px hoey «Tilpasset innholdet...» 111..127 16 px galleriet 127, 196 px hoeyt De to tekstene tok 28 px. 16 gaar til knappene, resten til kortene. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-bar>span{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-content-summary{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-buttons{ height:44px!important;min-height:0!important;gap:6px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-size-buttons button{ height:44px!important;min-height:44px!important;padding:0 10px!important; font-size:13px!important;line-height:1!important; } /* TO KOLONNER, FIRE RADER - og baandene er ekte baand. Miniatyren faar baandets egen svg som bakgrunn (satt av auto-layout-tools.js, bare paa mobil), saa fasongen er den samme som i designeren. Hvorfor 2 kolonner gir riktig form helt av seg selv: galleriet er ca 780 px bredt 2 kolonner -> ca 385 px pr baand miniatyrens naturlige hoyde er 34 px 385 / 34 = 11,3 : 1, baandet er 12,5 : 1 Altsaa naer nok til at det ER baandets fasong, uten at jeg roerer hoyden. Forrige runde skalerte jeg miniatyren med transform for aa gjore den stor - det er ikke lenger noedvendig, og den maskineriet er fjernet i stedet for aa bli staaende. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; padding:4px 6px 8px!important; } } /* ============================================================ SPAKENE: ET FELT AA RULLE I, OG DU MAA TA TAK I PRIKKEN ============================================================ Maalt i «Flere objekt-justeringer», liggende 900x415: .mobile-object-controls 155 px synlig, 193 px innhold seks spaker i et rutenett som dekker 26..874 - hele bredden Altsaa 38 px aa rulle, og ingen steder aa sette fingeren som ikke var en spak. Og i css sto .mobile-controls-grid input{ touch-action:none } som gjor at en loddrett draining over en spak ikke ruller i det hele tatt - den gaar til spaken. Tre ting: 1 touch-action:pan-y - loddrett drag ruller, sidelengs drag styrer spaken. Dette er selve aarsaken. 2 et felt helt til hoyre som rutenettet ikke naar inn i, med to halvgjennomsiktige piler. Pilene tar ikke imot trykk, saa fingeren treffer rulleflaten under. 3 prikken maa gripes. Vakten ligger i start-launcher.js; her er bare den korte kvitteringen naar man bommer. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-object-controls{ position:relative!important; } /* 1 - AARSAKEN. Loddrett tilhorer rullingen, sidelengs spaken. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid input[type="range"]{ touch-action:pan-y!important; } /* 2 - SVEIPEFELTET. Rutenettet slutter for kanten. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid{ margin-right:52px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-spak-sveip{ position:absolute!important; top:0!important;right:0!important;bottom:0!important;width:52px!important; display:flex!important;align-items:center!important;justify-content:center!important; pointer-events:auto!important; touch-action:none!important; cursor:ns-resize!important; z-index:3!important; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.34) 100%)!important; border-left:1px solid rgba(49,77,96,.14)!important; } /* RULLEBAREN. Erstatter de to pilene, som ble lest som knapper. Sporet og baren tar ikke imot trykk selv - feltet rundt gjor hele jobben, saa man slipper aa treffe baren med fingeren. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-spak-sveip .spak-rullespor{ position:relative!important; display:block!important; width:7px!important; align-self:stretch!important; margin:9px 0!important; border-radius:99px!important; background:rgba(49,77,96,.16)!important; pointer-events:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-spak-sveip .spak-rullebar{ position:absolute!important; left:0!important;right:0!important;top:0!important; height:28px!important; border-radius:99px!important; background:rgba(49,77,96,.52)!important; pointer-events:none!important; } /* Er det ingenting aa rulle, skal feltet ikke love noe. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-spak-sveip.spak-sveip-tom{ display:none!important; } /* Panelet er ikke rullbart i seg selv paa alle skjermer - er det ikke noe aa rulle, skal feltet heller ikke love noe. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.mobile-adjust-open) .mobile-spak-sveip{ display:none!important; } /* 3 - KVITTERING NAAR MAN BOMMER PAA PRIKKEN. Et kort blink i sporet, saa man skjonner at spaken lever, men at man maa ta tak i prikken. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .mobile-controls-grid input[type="range"].spak-bom{ filter:brightness(1.18)!important; } } /* END SPAKER */ /* ------------------------------------------------------------ «OK» LAA UNDER SVEIPEFELTET ------------------------------------------------------------ Maalt: sveipefeltet gaar fra topp til bunn i hoyre kant, og «Tilbakestill» og «OK» sto nettopp der - oeverst til hoyre. Trykket gikk til feltet, som trodde det var et sveip, og knappen gjorde ingenting. Hodet er et rutenett med fire kolonner. Foer: [tilbakeknapp] [tittel] [Tilbakestill] [OK] Naa: [tilbakeknapp] [Tilbakestill] [OK] [tittel] Rekkefolgen i markupen er uroert - bare order og kolonnebredder. Hodet far samtidig luft til hoyre saa tittelen ikke gaar inn under feltet. Da er hele hoyre kant sveip, hele veien ned. ------------------------------------------------------------ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head{ grid-template-columns:minmax(104px,auto) auto auto minmax(0,1fr)!important; padding-right:58px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head button.mobile-back-tools{order:1!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head .mobile-adjust-reset{order:2!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head .mobile-adjust-ok{order:3!important} body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-adjust-open .mobile-controls-head strong{ order:4!important; padding-left:4px!important; } } /* END SPAKER HODE */ /* ------------------------------------------------------------ [FAMILIE:FERDIGPORT] «LEGGE DESIGNET I KURVEN?» ------------------------------------------------------------ Boksen bygges i js og finnes bare i den forenklede mobil- designeren (se mobilFerdigPort i start-launcher.js). Pc kan ikke naa den - elementet eksisterer ikke der. Reglene ligger likevel bak (max-width:1000px) and (pointer:coarse), som er hele omraadet erForenkletMobil() kan vaere sann i. Foten er en LODDRETT stabel, ikke en rad. Maalt: de tre knappene er 84 + 229 + 243 = 556 px brede, og boksen har 486 px aa gi dem. En rad brakk derfor i to uansett - og i staaende er det bare 357 px aa ta av. Da er en stabel det aerlige valget: det viktige valget oeverst, og hver knapp like bred. ------------------------------------------------------------ */ @media (max-width:1000px) and (pointer:coarse){ #oppsettSporDlg{ max-width:520px!important; width:92vw!important; max-height:92vh!important; overflow:auto!important; } #oppsettSporDlg .oppsett-spor-tekst{ padding:13px 18px 3px!important; } #oppsettSporDlg .oppsett-spor-tekst p{ margin:0!important; font-size:15px!important; line-height:1.45!important; color:#232323!important; } #oppsettSporDlg .oppsett-spor-foot{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:7px!important; padding:12px 16px!important; } #oppsettSporDlg .oppsett-spor-foot button{ width:100%!important; font-size:15px!important; padding:11px 12px!important; white-space:normal!important; } /* HUSETS LYSEBLAA, ikke den gronne. To ting gikk galt. Knappen hadde background:var(--good) som inline-stil - arvet fra #ferdigBtn i nettbutikk.html, som har noyaktig den samme inline-stilen. Paa baandet ser man den aldri, for designer-foten overstyrer den med husets blaa. Boksen arvet altsaa UTGANGSPUNKTET og ikke REGELEN, og ble gronn. Og: boksen henger paa document.body, utenfor #resultArea - der --eventro-blue er definert. Den variabelen er tom her. Derfor --accent, som staar paa :root og er den samme fargen foten maler «Ferdig, legg i kurv» med (#04a9fc). Inline-stilen er fjernet fra js; fargen hoerer hjemme her. */ #oppsettSporDlg #oppsettSporJa{ order:1!important; background:var(--accent,#04a9fc)!important; border:1.5px solid var(--accent,#04a9fc)!important; color:#fff!important; font-weight:700!important; box-shadow:none!important; } #oppsettSporDlg #oppsettSporJa:hover, #oppsettSporDlg #oppsettSporJa:focus-visible{ background:var(--accent-ink,#0284c7)!important; border-color:var(--accent-ink,#0284c7)!important; } /* Det andre svaret er likeverdig, men ikke det vi anbefaler: samme form, hvit bunn - som «Ta bort design» i foten. */ #oppsettSporDlg #oppsettSporSomDet{ order:2!important; background:#fff!important; border:1.5px solid #c9dce5!important; color:#183247!important; font-weight:700!important; box-shadow:none!important; } /* Avbryt er ikke et svar - den skal ikke se ut som de to andre. */ #oppsettSporDlg #oppsettSporAvbryt{ order:3!important; background:transparent!important; border-color:transparent!important; box-shadow:none!important; font-size:14px!important; padding:6px 12px!important; color:#5a5a5a!important; } } /* END FERDIGPORT */ /* ============================================================ [FAMILIE:OPPSETTKORT] KORTET SOM MAALESTOKK-BILDE ------------------------------------------------------------ Kortet tegnet seg selv med egne mal: kanvas-maalt tekstbredde for avstandene, tvungen prosentbredde for logoen, og trykkflaten strukket over hele kortet. Og objektene fikk bare translate(-50%,-50%) - uten rotate og scale. Rotasjon og skvis fra detalj-spakene naadde derfor aldri fram, og klaringen mellom logo og tekst stemte ikke med baandets. Naa bygger js en SCENE i logisk stoerrelse med baandets eget forhold, der hvert objekt faar positionObjEl sine formler. CSS her har bare EN jobb: la scenen vaere et fritt rom. Ingen flex, ingen tvungen bredde, ingen object-fit - alt slikt ville legge en ny maaling oppaa den vi nettopp fjernet. js eier plasseringen; CSS eier bare rammen. ============================================================ */ .layout-mini.layout-mini-fasit>span{ display:block; padding:0; gap:0; overflow:hidden; } .layout-mini.layout-mini-fasit .layout-scene{ position:absolute; left:0;top:0; display:block; transform-origin:0 0; } .layout-mini.layout-mini-fasit .layout-scene-brett{ position:absolute; display:block; } /* Samme form som .obj paa baandet (styles.css: position:absolute; transform-origin:center center; white-space:nowrap). */ .layout-mini.layout-mini-fasit .layout-live-obj{ position:absolute; inset:auto; display:block; flex:none; width:auto;height:auto; min-width:0;max-width:none; overflow:visible; white-space:nowrap; line-height:1; transform-origin:center center; background:transparent; border-radius:0; font-style:normal; } /* Samme indre spenne som baandet: .obj .t{display:inline-block;line-height:1} */ .layout-mini.layout-mini-fasit .layout-live-obj>.t{ display:inline-block; line-height:1; } /* Logoen faar bredde i piksler av js og hoyde auto - akkurat som img paa baandet. object-fit ville ha klippet eller strukket. */ .layout-mini.layout-mini-fasit .layout-live-obj img{ display:block; width:auto;height:auto; max-width:none; object-fit:fill; filter:none; } /* END OPPSETTKORT */ /* ============================================================ [FAMILIE:DESIGNER-FOOTER] «TA BORT DESIGN OG LUKK» UT AV FOTEN ------------------------------------------------------------ Anders 04.10: knappen skal erstattes av vanlig utkryssing oppe til hoyre. Den X-en finnes alt - #back4 i designer-hodet - og den gjor MER enn knappen gjorde: den spor «Vil du beholde endringene?» med Behold / Forkast / Avbryt. «Forkast» er noyaktig det knappen gjorde, bare uten aa vaere en felle rett ved siden av «Ferdig, legg i kurv». To knapper side om side der den ene legger i kurven og den andre sletter alt, er en feil som venter paa aa skje med en tommel. Knappen fjernes IKKE fra koden: cart-actions.js lager den, og PC bruker den fortsatt. Her skjules den bare i den forenklede mobil-designeren, og «Ferdig, legg i kurv» faar hele foten. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>#taBortDesignBtn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#taBortDesignBtn{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot{ grid-template-columns:minmax(0,1fr)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #edFoot>#ferdigBtn, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.designer-quick-open:not(.kal-aktiv):not(.opt-aktiv)>#edFoot>#ferdigBtn{ grid-column:1 / -1!important; width:100%!important; } /* X-EN MAA FAKTISK VAERE TRYKKBAR. Maalt foer dette: hodet (#resultArea>h2) er overflow:hidden og blir 10 px hoyt i liggende. X-en er 32-47 px og ble derfor klippet til en ca 6 px hoy stripe - resten av fingeren traff #designZoomWrap under. Tester nedover gjennom X-en: y=7 back4 y=11 back4 y=15 og nedover: designZoomWrap Knappen VIRKET (js-klikk aapnet «behold endringene»), men var i praksis ikke til aa treffe. Det gikk an aa leve med saa lenge foten hadde en vei ut. Naa er X-en den eneste, saa klippingen maa bort. Tittelen klippes fortsatt - den har sin egen overflow:hidden paa #step4title - saa ingenting flyter ut. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2{ overflow:visible!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer>h2 .designer-head-actions{ z-index:1008!important; } /* Storrelsen roeres IKKE. Maalt uten noen ny regel er X-en alt 47x47 i liggende og 48x48 i staaende - den var stor nok hele tiden, den var bare klippet. Aa sette en storrelse her gjorde den mindre i staaende, ikke storre. */ } /* END FOTEN UTEN TA-BORT */ /* ============================================================ [FAMILIE:PANELER] OK I PANELHODET («Last opp fil» og «Tegn») ------------------------------------------------------------ js bestemmer NAAR den vises (bare de to panelene som manglet en vei ut). CSS gir den bare husets ja-form og skyver den til hoyre, motsatt ende av «← Verktoy». ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel>#mobilePanelOk.mobile-panel-ok{ position:absolute!important; top:8px!important; right:46px!important; /* [FAMILIE:PANEL-OK] OK ligger med VILJE inne i panelhodet - top:8px, mens .mobile-panel-nav er en sticky stripe fra 0 til 46 px over hele bredden. To elementer paa samme flate; den som skal ta trykket er OK. Stripa har z-index 90, OK hadde 6, saa stripa vant hvert eneste trykk. Maalt i oppsett-panelet: elementFromPoint midt paa OK-knappen svarte mobilePanelNav i alle tre punkter, og et ekte fingertrykk gjorde ingenting - mens b.click() fra js virket, fordi den gaar utenom traeffpunktet. Derfor sto feilen ogsaa igjennom testene mine. Tegnestripa liggende var aldri rammet: der er OK position:static og et vanlig ledd paa raden, ikke et svevende merke oppe i hodet. */ z-index:91!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:60px!important; height:30px!important; min-height:30px!important; padding:0 16px!important; box-sizing:border-box!important; border:1px solid var(--accent,#04a9fc)!important; border-radius:8px!important; background:var(--accent,#04a9fc)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font:800 13px/1 "Sora",Arial,sans-serif!important; box-shadow:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel>#mobilePanelOk.mobile-panel-ok[hidden]{ display:none!important; } /* I den liggende tegnestripa er panelet en vannrett rad. Da er OK ikke et svevende merke, men siste element paa linja. */ body.evt-bunnstripe #resultArea.as-modal.mobile-simple-designer.designer-tool-panel-open[data-designer-quick-mode="draw"]:not(.mobile-keyboard-open) .designer-quick-panel>#mobilePanelOk.mobile-panel-ok{ position:static!important; order:99!important; flex:0 0 auto!important; margin-left:6px!important; height:var(--evt-knapp-h,42px)!important; min-height:var(--evt-knapp-h,42px)!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel>#mobilePanelOk.mobile-panel-ok:active{ background:var(--accent-ink,#0284c7)!important; border-color:var(--accent-ink,#0284c7)!important; transform:translateY(1px)!important; } } /* [FAMILIE:SAMMEOPPSETT] Mobil beholder blokka si uroert under. Her er den samme formen for PC: knappen vises naa ogsaa i oppsett-panelet der, og uten disse reglene fikk den ingen plassering og ingen farge - maalt: en graa standardknapp oppe til VENSTRE, utenfor hodet. Konteksten er panelet i layout-modus, som er nettopp det tilfellet js slipper igjennom paa PC. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel>#mobilePanelOk.mobile-panel-ok{ position:absolute!important; top:8px!important; right:46px!important; /* [FAMILIE:PANEL-OK] OK ligger med VILJE inne i panelhodet - top:8px, mens .mobile-panel-nav er en sticky stripe fra 0 til 46 px over hele bredden. To elementer paa samme flate; den som skal ta trykket er OK. Stripa har z-index 90, OK hadde 6, saa stripa vant hvert eneste trykk. Maalt i oppsett-panelet: elementFromPoint midt paa OK-knappen svarte mobilePanelNav i alle tre punkter, og et ekte fingertrykk gjorde ingenting - mens b.click() fra js virket, fordi den gaar utenom traeffpunktet. Derfor sto feilen ogsaa igjennom testene mine. Tegnestripa liggende var aldri rammet: der er OK position:static og et vanlig ledd paa raden, ikke et svevende merke oppe i hodet. */ z-index:91!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:60px!important; height:30px!important; min-height:30px!important; padding:0 16px!important; box-sizing:border-box!important; border:1px solid var(--accent,#04a9fc)!important; border-radius:8px!important; background:var(--accent,#04a9fc)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font:800 13px/1 "Sora",Arial,sans-serif!important; box-shadow:none!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel>#mobilePanelOk.mobile-panel-ok[hidden]{ display:none!important; } /* I den liggende tegnestripa er panelet en vannrett rad. Da er OK ikke et svevende merke, men siste element paa linja. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel>#mobilePanelOk.mobile-panel-ok:active{ background:var(--accent-ink,#0284c7)!important; border-color:var(--accent-ink,#0284c7)!important; transform:translateY(1px)!important; } /* END PANEL-OK */ /* ============================================================ [FAMILIE:OPPSETTKORT] «ORIGINAL» FORST I LISTA ------------------------------------------------------------ Kundens eget design er ikke ett forslag blant flere - det er det de andre bygger paa. Derfor gaar kortet over hele raden, har husets blaa ramme, og «Original» der tallet ellers staar. Under det en tynn skillelinje med tekst, saa det leses som en overskrift for resten og ikke som nok et valg. ============================================================ */ /* [FAMILIE:SAMMEOPPSETT] Omfanget var «telefon»: en media-sporring paa (max-width:1000px) and (pointer:coarse) pluss body-klassen eventro-mobile-simple-designer. Men PC bruker naa det SAMME oppsett-panelet, og da er betingelsen panelet - ikke skjermen. Derfor staar konteksten naa paa #resultArea i layout-modus, som er sann begge steder og usann overalt ellers. Den gamle PC-dialogen setter aldri data-designer-quick-mode, saa den er uberoert. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-original{ grid-column:1 / -1!important; border:2px solid var(--accent,#04a9fc)!important; background:#f2fbff!important; box-shadow:none!important; } /* Tallene i galleriet eies av en regel med [data-designer-quick-mode] i seg (blaatt, 26 px). Merket maa derfor ha den samme konteksten pluss sin egen klasse, ellers vinner tallregelen og «Original» blir satt i 26 px uten bakgrunn. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-choice.layout-choice-original .layout-choice-merke{ order:-1!important; flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; height:17px!important; padding:0 5px!important; /* «Original» er et ord der de andre har ett tegn. Det faar derfor mindre skrift OG lov til aa legge seg litt oppaa baandet - ellers maatte tallkolonnen vaere like bred for alle tretten kortene. */ margin-right:-9px!important; position:relative!important; z-index:3!important; border-radius:99px!important; background:var(--accent,#04a9fc)!important; color:#fff!important; /* [FAMILIE:OPPSETTKORT] Anders 08.10, mobil: «Original er skrevet med hvit skrift paa lys bakgrunn». Maalt paa 393x852: color rgb(4,169,252) blaa background-color rgba(0,0,0,0) gjennomsiktig -webkit-text-fill-color rgb(255,255,255) HVIT Mobilregelen for .layout-choice-number (linje ~8483) overstyrer background og color med stoerre spesifisitet, men roerer ikke text-fill - og i WebKit vinner text-fill over color. Pilla forsvant, den hvite skrifta ble staaende. currentColor i stedet for #fff: paa PC er color fortsatt #fff, saa der er alt som foer; paa mobil foelger fyllet den blaa fargen tallene har. De to kan ikke lenger sprike. */ -webkit-text-fill-color:currentColor!important; font:800 7px/1 "Sora",Arial,sans-serif!important; letter-spacing:.04em!important; text-transform:uppercase!important; box-shadow:0 0 0 1.5px #fff!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-original-skille{ grid-column:1 / -1!important; display:flex!important; align-items:center!important; gap:8px!important; margin:1px 0 0!important; padding:0 2px!important; color:#5d748a!important; font:700 9px/1 "Sora",Arial,sans-serif!important; letter-spacing:.05em!important; text-transform:uppercase!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-original-skille::after{ content:""!important; flex:1 1 auto!important; height:1px!important; background:rgba(93,116,138,.3)!important; } /* END ORIGINALKORT */ /* [FAMILIE:OPPSETTKORT] Bekreftelsesboksens css laa her. Boksen er fjernet - se kommentaren i start-launcher.js. */ /* ============================================================ [FAMILIE:SPAKE] VELGE-STRIPA («Juster» uten noe valgt) ------------------------------------------------------------ Ligger der verktoyraden ligger, og tar over den plassen mens kunden plukker. Verktoyknappene skjules - ikke dokken, for det er dokken stripa staar i. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open .designer-quick-dock .designer-start-shell{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer:not(.mobile-plukk-open) #mobilePlukkStripe.mobile-plukk-stripe{ display:none!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe.mobile-plukk-stripe{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:8px!important; width:100%!important; padding:8px 10px!important; box-sizing:border-box!important; /* Samme pastell som «Juster»-knappen i verktoyraden. Boksen som vokser ut av en knapp skal ha knappens farge - det er den eneste traaden som viser hvor den kom fra. */ border:1.5px solid #f1a7bd!important; border-radius:11px!important; background:#ffe1eb!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe>strong{ color:#59283a!important; font:800 13px/1.15 "Sora",Arial,sans-serif!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe .mobile-plukk-tall{ display:inline-flex!important; align-items:center!important; height:22px!important; padding:0 9px!important; border-radius:99px!important; background:#fff0f5!important; color:#8a3c55!important; font:800 11px/1 "Sora",Arial,sans-serif!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe>button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:var(--mobile-touch-target,40px)!important; padding:0 16px!important; box-sizing:border-box!important; border:1.5px solid #e8b9c8!important; border-radius:9px!important; background:#fff!important; color:#183247!important; -webkit-text-fill-color:#183247!important; font:700 13px/1 "Sora",Arial,sans-serif!important; cursor:pointer!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe>button.mobile-plukk-ok{ border-color:var(--accent,#04a9fc)!important; background:var(--accent,#04a9fc)!important; /* «Juster disse N» er handlingen, ikke rammen. Den beholder husets blaa, slik «Ja» gjor i bekreftelsesboksen. */ color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:800!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer.mobile-plukk-open #mobilePlukkStripe>button.mobile-plukk-ok:disabled{ border-color:#e8b9c8!important; background:#fbe4ec!important; color:#b58397!important; -webkit-text-fill-color:#b58397!important; } /* Gruppa: overskriften sier hvor mange, og spakene er forskjeller. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #mobileObjectControls.mobile-controls-gruppe .mobile-controls-head>strong{ color:var(--accent,#04a9fc)!important; } } /* END PLUKKESTRIPE */ /* ============================================================ [FAMILIE:PANELER] FLATE FARGEPROEVER ------------------------------------------------------------ Anders 05.10: proevene sto som rektangler paa hoykant og spiste hoyde. Maalt: en rute var 25 x 46 px - 25 bred som css sier, men 46 hoy. Hoyden kom ikke fra fargepanelet i det hele tatt, men fra en generell regel for ALT i verktoyboksen: .designer-quick-panel :is(input,select,button){ height:var(--mobile-control-h,38px) } Den regelen er riktig for felt og knapper - en finger skal treffe dem. En fargeproeve er ikke en kontroll man leser, det er en flate man peker paa, og den trenger ikke vaere like hoy som et tekstfelt. Her meldes den ut av regelen og blir flat: bredere enn hoy, saa det gaar flere paa raden og faerre rader. Maalt foer/etter paa 900x415: baandfargene 98 -> 46 px, trykkfargene 46 -> 26 px, hele boksen 310 -> 214 px. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-color-chip{ width:34px!important; min-width:34px!important; max-width:34px!important; height:20px!important; min-height:20px!important; max-height:20px!important; padding:0!important; border-radius:5px!important; flex:0 0 auto!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-band-colors, body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-print-colors{ gap:5px!important; align-content:flex-start!important; } /* Taket paa baandfargene var satt for hoye ruter. Med flate ruter faar tre rader plass paa under halvparten. */ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-band-colors{ max-height:81px!important; } } /* END FLATE FARGEPROEVER */ /* ============================================================ [FAMILIE:SPAKE] SE HVA SOM ER VALGT ------------------------------------------------------------ .sel tegner ingenting paa mobil - der er det haandtakene som viser det valgte, og de finnes bare for ETT objekt. Naar flere er med, trengs et merke per objekt. Stiplet, saa det ikke forveksles med trykkflatens egne streker. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer.mobile-flervalg #bigBand .pboard .obj.sel{ outline:2px dashed var(--accent,#04a9fc)!important; outline-offset:3px!important; } } /* END FLERVALG-MERKE */ /* ============================================================ [FAMILIE:PANELER] FARGEBOKSEN TRENGER MINDRE HOYDE ------------------------------------------------------------ Naar boksen krever mer plass enn det finnes, skyves baandet opp - og da er hver sparte piksel i boksen en piksel baandet faar beholde. Her ryddes den hoyden som ikke baerer innhold: tilbakestill-knappen sto paa sin egen hoye rad nederst, og seksjonene hadde luft over og under proevene. ============================================================ */ @media (max-width:1000px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-color-section{ padding:8px 10px 9px!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-color-section>small{ margin:1px 0 6px!important; line-height:1.25!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-color-reset{ justify-self:end!important; align-self:center!important; height:32px!important; min-height:32px!important; margin:0!important; padding:0 14px!important; white-space:nowrap!important; } body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer .designer-quick-panel .designer-color-panel{ row-gap:8px!important; } } /* END FARGEBOKS-HOYDE */ /* ============================================================ [FAMILIE:PANELER] «VELG SELV»-RUTA I BAANDFARGE ------------------------------------------------------------ Regnbuen betyr at man kan velge fritt. Den staar sist i rekka, etter produktets egne farger, saa den leses som «eller noe helt annet» - ikke som enda en fast farge. ============================================================ */ #resultArea.as-modal .designer-color-chip.designer-color-chip-egen{ background:conic-gradient(#ff4b4b,#ffd23f,#54d16a,#19b8c8,#3b7fe0,#a65cd4,#ff4b4b)!important; position:relative!important; } #resultArea.as-modal .designer-color-chip.designer-color-chip-egen::after{ content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font:800 13px/1 "Sora",Arial,sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.45); pointer-events:none; } /* END VELG-SELV-RUTE */ /* ============================================================ [FAMILIE:OPPSETTKORT] TOPPVISNINGEN ------------------------------------------------------------ Det valgte ligger oeverst i full bredde. Rammen viser at det er DETTE baandet ser ut som naa - og kortet tar ikke imot trykk, for man er der alt. ============================================================ */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-topp{ grid-column:1 / -1!important; border:2px solid var(--accent,#04a9fc)!important; background:#f2fbff!important; box-shadow:none!important; cursor:default!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-original:not(.layout-choice-topp){ grid-column:auto!important; border:1.5px solid #d9e4ed!important; background:#fff!important; } /* [FAMILIE:SAMMEOPPSETT] Toppkortet gaar over hele raden. Paa mobil er .layout-choice en flex-rad der miniatyren tar resten av bredden (flex:1 1 auto) og merket staar ved siden av. Paa PC er kortet et grid, og da tok «ORIGINAL»-merket hele raden mens miniatyren falt sammen. Maalt paa 1440x900: mini 25x2 px, merket 621x17. Bare toppkortet trenger raden - de nummererte kortene pakker fint i grid-en sin, og et Original-kort som er flyttet ned i rekka skal se ut som naboene sine. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-topp{ display:flex!important; align-items:center!important; gap:6px!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-topp .layout-mini{ flex:1 1 auto!important; min-width:0!important; } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-topp .layout-choice-number{ flex:0 0 auto!important; } /* END TOPPVISNING */ /* ============================================================ [FAMILIE:DOBBELTOPP] OPPSETT-BOKSEN PAA PC ------------------------------------------------------------ Anders 05.10: «thumbnailsene skal vaere stoerre og foelge naturlig under det stoerste baandet.» Maalt paa 1440x900 for denne lappen: #bigBand 1363 px bred #designerQuickPanel 696 px bred galleriet 3 kolonner a 215 px -> miniatyr 171x14 Panelet er bygget for en telefon, og paa PC arvet oppsett-boksen den bredden selv om det er god plass. Her faar den samme bredde som baandet over - beholderen minus samme luft paa hver side - og to kort i bredden i stedet for tre. Gjelder BARE naar panelet ikke dekker baandet, altsaa ikke mobil. ============================================================ */ body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] #designerQuickDock{ width:calc(100% - 48px)!important; max-width:none!important; } body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-panel{ width:100%!important; max-width:none!important; } body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } /* Original-kortet staar i rekka her, ikke oeverst. Kortet er et grid med «minmax(0,1fr) 25px» - en smal kolonne til tallet. «ORIGINAL» er et ord, ikke et tall, saa den kolonnen vokste og klemte miniatyren flat. Maalt: kort 645x60, men miniatyren 25x2 mens naboene hadde 601x48. Merket legges derfor OPPAA baandet, slik Anders ba om 04.10, og tar da ingen plass i rutenettet. Mobil har sin egen flex-rad og roeres ikke. */ body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-original:not(.layout-choice-topp){ grid-template-columns:minmax(0,1fr) 25px!important; } body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .layout-gallery .layout-choice.layout-choice-original:not(.layout-choice-topp) .layout-choice-merke{ position:absolute!important; left:12px!important; top:50%!important; transform:translateY(-50%)!important; z-index:2!important; } /* Hoyden: .designer-layout-panel har max-height:min(52vh,470px). Det taket vet ingenting om hvor bunnraden ligger, og med de nye, hoyere kortene gikk boksen ned i knappene. Maalt, tekst + logo: 1440x900 panelet 443..911, foten fra 827 -> 84 px over 1280x800 panelet 428..844, foten fra 729 -> 115 px over 1920x1080 panelet 449..919, foten fra 1003 -> 0 Taket bindes derfor til vindushoyden, med et gulv saa boksen aldri blir ubrukelig liten. Galleriet ruller inni som for. */ body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-layout-panel{ max-height:min(470px,max(220px,calc(100vh - 540px)))!important; } /* END OPPSETT-BOKS PC */ /* ============================================================ [FAMILIE:GRIPEROM] EN TOM TEKST HAR INGEN BREDDE ------------------------------------------------------------ Anders 05.10: «denne selecteren er helt sammentrykt naar vi starter. Kan du la den faa bittelitt lengde-avstand saa det er mulig aa trekke i hjoerne-spakene?» Markeringsrammen faar bredden sin av teksten den omslutter (object-rendering.js: synligTekstDomMaal). En nettopp opprettet tekst er tom, og da er den bredden null. Maalt paa 1440x900: .hset 1 px bred (69 px hoy) rotate-haandtak @661,206 del-haandtak @661,206 <- noeyaktig samme punkt venstre/hoyre kant 17 px fra hverandre To haandtak paa samme piksel kan ikke skilles med en finger. Rammen er et GRIPEVERKTOY, ikke et maal paa teksten. Den faar derfor et gulv for bredden. Teksten selv roeres ikke - bare rammen rundt den, og bare naar den ellers ville vaert smalere enn haandtakene sine. ============================================================ */ #bigBand .hlayer .hset{min-width:48px} /* END GRIPEROM */ /* ============================================================ L550 — KROKEN PAA NOEKKELHALSBAANDET SKAL VAERE SYNLIG PAA MOBIL ------------------------------------------------------------ Anders 07.10: «paa noekkelhalsbaand er det en krok paa venstre side. Den skal vaere synlig naar vi designer paa mobilen. Naa ligger kroken utenfor skjermen.» TO FEIL, maalt paa 390x844: 1 HOEYKANT: baandet ble ikke tilpasset boksen i det hele tatt. Regelen som gjoer det (NyDesignerModul 134) sier selv «Mobil- only», men ligger inne i @media (orientation:landscape). I hoeykant gjaldt derfor bare width:100%, og med sideforholdet 900/15 ble baandet 1560 px bredt i en 372 px boks - sentrert, saa BEGGE ender falt utenfor. Kroken laa paa x = -632..-575, altsaa 584 px til venstre for boksen. Den var heller ikke mulig aa panorere fram til: clampToBounds sentrerer laget saa lenge scale <= 1, saa panBy(200..800) flyttet kroken null piksler. Maalt. 2 LIGGENDE: der tilpasses baandet (782 px i en 796 px boks), men kroken stikker 47 px ut til venstre for baandet, og mobil- regelen setter margin:0 auto og opphever dermed husets #bigBand.har-krok{margin-left:44px}. Kroken laa paa -16..41 med bokskant paa 24 - klippet i begge retninger. LOESNING: baandet med krok tilpasses boksen minus 48 px, og de 48 px gis som venstremarg. Det er samme reservasjon som husets PC-regel bruker, bare tilpasset at mobilregelen nullstiller margene. Kroken trenger 47 px; 48 gir én piksel luft. SCOPE: bare .har-krok, altsaa bare art. 015. Maalt paa 001, 002, 003, 004, 005 og 014: byte-identisk geometri foer og etter. ============================================================ */ @media (max-width:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand.har-krok{ width:calc(var(--mobile-band-fit-width,100%) - 48px)!important; max-width:100%!important; height:auto!important;max-height:100%!important; margin:0 0 0 48px!important; flex:0 0 auto!important; transform:none!important } } @media (orientation:landscape) and (max-width:1000px) and (max-height:720px) and (pointer:coarse){ body.eventro-mobile-simple-designer #resultArea.as-modal.mobile-simple-designer #bigBand.har-krok{ width:calc(var(--mobile-band-fit-width,100%) - 48px)!important; margin:0 0 0 48px!important } } /* END L550 */ /* ============================================================ [FAMILIE:OPPSETT] STOERRELSESKNAPPENE OG PLASSEN TIL KORTENE se docs/architecture/FAMILIE_oppsett.md Anders 08.10, om PC-visningen av Oppsett: «Disse knappene er litt smaa og ligger langt unna teksten Stoerrelse. Jeg lurer paa om du kan lage dette som 4 store knapper i det samme graa feltet.» «Thumbnailsene ligger ganske langt nede paa skjermen. Tool-baren ... tar en del av plassen.» MAALT FOER (1600x1000, tyvek, 4 elementer): verktoylinja (#designerStartShell) 344 - 438 94 px stoerrelsesfeltet 508 - 560 52 px knapp 74 x 34 px galleriet starter 582 Knappene stod i en flex-rad med space-between, saa de ble presset helt ut til hoyre mens «Stoerrelse» stod helt til venstre - med tomrommet imellom som Anders beskriver. Her stables de i stedet: etiketten over, knappene under i full bredde. VERKTOYLINJA SKJULES I OPPSETT-MODUS. Mobilen gjor dette fra for (linje 4637: .mobile-simple-designer.designer-tool-panel-open), saa moensteret er ikke nytt - det manglet bare paa PC. Veien ut av panelet er «Lukk» i panelets egen fot og OK-knappen over det, saa ingen blir innelaast. 94 px frigjort rett over kortene. ============================================================ */ #resultArea.as-modal .designer-layout-panel .layout-size-bar, .layout-gallery-dlg .layout-size-bar{ flex-direction:column;align-items:stretch;gap:8px;padding:12px 18px 14px } #resultArea.as-modal .designer-layout-panel .layout-size-bar>span, .layout-gallery-dlg .layout-size-bar>span{ flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap } #resultArea.as-modal .designer-layout-panel .layout-size-bar strong, .layout-gallery-dlg .layout-size-bar strong{font-size:14px} #resultArea.as-modal .designer-layout-panel .layout-size-bar small, .layout-gallery-dlg .layout-size-bar small{font-size:11px} #resultArea.as-modal .designer-layout-panel .layout-size-buttons, .layout-gallery-dlg .layout-size-buttons{ grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100% } #resultArea.as-modal .designer-layout-panel .layout-size-buttons button, .layout-gallery-dlg .layout-size-buttons button{ min-height:52px;padding:10px 8px;border-width:2px;border-radius:11px; font:800 15px/1.2 "Sora",Arial,sans-serif;letter-spacing:.01em; transition:background .12s,border-color .12s,color .12s } /* Det valgte nivaaet skal vaere til aa se paa en armlengdes avstand, ikke bare en nyanse moerkere enn naboen. */ #resultArea.as-modal .designer-layout-panel .layout-size-buttons button.is-active, .layout-gallery-dlg .layout-size-buttons button.is-active{ border-color:#0893cf;background:#08a9ee;color:#fff; box-shadow:0 2px 0 #0893cf inset,0 1px 6px rgba(8,169,238,.35) } /* Verktoylinja vekk mens Oppsett staar aapent - kortene opp. */ #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-start-shell{ display:none!important } #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-quick-dock{ margin-top:8px } /* Hoyden som ble frigjort skal gaa til KORTENE, ikke til tom luft. Taket over (linje ~9422) er «calc(100vh - 540px)», og de 540 var maalt MENS verktoylinja stod der. Naar den er vekk i oppsett-modus, er 94 av dem ikke lenger i bruk. Vi gir 80 av dem til panelet og beholder 14 som margin mot foten. MAALT etterpaa, med dette taket: 1600x1000 panelet 345..886, foten fra 827 114 px klaring 1440x900 panelet 345..786 114 1366x768 panelet 345..654 114 Gulvet paa 220 px og den samme min/max-formen staar urort, saa smale og lave vinduer oppfoerer seg som for. */ body:not(.eventro-mobile-simple-designer) #resultArea.as-modal.designer-tool-panel-open[data-designer-quick-mode="layout"] .designer-layout-panel{ max-height:min(560px,max(220px,calc(100vh - 460px)))!important } @media(max-width:700px){ #resultArea.as-modal .designer-layout-panel .layout-size-buttons button, .layout-gallery-dlg .layout-size-buttons button{ min-height:44px;font-size:12px;padding:8px 4px;border-radius:9px } #resultArea.as-modal .designer-layout-panel .layout-size-bar, .layout-gallery-dlg .layout-size-bar{padding:10px 12px 12px;gap:7px} } /* END L571 */ /* [FAMILIE:SILKETRYKK] «Ulike farger (ekstra kostnad)» - snarveien fra Farge-verktoeyet til silketrykk-modalen. Ser ut som husets simple-btn, men staar inne i fargeseksjonen og maa derfor ha sine egne maal. */ #resultArea .designer-color-section .designer-ulike-farger{ display:flex;flex-direction:column;gap:1px;width:100%; margin-top:9px;padding:8px 11px;text-align:left; border:1px dashed #9ec7e8;border-radius:9px;background:#f4fbff;cursor:pointer } #resultArea .designer-color-section .designer-ulike-farger:hover{ border-style:solid;border-color:#08a9ee;background:#eaf7ff } #resultArea .designer-color-section .designer-ulike-farger strong{ font:800 12.5px/1.2 "Sora",Arial,sans-serif;color:#0f7fba } #resultArea .designer-color-section .designer-ulike-farger small{ font:400 10.5px/1.35 "Sora",Arial,sans-serif;color:#5b7086 } #resultArea .designer-color-section .designer-ulike-farger[hidden]{display:none} /* ============================================================ [FAMILIE:LAGERSTATUS] L394 — tre lagerstatuser pr båndfarge. Anders 11.10.2026. Erstatter L393 fra samme dag. Teksten og regelen om hva som kan velges eies av LAGERTEKST i engine/core/runtime-basics.js. Hvilke produkter som viser lager i det hele tatt, eies av viserLager() samme sted (bare Tyvek). Her står BARE utseendet. FARGEN SKAL VÆRE FARGEN Første utgave grået ut ruta med grayscale + opacity. Anders: «Jeg vil at fargepaletten skal ha korrekt farge selv om den er "Ikke på lager", men tegn et rødt kryss over fargeruten.» Og han har rett: er ruta grå, ser ikke kunden hvilken farge hun gikk glipp av — og det er nettopp det hun trenger for å velge noe annet. Fargen står nå urørt, og merket ligger OVER den: ut → rødt kryss best → utropstegn Begge er rene pseudo-elementer. Ingen background røres, så swatch-bildene (glitter gull/sølv) og neon-gløden virker som før. HVORFOR KRYSSET HAR HVIT KANT OG UTROPSTEGNET SVART Merket må leses på 12 ulike bånd­farger, og to av dem er den røde (#e2001a) og den sorte (#111111). Et rent rødt kryss forsvinner på rødt bånd; et hvitt utropstegn forsvinner på hvitt. Derfor har hvert merke en kontrastkant i motsatt valør: krysset er rødt med hvit omriss, utropstegnet hvitt med svart. Da er begge lesbare på alle tolv — det er målt i bevis-lagerstatus.js. REFLOW-FELLA, OG HVORFOR LINJA TAR HELE BREDDEN .bl-pop-stock-hover lå inne blant fargerutene som et vanlig flex-element med min-width:86px og white-space:nowrap. Da teksten bare kunne bli «På lager» gikk det bra. «Ikke på lager. 2 ukers leveringstid» er nesten tre ganger så bred, og elementet ville vokst i det kunden holdt musa over ruta — og dyttet alle fargerutene ut av stilling mens hun pekte på en av dem. Linja får derfor sin egen rad (flex-basis:100%). Høyrestillingen fra L290 står: justify-content:flex-end holder den mot samme høyre kant som før, men nå kan den ikke flytte noe. ============================================================ */ .wrap .bl-farge-pop2 .bl-pop-stock-hover{ flex:0 0 100%; min-width:0; height:16px; margin-top:2px; color:#2e7d32; } /* Fargen følger statusen. Grønt for det vi har, rav for det som må bestilles, grått for det som er ute — aldri grønt på noe vi ikke kan sende. Den gamle regelen farget ALT grønt. */ .wrap .bl-farge-pop2 .bl-pop-stock-hover.lager-inn{color:#2e7d32} .wrap .bl-farge-pop2 .bl-pop-stock-hover.lager-best{color:#9a6400} .wrap .bl-farge-pop2 .bl-pop-stock-hover.lager-ut{color:#c1121f} /* ---- «Ikke på lager»: rødt kryss over ruta, fargen urørt ---- */ .wrap .bl-pop-sw-ut{cursor:not-allowed;position:relative} .wrap .bl-pop-sw-ut:hover{outline:none} .wrap .bl-pop-sw-ut::before, .wrap .bl-pop-sw-ut::after{ content:"";position:absolute;pointer-events:none; left:-2px;right:-2px;top:calc(50% - 1.5px); height:3px;border-radius:2px; background:#e2001a; /* TO kanter, ikke én. Rødt mot gull, grønt eller turkis gir bare ~2,4-2,9 i kontrast, og en hvit kant gjør det ikke bedre på en lys mellomtone. Med både en lys og en mørk kant står minst én av de tre valørene klart mot hvilken som helst båndfarge. Målt på alle tolv i bevis-lagerstatus.js L25 — terskelen er WCAG 3,0 for grafiske elementer. */ box-shadow:0 0 0 1px rgba(255,255,255,.92), 0 0 0 2px rgba(0,0,0,.55); } .wrap .bl-pop-sw-ut::before{transform:rotate(45deg)} .wrap .bl-pop-sw-ut::after{transform:rotate(-45deg)} /* ---- «2 ukers leveringstid»: utropstegn i ruta ---- */ .wrap .bl-pop-sw-best{position:relative} .wrap .bl-pop-sw-best::after{ content:"!";position:absolute;pointer-events:none; left:0;right:0;top:0;bottom:0; display:flex;align-items:center;justify-content:center; font:900 18px/1 "Sora",Arial,sans-serif; color:#ffffff; text-shadow:0 0 2px #000,0 0 3px #000,0 1px 2px rgba(0,0,0,.95); } /* Fargen kunden ALT har valgt, når den ikke lenger er på lager. Hun får ikke valget tatt fra seg (se kommentaren i band-list.js), men da må det stå på raden. */ .wrap .bl-farge-vis.bl-farge-ulager .bl-farge-kode{ color:#9a6400; text-decoration:underline dotted #d9a93f 1.5px; text-underline-offset:2px } /* ---- Samme to merker i designerens fargepanel ---- */ #resultArea.as-modal .designer-color-chip.is-ut{cursor:not-allowed;position:relative} #resultArea.as-modal .designer-color-chip.is-ut::before, #resultArea.as-modal .designer-color-chip.is-ut::after{ content:"";position:absolute;pointer-events:none; left:-2px;right:-2px;top:calc(50% - 1.5px); height:3px;border-radius:2px; background:#e2001a; /* TO kanter, ikke én. Rødt mot gull, grønt eller turkis gir bare ~2,4-2,9 i kontrast, og en hvit kant gjør det ikke bedre på en lys mellomtone. Med både en lys og en mørk kant står minst én av de tre valørene klart mot hvilken som helst båndfarge. Målt på alle tolv i bevis-lagerstatus.js L25 — terskelen er WCAG 3,0 for grafiske elementer. */ box-shadow:0 0 0 1px rgba(255,255,255,.92), 0 0 0 2px rgba(0,0,0,.55); } #resultArea.as-modal .designer-color-chip.is-ut::before{transform:rotate(45deg)} #resultArea.as-modal .designer-color-chip.is-ut::after{transform:rotate(-45deg)} #resultArea.as-modal .designer-color-chip.is-best{position:relative} #resultArea.as-modal .designer-color-chip.is-best::after{ content:"!";position:absolute;pointer-events:none; left:0;right:0;top:0;bottom:0; display:flex;align-items:center;justify-content:center; font:900 17px/1 "Sora",Arial,sans-serif; color:#ffffff; text-shadow:0 0 2px #000,0 0 3px #000,0 1px 2px rgba(0,0,0,.95); } #resultArea .designer-color-section .designer-band-stock{ display:block;min-height:14px;margin-top:4px; font:700 11px/1.3 "Sora",Arial,sans-serif;color:#5b7086 } /* Tomt = ingen lagervisning (alt annet enn Tyvek). Da skal den ikke reservere plass heller. */ #resultArea .designer-color-section .designer-band-stock:empty{display:none} #resultArea .designer-color-section .designer-band-stock.lager-inn{color:#2e7d32} #resultArea .designer-color-section .designer-band-stock.lager-best{color:#9a6400} #resultArea .designer-color-section .designer-band-stock.lager-ut{color:#c1121f} /* ============================================================ [FAMILIE:KORREKTUR] se docs/architecture/FAMILIE_korrektur.md Lenken, avkryssingen og visningen av korrekturen i kassen. ============================================================ */ .eventro-korrektur-blokk{ margin:14px 0 4px;padding:12px 14px;border:1px solid #cfe0ec;border-radius:10px; background:#f3f9fd;display:flex;flex-direction:column;gap:8px;align-items:flex-start } .eventro-korrektur-blokk .korrektur-lenke{ background:none;border:0;padding:0;cursor:pointer; font:700 14px "Sora",Arial,sans-serif;color:#1f6feb;text-decoration:underline;text-underline-offset:3px } .eventro-korrektur-blokk .korrektur-lenke:hover{color:#0f4fb5} /* [FAMILIE:KORREKTUR] Anders 15.10: «La det vaere et linjeskift ekstra mellom Designkorrektur ser du her og Alt ok...» Blokka er en flex-kolonne med gap:8px, saa luften maa legges paa raden selv. 14 px + de 8 fra gap'en = 22 px, altsaa én tom tekstlinje i 14 px. */ .eventro-korrektur-blokk .korrektur-godkjenn{ display:flex;align-items:center;gap:9px;cursor:pointer;margin-top:14px; font:600 14px "Sora",Arial,sans-serif;color:#1c2230 } .eventro-korrektur-blokk .korrektur-godkjenn input{ width:19px;height:19px;margin:0;accent-color:#2f8ef0;cursor:pointer;flex:0 0 auto } .eventro-korrektur-blokk .korrektur-krav{ margin:0;font:500 12px "Sora",Arial,sans-serif;color:#8a6100 } .eventro-korrektur-blokk .korrektur-krav[hidden]{display:none} /* --- selve visningen --- Arket er svaert bredt (ca 7:1). --korr-h er hoyden scenen faktisk har, og brukes av korrektur-modal.js til aa regne ut bredden som gjoer at BEGGE akser faar plass. Uten en kjent hoyde kan ikke «passer i hoyden» regnes ut i det hele tatt - derfor staar den her og ikke i JS-en. */ /* [FAMILIE:KORREKTUR] Flex-kolonne, ikke «100vh minus et tall». Anders 15.10: «Knappen blir helt trykket ned uten noe hvitt under, naar skjermvisningen er stor. Det blir mer hvitt under knappen naar skjermen er mindre.» Aarsaken var at scenehoyden var calc(100vh - 210px) mens dialogen er 92vh - to ulike regnestykker om samme hoyde, som bare stemte overens ved én skjermstoerrelse. Naa faar toppen og bunnen den hoyden de trenger, og scenen tar resten. Da er det like mye luft under knappen uansett. */ dialog.korrektur-dlg{ width:min(1600px,96vw);max-width:96vw;height:min(92vh,100vh);max-height:92vh; padding:0;border:0;border-radius:14px;overflow:hidden;background:#fff; box-shadow:0 24px 70px rgba(10,22,34,.45) } dialog.korrektur-dlg[open]{display:flex;flex-direction:column} dialog.korrektur-dlg::backdrop{background:rgba(10,32,50,.62)} .korrektur-dlg .korrektur-topp{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 16px;background:#0f2f4a;color:#fff; font:700 15px "Sora",Arial,sans-serif } .korrektur-dlg .korrektur-x{ background:none;border:0;color:#cfe3f2;font-size:24px;line-height:1;cursor:pointer;padding:0 4px } .korrektur-dlg .korrektur-x:hover{color:#fff} /* [FAMILIE:KORREKTUR] Synlig zoom i topplinja. Knappene har egen flatefarge og ramme, ikke bare tekst paa moerk bakgrunn: Anders kjoerer hoey lysstyrke, og svake konturer forsvinner helt for ham. */ .korrektur-dlg .korrektur-zoom{display:flex;align-items:center;gap:6px;flex:0 0 auto} .korrektur-dlg .kz-knapp{ width:30px;height:30px;border-radius:7px;padding:0; background:#1d4c72;border:1px solid #6494b8;color:#fff; font:700 19px/1 Arial,sans-serif;cursor:pointer } .korrektur-dlg .kz-knapp:hover:not(:disabled){background:#2a6392;border-color:#9ec4dd} .korrektur-dlg .kz-knapp:disabled{opacity:.35;cursor:default} .korrektur-dlg .kz-tall{ min-width:54px;text-align:center;color:#e3eff8; font:600 13px/1 "Sora",Arial,sans-serif;font-variant-numeric:tabular-nums } .korrektur-dlg .kz-tilpass{ height:30px;padding:0 11px;border-radius:7px;margin-left:2px; background:#1d4c72;border:1px solid #6494b8;color:#fff; font:600 12.5px/1 "Sora",Arial,sans-serif;cursor:pointer } .korrektur-dlg .kz-tilpass:hover{background:#2a6392;border-color:#9ec4dd} /* Ruller, ikke klemmer. Et ark med noekkelbaand er dobbelt saa bredt som ett med bare armbaand (1039 mm mot 489), og presses det inn i samme rute halveres alt det andre. korrektur-modal.js setter bredden etter en komfortbredde; her er det bare overflow som maa staa, slik at nettleseren gir ekte rullefelt. */ .korrektur-dlg .korrektur-topp{flex:0 0 auto} .korrektur-dlg .korrektur-bunn{flex:0 0 auto} .korrektur-dlg .korrektur-scene{ position:relative;flex:1 1 auto;min-height:0;background:#e9f1f7;overflow:auto; display:flex;align-items:center;justify-content:center; overscroll-behavior:contain;touch-action:none;cursor:grab; scrollbar-width:thin } .korrektur-dlg .korrektur-scene::-webkit-scrollbar{height:11px;width:11px} .korrektur-dlg .korrektur-scene::-webkit-scrollbar-thumb{background:#9fb6c7;border-radius:7px} .korrektur-dlg .korrektur-scene::-webkit-scrollbar-track{background:#dce8f0} .korrektur-dlg .korrektur-scene:active{cursor:grabbing} .korrektur-dlg .korrektur-ark{ flex:0 0 auto;background:#fff; box-shadow:0 6px 26px rgba(12,28,44,.22) } .korrektur-dlg .korrektur-laster{ font:600 14px "Sora",Arial,sans-serif;color:#50697f;padding:24px;text-align:center;max-width:460px } .korrektur-dlg .korrektur-bunn{ padding:12px 16px 16px;display:flex;flex-direction:column;gap:9px;align-items:center;background:#fff } /* Vilkaarsteksten fra arket, sentrert under det. I arket ligger den langt ute til hoyre og forsvinner naar man ruller - her staar den alltid. */ /* [FAMILIE:KORREKTUR] Bredden er maalt, ikke gjettet. Anders 15.10: «den siste linjen kun er ett ord Samtykk. Kan du la teksten gaa litt lenger ut horisontalt saa samtykke kan komme inn paa samme linje?» Maalt i Sora italic 500 11,5 px: hele vilkaarsteksten er 1924 px paa én linje, og den brytes paa TO linjer fra og med 985 px. 980 px var altsaa 5 px for smalt - derav den tredje linja med ett ord paa. 1180 px er valgt for aa ha luft over terskelen (ca 20 %), slik at en annen Sora-versjon eller en annen nettleser ikke kaster ordet ned igjen. Taket er dialogen selv: min(1600px,96vw) minus 32 px padding = 1504 px paa en stor skjerm, saa 1180 presser ingenting. */ .korrektur-dlg .korrektur-hint{ margin:0;max-width:1180px;font:italic 500 11.5px "Sora",Arial,sans-serif; color:#6b7f90;text-align:center;line-height:1.45 } .korrektur-dlg .korrektur-rull{ margin:0;font:600 12px "Sora",Arial,sans-serif;color:#2f6f9f;text-align:center } .korrektur-dlg .korrektur-rull[hidden]{display:none} .korrektur-dlg .korrektur-bekreft{ width:min(560px,100%);padding:15px 20px;border:0;border-radius:11px;cursor:pointer; background:#2f8ef0;color:#fff;font:800 17px "Sora",Arial,sans-serif;letter-spacing:.2px } .korrektur-dlg .korrektur-bekreft:hover{filter:brightness(1.06)} @media (max-width:760px){ dialog.korrektur-dlg{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0} .korrektur-dlg .korrektur-bekreft{font-size:16px;padding:14px 16px} /* Vilkaarsteksten er lang. Paa en telefon tok den halve skjermen fra arket, som er det kunden skal se paa. Den staar fortsatt der i sin helhet - bare mindre, og med egen rulling hvis den trenger det. */ .korrektur-dlg .korrektur-hint{font-size:10px;line-height:1.35;max-height:5.4em;overflow:auto} .korrektur-dlg .korrektur-rull{font-size:11px} .korrektur-dlg .korrektur-bunn{padding:9px 12px 12px;gap:6px} } /* [FAMILIE:KORREKTUR] «Videre» mens korrekturen ikke er godkjent. disabled alene endrer ikke utseendet paa en knapp med egen bakgrunn, saa den saa trykkbar ut og gjorde ingenting. Det er verre enn en knapp som ser sperret ut: kunden tror noe er i stykker. */ .wrap #confirmOrderBtn.korrektur-sperret, #cartDetailDlg #confirmOrderBtn.korrektur-sperret, button#confirmOrderBtn.korrektur-sperret{ background:#d7dee5!important;color:#8a97a3!important;border-color:#d7dee5!important; box-shadow:none!important;cursor:not-allowed!important;filter:none!important } .wrap #confirmOrderBtn.korrektur-sperret:hover, button#confirmOrderBtn.korrektur-sperret:hover{ background:#d7dee5!important;filter:none!important } /* [FAMILIE:KORREKTUR] Boksen som forklarer sperren. Den arver .alldlg, .dhead, .allbody, .allfoot og .btn-primary fra styles.css, akkurat som #tyvekbytteDlg - «en popup sier xxxx er fjernet fra ordrelisten ». Her staar derfor BARE maalene paa teksten og bredden paa boksen. En egen knappestil her ville blitt en tredje sannhet om hvordan en knapp ser ut i butikken; det er nettopp det [FAMILIE:POPUP] i styles.css ble skrevet for aa rydde opp i. */ #korrekturSperreDlg{max-width:430px} #korrekturSperreDlg .allbody p{ margin:4px 0;font-family:"Sora",Arial,sans-serif;font-size:14px;line-height:1.5;color:#172b3d } /* ============================================================ [FAMILIE:GRIPEROM] DRA-KRYSSET OG VEIEN TILBAKE 03.11.2026 ------------------------------------------------------------ Anders: «det er ikke noe som tilsier at man kan trykke inni select-firkanten og gripe objektet. Kan vi lage til noen svake linjer som gaar diagonalt fra hjoerne til hjoerne?» KRYSSET HAR INGEN MUS-VIRKNING, og det er med vilje. .hlayer staar paa pointer-events:none og bare de aatte haandtakene slaar den paa igjen. Jeg proevde foerst aa gjoere hele innsiden av rammen dragbar, saa krysset ville sagt helt sant. Det er en REGRESJON: haandtak-laget ligger paa z-index 1100 og verktoeylinja (.designer-start-shell) paa 1010, saa rammen ligger OVER knappene. Med et A4-ark valgt ville en klikkbar ramme dekket hele modalen og spist verktoeylinja - stikk i strid med det 347/348 ble bygget for. Krysset er derfor et rent hint, og det er aerlig der det betyr noe: rammen faar bredden og hoeyden sin fra objektet (object-rendering.js, synligTekstDomMaal), saa inne paa baandet er innsiden av rammen og objektet samme flate. Streken er 1 px og staar paa 0.6. Skyggen er der fordi turkis paa et lyst baand ellers blir borte paa en skjerm med hoey lysstyrke. Skru paa opacity foerst om det skal svakere. ============================================================ */ #resultArea.as-modal #bigBand.band.edit .hset .hgrip{display:none} #resultArea.as-modal #bigBand.band.edit .hset.solo .hgrip{ display:block;position:absolute;left:0;top:0;width:100%;height:100%; overflow:visible;pointer-events:none; filter:drop-shadow(0 0 1px rgba(0,0,0,.35)) } #resultArea.as-modal #bigBand.band.edit .hset.solo .hgrip path{ fill:none;stroke:#10d9e8;stroke-width:1;opacity:.6 } /* Bokstavene skal kunne leses mens de skrives. Merket settes i startInlineEdit og fjernes i onBlur, se _hsetKryss(). */ #resultArea.as-modal #bigBand.band.edit .hset.solo.redigerer .hgrip{display:none} /* Mobil har ingen haandtak i det hele tatt, og der drar man med finger rett paa motivet. To streker mer ville bare vaert stoey. */ #resultArea.as-modal.mobile-simple-designer #bigBand .hset .hgrip{display:none!important} /* Filnavnet i panelet velger fila paa baandet. Prikkelinja er der for aa vise at navnet kan trykkes paa - uten aa se ut som en lenke ut av butikken. */ #resultArea .logo-grid .lg-navn.lg-velgbar{cursor:pointer} #resultArea .logo-grid .lg-navn.lg-velgbar .lg-filnavn{ border-bottom:1px dotted #9aa7b4 } #resultArea .logo-grid .lg-navn.lg-velgbar:hover .lg-filnavn{ color:#1c6fd0;border-bottom-color:#1c6fd0 } /* END GRIPEROM 03.11.2026 */ /* ============================================================ [FAMILIE:SPOEKELSE] DESIGN SOM LIGGER HELT UTENFOR BAANDET 03.11.2026. Se object-rendering.js for regelen og hvorfor. ------------------------------------------------------------ TO EGENSKAPER, TO ULIKE JOBBER: overflow:hidden er GARANTIEN mot at spoekelset dekker verktoeylinja. Laget er like stort som .stage, og verktoey- raden ligger UTENFOR .stage. En flate som er klippet til .stage kan derfor hverken males eller fange et museklikk der knappene staar - uansett hva z-index sier. z-index:1200 er noe annet: den gjoer at spoekelset vinner over .design-zoom-wrap (1100) INNE i designflata. Uten den ville et klikk paa spoekelset kunne havne i wrapperen i stedet. Stiplet turkis kant og ikke bare lav gjennomsiktighet: Anders kjoerer skjermen med hoey lysstyrke, og en svak, blass flate ville han rett og slett ikke sett. ============================================================ */ /* RETTET 03.11.2026 etter Anders' proeve. Laget daekket foer bare .stage, og da naadde spoekelset saa vidt nedenfor baandet - et A4-ark langt nede ble klippet bort i sin helhet. Verre: .stage er BARE position:relative under intro-animasjonen, saa laget maalte seg mot en annen forelder enn jeg trodde. Her settes den fast, og maalene regnes ut i js fra rektanglene i stedet for med inset:0. Z-INDEX, RETTET 03.11.2026 ETTER ANDERS' PROEVE. Foerst sto laget paa 1000, rett UNDER verktoeyraden og panelet (1010), saa spoekelset forsvant bak dem mens markeringsrammen laa foran. Anders: «selve objektet havner BAK toolbaren, mens select-boksen havner foran. Kan du la alt havne foran?» Tallene i designeren: .designer-quick-dock 1010 panelet og verktoeyraden .spokelselag 1090 <- her .design-zoom-wrap 1100 baandet, rammen og haandtakene 1090 er valgt presist mellom de to: spoekelset ligger foran panelet, men rammen og haandtakene til det valgte objektet ligger fortsatt oeverst, der de hoerer hjemme. FOELGEN, og den er med vilje: en logo parkert oppaa panelet tar ogsaa museklikkene der. Den MAA vaere gripbar, og da kan den ikke slippe klikk gjennom seg. Parkerer man i de tomme feltene, merkes det ikke. overflow:hidden staar fortsatt, saa ingenting kan forlate modalen. */ #resultArea.as-modal .stage{position:relative} #resultArea.as-modal .stage > .spokelselag{ position:absolute;overflow:hidden;pointer-events:none;z-index:1090 } /* [FAMILIE:GRIPEROM] Krysset vekk paa design stoerre enn baandet. */ #resultArea.as-modal #bigBand.band.edit .hset.uten-kryss .hgrip{display:none} #resultArea.as-modal .spokelselag .spokelsefelt{position:absolute;overflow:visible} #resultArea.as-modal .spokelselag .spokelse{ position:absolute;pointer-events:auto;cursor:pointer; opacity:.4;outline:2px dashed #10d9e8;outline-offset:3px } #resultArea.as-modal .spokelselag .spokelse:hover{opacity:.65} #resultArea.as-modal .spokelselag .spokelse img{display:block} #resultArea.as-modal .spokelselag .spokelse .t{display:block;white-space:nowrap} /* END SPOEKELSE */