/*This is the stylesheet for the left section : progress in both the diagnostic and process registry*/ /*Don't forget to import x-rgpd.js in the */ /*to import var color from zdcoskin.css */ @import './zdcoskin.css'; /*===== PROGRESS BAR (COMPILED MODERN + LEGACY) ===== */ .section.section-progress { padding: 0 !important; border-radius: 15px; overflow: hidden; position: relative; font-size: 14px !important; } .section.section-progress .fields-group.collapsable-content .radiogroup { margin-top: 25px; } /* Remove visual header */ .section.section-progress .section-header { height: 0; overflow: hidden; } /* ===== TOTAL PROGRESS HEADER ===== */ .section.section-progress .progresstotal { background-color: var(--blue); padding: 15px; width: 100%; height: 60px; color: white !important; font-weight: bold !important; position: absolute; top: 0; left: 0; border-radius: 15px 15px 0 0; display: flex; gap: 10px; } .section.section-progress .progresstotal td { position: absolute; top: 15px; width: 90%; color: white !important;; } .section.section-progress .progresstotal label { color: white; font-weight: bold; font-size: 14px; a { text-decoration: none; } } /* Info handler (legacy support) */ .section.section-progress .progresstotal .vui-info-handler { position: absolute; top: 0; } /* ===== FIELDS GROUP ===== */ .section.section-progress .fields-group.collapsable-content { display: flex; gap: 1rem; align-items: center; margin: 0; padding: 0; } /* Hide legacy fields */ .section.section-progress .fields-prog { display: none; } /* ===== BUTTON ===== */ .section.section-progress button { text-align: left; width: 100%; display: block; margin-bottom: 1rem; background-color: transparent; position: relative; border: none; font-size: 12px; } /* ===== PROGRESS VALUE ===== */ .section.section-progress .progressval { color: var(--default-font-color); position: absolute; top: 0; right: 5px; font-size: 12px; } .section.section-progress .button-progress { margin-top: 10px; } /* ================================================================= */ /* ========== LEGACY FLEX-BASED MI-PROGRESSBAR (REINTEGRATED) ======= */ /* ================================================================= */ .mi-progressbar { display: flex; align-items: center; width: 100%; justify-content: space-between; gap: 0.5rem; } .mi-progressbar .progressbar-inner { background: rgba(120,121,140,0.2); height: 8px; width: 100%; border-radius: 10px; position: relative; overflow: hidden; } /* Larger variant */ .section.section-progress ~ .mi-progressbar .progressbar-inner.progressbar-innerbig { height: 16px; } /* Actual progress bar */ .mi-progressbar .progressbar-inner .progressbar { height: 100%; width: 0; /* controlled inline or via JS */ position: absolute; top: 0; left: 0; border-radius: 10px; background-image: var(--main-gradient); } /* Full progress override */ .mi-progressbar .progressbar-inner .progressbar.progressbar-full { background: #3CEA9A; width: 100%; } /* ================================================================= */ /* ====================== RESPONSIVE LOGIC ========================== */ /* ================================================================= */ @media (min-width: 1200px) { /* Restore desktop spacing */ #default-container .section-progress { /*! padding-left: 30px; */ } /* Buttons take full width on desktop */ .section.section-progress button { width: 100%; } } /*disagnostic: .Section.progression-questionnaire*/ .section.progression-questionnaire { margin: 0 !important; padding: 0 !important; border-radius: 15px; overflow: hidden; max-width: 250px; a { color: var(--font-color); text-decoration: none; } a:hover { color: var(--blue); } .section-header { height: 0px; overflow: hidden; } tbody { tr:first-child { background-color: var(--blue); height: 60px; } td.cell-full { padding: 10px 7px; position: relative; } } .fields-group.collapsable-content { display: flex; gap: 1rem; align-items: center; margin: 0;; padding: 0; } .progressbar { height: 10px; width: 100%; /*! margin-top: 5px; */ background-color: var(--valid-green); display: block; border-radius: 15px; } .progressval { color: var(--light-green); position: absolute; top: 10px; right: 5px; } button { text-align: left; width: 100%; display: block; margin-bottom: 1rem; background-color: transparent; position: relative; border: none; font-size: 12px; font-family: var(--font-rgpd) } .fields-prog { display: hidden; } }