From a864989d05793f868b469e84576e1ee1dc490ca1 Mon Sep 17 00:00:00 2001 From: Emmanuel Viennet Date: Sat, 16 Jul 2022 14:53:52 +0200 Subject: [PATCH] =?UTF-8?q?Bul.=20BUT:=20reformat=20css=20+=20taille=20fon?= =?UTF-8?q?t=20d=C3=A9cision.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/css/releve-but.css | 302 +++++++++++++++++++++------------- 1 file changed, 187 insertions(+), 115 deletions(-) diff --git a/app/static/css/releve-but.css b/app/static/css/releve-but.css index 745b6a970..3a9abe5fa 100644 --- a/app/static/css/releve-but.css +++ b/app/static/css/releve-but.css @@ -2,57 +2,75 @@ /*******************/ /* Styles généraux */ /*******************/ -.wait{ +.wait { width: 60px; height: 6px; margin: auto; - background: #424242; /* la réponse à tout */ + background: #424242; + /* la réponse à tout */ animation: wait .4s infinite alternate; } -@keyframes wait{ - 100%{transform: translateY(40px) rotate(1turn);} + +@keyframes wait { + 100% { + transform: translateY(40px) rotate(1turn); + } } -main{ - --couleurPrincipale: rgb(240,250,255); - --couleurFondTitresUE: #b6ebff; + +main { + --couleurPrincipale: rgb(240, 250, 255); + --couleurFondTitresUE: #b6ebff; --couleurFondTitresRes: #f8c844; --couleurFondTitresSAE: #c6ffab; --couleurSecondaire: #fec; - --couleurIntense: rgb(4, 16, 159);; + --couleurIntense: rgb(4, 16, 159); + ; --couleurSurlignage: rgba(255, 253, 110, 0.49); max-width: 1000px; margin: auto; display: none; } -.releve a, .releve a:visited { + +.releve a, +.releve a:visited { color: navy; text-decoration: none; } + .releve a:hover { - color: red; + color: red; text-decoration: underline; } -.ready .wait{display: none;} -.ready main{display: block;} -h2{ +.ready .wait { + display: none; +} + +.ready main { + display: block; +} + +h2 { margin: 0; color: black; } -section{ + +section { background: #FFF; border-radius: 16px; border: 1px solid #AAA; padding: 16px 32px; margin: 8px 0; } -section>div:nth-child(1){ + +section>div:nth-child(1) { display: flex; justify-content: space-between; align-items: center; gap: 8px; } -.CTA_Liste{ + +.CTA_Liste { display: flex; gap: 4px; align-items: center; @@ -60,41 +78,47 @@ section>div:nth-child(1){ color: #FFF; padding: 4px 8px; border-radius: 4px; - box-shadow: 0 2px 2px rgba(0,0,0,0.26); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); cursor: pointer; } -.CTA_Liste>svg{ + +.CTA_Liste>svg { transition: 0.2s; } -.CTA_Liste:hover{ + +.CTA_Liste:hover { outline: 2px solid #424242; } -.listeOff svg{ + +.listeOff svg { transform: rotate(180deg); } + .listeOff .syntheseModule, -.listeOff .eval{ +.listeOff .eval { display: none; } .moduleOnOff>.syntheseModule, -.moduleOnOff>.eval{ - display: none; +.moduleOnOff>.eval { + display: none; } + .listeOff .moduleOnOff>.syntheseModule, -.listeOff .moduleOnOff>.eval{ - display: flex !important; +.listeOff .moduleOnOff>.eval { + display: flex !important; } .listeOff .ue::before, .listeOff .module::before, .moduleOnOff .ue::before, -.moduleOnOff .module::before{ - transform: rotate(0); +.moduleOnOff .module::before { + transform: rotate(0); } + .listeOff .moduleOnOff .ue::before, -.listeOff .moduleOnOff .module::before{ - transform: rotate(180deg) !important; +.listeOff .moduleOnOff .module::before { + transform: rotate(180deg) !important; } /***********************/ @@ -107,24 +131,25 @@ section>div:nth-child(1){ .hide_coef .eval>em, .hide_date_inscr .dateInscription, .hide_ects .ects, -.hide_rangs .rang{ +.hide_rangs .rang { display: none; } /*.module>.absences,*/ .module .moyenne, -.module .info{ - display: none; +.module .info { + display: none; } /************/ /* Etudiant */ /************/ -.info_etudiant{ - color: #000; - text-decoration: none; +.info_etudiant { + color: #000; + text-decoration: none; } -.etudiant{ + +.etudiant { display: flex; align-items: center; gap: 16px; @@ -132,7 +157,8 @@ section>div:nth-child(1){ background: var(--couleurPrincipale); color: rgb(0, 0, 0); } -.civilite{ + +.civilite { font-weight: bold; font-size: 130%; } @@ -140,103 +166,123 @@ section>div:nth-child(1){ /************/ /* Semestre */ /************/ -.flex{ - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 8px; -} -.infoSemestre{ +.flex { display: flex; flex-wrap: wrap; - align-items: flex-start; + gap: 8px; + margin-top: 8px; +} + +.infoSemestre { + display: flex; + flex-wrap: wrap; + align-items: flex-start; gap: 4px; } -.infoSemestre>div{ + +.infoSemestre>div { border: 1px solid var(--couleurIntense); padding: 4px 8px; border-radius: 4px; display: grid; grid-template-columns: auto auto; column-gap: 4px; - flex: none; + flex: none; } -.infoSemestre>div>div:nth-child(even){ +.infoSemestre>div>div:nth-child(even) { text-align: right; } + .photo { border: none; margin-left: auto; } -.rang, .competence{ - font-weight: bold; + +.rang, +.competence { + font-weight: bold; } -.ue .rang{ - font-weight: 400; + +.ue .rang { + font-weight: 400; } + .absencesRecap { align-items: baseline; } -.absencesRecap > div:nth-child(2n) { + +.absencesRecap>div:nth-child(2n) { font-weight: normal; } + .abs { font-weight: bold; } -.decision{ - margin: 5px 0; - font-weight: bold; - font-size: 20px; -} -#ects_tot, .decision, .decision_annee { - font-weight: bold; - font-size: 20px; - margin-top: 8px; -} -.enteteSemestre{ - color: black; + +.decision { + margin: 5px 0; font-weight: bold; - font-size: 20px; + font-size: 16px; +} + +#ects_tot, +.decision, +.decision_annee { + font-weight: bold; + font-size: 16px; + margin-top: 8px; +} + +.enteteSemestre { + color: black; + font-weight: bold; + font-size: 16px; margin-bottom: 4px; } + /***************/ /* Zone custom */ /***************/ -.custom:empty{ - display: none; +.custom:empty { + display: none; } /***************/ /* Synthèse */ /***************/ .synthese .ue, -.synthese h3{ +.synthese h3 { background: var(--couleurFondTitresUE); } -.synthese .ue>div{ - text-align: right; + +.synthese .ue>div { + text-align: right; } + .synthese em, -.eval em{ +.eval em { opacity: 0.6; min-width: 80px; display: inline-block; } + .ueBonus, -.ueBonus h3{ - background: var(--couleurFondTitresSAE) !important; - color: #000 !important; +.ueBonus h3 { + background: var(--couleurFondTitresSAE) !important; + color: #000 !important; } /***************/ /* Evaluations */ /***************/ .evaluations>div, -.sae>div{ - scroll-margin-top: 60px; +.sae>div { + scroll-margin-top: 60px; } -.module, .ue { + +.module, +.ue { color: #000; padding: 4px 32px; border-radius: 4px; @@ -244,37 +290,46 @@ section>div:nth-child(1){ gap: 16px; margin: 4px 0 2px 0; overflow-x: auto; - overflow-y: hidden; - cursor: pointer; - position: relative; + overflow-y: hidden; + cursor: pointer; + position: relative; } + .ue { background: var(--couleurFondTitresRes); } + .module { background: var(--couleurFondTitresRes); } + .module h3 { background: var(--couleurFondTitresRes); } -.module::before, .ue::before { - content:url("data:image/svg+xml;utf8,"); - width: 26px; - height: 26px; - position: absolute; - bottom: 0; - left: calc(50% - 13px); - transform: rotate(180deg); - transition: 0.2s; + +.module::before, +.ue::before { + content: url("data:image/svg+xml;utf8,"); + width: 26px; + height: 26px; + position: absolute; + bottom: 0; + left: calc(50% - 13px); + transform: rotate(180deg); + transition: 0.2s; } + @media screen and (max-width: 1000px) { + /* Placer le chevron à gauche au lieu du milieu */ - .module::before, .ue::before { + .module::before, + .ue::before { left: 2px; bottom: calc(50% - 13px); } } -h3{ + +h3 { display: flex; align-items: center; margin: 0 auto 0 0; @@ -284,21 +339,27 @@ h3{ font-size: 16px; background: var(--couleurSecondaire); } -.sae .module, .sae h3{ - background: var(--couleurFondTitresSAE); + +.sae .module, +.sae h3 { + background: var(--couleurFondTitresSAE); } -.moyenne{ +.moyenne { font-weight: bold; text-align: right; } -.info{ + +.info { opacity: 0.9; } -.syntheseModule{ - cursor: pointer; + +.syntheseModule { + cursor: pointer; } -.eval, .syntheseModule{ + +.eval, +.syntheseModule { position: relative; display: flex; justify-content: space-between; @@ -306,17 +367,21 @@ h3{ padding: 0px 4px; border-bottom: 1px solid #aaa; } -.eval>div, .syntheseModule>div{ - display: flex; - gap: 4px; + +.eval>div, +.syntheseModule>div { + display: flex; + gap: 4px; } -.eval:hover, .syntheseModule:hover{ +.eval:hover, +.syntheseModule:hover { background: var(--couleurSurlignage); /* color: #FFF; */ } -.complement{ - pointer-events:none; + +.complement { + pointer-events: none; position: absolute; bottom: 100%; right: 0; @@ -328,33 +393,40 @@ h3{ opacity: 0; display: grid !important; grid-template-columns: auto auto; - gap: 0 !important; + gap: 0 !important; column-gap: 4px !important; } -.eval:hover .complement{ + +.eval:hover .complement { opacity: 1; z-index: 1; } -.complement>div:nth-child(even){ + +.complement>div:nth-child(even) { text-align: right; } + .complement>div:nth-child(1), -.complement>div:nth-child(2){ +.complement>div:nth-child(2) { font-weight: bold; } + .complement>div:nth-child(1), -.complement>div:nth-child(7){ +.complement>div:nth-child(7) { margin-bottom: 8px; } @media screen and (max-width: 700px) { - section{ - padding: 16px; - } - .syntheseModule, .eval { + section { + padding: 16px; + } + + .syntheseModule, + .eval { margin: 0; } } + /*.absences{ display: grid; grid-template-columns: auto auto; @@ -366,4 +438,4 @@ h3{ .absences>div:nth-child(1), .absences>div:nth-child(2){ font-weight: bold; -}*/ +}*/ \ No newline at end of file