cecbcb7d4b
This is just a WiP to test a new website template. Taken online from source referenced in the sidebar footer. Very nice and clean look, have not had the time to add all features yet and is only used to demonstrate it.
48 lines
2.7 KiB
CSS
48 lines
2.7 KiB
CSS
/*plugin styles*/
|
|
.visualize { border: 1px solid #bbb; position: relative; background: #fbfbfb; margin: 20px auto 40px auto; z-index: 1; }
|
|
.visualize canvas { position: absolute; }
|
|
.visualize ul, .visualize ul li { margin: 0; padding: 0; background: none; }
|
|
.visualize-bar { border-top: 0; }
|
|
|
|
/*table title, key elements*/
|
|
.visualize .visualize-info { padding: 0 0 2px 8px; background: #fafafa; border: 1px solid #aaa; position: absolute; top: -15px; right: 10px; font-size: 11px; }
|
|
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; }
|
|
.visualize ul.visualize-key { list-style: none; }
|
|
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
|
|
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; font-size: 6px; }
|
|
.visualize ul.visualize-key .visualize-key-label { color: #333; }
|
|
|
|
/*pie labels*/
|
|
.visualize-pie .visualize-labels { list-style: none; }
|
|
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
|
|
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
|
|
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
|
|
|
|
/*line,bar, area labels*/
|
|
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
|
|
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
|
|
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
|
|
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
|
|
.visualize-labels-x li { height: 100%; font-size: 10px; }
|
|
.visualize-labels-x li span.label { top: 100%; margin-top: 15px; left:-10; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }
|
|
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
|
|
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
|
|
.visualize-labels-y li { width: 100%; font-size: 11px; line-height: normal; }
|
|
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
|
|
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
|
|
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
|
|
|
|
/*tooltips*/
|
|
.visualize .chart_tooltip {
|
|
padding: 6px 7px;
|
|
background: #000;
|
|
background: url(../images/mbg.png) 0 0 repeat;
|
|
margin: 3px 4px 0;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
color: #ddd;
|
|
font-size: 10px;
|
|
line-height: normal;
|
|
}
|