ScoDoc-Lille/app/static/css/ref-competences.css

128 lines
1.7 KiB
CSS
Raw Normal View History

:host {
font-family: Verdana;
display: block;
2023-04-13 15:16:14 +02:00
padding: 6px 32px;
color: #FFF;
max-width: 1000px;
margin-left: 12px;
margin-top: 12px;
border-radius: 8px;
}
h1 {
font-weight: 100;
}
2023-04-13 15:16:14 +02:00
div.titre {
color: black;
margin-bottom: 8px;
}
/**********************/
/* Zone parcours */
/**********************/
.parcours {
display: flex;
gap: 4px;
2022-01-17 00:41:57 +01:00
padding-right: 4px;
}
.parcours>div {
background: #09c;
font-size: 18px;
text-align: center;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
flex: 1;
transition: 0.1s;
opacity: 0.7;
}
.parcours>div:hover,
.competence>div:hover {
color: #ccc;
}
.parcours>.focus {
opacity: 1;
}
/**********************/
/* Zone compétences */
/**********************/
.competences {
display: grid;
2022-01-15 15:09:16 +01:00
margin-top: 8px;
2022-01-17 00:41:57 +01:00
row-gap: 4px;
}
.competences>div {
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
2022-01-17 00:41:57 +01:00
width: var(--competence-size);
margin-right: 4px;
}
.comp1 {
2023-04-13 15:16:14 +02:00
background: var(--col-c1-3);
}
.comp2 {
2023-04-13 15:16:14 +02:00
background: var(--col-c2-3);
}
.comp3 {
2023-04-13 15:16:14 +02:00
background: var(--col-c3-3);
}
.comp4 {
2023-04-13 15:16:14 +02:00
background: var(--col-c4-3);
}
.comp5 {
2023-04-13 15:16:14 +02:00
background: var(--col-c5-3);
color: #eee;
}
.comp6 {
2023-04-13 15:16:14 +02:00
background: var(--col-c6-3);
color: #eee;
}
.competences>.focus {
outline: 2px solid;
}
/**********************/
/* Zone AC */
/**********************/
h2 {
display: table;
padding: 8px 16px;
font-size: 20px;
border-radius: 16px 0;
}
.ACs {
2022-01-17 00:41:57 +01:00
padding-right: 4px;
}
.AC li {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 4px;
margin-bottom: 4px;
border-bottom: 1px solid;
}
.AC li>div:nth-child(1) {
padding: 2px 4px;
border-radius: 4px;
}
.AC li>div:nth-child(2) {
padding-bottom: 2px;
}