sid/css/global.css

329 lines
6.7 KiB
CSS
Executable File

.no-select{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
.hidden{ display: none !important; }
/* .unstressed */
span.unstressed{ color: #aaa; }
tr:hover > td > span.unstressed{ color: #ddd; }
span.stressed{ font-weight: bold; }
thead.normal > tr > th{ font-weight: normal; }
/*************************/
/*** TITLE PERSONALISÉ ***/
/*************************/
#CONTAINER [data-info]:after{
content: attr(data-info);
/* position */
/*display: block;*/ display: none;
position: absolute;
margin-left: 4em;
padding: .3em;
/* border */
border-radius: 3px;
/* background */
background-color: #233342;
/* foreground */
color: #fff;
}
/* INFO SURVOL */
#CONTAINER [data-info]:hover:after{ display: block; }
/**********************/
/*** TABLEAU .BASIC ***/
/**********************/
/* STYLE "BASIC" DES TABLEAUX */
table.basic{
/* position */
width: 100%;
margin-bottom: 0;
/* border */
border-radius: 5px;
border-spacing: 0;
/*box-shadow: 0 0 4px #e3e3e3;*/
}
table.basic.margin{ margin-bottom: 1em; }
table.basic tr td,
table.basic tr th,
#DRAGNDROP td,
#DRAGNDROP th{
/* position */
padding: 1.5em 1.5em;
width: 25%;
/* border */
/*border-width: 1px 0 0 0;*/
/*border-style: solid;*/
/*border-color: #e0e1e3;*/
/* backgroud */
background-color: #fff;
/* foreground */
color: #4e4e4e;
/* animation */
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
/* extra */
cursor: default;
}
/* définition de la répartition des éléments en fonction du nombre de colonnes */
table.basic.col1 tr td, table.basic.col1 tr th{ width: 100%; }
table.basic.col2 tr td, table.basic.col2 tr th{ width: 50%; }
table.basic.col3 tr td, table.basic.col3 tr th{ width: 33%; }
table.basic.col4 tr td, table.basic.col4 tr th{ width: 25%; }
table.basic.col5 tr td, table.basic.col5 tr th{ width: 20%; }
table.basic.col5 tr td, table.basic.col6 tr th{ width: 16%; }
/* titre aligné à gauche */
table.basic th{ text-align: left; }
/* <thead> sans background */
table.basic thead tr th{ background-color: transparent; }
table.basic:nth-child(4n+0) tr > td:first-child { border-left: 10px solid #e63c54; }
table.basic:nth-child(4n+1) tr > td:first-child { border-left: 10px solid #3c73e6; }
table.basic:nth-child(4n+2) tr > td:first-child { border-left: 10px solid #e6983c; }
table.basic:nth-child(4n+3) tr > td:first-child { border-left: 10px solid #2dcc70; }
table.basic table.basic tr > td:first-child { border-left: 10px solid #9e9e9e; }
/* @hover */
table.basic tr:hover > td{ color: #fff; }
table.basic:nth-child(4n+0) tr:hover > td { background-color: #e63c54; }
table.basic:nth-child(4n+1) tr:hover > td { background-color: #3c73e6; }
table.basic:nth-child(4n+2) tr:hover > td { background-color: #e6983c; }
table.basic:nth-child(4n+3) tr:hover > td { background-color: #2dcc70; }
table.basic table.basic tr:hover > td { background-color: #9e9e9e; }
/* .noborder */
table.basic tr.noborder > td:first-child{ border-left: 1px solid transparent; }
table.basic tr:hover td{ background-color: #fff; }
/* .transparentbg */
table.basic tr.transparentbg > td{ background-color: transparent; }
table.basic tr.transparentbg:hover > td{ background-color: transparent; }
table.basic tr.transparentbg > td{ color: inherit; }
/******************/
/*** PARAGRAPHS ***/
/******************/
#CONTAINER section > p{
/* position */
padding: 1em;
margin: 1em;
/* border */
border-radius: 3px;
border: 1px solid #ddd;
/* background */
background-color: #fff;
}
#CONTAINER section > p:hover{
box-shadow: 1px 1px 3px #ddd;
}
/*********************/
/*** LIENS BOUTONS ***/
/*********************/
span.link{
/* position */
padding: .3em .8em;
/* border */
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: inset 0 0 1px #f5f5f5;
/* background */
background: #fff;
/* foreground */
color: #333;
/* extra */
cursor: pointer;
}
table.basic td > span.link{ background: #eee; }
span.link:hover{ color: #000; }
/*********************/
/*** SELECT/OPTION ***/
/*********************/
select{
/* position */
margin: 2em;
padding: 0 1em;
/* border */
border-radius: 5px;
border: 1px solid #2dcc70;
/* background */
background-color: #fff;
/* foreground */
color: #2dcc70;
/* select */
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
/* pour déplacement d'élève */
td select{ margin: -1em; padding: .5em; }
select > option{
/* position */
padding: 1em 0;
/* background */
background-color: #fff;
/* foreground */
color: #555;
text-indent: 1em;
}
/* pour déplacement d'élève */
td select > option{ padding: 0; }
.valider_action{
/* position */
/*display: inline-block;*/ display: none;
position: absolute;
margin-left: 2em;
margin-top: -.2em;
width: 1.5em;
height: 1.5em;
/* background */
background: transparent center center no-repeat;
background-size: 90% auto;
/* extra */
cursor: pointer;
}
/* bouton validation */
select.active + .valider_action{ display: inline-block; background-image: url(../src/validate.svg); }
tr:hover td select.active + .valider_action{ background-image: url(../src/validate@hover.svg); }
/* saisie note */
.saisie_note{
/* position */
margin: -.5em;
width: 4em;
padding: .5em 1em;
/* border */
border-radius: 3px;
border: 1px solid #bdbdbd;
}
/* @focus */
.saisie_note:focus{ border-color: #999; }
/* bouton validation */
input.saisie_note.active + .valider_action{ display: inline-block; background-image: url(../src/validate.svg); }
tr:hover td input.saisie_note.active + .valider_action{ background-image: url(../src/validate@hover.svg); }
/******************************/
/*** SELECTIONS DES PARTIES ***/
/******************************/
#CONTAINER > section > .partlist{
/* position */
display: table;
margin: 2em;
/* border */
border-spacing: 0;
}
#CONTAINER > section > .partlist td{
/* position */
padding: .7em 2em;
/* border */
border: 1px solid #2dcc70;
border-right: 0;
/* background */
background-color: #fff;
/* foreground */
color: #2dcc70;
/* extra */
cursor: pointer;
/* animation */
transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
-ms-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}
/* @radius */
#CONTAINER > section > .partlist td:first-child{
border-radius: 5px 0 0 5px;
}
/* @border + @radius */
#CONTAINER > section > .partlist td:last-child{
border-radius: 0 5px 5px 0;
border-right: 1px solid #2dcc70;
}
#CONTAINER > section > .partlist td.active{
background-color: #2dcc70;
color: #fff;
}