:root { --colorBlack: rgb(0, 0, 0); --colorWhite: rgb(255, 255, 255); --colorGray: rgb(204, 204, 204); --colorPrimary: rgb(0, 90, 143); --colorSecondary: rgb(77, 172, 255); --colorTertiary: rgb(40, 63, 88); --colorQuaternary: rgb(207, 214, 227); --statusDarkCritical: rgb(255, 56, 56); --statusDarkSerious: rgb(255, 179, 0); --statusDarkCaution: rgb(252, 232, 58); --statusDarkNormal: rgb(86, 240, 0); --statusDarkStandby: rgb(45, 204, 255); --statusDarkOff: rgb(158, 167, 173); --statusLightCritical: rgb(255, 42, 4); --statusLightSerious: rgb(255, 175, 61); --statusLightCaution: rgb(250, 216, 0); --statusLightNormal: rgb(0, 226, 0); --statusLightStandby: rgb(100, 217, 255); --statusLightOff: rgb(142, 154, 163); --colorTag1: rgb(25, 199, 202); --colorTag2: rgb(120, 112, 208); --colorTag3: rgb(160, 13, 190); --colorTag4: rgb(216, 83, 30); --colorPrimaryLighten1: rgb(51, 123, 165); --colorPrimaryLighten2: rgb(102, 156, 188); --colorPrimaryLighten3: rgb(153, 189, 210); --colorPrimaryLighten4: rgb(204, 222, 233); --colorPrimaryDarken1: rgb(0, 72, 114); --colorPrimaryDarken2: rgb(0, 54, 86); --colorPrimaryDarken3: rgb(0, 36, 57); --colorPrimaryDarken4: rgb(0, 18, 29); --colorSecondaryLighten1: rgb(113, 189, 255); --colorSecondaryLighten2: rgb(148, 205, 255); --colorSecondaryLighten3: rgb(184, 222, 255); --colorSecondaryLighten4: rgb(219, 238, 255); --colorSecondaryDarken1: rgb(62, 138, 204); --colorSecondaryDarken2: rgb(46, 103, 153); --colorSecondaryDarken3: rgb(31, 69, 102); --colorSecondaryDarken4: rgb(15, 34, 51); --colorTertiaryLighten1: rgb(83, 101, 121); --colorTertiaryLighten2: rgb(126, 140, 155); --colorTertiaryLighten3: rgb(169, 178, 188); --colorTertiaryLighten4: rgb(212, 217, 222); --colorTertiaryDarken1: rgb(32, 50, 70); --colorTertiaryDarken2: rgb(24, 38, 53); --colorTertiaryDarken3: rgb(16, 25, 35); --colorTertiaryDarken4: rgb(8, 13, 18); --colorQuaternaryLighten1: rgb(217, 222, 233); --colorQuaternaryLighten2: rgb(226, 230, 238); --colorQuaternaryLighten3: rgb(236, 239, 244); --colorQuaternaryLighten4: rgb(245, 247, 249); --colorQuaternaryDarken1: rgb(166, 171, 182); --colorQuaternaryDarken2: rgb(124, 128, 136); --colorQuaternaryDarken3: rgb(83, 86, 91); --colorQuaternaryDarken4: rgb(41, 43, 45); --colorGrayLighten1: rgb(214, 214, 214); --colorGrayLighten2: rgb(224, 224, 224); --colorGrayLighten3: rgb(235, 235, 235); --colorGrayLighten4: rgb(245, 245, 245); --colorGrayDarken1: rgb(163, 163, 163); --colorGrayDarken2: rgb(122, 122, 122); --colorGrayDarken3: rgb(82, 82, 82); --colorGrayDarken4: rgb(41, 41, 41); --colorCriticalLighten1: rgb(255, 96, 96); --colorCriticalLighten2: rgb(255, 136, 136); --colorCriticalLighten3: rgb(255, 175, 175); --colorCriticalLighten4: rgb(255, 215, 215); --colorCriticalDarken1: rgb(204, 45, 45); --colorCriticalDarken2: rgb(153, 34, 34); --colorCriticalDarken3: rgb(102, 22, 22); --colorCriticalDarken4: rgb(51, 11, 11); --colorSeriousLighten1: rgb(255, 194, 51); --colorSeriousLighten2: rgb(255, 209, 102); --colorSeriousLighten3: rgb(255, 225, 153); --colorSeriousLighten4: rgb(255, 240, 204); --colorSeriousDarken1: rgb(204, 143, 0); --colorSeriousDarken2: rgb(153, 107, 0); --colorSeriousDarken3: rgb(102, 72, 0); --colorSeriousDarken4: rgb(51, 36, 0); --colorCautionLighten1: rgb(253, 237, 97); --colorCautionLighten2: rgb(253, 241, 137); --colorCautionLighten3: rgb(254, 246, 176); --colorCautionLighten4: rgb(254, 250, 216); --colorCautionDarken1: rgb(202, 186, 46); --colorCautionDarken2: rgb(151, 139, 35); --colorCautionDarken3: rgb(101, 93, 23); --colorCautionDarken4: rgb(50, 46, 12); --colorNormalLighten1: rgb(120, 243, 51); --colorNormalLighten2: rgb(154, 246, 102); --colorNormalLighten3: rgb(187, 249, 153); --colorNormalLighten4: rgb(221, 252, 204); --colorNormalDarken1: rgb(69, 192, 0); --colorNormalDarken2: rgb(52, 144, 0); --colorNormalDarken3: rgb(34, 96, 0); --colorNormalDarken4: rgb(17, 48, 0); --colorStandbyLighten1: rgb(87, 214, 255); --colorStandbyLighten2: rgb(129, 224, 255); --colorStandbyLighten3: rgb(171, 235, 255); --colorStandbyLighten4: rgb(213, 245, 255); --colorStandbyDarken1: rgb(36, 163, 204); --colorStandbyDarken2: rgb(27, 122, 153); --colorStandbyDarken3: rgb(18, 82, 102); --colorStandbyDarken4: rgb(9, 41, 51); --colorOffLighten1: rgb(177, 185, 189); --colorOffLighten2: rgb(197, 202, 206); --colorOffLighten3: rgb(216, 220, 222); --colorOffLighten4: rgb(236, 237, 239); --colorOffDarken1: rgb(126, 134, 138); --colorOffDarken2: rgb(95, 100, 104); --colorOffDarken3: rgb(63, 67, 69); --colorOffDarken4: rgb(32, 33, 35); --colorTag1Lighten1: rgb(71, 210, 213); --colorTag1Lighten2: rgb(117, 221, 223); --colorTag1Lighten3: rgb(163, 233, 234); --colorTag1Lighten4: rgb(209, 244, 244); --colorTag1Darken1: rgb(20, 159, 162); --colorTag1Darken2: rgb(15, 119, 121); --colorTag1Darken3: rgb(10, 80, 81); --colorTag1Darken4: rgb(5, 40, 40); --colorTag2Lighten1: rgb(147, 141, 217); --colorTag2Lighten2: rgb(174, 169, 227); --colorTag2Lighten3: rgb(201, 198, 236); --colorTag2Lighten4: rgb(228, 226, 246); --colorTag2Darken1: rgb(96, 90, 166); --colorTag2Darken2: rgb(72, 67, 125); --colorTag2Darken3: rgb(48, 45, 83); --colorTag2Darken4: rgb(24, 22, 42); --colorTag3Lighten1: rgb(179, 61, 203); --colorTag3Lighten2: rgb(198, 110, 216); --colorTag3Lighten3: rgb(217, 158, 229); --colorTag3Lighten4: rgb(236, 207, 242); --colorTag3Darken1: rgb(128, 10, 152); --colorTag3Darken2: rgb(96, 8, 114); --colorTag3Darken3: rgb(64, 5, 76); --colorTag3Darken4: rgb(32, 3, 38); --colorTag4Lighten1: rgb(224, 117, 75); --colorTag4Lighten2: rgb(232, 152, 120); --colorTag4Lighten3: rgb(239, 186, 165); --colorTag4Lighten4: rgb(247, 221, 210); --colorTag4Darken1: rgb(173, 66, 24); --colorTag4Darken2: rgb(130, 50, 18); --colorTag4Darken3: rgb(86, 33, 12); --colorTag4Darken4: rgb(43, 17, 6); } @font-face { font-family: "Open Sans"; src: url("../fonts/opensans-bold-webfont.woff2") format("woff2"), url("../fonts/opensans-bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: "Open Sans"; src: url("../fonts/opensans-light-webfont.woff2") format("woff2"), url("../fonts/opensans-light-webfont.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "Open Sans"; src: url("../fonts/opensans-regular-webfont.woff2") format("woff2"), url("../fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "webfont"; src: url("../fonts/roboto-mono-regular.woff2") format("woff2"), url("../fonts/roboto-mono-regular.woff") format("woff"); font-weight: 500; font-style: normal; } /* ** This is as close as we get to a CSS reset in Astro, moving everything to ** the old IE border-box model of including padding in the overall size. */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: inherit; } /* ** ** ** */ body { margin: 0; padding: 0; font-family: "Open Sans"; font-family: var(--fontFamily, "Open Sans"); font-size: 1rem; color: rgb(255, 255, 255); color: var(--fontColor, rgb(255, 255, 255)); background-color: rgb(24, 38, 53); background-color: var(--backgroundColor, rgb(24, 38, 53)); } label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ** CSS-styled Scrollbars for IE & Webkit browsers ** Dark theme by default. ** */ body { scrollbar-face-color: rgb(58, 129, 191); scrollbar-face-color: var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)); scrollbar-track-color: rgb(32, 50, 70) ; scrollbar-track-color: var( --scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70) ); } ::-webkit-scrollbar { width: 18px; height: 18px; background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(46, 103, 153); background-color: var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153)); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } /* visually "centers" because the dark edge of the shadow gives the illusion this is offset */ ::-webkit-scrollbar-thumb:vertical { border-left-width: 4px; } ::-webkit-scrollbar-thumb:horizontal { border-top-width: 4px; } ::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-thumb:hover { background-color: rgb(58, 129, 191) ; background-color: var( --scrollBarThumbBackgroundHoverColor, rgb(58, 129, 191) ); } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: rgb(32, 50, 70); background-color: var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70)); } ::-webkit-scrollbar-track:vertical { -webkit-box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15); } ::-webkit-scrollbar-track:horizontal { -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } .dark-theme { /* Global Colors ========================================================================== */ --backgroundColor: rgb(46, 103, 153); --backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153)); --fontColor: rgb(255, 255, 255); --fontColor: var(--colorWhite, rgb(255, 255, 255)); --fontLowContrastColor: rgb(204, 204, 204); --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); --fontInvertedColor: rgb(0, 0, 0); --fontInvertedColor: var(--colorBlack, rgb(0, 0, 0)); --fontInvertedBackgroundColor: rgb(255, 255, 255); --fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --fontLinkColor: rgb(77, 172, 255); --fontLinkColor: var(--colorSecondary, rgb(77, 172, 255)); --fontLinkHoverColor: rgb(113, 189, 255); --fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255)); /* Status Custom */ --wcagCompliance: rgba(255, 255, 255, 0); --criticalBorder: rgb(255, 56, 56); --criticalBorder: var(--colorCritical, rgb(255, 56, 56)); --colorCritical: rgb(255, 42, 4); --colorCritical: var(--statusDarkCritical, rgb(255, 42, 4)); --colorSerious: rgb(255, 175, 61); --colorSerious: var(--statusDarkSerious, rgb(255, 175, 61)); --colorCaution: rgb(250, 216, 0); --colorCaution: var(--statusDarkCaution, rgb(250, 216, 0)); --colorNormal: rgb(0, 226, 0); --colorNormal: var(--statusDarkNormal, rgb(0, 226, 0)); --colorStandby: rgb(100, 217, 255); --colorStandby: var(--statusDarkStandby, rgb(100, 217, 255)); --colorOff: rgb(142, 154, 163); --colorOff: var(--statusDarkOff, rgb(142, 154, 163)); /* Button Colors ========================================================================== For standard and outline buttons */ /* Button */ --buttonTextColor: #fff; --buttonTextColor: var(--colorWhite, #fff); --buttonBackgroundColor: rgb(0, 90, 143); --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonBorderColor: rgb(0, 90, 143); --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); /* Button Hover State */ --buttonHoverTextColor: #fff; --buttonHoverTextColor: var(--colorWhite, #fff); --buttonHoverBackgroundColor: rgb(58, 129, 191); --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); --buttonHoverBorderColor: rgb(58, 129, 191); --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); /* Button Active State */ --buttonActiveControlTextColor: #fff; --buttonActiveControlTextColor: var(--colorWhite, #fff); --buttonActiveBackgroundColor: rgb(0, 90, 143); --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonActiveBorderColor: rgb(0, 90, 143); --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); /* Default Button State */ --buttonDefaultBorderColor: #fff; --buttonDefaultBorderColor: var(--colorWhite, #fff); /* Outline Button Variant */ --buttonOutlineTextColor: rgb(255, 255, 255); --buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255)); --buttonOutlineBackgroundColor: transparent; --buttonOutlineBorderColor: rgb(0, 90, 143); --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); /* Outline Button Variant Hover State */ --buttonOutlineHoverTextColor: rgb(0, 90, 143); --buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143)); --buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75); --buttonOutlineHoverBorderColor: rgb(58, 129, 191) ; --buttonOutlineHoverBorderColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); /* Control Colors ========================================================================== For checkboxes, radio buttons etc … */ --controlTextColor: #fff; --controlTextColor: var(--colorWhite, #fff); --controlLabelColor: rgb(255, 255, 255); --controlLabelColor: var(--colorWhite, rgb(255, 255, 255)); --controlBackgroundColor: rgb(0, 90, 143); --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --controlBorderColor: rgb(77, 172, 255); --controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); --controlAccentColor: rgb(77, 172, 255); --controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); --controlSelectedTextColor: #fff; --controlSelectedTextColor: var(--colorWhite, #fff); --controlSelectedBackgroundColor: rgb(58, 129, 191) ; --controlSelectedBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --controlSelectedBorderColor: rgb(255, 255, 255); --controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255)); /* Progress Colors ========================================================================== */ --progressDeterminateBarBackgroundColor: rgb(77, 172, 255) ; --progressDeterminateBarBackgroundColor: var( --colorSecondary, rgb(77, 172, 255) ); --progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3); --progressDeterminateTrackBorderColor: rgb(20, 32, 44) ; --progressDeterminateTrackBorderColor: var( --colorTertiaryDarken2, rgb(20, 32, 44) ); --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E "); /* Slider Colors ========================================================================== */ --sliderThumbBackgroundColor: rgb(0, 90, 143); --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --sliderThumbBorderColor: rgb(255, 255, 255); --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); --sliderTrackBorderColor: transparent; --sliderTrackBackgroundColor: rgb(204, 204, 204); --sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); --sliderHoverThumbBackgroundColor: rgb(58, 129, 191) ; --sliderHoverThumbBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --sliderSelectedThumb--sliderSelectedTrackBackgroundColor: rgb(77, 172, 255) ; --sliderSelectedThumb--sliderSelectedTrackBackgroundColor: var( --colorSecondary, rgb(77, 172, 255) ); /* Segmented Button Colors ========================================================================== */ --segmentedButtonBorderColor: rgb(30, 47, 66); --segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); --segmentedButtonBackgroundColor: rgb(0, 90, 143); --segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --segmentedButtonTextColor: rgb(255, 255, 255); --segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255)); --segmentedButtonHoverBackgroundColor: rgb(58, 129, 191) ; --segmentedButtonHoverBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --segmentedButtonHoverTextColor: rgb(255, 255, 255); --segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255)); --segmentedButtonSelectedBackgroundColor: rgb(58, 129, 191) ; --segmentedButtonSelectedBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --segmentedButtonSelectedBoxShadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), inset 0 3px 4px rgba(0, 0, 0, 0.12), inset 0 1px 5px rgba(0, 0, 0, 0.2); --segmentedButtonSelectedTextColor: rgb(255, 255, 255); --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); /* Drop Down/Select Colors ========================================================================== */ --selectBackgroundColor: rgb(0, 90, 143); --selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --selectBorderColor: rgb(0, 90, 143); --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --selectTextColor: rgb(255, 255, 255); --selectTextColor: var(--colorWhite, rgb(255, 255, 255)); --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20(51167)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate(5.000000%2C%202.500000)%20scale(1%2C%20-1)%20translate(-5.000000%2C%20-2.500000)%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); /* Toggle Colors ========================================================================== */ --toggleButtonBackgroundColor: rgb(0, 90, 143); --toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --toggleBaseBackgroundColor: #000; --toggleBaseBackgroundColor: var(--colorBlack, #000); --toggleBaseBorderColor: rgb(0, 0, 0); --toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0)); --toggleBaseTextColor: rgb(255, 255, 255); --toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255)); --toggleBaseSelectedTextColor: rgb(86, 240, 0); --toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); /* Alt Toggle */ /* --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); */ --toggleThumbBorderColor: #fff; --toggleThumbBackgroundColor: rgb(255, 255, 255); --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --toggleTrackBorderColor: rgb(122, 122, 122); --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); --toggleTrackBackgroundColor: rgb(204, 204, 204); --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); /* Selected State */ /* --toggleSelectedThumbBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); */ --toggleSelectedThumbBorderColor: #fff; --toggleSelectedTrackBackgroundColor: rgb(77, 172, 255); --toggleSelectedTrackBackgroundColor: var(--colorSecondary, rgb(77, 172, 255)); --toggleSelectedTrackBorderColor: rgb(46, 103, 153); --toggleSelectedTrackBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153)); /* Disabled State */ --toggleDisabledThumbBorderColor: rgb(122, 122, 122); --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); --toggleDisabledThumbBackgroundColor: rgb(163, 163, 163) ; --toggleDisabledThumbBackgroundColor: var( --colorGrayDarken1, rgb(163, 163, 163) ); --toggleDisabledSelectedThumbBorderColor: rgb(122, 122, 122); --toggleDisabledSelectedThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); /* Pushbutton Colors ========================================================================== */ --pushbuttonBackgroundColor: rgb(0, 90, 143); --pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --pushbuttonBorderColor: rgb(0, 0, 0); --pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0)); --pushbuttonTextColor: rgb(255, 255, 255); --pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255)); --pushbuttonSelectedBackgroundColor: rgb(0, 0, 0); --pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); --pushbuttonSelectedBorderColor: rgb(0, 0, 0); --pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0)); --pushbuttonSelectedTextColor: rgb(86, 240, 0); --pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); /* Clock Colors ========================================================================== */ --clockTextColor: rgb(255, 255, 255); --clockTextColor: var(--colorWhite, rgb(255, 255, 255)); --clockBackgroundColor: rgb(20, 32, 44); --clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); --clockBorderColor: rgb(39, 86, 128); --clockBorderColor: var(--colorTertiary, rgb(39, 86, 128)); /* Log Colors ========================================================================== */ --logTextColor: rgb(255, 255, 255); --logTextColor: var(--colorWhite, rgb(255, 255, 255)); --logBackgroundColor: var(--colorTertiaryDarken1); --logBackgroundColor: var(--colorTertiaryDarken1); --logBorderColor: var(--colorTertiary); --logBorderColor: var(--colorTertiary); --logHeaderTextColor: var(--colorWhiteDarken2); --logHeaderTextColor: var(--colorWhiteDarken2); --logHeaderBackgroundColor: var(--colorTertiaryDarken2); --logHeaderBackgroundColor: var(--colorTertiaryDarken2); --logFilterBackgroundColor: var(--colorStandbyLighten1); --logFilterBackgroundColor: var(--colorStandbyLighten1); --logFilterTextColor: var(--colorStandbyDarken3); --logFilterTextColor: var(--colorStandbyDarken3); /* Tree Colors ========================================================================== */ --treeTextColor: rgb(255, 255, 255); --treeTextColor: var(--colorWhite, rgb(255, 255, 255)); --treeBackgroundColor: var(--colorTertiaryDarken1); --treeBackgroundColor: var(--colorTertiaryDarken1); --treeBorderColor: var(--colorBlack); --treeBorderColor: var(--colorBlack); --treeItemBorderColor: var(--colorTertiary); --treeItemBorderColor: var(--colorTertiary); --treeSelectedBackgroundColor: rgb(58, 129, 191); --treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(58, 129, 191)); /* Tab Colors ========================================================================== */ --tabTextColor: rgb(77, 172, 255); --tabTextColor: var(--colorSecondary, rgb(77, 172, 255)); --tabBackgroundColor: rgb(30, 47, 66); --tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); --tabBorderColor: rgb(20, 32, 44); --tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); --tabSelectedTextColor: rgb(255, 255, 255); --tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); --tabSelectedBorderColor: rgb(77, 172, 355); --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355)); /* Card Colors ========================================================================== */ --cardBackgroundColor: var(--colorTertiaryDarken1); --cardBackgroundColor: var(--colorTertiaryDarken1); --cardHeaderBackgroundColor: var(--colorTertiaryDarken3); --cardHeaderBackgroundColor: var(--colorTertiaryDarken3); --cardHeaderTextColor: #fff; --cardHeaderTextColor: var(--colorWhite, #fff); /* Input/Text Field Colors ========================================================================== */ --inputBackgroundColor: rgb(255, 255, 255); --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --inputBorderColor: transparent; --inputTextColor: rgb(14, 11, 11); --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); --inputFocusBorderColor: var(--colorSecondary); --inputFocusBorderColor: var(--colorSecondary); /* --inputFocusBoxShadow: 0 0 4px var(--colorSecondaryLighten3); */ --inputFocusBoxShadow: inset 0 0 0 1px white, inset 0 0 0 2px var(--colorPrimary); --inputFocusBoxShadow: inset 0 0 0 1px white, inset 0 0 0 2px var(--colorPrimary); --inputInvalidBorderColor: rgb(255, 48, 48); --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48)); /* Status Symbols ========================================================================== */ --statusOff: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusStandby: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%231EDCFF%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusNormal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusCaution: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%204H14V12H2z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusSerious: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%203H12V12H3z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusCritical: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2013.667L1%2013.667%208%202z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); /* Scrollbar Colors -- Dark ========================================================================== */ --scrollBarThumbBackgroundColor: rgb(46, 103, 153) ; --scrollBarThumbBackgroundColor: var( --colorSecondaryDarken2, rgb(46, 103, 153) ); --scrollBarThumbBackgroundHoverColor: rgb(58, 129, 191) ; --scrollBarThumbBackgroundHoverColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --scrollBarTrackBackgroundColor: rgb(32, 50, 70); --scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); --scrollBarTrackCornerBackgroundColor: rgb(32, 50, 70) ; --scrollBarTrackCornerBackgroundColor: var( --colorTertiaryDarken1, rgb(32, 50, 70) ); /* Timeline Colors -- Dark ========================================================================== */ --timelineHeaderBackgroundColor: rgb(32, 50, 70); --timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); --timelineHeaderTextColor: rgb(255,255,255); --timelineHeaderTextColor: var(--fontColor, rgb(255,255,255)); --timelineRulerBackgroundColor: rgb(32, 50, 70); --timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); --timelineRulerTextColor: rgb(255,255,255); --timelineRulerTextColor: var(--fontColor, rgb(255,255,255)); --timelineTrackLabelBackgroundColor: rgb(40, 63, 88); --timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); --timelineTrackBackgroundColor: rgb(40, 63, 88); --timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); --timelineRegionBackgroundColor: var(--colorPrimaryDarken3); --timelineRegionBackgroundColor: var(--colorPrimaryDarken3 rgb(0, 36, 57)); --timelineRegionTextColor: rgb(255, 255, 255); --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); --timelineRegionBorderColor: rgb(0, 90, 143); --timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --timelineRegionSelectedBorderColor: rgb(77, 172, 255); --timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); --timelineRegionSelectedBackgroundColor: rgb(62, 138, 204); --timelineRegionSelectedBackgroundColor: var(--colorSecondaryDarken1, rgb(62, 138, 204)); --timelineRegionSelectedTextColor: var(--fontColor) rgb(255,255,255)); --timelineRegionSelectedTextColor: var(--fontColor) rgb(255,255,255)); } li.dark-theme { display: none; } .light-theme { /* Global Colors ========================================================================== */ --backgroundColor: rgb(243, 245, 248); --backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248)); --fontColor: rgb(0, 0, 0); --fontColor: var(--colorBlack, rgb(0, 0, 0)); --fontLowContrastColor: rgb(204, 204, 204); --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); --fontInvertedColor: rgb(255, 255, 255); --fontInvertedColor: var(--colorWhite, rgb(255, 255, 255)); --fontInvertedBackgroundColor: rgb(0, 0, 0); --fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); --fontLinkColor: rgb(62, 138, 204); --fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204)); --fontLinkHoverColor: rgb(77, 172, 255); --fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255)); --wcagCompliance: rgba(0, 0, 0, 0.5); --criticalBorder: #7f1c1c; --colorCritical: rgb(255, 42, 4); --colorCritical: var(--statusLightCritical, rgb(255, 42, 4)); --colorSerious: rgb(255, 175, 61); --colorSerious: var(--statusLightSerious, rgb(255, 175, 61)); --colorCaution: rgb(250, 216, 0); --colorCaution: var(--statusLightCaution, rgb(250, 216, 0)); --colorNormal: rgb(0, 226, 0); --colorNormal: var(--statusLightNormal, rgb(0, 226, 0)); --colorStandby: rgb(100, 217, 255); --colorStandby: var(--statusLightStandby, rgb(100, 217, 255)); --colorOff: rgb(142, 154, 163); --colorOff: var(--statusLightOff, rgb(142, 154, 163)); /* Button Colors ========================================================================== For standard and outline buttons */ /* Button */ --buttonTextColor: #fff; --buttonTextColor: var(--colorWhite, #fff); --buttonBackgroundColor: rgb(0, 90, 143); --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonBorderColor: rgb(0, 90, 143); --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); /* Button Hover State */ --buttonHoverTextColor: #fff; --buttonHoverTextColor: var(--colorWhite, #fff); --buttonHoverBackgroundColor: rgb(58, 129, 191); --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); --buttonHoverBorderColor: rgb(58, 129, 191); --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); /* Button Active State */ --buttonActiveControlTextColor: #fff; --buttonActiveControlTextColor: var(--colorWhite, #fff); --buttonActiveBackgroundColor: rgb(0, 90, 143); --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonActiveBorderColor: rgb(0, 90, 143); --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); /* Default Button State */ --buttonDefaultBorderColor: #fff; --buttonDefaultBorderColor: var(--colorWhite, #fff); /* Outline Button Variant */ --buttonOutlineTextColor: rgb(0, 90, 143); --buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonOutlineBackgroundColor: transparent; --buttonOutlineBorderColor: rgb(0, 90, 143); --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); /* Outline Button Variant Hover State */ --buttonOutlineHoverTextColor: rgb(0, 90, 143); --buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); --buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05); --buttonOutlineHoverBorderColor: rgb(58, 129, 191) ; --buttonOutlineHoverBorderColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); /* Control Colors ========================================================================== For checkboxes, radio buttons etc … */ --controlTextColor: rgb(255, 255, 255); --controlTextColor: var(--colorWhite, rgb(255, 255, 255)); --controlLabelColor: rgb(0, 0, 0); --controlLabelColor: var(--colorBlack, rgb(0, 0, 0)); --controlBackgroundColor: rgb(0, 90, 143); --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --controlBorderColor: rgb(0, 90, 143); --controlBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --controlAccentColor: rgb(77, 172, 255); --controlAccentColor: var(--colorSecondary, rgb(77, 172, 255)); --controlSelectedTextColor: rgb(0, 0, 0); --controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); --controlSelectedBackgroundColor: rgb(58, 129, 191) ; --controlSelectedBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --controlSelectedBorderColor: rgb(0, 90, 143); --controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --controlHoverOutlineBackgroundColor: none; --controlSelectedOutlineBorderColor: rgb(0, 90, 143); --controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --controlSelectedOutlineBackgroundColor: rgb(58, 129, 191) ; --controlSelectedOutlineBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); /* Progress Bar Colors ========================================================================== */ --progressDeterminateBarBackgroundColor: rgb(77, 172, 255) ; --progressDeterminateBarBackgroundColor: var( --colorSecondary, rgb(77, 172, 255) ); --progressDeterminateTrackBackgroundColor: rgb(255, 255, 255) ; --progressDeterminateTrackBackgroundColor: var( --colorWhite, rgb(255, 255, 255) ); --progressDeterminateTrackBorderColor: rgb(207, 214, 227) ; --progressDeterminateTrackBorderColor: var( --colorQuaternary, rgb(207, 214, 227) ); --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='66' height='66' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='70.883%25' y1='4.637%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%235CB3FF' offset='0%25'/%3E %3Cstop stop-color='%23F6F7F8' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M33 65.5C15.05 65.5.5 50.95.5 33S15.05.5 33 .5 65.5 15.05 65.5 33 50.95 65.5 33 65.5zm0-7c14.083 0 25.5-11.417 25.5-25.5S47.083 7.5 33 7.5 7.5 18.917 7.5 33 18.917 58.5 33 58.5z' stroke='%23D7DDE2' fill='%23FFF'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)' transform='translate(1 1)'/%3E %3Cpath d='M48.564 13c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C53 7.248 51.572 5 49.234 5S45 6.867 45 9.17c0 2.304 1.225 3.83 3.564 3.83z' stroke='%234DACFF' fill='%2352AEFF'/%3E %3C/g%3E %3C/svg%3E "); /* Slider Colors ========================================================================== */ --sliderThumbBackgroundColor: rgb(0, 90, 143); --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); --sliderThumbBorderColor: rgb(255, 255, 255); --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); --sliderTrackBorderColor: rgb(207, 214, 227); --sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227)); --sliderTrackBackgroundColor: rgb(255, 255, 255); --sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --sliderSelectedThumb--sliderSelectedTrackBackgroundColor: rgb(77, 172, 255) ; --sliderSelectedThumb--sliderSelectedTrackBackgroundColor: var( --colorSecondary, rgb(77, 172, 255) ); /* Segmented Button Colors ========================================================================== */ --segmentedButtonBorderColor: rgb(0, 90, 143); --segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --segmentedButtonBackgroundColor: rgba(255, 255, 255); --segmentedButtonBackgroundColor: var(--colorWhite, rgba(255, 255, 255)); --segmentedButtonTextColor: rgb(0, 90, 143); --segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143)); --segmentedButtonHoverBackgroundColor: rgba(0, 90, 143, 0.05); --segmentedButtonHoverTextColor: rgb(0, 90, 143); --segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); --segmentedButtonSelectedBackgroundColor: rgb(58, 129, 191) ; --segmentedButtonSelectedBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --segmentedButtonSelectedBoxShadow: inset 0 3px 4px rgba(0, 0, 0, 0.1), inset 0 1px 5px rgba(0, 0, 0, 0.06); transition: box-shadow 0.067s ease-out; --segmentedButtonSelectedTextColor: rgb(255, 255, 255); --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); /* Drop Down/Select Colors ========================================================================== */ --selectBackgroundColor: rgb(255, 255, 255); --selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --selectBorderColor: rgb(0, 90, 143); --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --selectTextColor: rgb(0, 90, 143); --selectTextColor: var(--colorPrimary, rgb(0, 90, 143)); --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20(51167)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22rgb(0,0,0)%22%20transform%3D%22translate(5.000000%2C%202.500000)%20scale(1%2C%20-1)%20translate(-5.000000%2C%20-2.500000)%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); /* Toggle Colors ========================================================================== */ --toggleButtonBackgroundColor: rgb(255, 255, 255); --toggleButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --toggleButtonBoxShadow: 0 0 3px rgba(0, 0, 0, 0.25), 1px 0 2px rgba(0, 0, 0, 0.3); --toggleBaseBackgroundColor: linear-gradient( to right, var(--colorNormal) 50%, var(--colorPrimaryLighten4) 50.1% ); --toggleBaseBackgroundColor: linear-gradient( to right, var(--colorNormal) 50%, var(--colorPrimaryLighten4) 50.1% ); --toggleBaseBorderColor: rgb(0, 90, 143); --toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143)); --toggleBaseTextColor: rgb(255, 255, 255); --toggleBaseTextColor: var(--colorPrimary, rgb(255, 255, 255)); --toggleBaseSelectedTextColor: #007300; --toggleButtonSelectedBoxShadow: 0 0 3px rgba(0, 0, 0, 0.3), -1px 0 2px rgba(0, 0, 0, 0.3); /* Alt Toggle */ --toggleThumbBorderColor: rgb(122, 122, 122); --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); --toggleThumbBackgroundColor: rgb(255, 255, 255); --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --toggleSelectedThumbBorderColor: rgb(27, 122, 153); --toggleSelectedThumbBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); --toggleSelectedThumbBackgroundColor: rgb(100, 217, 255); --toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); --toggleTrackBorderColor: rgb(122, 122, 122); --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); --toggleTrackBackgroundColor: rgb(204, 204, 204); --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); --toggleSelectedTrackBorderColor: rgb(27, 122, 153); --toggleSelectedTrackBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); --toggleSelectedTrackBackgroundColor: rgb(100, 217, 255); --toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); --toggleDisabledThumbBorderColor: rgb(122, 122, 122); --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); --toggleDisabledThumbBackgroundColor: rgb(255, 255, 255) ; --toggleDisabledThumbBackgroundColor: var( --colorWhite, rgb(255, 255, 255) ); --toggleDisabledSelectedThumbBorderColor: rgb(153, 189, 210); --toggleDisabledSelectedThumbBorderColor: var(--colorPrimaryLighten3, rgb(153, 189, 210)); /* Pushbutton Colors ========================================================================== */ --pushbuttonBackgroundColor: rgb(255, 255, 255); --pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --pushbuttonBorderColor: rgb(0, 90, 143); --pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); --pushbuttonTextColor: rgb(0, 90, 143); --pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143)); --pushbuttonSelectedBackgroundColor: rgb(91, 255, 0); --pushbuttonSelectedBackgroundColor: var(--colorNormal, rgb(91, 255, 0)); --pushbuttonSelectedBorderColor: #3dc100; /* var(--colorNormal, rgb(91, 255, 0)); */ --pushbuttonSelectedTextColor: #007300; /* var(--colorWhite, rgb(255, 255, 255)); */ /* Clock Colors ========================================================================== */ --clockTextColor: rgb(0, 0, 0); --clockTextColor: var(--colorBlack, rgb(0, 0, 0)); --clockBackgroundColor: rgb(255, 255, 255); --clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --clockBorderColor: rgb(39, 86, 128); --clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128)); /* Modal Colors ========================================================================== */ --modalTextColor: rgb(0, 0, 0); --modalTextColor: var(--colorBlack, rgb(0, 0, 0)); --modalBackgroundColor: rgb(255, 255, 255); --modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --modalBorderColor: rgb(0, 90, 143); --modalBorderColor: var(--colorPrimary, rgb(0, 90, 143)); /* Log Colors ========================================================================== */ --logTextColor: var(--colorBlack); --logTextColor: var(--colorBlack); --logBackgroundColor: var(--colorWhite); --logBackgroundColor: var(--colorWhite); --logBorderColor: var(--colorQuaternaryLighten2); --logBorderColor: var(--colorQuaternaryLighten2); --logHeaderTextColor: var(--colorBlack); --logHeaderTextColor: var(--colorBlack); --logHeaderBackgroundColor: var(--colorQuaternary); --logHeaderBackgroundColor: var(--colorQuaternary); --logFilterBackgroundColor: var(--colorStandbyLighten3); --logFilterBackgroundColor: var(--colorStandbyLighten3); --logFilterTextColor: var(--colorStandbyDarken2); --logFilterTextColor: var(--colorStandbyDarken2); /* Tree Colors ========================================================================== */ --treeTextColor: rgb(0, 0, 0); --treeTextColor: var(--colorBlack, rgb(0, 0, 0)); --treeBackgroundColor: var(--colorWhite); --treeBackgroundColor: var(--colorWhite); --treeBorderColor: var(--colorQuaternary); --treeBorderColor: var(--colorQuaternary); --treeItemBorderColor: var(--colorQuaternary); --treeItemBorderColor: var(--colorQuaternary); --treeAccentColor: var(--colorSecondary); --treeAccentColor: var(--colorSecondary); --treeSelectedBackgroundColor: rgb(58, 129, 191) ; --treeSelectedBackgroundColor: var( --colorSecondaryDarken1, rgb(58, 129, 191) ); --treeSelectedAccentColor: var(--colorSecondaryLighten1); --treeSelectedAccentColor: var(--colorSecondaryLighten1); --treeSelectedTextColor: var(--colorWhite); --treeSelectedTextColor: var(--colorWhite); /* Tab Colors ========================================================================== */ --tabTextColor: rgb(0, 90, 143); --tabTextColor: var(--colorPrimary, rgb(0, 90, 143)); --tabBackgroundColor: rgb(255, 255, 255); --tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --tabBorderColor: rgb(219, 224, 234); --tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234)); --tabHoverTextColor: rgb(77, 172, 255); --tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255)); --tabSelectedTextColor: rgb(0, 0, 0); --tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); --tabSelectedBorderColor: rgb(77, 172, 255); --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); /* Card Colors ========================================================================== */ --cardBackgroundColor: var(--colorQuaternaryLighten2); --cardBackgroundColor: var(--colorQuaternaryLighten2); --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1); --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1); --cardHeaderTextColor: #fff; --cardHeaderTextColor: var(--colorWhite, #fff); /* Input/Text Field Colors ========================================================================== */ --inputBackgroundColor: rgb(255, 255, 255); --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); --inputBorderColor: rgb(255, 255, 255); --inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255)); --inputTextColor: rgb(14, 11, 11); --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); --inputFocusBorderColor: var(--colorSecondary); --inputFocusBorderColor: var(--colorSecondary); --inputFocusBoxShadow: none; --inputInvalidBorderColor: rrgb(255, 48, 48) ed; --inputInvalidBorderColor: var(--colorCritical, rrgb(255, 48, 48) ed); /* Status ========================================================================== */ --statusOff: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222.5%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusStandby: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20stroke%3D%22%231EDCFF%22%20stroke-width%3D%224%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222.5%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); --statusNormal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusCaution: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M2.5%204.5H13.5V11.5H2.5z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusSerious: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M3.5%203.5H11.5V11.5H3.5z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); --statusCritical: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M14.1294815%2C13.5%20L8%2C2.99231743%20L1.8705185%2C13.5%20L14.1294815%2C13.5%20Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); /* Scrollbar Colors -- Light ========================================================================== */ --scrollBarThumbBackgroundColor: #9ba0aa; --scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa); --scrollBarThumbBackgroundHoverColor: #676a71; --scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71); --scrollBarTrackBackgroundColor: transparent; --scrollBarTrackCornerBackgroundColor: #f2f4f7 ; --scrollBarTrackCornerBackgroundColor: var( --colorQuaternaryLighten4, #f2f4f7 ); /* Timeline Colors -- Dark ========================================================================== */ --timelineHeaderBackgroundColor: rgb(16, 25, 35); --timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); --timelineHeaderTextColor: rgb(0,0,0); --timelineHeaderTextColor: var(--fontColor, rgb(0,0,0)); --timelineRulerBackgroundColor: rgb(16, 25, 35); --timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); --timelineRulerTextColor: rgb(0,0,0); --timelineRulerTextColor: var(--fontColor, rgb(0,0,0)); --timelineTrackLabelBackgroundColor: rgb(40, 63, 88) ; --timelineTrackLabelBackgroundColor: var( --colorQuaternaryLighten2, rgb(40, 63, 88) ); --timelineTrackBackgroundColor: rgb(40, 63, 88) ; --timelineTrackBackgroundColor: var( --colorQuaternaryLighten2, rgb(40, 63, 88) ); --timelineRegionBackgroundColor: var(--colorPrimaryLighten4); --timelineRegionBackgroundColor: var(--colorPrimaryLighten4 rgb(24, 38, 53)); --timelineRegionTextColor: rgb(255, 255, 255); --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); --timelineRegionBorderColor: var(--colorPrimaryLighten3); --timelineRegionBorderColor: var(--colorPrimaryLighten3); --timelineRegionSelectedBorderColor: rgb(77, 172, 255); --timelineRegionSelectedBorderColor: var(--colorSecondaryDarken3, rgb(77, 172, 255)); --timelineRegionSelectedBackgroundColor: rgb(62, 138, 204); --timelineRegionSelectedBackgroundColor: var(--colorSecondaryDarken1, rgb(62, 138, 204)); --timelineRegionSelectedTextColor: var(--fontColor) rgb(255,255,255)); --timelineRegionSelectedTextColor: var(--fontColor) rgb(255,255,255)); } li.light-theme { display: none; } h1, h2, h3 { font-family: "Open Sans", sans-serif; font-weight: 300; color: rgb(255, 255, 255); color: var(--fontColor, rgb(255, 255, 255)); margin: 0 0 0.5rem 0; } h1, .h1 { font-size: 2.375rem; } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.375rem; } p { margin: 0 0 1rem 0; color: rgb(255, 255, 255); color: var(--fontColor, rgb(255, 255, 255)); } a { color: rgb(77, 172, 255); color: var(--fontLinkColor, rgb(77, 172, 255)); text-decoration: none; } a:hover { color: rgb(113, 189, 255); color: var(--fontLinkHoverColor, rgb(113, 189, 255)); } ul, ol { } dl { } dt { font-weight: 600; margin: 0; } dd { margin: 0 0 0.5rem 0; } .light { font-weight: 300; } .regular { font-weight: 500; } .semi-bold { font-weight: 600; } .bold { font-weight: 700; } .italic { font-style: italic; } .condensed { font-stretch: condensed; } .monospace { font-family: "Roboto", sans-serif; } .invert, .inverted { background-color: rgb(255, 255, 255); background-color: var(--fontInvertedBackgroundColor, rgb(255, 255, 255)); color: rgb(0, 0, 0); color: var(--fontInvertedColor, rgb(0, 0, 0)); padding: 0 0.25rem; } .low-contrast { opacity: 0.2; } /* Size Options */ .xl { font-size: 1.125rem; font-size: var(--fontSizeXL, 1.125rem); } .lg { font-size: 1rem; font-size: var(--fontSize, 1rem); } .md { font-size: 0.875rem; font-size: var(--fontSizeMD, 0.875rem); } .sm { font-size: 0.75rem; font-size: var(--fontSizeSM, 0.75rem); } .xs { font-size: 0.65rem; font-size: var(--fontSizeXS, 0.65rem); } :root { --disabledControlOpacity: 0.4; --disabledControlCursor: not-allowed; --disabledOpacity: 0.4; --disabledCursor: not-allowed; --buttonBorderRadius: 3px; --defaultBorderRadius: 3px; --controlOptionSize: 1.25rem; --controlBorderRadius: 3px; --labelFontSize: 1rem; --smallLabelFontSize: 0.875rem; --largeLabelFontSize: 1.125rem; /* Typography */ --fontFamily: "Open Sans", sans-serif; --fontSize: 1rem; /* 16px */ --fontSizeXL: 1.125rem; --fontSizeLG: 1rem; --fontSizeMD: 0.875rem; --fontSizeSM: 0.75rem; --fontSizeXS: 0.65rem; --fontFamilyLight: "Open Sans Light", sans-serif; --fontFamilyMono: "Roboto Mono", monospace; } .any-theme { display: none; } /* ** ** ASTRO BUTTON ** ========================================================================== ** 3.0 Notes ** - Removed Master Off Button Style ** - Replaced various properties with css custom properties to support ** - Removed .satcom class definition ** - Removed narrow/short definitions ** 1.4 Notes ** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version ** - Disabled user selection of text on all buttons ** - Removed redundant background hover from 'disabled' state by using :not() on the :hover state ** - Removed redundant background hover from 'master off' by using :not() on the :hover state // deprecate after 1.4 ** - Fixed Firefox alignment issue where text was misaligned vertically ** - Renamed half-height to short and half-width to narrow (Note: rux_ only, satcom_ retains old syntax) ** - Removed user-select and placed it in astro.css to apply to all input types ** - Embedded master off icon and removed the additional states required to handle icons and gradient backgrounds */ .rux-button-group { display: -webkit-flex; display: flex; } .rux-button-group .rux-button:not(:last-child) { margin-right: 0.625rem; } /* Global Button Styles */ .rux-button { display: -webkit-flex; display: flex; position: relative; margin: 0; padding: 0 1rem; height: 2.125rem; min-width: 2.25rem; /* max-width: 10.125rem; */ border-radius: 3px; border-radius: var(--buttonBorderRadius, 3px); color: #fff; color: var(--buttonTextColor, #fff); font-family: "Open Sans"; font-family: var(--fontFamily, "Open Sans"); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Disabled States */ /* disabled state */ .rux-button:disabled { opacity: 0.4; opacity: var(--disabledOpacity, 0.4); cursor: not-allowed; cursor: var(--disabledCursor, not-allowed); } .rux-button:focus { outline: none; } .rux-button:not(.rux-button--outline) { border: 1px solid rgb(0, 90, 143); border: 1px solid var(--buttonBackgroundColor, rgb(0, 90, 143)); background-color: rgb(0, 90, 143); background-color: var(--buttonBorderColor, rgb(0, 90, 143)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2) ; box-shadow: var( --controlBoxShadow, 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2) ); } /* Outline Button Specific Styles */ .rux-button--outline { color: rgb(255, 255, 255); color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); background-color: transparent; background-color: var(--buttonOutlineBackgroundColor, transparent); border: 1px solid rgb(0, 90, 143); border: 1px solid var(--buttonOutlineBorderColor, rgb(0, 90, 143)); } /* Press/Active States */ .rux-button:active:not([hover]):not([disabled]) { border-color: rgb(0, 90, 143) !important; border-color: var(--buttonActiveBorderColor, rgb(0, 90, 143)) !important; background-color: rgb(0, 90, 143) !important; background-color: var( --buttonActiveBackgroundColor, rgb(0, 90, 143) ) !important; } .rux-button:active:not([hover]):not([disabled]):not(.rux-button--outline) { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14) !important; } /* Hover States */ .rux-button:hover:not([active]):not([disabled]):not(.rux-button--outline) { border-color: rgb(58, 129, 191); border-color: var(--buttonHoverBorderColor, rgb(58, 129, 191)); background-color: rgb(58, 129, 191); background-color: var(--buttonHoverBackgroundColor, rgb(58, 129, 191)); box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2) ; box-shadow: var( --buttonHoverBoxShadow, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2) ); } .rux-button--outline:hover:not([disabled]) { color: rgb(255, 255, 255); color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); background-color: rgba(30, 47, 66, 0.75) ; background-color: var( --buttonOutlineHoverBackgroundColor, rgba(30, 47, 66, 0.75) ); border-color: rgb(58, 129, 191); border-color: var(--buttonOutlineHoverBorderColor, rgb(58, 129, 191)); } /* Icons */ .rux-button--small { font-size: 0.875rem; font-size: var(--smallLabelTextSize, 0.875rem); height: 1.625rem; padding: 0 1rem; line-height: 1; } .rux-button--large { font-size: 1.125rem; font-size: var(--largeLabelTextSize, 1.125rem); height: 2.875rem; /* min-width: 2.875rem; */ padding: 0 1.5rem; } .rux-button__icon { height: 1.5rem; width: 1.5rem; margin-right: 0.625rem; margin-left: -0.625rem; } .rux-button--icon-only .rux-button__icon { margin-left: -0.625rem; margin-right: -0.625rem; } .rux-button--large.rux-button--icon-only .rux-button__icon { margin-left: -1rem; margin-right: -1rem; } .rux-button--small .rux-button__icon { height: 0.875rem; width: 0.875rem; } .rux-button--large .rux-button__icon { height: 1.75rem; width: 1.75rem; margin-left: -0.8rem; /* margin: -0.65rem 0.25rem -0.3rem calc((1.5rem - 0.625rem) * -1); */ } .rux-button__icon .rux-icon { height: auto; width: 100%; fill: rgb(255, 255, 255); fill: var(--buttonTextColor, rgb(255, 255, 255)); } .rux-button.rux-button--critical, .rux-button.rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--outline) { background-color: rgb(191, 36, 36) !important; background-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; border-color: rgb(191, 36, 36) !important; border-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; } .rux-button.rux-button--critical:hover:not([active]):not([disabled]) { background-color: rgb(255, 48, 48); background-color: var(--colorCritical, rgb(255, 48, 48)); border-color: rgb(255, 48, 48); border-color: var(--colorCritical, rgb(255, 48, 48)); } .rux-card { background-color: rgb(30, 47, 66); background-color: var(--cardBackgroundColor, rgb(30, 47, 66)); padding: 1px; overflow: hidden; } .rux-card__header { color: rgb(255, 255, 255); color: var(--cardHeaderTextColor, rgb(255, 255, 255)); background-color: rgb(20, 32, 44); background-color: var(--cardHeaderBackgroundColor, rgb(20, 32, 44)); margin: 0; padding: 0.325rem 0.625rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .rux-card__header h1 { padding: 0; margin: 0; font-size: 1.75rem; } .rux-card__content { padding: 0.625rem; } /* ** ** ASTRO CHECKBOX & RADIO BUTTONS ** ========================================================================== ** 3.0 Notes ** Added Custom CSS Properties to support light/dark theming ** Added fallback properties for IE11 ** 2.0 Notes ** - Removed hand cursor on checkbox ** - Updated styles to Astro 2.0 ** 1.4 Notes ** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version ** - Removed prefixed linear gradients ** - Added line-height to label to fix minor alignment issue ** - Moved user-select to parent element ** - Removed user-select and placed it in astro.css to apply to all input types */ .rux-checkbox, .satcom-checkbox, .rux-radio-button, .satcom-radio-button { display: -webkit-flex; display: flex; position: relative; margin: 0 0 1rem 0; line-height: 1.2; /* DEBUG */ /* padding: 1rem; */ /* outline: 1px solid red; background: linear-gradient( to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 49.5%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 51.5%, rgba(255, 0, 0, 0) 51%, rgba(255, 0, 0, 0) ); */ } .rux-checkbox input[type="checkbox"], .satcom-checkbox input[type="checkbox"], .rux-radio-button input[type="radio"], .satcom-radio-button input[type="radio"] { -webkit-appearance: none; display: none; } .rux-checkbox input[type="checkbox"] + label, .satcom-checkbox input[type="checkbox"] + label, .rux-radio-button input[type="radio"] + label, .satcom-radio-button input[type="radio"] + label { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; color: #fff; color: var(--controlLabelColor, #fff); } .rux-checkbox input[type="checkbox"] + label::before, .satcom-checkbox input[type="checkbox"] + label::before, .rux-radio-button input[type="radio"] + label::before, .satcom-radio-button input[type="radio"] + label::before { display: -webkit-flex; display: flex; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-flex-grow: 0; flex-grow: 0; content: ""; height: 1.25rem; height: var(--controlOptionSize, 1.25rem); width: 1.25rem; width: var(--controlOptionSize, 1.25rem); margin: 0 0.625rem 0 0; border: 1px solid rgb(122, 193, 255); border: 1px solid var(--controlBorderColor, rgb(122, 193, 255)); } .rux-checkbox input[type="checkbox"] + label::before, .satcom-checkbox input[type="checkbox"] + label::before { border-radius: 2px; } .rux-radio-button input[type="radio"] + label::before, .satcom-radio-button input[type="radio"] + label::before { border-radius: 100%; background-color: none; } .rux-checkbox input[type="checkbox"]:checked + label::before, .satcom-checkbox input[type="checkbox"]:checked + label::before, .rux-radio-button input[type="radio"]:checked + label::before, .satcom-radio-button input[type="radio"]:checked + label::before { background-color: rgb(58, 129, 191) ; background-color: var( --controlSelectedOutlineBackgroundColor, rgb(58, 129, 191) ); border-color: #fff; border-color: var(--controlSelectedOutlineBorderColor, #fff); } .rux-checkbox input[type="checkbox"]:checked + label::after, .satcom-checkbox input[type="checkbox"]:checked + label::after, .rux-radio-button input[type="radio"]:checked + label::after, .satcom-radio-button input[type="radio"]:checked + label::after { position: absolute; display: block; content: ""; } .rux-checkbox input[type="checkbox"]:checked + label::after, .satcom-checkbox input[type="checkbox"]:checked + label::after { height: 6px; width: 12px; top: 5px; left: 4px; border-right: 2px solid #fff; border-right: 2px solid var(--controlTextColor, #fff); border-top: 2px solid #fff; border-top: 2px solid var(--controlTextColor, #fff); -webkit-transform: rotate(125deg); transform: rotate(125deg); } .rux-radio-button input[type="radio"]:checked + label::after, .satcom-radio-button input[type="radio"]:checked + label::after { top: 5px; left: 5px; height: 10px; width: 10px; border-radius: 100%; /* box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9); */ background-color: #fff; background-color: var(--controlTextColor, #fff); } .rux-checkbox input[type="checkbox"]:disabled + label, .satcom-checkbox input[type="checkbox"]:disabled + label, .rux-radio-button input[type="radio"]:disabled + label, .satcom-radio-button input[type="radio"]:disabled + label { cursor: not-allowed; cursor: var(--disabledCursor, not-allowed); opacity: 0.4; opacity: var(--disabledOpacity, 0.4); } /* ** ** ASTRO DROP DOWN ** ========================================================================== ** 2.0.1 Notes */ .rux-select { -webkit-appearance: none; -moz-appearance: none; border: 1px solid rgb(0, 90, 143); border: 1px solid var(--selectBorderColor, rgb(0, 90, 143)); border-radius: 3px; border-radius: var(--buttonBorderRadius, 3px); color: rgb(255, 255, 255); color: var(--selectTextColor, rgb(255, 255, 255)); font-size: 0.875rem; line-height: 1; height: 2rem; padding: 0 1.2rem 0 0.625rem; background-color: rgb(0, 90, 143); background-color: var(--selectBackgroundColor, rgb(0, 90, 143)); background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20(51167)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate(5.000000%2C%202.500000)%20scale(1%2C%20-1)%20translate(-5.000000%2C%20-2.500000)%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") ; background-image: var( --selectCaret, url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20(51167)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate(5.000000%2C%202.500000)%20scale(1%2C%20-1)%20translate(-5.000000%2C%20-2.500000)%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") ); background-position: center right 0.625rem; background-repeat: no-repeat; } .rux-select .rux-select optgroup, .rux-select option { color: #000; background-color: #fff; } .rux-select:disabled { opacity: 0.4; cursor: not-allowed; } .rux-select::-ms-expand { display: none; } .rux-select:focus::-ms-value { background: transparent; } .rux-form-element { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; } .rux-form-element label { color: #fff; } /* ** ** ASTRO INPUT TEXT FIELDS ** ========================================================================== ** 1.4 Notes ** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version ** - Removed prefixed linear gradients ** - Updated text entry field to WCAG */ /* ** ** INPUT TEXT ** ========================================================================== */ /* REQUIRED CLASSES */ :root { --padding: 0.5rem; --paddingLeft: 0.5rem; --paddingRight: 0.5rem; --paddingTop: 0.25rem; --paddingBottom: 0.25rem; } .rux-form-field { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; font-family: "Open Sans", sans-serif; font-family: var(--fontFamilty, "Open Sans", sans-serif); font-size: 1rem; font-size: var(--fontSize, 1rem); color: rgb(255, 255, 255); color: var(--fontColor, rgb(255, 255, 255)); } .rux-form-field input:required + label::before { content: "*"; margin-right: 0.25rem; } .rux-form-field__label { display: -webkit-flex; display: flex; -webkit-order: 1; order: 1; margin: 0 0 0.15rem 0; width: 100%; -webkit-align-content: center; align-content: center; -webkit-align-items: center; align-items: center; color: rgb(255, 255, 255); color: var(--fontColor, rgb(255, 255, 255)); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rux-form-field input { box-sizing: border-box; -webkit-order: 2; order: 2; height: 2.25rem; width: 100%; padding: 0.5rem; border: 1px solid transparent; border: 1px solid var(--inputBorderColor, transparent); border-radius: 3px; font-size: 1rem; font-size: var(--fontSize, 1rem); color: rgb(0, 0, 0); color: var(--inputTextColor, rgb(0, 0, 0)); } .rux-form-field input[type="number"]::-webkit-inner-spin-button, .rux-form-field input[type="number"]::-webkit-outer-spin-button, .rux-form-field input[type="date"]::-webkit-inner-spin-button, .rux-form-field input[type="date"]::-webkit-outer-spin-button, .rux-form-field input[type="date"]::-webkit-calendar-picker-indicator { -webkit-appearance: none; display: none; } /* VALIDATION */ .rux-form-field input:invalid { border: 1px solid var(--inputInvalidBorderColor); border: 1px solid var(--inputInvalidBorderColor); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1.125rem; background-position: center right 0.5rem; } /* FOCUS RULES */ .rux-form-field input:focus, .rux-form-field input:invalid:focus { /* outline: none; */ } .rux-form-field input:not([type="search"]):focus, .rux-form-field input:not([type="search"]):invalid:focus { border: 1px solid var(--inputFocusBorderColor); border: 1px solid var(--inputFocusBorderColor); /* border-left: 4px solid var(--inputFocusBorderColor); */ /* padding-left: calc(0.5rem - 3px); */ } .rux-form-field input::-moz-selection { background-color: var(--colorSecondaryLighten3); background-color: var(--colorSecondaryLighten3); } .rux-form-field input::selection { background-color: var(--colorSecondaryLighten3); background-color: var(--colorSecondaryLighten3); } /* .rux-form-field input:invalid + label::before { content: ""; display: block; height: 1rem; width: 1.25rem; margin-right: 0.25rem; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: center center; } */ .rux-form-field__validation-message { display: none; position: absolute; max-width: 16rem; background-color: var(--colorCritical); background-color: var(--colorCritical); width: 100%; padding: 0.25rem; right: 0; font-size: var(--fontSizeMD); font-size: var(--fontSizeMD); } .rux-form-field input:invalid .rux-form-field__validation-message { display: block; } /* .rux-form-field input:not([type="search"]):not([type="checkbox"]):not([type="radio"]):optional + label::after { display: block; content: "(optional)"; font-size: 0.875rem; margin: 0.1rem auto 0 0.25rem; opacity: 0.4; } */ .rux-form-field input:disabled { opacity: 0.4; opacity: var(--disabledOpacity, 0.4); cursor: not-allowed; cursor: var(--disabledCursor, not-allowed); } .rux-form-field--large, .rux-form-field--large label, .rux-form-field--large input, .rux-form-field--large textarea { font-size: 1.125rem; font-size: var(--fontSizeXL, 1.125rem); } .rux-form-field--small, .rux-form-field--small label, .rux-form-field--small input, .rux-form-field--small textarea { font-size: 0.875rem; font-size: var(--fontSizeMD, 0.875rem); } .rux-form-field--large input, .rux-form-field--large textarea { padding: 0.5rem; } .rux-form-field--large input { height: 2.5rem; } .rux-form-field--small input, .rux-form-field--small textarea { padding: 0.3rem; } .rux-form-field--small input { height: 1.625rem; } .rux-form-field--large input:invalid { background-size: 1.375rem; background-position: center right 0.5rem; padding: 0.5rem 1.875rem 0.5rem 0.5rem; } .rux-form-field input:focus .rux-form-field input:invalid:focus { box-shadow: inset 0 0 3px var(--colorGray); box-shadow: inset 0 0 3px var(--colorGray); border-color: var(--inputFocusBorderColor); border-color: var(--inputFocusBorderColor); outline: none; color: black; } .rux-form-field input[type="search"]::-webkit-search-decoration { -webkit-appearance: textfield; } /* SEARCH VARIANT */ .rux-form-field input[type="search"] { -webkit-appearance: none; -moz-appearance: none; padding: 0.5rem 0.5rem 0.5rem 1.75rem; background: no-repeat center left 0.3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") rgb(255, 255, 255); background: no-repeat center left 0.3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") var(inputBackgroundColor, rgb(255, 255, 255)); } .rux-form-field--large input[type="search"] { padding: 0.5rem 0 0.5rem 2rem; } .rux-form-field--small input[type="search"] { padding: 0.3rem 0 0.3rem 1.5rem; } .rux-form-field input[type="search"]::-webkit-search-cancel-button { position: relative; -webkit-appearance: none; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22rgb(0%2C%2090%2C%20143)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M69.028%2064l22.628%2022.627-5.029%205.029L64%2069.028%2041.373%2091.656l-5.029-5.029L58.972%2064%2036.344%2041.373l5.029-5.029L64%2058.972l22.627-22.628%205.029%205.029L69.028%2064z%22%2F%3E%0A%3C%2Fsvg%3E"); } .rux-form-field input[type="search"]::-ms-clear { position: relative; right: 0.25rem; width: 20px; height: 20px; background-color: red; } /* ** ** ASTRO RADIO BUTTON ** ========================================================================== ** 3.0 Notes ** Moved all directives to ** 2.0 Notes ** - Removed hand cursor on checkbox ** - Updated styles to Astro 2.0 ** 1.4 Notes ** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version ** - Removed prefixed linear gradients ** - Removed user-select and placed it in astro.css to apply to all input types ** - Added line-height to label to fix minor alignment issue ** - Adjusted background position of checked state to sit more centrally */ /* ** ** TABLE ** ========================================================================== */ /* REQUIRED CLASSES */ .rux-table, .satcom-table { border-collapse: separate; border-spacing: 5px; color: #fff; } .rux-table th, .satcom-table th { font-stretch: condensed; font-weight: 300; text-align: left; color: rgba(255, 255, 255, 0.6); } .rux-table tr, .satcom-table tr { } .rux-table td, .rux-table th, .satcom-table td, .satcom-table th { padding: 0.5em 1em 1em 0.75em; border-top: 1px solid rgba(216, 216, 216, 0.1); background-color: rgba(216, 216, 216, 0.1); } .rux-table__column-head th, .satcom-table-column-head th { padding-bottom: 0.5em; } .rux-table tfoot, .satcom-table tfoot { font-size: 0.7rem; } .rux-table .selected, .satcom-table .selected { background: #36557a; }