forked from ScoDoc/ScoDoc
93 lines
1.6 KiB
CSS
93 lines
1.6 KiB
CSS
/* table_editor, par Sébastien L.
|
|
*/
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/***************************/
|
|
/* Le tableau */
|
|
/***************************/
|
|
.tableau {
|
|
display: grid;
|
|
grid-auto-rows: minmax(24px, auto);
|
|
}
|
|
|
|
.entete {
|
|
background: #09c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tableau>div {
|
|
padding: 4px;
|
|
border: 1px solid #999;
|
|
grid-column: var(--x) / span var(--nbX);
|
|
grid-row: var(--y) / span var(--nbY);
|
|
}
|
|
|
|
/***************************/
|
|
/* Attente */
|
|
/***************************/
|
|
.wait {
|
|
position: fixed;
|
|
top: 32px;
|
|
left: 50%;
|
|
height: 4px;
|
|
width: 32px;
|
|
margin-left: -16px;
|
|
background: #424242;
|
|
animation: attente 0.4s infinite alternate;
|
|
display: none;
|
|
}
|
|
|
|
.go {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes attente {
|
|
100% {
|
|
transform: translateY(-16px) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/***************************/
|
|
/* Système de modification */
|
|
/***************************/
|
|
.modifOnOff {
|
|
position: relative;
|
|
display: table;
|
|
margin: 16px;
|
|
padding-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modifOnOff::before {
|
|
content: '';
|
|
width: 40px;
|
|
height: 20px;
|
|
background: #c90;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
border-radius: 20px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.modifOnOff::after {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #FFF;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: calc(100% + 2px);
|
|
border-radius: 100%;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.modifOnOff.active::before {
|
|
background: #9c0;
|
|
}
|
|
|
|
.modifOnOff.active::after {
|
|
transform: translateX(20px);
|
|
} |