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