1 | @import '@nearform/clinic-common/styles/styles.css';
|
2 |
|
3 |
|
4 | html {
|
5 | --main-bg-color: rgb(27, 30, 39);
|
6 |
|
7 | --nc-colour-header-background: rgb(41, 45, 57);
|
8 |
|
9 | --alert-border-color: rgb(68, 75, 96);
|
10 | --alert-bg-color: rgb(55, 61, 79);
|
11 | --alert-text-color: rgb(255, 255, 255);
|
12 | --alert-button-color: rgb(200, 201, 203);
|
13 | --alert-indicator-color: rgb(233, 67, 100);
|
14 |
|
15 | --menu-button-color: rgb(200, 201, 203);
|
16 | --button-highlight-color: rgb(255, 255, 255);
|
17 |
|
18 | --graph-text-color: rgb(255, 255, 255);
|
19 | --graph-bg-color: rgb(27, 30, 39);
|
20 | --graph-interval-color: rgba(255, 255, 255, 0.05);
|
21 | --graph-axis-color: rgb(89, 90, 95);
|
22 | --graph-tick-color: rgb(151, 151, 151);
|
23 | --graph-good-line-color: rgb(74, 144, 226);
|
24 | --graph-bad-line-color: rgb(233, 67, 100);
|
25 | --graph-alert-color: rgb(233, 67, 100);
|
26 |
|
27 | --hover-text-color: rgb(255, 255, 255);
|
28 | --hover-bg-color: rgba(82, 87, 111, 0.92);
|
29 | --hover-line-color: rgb(100, 107, 127);
|
30 |
|
31 | --recommendbar-text-color: rgb(255, 255, 255);
|
32 | --recommendbar-arrow-color: rgb(231, 239, 248);
|
33 | --recommendbar-top-line-color: rgb(96, 147, 208);
|
34 | --recommendbar-bg-color: rgb(63, 125, 198);
|
35 |
|
36 | --recommend-text-color: rgb(255, 255, 255);
|
37 | --recommend-title-bg-color: rgba(0, 0, 0, 0.15);
|
38 | --recommend-link-color: rgb(62, 167, 244);
|
39 | --recommend-close-color: rgb(62, 167, 244);
|
40 | --recommend-menu-selected-color: rgb(63, 125, 198);
|
41 | --recommend-menu-alert-color: rgb(233, 67, 100);
|
42 | --recommend-bg-color: rgba(55, 61, 79, 0.99);
|
43 |
|
44 | --article-menu-color: rgb(27, 30, 39);
|
45 | }
|
46 |
|
47 | html.light-theme {
|
48 | --main-bg-color: rgb(239, 239, 239);
|
49 |
|
50 | --nc-colour-header-background: rgb(65, 69, 85);
|
51 |
|
52 | --alert-bg-color: rgb(227, 227, 227);
|
53 | --alert-border-color: rgb(189, 189, 189);
|
54 | --alert-text-color: rgb(101, 101, 101);
|
55 | --alert-button-color: rgb(123, 128, 146);
|
56 |
|
57 | --menu-button-color: rgb(123, 128, 146);
|
58 | --button-highlight-color: rgb(65, 69, 85);
|
59 |
|
60 | --graph-text-color: rgb(101, 101, 101);
|
61 | --graph-bg-color: rgb(227, 227, 227);
|
62 | --graph-interval-color: rgba(0, 0, 0, 0.1);
|
63 | --graph-axis-color: rgb(189, 189, 189);
|
64 |
|
65 | --recommend-text-color: rgb(20, 20, 20);
|
66 | --recommend-link-color: rgb(31, 91, 162);
|
67 | --recommend-close-color: rgb(63, 125, 198);
|
68 | --recommend-bg-color: rgb(209, 211, 218);
|
69 |
|
70 | --article-menu-color: rgb(227, 227, 227);
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | html, body {
|
79 | border: 0;
|
80 | margin: 0;
|
81 | padding: 0;
|
82 | }
|
83 |
|
84 | body {
|
85 | background: var(--main-bg-color);
|
86 | overflow-x: hidden;
|
87 |
|
88 | }
|
89 |
|
90 |
|
91 |
|
92 | html.recommendation-open.recommendation-read-more-open {
|
93 | overflow-y: hidden;
|
94 | }
|
95 |
|
96 | #front-matter {
|
97 | display: flex;
|
98 | align-items: flex-start;
|
99 | margin: 22px 45px 24px 49px;
|
100 | overflow: hidden;
|
101 | }
|
102 |
|
103 | #front-matter #alert {
|
104 | flex: 1 1 0px;
|
105 | min-width: 0;
|
106 | }
|
107 |
|
108 | #front-matter #menu {
|
109 | flex: 0 0 auto;
|
110 | height: 24px;
|
111 | width: 80px;
|
112 | margin-top: 5px;
|
113 | }
|
114 |
|
115 | #graph {
|
116 | display: grid;
|
117 | grid-template-columns: 100%;
|
118 | grid-template-rows: 200px 200px 200px 200px;
|
119 | grid-template-areas:
|
120 | "cpu"
|
121 | "memory"
|
122 | "delay"
|
123 | "handles";
|
124 | grid-column-gap: 20px;
|
125 | grid-row-gap: 50px;
|
126 | margin-right: 20px;
|
127 | }
|
128 |
|
129 | html.grid-layout #graph {
|
130 | grid-template-columns: 1fr 1fr;
|
131 | grid-template-rows: 200px 200px;
|
132 | grid-template-areas:
|
133 | "cpu memory"
|
134 | "delay handles";
|
135 | }
|
136 |
|
137 | #graph .sub-graph.cpu {
|
138 | grid-area: cpu;
|
139 | }
|
140 |
|
141 | #graph .sub-graph.memory {
|
142 | grid-area: memory;
|
143 | }
|
144 |
|
145 | #graph .sub-graph.delay {
|
146 | grid-area: delay;
|
147 | }
|
148 |
|
149 | #graph .sub-graph.handles {
|
150 | grid-area: handles;
|
151 | }
|
152 |
|
153 |
|
154 |
|
155 | html {
|
156 | font-family: sans-serif;
|
157 | }
|
158 |
|
159 | html .nc-header, html #front-matter, html #graph, html #graph .hover text, html #recommendation .details {
|
160 | |
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 | -webkit-font-smoothing: antialiased;
|
168 | -moz-osx-font-smoothing: grayscale;
|
169 | }
|
170 |
|
171 | html.light-theme #front-matter, html.light-theme #graph, html.light-theme #recommendation .details {
|
172 | -webkit-font-smoothing: unset;
|
173 | -moz-osx-font-smoothing: unset;
|
174 | }
|
175 |
|
176 |
|
177 |
|
178 | #alert {
|
179 | border: 1px solid var(--alert-border-color);
|
180 | border-radius: 4px;
|
181 | background: var(--alert-bg-color);
|
182 | color: var(--alert-text-color);
|
183 | padding: 5px 13px;
|
184 | min-height: 22px;
|
185 | max-height: 22px;
|
186 | transition: max-height 0.15s;
|
187 | }
|
188 |
|
189 | #alert.open {
|
190 | max-height: 10em;
|
191 | }
|
192 |
|
193 | #alert .summary {
|
194 | display: flex;
|
195 | height: 22px;
|
196 | align-items: center;
|
197 | }
|
198 | #alert.has-issue .summary {
|
199 | cursor: pointer;
|
200 | }
|
201 |
|
202 | #alert .summary svg.alert {
|
203 | display: none;
|
204 | flex: 0 0 auto;
|
205 | height: 18px;
|
206 | width: 18px;
|
207 | fill: var(--alert-indicator-color);
|
208 | }
|
209 | #alert.has-issue .summary svg.alert {
|
210 | display: block;
|
211 | }
|
212 |
|
213 | #alert .summary .title {
|
214 | flex: 1 1 0px;
|
215 | padding: 0 8px;
|
216 | white-space: nowrap;
|
217 | text-overflow: ellipsis;
|
218 | overflow: hidden;
|
219 | }
|
220 |
|
221 | #alert .summary .toggle {
|
222 | display: none;
|
223 | flex: 0 0 auto;
|
224 |
|
225 | position: relative;
|
226 | width: 26px;
|
227 | height: 26px;
|
228 | overflow: hidden;
|
229 |
|
230 | cursor: pointer;
|
231 | }
|
232 | #alert.has-issue .summary .toggle {
|
233 | display: block;
|
234 | }
|
235 |
|
236 | #alert .summary .toggle svg {
|
237 |
|
238 | position: absolute;
|
239 | top: 0;
|
240 | left: 0;
|
241 | width: 100%;
|
242 | height: 100%;
|
243 | fill: var(--alert-button-color);
|
244 | }
|
245 |
|
246 | #alert .summary:hover .toggle svg {
|
247 |
|
248 | fill: var(--button-highlight-color);
|
249 | transform: scale(1.15);
|
250 | }
|
251 |
|
252 | #alert:not(.open) .summary .toggle svg.arrow-up { display: none; }
|
253 | #alert.open .summary .toggle svg.arrow-down { display: none; }
|
254 |
|
255 | #alert ul.details {
|
256 | margin: 8px 0 0 0;
|
257 | padding: 0;
|
258 | list-style: none;
|
259 | }
|
260 |
|
261 | #alert ul.details li {
|
262 | padding: 5px 0px;
|
263 | cursor: pointer;
|
264 | }
|
265 |
|
266 | #alert ul.details li span {
|
267 | border-bottom: 2px solid transparent;
|
268 | height: 16px;
|
269 | display: inline-block;
|
270 | }
|
271 | #alert ul.details li:hover span {
|
272 | border-bottom-color: var(--graph-alert-color);
|
273 | }
|
274 |
|
275 | #alert ul.details li::before {
|
276 | display: inline-block;
|
277 | width: 18px;
|
278 | content: '•';
|
279 | padding: 0 2px 0 6px;
|
280 | }
|
281 |
|
282 | #menu .toggle {
|
283 | float: right;
|
284 | cursor: pointer;
|
285 | height: 18px;
|
286 | padding: 2px;
|
287 | margin-left: 10px;
|
288 | }
|
289 |
|
290 | #menu svg {
|
291 | fill: var(--menu-button-color);
|
292 | }
|
293 | #menu svg:hover {
|
294 | fill: var(--button-highlight-color);
|
295 | }
|
296 |
|
297 | #toggle-grid svg {
|
298 | height: 18px;
|
299 | width: 18px;
|
300 | }
|
301 |
|
302 | #menu svg#toggle-theme {
|
303 | height: 22px;
|
304 | width: 22px;
|
305 | padding: 1px;
|
306 | }
|
307 |
|
308 | html:not(.grid-layout) #toggle-grid svg.grid-1x4 {
|
309 | display: none;
|
310 | }
|
311 |
|
312 | html.grid-layout #toggle-grid svg.grid-2x2 {
|
313 | display: none;
|
314 | }
|
315 |
|
316 |
|
317 |
|
318 |
|
319 | #recommendation {
|
320 | display: flex;
|
321 | position: fixed;
|
322 | bottom: 0;
|
323 | z-index: 2;
|
324 | max-height: calc(100vh - 65px);
|
325 | width: 100%;
|
326 |
|
327 | flex-direction: column;
|
328 | justify-content: flex-end;
|
329 | align-items: stretch;
|
330 | }
|
331 |
|
332 | #recommendation .details {
|
333 | flex: 0 1 auto;
|
334 | box-sizing: border-box;
|
335 | min-height: 255px;
|
336 |
|
337 | display: none;
|
338 | overflow: hidden;
|
339 | flex-direction: column;
|
340 | justify-content: flex-start;
|
341 | align-items: stretch;
|
342 | }
|
343 | #recommendation.open .details {
|
344 | display: flex;
|
345 | }
|
346 | #recommendation.open.read-more-open .details {
|
347 | min-height: calc(100vh - 65px - 65px);
|
348 | }
|
349 |
|
350 |
|
351 |
|
352 | @media (max-height: 385px) {
|
353 | #recommendation .details {
|
354 | min-height: unset;
|
355 | }
|
356 | }
|
357 |
|
358 | #recommendation .details .menu {
|
359 | flex: 0 0 auto;
|
360 |
|
361 | display: flex;
|
362 | min-height: 48px;
|
363 | overflow: hidden;
|
364 | box-sizing: border-box;
|
365 | }
|
366 |
|
367 | #recommendation .details .menu ul {
|
368 | flex: 1 1 0px;
|
369 | align-self: flex-end;
|
370 | }
|
371 |
|
372 | #recommendation .details .menu .close {
|
373 | flex: 0 0 24px;
|
374 | height: 24px;
|
375 | width: 24px;
|
376 | align-self: flex-start;
|
377 | }
|
378 |
|
379 | #recommendation .details .content {
|
380 | |
381 |
|
382 | position: relative;
|
383 |
|
384 | flex: 0 1 auto;
|
385 | |
386 |
|
387 |
|
388 | min-height: 0px;
|
389 |
|
390 | overflow-y: scroll;
|
391 | overscroll-behavior-y: contain;
|
392 | }
|
393 |
|
394 | #recommendation .details .content .read-more {
|
395 | display: none;
|
396 | }
|
397 | #recommendation.read-more-open .details .content .read-more {
|
398 | display: flex;
|
399 | }
|
400 |
|
401 | #recommendation .content .read-more .article {
|
402 | max-width: 550px;
|
403 | flex: 1 1 auto;
|
404 | }
|
405 |
|
406 | #recommendation .content .read-more .article-menu {
|
407 | flex: 0 0 240px;
|
408 | align-self: flex-start;
|
409 | position: sticky;
|
410 | top: 0;
|
411 | }
|
412 | @media (max-width: 670px) {
|
413 | #recommendation .content .read-more .article-menu {
|
414 | display: none;
|
415 | }
|
416 | }
|
417 |
|
418 |
|
419 | #recommendation .bar {
|
420 | flex: 0 0 65px;
|
421 | box-sizing: border-box;
|
422 | height: 65px;
|
423 | width: 100%;
|
424 | }
|
425 |
|
426 |
|
427 | #recommendation-space {
|
428 | margin-bottom: 75px;
|
429 | }
|
430 |
|
431 | #recommendation .details {
|
432 | background: var(--recommend-bg-color);
|
433 | color: var(--recommend-text-color);
|
434 | padding: 18px 28px;
|
435 | font-size: 12pt;
|
436 | line-height: 1.5em;
|
437 | }
|
438 |
|
439 | #recommendation .content a {
|
440 | color: var(--recommend-link-color);
|
441 | text-decoration: none;
|
442 | }
|
443 |
|
444 | #recommendation .content .summary-title {
|
445 | padding-top: 16px;
|
446 | }
|
447 |
|
448 | #recommendation .content .read-more-button {
|
449 | display: none;
|
450 | color: var(--recommend-link-color);
|
451 | cursor: pointer;
|
452 | }
|
453 |
|
454 | #recommendation.has-read-more .content .read-more-button {
|
455 | display: block;
|
456 | }
|
457 |
|
458 | #recommendation .content .read-more-button .read-more-button-text-less {
|
459 | display: none;
|
460 | }
|
461 |
|
462 | #recommendation.read-more-open .content .read-more-button .read-more-button-text {
|
463 | display: none;
|
464 | }
|
465 |
|
466 | #recommendation.read-more-open .content .read-more-button .read-more-button-text-less {
|
467 | display: block;
|
468 | }
|
469 |
|
470 | #recommendation.read-more-open .content .read-more-button {
|
471 | margin-bottom: 10px;
|
472 | }
|
473 |
|
474 | #recommendation .read-more-button-text svg {
|
475 | fill: currentColor;
|
476 | vertical-align: -30%;
|
477 | }
|
478 |
|
479 | #recommendation .content .article h2 {
|
480 | background: var(--recommend-title-bg-color);
|
481 | font-size: 12pt;
|
482 | padding: 12px;
|
483 | margin: 0;
|
484 | font-weight: bold;
|
485 | color: var(--recommend-text-color);
|
486 | }
|
487 |
|
488 | #recommendation .content .article p {
|
489 | line-height: 24px;
|
490 | margin-top: 18px;
|
491 | margin-bottom: 18px;
|
492 | }
|
493 |
|
494 | #recommendation .content .article-menu {
|
495 | margin-right: 40px;
|
496 | }
|
497 |
|
498 | #recommendation .content .article-menu h2 {
|
499 | font-size: 12pt;
|
500 | padding-left: 12px;
|
501 | }
|
502 |
|
503 | #recommendation .content .article-menu ul {
|
504 | list-style-type: none;
|
505 | margin: 0;
|
506 | padding: 0;
|
507 | }
|
508 |
|
509 | #recommendation .content .article-menu li {
|
510 | margin-bottom: 6px;
|
511 | padding: 12px;
|
512 | background-color: var(--article-menu-color);
|
513 | font-weight: bold;
|
514 | color: var(--recommend-text-color);
|
515 | cursor: pointer;
|
516 | }
|
517 |
|
518 | #recommendation .menu {
|
519 | border-bottom: 1px solid var(--recommend-menu-selected-color);
|
520 | }
|
521 |
|
522 | #recommendation .menu ul {
|
523 | list-style-type: none;
|
524 | padding: 0;
|
525 | margin: 0;
|
526 | }
|
527 |
|
528 | #recommendation .menu ul li {
|
529 | float: right;
|
530 | height: 35px;
|
531 | box-sizing: border-box;
|
532 | padding: 0px 4px 0 4px;
|
533 | border-bottom: 4px solid transparent;
|
534 | margin-right: 30px;
|
535 | cursor: pointer;
|
536 | }
|
537 |
|
538 | #recommendation .menu ul li.recommendation-tab {
|
539 | display: none;
|
540 | }
|
541 |
|
542 | #recommendation .menu ul li,
|
543 | #recommendation .menu ul li.detected,
|
544 | #recommendation .menu ul li.selected,
|
545 | #recommendation.undetected-opened .menu ul li.has-read-more {
|
546 | display: flex;
|
547 | }
|
548 |
|
549 | #recommendation .menu ul li.detected {
|
550 | float: left;
|
551 | }
|
552 |
|
553 | #recommendation .menu ul li.selected, #recommendation.open.read-more-open .article-menu li.selected {
|
554 | border-bottom: 4px solid var(--recommend-menu-selected-color);
|
555 | font-weight: bold;
|
556 | }
|
557 |
|
558 | #recommendation .menu ul li .menu-text {
|
559 | flex: 0 0 auto;
|
560 | align-self: center;
|
561 | display: block;
|
562 | line-height: 31px;
|
563 | }
|
564 |
|
565 | #recommendation .menu ul li .menu-text::before {
|
566 | display: block;
|
567 | width: 100%;
|
568 | content: attr(data-content);
|
569 | text-align: center;
|
570 | }
|
571 |
|
572 |
|
573 |
|
574 | #recommendation .menu ul li .menu-text::after {
|
575 | content: attr(data-content);
|
576 | display: block;
|
577 | font-weight: bold;
|
578 | height: 0;
|
579 | overflow: hidden;
|
580 | visibility: hidden;
|
581 | }
|
582 |
|
583 | #recommendation .menu ul li .warning-icon {
|
584 | flex: 0 0 auto;
|
585 | align-self: center;
|
586 | margin-left: 10px;
|
587 | height: 18px;
|
588 | width: 18px;
|
589 | display: none;
|
590 | fill: var(--recommend-menu-alert-color);
|
591 | }
|
592 | #recommendation .menu ul li.detected .warning-icon {
|
593 | display: block;
|
594 | }
|
595 |
|
596 | #recommendation .menu svg.close {
|
597 | fill: var(--recommend-close-color);
|
598 | cursor: pointer;
|
599 | }
|
600 |
|
601 | #recommendation .menu ul li.show-hide {
|
602 | color: var(--recommend-link-color);
|
603 | }
|
604 |
|
605 | #recommendation .menu-text-inner svg {
|
606 | fill: currentColor;
|
607 | vertical-align: -22%;
|
608 | }
|
609 |
|
610 | #recommendation .menu-text-inner {
|
611 | display: inline-block;
|
612 | }
|
613 |
|
614 | #recommendation .menu-text-inner-hide {
|
615 | display: none;
|
616 | }
|
617 |
|
618 | #recommendation.undetected-opened .menu-text-inner {
|
619 | display: none;
|
620 | }
|
621 |
|
622 | #recommendation.undetected-opened .menu-text-inner-hide {
|
623 | display: inline-block;
|
624 | }
|
625 |
|
626 | #recommendation .bar {
|
627 | border-top: 1px solid var(--recommendbar-top-line-color);
|
628 | background: var(--recommendbar-bg-color);
|
629 | overflow: hidden;
|
630 | cursor: pointer;
|
631 | }
|
632 |
|
633 | #recommendation .bar .text::after {
|
634 | display: block;
|
635 | margin-left: 37px;
|
636 | float: left;
|
637 | content: 'recommendations';
|
638 | font-variant: small-caps;
|
639 | font-size: 14pt;
|
640 | line-height: 64px;
|
641 | color: var(--recommendbar-text-color);
|
642 | }
|
643 |
|
644 | #recommendation .bar .arrow {
|
645 | float: left;
|
646 | margin: 14px 0px 12px 10px;
|
647 | height: 38px;
|
648 | width: 38px;
|
649 | }
|
650 |
|
651 | #recommendation .bar .arrow svg {
|
652 | fill: var(--recommendbar-text-color);
|
653 | width: 38px;
|
654 | height: 38px;
|
655 | }
|
656 |
|
657 | #recommendation:not(.open) .bar .arrow svg.arrow-down { display: none; }
|
658 | #recommendation.open .bar .arrow svg.arrow-up { display: none; }
|
659 |
|
660 |
|
661 | #graph .sub-graph {
|
662 | position: relative;
|
663 | }
|
664 |
|
665 | #graph .sub-graph .header {
|
666 |
|
667 | margin: 0 20px 0 48px;
|
668 | height: 18px;
|
669 | color: var(--graph-text-color);
|
670 | font-size: 12pt;
|
671 | overflow: hidden;
|
672 | }
|
673 |
|
674 | #graph .sub-graph .header .title {
|
675 | float: left;
|
676 | height: 16px;
|
677 | margin-right: 20px;
|
678 | border-bottom: 2px solid transparent;
|
679 | }
|
680 | #graph .sub-graph.highlight .header .title {
|
681 | border-bottom-color: var(--graph-alert-color);
|
682 | }
|
683 |
|
684 | #graph .sub-graph .header .title svg.alert {
|
685 | float: right;
|
686 | margin-left: 10px;
|
687 | height: 18px;
|
688 | width: 18px;
|
689 | visibility: hidden;
|
690 | cursor: pointer;
|
691 | fill: var(--graph-alert-color)
|
692 | }
|
693 |
|
694 | #graph .sub-graph .header .title .alert.visible {
|
695 | visibility: visible;
|
696 | }
|
697 |
|
698 | #graph .sub-graph .header .title .name::after {
|
699 | content: ' ';
|
700 | }
|
701 |
|
702 | #graph .sub-graph .header .legend {
|
703 | float: left;
|
704 | height: 18px;
|
705 | overflow: hidden;
|
706 | }
|
707 |
|
708 | #graph .sub-graph .header .legend .legend-item {
|
709 | float: left;
|
710 | height: 18px;
|
711 | margin-left: 20px;
|
712 | overflow: hidden;
|
713 | }
|
714 |
|
715 | #graph .sub-graph .header .legend .legend-item svg {
|
716 | float: left;
|
717 | margin-right: 6px;
|
718 | }
|
719 |
|
720 | #graph .sub-graph .header .legend .legend-item svg line {
|
721 | stroke-width: 2px;
|
722 | stroke: var(--graph-good-line-color);
|
723 | }
|
724 |
|
725 | #graph .sub-graph .header .legend .legend-item.bad svg line {
|
726 | stroke: var(--graph-bad-line-color);
|
727 | }
|
728 |
|
729 | #graph .sub-graph .header .legend .legend-item span {
|
730 | float: left;
|
731 | font-size: 10pt;
|
732 | line-height: 18px;
|
733 | }
|
734 |
|
735 | #graph .sub-graph .header .legend .legend-item .short-legend {
|
736 | display: none;
|
737 | }
|
738 |
|
739 | @media (max-width: 670px) {
|
740 | #graph .sub-graph .header .legend .legend-item .long-legend {
|
741 | display: none;
|
742 | }
|
743 |
|
744 | #graph .sub-graph .header .legend .legend-item .short-legend {
|
745 | display: unset;
|
746 | }
|
747 | }
|
748 |
|
749 | #graph .sub-graph .hover-area {
|
750 | position: absolute;
|
751 | z-index: 1;
|
752 | }
|
753 |
|
754 | #graph .sub-graph .hover {
|
755 | position: absolute;
|
756 | display: none;
|
757 | }
|
758 |
|
759 | #graph .sub-graph .hover.visible {
|
760 | display: block;
|
761 | }
|
762 |
|
763 | #graph .sub-graph .hover .background, #graph .sub-graph .hover .pointer {
|
764 | fill: var(--hover-bg-color);
|
765 | }
|
766 |
|
767 | #graph .sub-graph .hover .line {
|
768 | fill: var(--hover-line-color);
|
769 | }
|
770 |
|
771 | #graph .sub-graph .hover text {
|
772 | alignment-baseline: central;
|
773 | fill: var(--hover-text-color);
|
774 | font-size: 10pt;
|
775 | }
|
776 |
|
777 | #graph .sub-graph .hover .title {
|
778 | font-weight: bold;
|
779 | text-anchor: middle;
|
780 | }
|
781 |
|
782 | #graph .sub-graph .hover .legend {
|
783 | font-weight: bold;
|
784 | }
|
785 |
|
786 | #graph .sub-graph .hover.above-curve .pointer.below-curve, #graph .sub-graph .hover.below-curve .pointer.above-curve {
|
787 | display: none;
|
788 | }
|
789 |
|
790 | #graph .sub-graph svg.chart {
|
791 | width: 100%;
|
792 | height: 180px;
|
793 | }
|
794 |
|
795 | #graph .sub-graph .chart .line {
|
796 | fill: none;
|
797 | stroke: var(--graph-good-line-color);
|
798 | stroke-width: 2px;
|
799 | }
|
800 |
|
801 | #graph .sub-graph .chart .line.bad {
|
802 | stroke: var(--graph-bad-line-color);
|
803 | }
|
804 |
|
805 | #graph .sub-graph .chart .tick line {
|
806 | stroke: var(--graph-tick-color);
|
807 | shape-rendering: crispEdges;
|
808 | }
|
809 |
|
810 | #graph .sub-graph .chart .tick text {
|
811 | fill: var(--graph-text-color);
|
812 | font-size: 10pt;
|
813 | }
|
814 |
|
815 | #graph .sub-graph .chart .domain {
|
816 | stroke: var(--graph-axis-color);
|
817 | stroke-width: 2px;
|
818 | shape-rendering: crispEdges;
|
819 | }
|
820 |
|
821 | #graph .sub-graph .chart .background {
|
822 | fill: var(--graph-bg-color);
|
823 | }
|
824 |
|
825 | #graph .sub-graph .chart .interval {
|
826 | fill: var(--graph-interval-color);
|
827 | display: none;
|
828 | }
|
829 |
|
830 | html.recommendation-open #graph .sub-graph .chart .interval {
|
831 | display: block;
|
832 | }
|