ScoDoc/app/static/css/parcour_formation.css

156 lines
2.5 KiB
CSS

div.les_parcours {
display: flex;
margin-left: 16px;
margin-bottom: 16px;
}
div.les_parcours>div {
font-size: 130%;
margin-top: 12px;
margin-left: 8px;
background-color: #09c;
opacity: 0.7;
border-radius: 4px;
text-align: center;
padding: 8px 16px;
}
div.les_parcours>div.focus {
opacity: 1;
}
div.les_parcours>div.link {
background-color: var(--sco-color-background);
color: navy;
}
div.les_parcours>div.parc>a:hover {
color: #ccc;
}
div.les_parcours>div.parc>a,
div.les_parcours>div.parc>a:visited {
color: white;
}
.parcour_formation {
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
min-width: 1200px;
max-width: 1600px;
}
.titre_parcours {
font-weight: bold;
font-size: 120%;
}
div.competence {
/* display: grid; */
margin-top: 12px;
}
.titre_competence {
/* grid-column-start: 1;
grid-column-end: span -1;
grid-row-start: 1;
grid-row-start: 2; */
border-bottom: 6px solid white;
font-weight: bold;
font-size: 110%;
text-align: center;
}
.niveaux {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
--arrow-width: 24px;
}
/* Flèches vers la droite */
.niveaux>div {
padding: 8px 16px;
position: relative;
}
.niveaux>div:not(:first-child) {
padding-left: calc(var(--arrow-width) + 8px);
}
.niveaux>div:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
left: calc(100% - 1px);
bottom: 0;
width: var(--arrow-width);
background: var(--color);
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 1;
}
.niveau {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
}
.niveau>div {
padding-left: 8px;
padding-right: 8px;
}
.titre_niveau {
grid-column: 1 / span 2;
grid-row: 1 / 2;
padding-bottom: 6px;
}
span.parcs {
margin-left: 12px;
display: inline-block;
}
span.parc {
font-size: 75%;
font-weight: bold;
/* color: rgb(92, 87, 255); */
color: white;
margin-right: 8px;
padding: 4px;
background-color: #09c;
border-radius: 4px;
text-align: center;
}
div.ue {
grid-row-start: 2;
/* border: 1px dashed blue; */
}
div.ue.impair {
grid-column: 1 / 2;
}
div.ue.pair {
grid-column: 2 / 3;
}
.ue select {
color: black;
}
/* ne fonctionne pas
option.non_associe {
background-color: yellow;
color: red;
} */
.links {
margin-top: 16px;
margin-bottom: 8px;
}