8 | 9 | 10 | Dashboard 11 | Settings from the Baseboard Management Controller 12 | 13 | 14 | 15 | 16 | 17 |
19 | 20 | 21 | Nodes 22 | Configure your compute nodes 23 | 24 | 25 | 26 | 27 | 28 | 29 | Name 30 | Info 31 | USB 2.0 32 | Power 33 | TTY 34 | 35 | 36 | 37 | {#each Object.keys($nodes) as nodeName, i} 38 | 39 | {$nodes[nodeName].name} 40 | {$nodes[nodeName].info} 41 | 42 | {#if typeof $server.usb !== 'undefined'} 43 | 50 | {:else} 51 | 52 | {/if} 53 | 54 | 55 | 62 | 63 | 64 | { 66 | selectedNode = nodeName; 67 | ttyOpen = true; 68 | }} 69 | >🖥️ 70 | 71 | 72 | 73 | {/each} 74 | 75 | 76 | 77 | 78 |
6 | 7 | 8 | Server 9 | Metadata for BMC Board 10 | 11 | 12 | 13 | 14 | IP Address 15 | 16 | 17 | 18 | 19 | MAC Address 20 | 21 | 22 | 23 | BMC Version 24 | 25 | 26 | 27 | BMC Firmware Date 28 | 29 | 30 | 31 | 32 | 33 | 34 | SD Card 35 | Storage Information 36 | 37 | 38 | 39 | Total 40 | 41 | 42 | 43 | Free 44 | 45 | 46 | 47 | Used 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | Upload Firmware 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
32 | 33 | 34 | SD Card 35 | Storage Information 36 | 37 | 38 | 39 | Total 40 | 41 | 42 | 43 | Free 44 | 45 | 46 | 47 | Used 48 | 49 | 50 | 51 |
9 | 10 | 11 | USB Mode 12 | Set USB to host or device 13 | 14 | 15 | 16 | Host 17 | Device 18 | 19 | 20 |
) 2096 | */ 2097 | article { 2098 | margin: var(--block-spacing-vertical) 0; 2099 | padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); 2100 | border-radius: var(--border-radius); 2101 | background: var(--card-background-color); 2102 | box-shadow: var(--card-box-shadow); 2103 | } 2104 | 2105 | article > header, 2106 | article > footer { 2107 | margin-right: calc(var(--block-spacing-horizontal) * -1); 2108 | margin-left: calc(var(--block-spacing-horizontal) * -1); 2109 | padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal); 2110 | background-color: var(--card-sectionning-background-color); 2111 | } 2112 | 2113 | article > header { 2114 | margin-top: calc(var(--block-spacing-vertical) * -1); 2115 | margin-bottom: var(--block-spacing-vertical); 2116 | border-bottom: var(--border-width) solid var(--card-border-color); 2117 | border-top-right-radius: var(--border-radius); 2118 | border-top-left-radius: var(--border-radius); 2119 | } 2120 | 2121 | article > footer { 2122 | margin-top: var(--block-spacing-vertical); 2123 | margin-bottom: calc(var(--block-spacing-vertical) * -1); 2124 | border-top: var(--border-width) solid var(--card-border-color); 2125 | border-bottom-right-radius: var(--border-radius); 2126 | border-bottom-left-radius: var(--border-radius); 2127 | } 2128 | 2129 | /** 2130 | * Modal () 2131 | */ 2132 | :root { 2133 | --scrollbar-width: 0px; 2134 | } 2135 | 2136 | dialog { 2137 | display: flex; 2138 | z-index: 999; 2139 | position: fixed; 2140 | top: 0; 2141 | right: 0; 2142 | bottom: 0; 2143 | left: 0; 2144 | align-items: center; 2145 | justify-content: center; 2146 | width: inherit; 2147 | min-width: 100%; 2148 | height: inherit; 2149 | min-height: 100%; 2150 | padding: var(--spacing); 2151 | border: 0; 2152 | -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter); 2153 | backdrop-filter: var(--modal-overlay-backdrop-filter); 2154 | background-color: var(--modal-overlay-background-color); 2155 | color: var(--color); 2156 | } 2157 | 2158 | dialog article { 2159 | max-height: calc(100vh - var(--spacing) * 2); 2160 | overflow: auto; 2161 | } 2162 | 2163 | @media (min-width: 576px) { 2164 | dialog article { 2165 | max-width: 510px; 2166 | } 2167 | } 2168 | 2169 | @media (min-width: 768px) { 2170 | dialog article { 2171 | max-width: 700px; 2172 | } 2173 | } 2174 | 2175 | dialog article > header, 2176 | dialog article > footer { 2177 | padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal); 2178 | } 2179 | 2180 | dialog article > header .close { 2181 | margin: 0; 2182 | margin-left: var(--spacing); 2183 | float: right; 2184 | } 2185 | 2186 | dialog article > footer { 2187 | text-align: right; 2188 | } 2189 | 2190 | dialog article > footer [role='button'] { 2191 | margin-bottom: 0; 2192 | } 2193 | 2194 | dialog article > footer [role='button']:not(:first-of-type) { 2195 | margin-left: calc(var(--spacing) * 0.5); 2196 | } 2197 | 2198 | dialog article p:last-of-type { 2199 | margin: 0; 2200 | } 2201 | 2202 | dialog article .close { 2203 | display: block; 2204 | width: 1rem; 2205 | height: 1rem; 2206 | margin-top: calc(var(--block-spacing-vertical) * -0.5); 2207 | margin-bottom: var(--typography-spacing-vertical); 2208 | margin-left: auto; 2209 | background-image: var(--icon-close); 2210 | background-position: center; 2211 | background-size: auto 1rem; 2212 | background-repeat: no-repeat; 2213 | opacity: 0.5; 2214 | transition: opacity var(--transition); 2215 | } 2216 | 2217 | dialog article .close:is([aria-current], :hover, :active, :focus) { 2218 | opacity: 1; 2219 | } 2220 | 2221 | dialog:not([open]), 2222 | dialog[open='false'] { 2223 | display: none; 2224 | } 2225 | 2226 | .modal-is-open { 2227 | padding-right: var(--scrollbar-width, 0px); 2228 | overflow: hidden; 2229 | pointer-events: none; 2230 | touch-action: none; 2231 | } 2232 | 2233 | .modal-is-open dialog { 2234 | pointer-events: auto; 2235 | } 2236 | 2237 | :where(.modal-is-opening, .modal-is-closing) dialog, 2238 | :where(.modal-is-opening, .modal-is-closing) dialog > article { 2239 | animation-duration: 0.2s; 2240 | animation-timing-function: ease-in-out; 2241 | animation-fill-mode: both; 2242 | } 2243 | 2244 | :where(.modal-is-opening, .modal-is-closing) dialog { 2245 | animation-duration: 0.8s; 2246 | animation-name: modal-overlay; 2247 | } 2248 | 2249 | :where(.modal-is-opening, .modal-is-closing) dialog > article { 2250 | animation-delay: 0.2s; 2251 | animation-name: modal; 2252 | } 2253 | 2254 | .modal-is-closing dialog, 2255 | .modal-is-closing dialog > article { 2256 | animation-delay: 0s; 2257 | animation-direction: reverse; 2258 | } 2259 | 2260 | @keyframes modal-overlay { 2261 | from { 2262 | -webkit-backdrop-filter: none; 2263 | backdrop-filter: none; 2264 | background-color: transparent; 2265 | } 2266 | } 2267 | 2268 | @keyframes modal { 2269 | from { 2270 | transform: translateY(-100%); 2271 | opacity: 0; 2272 | } 2273 | } 2274 | 2275 | /** 2276 | * Nav 2277 | */ 2278 | :where(nav li)::before { 2279 | float: left; 2280 | content: ''; 2281 | } 2282 | 2283 | nav, 2284 | nav ul { 2285 | display: flex; 2286 | } 2287 | 2288 | nav { 2289 | justify-content: space-between; 2290 | } 2291 | 2292 | nav ol, 2293 | nav ul { 2294 | align-items: center; 2295 | margin-bottom: 0; 2296 | padding: 0; 2297 | list-style: none; 2298 | } 2299 | 2300 | nav ol:first-of-type, 2301 | nav ul:first-of-type { 2302 | margin-left: calc(var(--nav-element-spacing-horizontal) * -1); 2303 | } 2304 | 2305 | nav ol:last-of-type, 2306 | nav ul:last-of-type { 2307 | margin-right: calc(var(--nav-element-spacing-horizontal) * -1); 2308 | } 2309 | 2310 | nav li { 2311 | display: inline-block; 2312 | margin: 0; 2313 | padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal); 2314 | } 2315 | 2316 | nav li > * { 2317 | --spacing: 0; 2318 | } 2319 | 2320 | nav :where(a, [role='link']) { 2321 | display: inline-block; 2322 | margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1); 2323 | padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); 2324 | border-radius: var(--border-radius); 2325 | text-decoration: none; 2326 | } 2327 | 2328 | nav :where(a, [role='link']):is([aria-current], :hover, :active, :focus) { 2329 | text-decoration: none; 2330 | } 2331 | 2332 | nav[aria-label='breadcrumb'] { 2333 | align-items: center; 2334 | justify-content: start; 2335 | } 2336 | 2337 | nav[aria-label='breadcrumb'] ul li:not(:first-child) { 2338 | -webkit-margin-start: var(--nav-link-spacing-horizontal); 2339 | margin-inline-start: var(--nav-link-spacing-horizontal); 2340 | } 2341 | 2342 | nav[aria-label='breadcrumb'] ul li:not(:last-child) ::after { 2343 | position: absolute; 2344 | width: calc(var(--nav-link-spacing-horizontal) * 2); 2345 | -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2); 2346 | margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); 2347 | content: '/'; 2348 | color: var(--muted-color); 2349 | text-align: center; 2350 | } 2351 | 2352 | nav[aria-label='breadcrumb'] a[aria-current] { 2353 | background-color: transparent; 2354 | color: inherit; 2355 | text-decoration: none; 2356 | pointer-events: none; 2357 | } 2358 | 2359 | nav [role='button'] { 2360 | margin-right: inherit; 2361 | margin-left: inherit; 2362 | padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); 2363 | } 2364 | 2365 | aside nav, 2366 | aside ol, 2367 | aside ul, 2368 | aside li { 2369 | display: block; 2370 | } 2371 | 2372 | aside li { 2373 | padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal); 2374 | } 2375 | 2376 | aside li a { 2377 | display: block; 2378 | } 2379 | 2380 | aside li [role='button'] { 2381 | margin: inherit; 2382 | } 2383 | 2384 | [dir='rtl'] nav[aria-label='breadcrumb'] ul li:not(:last-child) ::after { 2385 | content: '\\'; 2386 | } 2387 | 2388 | /** 2389 | * Progress 2390 | */ 2391 | progress { 2392 | display: inline-block; 2393 | vertical-align: baseline; 2394 | } 2395 | 2396 | progress { 2397 | -webkit-appearance: none; 2398 | -moz-appearance: none; 2399 | display: inline-block; 2400 | appearance: none; 2401 | width: 100%; 2402 | height: 0.5rem; 2403 | margin-bottom: calc(var(--spacing) * 0.5); 2404 | overflow: hidden; 2405 | border: 0; 2406 | border-radius: var(--border-radius); 2407 | background-color: var(--progress-background-color); 2408 | color: var(--progress-color); 2409 | } 2410 | 2411 | progress::-webkit-progress-bar { 2412 | border-radius: var(--border-radius); 2413 | background: none; 2414 | } 2415 | 2416 | progress[value]::-webkit-progress-value { 2417 | background-color: var(--progress-color); 2418 | } 2419 | 2420 | progress::-moz-progress-bar { 2421 | background-color: var(--progress-color); 2422 | } 2423 | 2424 | @media (prefers-reduced-motion: no-preference) { 2425 | progress:indeterminate { 2426 | background: var(--progress-background-color) 2427 | linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top 2428 | left/150% 150% no-repeat; 2429 | animation: progress-indeterminate 1s linear infinite; 2430 | } 2431 | 2432 | progress:indeterminate[value]::-webkit-progress-value { 2433 | background-color: transparent; 2434 | } 2435 | 2436 | progress:indeterminate::-moz-progress-bar { 2437 | background-color: transparent; 2438 | } 2439 | } 2440 | 2441 | @media (prefers-reduced-motion: no-preference) { 2442 | [dir='rtl'] progress:indeterminate { 2443 | animation-direction: reverse; 2444 | } 2445 | } 2446 | 2447 | @keyframes progress-indeterminate { 2448 | 0% { 2449 | background-position: 200% 0; 2450 | } 2451 | 100% { 2452 | background-position: -200% 0; 2453 | } 2454 | } 2455 | 2456 | /** 2457 | * Dropdown ([role="list"]) 2458 | */ 2459 | details[role='list'], 2460 | li[role='list'] { 2461 | position: relative; 2462 | } 2463 | 2464 | details[role='list'] summary + ul, 2465 | li[role='list'] > ul { 2466 | display: flex; 2467 | z-index: 99; 2468 | position: absolute; 2469 | top: auto; 2470 | right: 0; 2471 | left: 0; 2472 | flex-direction: column; 2473 | margin: 0; 2474 | padding: 0; 2475 | border: var(--border-width) solid var(--dropdown-border-color); 2476 | border-radius: var(--border-radius); 2477 | border-top-right-radius: 0; 2478 | border-top-left-radius: 0; 2479 | background-color: var(--dropdown-background-color); 2480 | box-shadow: var(--card-box-shadow); 2481 | color: var(--dropdown-color); 2482 | white-space: nowrap; 2483 | } 2484 | 2485 | details[role='list'] summary + ul li, 2486 | li[role='list'] > ul li { 2487 | width: 100%; 2488 | margin-bottom: 0; 2489 | padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); 2490 | list-style: none; 2491 | } 2492 | 2493 | details[role='list'] summary + ul li:first-of-type, 2494 | li[role='list'] > ul li:first-of-type { 2495 | margin-top: calc(var(--form-element-spacing-vertical) * 0.5); 2496 | } 2497 | 2498 | details[role='list'] summary + ul li:last-of-type, 2499 | li[role='list'] > ul li:last-of-type { 2500 | margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); 2501 | } 2502 | 2503 | details[role='list'] summary + ul li a, 2504 | li[role='list'] > ul li a { 2505 | display: block; 2506 | margin: calc(var(--form-element-spacing-vertical) * -0.5) 2507 | calc(var(--form-element-spacing-horizontal) * -1); 2508 | padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); 2509 | overflow: hidden; 2510 | color: var(--dropdown-color); 2511 | text-decoration: none; 2512 | text-overflow: ellipsis; 2513 | } 2514 | 2515 | details[role='list'] summary + ul li a:hover, 2516 | li[role='list'] > ul li a:hover { 2517 | background-color: var(--dropdown-hover-background-color); 2518 | } 2519 | 2520 | details[role='list'] summary::after, 2521 | li[role='list'] > a::after { 2522 | display: block; 2523 | width: 1rem; 2524 | height: calc(1rem * var(--line-height, 1.5)); 2525 | -webkit-margin-start: 0.5rem; 2526 | margin-inline-start: 0.5rem; 2527 | float: right; 2528 | transform: rotate(0deg); 2529 | background-position: right center; 2530 | background-size: 1rem auto; 2531 | background-repeat: no-repeat; 2532 | content: ''; 2533 | } 2534 | 2535 | details[role='list'] { 2536 | padding: 0; 2537 | border-bottom: none; 2538 | } 2539 | 2540 | details[role='list'] summary { 2541 | margin-bottom: 0; 2542 | } 2543 | 2544 | details[role='list'] summary:not([role]) { 2545 | height: calc( 2546 | 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2 2547 | ); 2548 | padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); 2549 | border: var(--border-width) solid var(--form-element-border-color); 2550 | border-radius: var(--border-radius); 2551 | background-color: var(--form-element-background-color); 2552 | color: var(--form-element-placeholder-color); 2553 | line-height: inherit; 2554 | cursor: pointer; 2555 | transition: background-color var(--transition), border-color var(--transition), 2556 | color var(--transition), box-shadow var(--transition); 2557 | } 2558 | 2559 | details[role='list'] summary:not([role]):active, 2560 | details[role='list'] summary:not([role]):focus { 2561 | border-color: var(--form-element-active-border-color); 2562 | background-color: var(--form-element-active-background-color); 2563 | } 2564 | 2565 | details[role='list'] summary:not([role]):focus { 2566 | box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); 2567 | } 2568 | 2569 | details[role='list'][open] summary { 2570 | border-bottom-right-radius: 0; 2571 | border-bottom-left-radius: 0; 2572 | } 2573 | 2574 | details[role='list'][open] summary::before { 2575 | display: block; 2576 | z-index: 1; 2577 | position: fixed; 2578 | top: 0; 2579 | right: 0; 2580 | bottom: 0; 2581 | left: 0; 2582 | background: none; 2583 | content: ''; 2584 | cursor: default; 2585 | } 2586 | 2587 | nav details[role='list'] summary, 2588 | nav li[role='list'] a { 2589 | display: flex; 2590 | direction: ltr; 2591 | } 2592 | 2593 | nav details[role='list'] summary + ul, 2594 | nav li[role='list'] > ul { 2595 | min-width: -moz-fit-content; 2596 | min-width: fit-content; 2597 | border-radius: var(--border-radius); 2598 | } 2599 | 2600 | nav details[role='list'] summary + ul li a, 2601 | nav li[role='list'] > ul li a { 2602 | border-radius: 0; 2603 | } 2604 | 2605 | nav details[role='list'] summary, 2606 | nav details[role='list'] summary:not([role]) { 2607 | height: auto; 2608 | padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); 2609 | } 2610 | 2611 | nav details[role='list'][open] summary { 2612 | border-radius: var(--border-radius); 2613 | } 2614 | 2615 | nav details[role='list'] summary + ul { 2616 | margin-top: var(--outline-width); 2617 | -webkit-margin-start: 0; 2618 | margin-inline-start: 0; 2619 | } 2620 | 2621 | nav details[role='list'] summary[role='link'] { 2622 | margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); 2623 | line-height: var(--line-height); 2624 | } 2625 | 2626 | nav details[role='list'] summary[role='link'] + ul { 2627 | margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); 2628 | -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); 2629 | margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); 2630 | } 2631 | 2632 | li[role='list']:hover > ul, 2633 | li[role='list'] a:active ~ ul, 2634 | li[role='list'] a:focus ~ ul { 2635 | display: flex; 2636 | } 2637 | 2638 | li[role='list'] > ul { 2639 | display: none; 2640 | margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); 2641 | -webkit-margin-start: calc( 2642 | var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) 2643 | ); 2644 | margin-inline-start: calc( 2645 | var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) 2646 | ); 2647 | } 2648 | 2649 | li[role='list'] > a::after { 2650 | background-image: var(--icon-chevron); 2651 | } 2652 | 2653 | label > details[role='list'] { 2654 | margin-top: calc(var(--spacing) * 0.25); 2655 | margin-bottom: var(--spacing); 2656 | } 2657 | 2658 | /** 2659 | * Loading ([aria-busy=true]) 2660 | */ 2661 | [aria-busy='true'] { 2662 | cursor: progress; 2663 | } 2664 | 2665 | [aria-busy='true']:not(input, select, textarea)::before { 2666 | display: inline-block; 2667 | width: 1em; 2668 | height: 1em; 2669 | border: 0.1875em solid currentColor; 2670 | border-radius: 1em; 2671 | border-right-color: transparent; 2672 | content: ''; 2673 | vertical-align: text-bottom; 2674 | vertical-align: -0.125em; 2675 | animation: spinner 0.75s linear infinite; 2676 | opacity: var(--loading-spinner-opacity); 2677 | } 2678 | 2679 | [aria-busy='true']:not(input, select, textarea):not(:empty)::before { 2680 | margin-right: calc(var(--spacing) * 0.5); 2681 | margin-left: 0; 2682 | -webkit-margin-start: 0; 2683 | margin-inline-start: 0; 2684 | -webkit-margin-end: calc(var(--spacing) * 0.5); 2685 | margin-inline-end: calc(var(--spacing) * 0.5); 2686 | } 2687 | 2688 | [aria-busy='true']:not(input, select, textarea):empty { 2689 | text-align: center; 2690 | } 2691 | 2692 | button[aria-busy='true'], 2693 | input[type='submit'][aria-busy='true'], 2694 | input[type='button'][aria-busy='true'], 2695 | input[type='reset'][aria-busy='true'], 2696 | a[aria-busy='true'] { 2697 | pointer-events: none; 2698 | } 2699 | 2700 | @keyframes spinner { 2701 | to { 2702 | transform: rotate(360deg); 2703 | } 2704 | } 2705 | 2706 | /** 2707 | * Tooltip ([data-tooltip]) 2708 | */ 2709 | [data-tooltip] { 2710 | position: relative; 2711 | } 2712 | 2713 | [data-tooltip]:not(a, button, input) { 2714 | border-bottom: 1px dotted; 2715 | text-decoration: none; 2716 | cursor: help; 2717 | } 2718 | 2719 | [data-tooltip][data-placement='top']::before, 2720 | [data-tooltip][data-placement='top']::after, 2721 | [data-tooltip]::before, 2722 | [data-tooltip]::after { 2723 | display: block; 2724 | z-index: 99; 2725 | position: absolute; 2726 | bottom: 100%; 2727 | left: 50%; 2728 | padding: 0.25rem 0.5rem; 2729 | overflow: hidden; 2730 | transform: translate(-50%, -0.25rem); 2731 | border-radius: var(--border-radius); 2732 | background: var(--tooltip-background-color); 2733 | content: attr(data-tooltip); 2734 | color: var(--tooltip-color); 2735 | font-style: normal; 2736 | font-weight: var(--font-weight); 2737 | font-size: 0.875rem; 2738 | text-decoration: none; 2739 | text-overflow: ellipsis; 2740 | white-space: nowrap; 2741 | opacity: 0; 2742 | pointer-events: none; 2743 | } 2744 | 2745 | [data-tooltip][data-placement='top']::after, 2746 | [data-tooltip]::after { 2747 | padding: 0; 2748 | transform: translate(-50%, 0rem); 2749 | border-top: 0.3rem solid; 2750 | border-right: 0.3rem solid transparent; 2751 | border-left: 0.3rem solid transparent; 2752 | border-radius: 0; 2753 | background-color: transparent; 2754 | content: ''; 2755 | color: var(--tooltip-background-color); 2756 | } 2757 | 2758 | [data-tooltip][data-placement='bottom']::before, 2759 | [data-tooltip][data-placement='bottom']::after { 2760 | top: 100%; 2761 | bottom: auto; 2762 | transform: translate(-50%, 0.25rem); 2763 | } 2764 | 2765 | [data-tooltip][data-placement='bottom']:after { 2766 | transform: translate(-50%, -0.3rem); 2767 | border: 0.3rem solid transparent; 2768 | border-bottom: 0.3rem solid; 2769 | } 2770 | 2771 | [data-tooltip][data-placement='left']::before, 2772 | [data-tooltip][data-placement='left']::after { 2773 | top: 50%; 2774 | right: 100%; 2775 | bottom: auto; 2776 | left: auto; 2777 | transform: translate(-0.25rem, -50%); 2778 | } 2779 | 2780 | [data-tooltip][data-placement='left']:after { 2781 | transform: translate(0.3rem, -50%); 2782 | border: 0.3rem solid transparent; 2783 | border-left: 0.3rem solid; 2784 | } 2785 | 2786 | [data-tooltip][data-placement='right']::before, 2787 | [data-tooltip][data-placement='right']::after { 2788 | top: 50%; 2789 | right: auto; 2790 | bottom: auto; 2791 | left: 100%; 2792 | transform: translate(0.25rem, -50%); 2793 | } 2794 | 2795 | [data-tooltip][data-placement='right']:after { 2796 | transform: translate(-0.3rem, -50%); 2797 | border: 0.3rem solid transparent; 2798 | border-right: 0.3rem solid; 2799 | } 2800 | 2801 | [data-tooltip]:focus::before, 2802 | [data-tooltip]:focus::after, 2803 | [data-tooltip]:hover::before, 2804 | [data-tooltip]:hover::after { 2805 | opacity: 1; 2806 | } 2807 | 2808 | @media (hover: hover) and (pointer: fine) { 2809 | [data-tooltip][data-placement='bottom']:focus::before, 2810 | [data-tooltip][data-placement='bottom']:focus::after, 2811 | [data-tooltip][data-placement='bottom']:hover [data-tooltip]:focus::before, 2812 | [data-tooltip][data-placement='bottom']:hover [data-tooltip]:focus::after, 2813 | [data-tooltip]:hover::before, 2814 | [data-tooltip]:hover::after { 2815 | animation-duration: 0.2s; 2816 | animation-name: tooltip-slide-top; 2817 | } 2818 | 2819 | [data-tooltip][data-placement='bottom']:focus::after, 2820 | [data-tooltip][data-placement='bottom']:hover [data-tooltip]:focus::after, 2821 | [data-tooltip]:hover::after { 2822 | animation-name: tooltip-caret-slide-top; 2823 | } 2824 | 2825 | [data-tooltip][data-placement='bottom']:focus::before, 2826 | [data-tooltip][data-placement='bottom']:focus::after, 2827 | [data-tooltip][data-placement='bottom']:hover::before, 2828 | [data-tooltip][data-placement='bottom']:hover::after { 2829 | animation-duration: 0.2s; 2830 | animation-name: tooltip-slide-bottom; 2831 | } 2832 | 2833 | [data-tooltip][data-placement='bottom']:focus::after, 2834 | [data-tooltip][data-placement='bottom']:hover::after { 2835 | animation-name: tooltip-caret-slide-bottom; 2836 | } 2837 | 2838 | [data-tooltip][data-placement='left']:focus::before, 2839 | [data-tooltip][data-placement='left']:focus::after, 2840 | [data-tooltip][data-placement='left']:hover::before, 2841 | [data-tooltip][data-placement='left']:hover::after { 2842 | animation-duration: 0.2s; 2843 | animation-name: tooltip-slide-left; 2844 | } 2845 | 2846 | [data-tooltip][data-placement='left']:focus::after, 2847 | [data-tooltip][data-placement='left']:hover::after { 2848 | animation-name: tooltip-caret-slide-left; 2849 | } 2850 | 2851 | [data-tooltip][data-placement='right']:focus::before, 2852 | [data-tooltip][data-placement='right']:focus::after, 2853 | [data-tooltip][data-placement='right']:hover::before, 2854 | [data-tooltip][data-placement='right']:hover::after { 2855 | animation-duration: 0.2s; 2856 | animation-name: tooltip-slide-right; 2857 | } 2858 | 2859 | [data-tooltip][data-placement='right']:focus::after, 2860 | [data-tooltip][data-placement='right']:hover::after { 2861 | animation-name: tooltip-caret-slide-right; 2862 | } 2863 | } 2864 | 2865 | @keyframes tooltip-slide-top { 2866 | from { 2867 | transform: translate(-50%, 0.75rem); 2868 | opacity: 0; 2869 | } 2870 | to { 2871 | transform: translate(-50%, -0.25rem); 2872 | opacity: 1; 2873 | } 2874 | } 2875 | 2876 | @keyframes tooltip-caret-slide-top { 2877 | from { 2878 | opacity: 0; 2879 | } 2880 | 50% { 2881 | transform: translate(-50%, -0.25rem); 2882 | opacity: 0; 2883 | } 2884 | to { 2885 | transform: translate(-50%, 0rem); 2886 | opacity: 1; 2887 | } 2888 | } 2889 | 2890 | @keyframes tooltip-slide-bottom { 2891 | from { 2892 | transform: translate(-50%, -0.75rem); 2893 | opacity: 0; 2894 | } 2895 | to { 2896 | transform: translate(-50%, 0.25rem); 2897 | opacity: 1; 2898 | } 2899 | } 2900 | 2901 | @keyframes tooltip-caret-slide-bottom { 2902 | from { 2903 | opacity: 0; 2904 | } 2905 | 50% { 2906 | transform: translate(-50%, -0.5rem); 2907 | opacity: 0; 2908 | } 2909 | to { 2910 | transform: translate(-50%, -0.3rem); 2911 | opacity: 1; 2912 | } 2913 | } 2914 | 2915 | @keyframes tooltip-slide-left { 2916 | from { 2917 | transform: translate(0.75rem, -50%); 2918 | opacity: 0; 2919 | } 2920 | to { 2921 | transform: translate(-0.25rem, -50%); 2922 | opacity: 1; 2923 | } 2924 | } 2925 | 2926 | @keyframes tooltip-caret-slide-left { 2927 | from { 2928 | opacity: 0; 2929 | } 2930 | 50% { 2931 | transform: translate(0.05rem, -50%); 2932 | opacity: 0; 2933 | } 2934 | to { 2935 | transform: translate(0.3rem, -50%); 2936 | opacity: 1; 2937 | } 2938 | } 2939 | 2940 | @keyframes tooltip-slide-right { 2941 | from { 2942 | transform: translate(-0.75rem, -50%); 2943 | opacity: 0; 2944 | } 2945 | to { 2946 | transform: translate(0.25rem, -50%); 2947 | opacity: 1; 2948 | } 2949 | } 2950 | 2951 | @keyframes tooltip-caret-slide-right { 2952 | from { 2953 | opacity: 0; 2954 | } 2955 | 50% { 2956 | transform: translate(-0.05rem, -50%); 2957 | opacity: 0; 2958 | } 2959 | to { 2960 | transform: translate(-0.3rem, -50%); 2961 | opacity: 1; 2962 | } 2963 | } 2964 | 2965 | /** 2966 | * Accessibility & User interaction 2967 | */ 2968 | [aria-controls] { 2969 | cursor: pointer; 2970 | } 2971 | 2972 | [aria-disabled='true'], 2973 | [disabled] { 2974 | cursor: not-allowed; 2975 | } 2976 | 2977 | [aria-hidden='false'][hidden] { 2978 | display: initial; 2979 | } 2980 | 2981 | [aria-hidden='false'][hidden]:not(:focus) { 2982 | clip: rect(0, 0, 0, 0); 2983 | position: absolute; 2984 | } 2985 | 2986 | a, 2987 | area, 2988 | button, 2989 | input, 2990 | label, 2991 | select, 2992 | summary, 2993 | textarea, 2994 | [tabindex] { 2995 | -ms-touch-action: manipulation; 2996 | } 2997 | 2998 | [dir='rtl'] { 2999 | direction: rtl; 3000 | } 3001 | 3002 | /** 3003 | * Reduce Motion Features 3004 | */ 3005 | @media (prefers-reduced-motion: reduce) { 3006 | *:not([aria-busy='true']), 3007 | :not([aria-busy='true'])::before, 3008 | :not([aria-busy='true'])::after { 3009 | background-attachment: initial !important; 3010 | animation-duration: 1ms !important; 3011 | animation-delay: -1ms !important; 3012 | animation-iteration-count: 1 !important; 3013 | scroll-behavior: auto !important; 3014 | transition-delay: 0s !important; 3015 | transition-duration: 0s !important; 3016 | } 3017 | } 3018 | 3019 | /*! 3020 | * Bootstrap Grid v5.2.3 (https://getbootstrap.com/) 3021 | * Copyright 2011-2022 The Bootstrap Authors 3022 | * Copyright 2011-2022 Twitter, Inc. 3023 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 3024 | */ 3025 | .row { 3026 | --bs-gutter-x: 1.5rem; 3027 | --bs-gutter-y: 0; 3028 | display: flex; 3029 | flex-wrap: wrap; 3030 | margin-top: calc(-1 * var(--bs-gutter-y)); 3031 | margin-right: calc(-0.5 * var(--bs-gutter-x)); 3032 | margin-left: calc(-0.5 * var(--bs-gutter-x)); 3033 | } 3034 | 3035 | .row > * { 3036 | box-sizing: border-box; 3037 | flex-shrink: 0; 3038 | width: 100%; 3039 | max-width: 100%; 3040 | padding-right: calc(var(--bs-gutter-x) * 0.5); 3041 | padding-left: calc(var(--bs-gutter-x) * 0.5); 3042 | margin-top: var(--bs-gutter-y); 3043 | } 3044 | 3045 | .col { 3046 | flex: 1 0 0%; 3047 | } 3048 | 3049 | .row-cols-auto > * { 3050 | flex: 0 0 auto; 3051 | width: auto; 3052 | } 3053 | 3054 | .row-cols-1 > * { 3055 | flex: 0 0 auto; 3056 | width: 100%; 3057 | } 3058 | 3059 | .row-cols-2 > * { 3060 | flex: 0 0 auto; 3061 | width: 50%; 3062 | } 3063 | 3064 | .row-cols-3 > * { 3065 | flex: 0 0 auto; 3066 | width: 33.3333333333%; 3067 | } 3068 | 3069 | .row-cols-4 > * { 3070 | flex: 0 0 auto; 3071 | width: 25%; 3072 | } 3073 | 3074 | .row-cols-5 > * { 3075 | flex: 0 0 auto; 3076 | width: 20%; 3077 | } 3078 | 3079 | .row-cols-6 > * { 3080 | flex: 0 0 auto; 3081 | width: 16.6666666667%; 3082 | } 3083 | 3084 | .col-auto { 3085 | flex: 0 0 auto; 3086 | width: auto; 3087 | } 3088 | 3089 | .col-1 { 3090 | flex: 0 0 auto; 3091 | width: 8.33333333%; 3092 | } 3093 | 3094 | .col-2 { 3095 | flex: 0 0 auto; 3096 | width: 16.66666667%; 3097 | } 3098 | 3099 | .col-3 { 3100 | flex: 0 0 auto; 3101 | width: 25%; 3102 | } 3103 | 3104 | .col-4 { 3105 | flex: 0 0 auto; 3106 | width: 33.33333333%; 3107 | } 3108 | 3109 | .col-5 { 3110 | flex: 0 0 auto; 3111 | width: 41.66666667%; 3112 | } 3113 | 3114 | .col-6 { 3115 | flex: 0 0 auto; 3116 | width: 50%; 3117 | } 3118 | 3119 | .col-7 { 3120 | flex: 0 0 auto; 3121 | width: 58.33333333%; 3122 | } 3123 | 3124 | .col-8 { 3125 | flex: 0 0 auto; 3126 | width: 66.66666667%; 3127 | } 3128 | 3129 | .col-9 { 3130 | flex: 0 0 auto; 3131 | width: 75%; 3132 | } 3133 | 3134 | .col-10 { 3135 | flex: 0 0 auto; 3136 | width: 83.33333333%; 3137 | } 3138 | 3139 | .col-11 { 3140 | flex: 0 0 auto; 3141 | width: 91.66666667%; 3142 | } 3143 | 3144 | .col-12 { 3145 | flex: 0 0 auto; 3146 | width: 100%; 3147 | } 3148 | 3149 | .offset-1 { 3150 | margin-left: 8.33333333%; 3151 | } 3152 | 3153 | .offset-2 { 3154 | margin-left: 16.66666667%; 3155 | } 3156 | 3157 | .offset-3 { 3158 | margin-left: 25%; 3159 | } 3160 | 3161 | .offset-4 { 3162 | margin-left: 33.33333333%; 3163 | } 3164 | 3165 | .offset-5 { 3166 | margin-left: 41.66666667%; 3167 | } 3168 | 3169 | .offset-6 { 3170 | margin-left: 50%; 3171 | } 3172 | 3173 | .offset-7 { 3174 | margin-left: 58.33333333%; 3175 | } 3176 | 3177 | .offset-8 { 3178 | margin-left: 66.66666667%; 3179 | } 3180 | 3181 | .offset-9 { 3182 | margin-left: 75%; 3183 | } 3184 | 3185 | .offset-10 { 3186 | margin-left: 83.33333333%; 3187 | } 3188 | 3189 | .offset-11 { 3190 | margin-left: 91.66666667%; 3191 | } 3192 | 3193 | .g-0, 3194 | .gx-0 { 3195 | --bs-gutter-x: 0; 3196 | } 3197 | 3198 | .g-0, 3199 | .gy-0 { 3200 | --bs-gutter-y: 0; 3201 | } 3202 | 3203 | .g-1, 3204 | .gx-1 { 3205 | --bs-gutter-x: 0.25rem; 3206 | } 3207 | 3208 | .g-1, 3209 | .gy-1 { 3210 | --bs-gutter-y: 0.25rem; 3211 | } 3212 | 3213 | .g-2, 3214 | .gx-2 { 3215 | --bs-gutter-x: 0.5rem; 3216 | } 3217 | 3218 | .g-2, 3219 | .gy-2 { 3220 | --bs-gutter-y: 0.5rem; 3221 | } 3222 | 3223 | .g-3, 3224 | .gx-3 { 3225 | --bs-gutter-x: 1rem; 3226 | } 3227 | 3228 | .g-3, 3229 | .gy-3 { 3230 | --bs-gutter-y: 1rem; 3231 | } 3232 | 3233 | .g-4, 3234 | .gx-4 { 3235 | --bs-gutter-x: 1.5rem; 3236 | } 3237 | 3238 | .g-4, 3239 | .gy-4 { 3240 | --bs-gutter-y: 1.5rem; 3241 | } 3242 | 3243 | .g-5, 3244 | .gx-5 { 3245 | --bs-gutter-x: 3rem; 3246 | } 3247 | 3248 | .g-5, 3249 | .gy-5 { 3250 | --bs-gutter-y: 3rem; 3251 | } 3252 | 3253 | @media (min-width: 576px) { 3254 | .col-sm { 3255 | flex: 1 0 0%; 3256 | } 3257 | 3258 | .row-cols-sm-auto > * { 3259 | flex: 0 0 auto; 3260 | width: auto; 3261 | } 3262 | 3263 | .row-cols-sm-1 > * { 3264 | flex: 0 0 auto; 3265 | width: 100%; 3266 | } 3267 | 3268 | .row-cols-sm-2 > * { 3269 | flex: 0 0 auto; 3270 | width: 50%; 3271 | } 3272 | 3273 | .row-cols-sm-3 > * { 3274 | flex: 0 0 auto; 3275 | width: 33.3333333333%; 3276 | } 3277 | 3278 | .row-cols-sm-4 > * { 3279 | flex: 0 0 auto; 3280 | width: 25%; 3281 | } 3282 | 3283 | .row-cols-sm-5 > * { 3284 | flex: 0 0 auto; 3285 | width: 20%; 3286 | } 3287 | 3288 | .row-cols-sm-6 > * { 3289 | flex: 0 0 auto; 3290 | width: 16.6666666667%; 3291 | } 3292 | 3293 | .col-sm-auto { 3294 | flex: 0 0 auto; 3295 | width: auto; 3296 | } 3297 | 3298 | .col-sm-1 { 3299 | flex: 0 0 auto; 3300 | width: 8.33333333%; 3301 | } 3302 | 3303 | .col-sm-2 { 3304 | flex: 0 0 auto; 3305 | width: 16.66666667%; 3306 | } 3307 | 3308 | .col-sm-3 { 3309 | flex: 0 0 auto; 3310 | width: 25%; 3311 | } 3312 | 3313 | .col-sm-4 { 3314 | flex: 0 0 auto; 3315 | width: 33.33333333%; 3316 | } 3317 | 3318 | .col-sm-5 { 3319 | flex: 0 0 auto; 3320 | width: 41.66666667%; 3321 | } 3322 | 3323 | .col-sm-6 { 3324 | flex: 0 0 auto; 3325 | width: 50%; 3326 | } 3327 | 3328 | .col-sm-7 { 3329 | flex: 0 0 auto; 3330 | width: 58.33333333%; 3331 | } 3332 | 3333 | .col-sm-8 { 3334 | flex: 0 0 auto; 3335 | width: 66.66666667%; 3336 | } 3337 | 3338 | .col-sm-9 { 3339 | flex: 0 0 auto; 3340 | width: 75%; 3341 | } 3342 | 3343 | .col-sm-10 { 3344 | flex: 0 0 auto; 3345 | width: 83.33333333%; 3346 | } 3347 | 3348 | .col-sm-11 { 3349 | flex: 0 0 auto; 3350 | width: 91.66666667%; 3351 | } 3352 | 3353 | .col-sm-12 { 3354 | flex: 0 0 auto; 3355 | width: 100%; 3356 | } 3357 | 3358 | .offset-sm-0 { 3359 | margin-left: 0; 3360 | } 3361 | 3362 | .offset-sm-1 { 3363 | margin-left: 8.33333333%; 3364 | } 3365 | 3366 | .offset-sm-2 { 3367 | margin-left: 16.66666667%; 3368 | } 3369 | 3370 | .offset-sm-3 { 3371 | margin-left: 25%; 3372 | } 3373 | 3374 | .offset-sm-4 { 3375 | margin-left: 33.33333333%; 3376 | } 3377 | 3378 | .offset-sm-5 { 3379 | margin-left: 41.66666667%; 3380 | } 3381 | 3382 | .offset-sm-6 { 3383 | margin-left: 50%; 3384 | } 3385 | 3386 | .offset-sm-7 { 3387 | margin-left: 58.33333333%; 3388 | } 3389 | 3390 | .offset-sm-8 { 3391 | margin-left: 66.66666667%; 3392 | } 3393 | 3394 | .offset-sm-9 { 3395 | margin-left: 75%; 3396 | } 3397 | 3398 | .offset-sm-10 { 3399 | margin-left: 83.33333333%; 3400 | } 3401 | 3402 | .offset-sm-11 { 3403 | margin-left: 91.66666667%; 3404 | } 3405 | 3406 | .g-sm-0, 3407 | .gx-sm-0 { 3408 | --bs-gutter-x: 0; 3409 | } 3410 | 3411 | .g-sm-0, 3412 | .gy-sm-0 { 3413 | --bs-gutter-y: 0; 3414 | } 3415 | 3416 | .g-sm-1, 3417 | .gx-sm-1 { 3418 | --bs-gutter-x: 0.25rem; 3419 | } 3420 | 3421 | .g-sm-1, 3422 | .gy-sm-1 { 3423 | --bs-gutter-y: 0.25rem; 3424 | } 3425 | 3426 | .g-sm-2, 3427 | .gx-sm-2 { 3428 | --bs-gutter-x: 0.5rem; 3429 | } 3430 | 3431 | .g-sm-2, 3432 | .gy-sm-2 { 3433 | --bs-gutter-y: 0.5rem; 3434 | } 3435 | 3436 | .g-sm-3, 3437 | .gx-sm-3 { 3438 | --bs-gutter-x: 1rem; 3439 | } 3440 | 3441 | .g-sm-3, 3442 | .gy-sm-3 { 3443 | --bs-gutter-y: 1rem; 3444 | } 3445 | 3446 | .g-sm-4, 3447 | .gx-sm-4 { 3448 | --bs-gutter-x: 1.5rem; 3449 | } 3450 | 3451 | .g-sm-4, 3452 | .gy-sm-4 { 3453 | --bs-gutter-y: 1.5rem; 3454 | } 3455 | 3456 | .g-sm-5, 3457 | .gx-sm-5 { 3458 | --bs-gutter-x: 3rem; 3459 | } 3460 | 3461 | .g-sm-5, 3462 | .gy-sm-5 { 3463 | --bs-gutter-y: 3rem; 3464 | } 3465 | } 3466 | 3467 | @media (min-width: 768px) { 3468 | .col-md { 3469 | flex: 1 0 0%; 3470 | } 3471 | 3472 | .row-cols-md-auto > * { 3473 | flex: 0 0 auto; 3474 | width: auto; 3475 | } 3476 | 3477 | .row-cols-md-1 > * { 3478 | flex: 0 0 auto; 3479 | width: 100%; 3480 | } 3481 | 3482 | .row-cols-md-2 > * { 3483 | flex: 0 0 auto; 3484 | width: 50%; 3485 | } 3486 | 3487 | .row-cols-md-3 > * { 3488 | flex: 0 0 auto; 3489 | width: 33.3333333333%; 3490 | } 3491 | 3492 | .row-cols-md-4 > * { 3493 | flex: 0 0 auto; 3494 | width: 25%; 3495 | } 3496 | 3497 | .row-cols-md-5 > * { 3498 | flex: 0 0 auto; 3499 | width: 20%; 3500 | } 3501 | 3502 | .row-cols-md-6 > * { 3503 | flex: 0 0 auto; 3504 | width: 16.6666666667%; 3505 | } 3506 | 3507 | .col-md-auto { 3508 | flex: 0 0 auto; 3509 | width: auto; 3510 | } 3511 | 3512 | .col-md-1 { 3513 | flex: 0 0 auto; 3514 | width: 8.33333333%; 3515 | } 3516 | 3517 | .col-md-2 { 3518 | flex: 0 0 auto; 3519 | width: 16.66666667%; 3520 | } 3521 | 3522 | .col-md-3 { 3523 | flex: 0 0 auto; 3524 | width: 25%; 3525 | } 3526 | 3527 | .col-md-4 { 3528 | flex: 0 0 auto; 3529 | width: 33.33333333%; 3530 | } 3531 | 3532 | .col-md-5 { 3533 | flex: 0 0 auto; 3534 | width: 41.66666667%; 3535 | } 3536 | 3537 | .col-md-6 { 3538 | flex: 0 0 auto; 3539 | width: 50%; 3540 | } 3541 | 3542 | .col-md-7 { 3543 | flex: 0 0 auto; 3544 | width: 58.33333333%; 3545 | } 3546 | 3547 | .col-md-8 { 3548 | flex: 0 0 auto; 3549 | width: 66.66666667%; 3550 | } 3551 | 3552 | .col-md-9 { 3553 | flex: 0 0 auto; 3554 | width: 75%; 3555 | } 3556 | 3557 | .col-md-10 { 3558 | flex: 0 0 auto; 3559 | width: 83.33333333%; 3560 | } 3561 | 3562 | .col-md-11 { 3563 | flex: 0 0 auto; 3564 | width: 91.66666667%; 3565 | } 3566 | 3567 | .col-md-12 { 3568 | flex: 0 0 auto; 3569 | width: 100%; 3570 | } 3571 | 3572 | .offset-md-0 { 3573 | margin-left: 0; 3574 | } 3575 | 3576 | .offset-md-1 { 3577 | margin-left: 8.33333333%; 3578 | } 3579 | 3580 | .offset-md-2 { 3581 | margin-left: 16.66666667%; 3582 | } 3583 | 3584 | .offset-md-3 { 3585 | margin-left: 25%; 3586 | } 3587 | 3588 | .offset-md-4 { 3589 | margin-left: 33.33333333%; 3590 | } 3591 | 3592 | .offset-md-5 { 3593 | margin-left: 41.66666667%; 3594 | } 3595 | 3596 | .offset-md-6 { 3597 | margin-left: 50%; 3598 | } 3599 | 3600 | .offset-md-7 { 3601 | margin-left: 58.33333333%; 3602 | } 3603 | 3604 | .offset-md-8 { 3605 | margin-left: 66.66666667%; 3606 | } 3607 | 3608 | .offset-md-9 { 3609 | margin-left: 75%; 3610 | } 3611 | 3612 | .offset-md-10 { 3613 | margin-left: 83.33333333%; 3614 | } 3615 | 3616 | .offset-md-11 { 3617 | margin-left: 91.66666667%; 3618 | } 3619 | 3620 | .g-md-0, 3621 | .gx-md-0 { 3622 | --bs-gutter-x: 0; 3623 | } 3624 | 3625 | .g-md-0, 3626 | .gy-md-0 { 3627 | --bs-gutter-y: 0; 3628 | } 3629 | 3630 | .g-md-1, 3631 | .gx-md-1 { 3632 | --bs-gutter-x: 0.25rem; 3633 | } 3634 | 3635 | .g-md-1, 3636 | .gy-md-1 { 3637 | --bs-gutter-y: 0.25rem; 3638 | } 3639 | 3640 | .g-md-2, 3641 | .gx-md-2 { 3642 | --bs-gutter-x: 0.5rem; 3643 | } 3644 | 3645 | .g-md-2, 3646 | .gy-md-2 { 3647 | --bs-gutter-y: 0.5rem; 3648 | } 3649 | 3650 | .g-md-3, 3651 | .gx-md-3 { 3652 | --bs-gutter-x: 1rem; 3653 | } 3654 | 3655 | .g-md-3, 3656 | .gy-md-3 { 3657 | --bs-gutter-y: 1rem; 3658 | } 3659 | 3660 | .g-md-4, 3661 | .gx-md-4 { 3662 | --bs-gutter-x: 1.5rem; 3663 | } 3664 | 3665 | .g-md-4, 3666 | .gy-md-4 { 3667 | --bs-gutter-y: 1.5rem; 3668 | } 3669 | 3670 | .g-md-5, 3671 | .gx-md-5 { 3672 | --bs-gutter-x: 3rem; 3673 | } 3674 | 3675 | .g-md-5, 3676 | .gy-md-5 { 3677 | --bs-gutter-y: 3rem; 3678 | } 3679 | } 3680 | 3681 | @media (min-width: 992px) { 3682 | .col-lg { 3683 | flex: 1 0 0%; 3684 | } 3685 | 3686 | .row-cols-lg-auto > * { 3687 | flex: 0 0 auto; 3688 | width: auto; 3689 | } 3690 | 3691 | .row-cols-lg-1 > * { 3692 | flex: 0 0 auto; 3693 | width: 100%; 3694 | } 3695 | 3696 | .row-cols-lg-2 > * { 3697 | flex: 0 0 auto; 3698 | width: 50%; 3699 | } 3700 | 3701 | .row-cols-lg-3 > * { 3702 | flex: 0 0 auto; 3703 | width: 33.3333333333%; 3704 | } 3705 | 3706 | .row-cols-lg-4 > * { 3707 | flex: 0 0 auto; 3708 | width: 25%; 3709 | } 3710 | 3711 | .row-cols-lg-5 > * { 3712 | flex: 0 0 auto; 3713 | width: 20%; 3714 | } 3715 | 3716 | .row-cols-lg-6 > * { 3717 | flex: 0 0 auto; 3718 | width: 16.6666666667%; 3719 | } 3720 | 3721 | .col-lg-auto { 3722 | flex: 0 0 auto; 3723 | width: auto; 3724 | } 3725 | 3726 | .col-lg-1 { 3727 | flex: 0 0 auto; 3728 | width: 8.33333333%; 3729 | } 3730 | 3731 | .col-lg-2 { 3732 | flex: 0 0 auto; 3733 | width: 16.66666667%; 3734 | } 3735 | 3736 | .col-lg-3 { 3737 | flex: 0 0 auto; 3738 | width: 25%; 3739 | } 3740 | 3741 | .col-lg-4 { 3742 | flex: 0 0 auto; 3743 | width: 33.33333333%; 3744 | } 3745 | 3746 | .col-lg-5 { 3747 | flex: 0 0 auto; 3748 | width: 41.66666667%; 3749 | } 3750 | 3751 | .col-lg-6 { 3752 | flex: 0 0 auto; 3753 | width: 50%; 3754 | } 3755 | 3756 | .col-lg-7 { 3757 | flex: 0 0 auto; 3758 | width: 58.33333333%; 3759 | } 3760 | 3761 | .col-lg-8 { 3762 | flex: 0 0 auto; 3763 | width: 66.66666667%; 3764 | } 3765 | 3766 | .col-lg-9 { 3767 | flex: 0 0 auto; 3768 | width: 75%; 3769 | } 3770 | 3771 | .col-lg-10 { 3772 | flex: 0 0 auto; 3773 | width: 83.33333333%; 3774 | } 3775 | 3776 | .col-lg-11 { 3777 | flex: 0 0 auto; 3778 | width: 91.66666667%; 3779 | } 3780 | 3781 | .col-lg-12 { 3782 | flex: 0 0 auto; 3783 | width: 100%; 3784 | } 3785 | 3786 | .offset-lg-0 { 3787 | margin-left: 0; 3788 | } 3789 | 3790 | .offset-lg-1 { 3791 | margin-left: 8.33333333%; 3792 | } 3793 | 3794 | .offset-lg-2 { 3795 | margin-left: 16.66666667%; 3796 | } 3797 | 3798 | .offset-lg-3 { 3799 | margin-left: 25%; 3800 | } 3801 | 3802 | .offset-lg-4 { 3803 | margin-left: 33.33333333%; 3804 | } 3805 | 3806 | .offset-lg-5 { 3807 | margin-left: 41.66666667%; 3808 | } 3809 | 3810 | .offset-lg-6 { 3811 | margin-left: 50%; 3812 | } 3813 | 3814 | .offset-lg-7 { 3815 | margin-left: 58.33333333%; 3816 | } 3817 | 3818 | .offset-lg-8 { 3819 | margin-left: 66.66666667%; 3820 | } 3821 | 3822 | .offset-lg-9 { 3823 | margin-left: 75%; 3824 | } 3825 | 3826 | .offset-lg-10 { 3827 | margin-left: 83.33333333%; 3828 | } 3829 | 3830 | .offset-lg-11 { 3831 | margin-left: 91.66666667%; 3832 | } 3833 | 3834 | .g-lg-0, 3835 | .gx-lg-0 { 3836 | --bs-gutter-x: 0; 3837 | } 3838 | 3839 | .g-lg-0, 3840 | .gy-lg-0 { 3841 | --bs-gutter-y: 0; 3842 | } 3843 | 3844 | .g-lg-1, 3845 | .gx-lg-1 { 3846 | --bs-gutter-x: 0.25rem; 3847 | } 3848 | 3849 | .g-lg-1, 3850 | .gy-lg-1 { 3851 | --bs-gutter-y: 0.25rem; 3852 | } 3853 | 3854 | .g-lg-2, 3855 | .gx-lg-2 { 3856 | --bs-gutter-x: 0.5rem; 3857 | } 3858 | 3859 | .g-lg-2, 3860 | .gy-lg-2 { 3861 | --bs-gutter-y: 0.5rem; 3862 | } 3863 | 3864 | .g-lg-3, 3865 | .gx-lg-3 { 3866 | --bs-gutter-x: 1rem; 3867 | } 3868 | 3869 | .g-lg-3, 3870 | .gy-lg-3 { 3871 | --bs-gutter-y: 1rem; 3872 | } 3873 | 3874 | .g-lg-4, 3875 | .gx-lg-4 { 3876 | --bs-gutter-x: 1.5rem; 3877 | } 3878 | 3879 | .g-lg-4, 3880 | .gy-lg-4 { 3881 | --bs-gutter-y: 1.5rem; 3882 | } 3883 | 3884 | .g-lg-5, 3885 | .gx-lg-5 { 3886 | --bs-gutter-x: 3rem; 3887 | } 3888 | 3889 | .g-lg-5, 3890 | .gy-lg-5 { 3891 | --bs-gutter-y: 3rem; 3892 | } 3893 | } 3894 | 3895 | @media (min-width: 1200px) { 3896 | .col-xl { 3897 | flex: 1 0 0%; 3898 | } 3899 | 3900 | .row-cols-xl-auto > * { 3901 | flex: 0 0 auto; 3902 | width: auto; 3903 | } 3904 | 3905 | .row-cols-xl-1 > * { 3906 | flex: 0 0 auto; 3907 | width: 100%; 3908 | } 3909 | 3910 | .row-cols-xl-2 > * { 3911 | flex: 0 0 auto; 3912 | width: 50%; 3913 | } 3914 | 3915 | .row-cols-xl-3 > * { 3916 | flex: 0 0 auto; 3917 | width: 33.3333333333%; 3918 | } 3919 | 3920 | .row-cols-xl-4 > * { 3921 | flex: 0 0 auto; 3922 | width: 25%; 3923 | } 3924 | 3925 | .row-cols-xl-5 > * { 3926 | flex: 0 0 auto; 3927 | width: 20%; 3928 | } 3929 | 3930 | .row-cols-xl-6 > * { 3931 | flex: 0 0 auto; 3932 | width: 16.6666666667%; 3933 | } 3934 | 3935 | .col-xl-auto { 3936 | flex: 0 0 auto; 3937 | width: auto; 3938 | } 3939 | 3940 | .col-xl-1 { 3941 | flex: 0 0 auto; 3942 | width: 8.33333333%; 3943 | } 3944 | 3945 | .col-xl-2 { 3946 | flex: 0 0 auto; 3947 | width: 16.66666667%; 3948 | } 3949 | 3950 | .col-xl-3 { 3951 | flex: 0 0 auto; 3952 | width: 25%; 3953 | } 3954 | 3955 | .col-xl-4 { 3956 | flex: 0 0 auto; 3957 | width: 33.33333333%; 3958 | } 3959 | 3960 | .col-xl-5 { 3961 | flex: 0 0 auto; 3962 | width: 41.66666667%; 3963 | } 3964 | 3965 | .col-xl-6 { 3966 | flex: 0 0 auto; 3967 | width: 50%; 3968 | } 3969 | 3970 | .col-xl-7 { 3971 | flex: 0 0 auto; 3972 | width: 58.33333333%; 3973 | } 3974 | 3975 | .col-xl-8 { 3976 | flex: 0 0 auto; 3977 | width: 66.66666667%; 3978 | } 3979 | 3980 | .col-xl-9 { 3981 | flex: 0 0 auto; 3982 | width: 75%; 3983 | } 3984 | 3985 | .col-xl-10 { 3986 | flex: 0 0 auto; 3987 | width: 83.33333333%; 3988 | } 3989 | 3990 | .col-xl-11 { 3991 | flex: 0 0 auto; 3992 | width: 91.66666667%; 3993 | } 3994 | 3995 | .col-xl-12 { 3996 | flex: 0 0 auto; 3997 | width: 100%; 3998 | } 3999 | 4000 | .offset-xl-0 { 4001 | margin-left: 0; 4002 | } 4003 | 4004 | .offset-xl-1 { 4005 | margin-left: 8.33333333%; 4006 | } 4007 | 4008 | .offset-xl-2 { 4009 | margin-left: 16.66666667%; 4010 | } 4011 | 4012 | .offset-xl-3 { 4013 | margin-left: 25%; 4014 | } 4015 | 4016 | .offset-xl-4 { 4017 | margin-left: 33.33333333%; 4018 | } 4019 | 4020 | .offset-xl-5 { 4021 | margin-left: 41.66666667%; 4022 | } 4023 | 4024 | .offset-xl-6 { 4025 | margin-left: 50%; 4026 | } 4027 | 4028 | .offset-xl-7 { 4029 | margin-left: 58.33333333%; 4030 | } 4031 | 4032 | .offset-xl-8 { 4033 | margin-left: 66.66666667%; 4034 | } 4035 | 4036 | .offset-xl-9 { 4037 | margin-left: 75%; 4038 | } 4039 | 4040 | .offset-xl-10 { 4041 | margin-left: 83.33333333%; 4042 | } 4043 | 4044 | .offset-xl-11 { 4045 | margin-left: 91.66666667%; 4046 | } 4047 | 4048 | .g-xl-0, 4049 | .gx-xl-0 { 4050 | --bs-gutter-x: 0; 4051 | } 4052 | 4053 | .g-xl-0, 4054 | .gy-xl-0 { 4055 | --bs-gutter-y: 0; 4056 | } 4057 | 4058 | .g-xl-1, 4059 | .gx-xl-1 { 4060 | --bs-gutter-x: 0.25rem; 4061 | } 4062 | 4063 | .g-xl-1, 4064 | .gy-xl-1 { 4065 | --bs-gutter-y: 0.25rem; 4066 | } 4067 | 4068 | .g-xl-2, 4069 | .gx-xl-2 { 4070 | --bs-gutter-x: 0.5rem; 4071 | } 4072 | 4073 | .g-xl-2, 4074 | .gy-xl-2 { 4075 | --bs-gutter-y: 0.5rem; 4076 | } 4077 | 4078 | .g-xl-3, 4079 | .gx-xl-3 { 4080 | --bs-gutter-x: 1rem; 4081 | } 4082 | 4083 | .g-xl-3, 4084 | .gy-xl-3 { 4085 | --bs-gutter-y: 1rem; 4086 | } 4087 | 4088 | .g-xl-4, 4089 | .gx-xl-4 { 4090 | --bs-gutter-x: 1.5rem; 4091 | } 4092 | 4093 | .g-xl-4, 4094 | .gy-xl-4 { 4095 | --bs-gutter-y: 1.5rem; 4096 | } 4097 | 4098 | .g-xl-5, 4099 | .gx-xl-5 { 4100 | --bs-gutter-x: 3rem; 4101 | } 4102 | 4103 | .g-xl-5, 4104 | .gy-xl-5 { 4105 | --bs-gutter-y: 3rem; 4106 | } 4107 | } 4108 | -------------------------------------------------------------------------------- /src/routes/styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100vh; 3 | } 4 | 5 | .success { 6 | border-color: var(--ins-color); 7 | background-color: var(--ins-color); 8 | } 9 | 10 | .error { 11 | border-color: var(--del-color); 12 | background-color: var(--del-color); 13 | } 14 | 15 | main > article, main { 16 | background-color: var(--background-color) !important; 17 | margin-bottom: 0 !important; 18 | border-radius: 0 !important; 19 | box-shadow: unset !important; 20 | } 21 | body > header { 22 | padding: 0 !important; 23 | } 24 | 25 | body > footer { 26 | padding: 15px !important; 27 | } 28 | 29 | footer, 30 | hgroup, 31 | table, 32 | button, 33 | select, 34 | form, 35 | figure { 36 | margin-bottom: 0 !important; 37 | } 38 | 39 | article { 40 | margin-top: 0 !important; 41 | padding-bottom: 0 !important; 42 | margin-bottom: calc(var(--block-spacing-vertical) / 2) !important; 43 | } 44 | 45 | article > header { 46 | padding: var(--spacing) !important; 47 | margin-bottom: calc(var(--block-spacing-vertical) / 2) !important; 48 | } 49 | 50 | article > footer { 51 | margin-top: calc(var(--block-spacing-vertical) / 2) !important; 52 | } 53 | 54 | th, 55 | td, 56 | button { 57 | padding: calc(var(--spacing) / 2) !important; 58 | } 59 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-static'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter({ 15 | fallback: 'index.html' 16 | }) 17 | } 18 | }; 19 | 20 | export default config; 21 | -------------------------------------------------------------------------------- /tests/dashboard.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from '@playwright/test'; 2 | 3 | test('dashboard basic functionality', async ({ page }) => { 4 | await page.goto('/'); 5 | await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible(); 6 | 7 | await page.getByRole('row', { name: 'node1 Demo Node' }).getByRole('radio').check(); 8 | await page.getByRole('row', { name: 'node2 Demo Node' }).getByRole('radio').check(); 9 | await page.getByRole('row', { name: 'node3 Demo Node' }).getByRole('radio').check(); 10 | await page.getByRole('row', { name: 'node4 Demo Node' }).getByRole('radio').check(); 11 | await page.locator('input[name="node4"]').check(); 12 | await page.locator('input[name="node3"]').check(); 13 | await page.locator('input[name="node2"]').check(); 14 | await page.locator('input[name="node1"]').check(); 15 | await page.getByRole('link', { name: 'Theme' }).click(); 16 | await page.getByText('Dark').click(); 17 | await page.getByRole('link', { name: 'Theme' }).click(); 18 | await page.getByText('Light').click(); 19 | }); 20 | 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vitest/config'; 3 | export default defineConfig({ 4 | //TODO: Enable PWA 5 | plugins: [sveltekit(), /*SvelteKitPWA()*/], 6 | test: { 7 | include: ['src/**/*.{test,spec}.{js,ts}'] 8 | } 9 | }); 10 | --------------------------------------------------------------------------------