60 lines
1.2 KiB
CSS
60 lines
1.2 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);
|
|
gap: 2px;
|
|
}
|
|
.entete{
|
|
background: #09c;
|
|
font-weight: bold;
|
|
}
|
|
.tableau>div{
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #999;
|
|
grid-column: var(--x) / span var(--nbX);
|
|
grid-row: var(--y) / span var(--nbY);
|
|
}
|
|
|
|
[data-editable="true"]{
|
|
cursor: pointer;
|
|
}
|
|
|
|
/***************************/
|
|
/* Statut des cellules */
|
|
/***************************/
|
|
.selected{ outline: 1px solid #c09; }
|
|
.modifying{ outline: 2px dashed #c09; }
|
|
.wait{ outline: 2px solid #c90; }
|
|
.good{ outline: 2px solid #9c0; }
|
|
|
|
/***************************/
|
|
/* Message */
|
|
/***************************/
|
|
.message{
|
|
position: fixed;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
z-index: 10;
|
|
padding: 20px;
|
|
border-radius: 0 0 10px 10px;
|
|
background: #ec7068;
|
|
background: #90c;
|
|
color: #FFF;
|
|
font-size: 24px;
|
|
animation: message 3s;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
@keyframes message{
|
|
20%{transform: translate(-50%, 100%)}
|
|
80%{transform: translate(-50%, 100%)}
|
|
}
|