/* =========================================================================== software_mobile.css --------------------------------------------------------------------------- Barre d'outils du logiciel optique (#software-toolbar) sur ecran etroit. La barre est construite en JavaScript par optical_calculation_MCP_2LLMs_uiMod/assets/js/ui_handler/renderers/form_display.js Aucun des conteneurs n'a de classe : ils sont donc cibles par leur position. STRUCTURE (mesures a 800px) #software-toolbar > div > div conteneur flex, nowrap > div:nth-child(1) 332px roll back / forward / save / Input data / Catalogs > div:nth-child(2) 438px 2D Ray Tracing ... More DEUX PALIERS <= 1449px Les deux groupes sont rapproches, separes par un filet vertical. <= 991px Le second groupe passe sur sa propre ligne, le filet devient horizontal au-dessus. A INCLURE APRES software_toolbar_and_modal.css, sinon les regles de ce dernier l'emportent a specificite egale. Appele par css/cssSoftwareMobile.php =========================================================================== */ /* =========================================================================== 1. LARGEUR DU DOCUMENT ET RAPPROCHEMENT DES GROUPES <= 1449px --------------------------------------------------------------------------- Deux causes cumulees faisaient sortir les boutons de sortie de l'ecran : 1. css/default.css applique min-width:1450px a #content des 992px. Mesures a 1000px d'ecran : scrollWidth 1450, barre a 1420px. 2. Le conteneur porte justify-content:space-between, qui ecarte les deux groupes aux extremites de ces 1420px : le second commencait a 917px, hors des 1000 visibles. On neutralise le minimum et on colle les groupes l'un a l'autre. =========================================================================== */ @media (max-width: 1449px) { #content { min-width: 0 !important; max-width: 100vw; } /* La neutralisation du min-width reste a 1449px : default.css l'impose des 992px, et sans elle la page deborderait entre 1100 et 1449. Seule la disposition de la barre remonte a 1099. */ } @media (max-width: 1099px) { #software-toolbar > div > div { justify-content: flex-start !important; flex-wrap: wrap; gap: 12px; row-gap: 10px; max-width: 100%; } #software-toolbar > div > div > div { flex: 0 1 auto; } /* Filet vertical entre les entrees et les sorties : les deux groupes restent compacts, mais la frontiere entre ce qu'on saisit et ce qu'on calcule reste lisible. */ #software-toolbar > div > div > div:nth-child(2) { border-left: 5px solid #002C64; padding-left: 18px; margin-left: 10px; } /* Les boutons gardent leur largeur de libelle : pas de distorsion. */ #software-toolbar button { flex: 0 0 auto; white-space: nowrap; } } /* =========================================================================== 2. SECOND GROUPE SUR SA PROPRE LIGNE <= 991px --------------------------------------------------------------------------- Ce bloc vient APRES le precedent : a specificite egale, c'est lui qui l'emporte sous 991px. =========================================================================== */ @media (max-width: 991px) { /* Le conteneur autorise le retour a la ligne. */ #software-toolbar > div > div { flex-wrap: wrap; row-gap: 10px; } /* Groupe 1 : controles et menus d'entree. */ #software-toolbar > div > div > div:nth-child(1) { flex: 0 0 auto; flex-wrap: wrap; } /* Groupe 2 : boutons de sortie, sur leur propre ligne. flex-basis:100% force le saut ; flex-wrap permet aux boutons de s'organiser sur plusieurs lignes si necessaire. Le groupe n'etant plus a droite du premier, le filet vertical perd son sens : il devient un filet horizontal au-dessus. */ #software-toolbar > div > div > div:nth-child(2) { flex: 0 0 100%; flex-wrap: wrap; border-left: none; border-top: 2px solid #dee2e6; padding-left: 0; padding-top: 10px; margin-left: 0; } /* Pas de distorsion : chaque bouton garde sa largeur de libelle. */ #software-toolbar button { flex: 0 0 auto; white-space: nowrap; } } /* =========================================================================== BARRE D'OUTILS DANS L'INTERFACE IA --------------------------------------------------------------------------- L'interface IA (optical_calculation_MCP_2LLMs_uiMod/interface.php) affiche la meme barre que le logiciel, mais dans #text_output.output-block et non dans #software-toolbar : les regles du haut de ce fichier ne l'atteignent pas. Structure identique cependant : #text_output > div > div conteneur flex, space-between > div 367px roll back / forward / save / Input data / Catalogs > div 483px 2D Ray Tracing ... More Memes seuils et meme rendu que dans le logiciel. =========================================================================== */ @media (max-width: 1099px) { #text_output > div > div:has(> div button) { justify-content: flex-start !important; flex-wrap: wrap; gap: 12px; row-gap: 10px; max-width: 100%; } #text_output > div > div:has(> div button) > div { flex: 0 1 auto; } /* Filet vertical entre les entrees et les sorties. :has(button) restreint la regle au conteneur qui porte reellement les boutons : sans lui, le selecteur touchait aussi le bandeau "TOPIC" et y dessinait un trait. */ #text_output > div > div:has(> div button) > div:nth-child(2) { border-left: 3px solid #002C64; padding-left: 18px; margin-left: 10px; } #text_output button { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 991px) { #text_output > div > div:has(> div button) { flex-wrap: wrap; row-gap: 10px; } #text_output > div > div:has(> div button) > div:nth-child(1) { flex: 0 0 auto; flex-wrap: wrap; } /* Le groupe des sorties passe sur sa propre ligne ; le filet vertical devient horizontal au-dessus. */ #text_output > div > div:has(> div button) > div:nth-child(2) { flex: 0 0 100%; flex-wrap: wrap; border-left: none; border-top: 2px solid #dee2e6; padding-left: 0; padding-top: 12px; margin-left: 0; } } /* =========================================================================== PAGE "Save / Restore" --------------------------------------------------------------------------- Mesures a 780px : champ "file name" : size="40" lui impose 391px dans un bloc de 320 (paddings de 20px compris) -- il deborde de 92px. rangee des blocs : de 65 a 765, soit 50px de decalage vers la gauche. =========================================================================== */ /* Le champ suit la largeur de son bloc au lieu de son attribut size="40", qui lui imposait 391px dans un bloc de 320. max-width le borne a 320px : sur grand ecran, le bloc s'elargit mais le champ n'a pas besoin de suivre -- un nom de fichier n'exige pas plus. */ body.oc-page-saverestore #content .alert input[type="text"] { width: 100%; max-width: 320px; box-sizing: border-box; } /* La rangee des trois blocs se centre dans la page. */ body.oc-page-saverestore #content .row { margin-left: 0 !important; margin-right: 0 !important; justify-content: center; } /* Le .col-12.ps-2 porte le padding gauche de Bootstrap sans compensation : 80px a gauche contre 30 a droite, et le .row interieur herite du decalage (95 / 45). On l'annule et on elargit les blocs, la marge etant importante a 780px. Ces regles viennent apres le bloc precedent : elles le completent. */ body.oc-page-saverestore #content .col-12.ps-2 { padding-left: 0 !important; padding-right: 0 !important; } /* Les blocs passent de 50% a 48% avec un ecart reduit : ils gagnent une trentaine de pixels chacun. */ body.oc-page-saverestore #content .row > .col-6 { flex: 0 0 49% !important; max-width: 49% !important; padding-left: 6px !important; padding-right: 6px !important; } /* Un .row de la chaine porte padding-left:50px en style inline, sans compensation a droite : tout le contenu est decale de 50px. Un style inline bat toute regle externe, d'ou le !important. */ body.oc-page-saverestore #content .row[style*="padding-left"] { padding-left: 0 !important; }