source: public/vendors/charts/apex/apexcharts.css@ 7304c7f

develop
Last change on this file since 7304c7f was 7304c7f, checked in by beratkjufliju <kufliju@…>, 3 years ago

added user authentication, create & forgot password methods and blades

  • Property mode set to 100644
File size: 11.2 KB
Line 
1.apexcharts-canvas {
2 position: relative;
3 user-select: none;
4 /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
5}
6
7/* scrollbar is not visible by default for legend, hence forcing the visibility */
8.apexcharts-canvas ::-webkit-scrollbar {
9 -webkit-appearance: none;
10 width: 6px;
11}
12.apexcharts-canvas ::-webkit-scrollbar-thumb {
13 border-radius: 4px;
14 background-color: rgba(0,0,0,.5);
15 box-shadow: 0 0 1px rgba(255,255,255,.5);
16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
17}
18.apexcharts-canvas.dark {
19 background: #343F57;
20}
21
22.apexcharts-inner {
23 position: relative;
24}
25
26.legend-mouseover-inactive {
27 transition: 0.15s ease all;
28 opacity: 0.20;
29}
30
31.apexcharts-series-collapsed {
32 opacity: 0;
33}
34
35.apexcharts-gridline, .apexcharts-text {
36 pointer-events: none;
37}
38
39.apexcharts-tooltip {
40 border-radius: 5px;
41 box-shadow: 2px 2px 6px -4px #999;
42 cursor: default;
43 font-size: 14px;
44 left: 62px;
45 opacity: 0;
46 pointer-events: none;
47 position: absolute;
48 top: 20px;
49 overflow: hidden;
50 white-space: nowrap;
51 z-index: 12;
52 transition: 0.15s ease all;
53}
54.apexcharts-tooltip.light {
55 border: 1px solid #e3e3e3;
56 background: rgba(255, 255, 255, 0.96);
57}
58.apexcharts-tooltip.dark {
59 color: #fff;
60 background: rgba(30,30,30, 0.8);
61}
62.apexcharts-tooltip * {
63 font-family: inherit;
64}
65
66.apexcharts-tooltip .apexcharts-marker,
67.apexcharts-area-series .apexcharts-area,
68.apexcharts-line {
69 pointer-events: none;
70}
71
72.apexcharts-tooltip.active {
73 opacity: 1;
74 transition: 0.15s ease all;
75}
76
77.apexcharts-tooltip-title {
78 padding: 6px;
79 font-size: 15px;
80 margin-bottom: 4px;
81}
82.apexcharts-tooltip.light .apexcharts-tooltip-title {
83 background: #ECEFF1;
84 border-bottom: 1px solid #ddd;
85}
86.apexcharts-tooltip.dark .apexcharts-tooltip-title {
87 background: rgba(0, 0, 0, 0.7);
88 border-bottom: 1px solid #333;
89}
90
91.apexcharts-tooltip-text-value,
92.apexcharts-tooltip-text-z-value {
93 display: inline-block;
94 font-weight: 600;
95 margin-left: 5px;
96}
97
98.apexcharts-tooltip-text-z-label:empty,
99.apexcharts-tooltip-text-z-value:empty {
100 display: none;
101}
102
103.apexcharts-tooltip-text-value,
104.apexcharts-tooltip-text-z-value {
105 font-weight: 600;
106}
107
108.apexcharts-tooltip-marker {
109 width: 12px;
110 height: 12px;
111 position: relative;
112 top: 0px;
113 margin-right: 10px;
114 border-radius: 50%;
115}
116
117.apexcharts-tooltip-series-group {
118 padding: 0 10px;
119 display: none;
120 text-align: left;
121 justify-content: left;
122 align-items: center;
123}
124
125.apexcharts-tooltip-series-group.active .apexcharts-tooltip-marker {
126 opacity: 1;
127}
128.apexcharts-tooltip-series-group.active, .apexcharts-tooltip-series-group:last-child {
129 padding-bottom: 4px;
130}
131.apexcharts-tooltip-series-group-hidden {
132 opacity: 0;
133 height: 0;
134 line-height: 0;
135 padding: 0 !important;
136}
137.apexcharts-tooltip-y-group {
138 padding: 6px 0 5px;
139}
140.apexcharts-tooltip-candlestick {
141 padding: 4px 8px;
142}
143.apexcharts-tooltip-candlestick > div {
144 margin: 4px 0;
145}
146.apexcharts-tooltip-candlestick span.value {
147 font-weight: bold;
148}
149
150.apexcharts-tooltip-rangebar {
151 padding: 5px 8px;
152}
153
154.apexcharts-tooltip-rangebar .category {
155 font-weight: 600;
156 color: #777;
157}
158
159.apexcharts-tooltip-rangebar .series-name {
160 font-weight: bold;
161 display: block;
162 margin-bottom: 5px;
163}
164
165.apexcharts-xaxistooltip {
166 opacity: 0;
167 padding: 9px 10px;
168 pointer-events: none;
169 color: #373d3f;
170 font-size: 13px;
171 text-align: center;
172 border-radius: 2px;
173 position: absolute;
174 z-index: 10;
175 background: #ECEFF1;
176 border: 1px solid #90A4AE;
177 transition: 0.15s ease all;
178}
179
180.apexcharts-xaxistooltip.dark {
181 background: rgba(0, 0, 0, 0.7);
182 border: 1px solid rgba(0, 0, 0, 0.5);
183 color: #fff;
184}
185
186.apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before {
187 left: 50%;
188 border: solid transparent;
189 content: " ";
190 height: 0;
191 width: 0;
192 position: absolute;
193 pointer-events: none;
194}
195
196.apexcharts-xaxistooltip:after {
197 border-color: rgba(236, 239, 241, 0);
198 border-width: 6px;
199 margin-left: -6px;
200}
201.apexcharts-xaxistooltip:before {
202 border-color: rgba(144, 164, 174, 0);
203 border-width: 7px;
204 margin-left: -7px;
205}
206
207.apexcharts-xaxistooltip-bottom:after, .apexcharts-xaxistooltip-bottom:before {
208 bottom: 100%;
209}
210
211.apexcharts-xaxistooltip-top:after, .apexcharts-xaxistooltip-top:before {
212 top: 100%;
213}
214
215.apexcharts-xaxistooltip-bottom:after {
216 border-bottom-color: #ECEFF1;
217}
218.apexcharts-xaxistooltip-bottom:before {
219 border-bottom-color: #90A4AE;
220}
221
222.apexcharts-xaxistooltip-bottom.dark:after {
223 border-bottom-color: rgba(0, 0, 0, 0.5);
224}
225.apexcharts-xaxistooltip-bottom.dark:before {
226 border-bottom-color: rgba(0, 0, 0, 0.5);
227}
228
229.apexcharts-xaxistooltip-top:after {
230 border-top-color:#ECEFF1
231}
232.apexcharts-xaxistooltip-top:before {
233 border-top-color: #90A4AE;
234}
235.apexcharts-xaxistooltip-top.dark:after {
236 border-top-color:rgba(0, 0, 0, 0.5);
237}
238.apexcharts-xaxistooltip-top.dark:before {
239 border-top-color: rgba(0, 0, 0, 0.5);
240}
241
242
243.apexcharts-xaxistooltip.active {
244 opacity: 1;
245 transition: 0.15s ease all;
246}
247
248.apexcharts-yaxistooltip {
249 opacity: 0;
250 padding: 4px 10px;
251 pointer-events: none;
252 color: #373d3f;
253 font-size: 13px;
254 text-align: center;
255 border-radius: 2px;
256 position: absolute;
257 z-index: 10;
258 background: #ECEFF1;
259 border: 1px solid #90A4AE;
260}
261
262.apexcharts-yaxistooltip.dark {
263 background: rgba(0, 0, 0, 0.7);
264 border: 1px solid rgba(0, 0, 0, 0.5);
265 color: #fff;
266}
267
268.apexcharts-yaxistooltip:after, .apexcharts-yaxistooltip:before {
269 top: 50%;
270 border: solid transparent;
271 content: " ";
272 height: 0;
273 width: 0;
274 position: absolute;
275 pointer-events: none;
276}
277.apexcharts-yaxistooltip:after {
278 border-color: rgba(236, 239, 241, 0);
279 border-width: 6px;
280 margin-top: -6px;
281}
282.apexcharts-yaxistooltip:before {
283 border-color: rgba(144, 164, 174, 0);
284 border-width: 7px;
285 margin-top: -7px;
286}
287
288.apexcharts-yaxistooltip-left:after, .apexcharts-yaxistooltip-left:before {
289 left: 100%;
290}
291
292.apexcharts-yaxistooltip-right:after, .apexcharts-yaxistooltip-right:before {
293 right: 100%;
294}
295
296.apexcharts-yaxistooltip-left:after {
297 border-left-color: #ECEFF1;
298}
299.apexcharts-yaxistooltip-left:before {
300 border-left-color: #90A4AE;
301}
302.apexcharts-yaxistooltip-left.dark:after {
303 border-left-color: rgba(0, 0, 0, 0.5);
304}
305.apexcharts-yaxistooltip-left.dark:before {
306 border-left-color: rgba(0, 0, 0, 0.5);
307}
308
309.apexcharts-yaxistooltip-right:after {
310 border-right-color: #ECEFF1;
311}
312.apexcharts-yaxistooltip-right:before {
313 border-right-color: #90A4AE;
314}
315.apexcharts-yaxistooltip-right.dark:after {
316 border-right-color: rgba(0, 0, 0, 0.5);
317}
318.apexcharts-yaxistooltip-right.dark:before {
319 border-right-color: rgba(0, 0, 0, 0.5);
320}
321
322.apexcharts-yaxistooltip.active {
323 opacity: 1;
324}
325
326.apexcharts-xcrosshairs, .apexcharts-ycrosshairs {
327 pointer-events: none;
328 opacity: 0;
329 transition: 0.15s ease all;
330}
331
332.apexcharts-xcrosshairs.active, .apexcharts-ycrosshairs.active {
333 opacity: 1;
334 transition: 0.15s ease all;
335}
336
337.apexcharts-ycrosshairs-hidden {
338 opacity: 0;
339}
340
341.apexcharts-zoom-rect {
342 pointer-events: none;
343}
344.apexcharts-selection-rect {
345 cursor: move;
346}
347
348.svg_select_points, .svg_select_points_rot {
349 opacity: 0;
350 visibility: hidden;
351}
352.svg_select_points_l, .svg_select_points_r {
353 cursor: ew-resize;
354 opacity: 1;
355 visibility: visible;
356 fill: #888;
357}
358.apexcharts-canvas.zoomable .hovering-zoom {
359 cursor: crosshair
360}
361.apexcharts-canvas.zoomable .hovering-pan {
362 cursor: move
363}
364
365.apexcharts-xaxis,
366.apexcharts-yaxis {
367 pointer-events: none;
368}
369
370.apexcharts-zoom-icon,
371.apexcharts-zoom-in-icon,
372.apexcharts-zoom-out-icon,
373.apexcharts-reset-zoom-icon,
374.apexcharts-pan-icon,
375.apexcharts-selection-icon,
376.apexcharts-menu-icon,
377.apexcharts-toolbar-custom-icon {
378 cursor: pointer;
379 width: 20px;
380 height: 20px;
381 line-height: 24px;
382 color: #6E8192;
383 text-align: center;
384}
385
386
387.apexcharts-zoom-icon svg,
388.apexcharts-zoom-in-icon svg,
389.apexcharts-zoom-out-icon svg,
390.apexcharts-reset-zoom-icon svg,
391.apexcharts-menu-icon svg {
392 fill: #6E8192;
393}
394.apexcharts-selection-icon svg {
395 fill: #444;
396 transform: scale(0.76)
397}
398
399.dark .apexcharts-zoom-icon svg,
400.dark .apexcharts-zoom-in-icon svg,
401.dark .apexcharts-zoom-out-icon svg,
402.dark .apexcharts-reset-zoom-icon svg,
403.dark .apexcharts-pan-icon svg,
404.dark .apexcharts-selection-icon svg,
405.dark .apexcharts-menu-icon svg,
406.dark .apexcharts-toolbar-custom-icon svg{
407 fill: #f3f4f5;
408}
409
410.apexcharts-canvas .apexcharts-zoom-icon.selected svg,
411.apexcharts-canvas .apexcharts-selection-icon.selected svg,
412.apexcharts-canvas .apexcharts-reset-zoom-icon.selected svg {
413 fill: #008FFB;
414}
415.light .apexcharts-selection-icon:not(.selected):hover svg,
416.light .apexcharts-zoom-icon:not(.selected):hover svg,
417.light .apexcharts-zoom-in-icon:hover svg,
418.light .apexcharts-zoom-out-icon:hover svg,
419.light .apexcharts-reset-zoom-icon:hover svg,
420.light .apexcharts-menu-icon:hover svg {
421 fill: #333;
422}
423
424.apexcharts-selection-icon, .apexcharts-menu-icon {
425 position: relative;
426}
427.apexcharts-reset-zoom-icon {
428 margin-left: 5px;
429}
430.apexcharts-zoom-icon, .apexcharts-reset-zoom-icon, .apexcharts-menu-icon {
431 transform: scale(0.85);
432}
433
434.apexcharts-zoom-in-icon, .apexcharts-zoom-out-icon {
435 transform: scale(0.7)
436}
437
438.apexcharts-zoom-out-icon {
439 margin-right: 3px;
440}
441
442.apexcharts-pan-icon {
443 transform: scale(0.62);
444 position: relative;
445 left: 1px;
446 top: 0px;
447}
448.apexcharts-pan-icon svg {
449 fill: #fff;
450 stroke: #6E8192;
451 stroke-width: 2;
452}
453.apexcharts-pan-icon.selected svg {
454 stroke: #008FFB;
455}
456.apexcharts-pan-icon:not(.selected):hover svg {
457 stroke: #333;
458}
459
460.apexcharts-toolbar {
461 position: absolute;
462 z-index: 11;
463 top: 0px;
464 right: 3px;
465 max-width: 176px;
466 text-align: right;
467 border-radius: 3px;
468 padding: 0px 6px 2px 6px;
469 display: flex;
470 justify-content: space-between;
471 align-items: center;
472}
473
474.apexcharts-toolbar svg {
475 pointer-events: none;
476}
477
478.apexcharts-menu {
479 background: #fff;
480 position: absolute;
481 top: 100%;
482 border: 1px solid #ddd;
483 border-radius: 3px;
484 padding: 3px;
485 right: 10px;
486 opacity: 0;
487 min-width: 110px;
488 transition: 0.15s ease all;
489 pointer-events: none;
490}
491
492.apexcharts-menu.open {
493 opacity: 1;
494 pointer-events: all;
495 transition: 0.15s ease all;
496}
497
498.apexcharts-menu-item {
499 padding: 6px 7px;
500 font-size: 12px;
501 cursor: pointer;
502}
503.light .apexcharts-menu-item:hover {
504 background: #eee;
505}
506.dark .apexcharts-menu {
507 background: rgba(0, 0, 0, 0.7);
508 color: #fff;
509}
510
511@media screen and (min-width: 768px) {
512 .apexcharts-toolbar {
513 /*opacity: 0;*/
514 }
515
516 .apexcharts-canvas:hover .apexcharts-toolbar {
517 opacity: 1;
518 }
519}
520
521.apexcharts-datalabel.hidden {
522 opacity: 0;
523}
524
525.apexcharts-pie-label,
526.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value {
527 cursor: default;
528 pointer-events: none;
529}
530
531.apexcharts-pie-label-delay {
532 opacity: 0;
533 animation-name: opaque;
534 animation-duration: 0.3s;
535 animation-fill-mode: forwards;
536 animation-timing-function: ease;
537}
538
539.apexcharts-canvas .hidden {
540 opacity: 0;
541}
542
543.apexcharts-hide .apexcharts-series-points {
544 opacity: 0;
545}
546
547.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
548.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, .apexcharts-radar-series path, .apexcharts-radar-series polygon {
549 pointer-events: none;
550}
551
552/* markers */
553
554.apexcharts-marker {
555 transition: 0.15s ease all;
556}
557
558@keyframes opaque {
559 0% {
560 opacity: 0;
561 }
562 100% {
563 opacity: 1;
564 }
565}
Note: See TracBrowser for help on using the repository browser.