Cosmetic + reorganisation css edit formation

app/but/cursus_but.py

@@ -542,9 +542,9 @@ def formation_semestre_niveaux_warning(formation: Formation, semestre_idx: int)
     for parcour_code, niveaux in niveaux_sans_ue_by_parcour.items():
         H.append(
             f"""<li>Parcours {parcour_code} : {
-            len(niveaux)} niveaux sans UEs
+            len(niveaux)} niveaux sans UEs&nbsp;:
-            <span>
+            <span class="niveau-nom"><span>
-            { ', '.join( f'{niveau.competence.titre} {niveau.ordre}'
+            { '</span>, <span>'.join( f'{niveau.competence.titre} {niveau.ordre}'
                     for niveau in niveaux
                     )
             }

app/scodoc/sco_edit_ue.py

@@ -756,7 +756,7 @@ def ue_table(formation_id=None, semestre_idx=1, msg=""):  # was ue_list
     H = [
         html_sco_header.sco_header(
             cssstyles=html_sco_header.BOOTSTRAP_MULTISELECT_CSS
-            + ["libjs/jQuery-tagEditor/jquery.tag-editor.css"],
+            + ["libjs/jQuery-tagEditor/jquery.tag-editor.css", "css/ue_table.css"],
             javascripts=html_sco_header.BOOTSTRAP_MULTISELECT_JS
             + [
                 "libjs/jinplace-1.2.1.min.js",

app/static/css/scodoc.css

@@ -52,8 +52,10 @@ div.sco-app-content {
   display: flex;
   flex-direction: column;
 }
+
 div.scobox {
-  flex: 1 0 0; /* Equal width for all boxes */
+  flex: 1 0 0;
+  /* Equal width for all boxes */
   max-width: var(--sco-content-max-width);
   /* margin: 5px; Optional: Add margin between boxes */
 
@@ -65,18 +67,22 @@ div.scobox {
   border: 1px solid #c5b4b2;
   border-radius: 8px;
 }
+
 div.scobox.explanation {
   background-color: var(--sco-color-background);
 }
+
 div.scobox div.scobox-title {
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 div.scobox-buttons {
   margin-top: 16px;
   margin-bottom: 4px;
 }
+
 div.scobox-buttons input {
   font-size: 110%;
 }
@@ -89,33 +95,32 @@ div.scobox-etud {
 .multiselect-container.dropdown-menu {
   background-color: #e9e9e9;
 }
+
 .multiselect-container label.form-check-label {
   font-weight: normal;
   margin-left: 8px;
 }
+
 button.multiselect-option {
   width: 100%;
   text-align: left;
   border: none;
 }
+
 .multiselect-container button.multiselect-option span.form-check {
   padding-left: 2px;
 }
+
 .multiselect-container span.multiselect-group {
   font-weight: bold;
 }
-.multiselect-container
+
-  .multiselect-all.active:not(.multiselect-active-item-fallback),
+.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),
-.multiselect-container
+.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,
-  .multiselect-all:not(.multiselect-active-item-fallback):active,
+.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
-.multiselect-container
+.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,
-  .multiselect-group.active:not(.multiselect-active-item-fallback),
+.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),
-.multiselect-container
+.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active {
-  .multiselect-group:not(.multiselect-active-item-fallback):active,
-.multiselect-container
-  .multiselect-option.active:not(.multiselect-active-item-fallback),
-.multiselect-container
-  .multiselect-option:not(.multiselect-active-item-fallback):active {
   background-color: #e9e9e9;
 }
 
@@ -663,11 +668,13 @@ div.scobox.news {
   font-size: 10pt;
   background-color: rgb(255, 235, 170);
 }
+
 div.news a,
 div.news a.stdlink {
   color: black;
   text-decoration: none;
 }
+
 div.news a:hover {
   color: rgb(153, 51, 51);
   text-decoration: underline;
@@ -687,6 +694,7 @@ span.newsdate {
 span.newstext {
   font-style: normal;
 }
+
 /* div.news {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 10pt;
@@ -954,15 +962,18 @@ div.section_but {
   align-items: flex-end;
   justify-content: space-evenly;
 }
+
 div.fiche_but_col2 {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
+
 div.fiche_total_etcs {
   font-weight: bold;
   margin-top: 16px;
 }
+
 div.section_but>div.link_validation_rcues {
   align-self: center;
   text-align: center;
@@ -1039,6 +1050,7 @@ a.etudlink,
 a.etud:visited {
   color: red;
 }
+
 a.etudlink:hover {
   text-decoration: underline;
 }
@@ -1151,6 +1163,7 @@ a.discretelink:visited {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
+
 table.gt_table a.discretelink,
 table.gt_table a.discretelink:visited {
   text-decoration: none;
@@ -1176,6 +1189,7 @@ a.discretelink:hover {
 .help {
   max-width: var(--sco-content-max-width);
 }
+
 .help {
   font-style: italic;
 }
@@ -1195,18 +1209,22 @@ div.sco_help {
   border: 1px solid grey;
   max-width: var(--sco-content-max-width);
 }
+
 div.sco_help {
   font-style: italic;
   background-color: rgb(209, 255, 214);
 }
+
 div.sco_box_title {
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 .sco_green_bg {
   background-color: rgb(155, 218, 155);
 }
+
 .sco_lightgreen_bg {
   background-color: rgb(209, 255, 214);
 }
@@ -1219,6 +1237,7 @@ span.wtf-field ul.errors li,
 span.wtf-field-error {
   color: red;
 }
+
 div.wtf-error-messages {
   color: red;
   font-size: 110%;
@@ -1380,9 +1399,11 @@ tr.etuddem td {
   color: rgb(100, 100, 100);
   font-style: italic;
 }
+
 table.gt_table tr.etuddem td a {
   color: red;
 }
+
 table.gt_table tr.etuddem td.etudinfo:first-child::after {
   color: red;
   content: " (dém.)";
@@ -1457,9 +1478,11 @@ span.eval_title {
   font-size: 14pt;
 }
 
-#evaluation-edit-blocked td, #evaluation-edit-coef td {
+#evaluation-edit-blocked td,
+#evaluation-edit-coef td {
   padding-top: 24px;
 }
+
 /* #saisie_notes span.eval_title {
     border-bottom: 1px solid rgb(100,100,100);
 }
@@ -1791,12 +1814,15 @@ table.formsemestre_status {
 tr.formsemestre_status {
   background-color: rgb(90%, 90%, 90%);
 }
+
 table.formsemestre_status tr td:first-child {
   padding-left: 4px;
 }
+
 table.formsemestre_status tr td:last-child {
   padding-right: 8px;
 }
+
 tr.formsemestre_status_green {
   background-color: #eff7f2;
 }
@@ -1804,11 +1830,15 @@ tr.formsemestre_status_green {
 tr.modimpl_non_conforme td {
   background-color: #ffc458;
 }
-tr.modimpl_non_conforme td, tr.modimpl_attente td {
+
+tr.modimpl_non_conforme td,
+tr.modimpl_attente td {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-tr.modimpl_has_blocked span.nb_evals_blocked, tr span.evals_attente {
+
+tr.modimpl_has_blocked span.nb_evals_blocked,
+tr span.evals_attente {
   background-color: yellow;
   border-radius: 4px;
   font-weight: bold;
@@ -1816,13 +1846,16 @@ tr.modimpl_has_blocked span.nb_evals_blocked, tr span.evals_attente {
   padding-left: 4px;
   padding-right: 4px;
 }
+
 tr.modimpl_has_blocked span.nb_evals_blocked {
   color: red;
 }
+
 tr span.evals_attente {
   background-color: orange;
   color: green;
 }
+
 table.formsemestre_status a.redlink {
   text-decoration: none;
 }
@@ -1948,6 +1981,7 @@ ul.ue_inscr_list li.etud {
   padding: 16px;
   width: fit-content;
 }
+
 .sem-groups-abs h4 {
   font-style: italic;
   margin-bottom: 0px;
@@ -1958,6 +1992,7 @@ ul.ue_inscr_list li.etud {
   margin-left: 4px;
   font-size: 110%;
 }
+
 .sem-groups-partition {
   background-color: rgb(213, 203, 183);
   border-radius: 12px;
@@ -1967,12 +2002,15 @@ ul.ue_inscr_list li.etud {
   grid-template-columns: 240px auto;
 }
 
-.sem-groups-partition .stdlink, .sem-groups-partition .stdlink:visited {
+.sem-groups-partition .stdlink,
+.sem-groups-partition .stdlink:visited {
   color: black;
   text-decoration-style: dotted;
   text-underline-offset: 3px;
 }
-.sem-groups-list .stdlink,  .sem-groups-list .stdlink:visited {
+
+.sem-groups-list .stdlink,
+.sem-groups-list .stdlink:visited {
   color: rgb(0, 0, 192);
 }
 
@@ -1986,6 +2024,7 @@ ul.ue_inscr_list li.etud {
 .sem-groups-list>div {
   margin: 4px;
 }
+
 .sem-groups-assi>div {
   margin: 6px 8px 6px 8px;
 }
@@ -2113,7 +2152,8 @@ th.moduleimpl_evaluations a:hover {
   text-decoration: underline;
 }
 
-tr.mievr_in.evaluation_blocked th.moduleimpl_evaluation_moy span, tr.evaluation_blocked th.moduleimpl_evaluation_moy a {
+tr.mievr_in.evaluation_blocked th.moduleimpl_evaluation_moy span,
+tr.evaluation_blocked th.moduleimpl_evaluation_moy a {
   font-weight: bold;
   color: red;
   background-color: yellow;
@@ -2125,11 +2165,15 @@ tr.mievr {
   background-color: #eeeeee;
 }
 
-tr.mievr_rattr, tr.mievr_session2,  tr.mievr_bonus {
+tr.mievr_rattr,
+tr.mievr_session2,
+tr.mievr_bonus {
   background-color: #dddddd;
 }
 
-span.mievr_rattr, span.mievr_session2, span.mievr_bonus {
+span.mievr_rattr,
+span.mievr_session2,
+span.mievr_bonus {
   display: inline-block;
   font-weight: bold;
   font-size: 80%;
@@ -2166,20 +2210,21 @@ tr.mievr td {
 tr.mievr.non_visible_inter td,
 tr.mievr.non_visible_inter th {
   /* background-color: #d2cdc5; */
-  background: repeating-linear-gradient(
+  background: repeating-linear-gradient(45deg,
-    45deg,
       #f0f0f0,
       #f0f0f0 10px,
       #e0e0e0 10px,
-    #e0e0e0 20px
+      #e0e0e0 20px);
-  );
 }
 
-tr.mievr_tit.evaluation_blocked td,tr.mievr_tit.evaluation_blocked th {
+tr.mievr_tit.evaluation_blocked td,
+tr.mievr_tit.evaluation_blocked th {
   background-image: radial-gradient(#bd7777 1px, transparent 1px);
   background-size: 10px 10px;
 }
-tr.mievr_in.evaluation_blocked td, tr.mievr_in.evaluation_blocked th {
+
+tr.mievr_in.evaluation_blocked td,
+tr.mievr_in.evaluation_blocked th {
   background-color: rgb(195, 235, 255);
   padding-top: 4px;
 }
@@ -2266,8 +2311,7 @@ span.eval_coef_ue {
   margin-right: 2em;
 }
 
-span.eval_coef_ue_titre {
+span.eval_coef_ue_titre {}
-}
 
 /* Inscriptions modules/UE */
 div.list_but_ue_inscriptions {
@@ -2413,6 +2457,7 @@ table.formation_list_table td.buttons span.but_placeholder {
 .formation_list_table td.titre {
   width: 45%;
 }
+
 .formation_list_table td.commentaire {
   font-style: italic;
 }
@@ -2421,52 +2466,14 @@ table.formation_list_table td.buttons span.but_placeholder {
   font-size: 90%;
 }
 
-/* Presentation formation (ue_list) */
+/* Presentation formation (ue_table) */
-div.formation_descr {
-  background-color: rgb(250, 250, 240);
-  border: 1px solid rgb(128, 128, 128);
-  padding-left: 5px;
-  padding-bottom: 5px;
-  margin-right: 12px;
-}
 
-div.formation_descr span.fd_t {
-  font-weight: bold;
-  margin-right: 5px;
-}
-
-div.formation_descr span.fd_n {
-  font-weight: bold;
-  font-style: italic;
-  color: green;
-  margin-left: 6em;
-}
 
 span.explication {
   font-style: italic;
   color: var(--sco-color-explication);
 }
 
-div.formation_ue_list {
-  border: 1px solid black;
-  background-color: rgb(232, 249, 255);
-  margin-top: 5px;
-  margin-right: 12px;
-  padding-left: 5px;
-}
-
-div.formation_list_ues_titre {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 24px;
-  padding-right: 24px;
-  font-size: 120%;
-  font-weight: bold;
-  border-top-right-radius: 18px;
-  border-top-left-radius: 18px;
-  background-color: #0051a9;
-  color: #eee;
-}
 
 div.formation_semestre_niveaux_warning {
   font-weight: bold;
@@ -2478,188 +2485,24 @@ div.formation_semestre_niveaux_warning {
   background-color: yellow;
   border-radius: 8px;
 }
+
 div.formation_semestre_niveaux_warning div {
   color: black;
   font-size: 110%;
 }
+
 div.formation_semestre_niveaux_warning ul {
   list-style-type: none;
   padding-left: 0;
 }
+
 div.formation_semestre_niveaux_warning ul li:before {
   content: '⚠️';
-  margin-right: 10px; /* Adjust space between emoji and text */
-}
-
-div.formation_list_modules,
-div.formation_list_ues {
-  border-radius: 18px;
-  margin-left: 10px;
   margin-right: 10px;
-  margin-bottom: 10px;
+  /* Adjust space between emoji and text */
-  padding-bottom: 1px;
 }
 
-div.formation_list_ues {
-  background-color: #b7d2fa;
-  margin-top: 20px;
-}
 
-div.formation_list_ues_content {
-  margin-top: 4px;
-}
-
-div.formation_list_modules {
-  margin-top: 20px;
-}
-
-div.formation_list_modules_RESSOURCE {
-  background-color: var(--sco-color-ressources);
-}
-
-div.formation_list_modules_SAE {
-  background-color: var(--sco-color-saes);
-}
-
-div.formation_list_modules_STANDARD {
-  background-color: var(--sco-color-mod-std);
-}
-
-div.formation_list_modules_titre {
-  padding-left: 24px;
-  padding-right: 24px;
-  font-weight: bold;
-  font-size: 120%;
-}
-
-div.formation_list_ues ul.notes_module_list {
-  margin-top: 0px;
-  margin-bottom: -1px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-div.formation_list_modules ul.notes_module_list {
-  margin-top: 0px;
-  margin-bottom: -1px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-span.missing_ue_ects {
-  color: red;
-  font-weight: bold;
-}
-
-li.module_malus span.formation_module_tit {
-  color: red;
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-span.invalid-module-type {
-  color: red;
-  font-style: italic;
-}
-
-span.formation_module_ue {
-  color: #6e7d92;
-  font-size: 75%;
-}
-
-span.notes_module_list_buts {
-  margin-right: 5px;
-}
-
-.formation_apc_infos ul li:not(:last-child) {
-  margin-bottom: 6px;
-}
-
-div.formation_parcs {
-  display: inline-flex;
-  margin-left: 8px;
-  margin-right: 8px;
-  column-gap: 8px;
-}
-
-div.formation_parcs > div {
-  font-size: 100%;
-  color: white;
-  background-color: #09c;
-  opacity: 0.7;
-  border-radius: 4px;
-  text-align: center;
-  padding: 2px 6px;
-  margin-top: 8px;
-  margin-bottom: 2px;
-}
-div.formation_parcs > div.ue_tc {
-  color: black;
-  font-style: italic;
-}
-
-div.formation_parcs > div.focus {
-  opacity: 1;
-}
-
-div.formation_parcs > div > a:hover {
-  color: #ccc;
-}
-
-div.formation_parcs > div > a,
-div.formation_parcs > div > a:visited {
-  color: white;
-}
-
-div.ue_choix_niveau > div.formation_parcs > div {
-  font-size: 80%;
-}
-
-div.ue_list_tit {
-  font-weight: bold;
-  margin-top: 8px;
-}
-
-div.ue_list_tit form {
-  display: inline-block;
-}
-
-div.ue_list_tit span.lock_info {
-  color: red;
-  margin-left: 8px;
-}
-
-ul.apc_ue_list {
-  background-color: rgba(180, 189, 191, 0.14);
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-ul.notes_ue_list {
-  margin-top: 4px;
-  margin-right: 1em;
-  margin-left: 1em;
-  /* padding-top: 1em; */
-  padding-bottom: 1em;
-  font-weight: bold;
-}
-
-.formation_classic_infos ul.notes_ue_list {
-  padding-top: 0px;
-}
-
-.formation_classic_infos li.notes_ue_list {
-  margin-top: 9px;
-  list-style-type: none;
-  border: 1px solid maroon;
-  border-radius: 10px;
-  padding-bottom: 5px;
-}
-
-span.ue_type_1 {
-  color: green;
-  font-weight: bold;
-}
 
 span.ue_code {
   font-family: Courier, monospace;
@@ -3235,17 +3078,21 @@ a.bull_link:hover {
 div.bulletin_menubar {
   padding-left: 25px;
 }
+
 div.bull_titre_semestre {
   margin-top: 8px;
   margin-bottom: 8px;
   font-size: 120%;
 }
+
 div.bull_titre_semestre .parcours {
   margin-left: 12px;
 }
+
 .bull_liensemestre {
   font-weight: bold;
 }
+
 .bull_liensemestre a {
   color: rgb(255, 0, 0);
   text-decoration: none;
@@ -3414,7 +3261,8 @@ div.formsemestre-warning-box {
   /* padding-bottom: 1px; */
 }
 
-.warning, .warning-bloquant {
+.warning,
+.warning-bloquant {
   color: red;
   margin-left: 16px;
   margin-bottom: 8px;
@@ -3737,13 +3585,11 @@ table.recap_hide_details tr.sem_precedent td.ue_acro span {
 }
 
 .recap_parcours tr.sem_autre_formation td.rcp_titre_sem {
-  background-image: repeating-linear-gradient(
+  background-image: repeating-linear-gradient(-45deg,
-    -45deg,
       rgb(100, 205, 193),
       rgb(100, 205, 193) 2px,
       transparent 5px,
-    transparent 40px
+      transparent 40px);
-  );
 }
 
 .rcp_l2 td {
@@ -3847,10 +3693,12 @@ span.sp_etape {
   font-weight: bold;
   color: rgb(1, 76, 1) !important;
 }
+
 .inscrit-ailleurs {
   font-weight: bold;
   color: red !important;
 }
+
 div.etuds_select_boxes {
   margin-bottom: 16px;
 }
@@ -4068,6 +3916,7 @@ table.formsemestre_enseignants_list tbody tr td.nbabsadded {
   text-align: right;
   padding-right: 1em;
 }
+
 /* ----------------------------- */
 
 div.form_rename_partition {
@@ -4227,13 +4076,11 @@ div.apo_csv_status span {
 }
 
 div.apo_csv_status_nok {
-  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left
+  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left top 0px;
-    top 0px;
 }
 
 div.apo_csv_status_missing_elems {
-  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left
+  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left top 0px;
-    top 0px;
   padding-left: 22px;
 }
 
@@ -4814,6 +4661,7 @@ table.table_recap th.col_malus {
   font-weight: bold;
   color: rgb(165, 0, 0);
 }
+
 table.table_recap td.col_eval_bonus,
 table.table_recap th.col_eval_bonus {
   color: #90c;

app/static/css/ue_table.css

@@ -0,0 +1,217 @@
+div.formation_descr {
+  background-color: rgb(250, 250, 240);
+  border: 1px solid rgb(128, 128, 128);
+  padding-left: 5px;
+  padding-bottom: 5px;
+  margin-right: 12px;
+}
+
+div.formation_descr span.fd_t {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+div.formation_descr span.fd_n {
+  font-weight: bold;
+  font-style: italic;
+  color: green;
+  margin-left: 6em;
+}
+
+
+div.formation_ue_list {
+  border: 1px solid black;
+  background-color: rgb(232, 249, 255);
+  margin-top: 5px;
+  margin-right: 12px;
+  padding-left: 5px;
+}
+
+div.formation_list_ues_titre {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 24px;
+  padding-right: 24px;
+  font-size: 120%;
+  font-weight: bold;
+  border-top-right-radius: 18px;
+  border-top-left-radius: 18px;
+  background-color: #0051a9;
+  color: #eee;
+}
+
+div.formation_list_modules,
+div.formation_list_ues {
+  border-radius: 18px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding-bottom: 1px;
+}
+
+div.formation_list_ues {
+  background-color: #b7d2fa;
+  margin-top: 20px;
+}
+
+div.formation_list_ues_content {
+  margin-top: 4px;
+}
+
+div.formation_list_modules {
+  margin-top: 20px;
+}
+
+div.formation_list_modules_RESSOURCE {
+  background-color: var(--sco-color-ressources);
+}
+
+div.formation_list_modules_SAE {
+  background-color: var(--sco-color-saes);
+}
+
+div.formation_list_modules_STANDARD {
+  background-color: var(--sco-color-mod-std);
+}
+
+div.formation_list_modules_titre {
+  padding-left: 24px;
+  padding-right: 24px;
+  font-weight: bold;
+  font-size: 120%;
+}
+
+div.formation_list_ues ul.notes_module_list {
+  margin-top: 0px;
+  margin-bottom: -1px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+div.formation_list_modules ul.notes_module_list {
+  margin-top: 0px;
+  margin-bottom: -1px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+span.missing_ue_ects {
+  color: red;
+  font-weight: bold;
+}
+
+span.niveau-nom {
+  color: black;
+}
+
+span.niveau-nom>span {
+  text-decoration: dashed underline;
+}
+
+.formation_apc_infos ul li:not(:last-child) {
+  margin-bottom: 6px;
+}
+
+div.formation_parcs {
+  display: inline-flex;
+  margin-left: 8px;
+  margin-right: 8px;
+  column-gap: 8px;
+}
+
+div.formation_parcs>div {
+  font-size: 100%;
+  color: white;
+  background-color: #09c;
+  opacity: 0.7;
+  border-radius: 4px;
+  text-align: center;
+  padding: 2px 6px;
+  margin-top: 8px;
+  margin-bottom: 2px;
+}
+
+div.formation_parcs>div.ue_tc {
+  color: black;
+  font-style: italic;
+}
+
+div.formation_parcs>div.focus {
+  opacity: 1;
+}
+
+div.formation_parcs>div>a:hover {
+  color: #ccc;
+}
+
+div.formation_parcs>div>a,
+div.formation_parcs>div>a:visited {
+  color: white;
+}
+
+div.ue_choix_niveau>div.formation_parcs>div {
+  font-size: 80%;
+}
+
+
+div.ue_list_tit {
+  font-weight: bold;
+  margin-top: 8px;
+}
+
+div.ue_list_tit form {
+  display: inline-block;
+}
+
+div.ue_list_tit span.lock_info {
+  color: red;
+  margin-left: 8px;
+}
+
+ul.apc_ue_list {
+  background-color: rgba(180, 189, 191, 0.14);
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+ul.notes_ue_list {
+  margin-top: 4px;
+  margin-right: 1em;
+  margin-left: 1em;
+  /* padding-top: 1em; */
+  padding-bottom: 1em;
+  font-weight: bold;
+}
+
+.formation_classic_infos ul.notes_ue_list {
+  padding-top: 0px;
+}
+
+.formation_classic_infos li.notes_ue_list {
+  margin-top: 9px;
+  list-style-type: none;
+  border: 1px solid maroon;
+  border-radius: 10px;
+  padding-bottom: 5px;
+}
+
+
+li.module_malus span.formation_module_tit {
+  color: red;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+span.invalid-module-type {
+  color: red;
+  font-style: italic;
+}
+
+span.formation_module_ue {
+  color: #6e7d92;
+  font-size: 75%;
+}
+
+span.notes_module_list_buts {
+  margin-right: 5px;
+}

app/static/icons/warning-info.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-34.1074" y1="645.6909" x2="-34.1074" y2="622.0029" gradientTransform="matrix(20.48 0 0 -20.48 954.52 13234.4395)">
+	<stop  offset="0" style="stop-color:#FF9400"/>
+	<stop  offset="1" style="stop-color:#FF5F39"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M296.182,382.792c-1.577,3.83-5.325,6.328-9.462,6.328h-20.48h-20.48h-20.48
+	c-4.137,0-7.885-2.499-9.462-6.328c-1.577-3.83-0.696-8.233,2.232-11.162l17.469-17.469V239.759l-17.469-17.49
+	c-2.929-2.929-3.809-7.332-2.232-11.162c1.577-3.83,5.325-6.308,9.462-6.308h20.48H256h10.24c5.652,0,10.24,4.567,10.24,10.24
+	v139.121l17.49,17.469C296.878,374.559,297.759,378.962,296.182,382.792 M256,122.88c16.937,0,30.72,13.763,30.72,30.72
+	c0,16.937-13.783,30.72-30.72,30.72s-30.72-13.783-30.72-30.72C225.28,136.643,239.063,122.88,256,122.88 M256,0
+	C114.852,0,0,114.831,0,256c0,141.148,114.852,256,256,256c141.169,0,256-114.852,256-256C512,114.831,397.169,0,256,0"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>