ScoDocMM/static/css/verticalhisto.css

89 lines
2.3 KiB
CSS

#vhist-q-graph {
/* Ceci est la classe du UL principal qui contient toute sles autres données */
/* Définir un Width et un Height est essentiel, c'est ca qui donne les dimension du graphique */
width: 428px;
height: 200px;
/* Ne pas oublier d'enlever le point qui se trouve a coté des LI */
list-style: none;
/* le reste n'est que positionnement et esthétique */
position: relative;
margin: 1.1em 0 3.5em;
padding: 0;
background: #DDD;
border: 2px solid gray;
font: 9px Helvetica, Geneva, sans-serif;
}
#vhist-q-graph ul {
/* Une colonne étant un UL dans un UL, on défini les paramètres des colonnes */
margin: 0;
padding: 0;
list-style: none;
}
#vhist-q-graph li {
/* Ceci défini les colonnes (largeur, positionnement des bâton a l'intérieur,position du titre...) */
position: absolute;
bottom: 0;
width: 150px;
z-index: 2;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}
#vhist-q-graph li.vhist-qtr { /* colonnes */
height: 198px;
padding-top: 2px;
/* border-right: 1px dotted #C4C4C4; */
color: #AAA;
border:0; /* sans colonnes */
}
#vhist-q-graph li.vhist-bar {
/* esthétique des batons */
width: 16px;
border: 1px solid;
border-bottom: none;
color: #000;
}
#vhist-q-graph li.vhist-bar p {
/* esthétique de titre dans les bâtons */
margin: 0px 0 0;
padding: 0;
}
p.leg { /* legende (sous l'axe horizontal) */
position: absolute;
bottom: -18px;
left: 2px;
width: 10px;
color: red;
text-align: right;
}
#vhist-q-graph li.vhist-sent {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
left: 5px;
/* esthétique d'un baton en particulier */
background: #DCA;
border-color: #EDC #BA9 #000 #EDC;
}
#vhist-q-graph li.vhist-paid {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
left: 77px;
/* esthétique d'un bâton en particulier */
background: #9D9;
border-color: #CDC #9B9 #000 #BFB;
}
/* position de la colonne 1 */
#vhist-q-graph #q1 {left: 0;}
/* position de la colonne 2 */
#vhist-q-graph #q2 {left: 150px;}
/* position de la colonne 3 */
#vhist-q-graph #q3 {left: 300px;}
/* position de la colonne 4 */
#vhist-q-graph #q4 {left: 450px; border-right: none;}
.vhist-bar {
background: yellow;
}