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