/* ========================================================== CANTICA EMBED UTILITY UI V1 ========================================================== */ /* * Cantica est l'unique propriétaire de l'audio dans * l'intégration. La barre audio persistante SolfaSync * n'a donc aucune raison d'occuper de la hauteur. */ html.cantica-embed-ui #canticaPersistentAudio, html.cantica-embed-ui .cantica-persistent-audio { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Groupe des commandes non audio de la présentation. */ html.cantica-embed-ui .presentation-toolbar-actions { display: flex !important; align-items: center !important; gap: 8px !important; } /* * Settings = bouton icône standard. */ html.cantica-embed-ui #presentationConfigure.cantica-embed-icon-action { display: inline-grid !important; place-items: center !important; width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; } html.cantica-embed-ui #presentationConfigure img { display: block; width: 20px; height: 20px; } /* * Bouton impression. */ html.cantica-embed-ui #presentationPrint { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; } html.cantica-embed-ui #presentationPrint img { width: 18px; height: 18px; } /* * Sur petit écran : les commandes utilitaires restent * compactes. L'icône imprimante suffit visuellement. */ @media (max-width: 720px) { html.cantica-embed-ui .presentation-toolbar-actions { gap: 6px !important; } html.cantica-embed-ui #presentationPrint { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; } html.cantica-embed-ui #presentationPrint span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* * Aucun scrollbar vertical de follow-along * dans la partition embed. */ html.cantica-embed-ui .presentation-stage { overflow-y: visible !important; scroll-snap-type: none !important; scrollbar-width: none !important; } html.cantica-embed-ui .presentation-stage::-webkit-scrollbar { display: none !important; } } /* CANTICA EMBED COMPACT UTILITY BAR V2 */ /* * Cantica possède déjà son transport audio flottant. * * La présentation SolfaSync embarquée ne conserve donc * dans son header que : * * Plein écran | Imprimer | Settings */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-transport { display: none !important; } /* * Barre haute compacte : * * titre à gauche * commandes utilitaires à droite */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "title actions" !important; align-items: center !important; column-gap: 18px !important; row-gap: 0 !important; min-height: 0 !important; padding: 14px 18px !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title { grid-area: title !important; min-width: 0 !important; margin: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title .eyebrow { margin: 0 0 3px !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title h1 { margin: 0 !important; line-height: 1.08 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPosition { display: block; margin-top: 3px !important; } /* * Les trois actions occupent une seule ligne. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-toolbar-actions { grid-area: actions !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; margin: 0 !important; } /* * Les actions qui n'ont aucun sens dans l'embed * restent invisibles. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationFlowMode, html.cantica-embed-ui .presentation-page:not(:fullscreen) #closePresentation { display: none !important; } /* * Hauteurs uniformes pour éviter une deuxième ligne. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationFullscreen, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPrint, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationConfigure { box-sizing: border-box !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; } /* * Le second bouton mobile "Lancer la présentation" * est redondant : Plein écran existe déjà dans le header. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationMobileLaunch { display: none !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-toolbar { grid-template-columns: minmax(0, 1fr) auto !important; padding: 10px 10px !important; column-gap: 8px !important; } /* * Le libellé PRÉSENTATION est dispensable sur mobile. * Le titre et la position suffisent. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title .eyebrow { display: none !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(17px, 5vw, 22px) !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPosition { margin-top: 2px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-toolbar-actions { gap: 5px !important; } /* * Sur mobile les trois commandes deviennent * des boutons carrés à icône. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationFullscreen, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPrint, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationConfigure { display: inline-grid !important; place-items: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationFullscreen span, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPrint span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationFullscreen img, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationPrint img, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationConfigure img { width: 18px !important; height: 18px !important; } } /* END CANTICA EMBED COMPACT UTILITY BAR V2 */ /* CANTICA MOBILE SETTINGS POPUP V3 */ @media (max-width: 720px) { /* * Par défaut, aucun panneau de réglages n'occupe * la partition. * * Ceci neutralise également mobile-configuration * de SolfaSync dans l'embed. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings { display: none !important; position: fixed !important; z-index: 260 !important; top: 76px !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; max-height: min(560px, 130vw) !important; margin: 0 !important; padding: 12px !important; grid-template-columns: 1fr !important; gap: 9px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; border: 1px solid #405a78 !important; border-radius: 16px !important; background: #101f32 !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important; } /* * Seule cette classe ouvre le popup. * Même .collapsed ne peut plus le refermer * tant que notre état modal est actif. */ html.cantica-embed-ui .presentation-page.cantica-mobile-settings-open:not(:fullscreen) #presentationSettings, html.cantica-embed-ui .presentation-page.cantica-mobile-settings-open:not(:fullscreen) #presentationSettings.collapsed { display: grid !important; } /* * Fond indépendant, lui aussi hors du flux. */ html.cantica-embed-ui #canticaMobileSettingsBackdrop { display: none !important; position: fixed !important; z-index: 250 !important; inset: 0 !important; background: rgba(3, 9, 17, .58); backdrop-filter: blur(2px); } html.cantica-embed-ui .presentation-page.cantica-mobile-settings-open #canticaMobileSettingsBackdrop { display: block !important; } /* * Bouton de fermeture intégré à la boîte. */ html.cantica-embed-ui #canticaMobileSettingsClose { position: sticky !important; z-index: 3; top: 0; justify-self: end; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin: 0 0 2px auto !important; padding: 0 !important; border-radius: 50% !important; font-size: 26px; line-height: 1; } /* * Les sections restent dans le popup et non * au-dessus d'une mesure. */ html.cantica-embed-ui #presentationSettings > details { width: 100%; } } /* END CANTICA MOBILE SETTINGS POPUP V3 */ /* CANTICA DESKTOP PDF DIALOG V2 */ @media (min-width: 721px) { /* * L'iframe Cantica a maintenant la hauteur de toute * la partition. Un centré sur son viewport * peut donc se retrouver plusieurs écrans plus bas. * * On l'ancre près du haut de l'embed. */ html.cantica-embed-ui #previewDialog[open] { position: absolute !important; inset: auto !important; top: 82px !important; left: 50% !important; transform: translateX(-50%) !important; box-sizing: border-box !important; width: min(1240px, calc(100% - 32px)) !important; height: min(840px, 72vw) !important; max-height: 900px !important; margin: 0 !important; z-index: 1000 !important; } html.cantica-embed-ui #previewDialog::backdrop { background: rgba(3, 9, 17, .68); } html.cantica-embed-ui #previewDialog .preview-sheet { height: calc(100% - 105px) !important; } } /* END CANTICA DESKTOP PDF DIALOG V2 */ /* CANTICA EMBED TITLE TICKER V1 */ /* * Titre de présentation façon lower-third. * * - titre court : totalement statique ; * - titre long : viewport horizontal dédié ; * - presentationPosition et actions restent immobiles ; * - aucun impact sur le plein écran natif. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .presentation-title { min-width: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-title-ticker-viewport { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; contain: inline-size; } /* * Le H1 conserve toute sa largeur réelle. * C'est le viewport qui effectue le clipping. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-title-ticker-viewport #presentationTitle { display: inline-block !important; width: max-content !important; max-width: none !important; min-width: max-content !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: normal !important; white-space: nowrap !important; transform: translate3d(0, 0, 0); will-change: transform; } /* * Uniquement lorsqu'un déplacement est réellement nécessaire : * très léger fondu aux extrémités. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-title-ticker-viewport.is-scrolling { -webkit-mask-image: linear-gradient( to right, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100% ); } /* * Accessibilité : * si l'utilisateur désactive les animations, * le titre reste consultable par glissement horizontal. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-title-ticker-viewport.is-static-overflow { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-title-ticker-viewport.is-static-overflow::-webkit-scrollbar { display: none; } /* END CANTICA EMBED TITLE TICKER V1 */ /* CANTICA DESKTOP SETTINGS OWNERSHIP V1 */ /* * En Desktop, aucun artefact du popup Mobile * ne doit jamais apparaître, même si l'iframe * a traversé le breakpoint pendant son chargement. */ @media (min-width: 721px) { html.cantica-embed-ui #canticaMobileSettingsBackdrop, html.cantica-embed-ui #canticaMobileSettingsClose { display: none !important; } } /* END CANTICA DESKTOP SETTINGS OWNERSHIP V1 */ /* CANTICA TONIC FULLSCREEN TRANSPORT V1 */ html.cantica-embed-ui .presentation-page:is(:fullscreen,.theater-mode) .presentation-transport { display: none !important; } #canticaTonicFullscreenTransport { position: fixed; z-index: 240; left: 50%; top: 50%; bottom: auto; display: flex; align-items: center; justify-content: center; gap: 14px; width: min( 520px, calc(100vw - 36px) ); min-height: 84px; padding: 12px 18px; box-sizing: border-box; border: 1px solid rgba(210,228,240,.30); border-radius: 24px; background: rgba(7,26,43,.48); box-shadow: 0 18px 55px rgba(0,0,0,.24); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.96); transition: opacity .18s ease, transform .18s ease; } #canticaTonicFullscreenTransport[hidden] { display: none !important; } #canticaTonicFullscreenTransport.is-visible, #canticaTonicFullscreenTransport:focus-within { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } #canticaTonicFullscreenTransport button { display: grid; place-items: center; flex: 0 0 auto; margin: 0; padding: 0; cursor: pointer; } #canticaTonicFullscreenTransport svg { width: 28px; height: 28px; } .cantica-tonic-fullscreen-secondary { width: 56px; height: 56px; border: 1px solid rgba(230,242,250,.30); border-radius: 15px; background: rgba(7,26,43,.40); color: #F4F8FB; } .cantica-tonic-fullscreen-secondary:disabled { opacity: .30; cursor: default; } .cantica-tonic-fullscreen-play { width: 72px; height: 60px; border: 1px solid #FDB415; border-radius: 16px; background: #FDB415; color: #102A43; box-shadow: 0 8px 24px rgba(253,180,21,.22); } .cantica-tonic-fullscreen-play:hover { border-color: #FFC438; background: #FFC438; } .cantica-tonic-fullscreen-icon-pause { display: none; } #canticaTonicFullscreenTransport.is-playing .cantica-tonic-fullscreen-icon-play { display: none; } #canticaTonicFullscreenTransport.is-playing .cantica-tonic-fullscreen-icon-pause { display: block; } .cantica-tonic-fullscreen-label { min-width: 0; max-width: 225px; overflow: hidden; padding: 0 8px; color: rgba(244,248,251,.88); font-size: 14px; font-weight: 760; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } html.cantica-embed-ui .presentation-page:not(:fullscreen):not(.theater-mode) #canticaTonicFullscreenTransport { display: none !important; } @media (max-width: 820px) { #canticaTonicFullscreenTransport { gap: 10px; width: min( 390px, calc(100vw - 28px) ); min-height: 78px; padding: 10px 12px; border-radius: 22px; } #canticaTonicFullscreenTransport svg { width: 25px; height: 25px; } .cantica-tonic-fullscreen-secondary { width: 50px; height: 50px; border-radius: 14px; } .cantica-tonic-fullscreen-play { width: 66px; height: 56px; border-radius: 15px; } .cantica-tonic-fullscreen-label { max-width: 145px; padding: 0 4px; font-size: 12px; } } /* END CANTICA TONIC FULLSCREEN TRANSPORT V1 */ /* CANTICA DESKTOP SIDEBAR SPACING V1 */ @media (min-width: 721px) { /* * Sidebar de configuration Tonic Sol-fa. * * Un seul inset gouverne désormais les cartes : * 18 px sur les quatre côtés. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings { box-sizing: border-box !important; padding: 18px !important; gap: 14px !important; align-content: start !important; } /* * Toutes les cartes remplissent exactement * la largeur utile du sidebar. * * Aucun margin parasite ne participe * au positionnement. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings > details { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* * Niveau intérieur : * header et contenu utilisent la même * respiration horizontale de 16 px. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings > details > summary { box-sizing: border-box !important; padding: 14px 16px !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings > details > .presentation-settings-group { box-sizing: border-box !important; padding: 16px !important; gap: 12px !important; } /* * Les éléments du groupe ne recréent pas * de marges horizontales indépendantes. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings > details > .presentation-settings-group > :first-child { margin-top: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings > details > .presentation-settings-group > :last-child { margin-bottom: 0 !important; } } /* END CANTICA DESKTOP SIDEBAR SPACING V1 */ /* CANTICA DESKTOP SETTINGS CONTROLS FIT V1 */ @media (min-width: 721px) { /* * ======================================================== * 1. CONTENEUR INTERNE * ======================================================== * * Aucun descendant de la carte Affichage ne doit pouvoir * imposer une largeur supérieure à l'espace disponible. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group, html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group > * { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } /* * Le premier div contient : * eyebrow + liste S/A/T/B. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group > div { width: 100% !important; min-width: 0 !important; } /* * ======================================================== * 2. TITRE "PISTES AFFICHÉES ET ÉCOUTÉES" * ======================================================== * * L'eyebrow ne doit plus étirer la carte. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group .eyebrow { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 10px !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.35 !important; } /* * ======================================================== * 3. PISTES S / A / T / B * ======================================================== * * Le markup contient QUATRE éléments : * * checkbox | initiale | nom | statut * * L'ancienne grille n'avait que trois colonnes, * ce qui créait une 4e colonne implicite et provoquait * le débordement à droite. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices { display: grid !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 8px !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices > label { display: grid !important; grid-template-columns: 20px 34px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 12px !important; } /* * Checkbox : largeur fixe. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices > label > input { width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 0 !important; } /* * S / A / T / B. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices > label > span { min-width: 0 !important; justify-self: start !important; } /* * Nom de piste : * c'est cette colonne qui absorbe la variation de largeur. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices > label > b { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* * ACTIF / SOLO / MUET : * toujours contenu dans la carte. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationTrackChoices > label > em { min-width: 0 !important; max-width: 58px !important; justify-self: end !important; white-space: nowrap !important; text-align: right !important; } /* * ======================================================== * 4. CHECKBOXES SIMPLES * ======================================================== * * Afficher notes / paroles / suivi automatique. * * Passage en grille afin que le texte possède une vraie * colonne réductible au lieu d'élargir le flex. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group > label.switch-row { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .switch-row > input { width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; } /* * ======================================================== * 5. SLIDER TAILLE DES PAROLES * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .range-setting { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .range-setting input[type="range"] { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .range-setting output { min-width: 48px !important; max-width: 58px !important; text-align: right !important; white-space: nowrap !important; } /* * ======================================================== * 6. SELECTS * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group select { display: block !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* * Tous les labels verticaux doivent eux-mêmes * respecter la largeur de la carte. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationSettings .presentation-settings-group > label:not(.switch-row) { display: grid !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* END CANTICA DESKTOP SETTINGS CONTROLS FIT V1 */ /* CANTICA DESKTOP PRESENTATION MIXER V4 */ @media (min-width: 721px) { /* * ======================================================== * MIXER * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) #presentationMixerChannels { display: grid !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; } /* * ======================================================== * CHANNEL STRIP * * IDENTITE M S * [ INSTRUMENT ] * 🔊 ━━━━━━━━━●━━━━ -1.9 dB * ↔ ━━━━━●━━━━━━━━ L 40 * * ▌ VU * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-strip { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 28px 34px 24px 24px !important; grid-template-areas: "identity actions" "instrument instrument" "volume volume" "pan pan" !important; align-items: center !important; column-gap: 9px !important; row-gap: 8px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; /* * 24 px à droite : * réserve propre pour le VU. */ padding: 12px 24px 13px 12px !important; border: 1px solid rgba(91,145,195,.43) !important; border-radius: 15px !important; background: linear-gradient( 145deg, #102B47 0%, #0D2239 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 5px 16px rgba(0,0,0,.07) !important; overflow: hidden !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-strip.muted { opacity: .55 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-strip.soloed { border-color: rgba(253,180,21,.78) !important; box-shadow: inset 3px 0 0 #FDB415, 0 5px 16px rgba(0,0,0,.07) !important; } /* * ======================================================== * IDENTITE * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-identity { grid-area: identity !important; display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-identity strong { display: grid !important; place-items: center !important; flex: 0 0 27px !important; width: 27px !important; min-width: 27px !important; height: 27px !important; margin: 0 !important; border: 1px solid rgba(253,180,21,.28) !important; border-radius: 8px !important; background: rgba(253,180,21,.055) !important; color: #FDB415 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-identity span { display: block !important; min-width: 0 !important; overflow: hidden !important; color: #E2EBF5 !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1.15 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* * Métronome */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-strip[data-channel="METRO"] .cantica-desktop-mixer-identity strong { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; font-family: inherit !important; font-size: 7px !important; letter-spacing: .045em !important; } /* * ======================================================== * MUTE / SOLO * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-actions { grid-area: actions !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; min-width: 0 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-actions .mix-button { display: grid !important; place-items: center !important; box-sizing: border-box !important; width: 28px !important; min-width: 28px !important; height: 28px !important; padding: 0 !important; border: 1px solid rgba(105,157,204,.50) !important; border-radius: 8px !important; background: rgba(22,48,76,.94) !important; color: #F1F6FB !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-actions .mix-button:hover { border-color: #75D8FF !important; background: #1A3A59 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-actions .mix-button[aria-pressed="true"] { border-color: #FDB415 !important; background: #FDB415 !important; color: #111827 !important; } /* * ======================================================== * INSTRUMENT * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-instrument { grid-area: instrument !important; display: block !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 31px 0 11px !important; border: 1px solid rgba(92,143,191,.52) !important; border-radius: 9px !important; outline: none !important; background-color: #091A2C !important; color: #F5F8FC !important; font-size: 11px !important; font-weight: 650 !important; text-overflow: ellipsis !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-instrument:hover { border-color: rgba(117,216,255,.62) !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-instrument:focus-visible { border-color: #1684E3 !important; outline: 2px solid rgba(22,132,227,.20) !important; outline-offset: 1px !important; box-shadow: none !important; } /* * ======================================================== * FADER ROWS * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row { display: grid !important; grid-template-columns: 18px minmax(0,1fr) 56px !important; align-items: center !important; gap: 9px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 24px !important; margin: 0 !important; padding: 0 !important; color: #BFD0E2 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-volume-row { grid-area: volume !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-pan-row { grid-area: pan !important; } /* * ======================================================== * ICONES * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-icon { display: grid !important; place-items: center !important; width: 18px !important; height: 18px !important; color: #73D4F5 !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-icon svg { display: block !important; width: 16px !important; height: 16px !important; } /* * ======================================================== * RANGE * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row input[type="range"] { display: block !important; appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 4px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; outline: 0 !important; direction: ltr !important; writing-mode: horizontal-tb !important; cursor: pointer !important; } /* * Volume */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-volume-row input[type="range"] { background: linear-gradient( 90deg, #0B80DF 0 var(--cantica-volume-level), #38536C var(--cantica-volume-level) 100% ) !important; } /* * Pan : * centre explicitement marqué. */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-pan-row input[type="range"] { background: linear-gradient( 90deg, transparent calc(50% - .5px), rgba(226,240,251,.55) calc(50% - .5px), rgba(226,240,251,.55) calc(50% + .5px), transparent calc(50% + .5px) ), linear-gradient( 90deg, #38536C 0 var(--cantica-pan-min), #71D5F5 var(--cantica-pan-min) var(--cantica-pan-max), #38536C var(--cantica-pan-max) 100% ) !important; } /* * WebKit / Safari */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row input[type="range"]::-webkit-slider-runnable-track { height: 4px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row input[type="range"]::-webkit-slider-thumb { appearance: none !important; -webkit-appearance: none !important; width: 12px !important; height: 12px !important; margin-top: -4px !important; border: 2px solid #F5F8FC !important; border-radius: 50% !important; background: #68788E !important; box-shadow: 0 1px 4px rgba(0,0,0,.32) !important; } /* * Firefox */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row input[type="range"]::-moz-range-track { height: 4px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-row input[type="range"]::-moz-range-thumb { width: 10px !important; height: 10px !important; border: 2px solid #F5F8FC !important; border-radius: 50% !important; background: #68788E !important; } /* * ======================================================== * VALEURS * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-value { display: block !important; box-sizing: border-box !important; width: 56px !important; min-width: 56px !important; max-width: 56px !important; overflow: hidden !important; color: #C8DCEE !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size: 9px !important; font-variant-numeric: tabular-nums !important; font-weight: 750 !important; line-height: 1 !important; text-align: right !important; white-space: nowrap !important; } /* * ======================================================== * VU-METRE * * Hors de la grille. * Il dispose maintenant de son propre espace réservé * grâce au padding-right de la carte. * ======================================================== */ html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-meter { position: absolute !important; top: 91px !important; right: 9px !important; bottom: 14px !important; left: auto !important; display: flex !important; align-items: flex-end !important; width: 6px !important; min-width: 6px !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 3px !important; background: repeating-linear-gradient( to top, #2B445C 0 3px, #172C41 3px 5px ) !important; } html.cantica-embed-ui .presentation-page:not(:fullscreen) .cantica-desktop-mixer-meter > i { display: block !important; width: 100% !important; border-radius: 3px !important; background: linear-gradient( to top, #087DD7 0%, #47C9F2 68%, #FDB415 86%, #FF7158 100% ) !important; transition: height .065s linear !important; } } /* END CANTICA DESKTOP PRESENTATION MIXER V4 */