Free cookie consent management tool by TermsFeed Policy Generator

source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/jquery.jqplot.css @ 16654

Last change on this file since 16654 was 9062, checked in by fschoepp, 12 years ago

#1888:
Backend changes:

  • Simplified job state detection (only one hive call will be made to detect all states now, instead of one additional call per job)
  • Reorganized classes (moved model classes into Model folder)

Website changes:

  • Website now heavily uses JavaScript to achieve better user experience
  • JavaScript degrades gracefully, except for plots
  • Tables: Added jquery-datatable-plugin to extend tables (pagination + search functionality)
  • OaaS-Website now uses the design of the HL websites (found in WebApplication branch)
  • Added jqplot to render zoomable line plots for HL-Datatables
  • Styling.js: Plots will be generated by using an ajax call; additional jquery-styling occurs within this file.
  • Added jquery-ui-1.9.2 which is capable of handling/rendering tabs, accordions and resizers.
File size: 4.8 KB
Line 
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 {
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 {
35    position: absolute;
36}
37
38
39.jqplot-xaxis-tick {
40    top: 0px;
41    /* initial position untill tick is drawn in proper place */
42    left: 15px;
43/*    padding-top: 10px;*/
44    vertical-align: top;
45}
46
47.jqplot-x2axis-tick {
48    bottom: 0px;
49    /* initial position untill tick is drawn in proper place */
50    left: 15px;
51/*    padding-bottom: 10px;*/
52    vertical-align: bottom;
53}
54
55.jqplot-yaxis-tick {
56    right: 0px;
57    /* initial position untill tick is drawn in proper place */
58    top: 15px;
59/*    padding-right: 10px;*/
60    text-align: right;
61}
62
63.jqplot-yaxis-tick.jqplot-breakTick {
64  right: -20px;
65  margin-right: 0px;
66  padding:1px 5px 1px 5px;
67/*  background-color: white;*/
68  z-index: 2;
69  font-size: 1.5em;
70}
71
72.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
73    left: 0px;
74    /* initial position untill tick is drawn in proper place */
75    top: 15px;
76/*    padding-left: 10px;*/
77/*    padding-right: 15px;*/
78    text-align: left;
79}
80
81.jqplot-meterGauge-tick {
82    font-size: 0.75em;
83    color: #999999;
84}
85
86.jqplot-meterGauge-label {
87    font-size: 1em;
88    color: #999999;
89}
90.jqplot-xaxis-label {
91    margin-top: 10px;
92    font-size: 11pt;
93    position: absolute;
94}
95
96.jqplot-x2axis-label {
97    margin-bottom: 10px;
98    font-size: 11pt;
99    position: absolute;
100}
101
102.jqplot-yaxis-label {
103    margin-right: 10px;
104/*    text-align: center;*/
105    font-size: 11pt;
106    position: absolute;
107}
108
109.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label {
110/*    text-align: center;*/
111    font-size: 11pt;
112    position: absolute;
113}
114
115table.jqplot-table-legend {
116    margin-top: 12px;
117    margin-bottom: 12px;
118    margin-left: 12px;
119    margin-right: 12px;
120}
121
122table.jqplot-table-legend, table.jqplot-cursor-legend {
123    background-color: rgba(255,255,255,0.6);
124    border: 1px solid #cccccc;
125    position: absolute;
126    font-size: 0.75em;
127}
128
129td.jqplot-table-legend {
130    vertical-align:middle;
131}
132
133td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
134    cursor: pointer;
135}
136
137td.jqplot-table-legend > div {
138    border: 1px solid #cccccc;
139    padding:1px;
140}
141
142div.jqplot-table-legend-swatch {
143    width:0px;
144    height:0px;
145    border-top-width: 5px;
146    border-bottom-width: 5px;
147    border-left-width: 6px;
148    border-right-width: 6px;
149    border-top-style: solid;
150    border-bottom-style: solid;
151    border-left-style: solid;
152    border-right-style: solid;
153}
154
155.jqplot-title {
156    top: 0px;
157    left: 0px;
158    padding-bottom: 0.5em;
159    font-size: 1.2em;
160}
161
162table.jqplot-cursor-tooltip {
163    border: 1px solid #cccccc;
164    font-size: 0.75em;
165}
166
167
168.jqplot-cursor-tooltip {
169    border: 1px solid #cccccc;
170    font-size: 0.75em;
171    white-space: nowrap;
172    background: rgba(208,208,208,0.5);
173    padding: 1px;
174}
175
176.jqplot-highlighter-tooltip {
177    border: 1px solid #cccccc;
178    font-size: 0.75em;
179    white-space: nowrap;
180    background: rgba(208,208,208,0.5);
181    padding: 1px;
182}
183
184.jqplot-point-label {
185    font-size: 0.75em;
186    z-index: 2;
187}
188     
189td.jqplot-cursor-legend-swatch {
190vertical-align:middle;
191text-align:center;
192}
193
194div.jqplot-cursor-legend-swatch {
195width:1.2em;
196height:0.7em;
197}
198
199.jqplot-error {
200/*   Styles added to the plot target container when there is an error go here.*/
201    text-align: center;
202}
203
204.jqplot-error-message {
205/*    Styling of the custom error message div goes here.*/
206    position: relative;
207    top: 46%;
208    display: inline-block;
209}
210
211div.jqplot-bubble-label {
212    font-size: 0.8em;
213/*    background: rgba(90%, 90%, 90%, 0.15);*/
214    padding-left: 2px;
215    padding-right: 2px;
216    color: rgb(20%, 20%, 20%);
217}
218
219div.jqplot-bubble-label.jqplot-bubble-label-highlight {
220    background: rgba(90%, 90%, 90%, 0.7);
221}
222
223div.jqplot-noData-container {
224  text-align: center;
225  background-color: rgba(96%, 96%, 96%, 0.3);
226}
Note: See TracBrowser for help on using the repository browser.