1
0
Fork 0

Cosmetic + reorganisation css edit formation

This commit is contained in:
Emmanuel Viennet 2024-03-24 08:27:09 +01:00 committed by Iziram
parent f493ba344f
commit 7c61dd8d63
5 changed files with 406 additions and 297 deletions

View File

@ -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
<span>
{ ', '.join( f'{niveau.competence.titre} {niveau.ordre}'
len(niveaux)} niveaux sans UEs&nbsp;:
<span class="niveau-nom"><span>
{ '</span>, <span>'.join( f'{niveau.competence.titre} {niveau.ordre}'
for niveau in niveaux
)
}

View File

@ -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",

View File

@ -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:not(.multiselect-active-item-fallback):active,
.multiselect-container
.multiselect-group.active:not(.multiselect-active-item-fallback),
.multiselect-container
.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 {
.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),
.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,
.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
.multiselect-container .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(
45deg,
background: repeating-linear-gradient(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) */
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;
}
/* Presentation formation (ue_table) */
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;
padding-bottom: 1px;
/* Adjust space between emoji and text */
}
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(
-45deg,
background-image: repeating-linear-gradient(-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
top 0px;
background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left top 0px;
}
div.apo_csv_status_missing_elems {
background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left
top 0px;
background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left 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;

217
app/static/css/ue_table.css Normal file
View File

@ -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;
}

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB