/* ============================================================================================ latin-auth/skin/latin-skin.css - LATIN TROPICAL Skin "Tropical Vintage" (Owner 15.10.2026: "analysiere die ... grafischen Vorlagen fuer das UI von Latin und baue daraus das User Interface ... Grafiken deutlich verkleinert ... keinen wesentlichen Imprint im Download/Build"). Vorlagen: Owner-Ordner _incoming/latin-bilder (Knoepfe Holz/Tuerkis/Creme/Koralle/Messing mit Goldrand, Papier-Schilder mit Blaettern und Hibiskus, Stil-Plaketten, Spurkacheln mit Instrumenten-Vignette, vier Kulissen je Stil). Ausgeliefert nur: knopf.webp, (bild.webp bis lsk3), eine Kulisse je Stil (Desktop 1200 px bzw. Handy 640 px) - der Rest ist CSS; Ornamente (Hibiskus, Blatt) als eigene Vektorgrafik inline. Schrift: Fredoka/Fraunces (liegen schon im Haus-Schriftsatz, keine zusaetzlichen Bytes). Bau der Bilder: pipelines/latin/baue-skin.py, Herkunft skin/HERKUNFT.json. Schalter: html.lsk (Inline-Skript im Kopf; ?lsk=0 = Seite wie vorher), Selektoren mit [data-skin=latin] geschaerft (gewinnen gegen die Familien-Regeln). Nur Optik: keine Funktion, keine IDs geaendert. ============================================================================================ */ html.lsk[data-skin=latin] { --lt-night: #10191b; --lt-night2: #17262a; --lt-paper: #f1e4c6; --lt-paper2: #e4cfa6; --lt-ink: #3b2414; --lt-ink2: #6b4a2f; --lt-teal: #1d6e69; --lt-teal2: #2c8f87; --lt-coral: #df5636; --lt-coral2: #f07a4e; --lt-gold: #b8893a; --lt-gold2: #e0b45e; --lt-wood: #5a3420; --lt-wood2: #2f1a10; --lt-blue: #1f5d8c; --lt-green: #2f8650; --lt-red: #b8352b; --lt-yellow: #e7b93e; --lt-hib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cg fill='%23e5553a' stroke='%23a8321d' stroke-width='.9'%3E%3Cellipse cy='-9' rx='6.5' ry='9.5'/%3E%3Cellipse cy='-9' rx='6.5' ry='9.5' transform='rotate(72)'/%3E%3Cellipse cy='-9' rx='6.5' ry='9.5' transform='rotate(144)'/%3E%3Cellipse cy='-9' rx='6.5' ry='9.5' transform='rotate(216)'/%3E%3Cellipse cy='-9' rx='6.5' ry='9.5' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='3.2' fill='%23f7d46a'/%3E%3Cpath d='M0 0L10-10' stroke='%23f7d46a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); --lt-blatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M3 37C6 17 20 5 37 3C35 21 23 34 3 37Z' fill='%232f7a4a' stroke='%23163f26' stroke-width='1.1'/%3E%3Cpath d='M3 37L34 6M12 28l-2-9M18 22l-1-9M24 16l0-7M12 28l9 0M18 22l9-1M24 16l8-2' stroke='%23163f26' stroke-width='.9' fill='none'/%3E%3C/svg%3E"); --lt-knopf: url(knopf.webp); --lt-bild: none; /* lsk4: Vignetten (bild.webp) entfallen */ } /* ---------- Kulisse je Stil (Hintergrund der Anzeige): nur das aktive Bild wird geladen (eine Regel greift), Handy die kleine Fassung ---------- */ html.lsk[data-skin=latin] body[data-stil="latin.salsa"] { --lt-buehne: url(buehne-salsa.webp); } html.lsk[data-skin=latin] body[data-stil="latin.bachata"] { --lt-buehne: url(buehne-bachata.webp); } html.lsk[data-skin=latin] body[data-stil="latin.cumbia"] { --lt-buehne: url(buehne-cumbia.webp); } html.lsk[data-skin=latin] body[data-stil="latin.merengue"] { --lt-buehne: url(buehne-merengue.webp); } @media (max-width: 700px) { html.lsk[data-skin=latin] body[data-stil="latin.salsa"] { --lt-buehne: url(buehne-salsa-m.webp); } html.lsk[data-skin=latin] body[data-stil="latin.bachata"] { --lt-buehne: url(buehne-bachata-m.webp); } html.lsk[data-skin=latin] body[data-stil="latin.cumbia"] { --lt-buehne: url(buehne-cumbia-m.webp); } html.lsk[data-skin=latin] body[data-stil="latin.merengue"] { --lt-buehne: url(buehne-merengue-m.webp); } } /* Owner 15.10.: Kulisse gehoert IN den Graphen (Anzeige), nicht um die Seite - Seite selbst ruhig dunkel */ html.lsk[data-skin=latin] body { background: radial-gradient(120% 60% at 50% 0, #1b3134 0, var(--lt-night) 70%) var(--lt-night) !important; } html.lsk[data-skin=latin] #mgn-main.unit { background: transparent !important; box-shadow: none !important; } /* ---------- Grundbausteine: Papier-Schild, Holzplatte, Goldrand ---------- */ html.lsk[data-skin=latin] .a2-head, html.lsk[data-skin=latin] details.a2-fold > summary, html.lsk[data-skin=latin] .fam-plate-stile, html.lsk[data-skin=latin] .panel.instpanel { font-family: 'Fredoka', 'Space Grotesk', sans-serif; } html.lsk[data-skin=latin] .fam-plate { background: linear-gradient(180deg, #4a2b1a, var(--lt-wood2)) !important; border: 2px solid var(--lt-gold) !important; border-radius: 16px !important; box-shadow: inset 0 0 0 1px rgba(255,220,150,.18), 0 6px 18px rgba(0,0,0,.45) !important; } html.lsk[data-skin=latin] .fam-plate .panel, html.lsk[data-skin=latin] .fam-plate .transport { background: transparent !important; border: none !important; box-shadow: none !important; } /* Kopf: Papier-Plakette "MELOGNITE / LATIN TROPICAL" mit Hibiskus */ html.lsk[data-skin=latin] .a2-head { background: linear-gradient(180deg, var(--lt-paper), var(--lt-paper2)) !important; border: 2px solid var(--lt-gold) !important; border-radius: 14px !important; box-shadow: 0 4px 14px rgba(0,0,0,.4) !important; position: relative; } html.lsk[data-skin=latin] .a2-head .a2-brand { color: var(--lt-ink2) !important; letter-spacing: .14em; } html.lsk[data-skin=latin] .a2-head .a2-gname { color: var(--lt-coral) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; font-size: 17px !important; letter-spacing: .06em; text-transform: uppercase; } html.lsk[data-skin=latin] .a2-head .a2-spring { background: var(--lt-hib) no-repeat left center / 30px 30px; opacity: .95; } html.lsk[data-skin=latin] .a2-head .a2-perf, html.lsk[data-skin=latin] .a2-head .a2-plan { background: var(--lt-paper) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 10px !important; color: var(--lt-ink) !important; } html.lsk[data-skin=latin] .a2-head .a2-perf small, html.lsk[data-skin=latin] .a2-head .a2-plan small { color: var(--lt-ink2) !important; } html.lsk[data-skin=latin] .a2-head .a2-perf b, html.lsk[data-skin=latin] .a2-head .a2-plan b { color: var(--lt-coral) !important; } /* Anzeige (LCD) bleibt dunkel - Holzrahmen, Goldkante, BPM in Creme */ html.lsk[data-skin=latin] .lcd { background: linear-gradient(180deg, rgba(6,16,18,.80) 0, rgba(6,16,18,.34) 20%, rgba(6,16,18,.30) 55%, rgba(6,16,18,.86) 100%), var(--lt-buehne) center 58% / cover no-repeat, #081315 !important; border: 2px solid var(--lt-gold) !important; border-radius: 12px !important; box-shadow: inset 0 0 18px rgba(0,0,0,.6) !important; } html.lsk[data-skin=latin] .lcd .scopewrap, html.lsk[data-skin=latin] .lcd .lcdtop, html.lsk[data-skin=latin] .lcd .lcdview, html.lsk[data-skin=latin] .lcd .lcdfoot, html.lsk[data-skin=latin] .lcd #timeline { background: transparent !important; } html.lsk[data-skin=latin] .bpmread, html.lsk[data-skin=latin] .bpmread * { color: var(--lt-paper) !important; } /* FORGE NEW SONG: tuerkises Holzschild mit Hibiskus und Blatt */ html.lsk[data-skin=latin] #forge.forge { position: relative; background: linear-gradient(180deg, var(--lt-teal2), #134e4a) !important; border: 2px solid var(--lt-gold2) !important; border-radius: 12px !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; font: 600 20px/1 'Fraunces', Georgia, serif !important; letter-spacing: .08em !important; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.35) !important; box-shadow: 0 5px 0 #0b3532, 0 8px 18px rgba(0,0,0,.45) !important; } html.lsk[data-skin=latin] #forge.forge::before, html.lsk[data-skin=latin] #forge.forge::after { content: ''; position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; pointer-events: none; background: no-repeat center / contain; } html.lsk[data-skin=latin] #forge.forge::before { left: 14px; background-image: var(--lt-hib); } html.lsk[data-skin=latin] #forge.forge::after { right: 14px; background-image: var(--lt-blatt); transform: scaleX(-1); } html.lsk[data-skin=latin] #forge.forge:active { transform: translateY(3px); box-shadow: 0 2px 0 #0b3532 !important; } html.lsk[data-skin=latin] #mgnQuota, html.lsk[data-skin=latin] #mgnQuota * { color: var(--lt-paper2) !important; } /* Transport: PLAY gruen, STOP rot, EXPORT gelb, Reset dunkles Holz - Goldkante */ html.lsk[data-skin=latin] .tbar .tbtn, html.lsk[data-skin=latin] .tbtnstack .tbtn-stk { border: 2px solid var(--lt-gold) !important; border-radius: 10px !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; letter-spacing: .05em !important; } html.lsk[data-skin=latin] body #play { background: linear-gradient(180deg, #3c9e5f, #23663b) !important; color: #f4ffe9 !important; -webkit-text-fill-color: #f4ffe9 !important; } html.lsk[data-skin=latin] body #stop { background: linear-gradient(180deg, #d14b3a, #8e2a21) !important; color: #fff1ea !important; -webkit-text-fill-color: #fff1ea !important; } html.lsk[data-skin=latin] body #dl { background: linear-gradient(180deg, #f2cc58, #c8962a) !important; color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; } html.lsk[data-skin=latin] body .tbar .tbtnstack .tbtn-stk { background: linear-gradient(180deg, #4a2b1a, var(--lt-wood2)) !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; } html.lsk[data-skin=latin] #mgnShare { background: var(--lt-paper) !important; color: var(--lt-ink) !important; border: 1.5px solid var(--lt-gold) !important; } /* ---------- Abschnitts-Schilder (Aufklapper): Papier mit Blatt + Hibiskus, offen = Koralle ---------- */ html.lsk[data-skin=latin] details.a2-fold { background: transparent !important; border: none !important; margin-top: 12px !important; } html.lsk[data-skin=latin] details.a2-fold > summary { position: relative; background: linear-gradient(180deg, var(--lt-paper), var(--lt-paper2)) !important; border: 2px solid var(--lt-gold) !important; border-radius: 12px !important; color: var(--lt-teal) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .1em !important; text-transform: uppercase; padding-left: 52px !important; padding-right: 52px !important; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.35) !important; } html.lsk[data-skin=latin] details.a2-fold > summary::before { content: '' !important; position: absolute; left: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px; background: var(--lt-blatt) no-repeat center / contain !important; border: none !important; transform: none !important; } html.lsk[data-skin=latin] details.a2-fold > summary::after { content: '' !important; position: absolute; right: 12px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--lt-hib) no-repeat center / contain !important; border: none !important; transform: none !important; } html.lsk[data-skin=latin] details.a2-fold[open] > summary { background: linear-gradient(180deg, var(--lt-coral2), var(--lt-coral)) !important; color: var(--lt-paper) !important; border-color: var(--lt-gold2) !important; border-radius: 12px 12px 4px 4px !important; } html.lsk[data-skin=latin] details.a2-fold[open] > summary::after { filter: brightness(1.4) saturate(.4); } /* Inhalt: Papier, dunkle Tinte */ html.lsk[data-skin=latin] details.a2-fold[open] > :not(summary), html.lsk[data-skin=latin] #paramRoot, html.lsk[data-skin=latin] #mgnProfile, html.lsk[data-skin=latin] .panel.instpanel, html.lsk[data-skin=latin] .fam-plate-stile { background: linear-gradient(180deg, rgba(241,228,198,.97), rgba(228,207,166,.97)) !important; border: 2px solid var(--lt-gold) !important; border-top-width: 0 !important; border-radius: 0 0 12px 12px !important; color: var(--lt-ink) !important; box-shadow: 0 6px 16px rgba(0,0,0,.35) !important; } html.lsk[data-skin=latin] .panel.instpanel, html.lsk[data-skin=latin] .fam-plate-stile { border-top-width: 2px !important; border-radius: 14px !important; margin-top: 12px !important; } html.lsk[data-skin=latin] details.a2-fold[open] .flabel, html.lsk[data-skin=latin] .panel.instpanel .flabel, html.lsk[data-skin=latin] details.a2-fold[open] .flabel b { color: var(--lt-teal) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; letter-spacing: .08em; } html.lsk[data-skin=latin] details.a2-fold[open] .hint, html.lsk[data-skin=latin] .panel.instpanel .hint, html.lsk[data-skin=latin] details.a2-fold[open] .fseq, html.lsk[data-skin=latin] details.a2-fold[open] .mgn-hint, html.lsk[data-skin=latin] details.a2-fold[open] .mgn-ablauf, html.lsk[data-skin=latin] details.a2-fold[open] .mgn-empty, html.lsk[data-skin=latin] details.a2-fold[open] p, html.lsk[data-skin=latin] details.a2-fold[open] small, html.lsk[data-skin=latin] details.a2-fold[open] .sval { color: var(--lt-ink2) !important; } html.lsk[data-skin=latin] details.a2-fold[open] b { color: var(--lt-coral) !important; } html.lsk[data-skin=latin] details.a2-fold[open] .latin-genom, html.lsk[data-skin=latin] details.a2-fold[open] .latin-genom * { color: var(--lt-ink) !important; } /* ---------- Stil-Plaketten: Creme mit Ornament, aktiv in der Stilfarbe ---------- */ html.lsk[data-skin=latin] #stilSeg { gap: 10px !important; } html.lsk[data-skin=latin] #stilSeg .tab { position: relative; background: linear-gradient(180deg, var(--lt-paper), var(--lt-paper2)) !important; border: 2px solid var(--lt-gold) !important; border-radius: 12px !important; box-shadow: 0 3px 0 rgba(90,52,32,.55) !important; min-height: 54px; overflow: hidden; } html.lsk[data-skin=latin] #stilSeg .tab .tabname { font: 600 17px/1 'Fraunces', Georgia, serif !important; letter-spacing: .08em !important; text-transform: uppercase; color: #a8321d !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } html.lsk[data-skin=latin] #stilSeg .tab[data-stil="latin.bachata"] .tabname { color: var(--lt-teal) !important; } html.lsk[data-skin=latin] #stilSeg .tab[data-stil="latin.merengue"] .tabname { color: var(--lt-blue) !important; } html.lsk[data-skin=latin] #stilSeg .tab::before, html.lsk[data-skin=latin] #stilSeg .tab::after { content: ''; position: absolute; width: 18px; height: 18px; background: no-repeat center / contain; opacity: .9; pointer-events: none; } html.lsk[data-skin=latin] #stilSeg .tab::before { left: 4px; top: 4px; background-image: var(--lt-hib); } html.lsk[data-skin=latin] #stilSeg .tab::after { right: 4px; bottom: 4px; background-image: var(--lt-blatt); transform: scaleX(-1); } html.lsk[data-skin=latin] #stilSeg .tab.on { background: linear-gradient(180deg, var(--lt-coral2), var(--lt-coral)) !important; border-color: var(--lt-gold2) !important; } html.lsk[data-skin=latin] #stilSeg .tab.on[data-stil="latin.bachata"] { background: linear-gradient(180deg, var(--lt-teal2), var(--lt-teal)) !important; } html.lsk[data-skin=latin] #stilSeg .tab.on[data-stil="latin.merengue"] { background: linear-gradient(180deg, #2f78ad, var(--lt-blue)) !important; } html.lsk[data-skin=latin] #stilSeg .tab.on .tabname { color: var(--lt-paper) !important; text-shadow: 0 2px 0 rgba(0,0,0,.25) !important; } html.lsk[data-skin=latin] #stilSeg .tab .tablock { color: var(--lt-ink2) !important; font-family: 'Fredoka', sans-serif !important; } html.lsk[data-skin=latin] #stilSeg .tab.on .tablock { color: var(--lt-paper) !important; } @media (max-width: 520px) { html.lsk[data-skin=latin] #stilSeg .tab::before, html.lsk[data-skin=latin] #stilSeg .tab::after { width: 12px; height: 12px; } html.lsk[data-skin=latin] #stilSeg .tab::before { left: 3px; top: 3px; } html.lsk[data-skin=latin] #stilSeg .tab::after { right: 3px; bottom: 3px; } html.lsk[data-skin=latin] #stilSeg .tab .tabname { font-size: 13px !important; letter-spacing: .03em !important; } } /* ---------- Schalter (Instrumente, Fusion, Formen, Abschnitte, Performance): Creme / aktiv Koralle bzw. Tuerkis / aus Grau ---------- */ html.lsk[data-skin=latin] #soundGrid .sbtn, html.lsk[data-skin=latin] #fusionSeg button, html.lsk[data-skin=latin] #fusionMixSeg button, html.lsk[data-skin=latin] #formGrid .fbtn, html.lsk[data-skin=latin] #secPool .pbtn, html.lsk[data-skin=latin] #secList > *, html.lsk[data-skin=latin] .mgn-prof-seg button, html.lsk[data-skin=latin] details.a2-fold[open] .seg button, html.lsk[data-skin=latin] #genDefault, html.lsk[data-skin=latin] .mgn-reel button { background: linear-gradient(180deg, #f8edd3, var(--lt-paper2)) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 9px !important; color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; box-shadow: 0 2px 0 rgba(90,52,32,.45) !important; text-shadow: none !important; } html.lsk[data-skin=latin] #soundGrid .sbtn.on, html.lsk[data-skin=latin] #fusionSeg button.on, html.lsk[data-skin=latin] #formGrid .fbtn.on, html.lsk[data-skin=latin] .mgn-prof-seg button[aria-pressed="true"], html.lsk[data-skin=latin] .mgn-prof-seg button.on, html.lsk[data-skin=latin] details.a2-fold[open] .seg button.on { background: linear-gradient(180deg, var(--lt-coral2), var(--lt-coral)) !important; border-color: var(--lt-gold2) !important; color: #fff6ea !important; -webkit-text-fill-color: #fff6ea !important; } html.lsk[data-skin=latin] #fusionMixSeg button.on { background: linear-gradient(180deg, var(--lt-teal2), var(--lt-teal)) !important; color: #f4fff9 !important; -webkit-text-fill-color: #f4fff9 !important; } html.lsk[data-skin=latin] #soundGrid .sbtn:disabled, html.lsk[data-skin=latin] #fusionSeg button:disabled, html.lsk[data-skin=latin] #fusionMixSeg button:disabled, html.lsk[data-skin=latin] #formGrid .fbtn:disabled { background: linear-gradient(180deg, #c9c3b6, #a9a296) !important; color: #6d665c !important; -webkit-text-fill-color: #6d665c !important; border-color: #8d8578 !important; box-shadow: none !important; opacity: 1 !important; } html.lsk[data-skin=latin] #formGrid .fbtn .fn { color: inherit !important; } html.lsk[data-skin=latin] #formGrid .fbtn.on .fseq { color: #ffe8d6 !important; } html.lsk[data-skin=latin] #fusionSeg .fus-trenner { color: var(--lt-teal) !important; font-family: 'Fredoka', sans-serif; } html.lsk[data-skin=latin] #fusionState, html.lsk[data-skin=latin] #fusionNote { color: var(--lt-ink2) !important; } /* ---------- Spurkacheln: bemalte Tafel, Papier-Etikett, Knopfkopf aus der Vorlage, Instrumenten-Vignette ---------- */ html.lsk[data-skin=latin] body #trackKnobs .trk { position: relative; background: linear-gradient(135deg, rgba(29,110,105,.94), rgba(20,74,70,.94) 45%, rgba(170,70,40,.92)) !important; border: 2px solid var(--lt-gold) !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(255,230,170,.15), 0 4px 10px rgba(0,0,0,.35) !important; overflow: hidden; } html.lsk[data-skin=latin] body #trackKnobs .trk::after { content: ''; position: absolute; right: 8px; bottom: 8px; width: 60px; height: 50px; border-radius: 8px; pointer-events: none; background: var(--lt-bild) no-repeat 0 0 / 540px 50px; border: 1.5px solid rgba(224,180,94,.85); box-shadow: 0 2px 6px rgba(0,0,0,.4); opacity: .95; } html.lsk[data-skin=latin] body #trackKnobs .trk-vocal::after { background-position: 0 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-duet::after { background-position: -60px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-chords::after { background-position: -120px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-bass::after { background-position: -180px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-drums::after { background-position: -240px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-synth::after { background-position: -300px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-fx::after { background-position: -360px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-master::after { background-position: -420px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-riff::after { background-position: -480px 0; } html.lsk[data-skin=latin] body #trackKnobs .trkbtns { position: relative; z-index: 1; margin-right: 70px; } html.lsk[data-skin=latin] body #trackKnobs .trklabel { background: linear-gradient(180deg, var(--lt-paper), var(--lt-paper2)) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 8px !important; color: var(--lt-ink) !important; font: 600 13px 'Fredoka', sans-serif !important; letter-spacing: .1em !important; text-align: center !important; } html.lsk[data-skin=latin] body #trackKnobs .trkstate { background: rgba(16,25,27,.75) !important; border-color: rgba(224,180,94,.7) !important; color: var(--lt-paper) !important; font-family: 'Fredoka', sans-serif !important; } html.lsk[data-skin=latin] body #trackKnobs .trkstate.ismuted { background: var(--lt-red) !important; border-color: #ffb3a1 !important; color: #fff !important; } html.lsk[data-skin=latin] body #trackKnobs .tsel { background-color: #0f2a33 !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; border: 1.5px solid var(--lt-gold) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 500 !important; background-image: linear-gradient(45deg, transparent 50%, var(--lt-gold2) 50%), linear-gradient(135deg, var(--lt-gold2) 50%, transparent 50%) !important; } html.lsk[data-skin=latin] body #trackKnobs .tsel option { background: #0f2a33; color: var(--lt-paper); } html.lsk[data-skin=latin] body #trackKnobs .trkreload { background: linear-gradient(180deg, var(--lt-teal2), var(--lt-teal)) !important; border: 1.5px solid var(--lt-gold2) !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; font: 600 12px 'Fredoka', sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase; } /* Knopf: Kopf aus der Vorlage im Bogen, dreht mit dem Pegel (--kt) */ html.lsk[data-skin=latin] body #trackKnobs .vknob { background: radial-gradient(circle, rgba(0,0,0,.55) 0 60%, transparent 62%) !important; } html.lsk[data-skin=latin] body #trackKnobs .vknob .vcap { display: block !important; position: absolute; inset: 7px; border-radius: 50%; border: none !important; opacity: 1 !important; font-size: 0 !important; background: var(--lt-knopf) no-repeat 0 0 / 396px 44px !important; transform: rotate(var(--kt, 0deg)); transition: transform .06s linear; box-shadow: 0 2px 5px rgba(0,0,0,.5); } html.lsk[data-skin=latin] body #trackKnobs .trk-vocal .vcap { background-position: 0 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-duet .vcap { background-position: -44px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-chords .vcap { background-position: -88px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-bass .vcap { background-position: -132px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-drums .vcap { background-position: -176px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-synth .vcap { background-position: -220px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-fx .vcap { background-position: -264px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-master .vcap { background-position: -308px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .trk-riff .vcap { background-position: -352px 0 !important; } html.lsk[data-skin=latin] body #trackKnobs .vknob .varc .vfill { stroke: var(--lt-coral2) !important; } html.lsk[data-skin=latin] body #trackKnobs .vknob .varc circle:first-child { stroke: rgba(0,0,0,.45) !important; } /* stumm / ohne Spur: Grau wie die Vorlage */ html.lsk[data-skin=latin] body #trackKnobs .trk.off, html.lsk[data-skin=latin] body #trackKnobs .trk.empty, html.lsk[data-skin=latin] body #trackKnobs .trk.gsk-aus { filter: grayscale(.95) brightness(.78); } @media (max-width: 420px) { html.lsk[data-skin=latin] body #trackKnobs .trk::after { width: 48px; height: 40px; background-size: 432px 40px; } html.lsk[data-skin=latin] body #trackKnobs .trk-duet::after { background-position: -48px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-chords::after { background-position: -96px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-bass::after { background-position: -144px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-drums::after { background-position: -192px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-synth::after { background-position: -240px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-fx::after { background-position: -288px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-master::after { background-position: -336px 0; } html.lsk[data-skin=latin] body #trackKnobs .trk-riff::after { background-position: -384px 0; } html.lsk[data-skin=latin] body #trackKnobs .trkbtns { margin-right: 56px; } } /* ---------- Regler (Generation), Seed, Takes ---------- */ html.lsk[data-skin=latin] #paramRoot .track { background: linear-gradient(180deg, var(--lt-wood2), #4a2b1a) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 99px !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.6) !important; } html.lsk[data-skin=latin] #paramRoot .fill { background: linear-gradient(90deg, #c84a2c, var(--lt-coral2)) !important; border-radius: 99px !important; box-shadow: 0 0 8px rgba(240,122,78,.6) !important; } html.lsk[data-skin=latin] .seedrow .seedbox { background: #0f2a33 !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 9px !important; font-family: 'Fredoka', sans-serif !important; } html.lsk[data-skin=latin] .seedrow .iconbtn { background: linear-gradient(180deg, var(--lt-coral2), var(--lt-coral)) !important; border: 1.5px solid var(--lt-gold2) !important; border-radius: 9px !important; color: #fff6ea !important; } html.lsk[data-skin=latin] .mgn-reel { background: transparent !important; color: var(--lt-ink) !important; } html.lsk[data-skin=latin] .mgn-reel-head, html.lsk[data-skin=latin] .mgn-reel-head * { color: var(--lt-teal) !important; } html.lsk[data-skin=latin] .appfoot, html.lsk[data-skin=latin] .appfoot a { color: var(--lt-paper2) !important; } /* ---------- Optik "flat" (Profil): keine Kulisse, keine Ornamente ---------- */ html.lsk[data-skin=latin].mgn-vis-flat .lcd { background: #081315 !important; } html.lsk[data-skin=latin].mgn-vis-flat #forge.forge::before, html.lsk[data-skin=latin].mgn-vis-flat #forge.forge::after, html.lsk[data-skin=latin].mgn-vis-flat #stilSeg .tab::before, html.lsk[data-skin=latin].mgn-vis-flat #stilSeg .tab::after { display: none; } /* ---------- Feinschliff nach Sichtpruefung 15.10. ---------- */ html.lsk[data-skin=latin] details.a2-fold[open] > :not(summary) { margin-top: 0 !important; } html.lsk[data-skin=latin] details.a2-fold > summary * { text-transform: inherit !important; color: inherit !important; } /* Feldkoepfe ohne graue Leiste, Raster ohne grauen Grund */ html.lsk[data-skin=latin] #soundField .flabel, html.lsk[data-skin=latin] details.a2-fold[open] .flabel { background: transparent !important; border: none !important; box-shadow: none !important; } html.lsk[data-skin=latin] #soundGrid { background: transparent !important; border: none !important; box-shadow: none !important; } /* Take-Karten: dunkle Tafel wie die Anzeige (helle Schrift bleibt lesbar) */ html.lsk[data-skin=latin] .mgn-reel .mgn-take { background: linear-gradient(180deg, #17363a, #0f2528) !important; border: 2px solid var(--lt-gold) !important; border-radius: 10px !important; } html.lsk[data-skin=latin] .mgn-reel .mgn-take.cur { border-color: var(--lt-coral2) !important; } /* Song-Abschnitte dieses Songs: Holzplaettchen */ html.lsk[data-skin=latin] #formList > * { background: linear-gradient(180deg, #6a3e25, var(--lt-wood)) !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; border: 1px solid var(--lt-gold) !important; } /* Master: Vignette nicht ueber den Auswahllisten */ html.lsk[data-skin=latin] body #trackKnobs .trk-master .tselrow { margin-right: 70px; } @media (max-width: 420px) { html.lsk[data-skin=latin] body #trackKnobs .trk-master .tselrow { margin-right: 56px; } } /* Performance: Ueberschriften in Tinte */ html.lsk[data-skin=latin] #mgnProfile .mgn-prof-lab > span:first-child { color: var(--lt-teal) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; } html.lsk[data-skin=latin] #mgnProfile .mgn-prof-lab, html.lsk[data-skin=latin] #mgnProfile .mgn-prof-foot, html.lsk[data-skin=latin] #mgnProfile .mgn-keepq, html.lsk[data-skin=latin] #mgnProfile .mgn-keepq button { color: var(--lt-ink2) !important; } html.lsk[data-skin=latin] #paramRoot .flabel { color: var(--lt-teal) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold > summary { text-transform: uppercase !important; letter-spacing: .1em !important; font-family: 'Fredoka', sans-serif !important; } html.lsk[data-skin=latin] details.a2-fold[open] .flabel .hint, html.lsk[data-skin=latin] .panel.instpanel .flabel .hint { background: transparent !important; border: none !important; box-shadow: none !important; padding-left: 0 !important; } html.lsk[data-skin=latin] body #fusionField #fusionState { color: var(--lt-coral) !important; -webkit-text-fill-color: var(--lt-coral) !important; } @media (max-width: 520px) { html.lsk[data-skin=latin] .a2-head .a2-spring { background: none; } } /* ============================================================================================ lsk3 (Owner 15.10.: "Eine erhebliche Zahl vorhandener Grafiken wurde nicht genutzt (Start, Stop, ... Instrumente-Buttons, Menue-Bezeichnungen, Generation Parameters, etc.) ... bitte nimm den Vorrat an vorhandenen Grafiken im Detail auf und nutze diese fuer das Latin-UI tatsaechlich auch!") Bausteine skin/ui/*.webp aus den Vorlagen (pipelines/latin/baue-skin.py bau_ui, Inventar in der Akte UI_SKIN_UND_KLANGDIAET_2026-10-15.md). Feste Beschriftung = Bild der Vorlage, Text bleibt im DOM (transparent, Screenreader/Tooltip unveraendert). Dynamischer Text = Rahmen der Vorlage (border-image 9-Slice) + Live-Text. Zustaende: aktiv = Vorlagen-Zustand bzw. Goldschein, gesperrt = Graufilter (Vorlagen-Grau hat kaputte Schrift). ============================================================================================ */ /* --- Bild statt Text: gemeinsame Grundregel --- */ html.lsk[data-skin=latin] body #play, html.lsk[data-skin=latin] body #stop, html.lsk[data-skin=latin] body #dl, html.lsk[data-skin=latin] body #uiReset, html.lsk[data-skin=latin] body #mgnShare, html.lsk[data-skin=latin] body #forge.forge, html.lsk[data-skin=latin] body #stilSeg .tab, html.lsk[data-skin=latin] body .lcdview .vb, html.lsk[data-skin=latin] body .lcdfoot .gctl-b, html.lsk[data-skin=latin] body #trackKnobs .trkreload, html.lsk[data-skin=latin] body .seedrow .iconbtn, html.lsk[data-skin=latin] body .a2-head .a2-plan[data-a2-rolle=help] { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; border-image: none !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; transition: filter .12s, transform .08s; } html.lsk[data-skin=latin] body #play *, html.lsk[data-skin=latin] body #stop *, html.lsk[data-skin=latin] body #uiReset *, html.lsk[data-skin=latin] body #mgnShare *, html.lsk[data-skin=latin] body #stilSeg .tab .tabname, html.lsk[data-skin=latin] body .a2-head .a2-plan[data-a2-rolle=help] * { color: transparent !important; -webkit-text-fill-color: transparent !important; } html.lsk[data-skin=latin] body #mgnShare svg { opacity: 0 !important; } html.lsk[data-skin=latin] body #play:hover, html.lsk[data-skin=latin] body #stop:hover, html.lsk[data-skin=latin] body #dl:not(:disabled):hover, html.lsk[data-skin=latin] body #uiReset:hover, html.lsk[data-skin=latin] body #mgnShare:hover, html.lsk[data-skin=latin] body #forge.forge:not(:disabled):hover, html.lsk[data-skin=latin] body #trackKnobs .trkreload:hover { filter: brightness(1.1) saturate(1.05); } html.lsk[data-skin=latin] body #play:active, html.lsk[data-skin=latin] body #stop:active, html.lsk[data-skin=latin] body #dl:active, html.lsk[data-skin=latin] body #uiReset:active, html.lsk[data-skin=latin] body #forge.forge:active, html.lsk[data-skin=latin] body #mgnShare:active { transform: translateY(2px) !important; box-shadow: none !important; } html.lsk[data-skin=latin] body #play:disabled, html.lsk[data-skin=latin] body #stop:disabled, html.lsk[data-skin=latin] body #dl:disabled, html.lsk[data-skin=latin] body #forge.forge:disabled { filter: grayscale(.8) brightness(.8); opacity: .8 !important; } /* --- Kopf: Plakette MELOGNITE / LATIN TROPICAL (ohne gemaltes Wappen - das echte Zeichen steht daneben), Plan/Performance im Plakettenrahmen, Help als Bild --- */ html.lsk[data-skin=latin] body .a2-head { background: linear-gradient(180deg, #4a2b1a, var(--lt-wood2)) !important; } html.lsk[data-skin=latin] body .a2-head .a2-titles { background: url(ui/kopf.webp) left center / contain no-repeat !important; width: 214px; min-height: 40px; flex: 0 0 auto; } html.lsk[data-skin=latin] body .a2-head .a2-titles > * { color: transparent !important; -webkit-text-fill-color: transparent !important; } html.lsk[data-skin=latin] body .a2-head .a2-spring { background: none !important; } html.lsk[data-skin=latin] body .a2-head .a2-perf, html.lsk[data-skin=latin] body .a2-head .a2-plan:not([data-a2-rolle=help]) { background: none !important; border-style: solid !important; border-width: 6px !important; border-image: url(ui/f-sec-n.webp) 8 fill / 6px stretch !important; border-radius: 0 !important; box-shadow: none !important; } html.lsk[data-skin=latin] body .a2-head .a2-plan[data-a2-rolle=help] { background-image: url(ui/help.webp) !important; width: 46px; min-height: 44px; } @media (max-width: 520px) { html.lsk[data-skin=latin] body .a2-head .a2-titles { width: 180px; } } /* --- Anzeige: Contour/Roll-Chips und Tonart-Pfeile der Vorlage --- */ html.lsk[data-skin=latin] body .lcdview .vb { min-height: 24px; height: 24px; padding: 0 !important; opacity: 1 !important; } html.lsk[data-skin=latin] body .lcdview .vb[data-view=contour] { background-image: url(ui/vb-contour-n.webp) !important; width: 56px; } html.lsk[data-skin=latin] body .lcdview .vb[data-view=contour].on { background-image: url(ui/vb-contour-a.webp) !important; } html.lsk[data-skin=latin] body .lcdview .vb[data-view=roll] { background-image: url(ui/vb-roll-n.webp) !important; width: 56px; } html.lsk[data-skin=latin] body .lcdview .vb[data-view=roll].on { background-image: url(ui/vb-roll-a.webp) !important; } html.lsk[data-skin=latin] body .lcdfoot .gctl-b { width: 22px; height: 22px; padding: 0 !important; } html.lsk[data-skin=latin] body .lcdfoot .gctl-b[aria-label="Key down"] { background-image: url(ui/pfeil-l.webp) !important; } html.lsk[data-skin=latin] body .lcdfoot .gctl-b[aria-label="Key up"] { background-image: url(ui/pfeil-r.webp) !important; } /* --- FORGE NEW SONG (Schild der Vorlage), Transport PLAY/STOP/EXPORT/RESET UI/SHARE --- */ html.lsk[data-skin=latin] body #forge.forge { background-image: url(ui/forge.webp) !important; } html.lsk[data-skin=latin] body #forge.forge::before, html.lsk[data-skin=latin] body #forge.forge::after { display: none !important; } html.lsk[data-skin=latin] body #play { background-image: url(ui/t-play.webp) !important; } html.lsk[data-skin=latin] body #stop { background-image: url(ui/t-stop.webp) !important; } html.lsk[data-skin=latin] body #dl { background-image: url(ui/t-export.webp) !important; position: relative; } html.lsk[data-skin=latin] body #dl .ic, html.lsk[data-skin=latin] body #dl .exlabel { color: transparent !important; -webkit-text-fill-color: transparent !important; } html.lsk[data-skin=latin] body #dl .cnt { position: absolute; right: 2px; top: 4px; padding: 0 5px; border-radius: 8px; background: var(--lt-wood2); color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; font: 600 10px/16px 'Fredoka', sans-serif !important; opacity: 1 !important; } html.lsk[data-skin=latin] body #dl .extag { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; background: rgba(47,26,16,.85) !important; } html.lsk[data-skin=latin] body #uiReset { background-image: url(ui/t-resetui.webp) !important; } html.lsk[data-skin=latin] body #repairAudio { background: none !important; border-style: solid !important; border-width: 5px !important; border-image: url(ui/f-dunkel.webp) 12 fill / 5px stretch !important; border-radius: 0 !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; box-shadow: none !important; } html.lsk[data-skin=latin] body #mgnShare { background-image: url(ui/t-share.webp) !important; width: 96px; height: 40px; padding: 0 !important; } /* --- Stil-Reiter: SALSA / BACHATA / CUMBIA / MERENGUE der Vorlage (normal / aktiv), gesperrt = Graufilter, Entwurf = Hinweisplakette --- */ html.lsk[data-skin=latin] body #stilSeg .tab { aspect-ratio: 245 / 67; min-height: 0 !important; height: auto; padding: 0 !important; overflow: visible !important; } html.lsk[data-skin=latin] body #stilSeg .tab::before, html.lsk[data-skin=latin] body #stilSeg .tab::after { display: none !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.salsa"] { background-image: url(ui/stil-salsa-n.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.salsa"].on { background-image: url(ui/stil-salsa-a.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.bachata"] { background-image: url(ui/stil-bachata-n.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.bachata"].on { background-image: url(ui/stil-bachata-a.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.cumbia"] { background-image: url(ui/stil-cumbia-n.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.cumbia"].on { background-image: url(ui/stil-cumbia-a.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.merengue"] { background-image: url(ui/stil-merengue-n.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab[data-stil="latin.merengue"].on { background-image: url(ui/stil-merengue-a.webp) !important; } html.lsk[data-skin=latin] body #stilSeg .tab:not(.on):hover { filter: brightness(1.06); } html.lsk[data-skin=latin] body #stilSeg .tab.on { filter: drop-shadow(0 0 5px rgba(255,210,122,.55)); } html.lsk[data-skin=latin] body #stilSeg .tab.latin-gesperrt { filter: grayscale(1) brightness(.82); opacity: .8; } html.lsk[data-skin=latin] body #stilSeg .tab .tablock { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 7px; border-radius: 7px; background: var(--lt-wood2) !important; border: 1px solid var(--lt-gold); color: var(--lt-paper2) !important; -webkit-text-fill-color: var(--lt-paper2) !important; font: 600 9px/14px 'Fredoka', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; z-index: 1; } /* --- Abschnitts-Schilder der Vorlage (zu = Creme, offen = Koralle); das Schild sitzt auf der Papierflaeche --- */ html.lsk[data-skin=latin] #mgn-main details.a2-fold:is(#a2FusionFold, #formAdv, #genAdv, #a2PerfFold) > summary, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(> .mgn-reel) > summary, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(#trackKnobs) > summary, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(.seedrow) > summary { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: auto 40px !important; border: none !important; box-shadow: none !important; min-height: 44px; color: transparent !important; -webkit-text-fill-color: transparent !important; position: relative; z-index: 2; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:is(#a2FusionFold, #formAdv, #genAdv, #a2PerfFold) > summary::before, html.lsk[data-skin=latin] #mgn-main details.a2-fold:is(#a2FusionFold, #formAdv, #genAdv, #a2PerfFold) > summary::after { display: none !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(> .mgn-reel) > summary::before, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(> .mgn-reel) > summary::after { display: none !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(#trackKnobs) > summary::before, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(#trackKnobs) > summary::after { display: none !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(.seedrow) > summary::before, html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(.seedrow) > summary::after { display: none !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(> .mgn-reel) > summary { background-image: url(ui/h-takes-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(> .mgn-reel)[open] > summary { background-image: url(ui/h-takes-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(#trackKnobs) > summary { background-image: url(ui/h-volumes-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(#trackKnobs)[open] > summary { background-image: url(ui/h-volumes-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#a2FusionFold > summary { background-image: url(ui/h-fusion-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#a2FusionFold[open] > summary { background-image: url(ui/h-fusion-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#formAdv > summary { background-image: url(ui/h-forms-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#formAdv[open] > summary { background-image: url(ui/h-forms-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#genAdv > summary { background-image: url(ui/h-gen-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#genAdv[open] > summary { background-image: url(ui/h-gen-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(.seedrow) > summary { background-image: url(ui/h-seed-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold:has(.seedrow)[open] > summary { background-image: url(ui/h-seed-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#a2PerfFold > summary { background-image: url(ui/h-perf-n.webp) !important; } html.lsk[data-skin=latin] #mgn-main details#a2PerfFold[open] > summary { background-image: url(ui/h-perf-a.webp) !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold > summary:hover { filter: brightness(1.06); } html.lsk[data-skin=latin] #mgn-main details#formAdv > summary .formcount { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--lt-paper2) !important; -webkit-text-fill-color: var(--lt-paper2) !important; font: 600 11px 'Fredoka', sans-serif !important; letter-spacing: .04em !important; text-transform: none !important; } /* Papierflaeche unter dem Schild: rundum gerahmt, das Schild ragt in die Oberkante */ html.lsk[data-skin=latin] #mgn-main details.a2-fold[open] > summary { margin-bottom: -16px !important; } html.lsk[data-skin=latin] #mgn-main details.a2-fold[open] > :not(summary) { border-top-width: 2px !important; border-radius: 12px !important; padding-top: 22px !important; } /* --- Lead-Instrument: Schild der Vorlage als Feldkopf, Instrument-Schalter mit den Owner-Kurznamen (Bogen 4) --- */ html.lsk[data-skin=latin] body #soundField > .flabel { font-size: 0 !important; min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; background: url(ui/h-lead-n.webp) left center / auto 34px no-repeat !important; padding-left: 200px !important; } html.lsk[data-skin=latin] body #soundField > .flabel .hint { font-size: 11px !important; } @media (max-width: 520px) { html.lsk[data-skin=latin] body #soundField > .flabel { background-size: auto 28px !important; padding-left: 168px !important; } } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead]:not([data-lead=auto]), html.lsk[data-skin=latin] body #fusionSeg button:is([data-fusion=auto], [data-fusion=none], [data-fusion=reggae], [data-fusion=metal], [data-fusion=urbano], [data-fusion=house], [data-fusion=organ], [data-fusion=vibes], [data-fusion=funkgtr], [data-fusion=sax], [data-fusion=ep]) { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; border-image: none !important; box-shadow: none !important; text-shadow: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: saturate(.62) brightness(.9); transition: filter .12s, transform .1s; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead]:not([data-lead=auto]):hover, html.lsk[data-skin=latin] body #fusionSeg button[data-fusion]:not(:disabled):hover { filter: saturate(.9) brightness(1); } html.lsk[data-skin=latin] body #soundGrid .sbtn.on[data-lead]:not([data-lead=auto]), html.lsk[data-skin=latin] body #fusionSeg button.on:is([data-fusion=reggae], [data-fusion=metal], [data-fusion=urbano], [data-fusion=house], [data-fusion=organ], [data-fusion=vibes], [data-fusion=funkgtr], [data-fusion=sax], [data-fusion=ep]) { filter: drop-shadow(0 0 3px #ffd27a) drop-shadow(0 0 6px rgba(255,190,90,.7)) !important; transform: translateY(-1px) scale(1.04); } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead]:disabled, html.lsk[data-skin=latin] body #fusionSeg button[data-fusion]:disabled { filter: grayscale(1) brightness(.85) !important; opacity: .5 !important; transform: none; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=trumpet] { background-image: url(ui/c-trumpet.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=trombone] { background-image: url(ui/c-trombone.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=tenor-sax] { background-image: url(ui/c-tenor-sax.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=flute] { background-image: url(ui/c-flute.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=violin] { background-image: url(ui/c-violin.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=vibes] { background-image: url(ui/c-vibes.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=requinto] { background-image: url(ui/c-requinto.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=nylon-guitar] { background-image: url(ui/c-nylon-guitar.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=clean-guitar] { background-image: url(ui/c-clean-guitar.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=accordion] { background-image: url(ui/c-accordion.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=organ-drawbar] { background-image: url(ui/c-organ.webp) !important; } html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=tremolo-guitar] { background-image: url(ui/c-tremolo-guitar.webp) !important; } /* Fusion: Partner und Instrumentfarben der Vorlage; Auto/None aus Bogen 2 (normal/aktiv); Techno, Hip-Hop, DnB aus Bogen 5 (lpb1, Block am Dateiende) */ html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=auto] { background-image: url(ui/c-auto-n.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=auto].on { background-image: url(ui/c-auto-a.webp) !important; filter: none !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=none] { background-image: url(ui/c-none-n.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=none].on { background-image: url(ui/c-none-a.webp?v=lkn1) !important; filter: none !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=reggae] { background-image: url(ui/c-reggae.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=metal] { background-image: url(ui/c-metal.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=urbano] { background-image: url(ui/c-urbano.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=house] { background-image: url(ui/c-house.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=organ] { background-image: url(ui/c-organ.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=vibes] { background-image: url(ui/c-vibes.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=funkgtr] { background-image: url(ui/c-funkgtr.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=sax] { background-image: url(ui/c-sax.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=ep] { background-image: url(ui/c-ep.webp) !important; } /* Blend-Wort der Vorlage */ html.lsk[data-skin=latin] body .fusrow > .fusdial { font-size: 0 !important; display: inline-block; width: 74px; height: 26px; background: url(ui/blend.webp) left center / contain no-repeat !important; } /* --- Rahmen der Vorlage + Live-Text (dynamische Beschriftung): Creme mit Blattecken (HINT), aktiv Koralle (VERSE), Blend aktiv Blau (DIALOGUE), gesperrt Stein (MERGED) --- */ html.lsk[data-skin=latin] body #soundGrid .sbtn[data-lead=auto], html.lsk[data-skin=latin] body #formGrid .fbtn, html.lsk[data-skin=latin] body #genDefault { background: none !important; border-style: solid !important; border-width: 7px 8px !important; border-image: url(ui/f-hint.webp) 9 10 fill / 7px 8px stretch !important; border-radius: 0 !important; box-shadow: none !important; color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; filter: none; } html.lsk[data-skin=latin] body #soundGrid .sbtn.on[data-lead=auto], html.lsk[data-skin=latin] body #formGrid .fbtn.on { border-image: url(ui/f-sec-a.webp) 8 fill / 7px 8px stretch !important; color: #fff6ea !important; -webkit-text-fill-color: #fff6ea !important; } html.lsk[data-skin=latin] body #formGrid .fbtn:disabled { border-image: url(ui/f-merged.webp) 9 10 fill / 7px 8px stretch !important; color: #6d665c !important; -webkit-text-fill-color: #6d665c !important; opacity: 1 !important; } html.lsk[data-skin=latin] body #formGrid .fbtn .fseq { color: inherit !important; opacity: .8; } /* Abschnitts-Chips (INTRO/VERSE der Vorlage): Vorrat creme, Folge dieses Songs koralle */ html.lsk[data-skin=latin] body #secPool .pbtn, html.lsk[data-skin=latin] body #secList > *, html.lsk[data-skin=latin] body #formList > * { background: none !important; border-style: solid !important; border-width: 5px 6px !important; border-image: url(ui/f-sec-n.webp) 8 fill / 5px 6px stretch !important; border-radius: 0 !important; box-shadow: none !important; color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; } html.lsk[data-skin=latin] body #formList > *, html.lsk[data-skin=latin] body #secList > * { border-image: url(ui/f-sec-a.webp) 8 fill / 5px 6px stretch !important; color: #fff6ea !important; -webkit-text-fill-color: #fff6ea !important; } /* --- Spurkacheln: VARY- und MUTE-Schalter der Vorlage, Auswahllisten im dunklen Vorlagenrahmen mit Goldpfeil, Skalenring um den Knopf --- */ html.lsk[data-skin=latin] body #trackKnobs .trkreload { background-image: url(ui/vary-n.webp) !important; min-width: 70px; min-height: 34px; } html.lsk[data-skin=latin] body #trackKnobs .trkreload:hover, html.lsk[data-skin=latin] body #trackKnobs .trkreload:active { background-image: url(ui/vary-a.webp) !important; } html.lsk[data-skin=latin] body #trackKnobs .trkreload:disabled { filter: grayscale(1) brightness(.8); opacity: .7; } html.lsk[data-skin=latin] body #trackKnobs .trkstate.mutable { background: none !important; border-style: solid !important; border-width: 4px 5px !important; border-image: url(ui/f-mute-n.webp) 11 fill / 4px 5px stretch !important; border-radius: 0 !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; box-shadow: none !important; } html.lsk[data-skin=latin] body #trackKnobs .trkstate.mutable.ismuted { border-image: url(ui/f-mute-r.webp) 11 fill / 4px 5px stretch !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.lsk[data-skin=latin] body #trackKnobs .tsel, html.lsk[data-skin=latin] body #trackKnobs .tsel:hover, html.lsk[data-skin=latin] body #trackKnobs .tsel:focus { background: none !important; background-image: none !important; border-style: solid !important; border-width: 5px 24px 5px 6px !important; border-image: url(ui/f-dd.webp) 9 48 9 10 fill / 5px 24px 5px 6px stretch !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none; box-shadow: none !important; } html.lsk[data-skin=latin] body #trackKnobs .vknob { background: url(ui/ring.webp) center / 100% 100% no-repeat !important; } html.lsk[data-skin=latin] body #trackKnobs .vknob .varc circle:first-child { stroke: transparent !important; } /* --- Generation Parameters: die vier Regler der Vorlage (Rille 9-Slice, Glimm-Fuellung, Knopf Sonne/Bluete/Palme/Hibiskus) --- */ html.lsk[data-skin=latin] body #paramRoot .slider .track { height: 24px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; overflow: visible !important; } html.lsk[data-skin=latin] body #paramRoot #densTrack { border-width: 7px 20px 6px 20px !important; border-image: url(ui/f-s1.webp) 12 32 10 32 fill / 7px 20px 6px 20px stretch !important; } html.lsk[data-skin=latin] body #paramRoot #tensTrack { border-width: 7px 25px 7px 19px !important; border-image: url(ui/f-s2.webp) 11 40 11 31 fill / 7px 25px 7px 19px stretch !important; } html.lsk[data-skin=latin] body #paramRoot #leapTrack { border-width: 8px 26px 8px 30px !important; border-image: url(ui/f-s3.webp) 14 46 14 54 fill / 8px 26px 8px 30px stretch !important; } html.lsk[data-skin=latin] body #paramRoot #dramTrack { border-width: 8px 23px 7px 18px !important; border-image: url(ui/f-s4.webp) 14 41 12 32 fill / 8px 23px 7px 18px stretch !important; } html.lsk[data-skin=latin] body #paramRoot .slider .fill { border-radius: 5px !important; box-shadow: none !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } html.lsk[data-skin=latin] body #paramRoot #densFill { background-image: url(ui/g-s1.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #tensFill { background-image: url(ui/g-s2.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #leapFill { background-image: url(ui/g-s3.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #dramFill { background-image: url(ui/g-s4.webp) !important; } html.lsk[data-skin=latin] body #paramRoot .slider .fill::after { width: 26px !important; height: 26px !important; right: -13px !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0,0,0,.55) !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; } html.lsk[data-skin=latin] body #paramRoot #densFill::after { background-image: url(ui/k-s1.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #tensFill::after { background-image: url(ui/k-s2.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #leapFill::after { background-image: url(ui/k-s3.webp) !important; } html.lsk[data-skin=latin] body #paramRoot #dramFill::after { background-image: url(ui/k-s4.webp) !important; } html.lsk[data-skin=latin] body #genDefault { min-height: 32px; } /* --- Seed: Schloss und Wuerfel der Vorlage --- */ html.lsk[data-skin=latin] body .seedrow #seedLock { background-image: url(ui/lock-aus.webp) !important; } html.lsk[data-skin=latin] body .seedrow #seedLock[aria-pressed=true] { background-image: url(ui/lock-an.webp) !important; filter: drop-shadow(0 0 4px rgba(255,210,122,.7)); } html.lsk[data-skin=latin] body .seedrow #seedRnd { background-image: url(ui/wuerfel.webp) !important; } html.lsk[data-skin=latin] body .seedrow .iconbtn { width: 40px; height: 38px; } html.lsk[data-skin=latin] body .seedrow .iconbtn:hover { filter: brightness(1.12); } /* --- Performance: SOUND-Schild der Vorlage, Schalter im Vorlagenrahmen (gewaehlt = Koralle FULL, sonst Creme CALM) --- */ html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-lab:has(#mgnKeepQ) > span:first-child { display: block; width: 104px; height: 40px; background: url(ui/sound.webp) left center / contain no-repeat !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-size: 0 !important; } html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-btn { background: none !important; border-style: solid !important; border-width: 7px !important; border-image: url(ui/f-prof-n.webp) 10 fill / 7px stretch !important; border-radius: 0 !important; box-shadow: none !important; color: var(--lt-ink) !important; } html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-btn:has(input:checked) { border-image: url(ui/f-prof-a.webp) 10 fill / 7px stretch !important; color: #fff6ea !important; } html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-btn:has(input:checked) b, html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-btn:has(input:checked) small { color: #fff6ea !important; -webkit-text-fill-color: #fff6ea !important; } html.lsk[data-skin=latin] body #mgnProfile .mgn-prof-btn:not(:has(input:checked)) b { color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; } /* lsk3 Nachtrag: aktive Reiter gegen die aelteren .tab.on-Regeln (Hintergrundgroesse, Schriftschatten) absichern */ html.lsk[data-skin=latin] body #stilSeg .tab.on[data-stil] { background-color: transparent !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; box-shadow: none !important; } html.lsk[data-skin=latin] body #stilSeg .tab.on[data-stil] .tabname, html.lsk[data-skin=latin] body #stilSeg .tab[data-stil] .tabname { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } /* ============================================================================================ lsk4 (Owner 15.10. abends, Handy-Screenshots): "Instrumenteauswahl ist weder einheitlich (welche Farbe, wenn ausgewaehlt) noch immer korrekt - hier wird bei Auswahl Trumpet nur eine gruene Kachel gezeigt. Reset-UI und Reset Sound sind unterschiedlich gross, Die Menues sind zentriert - kann man machen, aber dann sollte eine grafische Gestaltung links und rechts grafisch aufpeppen, mit Bluemchen, Zweigen, Mustern ... In der ersten Zeile werden Name des Genres und die drei anderen Schaltflaechen (Performance, Plan, Help) nicht in einer Zeile angezeigt. Insgesamt wirkt der braune Hintergrund zu 'KI' und monoton und eintoenig" + "VARY ueberdeckt den LS-Regler, das bedeutet, die kleinen Bildchen muessen weichen." Ursachen: (1) Trumpet/Flute leer = aeltere Regel '#soundGrid .sbtn.on:nth-child(3n+2)' (tuerkiser Verlauf) schlug die Bildregel (hoehere Spezifitaet); (2) Auswahl = nur Goldschein um Kacheln dreier Grundfarben; (3) Spurkacheln zweispaltig ab 421 px: Knopf + VARY + Vignette passen nicht nebeneinander, Etikett und MUTE teilen sich eine Zeile; (4) Kopfzeile unter 600 px absichtlich zweizeilig (Familienregel); (5) Reset UI = Bild, Reset Sound = Rahmen. Ornamente: eigene Vektorgrafik (Papel-picado-Girlande, Talavera-Fliese, Holzmaserung per Rauschfilter, Bluetenzweig), Serape-Streifen als CSS - 0 Bildbytes. Selektoren mit #mgn-main geschaerft (gewinnen gegen lsk1-3 und die Familienregeln). Nur Optik. ============================================================================================ */ html.lsk[data-skin=latin] { --lt-sel: #ffcf5c; --lt-serape: linear-gradient(180deg, #2f1a10 0 1px, #df5636 1px 3px, #f2c14e 3px 4px, #2c8f87 4px 6px, #f1e4c6 6px 7px, #e46f9a 7px 9px, #1f5d8c 9px 10px, #2f1a10 10px 11px); --lt-picado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M0 4Q60 9.4 120 4' fill='none' stroke='%23c9a46a' stroke-width='1'/%3E%3Cg opacity='.93'%3E%3Cpath fill='%23e5553a' fill-rule='evenodd' d='M4.0 5.7 H26.0 V26.7 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 Z M15.0 14.1 a2.6 2.6 0 1 0 0.01 0 Z M20.4 15.0 a1.7 1.7 0 1 0 0.01 0 Z M9.6 15.0 a1.7 1.7 0 1 0 0.01 0 Z M15.0 20.4 a1.7 1.7 0 1 0 0.01 0 Z M15.0 9.6 a1.7 1.7 0 1 0 0.01 0 Z M7.0 7.9 l1.4 2.4 h-2.8 Z M23.0 7.9 l1.4 2.4 h-2.8 Z'/%3E%3Cpath fill='%23f2c14e' fill-rule='evenodd' d='M34.0 6.9 H56.0 V27.9 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 Z M45.0 13.4 l4 4.5 l-4 4.5 l-4 -4.5 Z M37.8 16.6 a1.3 1.3 0 1 0 0.01 0 Z M52.2 16.6 a1.3 1.3 0 1 0 0.01 0 Z M37.0 9.1 l1.4 2.4 h-2.8 Z M53.0 9.1 l1.4 2.4 h-2.8 Z'/%3E%3Cpath fill='%232c9a8f' fill-rule='evenodd' d='M64.0 6.9 H86.0 V27.9 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 Z M75.0 12.9 l1.6 3.4 l3.4 1.6 l-3.4 1.6 l-1.6 3.4 l-1.6 -3.4 l-3.4 -1.6 l3.4 -1.6 Z M67.0 9.1 l1.4 2.4 h-2.8 Z M83.0 9.1 l1.4 2.4 h-2.8 Z'/%3E%3Cpath fill='%23e46f9a' fill-rule='evenodd' d='M94.0 5.7 H116.0 V26.7 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 l-1.375 2.6 l-1.375 -2.6 Z M99.5 14.1 l2 2.6 l-2 2.6 l-2 -2.6 Z M105.0 14.1 l2 2.6 l-2 2.6 l-2 -2.6 Z M110.5 14.1 l2 2.6 l-2 2.6 l-2 -2.6 Z M97.0 7.9 l1.4 2.4 h-2.8 Z M113.0 7.9 l1.4 2.4 h-2.8 Z'/%3E%3C/g%3E%3C/svg%3E"); --lt-talavera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-width='1.1' opacity='.2'%3E%3Cpath stroke='%232c8f87' d='M32 14c6 0 9 5 9 9 4 0 9 3 9 9s-5 9-9 9c0 4-3 9-9 9s-9-5-9-9c-4 0-9-3-9-9s5-9 9-9c0-4 3-9 9-9z'/%3E%3Ccircle stroke='%23b8893a' cx='32' cy='32' r='4.5'/%3E%3Cpath stroke='%23b8893a' d='M32 21v-4M32 43v4M21 32h-4M43 32h4'/%3E%3Cpath stroke='%232c8f87' d='M0 10a10 10 0 0 0 10-10M54 0a10 10 0 0 0 10 10M64 54a10 10 0 0 0-10 10M10 64A10 10 0 0 0 0 54'/%3E%3C/g%3E%3C/svg%3E"); --lt-holz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .11' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .08 0 0 0 0 .03 0 0 0 -2.2 1.35'/%3E%3C/filter%3E%3Crect width='360' height='180' filter='url(%23h)'/%3E%3C/svg%3E"); --lt-zweig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 96 48'%3E%3Cpath d='M2 30C24 26 46 14 92 12' fill='none' stroke='%235a3420' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath transform='translate(10 28) rotate(-115)' d='M0 0C5.3999999999999995 -5 12.6 -5 18 0C12.6 5 5.3999999999999995 5 0 0Z' fill='%232f7a4a' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(10 28) rotate(-115)' d='M0 0H16.2' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(18 27) rotate(65)' d='M0 0C5.3999999999999995 -5 12.6 -5 18 0C12.6 5 5.3999999999999995 5 0 0Z' fill='%232f7a4a' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(18 27) rotate(65)' d='M0 0H16.2' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(36 21) rotate(-125)' d='M0 0C6.0 -5 14.0 -5 20 0C14.0 5 6.0 5 0 0Z' fill='%232f7a4a' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(36 21) rotate(-125)' d='M0 0H18.0' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(44 19) rotate(50)' d='M0 0C5.7 -5 13.299999999999999 -5 19 0C13.299999999999999 5 5.7 5 0 0Z' fill='%232f7a4a' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(44 19) rotate(50)' d='M0 0H17.1' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(62 15) rotate(-120)' d='M0 0C5.3999999999999995 -5 12.6 -5 18 0C12.6 5 5.3999999999999995 5 0 0Z' fill='%233a8c56' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(62 15) rotate(-120)' d='M0 0H16.2' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(72 14) rotate(45)' d='M0 0C5.1 -5 11.899999999999999 -5 17 0C11.899999999999999 5 5.1 5 0 0Z' fill='%233a8c56' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(72 14) rotate(45)' d='M0 0H15.3' stroke='%23163f26' stroke-width='.5'/%3E%3Cpath transform='translate(84 12) rotate(-100)' d='M0 0C3.9 -5 9.1 -5 13 0C9.1 5 3.9 5 0 0Z' fill='%233a8c56' stroke='%23163f26' stroke-width='.6'/%3E%3Cpath transform='translate(84 12) rotate(-100)' d='M0 0H11.700000000000001' stroke='%23163f26' stroke-width='.5'/%3E%3Cg transform='translate(28 23)' fill='%23e5553a' stroke='%239a2e1a' stroke-width='.5'%3E%3Cellipse cy='-6.0' rx='4.5' ry='6.5' transform='rotate(0)'/%3E%3Cellipse cy='-6.0' rx='4.5' ry='6.5' transform='rotate(72)'/%3E%3Cellipse cy='-6.0' rx='4.5' ry='6.5' transform='rotate(144)'/%3E%3Cellipse cy='-6.0' rx='4.5' ry='6.5' transform='rotate(216)'/%3E%3Cellipse cy='-6.0' rx='4.5' ry='6.5' transform='rotate(288)'/%3E%3Ccircle r='2.0' fill='%23f7d46a' stroke='none'/%3E%3Cpath d='M0 0l6.2 -6.2' stroke='%23f7d46a' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(54 16)' fill='%23f07a4e' stroke='%239a2e1a' stroke-width='.5'%3E%3Cellipse cy='-4.8' rx='3.6' ry='5.2' transform='rotate(0)'/%3E%3Cellipse cy='-4.8' rx='3.6' ry='5.2' transform='rotate(72)'/%3E%3Cellipse cy='-4.8' rx='3.6' ry='5.2' transform='rotate(144)'/%3E%3Cellipse cy='-4.8' rx='3.6' ry='5.2' transform='rotate(216)'/%3E%3Cellipse cy='-4.8' rx='3.6' ry='5.2' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23f7d46a' stroke='none'/%3E%3Cpath d='M0 0l5.0 -5.0' stroke='%23f7d46a' stroke-width='.9'/%3E%3C/g%3E%3Ccircle cx='88' cy='11' r='2.6' fill='%23e46f9a' stroke='%239a2e1a' stroke-width='.5'/%3E%3C/svg%3E"); } /* --- Seite: Talavera-Fliese ganz leise ueber dem Nachtgrund --- */ html.lsk[data-skin=latin] body { background: var(--lt-talavera) 0 0 / 64px 64px, radial-gradient(120% 60% at 50% 0, #1b3134 0, var(--lt-night) 70%) 0 0 / 100% 100vh no-repeat, var(--lt-night) !important; } /* Verlauf nur einmal oben (vorher wiederholte er sich je Fensterhoehe = harte Kante beim Scrollen) */ html.lsk[data-skin=latin].mgn-vis-flat body { background: var(--lt-night) !important; } /* --- Holz statt glattem Braun: Maserung (Rauschfilter) + Serape-Borte oben und unten (Kopfzeile, Anzeige-/Transportplatte) --- */ html.lsk[data-skin=latin] body #mgn-main > .a2-head, html.lsk[data-skin=latin] body #mgn-main > .fam-plate-top { background: var(--lt-serape) top / 100% 11px no-repeat, var(--lt-serape) bottom / 100% 11px no-repeat, var(--lt-holz) 0 0 / 360px 180px, linear-gradient(180deg, #5c3521, #3a2014) !important; } html.lsk[data-skin=latin] body #mgn-main > .fam-plate-top { padding-top: 14px !important; padding-bottom: 14px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head { padding-top: 13px !important; padding-bottom: 13px !important; } /* --- Kopfzeile: Genre-Plakette + Performance + Plan + Help in EINER Zeile (auch am Handy) --- */ @media (max-width: 600px) { html.lsk[data-skin=latin] body #mgn-main > .a2-head { flex-flow: row nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 5px !important; padding-left: 7px !important; padding-right: 7px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > * { order: 0 !important; margin: 0 !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-genre { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-genre img { width: 20px !important; height: 20px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-titles { background: url(ui/kopf-m.webp) left center / contain no-repeat !important; flex: 0 1 132px !important; width: 132px !important; min-width: 92px !important; height: 41px !important; min-height: 0 !important; padding: 0 !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-spring { flex: 1 1 0 !important; min-width: 0 !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > :is(.a2-perf, .a2-plan:not([data-a2-rolle=help])) { flex: 0 0 auto !important; min-height: 40px !important; padding: 1px 3px !important; gap: 2px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > :is(.a2-perf, .a2-plan) small { font-size: 8px !important; letter-spacing: .05em !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > :is(.a2-perf, .a2-plan) b { font-size: 11.5px !important; } html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-plan[data-a2-rolle=help] { flex: 0 0 34px !important; width: 34px !important; min-height: 36px !important; height: 36px !important; } } @media (max-width: 370px) { html.lsk[data-skin=latin] body #mgn-main > .a2-head > .a2-genre { display: none !important; } } /* --- Ein Auswahl-Zeichen fuer ALLE Wahlschalter: Goldring + Haken; nicht gewaehlte Kacheln gedaempft (die Vorlage hat drei Grundfarben) --- */ html.lsk[data-skin=latin] body #mgn-main #soundGrid.sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px 8px !important; padding: 10px 6px !important; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px 8px !important; padding: 10px 6px 14px !important; align-items: center; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg .fus-trenner { grid-column: 1 / -1; margin: 2px 0 -2px !important; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button) { position: relative; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 190 / 71; margin: 0 !important; padding: 0 3px !important; border-radius: 9px !important; background-size: 100% 100% !important; transform: none !important; font-size: 11px !important; line-height: 1.1 !important; white-space: normal !important; overflow: visible !important; filter: saturate(.55) brightness(.84) !important; opacity: .94 !important; transition: filter .12s, box-shadow .12s, opacity .12s; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg button[data-fusion=house] { aspect-ratio: 209 / 96; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg button[data-fusion=sax] { aspect-ratio: 209 / 97; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg button[data-fusion=funkgtr] { aspect-ratio: 217 / 95; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg button:is([data-fusion=auto], [data-fusion=none]) { aspect-ratio: 94 / 43; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button):not(:disabled):hover { filter: saturate(.85) brightness(.95) !important; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button).on, html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button).on:hover { filter: none !important; opacity: 1 !important; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid, #fusionSeg, #stilSeg, #formGrid, #fusionMixSeg) { overflow: visible !important; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button, #stilSeg .tab, #formGrid .fbtn, #fusionMixSeg button:not(:disabled)).on, html.lsk[data-skin=latin] body #mgn-main #mgnProfile .mgn-prof-btn:has(input:checked) { position: relative; box-shadow: 0 0 0 2px #2f1a10, 0 0 0 4.5px var(--lt-sel), 0 0 14px 3px rgba(255,190,80,.55) !important; border-radius: 9px !important; z-index: 1; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button, #stilSeg .tab, #formGrid .fbtn, #fusionMixSeg button:not(:disabled)).on::after, html.lsk[data-skin=latin] body #mgn-main #mgnProfile .mgn-prof-btn:has(input:checked)::after { content: '\2713' !important; position: absolute !important; top: -9px !important; right: -9px !important; left: auto !important; bottom: auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; transform: none !important; opacity: 1 !important; border-radius: 50% !important; background: var(--lt-sel) !important; border: 1.5px solid #2f1a10 !important; color: #2f1a10 !important; -webkit-text-fill-color: #2f1a10 !important; font: 700 11px/15px 'Fredoka', sans-serif !important; text-align: center; letter-spacing: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: none; z-index: 2; filter: none; display: block !important; text-shadow: none !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab.on { filter: none !important; border-radius: 10px !important; } html.lsk[data-skin=latin] body #mgn-main :is(#soundGrid .sbtn, #fusionSeg button):disabled { filter: grayscale(1) brightness(.92) !important; opacity: .42 !important; box-shadow: none !important; } /* Instrumentfarben, die dieser Stil nicht als Fusion fuehrt: kleines Schild ("as Lead" bzw. "in Bachata"; Text aus flaeche.js, data-nur) */ html.lsk[data-skin=latin] body #mgn-main #fusionSeg button[data-nur]::before { content: attr(data-nur); position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; padding: 0 5px; border-radius: 6px; background: var(--lt-wood2); border: 1px solid var(--lt-gold); color: var(--lt-paper2) !important; -webkit-text-fill-color: var(--lt-paper2) !important; font: 600 8.5px/13px 'Fredoka', sans-serif !important; letter-spacing: .03em; z-index: 2; } html.lsk[data-skin=latin] body #mgn-main #fusionSeg button[data-nur]:disabled { opacity: .62 !important; } /* --- Lead Instrument: Schild der Vorlage oben, Hinweis daneben bzw. darunter (keine Ueberdeckung) --- */ html.lsk[data-skin=latin] body #mgn-main #soundField > .flabel { background: none !important; padding-left: 0 !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 12px; } html.lsk[data-skin=latin] body #mgn-main #soundField > .flabel::before { content: ''; flex: 0 0 auto; width: 198px; height: 35px; background: url(ui/h-lead-n.webp) left center / contain no-repeat; } html.lsk[data-skin=latin] body #mgn-main #soundField > .flabel .hint { flex: 1 0 170px; font-size: 11.5px !important; } @media (max-width: 520px) { html.lsk[data-skin=latin] body #mgn-main #soundField > .flabel::before { width: 168px; height: 30px; } } /* --- Transport: PLAY / STOP / EXPORT in einer Reihe, darunter RESET UI und RESET SOUND gleich gross im selben Holzrahmen --- */ html.lsk[data-skin=latin] body #mgn-main .tbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; row-gap: 8px !important; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack { grid-row: 2 !important; grid-column: 1 / -1 !important; flex-direction: row !important; justify-content: center !important; gap: 10px !important; min-height: 0 !important; height: 38px !important; width: 100% !important; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > .tbtn-stk { flex: 0 1 46% !important; max-width: 170px !important; width: auto !important; height: 38px !important; min-height: 0 !important; background: none !important; background-image: none !important; border-style: solid !important; border-width: 6px !important; border-image: url(ui/f-dunkel.webp) 12 fill / 6px stretch !important; border-radius: 0 !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; font: 600 12px/1 'Fredoka', sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 0 6px !important; box-shadow: none !important; overflow: hidden; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > .tbtn-stk * { color: inherit !important; -webkit-text-fill-color: inherit !important; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > #uiReset::before { content: '\21BB'; margin-right: 6px; font-size: 14px; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > .tbtn-stk:hover { filter: brightness(1.15); } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > .tbtn-stk:active { transform: translateY(2px); } html.lsk[data-skin=latin] body #mgn-main .tbar :is(#play, #stop, #dl) { min-height: 50px !important; background-size: contain !important; } /* --- SHARE: Bluetenzweige links und rechts (zentrierte Zeile) --- */ html.lsk[data-skin=latin] body #mgn-main #mgnShare { position: relative; overflow: visible !important; } html.lsk[data-skin=latin] body #mgn-main #mgnShare::before, html.lsk[data-skin=latin] body #mgn-main #mgnShare::after { content: ''; position: absolute; top: 50%; width: 96px; height: 48px; margin-top: -24px; background: var(--lt-zweig) center / contain no-repeat; pointer-events: none; } html.lsk[data-skin=latin] body #mgn-main #mgnShare::before { right: calc(100% + 10px); transform: scaleX(-1); } html.lsk[data-skin=latin] body #mgn-main #mgnShare::after { left: calc(100% + 10px); } @media (max-width: 380px) { html.lsk[data-skin=latin] body #mgn-main #mgnShare::before, html.lsk[data-skin=latin] body #mgn-main #mgnShare::after { width: 72px; height: 36px; margin-top: -18px; } } /* --- Zentrierte Abschnitts-Schilder: Papel-picado-Girlande links und rechts, Bluetenzweig an den Enden; kein dunkler Kasten mehr --- */ html.lsk[data-skin=latin] body #mgn-main > details.a2-fold { position: relative; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; background: var(--lt-zweig) left -8px top 3px / 72px 36px no-repeat, var(--lt-picado) center 5px / 120px 34px repeat-x !important; } html.lsk[data-skin=latin] body #mgn-main > details.a2-fold::after { content: ''; position: absolute; right: -8px; top: 3px; width: 72px; height: 36px; background: var(--lt-zweig) center / contain no-repeat; transform: scaleX(-1); pointer-events: none; z-index: 1; } html.lsk[data-skin=latin].mgn-vis-flat body #mgn-main > details.a2-fold { background: none !important; } html.lsk[data-skin=latin].mgn-vis-flat body #mgn-main > details.a2-fold::after { display: none; } /* --- Spurkacheln: Vignetten entfallen; Etikett ueber die ganze Breite, darunter Auswahl, dann Regler links | MUTE + VARY rechts gestapelt --- */ html.lsk[data-skin=latin] body #mgn-main #trackKnobs .trk::after { display: none !important; content: none !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "tlabel tlabel" "tsel tsel" "tknob tstate" "tknob tbtns" !important; gap: 7px 8px !important; align-items: center !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trklabel { grid-area: tlabel !important; justify-self: stretch !important; width: auto !important; max-width: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 4px 8px !important; font-size: 12.5px !important; letter-spacing: .1em !important; text-align: center !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkstate { grid-area: tstate !important; justify-self: end !important; align-self: end !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkbtns { grid-area: tbtns !important; justify-self: stretch !important; align-self: start !important; margin: 0 !important; min-width: 0 !important; display: flex !important; justify-content: flex-end !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .vknob { grid-area: tknob !important; align-self: center !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .tselrow { margin-right: 0 !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkstate { max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; letter-spacing: .05em !important; padding-left: 4px !important; padding-right: 4px !important; } html.lsk[data-skin=latin] body #mgn-main #soundGrid .sbtn[data-lead=auto] { font-size: 10px !important; padding: 0 9px 0 3px !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs .trkreload { width: min(96px, 100%) !important; min-width: 0 !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; background-size: 100% 100% !important; } /* MASTER: Hinweis TONE / GRIT / SUB unter den Auswahllisten statt ueber dem Etikett */ html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk-master { grid-template-areas: "tlabel tlabel" "tsel tsel" "tstate tstate" !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk-master > .trkstate { justify-self: center !important; } @media (min-width: 421px) and (max-width: 520px) { html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkstate { font-size: 10.5px !important; } } /* ============================================================================================ lst1 (Owner-Befund 16.10., DnB-Pruefung, gilt fuer alle Skin-Genres): "die 4 Stile bitte nebeneinander darstellen, die beiden Reset-Buttons kleiner, uebereinander und weniger platzgreifend anordnen. Ziel ist, dass bei jedem Genre die Menues auf der jeweils vergleichbaren Hoehe sind. die Namen der Lautstaerkeregler sind nicht vollstaendig zu sehen/verschwinden am rechten Rand". (1) Stile am Handy in EINER Reihe: Handy-Plaketten ui/stil1-*.webp (baue-skin.py _stil1: Rahmen und Wort der Vorlage pixelgleich, Bluetenfelder durch den Grund neben dem Wort ersetzt und gekuerzt - das Wort wird nie gestaucht). Spalten im Verhaeltnis der Plakettenbreiten = gleiche Hoehe. (2) Reset UI / Reset Audio klein uebereinander rechts neben Play/Stop/Export in derselben Zeile (wie Hip-Hop/Techno). (3) Mute-Zustand ohne Abschneiden (FX "Mute - N" in eigener Zeile), Synth-Kachel mit zwei Spuren: Vary-Knoepfe mit Live-Text (Synth/Arp) im Rahmen. ============================================================================================ */ @media (max-width: 600px) { html.lsk[data-skin=latin] body #mgn-main #stilSeg { grid-template-columns: minmax(0, 113fr) minmax(0, 137fr) minmax(0, 123fr) minmax(0, 150fr) !important; gap: 6px !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil] { background-size: contain !important; background-position: center !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.salsa"] { aspect-ratio: 113 / 67 !important; background-image: url(ui/stil1-salsa-n.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.salsa"].on { background-image: url(ui/stil1-salsa-a.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.bachata"] { aspect-ratio: 137 / 66 !important; background-image: url(ui/stil1-bachata-n.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.bachata"].on { background-image: url(ui/stil1-bachata-a.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.cumbia"] { aspect-ratio: 123 / 67 !important; background-image: url(ui/stil1-cumbia-n.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.cumbia"].on { background-image: url(ui/stil1-cumbia-a.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.merengue"] { aspect-ratio: 150 / 66 !important; background-image: url(ui/stil1-merengue-n.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab[data-stil="latin.merengue"].on { background-image: url(ui/stil1-merengue-a.webp) !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab.on { border-radius: 7px !important; } html.lsk[data-skin=latin] body #mgn-main #stilSeg .tab .tablock { bottom: -9px !important; font-size: 11px !important; line-height: 14px !important; padding: 0 5px !important; } } /* Transport (alle Breiten): Play/Stop/Export im Verhaeltnis der Vorlagenbilder, Reset UI/Reset Audio klein uebereinander rechts daneben */ html.lsk[data-skin=latin] body #mgn-main .tbar { grid-template-columns: minmax(0, 179fr) minmax(0, 168fr) minmax(0, 184fr) max-content !important; grid-auto-flow: row !important; column-gap: 5px !important; row-gap: 0 !important; align-items: center !important; } html.lsk[data-skin=latin] body #mgn-main .tbar :is(#play, #stop, #dl) { min-height: 0 !important; height: auto !important; padding: 0 !important; background-size: contain !important; } html.lsk[data-skin=latin] body #mgn-main .tbar #play { aspect-ratio: 179 / 72; } html.lsk[data-skin=latin] body #mgn-main .tbar #stop { aspect-ratio: 168 / 74; } html.lsk[data-skin=latin] body #mgn-main .tbar #dl { aspect-ratio: 184 / 73; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack { grid-row: auto !important; grid-column: auto !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; height: auto !important; min-height: 0 !important; width: auto !important; align-self: center !important; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > .tbtn-stk { flex: 0 0 26px !important; max-width: none !important; width: 100% !important; height: 26px !important; border-width: 4px !important; border-image: url(ui/f-dunkel.webp) 12 fill / 4px stretch !important; font-size: 11px !important; letter-spacing: .03em !important; padding: 0 4px !important; white-space: nowrap !important; overflow: visible !important; } html.lsk[data-skin=latin] body #mgn-main .tbar > .tbtnstack > #uiReset::before { content: none; } html.lsk[data-skin=latin] body #mgn-main .panel.transport { padding-left: 4px !important; padding-right: 4px !important; } html.lsk[data-skin=latin] body #mgn-main .tbar { padding-left: 4px !important; padding-right: 4px !important; } html.lsk[data-skin=latin] body #mgn-main .tbar #dl { overflow: visible !important; } html.lsk[data-skin=latin] body #mgn-main .tbar #dl .cnt { top: -8px !important; right: -4px !important; } /* Mute-Zustand nie abgeschnitten (alle Breiten): ohne Ellipse, schmalere Sperrung; FX traegt "Mute - Anzahl" in eigener Zeile */ html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkstate { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; letter-spacing: .02em !important; padding-left: 3px !important; padding-right: 3px !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk-fx { grid-template-areas: "tlabel tlabel" "tsel tsel" "tstate tstate" "tknob tbtns" !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk-fx > .trkstate { max-width: none !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs > .trk > .trkbtns { flex-wrap: wrap !important; gap: 4px !important; } /* Synth-Kachel mit zwei Spuren (Synth + Arp): zweimal das Bild "VARY" war nicht unterscheidbar - Rahmen der Vorlage + Live-Text (alle Breiten) */ html.lsk[data-skin=latin] body #mgn-main #trackKnobs .trkbtns > .trkreload:not(:only-child) { background: none !important; background-image: none !important; border-style: solid !important; border-width: 4px 5px !important; border-image: url(ui/f-mute-n.webp) 11 fill / 4px 5px stretch !important; height: 28px !important; width: min(96px, 100%) !important; padding: 0 3px !important; color: var(--lt-paper) !important; -webkit-text-fill-color: var(--lt-paper) !important; font: 600 11px/1 'Fredoka', sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap !important; } html.lsk[data-skin=latin] body #mgn-main #trackKnobs .trkbtns > .trkreload:not(:only-child):hover, html.lsk[data-skin=latin] body #mgn-main #trackKnobs .trkbtns > .trkreload:not(:only-child):active { background-image: none !important; filter: brightness(1.15); } /* --- lpb1 17.10. (Owner: Partner DnB/Techno/Hip-Hop und Blend Hint/Dialogue/Merged wie die Vorlage, Bogen 5): Schild normal -n / gewaehlt -a (Goldrahmen + Schein der Vorlage); die Schrift steht im Bild, der Knopftext bleibt fuer Vorlesen und Titel. Blend-Woerter sind bei allen Partnern gleich. --- */ html.lsk[data-skin=latin] body #fusionSeg button:is([data-fusion=dnb], [data-fusion=techno], [data-fusion=hiphop]), html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix] { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=dnb] { background-image: url(ui/c-dnb-n.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=dnb].on { background-image: url(ui/c-dnb-a.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=techno] { background-image: url(ui/c-techno-n.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=techno].on { background-image: url(ui/c-techno-a.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=hiphop] { background-image: url(ui/c-hiphop-n.webp) !important; } html.lsk[data-skin=latin] body #fusionSeg button[data-fusion=hiphop].on { background-image: url(ui/c-hiphop-a.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="1"] { background-image: url(ui/m-hint-n.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="1"].on { background-image: url(ui/m-hint-a.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="2"] { background-image: url(ui/m-dialog-n.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="2"].on { background-image: url(ui/m-dialog-a.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="3"] { background-image: url(ui/m-merged-n.webp) !important; } html.lsk[data-skin=latin] body #fusionMixSeg button[data-fmix="3"].on { background-image: url(ui/m-merged-a.webp) !important; } /* Masse = Seitenverhaeltnis des Schilds (200/98); gewaehlt zeigt der Goldrahmen des Bildes statt des CSS-Rings, der Haken bleibt (ein Auswahl-Zeichen fuer alle) */ html.lsk[data-skin=latin] body #mgn-main #fusionSeg button:is([data-fusion=dnb], [data-fusion=techno], [data-fusion=hiphop]) { aspect-ratio: 200 / 98; } html.lsk[data-skin=latin] body #mgn-main #fusionMixSeg button[data-fmix] { height: auto !important; min-height: 0 !important; aspect-ratio: 200 / 98; padding: 0 !important; overflow: visible !important; } html.lsk[data-skin=latin] body #mgn-main :is(#fusionSeg button:is([data-fusion=dnb], [data-fusion=techno], [data-fusion=hiphop]), #fusionMixSeg button[data-fmix]).on { box-shadow: none !important; } html.lsk[data-skin=latin] body #mgn-main #fusionMixSeg button[data-fmix]:disabled { filter: grayscale(1) brightness(.92) !important; } /* lshare1 19.10.2026 (Owner: "Prod-latin: Share oeffnet keinen share-dialog!"): der Knopf kopiert den Link, die Rueckmeldung 'Copied' war im Wortbild-Skin durchsichtig - im Zustand mgn-ok Wortbild aus, Text und Haken in Tinte auf Papier. Tuer ?lsk=0 wie bisher. */ html.lsk[data-skin=latin] body #mgnShare.mgn-ok { background-image: none !important; background-color: var(--lt-paper) !important; border: 1.5px solid var(--lt-gold) !important; border-radius: 6px !important; } html.lsk[data-skin=latin] body #mgnShare.mgn-ok, html.lsk[data-skin=latin] body #mgnShare.mgn-ok * { color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; } html.lsk[data-skin=latin] body #mgnShare.mgn-ok svg { opacity: 1 !important; }