DocScoDoc/app/static/css/ref-competences.css

120 lines
1.5 KiB
CSS

:host {
font-family: Verdana;
background: rgb(14, 5, 73);
display: block;
padding: 12px 32px;
color: #FFF;
max-width: 1000px;
margin: auto;
}
h1 {
font-weight: 100;
}
/**********************/
/* Zone parcours */
/**********************/
.parcours {
display: flex;
gap: 4px;
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;
margin-top: 8px;
row-gap: 4px;
}
.competences>div {
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
width: var(--competence-size);
margin-right: 4px;
}
.comp1 {
background: #a44
}
.comp2 {
background: #84a
}
.comp3 {
background: #a84
}
.comp4 {
background: #8a4
}
.comp5 {
background: #4a8
}
.comp6 {
background: #48a
}
.competences>.focus {
outline: 2px solid;
}
/**********************/
/* Zone AC */
/**********************/
h2 {
display: table;
padding: 8px 16px;
font-size: 20px;
border-radius: 16px 0;
}
.ACs {
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;
}