/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/* ========================================================== WEBMAY - PAGE DE CONNEXION DEMO DOLIBARR Desktop + tablette + mobile ========================================================== */ /* ========================================================== CONTENEUR GENERAL ========================================================== */ .wm-demo { width: calc(100% - 30px) !important; max-width: 900px !important; margin: 32px auto 45px !important; padding: 0 !important; box-sizing: border-box !important; font-family: Arial, sans-serif !important; color: #173b5c !important; } /* ========================================================== CARTE LANGUES ========================================================== */ .wm-language-card { width: 100% !important; max-width: 100% !important; margin: 0 auto 26px !important; padding: 18px 20px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #dce4ea !important; border-radius: 10px !important; box-shadow: 0 3px 12px rgba(0,0,0,.07) !important; text-align: center !important; } /* TITRE LANGUES */ .wm-language-heading { margin: 0 0 14px !important; color: #173b5c !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: center !important; } .wm-language-heading span { margin-left: 6px !important; color: #81909e !important; font-size: 12px !important; font-weight: 400 !important; } /* ========================================================== TABLEAU DES LANGUES - DESKTOP ========================================================== */ .wm-language-table { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-collapse: separate !important; border-spacing: 8px !important; background: transparent !important; } .wm-language-table tbody, .wm-language-table tr { background: transparent !important; } .wm-language-table td { width: 25% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ========================================================== BOUTONS LANGUES ========================================================== */ .wm-language-table a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 8px 11px !important; box-sizing: border-box !important; background: #f7f9fb !important; border: 1px solid #dce4ea !important; border-radius: 7px !important; color: #173b5c !important; font-size: 12px !important; font-weight: 500 !important; line-height: 18px !important; text-decoration: none !important; white-space: nowrap !important; } .wm-language-table a:hover { background: #eef8fa !important; border-color: #10b8c8 !important; box-shadow: 0 2px 7px rgba(0,0,0,.06) !important; } .wm-language-table a strong { margin: 0 !important; padding: 0 !important; color: #173b5c !important; font-size: 12px !important; font-weight: 600 !important; line-height: 18px !important; white-space: nowrap !important; } /* ========================================================== DRAPEAUX ========================================================== */ .wm-language-table img { display: inline-block !important; flex: 0 0 27px !important; width: 27px !important; height: 18px !important; min-width: 27px !important; max-width: 27px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; vertical-align: middle !important; border-radius: 2px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.12) !important; } /* Compatibilité avec ancienne version background */ .wm-smallflag { display: inline-block !important; flex: 0 0 27px !important; width: 27px !important; height: 18px !important; min-width: 27px !important; max-width: 27px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 27px 18px !important; border-radius: 2px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.12) !important; } .wm-fr { background-image: url('/demo/custom/image/fr.svg') !important; } .wm-gb { background-image: url('/demo/custom/image/gb.svg') !important; } .wm-es { background-image: url('/demo/custom/image/es.svg') !important; } .wm-de { background-image: url('/demo/custom/image/de.svg') !important; } .wm-it { background-image: url('/demo/custom/image/it.svg') !important; } .wm-pt { background-image: url('/demo/custom/image/pt.svg') !important; } .wm-nl { background-image: url('/demo/custom/image/nl.svg') !important; } .wm-language-table .wm-empty { background: transparent !important; } /* ========================================================== PANNEAU PRINCIPAL ========================================================== */ .wm-info-box { width: 100% !important; max-width: 100% !important; padding: 30px 28px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #dce4ea !important; border-radius: 10px !important; box-shadow: 0 3px 12px rgba(0,0,0,.07) !important; text-align: center !important; } /* ========================================================== TITRE PRINCIPAL ========================================================== */ .wm-title { margin: 0 !important; color: #173b5c !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; } /* PETIT SEPARATEUR TURQUOISE */ .wm-title:after { content: "" !important; display: block !important; width: 55px !important; height: 3px !important; margin: 14px auto !important; background: #10b8c8 !important; border-radius: 3px !important; } /* SOUS-TITRE */ .wm-subtitle { max-width: 620px !important; margin: 0 auto 26px !important; color: #657788 !important; font-size: 14px !important; line-height: 1.55 !important; text-align: center !important; } /* ========================================================== ACCES A LA DEMONSTRATION ========================================================== */ .wm-access { width: 100% !important; max-width: 560px !important; margin: 0 auto 30px !important; padding: 15px 20px !important; box-sizing: border-box !important; background: #eef8fa !important; border: 1px solid #c6e6ea !important; border-radius: 8px !important; color: #173b5c !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important; } /* TITRE ACCES DEMO */ .wm-access-title { margin: 0 0 8px !important; color: #173b5c !important; font-size: 15px !important; font-weight: 700 !important; text-align: center !important; } /* IDENTIFIANTS */ .wm-credentials { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; } .wm-credentials strong { color: #173b5c !important; font-weight: 700 !important; } .wm-separator { color: #9aa8b4 !important; margin: 0 4px !important; } /* ========================================================== TITRE MODULES + SEPARATEUR ========================================================== */ .wm-modules-title { position: relative !important; margin: 0 0 18px !important; padding: 24px 0 0 !important; border-top: 1px solid #dce4ea !important; color: #718292 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; text-transform: uppercase !important; letter-spacing: .6px !important; text-align: center !important; } /* ========================================================== TABLEAU / GRILLE DES MODULES - DESKTOP ========================================================== */ .wm-modules { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Si le HTML actuel utilise un TABLE pour les modules */ .wm-info-box table { box-sizing: border-box !important; } /* CARTES MODULES */ .wm-module { min-width: 0 !important; margin: 0 !important; padding: 18px 12px !important; box-sizing: border-box !important; background: #f7f9fb !important; border: 1px solid #dce4ea !important; border-radius: 8px !important; text-align: center !important; } .wm-module strong { display: block !important; margin: 0 0 7px !important; color: #173b5c !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; word-break: normal !important; overflow-wrap: normal !important; } .wm-module span { display: block !important; margin: 0 !important; color: #687b8c !important; font-size: 12px !important; line-height: 1.45 !important; word-break: normal !important; overflow-wrap: normal !important; } /* ========================================================== MESSAGE FINAL + SEPARATEUR ========================================================== */ .wm-reset { max-width: 620px !important; margin: 28px auto 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #dce4ea !important; color: #84909b !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center !important; } /* ========================================================== TABLETTE ========================================================== */ @media screen and (max-width: 768px) { .wm-demo { width: calc(100% - 24px) !important; } .wm-language-table a { padding: 7px 8px !important; } .wm-info-box { padding: 26px 20px !important; } .wm-modules { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } /* ========================================================== MOBILE ========================================================== */ @media screen and (max-width: 600px) { /* ====================================================== CONTENEUR ====================================================== */ .wm-demo { width: calc(100% - 20px) !important; max-width: 100% !important; margin: 20px auto 30px !important; padding: 0 !important; box-sizing: border-box !important; } /* ====================================================== CARTE LANGUES ====================================================== */ .wm-language-card { width: 100% !important; max-width: 100% !important; margin: 0 auto 20px !important; padding: 16px 10px !important; box-sizing: border-box !important; overflow: hidden !important; } .wm-language-heading { margin: 0 0 14px !important; font-size: 14px !important; text-align: center !important; } .wm-language-heading span { display: block !important; margin: 3px 0 0 !important; font-size: 11px !important; } /* ====================================================== LANGUES -> 2 COLONNES ====================================================== */ .wm-language-table { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-spacing: 0 !important; } .wm-language-table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .wm-language-table tr { display: contents !important; } .wm-language-table td { display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .wm-language-table td:last-child:empty { display: none !important; } /* BOUTON LANGUE */ .wm-language-table a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; min-height: 42px !important; margin: 0 !important; padding: 7px 8px !important; box-sizing: border-box !important; font-size: 11px !important; white-space: nowrap !important; } .wm-language-table a strong { font-size: 11px !important; line-height: 16px !important; white-space: nowrap !important; } /* PETITS DRAPEAUX */ .wm-language-table img { flex: 0 0 24px !important; width: 24px !important; height: 16px !important; min-width: 24px !important; max-width: 24px !important; min-height: 16px !important; max-height: 16px !important; margin: 0 !important; object-fit: cover !important; } .wm-smallflag { flex: 0 0 24px !important; width: 24px !important; height: 16px !important; min-width: 24px !important; max-width: 24px !important; min-height: 16px !important; max-height: 16px !important; background-size: 24px 16px !important; } /* ====================================================== PANNEAU PRINCIPAL ====================================================== */ .wm-info-box { width: 100% !important; max-width: 100% !important; padding: 24px 16px !important; box-sizing: border-box !important; } /* ====================================================== TITRE PRINCIPAL ====================================================== */ .wm-title { padding: 0 4px !important; font-size: 21px !important; line-height: 1.3 !important; } .wm-title:after { width: 48px !important; margin: 14px auto !important; } .wm-subtitle { margin: 0 auto 24px !important; padding: 0 4px !important; font-size: 13px !important; line-height: 1.5 !important; } /* ====================================================== ACCES DEMO ====================================================== */ .wm-access { width: 100% !important; max-width: 100% !important; margin: 0 auto 28px !important; padding: 16px 12px !important; box-sizing: border-box !important; } .wm-access-title { margin-bottom: 8px !important; font-size: 15px !important; } .wm-credentials { display: block !important; font-size: 13px !important; line-height: 1.7 !important; text-align: center !important; } .wm-credentials > span { display: block !important; } .wm-separator { display: none !important; } /* ====================================================== TITRE MODULES ====================================================== */ .wm-modules-title { margin: 0 0 16px !important; padding: 22px 8px 0 !important; font-size: 10px !important; line-height: 1.5 !important; } /* ====================================================== MODULES -> 1 PAR LIGNE ====================================================== */ .wm-modules { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .wm-module { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 14px 15px !important; box-sizing: border-box !important; text-align: left !important; } .wm-module strong { display: block !important; margin: 0 0 4px !important; font-size: 14px !important; line-height: 1.3 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .wm-module span { display: block !important; font-size: 12px !important; line-height: 1.45 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* ====================================================== IMPORTANT : TON HTML ACTUEL UTILISE AUSSI UN TABLEAU POUR LES MODULES On le transforme en cartes verticales sur mobile. ====================================================== */ .wm-info-box > table { display: block !important; width: 100% !important; margin: 0 !important; border-spacing: 0 !important; } .wm-info-box > table > tbody { display: block !important; width: 100% !important; } .wm-info-box > table > tbody > tr { display: block !important; width: 100% !important; } .wm-info-box > table > tbody > tr > td { display: block !important; width: 100% !important; margin: 0 0 10px !important; padding: 14px 15px !important; box-sizing: border-box !important; text-align: left !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .wm-info-box > table > tbody > tr > td strong { display: block !important; margin-bottom: 4px !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .wm-info-box > table > tbody > tr > td span { display: block !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* ====================================================== MESSAGE FINAL ====================================================== */ .wm-reset { margin: 24px auto 0 !important; padding: 16px 5px 0 !important; font-size: 11px !important; line-height: 1.5 !important; } }