sid/css/global.css

294 lines
5.9 KiB
CSS
Executable File

/*
*
* Gestion des règles globales
* -------------------------------------
* 1-1. sections
* 1-2. titres des sections
* 2-1. tableaux génériques
* 2-2. tableaux manuels
* 3. formulaires
* 4. paragraphes
* 5. liens
* 6. ...
*
*/
/*********************/
/*** 1-1. Sections ***/
/*********************/
Hgroup + section{
/* position */
display: none; /* on cache par défaut si le titre n'est pas actif */
position: absolute;
top: calc( 5px + 3em + 1px ); /* 1px pour que le border soit au même endroit que celui de Hgroup */
left: 0;
width: calc( 100% - 2*2em );
height: auto;
padding: 2em; /* top right/left bottom */
/* border */
border-top: 1px solid #aaa;
/* z axis */
z-index: 7;
}
/* on active le premier par défaut si aucun n'est .active*/
/*Hgroup:nth-child(1) + section{
display: block;
z-index: 8;
}*/
Hgroup.active + section{
display: block;
z-index: 9;
}
/********************************/
/*** 1-2. Titres des sections ***/
/********************************/
Hgroup{
/* position */
display: block;
position: relative;
float: left;
margin-top: 5px;
margin-left: 1em;
height: 3em;
padding: 0 2em;
/* border */
border-radius: 3px 3px 0 0;
border: 1px solid transparent;
border-bottom-color: #aaa;
/* background */
background-color: inherit;
/* foreground */
color: #666;
text-align: center;
line-height: 3em;
/* Xtra */
cursor: pointer;
/* animation */
transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-webkit-transition: .1s ease-in-out;
-ms-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
/* z axis */
z-index: 10;
}
/*Hgroup:nth-child(1) ~ .active,*/
Hgroup.active{
/* border */
border-color: #aaa;
border-bottom-color: inherit;
/* foreground */
color: #000;
}
/********************************/
/*** 2-1. Tableaux génériques ***/
/********************************/
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;
border-spacing: 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
text-align: center;
}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
table tr:first-child th:first-child {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr {
padding-left:20px;
}
table td:first-child {
border-left: 0;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
/* http://johnsardine.com/example/simple-little-table/ */
/**********************/
/*** 3. Formulaires ***/
/**********************/
/* champs de texte */
section form input[type=text],
section form input[type=password]{
/* position */
display: block;
position: relative;
margin: 2em 0;
padding: .8em;
padding-left: 2.5em;
/* border */
border-radius: 3px;
border: 1px solid #aaa;
/* foreground */
font-family: inherit;
font-size: 1em;
color: #b1b1b1;
/* background */
background: #fff url(../src/input_icon/default_grayscale.svg) center left .35em no-repeat;
background-size: 1.8em 1.8em;
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;
}
/* boutons */
section form input[type=button]{
/* position */
display: block;
position: relative;
margin: 1em 0;
padding: .8em;
/* border */
border-radius: 3px;
border: 0;
box-shadow: 1px 1px 0 #207fa8, 2px 2px 0 #207fa8;
/* foreground */
font-family: inherit;
font-size: 1em;
color: #fff;
font-weight: bold;
/* background */
background: #29a2d6;
/* Xtra */
cursor: pointer;
}
/* clic sur les boutons */
section form input[type=button]:focus{
box-shadow: 0 0 0 transparent;
margin-top: calc( 1em + 2px );
margin-left: 2px;
}
/* quand on selectionne */
section form input[type=text]:focus,
section form input[type=password]:focus{
background-image: url(../src/input_icon/default.svg);
color: #000;
border-color: #29a2d6;
}
/* GESTION DES ICÔNES SPECIFIQUES */
section form input[type=password] { background-image: url(../src/input_icon/password_grayscale.svg); }
section form input[type=password]:focus{ background-image: url(../src/input_icon/password.svg); }
section form input.user { background-image: url(../src/input_icon/user_grayscale.svg); }
section form input.user:focus { background-image: url(../src/input_icon/user.svg); }