.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 } /*************************/ /*** 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; } /* 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; /* 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; } .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; } /* @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.center{ position: relative; margin: 1em; } /* 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; } /******************************/ /*** 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; } /* @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); }