ScoDoc-Front/app/static/css/table_editor.css

/* table_editor, par Sébastien L.
 */
form.semestre_selector {
    margin-top: 2ex;
}

form.semestre_selector>div {
    display: inline-flex;
}

form.semestre_selector>div>div {
    margin-left: 16px;
}

/***************************/
/* Le tableau              */
/***************************/
.tableau {
    display: inline-grid;
    grid-auto-rows: minmax(24px, auto);
    grid-template-columns: fit-content(50px);
    gap: 2px;
    margin-top: 5px;
    background: #fffefa;
    margin: 10px;
}

.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;
}

/*****************/
/* Styles ScoDoc */
/*****************/
div.title_ue {
    background-color: #b7d2fa;
}

.tableau>div.title_mod {}

div.title_RESSOURCE {
    background-color: #f8c844;
}

div.title_SAE {
    background-color: #c6ffab;
}

div.title_STANDARD,
.champs_STANDARD {
    background-color: #fefefe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%239C92AC' fill-opacity='0.21'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
}

div.title_MALUS {
    background-color: #ff4700;
}

.sums {
    background: #ddd;
}

/***************************/
/* Statut des cellules     */
/***************************/
.selected {
    outline: 1px solid #c09;
}

.modifying {
    outline: 2px dashed #c09;
}

.wait {
    outline: 2px solid #c90;
}

.good {
    outline: 2px solid #9c0;
}

.modified {
    font-weight: bold;
    color: indigo
}

/***************************/
/* 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%)
    }
}