1
0
forked from ScoDoc/ScoDoc
ScoDoc-Front/app/static/css/verticalhisto.css

89 lines
2.3 KiB
CSS
Raw Permalink Normal View History

2020-09-26 16:19:37 +02:00
#vhist-q-graph {
/* Ceci est la classe du UL principal qui contient toute sles autres donn<6E>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<6F> des LI */
list-style: none;
/* le reste n'est que positionnement et esth<74>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 <20>tant un UL dans un UL, on d<>fini les param<61>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<6E>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<74>tique des batons */
width: 16px;
border: 1px solid;
border-bottom: none;
color: #000;
}
#vhist-q-graph li.vhist-bar p {
/* esth<74>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<6E> a espacer les b<>ton !! */
left: 5px;
/* esth<74>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<6E> a espacer les b<>ton !! */
left: 77px;
/* esth<74>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;
}