dut
/
sid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
sid/css/global.css

584 lines
11 KiB
CSS
Executable File
Raw Blame History

.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; }
.center{ text-align: center; }
/* liens basiques */
a{ color: #2dcc70; }
/* @hover */
a:hover{ color: #8a8a8a; }
/* .unstressed */
span.unstressed{ color: #aaa; }
body.trHoverActivated tr:hover > td > span.unstressed{ color: #ddd; }
span.stressed{ font-weight: bold; }
thead.normal > tr > th{ font-weight: normal; }
/* input dans import/export */
div.p.center input{
margin: .2em;
padding: .8em;
border-radius: 3px;
border: 1px solid #989898;
}
.nomargin{ margin: 0 !important; }
.nopadding{ padding: 0 !important; }
input{ font-family: inherit; } /* même police pour les input */
/*************************/
/*** 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 */
body.trHoverActivated table.basic tr:hover > td{ color: #fff; }
body.trHoverActivated table.basic:nth-child(4n+0) tr:hover > td { background-color: #e63c54; }
body.trHoverActivated table.basic:nth-child(4n+1) tr:hover > td { background-color: #3c73e6; }
body.trHoverActivated table.basic:nth-child(4n+2) tr:hover > td { background-color: #e6983c; }
body.trHoverActivated table.basic:nth-child(4n+3) tr:hover > td { background-color: #2dcc70; }
body.trHoverActivated table.basic table.basic tr:hover > td { background-color: #9e9e9e; }
/* .noborder */
table.basic tr.noborder > td:first-child{ border-left: 1px solid transparent; }
body.trHoverActivated 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,
#CONTAINER section div.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;
padding-right: 2em;
/* border */
border-radius: 5px;
border: 1px solid #2dcc70;
/* background */
background: #fff url(../src/expand.svg) center right 1em no-repeat;
background-size: auto .5em;
/* foreground */
color: #2dcc70;
line-height: 1em; /* for -webkit */
font-family: inherit;
/* select */
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
/* select grisé => selection modules existants par exemple */
tr.grayscale select,
select.grayscale{
border-color: #bdbdbd;
background-image: url(../src/expand@grayscale.svg);
color: #4e4e4e;
}
/* pour déplacement d'élève */
td select{ margin: -1em; padding: .5em; padding-right: 2em; }
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; }
/* correction padding du <select> dans les pages import/export */
div.p.center select{
line-height: 3em; /* for -webkit */
}
.del{
color: #f55b55;
cursor: pointer;
/* 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;
}
/* hover */
.del:hover{ font-weight: bold; }
.confirm{
/* position */
/*display: inline-block;*/ display: none;
position: absolute;
margin-left: 2em;
margin-top: -.2em;
height: 1.5em;
padding: 0 .7em 0 1.3em;
/* border */
border-radius: 3px;
border: 1px solid #2dcc70;
/* background */
background: transparent center left .2em no-repeat;
background-size: 1em auto;
/* foreground */
color: #2dcc70;
line-height: 1.5em;
/* extra */
cursor: pointer;
/* scroll */
overflow: hidden;
}
.confirm [type=file]{
/* position */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* extra */
opacity: 0;
cursor: pointer;
}
/* @all */
.confirm.all,
tr.grayscale .confirm{ margin-top: -.7em; }
/* @active */
input.active + .confirm,
select.active + .confirm,
.confirm.active{
display: inline-block;
background-image: url(../src/validate.svg);
}
.confirm.loading{
background-image: url(../src/loader.gif);
}
.confirm.center{
position: relative;
margin: 1em;
}
/* .pamp */
.confirm.pamp{
border-color: #f55b55;
color: #f55b55;
background-image: url(../src/validate@pamp.svg);
}
/* tr@hover */
body.trHoverActivated tr:hover td select.active + .confirm,
body.trHoverActivated tr:hover td input.active + .confirm,
body.trHoverActivated tr:hover td .confirm.active{
border-color: #fff;
background-image: url(../src/validate@hover.svg);
color: #fff;
}
/* saisie note */
.saisie_note,
tr.grayscale input{
/* position */
margin: -.5em;
width: 4em;
padding: .5em 1em;
/* border */
border-radius: 3px;
border: 1px solid #bdbdbd;
}
/* @focus */
.saisie_note:focus,
tr.grayscale input:focus{
border-color: #999;
}
/* .active */
.saisie_note.active,
tr.grayscale input.active{
border-color: #2dcc70;
color: #2dcc70;
}
/******************************/
/*** SELECTIONS DES PARTIES ***/
/******************************/
#CONTAINER > section > .partlist{
/* position */
display: table;
margin: 2em;
/* border */
border-spacing: 0;
}
#CONTAINER > section div.partlist{
/* position */
display: inline;
margin: 2em;
}
#CONTAINER > section > .partlist td,
#CONTAINER > section div.partlist > span{
/* 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;
}
#CONTAINER > section div.partlist > span{ padding: .7em; line-height: 3em; }
/* @radius */
#CONTAINER > section > .partlist td:first-child,
#CONTAINER > section div.partlist > span:first-child{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* @border + @radius */
#CONTAINER > section > .partlist td:last-child,
#CONTAINER > section div.partlist > span:last-child{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 1px solid #2dcc70;
}
#CONTAINER > section > .partlist td.active,
#CONTAINER > section div.partlist > span.active{
background-color: #2dcc70;
color: #fff;
}
/* CHECKBOXES (HACK) */
td input[type=checkbox]{
display: none;
}
td input[type=checkbox] + label{
/* position */
display: inline-block;
position: relative;
width: 1em;
height: 1em;
margin-bottom: -.25em;
/* border */
border-radius: 3px;
border: 1px solid #7c7c7c;
/* background */
background: transparent none center center no-repeat;
background-size: auto 100%;
/* 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: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
/* @checked */
td input[type=checkbox]:checked + label{
border-color: #2dcc70;
background-image: url(../src/validate.svg);
}
/* PAGE D'ACCUEIL -> tutoriel */
#CONTAINER > section[name=presentation] > p > img{
/* position */
width: 2em;
height: 2em;
margin: .5em;
padding: .5em;
/* border */
border-radius: 3px;
border: 1px solid transparent;
/* foreground */
vertical-align:middle;
/* 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: pointer;
}
/* @hover */
#CONTAINER > section[name=presentation] > p > img:hover{
border-color: #2dcc70;
}
/* astérisque */
span._{
color: #2dcc70;
}
/* STYLE DES NOTES EN FONCTION DE LA VALEUR */
span.link.low{ /* Ne peut pas compenser */
border-color: #f55b55;
}
span.link.med{ /* Peut pas compenser */
border-color: #f59555;
}
span.link.hig{ /* A la moyenne */
border-color: #2dcc70;
}
Reference in New Issue View Git Blame Copy Permalink