forked from ScoDoc/ScoDoc
606 lines
9.2 KiB
CSS
606 lines
9.2 KiB
CSS
html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.wait {
|
|
position: fixed;
|
|
width: 50px;
|
|
height: 10px;
|
|
background: #424242;
|
|
top: calc(50% - 50px);
|
|
left: 50%;
|
|
margin-left: -25px;
|
|
animation: wait 0.6s ease-out alternate infinite;
|
|
}
|
|
|
|
@keyframes wait {
|
|
100% {
|
|
transform: translateY(-30px) rotate(360deg)
|
|
}
|
|
}
|
|
|
|
@keyframes message {
|
|
|
|
20%,
|
|
80% {
|
|
transform: translate(-50%, 100%)
|
|
}
|
|
}
|
|
|
|
.edition {
|
|
background: #ddd;
|
|
border-radius: 8px;
|
|
padding: 8px 32px 8px 8px;
|
|
margin-bottom: 16px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loaded .edition {
|
|
pointer-events: initial;
|
|
}
|
|
|
|
.filtres>label {
|
|
display: none;
|
|
}
|
|
|
|
.editionActivated .valider {
|
|
display: block;
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
padding: 8px 32px;
|
|
background: #90c;
|
|
color: #fff;
|
|
box-shadow: 0 2px 2px rgb(0, 0, 0, 0.25);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
main {
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-right: 16px;
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
background: #717171;
|
|
}
|
|
|
|
main h2 {
|
|
border-bottom: 4px solid #09c;
|
|
font-size: 150% !important;
|
|
}
|
|
|
|
main h2,
|
|
main h3 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
section {
|
|
background: #dbccb8;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
body:not(.editionActivated) .editing {
|
|
display: none;
|
|
}
|
|
|
|
.nonEditable .editing {
|
|
display: none;
|
|
}
|
|
|
|
.editionActivated #zoneChoix,
|
|
.editionActivated #zoneGroupes {
|
|
pointer-events: none;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.highlight {
|
|
animation: boing 0.12s alternate;
|
|
animation-iteration-count: 4;
|
|
display: inline-block;
|
|
}
|
|
|
|
@keyframes boing {
|
|
100% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
/****************/
|
|
.ajoutPartition,
|
|
.ajoutGroupe {
|
|
background: #0c9 !important;
|
|
padding: 8px 16px !important;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
box-shadow: 0 2px 2px rgb(0, 0, 0, 0.25);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.move,
|
|
.modif,
|
|
.suppr {
|
|
color: #000;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.move {
|
|
cursor: grab;
|
|
letter-spacing: -2px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.move:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
body.editionActivated .filtres>div>div>div>div {
|
|
padding: 8px 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.editingText {
|
|
background: #FFF;
|
|
color: #000;
|
|
border-radius: 4px;
|
|
outline: 4px solid #FFF;
|
|
padding: 2px;
|
|
}
|
|
|
|
/* Suppression */
|
|
.confirm {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.confirm span {
|
|
color: #09c;
|
|
}
|
|
|
|
.confirm>div {
|
|
background: #FFF;
|
|
margin: 32px;
|
|
padding: 32px 64px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.confirm>div>div {
|
|
display: flex;
|
|
gap: 32px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm>div>div>div {
|
|
padding: 16px 32px;
|
|
border-radius: 8px;
|
|
color: #FFF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirm .ok {
|
|
background: #0c9;
|
|
}
|
|
|
|
.confirm .nok {
|
|
background: #c44;
|
|
}
|
|
|
|
/* Déplacements */
|
|
.moving {
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.grabbing>div[data-idpartition]:not([data-idgroupe]):hover:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -4px;
|
|
right: -4px;
|
|
bottom: calc(100% + 1px);
|
|
height: 2px;
|
|
width: auto;
|
|
background: #c44;
|
|
animation: insertPartion 0.2s infinite alternate ease-in-out;
|
|
}
|
|
|
|
@keyframes insertPartion {
|
|
0% {
|
|
transform: translateX(-4px)
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(4px)
|
|
}
|
|
}
|
|
|
|
.grabbing>*:not([data-idgroupe="aucun"]):hover:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -4px;
|
|
top: -4px;
|
|
right: calc(100% + 1px);
|
|
width: 2px;
|
|
background: #c44;
|
|
animation: insertGroupe 0.2s infinite alternate ease-in-out;
|
|
}
|
|
|
|
@keyframes insertGroupe {
|
|
0% {
|
|
transform: translateY(-4px)
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(4px)
|
|
}
|
|
}
|
|
|
|
/*****************************/
|
|
/* Zone Filtres */
|
|
/*****************************/
|
|
#zonePartitions {
|
|
width: 100%;
|
|
}
|
|
|
|
#zonePartitions>div {
|
|
width: fit-content;
|
|
}
|
|
|
|
#zonePartitions h3 {
|
|
display: flex;
|
|
}
|
|
|
|
#zonePartitions h3 .onoff {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 16px;
|
|
padding-left: 8px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
#zonePartitions .filtres {
|
|
width: fit-content;
|
|
}
|
|
|
|
#zonePartitions .filtres>div {
|
|
background: #eee;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
#zonePartitions .filtres .config {
|
|
grid-row: 1 / span 2;
|
|
grid-column: 2 / 3;
|
|
background: #424242;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
margin-left: 4px;
|
|
padding: 4px;
|
|
display: none;
|
|
}
|
|
|
|
#zonePartitions span.editing a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.editionActivated #zonePartitions .filtres .config {
|
|
display: block;
|
|
}
|
|
|
|
#zonePartitions .filtres .config label {
|
|
display: block;
|
|
background: #ddd;
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
color: #000;
|
|
margin-top: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#zonePartitions .filtres .groupes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
row-gap: 2px;
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
#zonePartitions .filtres .groupes>div {
|
|
position: relative;
|
|
background: #09c;
|
|
color: #FFF;
|
|
border-radius: 4px;
|
|
padding: 8px 32px;
|
|
margin: 0;
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
body:not(.editionActivated) .filtres .groupes>div {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:not(.editionActivated) .filtres .groupes>div:hover {
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6) !important;
|
|
}
|
|
|
|
body:not(.editionActivated) .filtres .groupes>div:active {
|
|
box-shadow: 0 0 0 #000 !important;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
body.editionActivated .filtres [data-idgroupe=aucun] {
|
|
display: none;
|
|
}
|
|
|
|
body.editionActivated .filtres .nonEditable .move {
|
|
display: initial;
|
|
}
|
|
|
|
.groupe:has(.etudiants:empty) {
|
|
display: none;
|
|
}
|
|
|
|
/* .filtres .unselect {
|
|
background: rgba(0, 153, 204, 0.5) !important;
|
|
} */
|
|
|
|
/*****************************/
|
|
/* Zone Etudiants */
|
|
/*****************************/
|
|
#zoneChoix summary{
|
|
margin: 0 0 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#zoneChoix .autoAffectation>a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#zoneChoix .dropZone {
|
|
background: #FFF;
|
|
border-radius: 8px;
|
|
border: 2px dashed #09C;
|
|
margin-bottom: 4px;
|
|
padding: 4px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.fileOver {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
#zoneChoix .autoAffectation {
|
|
background: #c9c9c9;
|
|
color: #141414;
|
|
padding: 4px 8px;
|
|
margin-bottom: 16px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
#zoneChoix .autoAffectation>select {
|
|
border: none;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#zoneChoix .autoAffectation>.affectationGo {
|
|
display: inline-block;
|
|
background: #0c9;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
width: fit-content;
|
|
}
|
|
#zoneChoix .autoAffectation .progress {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: #717171;
|
|
}
|
|
|
|
#zoneChoix .autoAffectation .progress>div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc(100% * var(--nombre) / var(--reference));
|
|
bottom: 0;
|
|
background: #0c9;
|
|
}
|
|
|
|
#zoneChoix .etudiants>div {
|
|
background: #FFF;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
margin: -1px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
#zoneChoix .etudiants .nom {
|
|
flex: 1;
|
|
}
|
|
|
|
#zoneChoix a {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#zoneChoix a:hover {
|
|
text-decoration: underline;
|
|
color: #09c;
|
|
}
|
|
|
|
#zoneChoix .small {
|
|
color: #444;
|
|
font-size: 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
#zoneChoix .etudiants .grpPartitions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
#zoneChoix .etudiants .partition {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
#zoneChoix label {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#zoneChoix span.aucun {
|
|
font-size: 10px;
|
|
background: #ddd;
|
|
}
|
|
|
|
#zoneChoix .etudiants .partition>div,
|
|
#zoneChoix .etudiants .partition span {
|
|
display: block;
|
|
padding: 4px 8px;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#zoneChoix .etudiants .partition input {
|
|
display: none;
|
|
}
|
|
|
|
#zoneChoix .etudiants .partition input:checked:not([value=aucun])+span {
|
|
background: rgb(165, 6, 59);
|
|
border-color: rgb(165, 6, 59);
|
|
color: #fff;
|
|
}
|
|
|
|
#zoneChoix .etudiants .partition>:nth-child(1) {
|
|
background: #09c;
|
|
border-color: #09c;
|
|
color: #fff;
|
|
}
|
|
|
|
section:not(#zonePartitions) .hide {
|
|
display: none !important;
|
|
}
|
|
|
|
#zonePartitions .hide {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.saved+span {
|
|
position: relative;
|
|
}
|
|
|
|
.saving+span {
|
|
outline: 2px solid orange;
|
|
}
|
|
|
|
.saved+span::before {
|
|
content: '✔️';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/*****************************/
|
|
/* Zone Groupes */
|
|
/*****************************/
|
|
#zoneGroupes {
|
|
flex: 1;
|
|
}
|
|
|
|
#zoneGroupes h3 {
|
|
width: 100%;
|
|
}
|
|
|
|
#zoneGroupes .partition {
|
|
background: #ddd;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
#zoneGroupes .groupe {
|
|
background: #FFF;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#zoneGroupes .groupe>div {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
#zoneGroupes .groupe>div:nth-child(1) {
|
|
color: #09c;
|
|
border-bottom: 1px solid #aaa;
|
|
}
|
|
|
|
#zoneGroupes .etudiants {
|
|
counter-reset: cpt;
|
|
}
|
|
|
|
#zoneGroupes .etudiants>*::before {
|
|
counter-increment: cpt;
|
|
content: counter(cpt) " - ";
|
|
}
|
|
|
|
#zoneGroupes [data-idgroupe=aucun] {
|
|
background: #453f3b !important;
|
|
color: #fff;
|
|
}
|
|
|
|
#zoneGroupes .groupe[data-idgroupe=aucun]>div:nth-child(1) {
|
|
color: red;
|
|
}
|