/* ───────────────────────────────────────────────────────────────────────── * Shim « post-JQM » : remplace UNIQUEMENT ce que la lib JS faisait au * runtime (pages cachées/affichées). Les feuilles de style JQM restent * incluses (cf. dans index*.html) pour la continuité visuelle. * ───────────────────────────────────────────────────────────────────────── */ /* Pages : une seule visible à la fois. Par défaut JQM gérait ça via .ui-page-active ; on garde la même classe, posée par le shim JS, mais on l'enforce ici au cas où la CSS JQM serait éventuellement retirée. */ [data-role="page"][aria-hidden="true"] { display: none !important; } /* Popups : cachés par défaut, le shim les affiche via .popup('open'). */ [data-role="popup"] { display: none; } /* ── Styles globaux du dropdown service (.svc-menu-*) ───────────────────── * Initialement injectés à la volée par youtim-global-manager.js / fil-manager.js * la première fois qu'un dropdown s'ouvre. Promus en CSS globale pour * être dispo dès le premier render, par exemple sur la popup "ajouter * photo" du fil qui peut être ouverte avant tout autre service menu. */ .svc-menu-backdrop { position: fixed; inset: 0; z-index: 9998; background: transparent; } .svc-menu-dropdown { position: fixed; background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px 0; min-width: 240px; z-index: 9999; overflow: hidden; } /* `.svc-menu-title`, `.svc-menu-title-rich` (+ enfants) retirés — le titre "Paramètres du service / " en tête du menu service a été supprimé par cohérence avec `.dash-group-dropdown`. */ .svc-menu-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; color: #2c3e50; font-size: 14px; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background .15s; } .svc-menu-item:hover { background: #f7fafc; } .svc-menu-item:active { background: #f0f4f8; } .svc-menu-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; } .svc-menu-label { flex: 1; line-height: 1.3; } .svc-menu-divider { height: 1px; background: #e6ecf1; margin: 6px 0; } /* ───────────────────────────────────────────────────────────────────────── * Card popup générique (.yt-pop-*) * Utilisée par les popups de confirmation (réinit prefs, etc.). * Même langage visuel que les .papp-* du participant-manager. * ───────────────────────────────────────────────────────────────────────── */ .yt-pop-shell { background: #fff; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.18); max-width: 420px; width: 90%; padding: 0; overflow: hidden; color: #1a1a2e; } .yt-pop-card { padding: 24px 22px 20px; text-align: center; box-sizing: border-box; } .yt-pop-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#e6f0f9 0%,#dceaf5 100%); color: #2489ce; font-size: 24px; margin: 0 0 12px; } .yt-pop-icon-warn { background: linear-gradient(135deg,#fff4e0 0%,#ffe7c4 100%); color: #d97706; } .yt-pop-icon-danger { background: linear-gradient(135deg,#fce4e4 0%,#f8d4d4 100%); color: #c62828; } .yt-pop-title { font-size: 17px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.3; } .yt-pop-msg { font-size: 14px; color: #5a6470; line-height: 1.5; margin: 0 0 14px; } .yt-pop-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .yt-pop-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s, opacity .15s; width: 100%; box-sizing: border-box; } .yt-pop-btn-primary { background: linear-gradient(135deg,#2489ce 0%,#1a6faa 100%); color: #fff; box-shadow: 0 3px 10px rgba(36,137,206,.35); } .yt-pop-btn-warn { background: linear-gradient(135deg,#f59e0b 0%,#c87f08 100%); color: #fff; box-shadow: 0 3px 10px rgba(245,158,11,.35); } .yt-pop-btn-danger { background: linear-gradient(135deg,#ef5350 0%,#c62828 100%); color: #fff; box-shadow: 0 3px 10px rgba(239,83,80,.35); } .yt-pop-btn-cancel { background: #f0f4f8; color: #5a6470; } .yt-pop-btn:active { transform: scale(.97); opacity: .92; } /* La page doit occuper toute la largeur du viewport sans inset hérité d'éventuelles règles JQM (.ui-mobile-viewport applique margin/padding sur body) ou de overrides locaux. Sinon le header sticky à l'intérieur s'en trouve décalé. flex-column avec content en flex:1 pour que la zone centrale s'étire automatiquement jusqu'au bas du viewport, peu importe la hauteur du contenu. */ [data-role="page"] { margin: 0; padding: 0; width: 100%; min-height: 100vh; box-sizing: border-box; } [data-role="page"].ui-page-active { display: flex; flex-direction: column; align-items: center; /* centre horizontalement le content */ } [data-role="page"] > [data-role="content"] { flex: 1 1 auto; width: 100%; align-self: center; /* nécessaire si un parent passe en stretch */ } /* Header et autres direct children pleine largeur, ignorant l'align-items center du parent (sinon les headers fixed/sticky rétréciraient à 720px). */ [data-role="page"] > [data-role="header"], [data-role="page"] > [data-role="footer"], [data-role="page"] > [data-role="panel"] { align-self: stretch; } /* Sans JQM JS, les
ne reçoivent plus la classe .ui-bar-a qui leur donnait leur fond bleu/sombre, ni le positionnement fixed dérivé de data-position="fixed". On remet tout côté CSS. */ [data-role="header"] { background: #2489ce; color: #fff; } [data-role="header"] a, [data-role="header"] h1, [data-role="header"] h2, [data-role="header"] .ui-title { color: #fff; } [data-role="header"][data-position="fixed"] { /* Approche identique à celle utilisée par fil-manager : position fixed ancrée top-left-right pour rester pleine largeur du viewport, peu importe ce que fait le parent (max-width, sticky context, etc.). */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; margin: 0 !important; z-index: 1000; height: 40px; box-sizing: border-box; } /* ── Carte de création de service (design unifié, identique à fil) ─────── */ /* Utilisée par galerie / annonce / menu / itineraire create. Reprend les tokens visuels des classes .fu-* (fil) avec un préfixe générique .scf- (« service create form ») pour pouvoir l'appliquer sans dépendre de l'injection de styles du fil-manager. */ .scf-card{background:#fff;border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid #eef2f6;max-width:520px;margin:14px auto;padding:24px 22px;box-sizing:border-box} .scf-title{font-size:16px;font-weight:700;color:#1a1a2e;margin:0 0 18px;line-height:1.3;text-align:center} .scf-field{margin-bottom:14px} .scf-input,.scf-textarea{width:100%;box-sizing:border-box;border-radius:14px;border:1px solid #e0e6ec;background:#f6f8fb;padding:12px 14px;font-size:15px;color:#1a1a2e;outline:none;transition:border-color .15s,background .15s;font-family:inherit;-webkit-appearance:none;display:block} .scf-input:focus,.scf-textarea:focus{border-color:#2489ce;background:#fff;box-shadow:0 0 0 3px rgba(36,137,206,.12)} .scf-textarea{resize:vertical;min-height:80px} .scf-toggle-block{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#f6f8fb;border-radius:14px;margin-bottom:10px} .scf-toggle-label{flex:1;font-size:14px;color:#2c3e50;line-height:1.35;text-align:left} .scf-toggle{position:relative;flex-shrink:0;display:inline-flex;background:#e6ecf1;border-radius:50px;padding:3px} .scf-toggle-opt{padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;color:#8a96a3;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .15s;line-height:1;white-space:nowrap} .scf-toggle-opt.is-on{background:var(--y-accent,#2489ce);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)} .scf-submit{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--y-accent-grad,linear-gradient(135deg,#2489ce 0%,#1a6faa 100%));color:#fff;border-radius:50px;padding:13px 28px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px var(--y-accent-soft,rgba(36,137,206,.4));-webkit-tap-highlight-color:transparent;transition:transform .1s,opacity .15s;width:100%;box-sizing:border-box;margin-top:6px} .scf-submit:active{transform:scale(.98);opacity:.92} /* ── Formulaires create / update : libellés alignés à gauche ───────────── */ /* Couvre les form anciens (galerie/annonce/menu/itineraire) qui n'utilisent pas les classes *-label (déjà alignées) mais des div .y_title / .createFormBlockDesc / etc. */ #y_create_service_zone .y_title, #y_create_service_zone .createFormBlockDesc, #y_create_service_zone label, #y_create_service_zone .pref-label, #y_update_page .y_title, #y_update_page .createFormBlockDesc, #y_update_page label, #y_update_page .pref-label { text-align: left !important; } /* ── y_create_service_zone : suppression des libellés au-dessus des champs ── */ /* Hide les libellés des champs (Titre / Description / Devise / …) injectés par les managers modernes (.fu-label, .sou-label, .cou-label, .gu-label, .ag-label, .lou-label, .itu-label) et anciens (.pref-label). Le titre du formulaire (.y_title) et les libellés des toggles (.*-toggle-label, .createFormBlockDesc) restent visibles car ils décrivent un choix actif. */ #y_create_service_zone .fu-label, #y_create_service_zone .sou-label, #y_create_service_zone .cou-label, #y_create_service_zone .gu-label, #y_create_service_zone .ag-label, #y_create_service_zone .lou-label, #y_create_service_zone .itu-label, #y_create_service_zone .pref-label { display: none !important; } /* Garantit que les libellés des toggles restent visibles, même si une règle plus large essayait de les cacher (ex. .lou-label parent). */ .lou-toggle-block, .fu-toggle-block, .sou-toggle-block, .cou-toggle-block, .gu-toggle-block, .ag-toggle-block, .itu-toggle-block, .scf-toggle-block { display: flex !important; } .lou-toggle-label, .fu-toggle-label, .sou-toggle-label, .cou-toggle-label, .gu-toggle-label, .ag-toggle-label, .itu-toggle-label, .scf-toggle-label { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ── Suppression de la notion de description de service ────────────────── */ /* Masque le champ Description (label + textarea) dans tous les formulaires create / update de service. Les descriptions d'items (agenda event, itineraire step, support, …) ont des IDs différents et restent visibles. */ .fu-field:has(> #y_update_fil_desc), .sou-field:has(> #y_update_sondage_desc), .cou-field:has(> #y_update_compta_desc), .gu-field:has(> #y_update_gift_desc), .ag-field:has(> #y_update_agenda_desc), .lou-field:has(> #y_update_listing_desc), .itu-field:has(> #y_itin_update_desc) { display: none !important; } /* Fallback pour navigateurs sans :has() : on cache au moins le textarea et son frère
immédiatement précédent. */ #y_update_fil_desc, #y_update_sondage_desc, #y_update_compta_desc, #y_update_gift_desc, #y_update_agenda_desc, #y_update_listing_desc, #y_itin_update_desc, /* galerie / annonce / réservation : champ description retiré du markup */ #y_create_itineraire_desc { display: none !important; } @media only screen and (min-width: 600px){ .ui-page { width: 768px !important; margin: 0 auto !important; position: relative !important; -webkit-border-radius: 0; border-radius: 0; height: 100% !important; font-family: "Helvetica Neue",Arial,sans-serif; } .ui-footer { width: 768px !important; margin: 0 auto !important; } .ui-header { margin: 0 auto !important; } } /* fullcalendar mini ------------------------------------------------------------------------*/ .fc-view-month .fc-event, .fc-view-agendaWeek .fc-event { font-size: 0; overflow: hidden; height: 0px; border : 0; } .fc-view-basicWeek .fc-event, .fc-view-agendaWeek .fc-event { font-size: 0; overflow: hidden; height: 2px; } .fc-view-agendaWeek .fc-event-vert { font-size: 0; overflow: hidden; width: 2px !important; } .fc-agenda-axis { width: 20px !important; font-size: .7em; } .fc-button-content { padding: 0; } .fc-state-highlight { border: 2px solid red; } event-time, .fc-event-title { padding: 0 4px; } /* ------------------------------------------------------------------------*/ .smallIconBlue { color: #5cc8fc; } .the-icons { list-style: none outside none; margin-left: 0; } .the-icons li { float: left; line-height: 25px; width: 25%; } .the-icons i:hover { background-color: rgba(255, 0, 0, 0.25); } .hidden{display:none;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #888; } input:-moz-placeholder, textarea:-moz-placeholder { color: #888; } input::-moz-placeholder, textarea::-moz-placeholder { color: #888; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #888; } .ui-li-desc { overflow: visible !important; white-space: normal !important; } /* Sélection / copie autorisée par défaut (inputs + textareas étaient déjà exclus de la règle, mais on autorisait pas le copier-coller du reste). On garde -webkit-touch-callout pour éviter le menu iOS sur les éléments interactifs (boutons, icônes…). */ *:not(input):not(textarea) { -webkit-touch-callout: default; } /* Éléments interactifs : pas de sélection ni de menu long-press (boutons, icônes, items cliquables…). */ button, .ui-btn, .home-params-btn, .svc-back-btn, .svc-menu-btn, .home-menu-action, .home-menu-handle, .home-params-item, .home-params-dropdown, .svc-menu-item, .svc-menu-dropdown, .dash-module, .dash-group-header, .youtim-cell, .youtim-cell-drag, .wa-cam-btn, .wa-send-btn, .dash-drag-handle, .wa-act-row, .wa-act-emoji, .wa-react-detail-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .ui-panel { /* pour supprimer scrollbar vert sous IE */ min-height: 100px; } .ui-listview>.ui-li-has-thumb>.ui-btn, .ui-listview>.ui-li-static.ui-li-has-thumb { min-height: 0; padding-left: 0; } body { background: #fff !important; /* Reset du margin:8px par défaut des UA stylesheets (Chrome / Safari / Firefox). Sans ça, le grand header fullbleed de #y_home_page laissait 8px de bande blanche tout autour (en haut, à gauche, à droite). */ margin: 0; padding: 0; } .ui-mobile, .ui-mobile body { height: auto; } .ui-header, .ui-header-fixed { border-width:2px; border-color:white; border-top-style:none; border-right-style:none; border-bottom-style:solid; border-left-style:none; font-color:white; background:#2489ce; height: 40px; } a:-webkit-any-link { text-decoration: none; } .ui-content { background: none; color: #757575; /*background: #e9e9e9; */ font-family: "Helvetica Neue",Arial,sans-serif; font-style: normal; text-decoration:none; text-shadow: none; font-size: 16px; overflow-y: hidden; text-align: center; -webkit-border-radius: 0; border-radius: 0; } .ui-bar { width:100%; padding: 0 0; margin: 0 auto; } .ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open { right: 0; } .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open { right: 0; } .ui-panel-display-overlay { z-index: 3100; top:41px; } .ui-header-fixed { z-index: 4000; } .ui-page-active.ui-page-panel { overflow-x: initial; } .ui-collapsible-themed-content .ui-collapsible-content { border-bottom-width: 0; } .y_bouton_a { line-height:40px; height:40px; max-width:300px; background:white; cursor: pointer; margin:0 auto; margin-top:5px; } .y_bouton_a:hover { background-color:#c9e2f3; } .y_bouton_a:active { background-color:#68afdf; color:white; } .y_bouton_b { line-height:40px; height:40px; width:135px; background:none; cursor: pointer; margin:0 auto; margin-top:5px; float:left; margin-right:5px; border-style:solid; border-width:1px; border-color:#c7c7c7; } .y_bouton_b:hover { background-color:#c9e2f3; } .y_bouton_b:active { background-color:#68afdf; color:white; } .y_bouton_c { height:40px; max-width:175px; background:none; cursor: pointer; margin:0 auto; margin-top:5px; width:200px; margin-right:5px; border-style:solid; border-width:1px; border-color:#c7c7c7; } .y_bouton_c:hover { background-color:#c9e2f3; } .y_bouton_c:active { background-color:#68afdf; color:white; } .y_bouton_d { float:left; height:40px; background:none; cursor: pointer; margin:0 auto; margin-top:5px; background:white; width:110px; margin-right:5px; /*border-style:solid; border-width:2px; border-color:#c7c7c7;*/ } .y_bouton_d:hover { background-color:#c9e2f3; } .y_bouton_d:active { background-color:#68afdf; color:white; } .y_bouton_a_text_bold { float:left; text-align:center; width:160px; font-weight:bold; } .y_bouton_b_text_bold { float:left; text-align:left; width:90px; font-weight:bold; padding-left:10px; } .y_bouton_c_text_bold { float:left; text-align:left; width:130px; font-weight:bold; font-size:12px; padding-left:5px; } .y_bouton_d_text_bold { float:left; text-align:left; padding-top:8px; font-weight:bold; padding-left:10px; color:#757575; } .y_bouton_d_text_bold_center { text-align:center; padding-top:8px; font-weight:bold; color:#757575; } .y_bouton_a_text { float:left; text-align:center; width:160px; } .y_bouton_a_icon_blue { color:#2d96c7; font-size:30px; text-align:right; padding-right:5px; } .y_bouton_b_icon_blue { color:#2d96c7; font-size:30px; text-align:left; padding-left:5px; float:left; } .y_bouton_a_icon_bluedark { /* color:#2d96c7; */ color:#4f4f4f; font-size:32px; text-align:left; padding-right:5px; } .y_bouton_a_icon_grey { color:grey; font-size:30px; text-align:right; padding-right:5px; } .y_bouton_home { text-align: center; margin: 2px 0; padding-right: 0; } .moduleCreateService .y_bouton_home { margin: 0; } .youtim-cadre { background-color: white; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; border-style:solid; border-width:1px; border-color:#c7c7c7; } .youtim-cadreBouton{ cursor: pointer; width: 48px; height: 25px; padding-top: 7px; margin-top:3px; background-color: white; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; border-style:solid; border-width:1px; border-color:#c7c7c7; } .youtim-listElement{ font-size: 16px; color: #2489ce; width:200px; float:right; padding-right:35px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .youtim-listElement-participantRelance{ font-size: 16px; color: #2489ce; width:200px; float:right; padding-right:25px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: normal; } .y_title { font-size: 20px; font-weight: 700; color: #2489ce; margin-bottom: 4px; } .ui-icon-user16 { background-image: url("../images/icon-user-16-white.png"); } .ui-icon-refresh16white { background-image: url("../images/icon-refresh-16-white.png"); } .ui-icon-trash16white { background-image: url("../images/icon-trash-16-white.png"); } /* end of new ok ------------------------------------------ */ .cadre { background-color: white; /* -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; border-style:solid; border-width:2px; border-color:#c7c7c7;*/ } .comptaCadre { background-color: #2489ce; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; border-style:solid; border-width:1px; border-color:#c7c7c7; color:white; } .ui-btn-up-c { background: inherit; } .menuCenter { margin: auto; width:100%; } .participantListDeleteIcon { float:right; cursor: pointer; } .tableauZone{ margin: 0 auto; width: 100%; max-width: 560px; box-sizing: border-box; padding: 0 10px; } .inputZone{ clear:both; width: 192px; float:left; margin-left:5px; } .inputButtonZone{ cursor: pointer; width: 48px; height: 25px; padding-top: 10px; margin-top:8px; margin-right:5px; float:right; background-color: white; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; border-style:solid; border-width:1px; border-color:#c7c7c7; } .buttonZone { clear:both; } .tableauListLabel { margin-left:2px; float:left; width:180px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; /*white-space : nowrap;*/ white-space:normal; } .tableauListLabelRelanceParticipant { margin-left:2px; float:left; width:250px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .sondageChoiceListImage { margin:2px 4px; float:left; margin-top: 6px; } /* .menuBouton{ text-align: left; height:36px; width: 170px; line-height: 14px; background-color:white; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; text-decoration:none; cursor: pointer; border-style:solid; border-width:2px; border-color:#c7c7c7; } .menuBouton:hover { background-color:#c9e2f3; } .menuBouton:active { background-color:#68afdf; } */ .listingElementToBeDone { background-color:white; } .listingElementToBeDone:hover { background-color:#c9e2f3; } .listingElementToBeDone:active { background-color:#68afdf; } .listingElementDone { background-color:#F5F5F5; } .listingElementDone:hover { background-color:#c9e2f3; } .listingElementDone:active { background-color:#68afdf; } /* .menuBoutonImage{ margin:2px 4px; float:left; } .menuBoutonDesc{ line-height:32px; font-size: 13px; color:black; font-weight: normal; white-space: normal; } */ .subMenuBouton{ padding-left:5px; text-align: left; height:42px; width: 170px; background-color:white; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; text-decoration:none; cursor: pointer; float:left; border-style:solid; border-width:1px; border-color:#c7c7c7; } .subMenuBouton:hover { background-color:#c9e2f3; } .subMenuBouton:active { background-color:#68afdf; } .subMenuBoutonImage{ margin:2px 4px; float:left; } .subMenuBoutonDesc{ width:168px; margin:0 auto; font-size: 12px; color:#757575; font-weight: normal; white-space: normal; } .sondageResultat{ cursor: pointer; margin-bottom:15px; } .sondageResultatOk{ text-align: center; float:left; color: black; width:40px; } .sondageResultatIfnece{ text-align: center; float:left; color: black; width:40px; } .sondageResultatKo{ text-align: center; float:right; color: black; width:40px; } .sondageparticipantstatus { width:100%; text-align: left; } .sondageparticipantstatuspseudo{ float:left; text-align: left; width:75%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space:nowrap; } .sondageparticipantstatusresult { padding-left: 20%; } .sondageparticipantstatusIfnece { padding-top: 5px; padding-left: 20%; background-color : orange; height: 15px; float:right; } .sondageparticipantstatusNo { padding-top: 5px; padding-left: 20%; background-color : red; height: 15px; float:right; } .sondageparticipantstatusNoVote { padding-top: 5px; padding-left: 20%; background-color : grey; height: 12px; float:right; } .sondageChoice{ text-align: left; float:left; width: 226px; background-color:white; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; text-decoration:none; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; border-style:solid; border-width:1px; border-color:#c7c7c7; } .sondagebuttonlabel{ margin:2px 4px; width: 80%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; /*line-height:20px;*/ /*white-space:nowrap; */ font-size: 18px; color: #2489ce; } .sondagebuttoncheck{ padding-left: 3px; padding-top : 3px; float:left; color:#2489ce; font-size:28px; } .sondageParticipantChoiceList { text-decoration:none; cursor: pointer; } .homepageBouton{ text-align: left; float:left; height:36px; width: 170px; background-color:white; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; text-decoration:none; border-style:solid; border-width:1px; border-color:#c7c7c7; } .homepageBouton:hover { background-color:#c9e2f3; } .homepageBouton:active { background-color:#68afdf; } .homepageBoutonImage{ margin:2px 4px; float:left; } .homepageBoutonDesc{ line-height:32px; font-size: 13px; color:black; font-weight: normal; white-space: normal; } .homepagePseudo { text-align: left; float:right; width: 105px; text-decoration:none } .homepagePseudoImage { margin:2px 2px; float:left; vertical-align:middle; } .homepagePseudoDesc { line-height:16px; font-size: 13px; color:black; text-decoration:none } /* ═══════════════════════════════════════════════════════ DASHBOARD — nouveau design ═══════════════════════════════════════════════════════ */ /* Fond f0f4f8 sur toutes les pages de services */ #y_home_page_content, #service .ui-content, #y_create_service_page .ui-content, #y_create_page .ui-content, #y_create_bytag_page .ui-content, #y_params_page .ui-content, #preferences .ui-content, #faq .ui-content, #y_notif_page .ui-content { background: #f0f4f8 !important; /* min-height: 100vh provoque un scroll fantôme : avec le padding-top:headerH ajouté par jQM sur la page parent, on dépasse de headerH px. min-height:100% contraint à la zone utile (page - paddings) → fit parfait. */ min-height: 100% !important; box-sizing: border-box; } /* Pages parentes : même fond pour éviter le blanc sous le content */ #y_create_service_page, #y_create_page, #y_create_bytag_page, #y_params_page, #service, #preferences, #faq, #y_notif_page, #y_home_page, #participants { background: #f0f4f8 !important; } /* ── Désactive l'effet bounce / rubber-band iOS sur toute l'app ──── + fond uniforme pour qu'aucune bande blanche n'apparaisse si .ui-content ne fait pas exactement la hauteur du viewport. */ html, body { overscroll-behavior: none; -webkit-overscroll-behavior: none; background: #f0f4f8 !important; } /* ── Fix scroll fantôme jQuery Mobile 1.4 ────────────────────────── updatePagePadding ajoute padding-top:headerH sur [data-role="page"], pendant que resetActivePageHeight pose min-height:100vh sur le même élément. Sans border-box, total = headerH + 100vh → scroll résiduel d'exactement la hauteur du header. box-sizing:border-box englobe le padding dans la min-height → fix. Idem pour .ui-content qui reçoit aussi padding (15px par défaut + éventuel padding custom comme #y_home_page_content padding-bottom:80px). */ [data-role="page"], [data-role="content"], .ui-content { box-sizing: border-box !important; } /* Conteneur principal dashboard padding-top inclut les 60 px de header fixed + 10 px de respiration. */ #y_home_page_content { padding: 70px 10px 80px !important; } /* Conteneurs principaux : largeur contrainte (JQM gérait ça via .ui-content, plus disponible après la suppression de la lib JS). On force globalement sur tous les blocs [data-role="content"] et leurs racines internes. */ [data-role="content"] { max-width: 720px; margin: 0 auto; padding-top: 60px !important; /* compense le header fixed (h=60px) */ padding-left: 14px; padding-right: 14px; min-height: 100vh; box-sizing: border-box; background: transparent !important; } /* Pages d'atterrissage (start web, cordova landing, pages services FR/EN) : pas de header fixed, contenu pleine largeur (landing-hero / landing-footer ont déjà leurs propres contraintes internes via .landing-hero-inner). */ #y_start_web_page > [data-role="content"], #y_cordova_page > [data-role="content"], #y_cordova_page_fr > [data-role="content"], [data-role="content"]:has(> .landing-hero), [data-role="content"]:has(> .landing-footer) { max-width: none !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Le premier enfant du content ne doit pas remonter le contenu via son margin-top hérité (un

a 16 px, un

20 px, etc. par défaut navigateur). Sans ça l'écart sous le header varie selon le service (cagnotte → 20 px, menu → 4 px, etc.). */ [data-role="content"] > :first-child { margin-top: 0 !important; } /* Fond blanc dans la partie centrale d'une page de service, du bas du header jusqu'en bas de l'écran. La zone centrale reste contrainte à max-width:720px ; le fond du reste de la page (latéraux) garde la couleur globale #f5f7fa. */ #service > [data-role="content"], #participants > [data-role="content"] { background: #ffffff !important; min-height: calc(100vh - 60px); /* 60px = hauteur du header fixed */ } /* Groupe (une "YouTim") */ .dash-group { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.08); margin-bottom: 14px; overflow: hidden; } /* ── Variante fullbleed : dash-group qui sert de "page header" pour #y_home_page (vue détail d'UN YouTim). Annule les marges/coins arrondis/ombre pour que la couleur s'étende jusqu'aux bords du viewport, puis paint le grand header coloré au-dessus du grid des services. Le JQM top header (.ui-header) de #y_home_page est caché pour laisser ce bloc remonter au top. */ #y_home_page [data-role="header"], #y_home_page .ui-header { display: none !important; } /* La règle plus haut (#y_home_page_content) met padding:70px 10px 80px !important. On override en zéro horizontal pour que le grand header coloré s'étende d'un bord à l'autre du viewport. Le bottom-padding est conservé (zone pour le FAB / fin de scroll), le grid intérieur garde son padding 14px propre. La règle globale [data-role="content"] (cf. l.1142) impose aussi un max-width:720px qui clamperait le header sur les écrans larges (desktop / tablette). On la neutralise spécifiquement pour #y_home_page pour que le header full-bleed s'étende vraiment d'un bord du viewport à l'autre, peu importe la largeur de l'écran. */ #y_home_page #y_home_page_content, #y_home_page .ui-content, #y_home_page [data-role="content"] { padding: 0 0 80px !important; max-width: none !important; margin: 0 !important; } .dash-group-fullbleed { background: transparent; border-radius: 0; box-shadow: none; margin: 0 0 14px; overflow: visible; } /* Le content parent n'impose plus de max-width pour laisser le header s'étendre — on remet une contrainte localement sur le grid des services pour qu'il reste lisible sur écran large (la contrainte était fournie par [data-role="content"] max-width:720 avant l'override #y_home_page). */ .dash-group-fullbleed > .dash-modules-grid { max-width: 720px; margin: 0 auto; /* Bord bas arrondi pour fermer la "carte" formée par header (top arrondis 0 0 24px 24px) + grid (bottom arrondi). Le rayon 18px est un cran plus doux que le 24px du haut, pour éviter un effet trop "boîte" et garder une hiérarchie visuelle entre le header (élément primaire) et la grille (contenu). */ border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } .dash-group-fullbleed > .dash-group-header { border-radius: 0 0 24px 24px; padding: calc(env(safe-area-inset-top, 12px) + 18px) 18px 22px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,.12); /* Sticky : reste collé au haut du viewport quand l'utilisateur scrolle la grille des services. z-index pour passer devant les tiles. -webkit-sticky pour les vieilles WebViews Cordova iOS. */ position: -webkit-sticky; position: sticky; top: 0; z-index: 50; } /* Cordova Android : la WebView est déjà placée sous la status bar (edge-to-edge géré par la plateforme), mais env(safe-area-inset-top) renvoie quand même la hauteur de la status bar → hero double-décalé (trop épais). La classe html.cordova-android (posée au deviceready, cf. youtim-cordova.js) neutralise le terme env() — même pattern que les [data-role=header] dans index-cordova.html. iOS garde la safe-area (la WebView passe sous l'encoche). Sans effet sur le web : la classe n'y est jamais posée. */ html.cordova-android .dash-group-fullbleed > .dash-group-header { padding-top: 18px; } /* Top row : back pill (gauche) + ⋮ (droite). */ .dash-group-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dash-group-back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .12s; } .dash-group-back:active { background: rgba(255,255,255,.32); transform: scale(.97); } .dash-group-back i { font-size: 14px; line-height: 1; } /* Le ⋮ injecté dans .dash-group-header-top : taille uniforme avec le back pill (cercle 36 sur fond semi-transparent). La règle .dash-group-more existante est plus bas — ici on ajuste juste pour ce contexte. */ .dash-group-fullbleed .dash-group-more { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; line-height: 1; } /* Sur viewport ≥760px : agrandir le ⋮ et le back pill pour matcher la hauteur du logo agrandi sur le ytlist-header (cf. ytlist-header-logo 64×64 au même breakpoint). Garantit que les 2 grands headers (ytlist + dash-group) gardent strictement la même hauteur sur tablette/desktop. */ @media (min-width: 760px) { .dash-group-fullbleed .dash-group-more { width: 64px; height: 64px; font-size: 32px; } .dash-group-back { padding: 18px 18px 18px 14px; font-size: 14px; } .dash-group-back i { font-size: 18px; } } /* Identité : grand titre + sous-titre (members · proposé par X). */ .dash-group-identity { text-align: center; padding: 0 8px; } .dash-group-fullbleed .dash-group-title { font-size: 28px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.3px; word-break: break-word; white-space: normal; margin-bottom: 6px; /* Garde-fou : 2 lignes max (ellipse) pour que le hero garde une hauteur stable même avec un titre extrême. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Titre long → police réduite par paliers (classes posées au render, cf. youtim-home-page.js) au lieu de laisser le hero grandir. */ .dash-group-fullbleed .dash-group-title.is-long { font-size: 22px; } .dash-group-fullbleed .dash-group-title.is-xlong { font-size: 18px; letter-spacing: 0; } .dash-group-fullbleed .dash-group-owner { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); line-height: 1.35; } /* Ligne sous-titre : "X membres · proposé par Y" + bouton Participants à droite. Flex centré → le bouton est sur la MÊME ligne que le sous-titre (pas de nouvelle rangée) → impact hauteur minimal. */ .dash-group-owner-row { display: flex; align-items: center; justify-content: center; gap: 10px; } /* Bouton-icône "Participants" : accès direct à la gestion des participants. Compact (28px) pour rester sur la ligne du sous-titre sans gonfler le header. Cercle semi-transparent cohérent avec le ⋮. */ .dash-group-fullbleed .dash-group-action { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .12s; } .dash-group-fullbleed .dash-group-action:active { background: rgba(255,255,255,.32); transform: scale(.92); } /* En-tête du groupe (couleur injectée inline par JS) */ .dash-group-header { background: linear-gradient(135deg, #2489ce 0%, #1a6faa 100%); padding: 12px 14px; display: flex; align-items: center; } .dash-group-info { flex: 1; min-width: 0; } .dash-group-title-row { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; } /* Pastille "YOUTIM" à gauche du titre du groupe dans le dashboard. Petite, semi-transparente sur le gradient coloré du header pour rester lisible quelle que soit la couleur du groupe. */ .dash-group-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.3; text-transform: uppercase; border: 1px solid rgba(255,255,255,.35); } .dash-group-owner { text-align: center; } .dash-group-title { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dash-group-title-row .dash-group-chevron { flex-shrink: 0; font-size: 13px; color: rgba(255,255,255,.85); line-height: 1; padding: 0 2px; transition: transform .15s; } .dash-group-owner { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 2px; } /* ── Popup supprimer YouTim ────────────────────────────── */ html #y_popupReinit { border-radius: 16px !important; overflow: hidden; min-width: 280px; max-width: 320px; } .del-popup-card { padding: 28px 20px 18px; background: #fff; text-align: center; } .del-popup-icon { font-size: 40px; color: #e74c3c; margin-bottom: 12px; line-height: 1; } .del-popup-title { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; } .del-popup-msg { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 22px; } .del-popup-btn-delete { display: block; width: 100%; box-sizing: border-box; background: #e74c3c; color: #fff; border-radius: 50px; padding: 13px; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; margin-bottom: 10px; -webkit-tap-highlight-color: transparent; } .del-popup-btn-delete:active { opacity: .85; } .del-popup-btn-cancel { font-size: 13px; color: #888; cursor: pointer; padding: 6px; -webkit-tap-highlight-color: transparent; } .del-popup-btn-cancel:active { opacity: .7; } /* ── Popup renommer YouTim ─────────────────────────────── */ html #y_popupUpdateMetaTitle { border-radius: 16px !important; overflow: hidden; min-width: 280px; max-width: 340px; } .rename-popup-card { padding: 22px 18px 16px; background: #fff; } .rename-popup-title { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; } .rename-popup-input { display: block; width: 100%; box-sizing: border-box; border: 1.5px solid #e0e8f0 !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important; color: #222 !important; background: #f7f9fc !important; margin-bottom: 12px; outline: none; -webkit-appearance: none; box-shadow: none !important; } .rename-popup-input:focus { border-color: var(--y-accent, #2489ce) !important; background: #fff !important; box-shadow: 0 0 0 3px var(--y-accent-soft, rgba(36,137,206,.12)) !important; } /* Le bouton submit utilise `.auth-submit-btn` (cf. youtim.css ailleurs) + `.rename-popup-save`. On surcharge ici le background pour qu'il prenne la couleur du YouTim (vars posées par popUpdateMetaTitle côté JS). */ .rename-popup-save { margin-top: 0; background: var(--y-accent-grad, linear-gradient(135deg,#2489ce 0%,#1a6faa 100%)) !important; box-shadow: 0 4px 14px var(--y-accent-soft, rgba(36,137,206,.4)) !important; } .rename-popup-cancel { text-align: center; margin-top: 12px; font-size: 13px; color: #888; cursor: pointer; padding: 4px; -webkit-tap-highlight-color: transparent; } .rename-popup-cancel:active { opacity: .7; } /* Drag handle : retiré, la notion de drag des YouTim a été supprimée. */ .dash-drag-handle { display: none !important; } /* Pill « Assigné à » sous chaque item de listing. Plus expressif que le simple texte aplati précédent : capsule discrète gris pâle, label en uppercase, nom mis en gras coloré. */ .lst-assignee { display: inline-flex; align-items: center; gap: 4px; background: #f0f4f8; border-radius: 50px; padding: 3px 10px 3px 8px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lst-assignee-icon { font-size: 11px; color: var(--y-accent, #2489ce); flex-shrink: 0; } .lst-assignee-label { font-size: 10px; font-weight: 700; color: #8a96a3; text-transform: uppercase; letter-spacing: .4px; /* la majuscule a une hauteur de glyphe plus haute que la x-height du pseudo en casse normale ; on pousse légèrement vers le bas pour aligner visuellement le baseline avec le pseudo. */ position: relative; top: 1px; } .lst-assignee-name { font-size: 12px; font-weight: 600; color: var(--y-accent, #2489ce); overflow: hidden; text-overflow: ellipsis; } /* Bouton edit (crayon) sur chaque item de listing — affiché tout le temps pour l'admin, jamais en mode hover-only. Défini ici plutôt qu'injecté à la volée par listing-manager, pour qu'il s'applique dès le premier render (et qu'il survive aux re-render dynamiques). */ .listing-edit-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f0f7ff; color: #2489ce; font-size: 14px; cursor: pointer; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s; } .listing-edit-btn:hover { background: #e0ecf9; } .listing-edit-btn:active { transform: scale(.92); background: #cfe2f3; } /* Groupe en cours de drag */ .dash-group--dragging { opacity: .75; box-shadow: 0 8px 24px rgba(0,0,0,.22); z-index: 50; position: relative; } /* Chevron collapse */ .dash-group-chevron { font-size: 18px; color: rgba(255,255,255,.8); padding: 4px 6px; cursor: pointer; flex-shrink: 0; transition: transform .2s; -webkit-tap-highlight-color: transparent; } .dash-chevron-collapsed { transform: rotate(-90deg); } /* Bouton ⋮ dans le header du groupe (même look que .home-params-btn). */ .dash-group-more { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 12px 0 6px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 22px; font-weight: 700; line-height: 1; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background .15s; } .dash-group-more:active { background: rgba(255,255,255,.25); } /* Menu déroulant contextuel — design aligné sur `.home-params-dropdown` (cf. youtim-home-page.js / _injectHomeParamsStyle). Mêmes paddings, mêmes états hover/active, mêmes badges icône colorés. Différences mineures : pas de divider, max-width:280 (plus large pour accueillir un metaTitle long si on le réintroduisait). */ .dash-group-dropdown { position: fixed; /* aligné avec home-params : positionné par JS */ background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px 0; /* respiration verticale = home-params-dropdown */ min-width: 220px; max-width: 280px; overflow: hidden; z-index: 9000; } /* `.dash-gdd-title`, `.dash-gdd-title-prefix`, `.dash-gdd-title-name` retirés — le titre "Paramètres du YouTim " en tête du dropdown a été supprimé (le contexte du menu se suffit visuellement). */ .dash-gdd-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; /* aligné home-params-item (était 13 16) */ font-size: 14px; font-weight: 500; color: #2c3e50; /* gris foncé doux, identique home-params */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; /* bordure inter-items retirée — séparation par padding seul, comme home-params-dropdown. Plus épuré. */ } .dash-gdd-item:hover { background: #f7fafc; } .dash-gdd-item:active { background: #f0f4f8; } /* Variante danger : le LIBELLÉ reste sombre (#2c3e50), seul le badge icône est rouge (cf. .dash-gdd-icon-delete / -unsub). Ça évite un effet "tout-rouge" du item et reste cohérent avec home-params-icon-reset. */ .dash-gdd-item--danger { /* color hérite — pas de surcharge ; le poids visuel rouge passe par le badge icône. */ } /* Badge icône — carré arrondi coloré 32×32, identique à .home-params-icon. */ .dash-gdd-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; } .dash-gdd-icon i { font-size: 14px; line-height: 1; } /* Variantes colorées : palette alignée sur les usages sémantiques de home-params-* (violet = édition, rouge = danger). `rename` = violet (modifier), `delete` / `unsub` = rouge (destructif). */ .dash-gdd-icon-rename { background: #7c4dff; } .dash-gdd-icon-color { background: #0ea5e9; } .dash-gdd-icon-delete { background: #ef5350; } .dash-gdd-icon-unsub { background: #ef5350; } /* Grille de modules — colonnes égales via CSS Grid */ .dash-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 14px; background: #f7f9fc; } /* ── Activité récente ───────────────────────────────────────────────── Section affichée sous la grille des services de chaque YouTim sur #y_home_page. Liste les services par lastupdate desc avec un libellé relatif (il y a X) et un badge "Nouveau" si isnew/isupdated. Reprend la palette tinted du YouTim courant pour rester rattaché visuellement au dash-group-header. */ .dash-activity { /* `.dash-modules-grid` ci-dessus a max-width:720 + padding:14 → largeur visible 748px (gray bg). On aligne `.dash-activity` à cette même largeur visible 748 en passant max-width:748 + padding horizontal 0, ce qui permet à `.dash-activity-list` (bloc blanc à l'intérieur) de s'étendre sur toute la largeur visible 748 → blocs gris et blanc parfaitement alignés visuellement. */ max-width: 748px; margin: 4px auto 0; padding: 4px 0 18px; background: transparent; } .dash-activity-title { font-size: 12px; font-weight: 700; color: #5a6470; text-transform: uppercase; letter-spacing: .6px; /* Padding horizontal 14px = même retrait que le padding interne du `.dash-modules-grid` ci-dessus → le libellé "ACTIVITÉ RÉCENTE" reste aligné sur la colonne des modules services. */ padding: 14px 14px 8px; } .dash-activity-list { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; } .dash-activity-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; border-bottom: 1px solid #eef2f6; } .dash-activity-row:last-child { border-bottom: none; } .dash-activity-row:active { background: #f6f8fb; } .dash-activity-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; /* background + color set inline via JS pour matcher la couleur du YouTim */ } .dash-activity-body { flex: 1; min-width: 0; } .dash-activity-svc { font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-activity-meta { font-size: 12px; color: #6b7785; line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pseudo de l'auteur de la dernière activité — un peu plus foncé que la meta line par défaut, en semi-bold, pour le distinguer du titre de l'item sans utiliser de pill (qui jurait avec un titre potentiellement de 80 chars). */ .dash-activity-author { color: #374151; font-weight: 600; } /* Titre du dernier item — affiché en couleur d'accent du YouTim plutôt qu'en pill rouge uppercase. La nouveauté est déjà signalée par .dash-activity-dot à droite et la pastille colorée de l'icône à gauche. */ .dash-activity-new { color: #b91c1c; font-weight: 600; } .dash-activity-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } /* Wrapper de chaque module */ .dash-module-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; /* Appui long = drag (reorder admin) : pas de callout iOS ni de sélection de texte pendant le maintien du doigt sur la tuile. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Poignée de drag visible uniquement pour l'admin */ .dash-module-drag { position: absolute; top: 4px; left: 4px; z-index: 5; width: 16px; height: 18px; display: flex; align-items: center; justify-content: center; opacity: .55; cursor: grab; pointer-events: none; /* le drag se déclenche sur le wrap */ } .dash-module-wrap:hover .dash-module-drag { opacity: .9; } /* Tuile module — hauteur auto pour afficher le libellé complet */ .dash-module { position: relative; background: #fff; border-radius: 12px; padding: 14px 8px 12px; text-align: center; border: 1.5px solid #e8edf3; transition: transform .1s; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; } .dash-module:active { transform: scale(.94); } .dash-module--new { border-color: #e85; } .dash-module--loading { } /* Module qui hérite de la couleur (gradient) du YouTim parent. Le background est posé en inline-style côté JS sous forme d'un voile blanc 55% superposé sur le gradient YouTim → version "claire" / pastel du gradient. Sur ce fond pastel, le texte BLANC d'origine ne tient plus la lecture : on passe le titre + l'icône en gris foncé + le glyph en couleur de marque #2489ce. N'est PAS appliquée à .dash-module--add (le JS ne pose pas la classe `--colored` sur la tile d'ajout). */ .dash-module--colored { border-color: transparent; color: #1a2332; box-shadow: 0 2px 6px rgba(0,0,0,.06); } /* L'icône hérite de la couleur (gradient) du YouTim parent — `--svc-grad` est posée en inline-style côté JS et contient le gradient brut du YouTim (pas le voile pastel utilisé pour le fond du module). Le glyph `` de l'icon-font est rendu en `color:transparent` et son background gradient est clippé sur le tracé via `background-clip:text`, ce qui donne au glyph la teinte saturée du YouTim. Fallback `color:#2489ce` pour les navigateurs qui ne supportent pas `background-clip:text` (très rare ; tous les WebView Cordova ≥ 4.4 et Safari/Chrome modernes gèrent). */ .dash-module--colored .dash-module-icon { color: #2489ce; } .dash-module--colored .dash-module-icon i { background: var(--svc-grad, linear-gradient(135deg,#2489ce,#155d8c)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Titre : gradient YouTim clippé sur les glyphs, MAIS assombri par un voile noir 35% superposé sur la couche du gradient (syntaxe multi- background : la 1re couche est rendue au-dessus de la 2e). Résultat ≈ teinte du YouTim virée de 35% vers le noir → reste reconnaissable chromatiquement (rouge reste rouge, bleu reste bleu) mais nettement plus foncée donc plus lisible sur le fond pastel. Le fallback `color:#1a2332` couvre les navigateurs sans support de `background-clip:text` sur du texte (sécurité — le titre reste lisible au lieu d'être transparent invisible). */ .dash-module--colored .dash-module-title { color: #1a2332; text-shadow: none; background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)), var(--svc-grad, linear-gradient(135deg,#2489ce,#155d8c)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Garde visible le ring "nouveauté" sur fond pastel : un orange/rouge net ressort bien sur cette teinte légère, on revient à #e85. */ .dash-module--colored.dash-module--new { border-color: #e85; } /* Tuile "ajouter un module" — défaut bleu brand quand aucun style inline n'est posé (cas par défaut). Quand le JS pose une couleur d'accent inline (color/border/background) basée sur le YouTim courant, les enfants `.dash-module-title` et `.dash-module-icon` héritent via `color: inherit` plus bas. */ .dash-module--add { background: #f0f7fe; border: 1.5px dashed #2489ce; color: #2489ce; } /* Title + icon héritent du `color` du wrapper — ce qui permet à un style inline `color: ` sur .dash-module--add de teinter automatiquement texte ET icône avec la couleur du YouTim. */ .dash-module--add .dash-module-title, .dash-module--add .dash-module-icon { color: inherit; } /* Icône */ .dash-module-icon { font-size: 30px; color: #2489ce; margin-bottom: 8px; line-height: 1; } /* Titre */ .dash-module-title { font-size: 11px; color: #444; line-height: 1.3; word-break: break-word; hyphens: auto; } /* Badges (new / updated / lock) */ .dash-dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #f7f9fc; z-index: 1; } .dash-dot--new { background: #e74c3c; } .dash-dot--updated { background: #2489ce; } .dash-dot--lock { position: absolute; /* Placé en bas-droite de la cellule (avant : top-left). Évite le chevauchement avec le badge "nouveau" qui reste en top-right, et est moins encombrant visuellement quand la cellule porte aussi un drag handle en haut-gauche (admin). */ bottom: 6px; right: 6px; top: auto; left: auto; width: auto; height: auto; background: transparent; border: none; font-size: 11px; /* Cadenas en blanc avec drop-shadow pour ressortir sur le fond pastel du module (gradient YouTim + voile blanc 55%). Le shadow garantit la lisibilité même sur les teintes les plus claires. */ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); opacity: 1; } /* Teinte légère sur le module "nouveau" */ .dash-module--new { border-color: #e74c3c; background: #fff9f9; } /* État vide */ .dash-empty { text-align: center; padding: 50px 20px; color: #2489ce; font-size: 17px; font-weight: 500; } .homepageEventTitle{ line-height:22px; float:left; width:100%; /*background: lightslategray;*/ background: #2d96c7; background-image:-moz-linear-gradient(left, #2d96c7, #d0e7f3); background-image:linear-gradient(left, #2d96c7, #d0e7f3); background-image:-webkit-linear-gradient(left, #2d96c7, #d0e7f3); margin-top: 10px; text-align: left; padding-left: 5px; font-size: 12px; font-weight: normal; color: white; font-family: "Helvetica Neue",Arial,sans-serif; font-style: normal; text-decoration:none; text-shadow: none; white-space: normal; word-wrap:break-word; padding-top:8px; } .homepageMetaTitle { margin:2px 4px; float:left; } .zoneInputAndButton { width:100%; float:left; background-color:white; height : 50px; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; overflow: hidden; } .zoneInputAndButton_Input { width:80%; } .moduleMobile { float:left; } .module { cursor: pointer; text-decoration: none; float: left; box-sizing: border-box; height: 100px; margin: 2px; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; overflow: hidden; text-overflow: ellipsis; text-align: center; border-style: solid; border-width: 1px; border-color: #c7c7c7; background: white; } .moduleAdd { cursor: pointer; text-decoration: none; float: left; box-sizing: border-box; height: 100px; margin: 2px; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; overflow: hidden; text-overflow: ellipsis; text-align: center; border-style: dashed; border-width: 1px; border-color: #c7c7c7; background: white; } .moduleNotFetched { cursor: pointer; text-decoration: none; float: left; box-sizing: border-box; height: 100px; margin: 2px; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; overflow: hidden; text-overflow: ellipsis; text-align: center; border-style: solid; border-width: 1px; border-color: #c7c7c7; background: #f3f2f2; } .module:hover { background-color:#c9e2f3; } .module:active { background-color:#68afdf; color:white; } .moduleAdd:hover { background-color:#c9e2f3; } .moduleAdd:active { background-color:#68afdf; color:white; } .moduleNotFetched:hover { background-color:#c9e2f3; } .moduleNotFetched:active { background-color:#68afdf; color:white; } .moduleHomeWeb { text-decoration:none; float:left; width:220px; height : 160px; margin:2px 2px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; overflow: hidden; text-overflow: ellipsis; border-style:solid; border-width:1px; border-color:#c7c7c7; background:white; } .moduleImage { top:5px; margin: 2px 30px; padding-top: 4px; } .moduleDesc { font-size: 13px; color:#4f4f4f; font-weight: normal; white-space: normal; text-decoration: none; } /* ── y_create_page : liste verticale moderne ─────────────────────────────── */ #y_create_page .ui-content { background: #f5f7fa; } /* ── Hero de y_create_page ──────────────────────────────────────────── Bloc d'intro composé de 2 lignes (block1 = titre fort, block2 = subtitle explicatif). Redesign : ajout d'un "accent bar" (::before) en dégradé YouTim au-dessus du titre, typo plus marquée, espacement aéré. La barre d'accent prend la couleur du YouTim quand on est en mode "attached" (cf. youtim-create.js → pagebeforeshow pose --y-accent-grad sur #y_create_page), sinon fallback bleu de marque. */ #y_create_page #y_create_page_block1_label.y_title { position: relative; display: block; font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; color: #1a1a2e; text-align: center; margin: 32px 16px 8px; padding-top: 18px; } #y_create_page #y_create_page_block1_label.y_title::before { content: ""; display: block; width: 56px; height: 4px; border-radius: 999px; background: var(--y-accent-grad, linear-gradient(135deg, #2489ce 0%, #1a6faa 100%)); margin: 0 auto 14px; box-shadow: 0 2px 6px var(--y-accent-soft, rgba(36,137,206,.25)); } #y_create_page #y_create_page_block2_label { font-size: 15px; font-weight: 500; color: #5a6470; text-align: center; max-width: 480px; margin: 0 auto 28px; padding: 0 16px; line-height: 1.55; } /* Le `
…` injecté dans block2 (cas "attached" : nom du YouTim parent en gras) reçoit en plus la couleur YouTim pour ressortir comme un anchor visuel. */ #y_create_page #y_create_page_block2_label span { color: var(--y-accent, #2489ce); font-weight: 700; } .moduleCreate { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; border: 1px solid #eef2f6; box-shadow: 0 2px 10px rgba(20,40,80,.05); padding: 14px 16px; margin: 10px auto; max-width: 560px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; -webkit-tap-highlight-color: transparent; } .moduleCreate:active { transform: scale(.98); background: #f4f9fd; box-shadow: 0 1px 4px rgba(20,40,80,.04); } .moduleCreateService { width: 52px; height: 52px; border-radius: 16px; /* Couleur du YouTim parent quand on crée un service "attached" (= depuis un YouTim existant). Sinon (= nouveau YouTim créé depuis la liste), les vars ne sont pas posées sur #y_create_page → fallback bleu marque. Cf. youtim-create.js → pagebeforeshow qui pose --y-accent-grad / --y-accent-soft sur #y_create_page selon le contexte. */ background: var(--y-accent-grad, linear-gradient(135deg, #2489ce 0%, #1a6faa 100%)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px var(--y-accent-soft, rgba(36,137,206,.25)); } .moduleCreateService .y_bouton_home, .moduleCreateService .y_bouton_a_icon_bluedark { background: transparent !important; color: #fff !important; width: auto; height: auto; box-shadow: none; border: 0; display: flex; align-items: center; justify-content: center; } .moduleCreateService i { font-size: 22px; color: #fff; } .moduleCreateDesc { display: none; } .homepageAddModule { padding-left: 10px; } .moduleCreateDescConteneur { flex: 1; text-align: left; min-width: 0; } .moduleCreate-title { display: block; font-size: 16px; font-weight: 700; color: #3a4452; letter-spacing: .1px; } .moduleCreateDescBloc { display: block; font-size: 12.5px; color: #6b7684; margin-top: 3px; line-height: 1.4; overflow-wrap: break-word; } .moduleCreate-arrow { color: #b8c4d0; font-size: 14px; flex-shrink: 0; margin-left: 4px; } /* "Plus d'info" link injecté par JS dans .moduleCreateDescConteneur */ .module-info-link { display: inline-flex; align-items: center; margin-top: 6px; font-size: 12px; font-weight: 600; color: #2489ce; cursor: pointer; -webkit-tap-highlight-color: transparent; } .module-info-link:active { opacity: .55; } .module-info-link i { margin-right: 4px; font-size: 11px; } /* ── Sélecteur de devise ──────────────────────────────────────────────────── */ .currency-group { display: flex; gap: 8px; margin: 8px 0; } .currency-btn { width: 48px; height: 38px; border-radius: 19px; border: 1px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; cursor: pointer; color: #555; -webkit-tap-highlight-color: transparent; } .currency-btn.currency-active { background: #2489ce; color: #fff; border-color: #2489ce; } /* ── Zone de création de service ─────────────────────────────────────────── */ #y_create_service_zone { padding: 16px 12px; } /* inputs JQM dans la zone de création */ #y_create_service_zone .ui-input-text, #y_create_service_zone textarea.ui-input-text { border-radius: 8px !important; border-color: #ddd !important; font-size: 15px !important; padding: 8px 10px !important; } /* espacement des

générés automatiquement */ #y_create_service_zone p { margin: 6px 0; } /* bouton de validation dans les formulaires de création */ #y_create_service_zone .y_bouton_a, #y_create_service_zone .y_bouton_d { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-left: 20px !important; padding-right: 16px !important; background: #2489ce !important; border-radius: 24px !important; max-width: 300px !important; height: 46px !important; line-height: normal !important; color: white !important; box-shadow: 0 2px 6px rgba(36,137,206,.35) !important; margin: 12px auto 4px !important; } #y_create_service_zone .y_bouton_a:active, #y_create_service_zone .y_bouton_d:active { background: #1a6faa !important; } #y_create_service_zone .y_bouton_a_text_bold, #y_create_service_zone .y_bouton_d_text_bold { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; line-height: normal !important; color: white !important; font-size: 15px !important; } #y_create_service_zone .y_bouton_a_icon_blue { float: none !important; text-align: center !important; padding: 0 !important; margin: 0 !important; line-height: normal !important; color: white !important; font-size: 22px !important; } #y_create_service_zone .y_bouton_a_icon_blue i { color: white !important; vertical-align: middle !important; display: block !important; line-height: 1 !important; } /* reset tout padding/margin sur les enfants directs du bouton */ #y_create_service_zone .y_bouton_a > *, #y_create_service_zone .y_bouton_d > * { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .createFormBlock { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: white; border-radius: 10px; border: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,.04); padding: 10px 14px; margin: 6px 0; width: auto; box-sizing: border-box; } .createFormBlockDesc { font-size: 14px; color: #444; flex: 1; line-height: 1.4; } .createFormBlockDescSelector { flex-shrink: 0; } .FilCommentZone { margin-left: auto; margin-right: auto; background: #2489ce; padding-top: 8px; padding-left: 8px; padding-right: 8px; -webkit-border-radius: 0.2em; border-radius: 0.2em; /*border-style:solid; border-width:1px;*/ } .FilCommentInput { background: white; } .FilCommentAction { height: 30px; text-align:left; padding-top: 2px; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; } .CameraIcon { position: relative; top: 50%; margin-top: -15px; } .MessageButton { position: relative; top: 50%; margin-top: -10px; margin:0 0; } .imageTobeUploaded { width:100px; position: relative; margin-left: auto; margin-right: auto; text-align: right; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .ListView { padding-top: 8px; } #popupPhotoPortrait { width: 270px; border: 1px solid #000; border-right: none; background: rgba(0,0,0,.5); margin: -1px 0; text-align: center } .messageTitle { font-size: 14px; font-weight: bold; color: #2489ce;; font-family: "Helvetica Neue",Arial,sans-serif; font-style: normal; text-decoration:none; text-shadow: none; word-wrap:break-word; float:left; max-width:260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .messageBody { font-size: 14px; font-weight: normal; font-family: "Helvetica Neue",Arial,sans-serif; font-style: normal; text-decoration:none; text-shadow: none; white-space: normal; word-wrap:break-word; /*float:left;*/ } .messageBodyProject { font-size: 14px; line-height: 16px; color: #be3840; font-family: arial; font-style: normal; text-decoration:none; text-shadow: none; white-space: normal; word-wrap:break-word; } .FilCommentDate { float:right; top:5%; position:relative; margin-left:5px; } .filcomment { padding-top: 0px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; } /* .ui-btn-up-c { background: white; color: black; } .ui-content-start-page { position:absolute; top: 20%; right: 5%; left: 5%; } .ui-content-start-title { color: #1f94d6; font-family: arial; font-style: normal; text-decoration: none; font-weight: bold; text-shadow: none; font-size: 60px; } .ui-content-start-desc { color: #757575; font-family: arial; font-style: normal; text-decoration: none; font-weight: bold; text-shadow: none; font-size: 12px; } .ui-slider .ui-btn-inner { padding: 5px 0 0 0 !important; font-size:.8em; } .ui-slider-popup { position: absolute !important; width: 64px; height: 64px; text-align: center; font-size: 36px; padding-top: 14px; z-index: 100; opacity: 0.8; } .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 0px; padding-left: 40px; } .ui-li-thumb { vertical-align:middle; position: relative; top: 50%; } .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 0px; padding-left: 10px; } .align_image img, .align_image span { vertical-align: middle; } */ /* CAR LIST - drag-drop ------------------------------------------ */ .drag { float:left; width:96px; height: 90px; background-color:#afe699; margin:2px 2px; cursor:move; text-align:center; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .conducteur { float:left; width:96px; height: 90px; background-color:#e3baba; margin:2px 2px; cursor:move; text-align:center; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .full { float:left; background-color: red; margin:3px; padding:2px; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .selected{ background-color:Yellow; color:Black; } .drop{ float:left; background-color: #c9e2f3; margin:3px; padding:2px; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .dropDest { width : 20%; } .dropRight{ float:left; width:80px; } .dropLeft{ margin-left:80px; } .activeSelect{ background-color:orange; cursor:crosshair; } /* CAR LIST - swipe ------------------------------------------ */ .thecar { background-color:white; background-image: url('../images/car-top-view2.png'); background-repeat:no-repeat; background-position:center center; height: 180px; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .carplace { /* position:relative; top: 20%; right: 5%; left: 5%;*/ width:60px; } .swipe { overflow: hidden; visibility: hidden; position: relative; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .swipe-wrap { overflow: hidden; position: relative; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } .swipe-wrap > div { float:left; width:100%; position: relative; } /* ══════════════════════════════════════════════════════════════════════════ Redesign popups ══════════════════════════════════════════════════════════════════════════ */ /* Overlay de fond */ .ui-popup-screen { background: rgba(0,0,0,.45) !important; } /* Conteneur JQM */ .ui-popup { border-radius: 16px !important; overflow: hidden !important; border: none !important; box-shadow: 0 8px 40px rgba(0,0,0,.28) !important; min-width: 280px !important; max-width: 340px !important; background: #fff !important; } /* Supprimer le header bleu JQM (data-theme="b") */ .ui-popup .ui-header, .ui-popup.ui-body-b, .ui-popup > .ui-body-b { background: #fff !important; border: none !important; } /* Inner padding du contenu */ .ui-popup > div { background: #fff !important; padding: 22px 20px 18px !important; } /* Titre */ .ui-popup .ui-title, .ui-popup h3.ui-title { font-size: 16px !important; font-weight: 700 !important; color: #222 !important; text-align: center !important; margin: 0 0 16px !important; line-height: 1.4 !important; background: none !important; border: none !important; padding: 0 !important; text-shadow: none !important; } /* Wrapper des boutons : flex au lieu de float */ .ui-popup [style*="width:250px"] { display: flex !important; gap: 10px !important; width: auto !important; margin: 0 !important; } /* Supprimer le clear:both */ .ui-popup [style*="clear:both"] { display: none !important; } /* Boutons généraux */ .ui-popup .y_bouton_d { flex: 1 !important; float: none !important; height: 44px !important; border-radius: 22px !important; border: 1px solid #e0e0e0 !important; background: #f5f5f5 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; width: auto !important; cursor: pointer !important; } /* Bouton Confirmer (pas de float:right) → bleu */ .ui-popup .y_bouton_d:not([style*="float:right"]) { background: #2489ce !important; border-color: #2489ce !important; } .ui-popup .y_bouton_d:not([style*="float:right"]):active { background: #1a6faa !important; } /* Bouton Annuler (float:right) → gris */ .ui-popup .y_bouton_d[style*="float:right"]:active { background: #e0e0e0 !important; } /* Labels des boutons */ .ui-popup .y_bouton_d_text_bold { float: none !important; padding: 0 !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: inherit !important; line-height: normal !important; } .ui-popup .y_bouton_d:not([style*="float:right"]) .y_bouton_d_text_bold { color: #fff !important; } /* Icône dans les boutons : masquée dans les popups */ .ui-popup .y_bouton_a_icon_blue { display: none !important; } /* Bouton Annuler dans les popups → texte bleu sur fond gris */ .ui-popup .y_bouton_d[style*="float:right"] .y_bouton_d_text_bold { color: #2489ce !important; } /* ══════════════════════════════════════════════════════════════════════════ Barre titre service (y_service_page_home_title_label) ══════════════════════════════════════════════════════════════════════════ */ #y_service_page_home_title_label { background: #fff; border-bottom: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,.07); z-index: 195; } .service-title-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; max-width: 600px; margin: 0 auto; } .service-title-icon { font-size: 18px; color: #2489ce; flex-shrink: 0; } .service-title-text { font-size: 16px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ══════════════════════════════════════════════════════════════════════════ Zone notifications (y_notification_zone) ══════════════════════════════════════════════════════════════════════════ */ #y_notification_zone { padding: 6px 10px 2px; max-width: 560px; margin: 0 auto; } .notif-zone-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 10px; border: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 10px 14px; } .notif-zone-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; flex: 1; } .notif-zone-icon { font-size: 18px; color: #2489ce; flex-shrink: 0; } /* Compacter le slider JQM dans la carte */ .notif-zone-card .ui-field-contain { margin: 0 !important; padding: 0 !important; } .notif-zone-card .ui-slider-switch { margin: 0 !important; } /* ══════════════════════════════════════════════════════════════════════════ Page Préférences ══════════════════════════════════════════════════════════════════════════ */ .pref-page { padding: 14px 12px; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .pref-card { background: #fff; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 14px 16px; } .pref-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #333; margin-bottom: 12px; } .pref-card-icon { font-size: 18px; color: #2489ce; flex-shrink: 0; } /* Inputs */ .pref-input, input.pref-input[data-role="none"] { display: block !important; width: 100% !important; box-sizing: border-box !important; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 15px !important; line-height: 1.4 !important; margin: 0 0 10px !important; background: #f9f9f9 !important; color: #333 !important; -webkit-appearance: none !important; appearance: none !important; } .pref-input:focus, input.pref-input[data-role="none"]:focus { border-color: #2489ce !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(36,137,206,.15) !important; } /* Email du compte (lecture seule, sous l'input pseudo) */ .pref-readonly-row { display: flex; align-items: center; gap: 8px; margin: -2px 4px 10px; padding: 0; font-size: 12.5px; color: #8a96a3; line-height: 1.3; user-select: text; -webkit-user-select: text; } .pref-readonly-row .pref-readonly-icon { font-size: 13px; color: #cfd6dd; flex-shrink: 0; } .pref-readonly-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } /* ══════════════════════════════════════════════════════════════════════════ Popup confirmation suppression du compte (del-acct-*) Structure : bannière rouge gradient avec icône → corps blanc avec titre, message, checklist des conséquences, warning irreversible, actions. ══════════════════════════════════════════════════════════════════════════ */ .del-acct-popup, .del-acct-popup .ui-popup, .del-acct-popup .ui-popup-arrow { background: #fff !important; border: none !important; border-radius: 24px !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 4px 12px rgba(220,38,38,.15) !important; max-width: 420px !important; width: 92% !important; padding: 0 !important; } .del-acct-banner { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); padding: 28px 20px 22px; text-align: center; position: relative; overflow: hidden; } .del-acct-banner::before { content: ""; position: absolute; top: -50px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); } .del-acct-banner::after { content: ""; position: absolute; bottom: -60px; left: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.06); } .del-acct-ring { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.95); color: #dc2626; font-size: 28px; box-shadow: 0 6px 20px rgba(0,0,0,.18); } .del-acct-body { padding: 22px 22px 20px; box-sizing: border-box; } .del-acct-title { font-size: 19px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 8px !important; text-align: center; line-height: 1.3; letter-spacing: -.3px; } .del-acct-msg { font-size: 14px; color: #5a6470; margin: 0 0 16px; text-align: center; line-height: 1.5; } .del-acct-checklist { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .del-acct-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #7f1d1d; line-height: 1.45; padding: 4px 0; } .del-acct-item i { color: #dc2626; font-size: 12px; margin-top: 4px; flex-shrink: 0; } .del-acct-warning { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #b91c1c; margin: 0 0 18px; text-align: center; } .del-acct-warning i { font-size: 13px; } .del-acct-actions { display: flex; gap: 10px; } .del-acct-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 50px; padding: 13px 16px; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s, opacity .15s, box-shadow .15s; box-sizing: border-box; } .del-acct-btn:active { transform: scale(.97); opacity: .94; } .del-acct-btn-cancel { background: #f0f4f8; color: #5a6470; } .del-acct-btn-cancel:active { background: #e0e6ec; } .del-acct-btn-confirm { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #fff !important; box-shadow: 0 4px 14px rgba(220,38,38,.4); } .del-acct-btn-confirm i, .del-acct-btn-confirm span { color: #fff !important; } /* Zone danger : suppression du compte */ .pref-card-danger { border: 1px solid #fecaca !important; background: #fef2f2 !important; } .pref-card-icon-danger { color: #dc2626 !important; } .pref-danger-desc { font-size: 13px; color: #5a6470; line-height: 1.5; margin-bottom: 14px; } .pref-btn-danger { background: #dc2626 !important; color: #fff !important; border: none !important; } .pref-btn-danger:active { background: #b91c1c !important; opacity: .95; } /* Bouton valider */ .pref-btn, .app-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #2489ce, #1a6faa); color: #fff; border-radius: 50px; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(36,137,206,.35); -webkit-tap-highlight-color: transparent; margin-top: 6px; } .pref-btn:active, .app-submit-btn:active { opacity: .85; } .pref-btn-icon, .app-submit-btn-icon { font-size: 20px; color: #fff; } /* Radio notifications */ .pref-radio-group { display: flex; flex-direction: column; gap: 0; } .pref-radio-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 11px 4px !important; border-bottom: 1px solid #f0f0f0 !important; cursor: pointer !important; font-size: 14px !important; color: #333 !important; background: none !important; margin: 0 !important; } .pref-radio-row:last-child { border-bottom: none !important; } .pref-radio-row input[type=radio][data-role="none"] { display: inline-block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; accent-color: #2489ce !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; -webkit-appearance: auto !important; appearance: auto !important; border: none !important; box-shadow: none !important; background: none !important; cursor: pointer !important; } /* Notifications — lignes toggle (push mobile / récap quotidien) */ .pref-toggle-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 13px 2px !important; border-bottom: 1px solid #f0f0f0 !important; } .pref-toggle-row:last-child { border-bottom: none !important; } .pref-toggle-label { flex: 1; font-size: 14px; color: #2c3e50; line-height: 1.35; } .pref-toggle-label small { display: block; font-size: 12px; color: #8a96a3; margin-top: 2px; font-weight: 400; } .pref-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; margin: 0; } .pref-switch input[type=checkbox] { opacity: 0; width: 0; height: 0; position: absolute; margin: 0; } .pref-switch .pref-slider { position: absolute; inset: 0; background: #cbd2da; border-radius: 26px; cursor: pointer; transition: background .2s; } .pref-switch .pref-slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; } .pref-switch input[type=checkbox]:checked + .pref-slider { background: var(--y-accent, #2489ce); } .pref-switch input[type=checkbox]:checked + .pref-slider:before { transform: translateX(20px); } /* Langue — pill buttons */ .pref-card-lang { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; gap: 10px; } .pref-card-lang .pref-card-title { margin-bottom: 0; flex: 1; } .pref-lang-group { display: flex; gap: 8px; } .pref-lang-btn { width: 52px; height: 38px; border-radius: 19px; border: 1px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; cursor: pointer; color: #555; -webkit-tap-highlight-color: transparent; } .pref-lang-btn.pref-lang-active { background: #2489ce; color: #fff; border-color: #2489ce; } /* ── Bouton retour dans la liste participants ──────────────────────────── */ .part-back-btn { display: inline-flex; align-items: center; gap: 6px; color: #2489ce; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0 12px; -webkit-tap-highlight-color: transparent; } .part-back-btn i { font-size: 16px; } /* ══════════════════════════════════════════════════════════════════════════ Page Support ══════════════════════════════════════════════════════════════════════════ */ .support-page { max-width: 500px; margin: 0 auto; padding: 20px 14px; display: flex; flex-direction: column; gap: 16px; } /* Intro */ .support-intro { display: flex; align-items: flex-start; gap: 14px; background: #f0f7ff; border-radius: 12px; padding: 16px; border: 1px solid #cde; } .support-intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; } .support-intro-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 3px; } .support-intro-sub { font-size: 13px; color: #666; } /* Textarea */ .support-textarea { width: 100% !important; box-sizing: border-box !important; border: 1px solid #ddd !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important; line-height: 1.5 !important; min-height: 130px !important; resize: vertical !important; background: #fafafa !important; color: #333 !important; -webkit-appearance: none !important; font-family: inherit !important; } .support-textarea:focus { border-color: #2489ce !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(36,137,206,.15) !important; } /* Bouton envoyer */ /* support-send-btn = alias of app-submit-btn */ .support-send-btn { display: flex; align-items: center; justify-content: space-between; background: #2489ce; color: #fff; border-radius: 24px; padding: 11px 20px; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .support-send-btn:active { background: #1a6faa; } .support-send-icon { font-size: 20px; color: #fff; } /* Lien FAQ */ .support-faq-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-radius: 10px; border: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: pointer; color: #2489ce; font-size: 14px; font-weight: 600; -webkit-tap-highlight-color: transparent; } .support-faq-icon { font-size: 18px; flex-shrink: 0; } .support-faq-chevron { margin-left: auto; font-size: 14px; color: #ccc; } /* ══════════════════════════════════════════════════════════════════════════ Page FAQ ══════════════════════════════════════════════════════════════════════════ */ .faq-page { max-width: 500px; margin: 0 auto; padding: 14px 12px; } .faq-item { background: #fff; border-radius: 10px; border: 1px solid #eee; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; -webkit-tap-highlight-color: transparent; } .faq-question:active { background: #f5f9ff; } .faq-chevron { font-size: 13px; color: #aaa; flex-shrink: 0; transition: transform 0.2s ease; } .faq-answer { padding: 0 16px 14px; font-size: 14px; color: #555; line-height: 1.6; border-top: 1px solid #f0f0f0; } /* ── Overlay nouvelle dépense ─────────────────────────────────────────── */ .compta-overlay-title { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } /* ── Sélecteur payeur dépense ─────────────────────────────────────────── */ .compta-payeur-row { display: flex; align-items: center; gap: 10px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; margin: 6px 0; } .compta-payeur-label { font-size: 14px; color: #555; flex-shrink: 0; } .compta-payeur-select { flex: 1; border: none !important; background: transparent !important; font-size: 14px !important; color: #333 !important; -webkit-appearance: auto !important; appearance: auto !important; padding: 0 !important; margin: 0 !important; outline: none !important; } /* ══════════════════════════════════════════════════════════════════════════ Formulaire modification dépense — REDESIGN (updep2-*) Card-based, cohérent avec pref-card / papp-card. Préfixe "updep2-" pour cohabiter avec l'ancien CSS .updep- (transitoire). ══════════════════════════════════════════════════════════════════════════ */ .updep2-wrap { max-width: 520px; margin: 0 auto; padding: 10px 14px 96px; /* padding-bottom pour le CTA fixe */ box-sizing: border-box; font-family: inherit; } .updep2-topbar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 14px; } .updep2-topbar-title { flex: 1; font-size: 17px; font-weight: 700; color: #1a1a2e; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .updep2-back, .updep2-delete { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .12s, color .15s; font-size: 16px; } .updep2-back { background: var(--y-accent-soft, rgba(36,137,206,.1)); color: var(--y-accent, #2489ce); } .updep2-back:active { background: var(--y-accent-soft, rgba(36,137,206,.22)); filter: brightness(.96); transform: scale(.92); } .updep2-delete { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .updep2-delete:active { background: #dc2626; color: #fff; transform: scale(.92); } .updep2-card { background: #fff; border-radius: 16px; border: 1px solid #eef2f6; box-shadow: 0 2px 10px rgba(0,0,0,.04); padding: 16px 16px 14px; margin: 0 0 12px; box-sizing: border-box; } .updep2-card:last-of-type { margin-bottom: 0; } .updep2-label { display: block; font-size: 11px; font-weight: 700; color: #8a96a3; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 8px 2px; } .updep2-input { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid #e0e6ec; background: #f6f8fb; padding: 12px 14px; font-size: 15px; color: #1a1a2e; outline: none; -webkit-appearance: none; font-family: inherit; line-height: 1.3; transition: border-color .15s, background .15s, box-shadow .15s; } .updep2-input:focus { border-color: var(--y-accent, #2489ce); background: #fff; box-shadow: 0 0 0 3px var(--y-accent-soft, rgba(36,137,206,.12)); } .updep2-input-title { margin-bottom: 14px; } .updep2-amount-row { display: flex; align-items: center; gap: 8px; } .updep2-input-amount { flex: 1; min-width: 0; font-size: 22px !important; font-weight: 700; text-align: right; letter-spacing: -.5px; } .updep2-currency { font-size: 17px; font-weight: 700; color: var(--y-accent, #2489ce); padding: 0 4px; min-width: 28px; text-align: center; flex-shrink: 0; } /* Payeur : on style le select natif rendu par displayComptaSelectPayeur */ .updep2-payeur-host .compta-payeur-row { background: #f6f8fb; border: 1px solid #e0e6ec; border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; align-items: center; gap: 10px; position: relative; /* ancre la flèche ::after en YouTim color */ } /* Chevron généré en CSS pur (border-triangle) sur le wrapper — permet d'utiliser var(--y-accent) qu'un fill d'SVG inline ne supporte pas. pointer-events:none pour que le tap traverse jusqu'au