CSS   23
jquery jqplot
Guest on 26th May 2023 12:54:22 AM


  1. /*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/
  2. .jqplot-target {
  3.     position: relative;
  4.     color: #666666;
  5.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  6.     font-size: 1em;
  7. /*    height: 300px;
  8.     width: 400px;*/
  9. }
  10.  
  11. /*rules applied to all axes*/
  12. .jqplot-axis {
  13.     font-size: 0.75em;
  14. }
  15.  
  16. .jqplot-xaxis {
  17.     margin-top: 10px;
  18. }
  19.  
  20. .jqplot-x2axis {
  21.     margin-bottom: 10px;
  22. }
  23.  
  24. .jqplot-yaxis {
  25.     margin-right: 10px;
  26. }
  27.  
  28. .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis {
  29.     margin-left: 10px;
  30.     margin-right: 10px;
  31. }
  32.  
  33. /*rules applied to all axis tick divs*/
  34. .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {
  35.     position: absolute;
  36.     white-space: pre;
  37. }
  38.  
  39.  
  40. .jqplot-xaxis-tick {
  41.     top: 0px;
  42.     /* initial position untill tick is drawn in proper place */
  43.     left: 15px;
  44. /*    padding-top: 10px;*/
  45.     vertical-align: top;
  46. }
  47.  
  48. .jqplot-x2axis-tick {
  49.     bottom: 0px;
  50.     /* initial position untill tick is drawn in proper place */
  51.     left: 15px;
  52. /*    padding-bottom: 10px;*/
  53.     vertical-align: bottom;
  54. }
  55.  
  56. .jqplot-yaxis-tick {
  57.     right: 0px;
  58.     /* initial position untill tick is drawn in proper place */
  59.     top: 15px;
  60. /*    padding-right: 10px;*/
  61.     text-align: right;
  62. }
  63.  
  64. .jqplot-yaxis-tick.jqplot-breakTick {
  65.     right: -20px;
  66.     margin-right: 0px;
  67.     padding:1px 5px 1px 5px;
  68.     /*background-color: white;*/
  69.     z-index: 2;
  70.     font-size: 1.5em;
  71. }
  72.  
  73. .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
  74.     left: 0px;
  75.     /* initial position untill tick is drawn in proper place */
  76.     top: 15px;
  77. /*    padding-left: 10px;*/
  78. /*    padding-right: 15px;*/
  79.     text-align: left;
  80. }
  81.  
  82. .jqplot-yMidAxis-tick {
  83.     text-align: center;
  84.     white-space: nowrap;
  85. }
  86.  
  87. .jqplot-xaxis-label {
  88.     margin-top: 10px;
  89.     font-size: 11pt;
  90.     position: absolute;
  91. }
  92.  
  93. .jqplot-x2axis-label {
  94.     margin-bottom: 10px;
  95.     font-size: 11pt;
  96.     position: absolute;
  97. }
  98.  
  99. .jqplot-yaxis-label {
  100.     margin-right: 10px;
  101. /*    text-align: center;*/
  102.     font-size: 11pt;
  103.     position: absolute;
  104. }
  105.  
  106. .jqplot-yMidAxis-label {
  107.     font-size: 11pt;
  108.     position: absolute;
  109. }
  110.  
  111. .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label {
  112. /*    text-align: center;*/
  113.     font-size: 11pt;
  114.     margin-left: 10px;
  115.     position: absolute;
  116. }
  117.  
  118. .jqplot-meterGauge-tick {
  119.     font-size: 0.75em;
  120.     color: #999999;
  121. }
  122.  
  123. .jqplot-meterGauge-label {
  124.     font-size: 1em;
  125.     color: #999999;
  126. }
  127.  
  128. table.jqplot-table-legend {
  129.     margin-top: 12px;
  130.     margin-bottom: 12px;
  131.     margin-left: 12px;
  132.     margin-right: 12px;
  133. }
  134.  
  135. table.jqplot-table-legend, table.jqplot-cursor-legend {
  136.     background-color: rgba(255,255,255,0.6);
  137.     border: 1px solid #cccccc;
  138.     position: absolute;
  139.     font-size: 0.75em;
  140. }
  141.  
  142. td.jqplot-table-legend {
  143.     vertical-align:middle;
  144. }
  145.  
  146. /*
  147. These rules could be used instead of assigning
  148. element styles and relying on js object properties.
  149. */
  150.  
  151. /*
  152. td.jqplot-table-legend-swatch {
  153.     padding-top: 0.5em;
  154.     text-align: center;
  155. }
  156.  
  157. tr.jqplot-table-legend:first td.jqplot-table-legend-swatch {
  158.     padding-top: 0px;
  159. }
  160. */
  161.  
  162. td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
  163.     cursor: pointer;
  164. }
  165.  
  166. .jqplot-table-legend .jqplot-series-hidden {
  167.     text-decoration: line-through;
  168. }
  169.  
  170. div.jqplot-table-legend-swatch-outline {
  171.     border: 1px solid #cccccc;
  172.     padding:1px;
  173. }
  174.  
  175. div.jqplot-table-legend-swatch {
  176.     width:0px;
  177.     height:0px;
  178.     border-top-width: 5px;
  179.     border-bottom-width: 5px;
  180.     border-left-width: 6px;
  181.     border-right-width: 6px;
  182.     border-top-style: solid;
  183.     border-bottom-style: solid;
  184.     border-left-style: solid;
  185.     border-right-style: solid;
  186. }
  187.  
  188. .jqplot-title {
  189.     top: 0px;
  190.     left: 0px;
  191.     padding-bottom: 0.5em;
  192.     font-size: 1.2em;
  193. }
  194.  
  195. table.jqplot-cursor-tooltip {
  196.     border: 1px solid #cccccc;
  197.     font-size: 0.75em;
  198. }
  199.  
  200.  
  201. .jqplot-cursor-tooltip {
  202.     border: 1px solid #cccccc;
  203.     font-size: 0.75em;
  204.     white-space: nowrap;
  205.     background: rgba(208,208,208,0.5);
  206.     padding: 1px;
  207. }
  208.  
  209. .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
  210.     border: 1px solid #cccccc;
  211.     font-size: 0.75em;
  212.     white-space: nowrap;
  213.     background: rgba(208,208,208,0.5);
  214.     padding: 1px;
  215. }
  216.  
  217. .jqplot-point-label {
  218.     font-size: 0.75em;
  219.     z-index: 2;
  220. }
  221.      
  222. td.jqplot-cursor-legend-swatch {
  223.     vertical-align: middle;
  224.     text-align: center;
  225. }
  226.  
  227. div.jqplot-cursor-legend-swatch {
  228.     width: 1.2em;
  229.     height: 0.7em;
  230. }
  231.  
  232. .jqplot-error {
  233. /*   Styles added to the plot target container when there is an error go here.*/
  234.     text-align: center;
  235. }
  236.  
  237. .jqplot-error-message {
  238. /*    Styling of the custom error message div goes here.*/
  239.     position: relative;
  240.     top: 46%;
  241.     display: inline-block;
  242. }
  243.  
  244. div.jqplot-bubble-label {
  245.     font-size: 0.8em;
  246. /*    background: rgba(90%, 90%, 90%, 0.15);*/
  247.     padding-left: 2px;
  248.     padding-right: 2px;
  249.     color: rgb(20%, 20%, 20%);
  250. }
  251.  
  252. div.jqplot-bubble-label.jqplot-bubble-label-highlight {
  253.     background: rgba(90%, 90%, 90%, 0.7);
  254. }
  255.  
  256. div.jqplot-noData-container {
  257.     text-align: center;
  258.     background-color: rgba(96%, 96%, 96%, 0.3);
  259. }
  260.  
  261. .title_colud_panel .wsmTooltip .wsmTooltipText {
  262.   left: -25%;
  263.   top: -70px;
  264.   width: 120px;
  265. }
Raw Paste

Login or Register to edit or fork this paste. It's free.