/* * Domain-Robot UI * * The complete stylesheet of the application: design tokens, base styles, * grid, utilities, components and the application shell. Component class * names follow the conventions the templates already use (row, col-md-6, btn, * form-control, ...). * * Branding colors are injected per request (partials/brand-colors.blade.php), * the color scheme is selected via ; * pages without data-theme follow the operating system. */ /* ========================================================================== Tokens ========================================================================== */ :root { --brand: #188ae2; --brand-contrast: #ffffff; --brand-text: #188ae2; --brand-dark: #188ae2; --brand-dark-contrast: #ffffff; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --header-height: 60px; --nav-height: 52px; --content-width: 1140px; --gutter: 12px; --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: light; --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef1f5; --border: #e4e7ec; --border-strong: #d0d5dd; --text: #1d2939; --text-muted: #667085; --text-subtle: #98a2b3; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-lg: 0 16px 40px -8px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06); --overlay: rgba(16, 24, 40, .45); --scrim: rgba(243, 245, 248, .6); --brand-hover: color-mix(in srgb, var(--brand) 86%, #000); --link: var(--brand-text); --link-hover: color-mix(in srgb, var(--brand-text) 78%, #000); --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); --brand-ring: color-mix(in srgb, var(--brand) 28%, transparent); --row-hover: color-mix(in srgb, var(--brand) 4%, var(--surface)); --success: #16a34a; --success-strong: #15803d; --success-text: #067647; --success-soft: #ecfdf3; --success-border: #abefc6; --warning: #f59e0b; --warning-strong: #d97706; --warning-text: #b54708; --warning-soft: #fffaeb; --warning-border: #fedf89; --danger: #dc2626; --danger-strong: #b91c1c; --danger-text: #b42318; --danger-soft: #fef3f2; --danger-border: #fecdca; --info: #0284c7; --info-strong: #0369a1; --info-text: #026aa2; --info-soft: #f0f9ff; --info-border: #b9e6fe; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1c212a; --surface-3: #252b35; --border: #2a313c; --border-strong: #3a4250; --text: #e6e9ee; --text-muted: #9aa4b2; --text-subtle: #6b7585; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 4px 8px -4px rgba(0, 0, 0, .4); --overlay: rgba(0, 0, 0, .6); --scrim: rgba(14, 17, 22, .6); --brand: var(--brand-dark); --brand-contrast: var(--brand-dark-contrast); --link: color-mix(in srgb, var(--brand) 62%, #fff); --link-hover: color-mix(in srgb, var(--brand) 42%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent); --brand-ring: color-mix(in srgb, var(--brand) 40%, transparent); --row-hover: color-mix(in srgb, var(--brand) 7%, var(--surface)); --success-text: #75e0a7; --success-soft: rgba(23, 178, 106, .12); --success-border: rgba(23, 178, 106, .35); --warning-text: #fdb022; --warning-soft: rgba(247, 144, 9, .12); --warning-border: rgba(247, 144, 9, .35); --danger-text: #fda29b; --danger-soft: rgba(240, 68, 56, .12); --danger-border: rgba(240, 68, 56, .35); --info-text: #7cd4fd; --info-soft: rgba(46, 144, 250, .12); --info-border: rgba(46, 144, 250, .35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1c212a; --surface-3: #252b35; --border: #2a313c; --border-strong: #3a4250; --text: #e6e9ee; --text-muted: #9aa4b2; --text-subtle: #6b7585; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 4px 8px -4px rgba(0, 0, 0, .4); --overlay: rgba(0, 0, 0, .6); --scrim: rgba(14, 17, 22, .6); --brand: var(--brand-dark); --brand-contrast: var(--brand-dark-contrast); --link: color-mix(in srgb, var(--brand) 62%, #fff); --link-hover: color-mix(in srgb, var(--brand) 42%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent); --brand-ring: color-mix(in srgb, var(--brand) 40%, transparent); --row-hover: color-mix(in srgb, var(--brand) 7%, var(--surface)); --success-text: #75e0a7; --success-soft: rgba(23, 178, 106, .12); --success-border: rgba(23, 178, 106, .35); --warning-text: #fdb022; --warning-soft: rgba(247, 144, 9, .12); --warning-border: rgba(247, 144, 9, .35); --danger-text: #fda29b; --danger-soft: rgba(240, 68, 56, .12); --danger-border: rgba(240, 68, 56, .35); --info-text: #7cd4fd; --info-soft: rgba(46, 144, 250, .12); --info-border: rgba(46, 144, 250, .35); } } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); overflow-y: scroll; } [hidden] { display: none !important; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--text); } h1, .h1, h2, .h2, h3, .h3 { margin: 20px 0 10px; } h4, .h4, h5, .h5, h6, .h6 { margin: 8px 0 6px; } h1, .h1 { font-size: 32px; } h2, .h2 { font-size: 26px; } h3, .h3 { font-size: 22px; } h4, .h4 { font-size: 17px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 12px; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-size: 75%; font-weight: 400; color: var(--text-muted); } p { margin: 0 0 10px; } small, .small { font-size: 85%; color: var(--text-muted); } b, strong { font-weight: 600; } a { color: var(--link); text-decoration: none; background-color: transparent; transition: color .15s ease; } a:hover, a:focus { color: var(--link-hover); text-decoration: none; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } a:not([href]):not([tabindex]) { cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } dl { margin: 0 0 20px; } dt { font-weight: 600; } dd { margin-left: 0; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } svg:not(:root) { overflow: hidden; } hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--border); } table { border-collapse: collapse; border-spacing: 0; background-color: transparent; } td, th { padding: 0; } th { text-align: left; } caption { padding: 8px 0; color: var(--text-muted); text-align: left; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } button { overflow: visible; text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { margin: 4px 0 0; line-height: normal; accent-color: var(--brand); vertical-align: -1px; } input[type="search"] { -webkit-appearance: none; } textarea { overflow: auto; } fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } legend { display: block; width: 100%; margin-bottom: 20px; padding: 0; font-size: 20px; line-height: inherit; color: var(--text); border: 0; border-bottom: 1px solid var(--border); } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: var(--text); } code, kbd, pre, samp { font-family: var(--font-mono); } code { padding: 1px 6px; font-size: .875em; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); } kbd { padding: 2px 5px; font-size: 85%; color: var(--surface); background-color: var(--text); border-radius: 4px; } pre { display: block; margin: 0 0 10px; padding: 10px 12px; overflow: auto; font-size: 12.5px; line-height: 1.5; color: var(--text); word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } pre code { padding: 0; font-size: inherit; white-space: pre-wrap; background: transparent; border: 0; } blockquote { margin: 0 0 20px; padding: 10px 20px; border-left: 4px solid var(--border); } ::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); } font[color="green"] { color: var(--success-text); } font[color="orange"] { color: var(--warning-text); } font[color="red"] { color: var(--danger-text); } /* ========================================================================== Grid ========================================================================== */ .container, .container-fluid { display: flow-root; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } .row, .form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: flex-start; margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1); } /* children of a row that are not columns span the full width, like before */ .row > :not([class*="col-"]), .form-horizontal .form-group > :not([class*="col-"]) { flex: 0 0 100%; min-width: 0; } .row > .pull-right:not([class*="col-"]), .row > .pull-left:not([class*="col-"]) { flex: 0 0 auto; } .row > .pull-right:not([class*="col-"]) { margin-left: auto; } .row.no-gutters { margin-right: 0; margin-left: 0; } .row.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } [class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], .col-12 { position: relative; float: left; width: 100%; min-height: 1px; padding-right: var(--gutter); padding-left: var(--gutter); } .row > [class*="col-"] { float: none; flex: 0 0 auto; } .col-xs-1 { width: 8.3333%; } .col-xs-2 { width: 16.6667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.3333%; } .col-xs-5 { width: 41.6667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.3333%; } .col-xs-8 { width: 66.6667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.3333%; } .col-xs-11 { width: 91.6667%; } .col-xs-12, .col-12 { width: 100%; } @media (min-width: 768px) { .col-sm-1 { width: 8.3333%; } .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.3333%; } .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.3333%; } .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; } .col-sm-offset-1 { margin-left: 8.3333%; } .col-sm-offset-2 { margin-left: 16.6667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.3333%; } .col-sm-offset-6 { margin-left: 50%; } } @media (min-width: 992px) { .col-md-1 { width: 8.3333%; } .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.3333%; } .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; } .col-md-offset-1 { margin-left: 8.3333%; } .col-md-offset-2 { margin-left: 16.6667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.3333%; } .col-md-offset-6 { margin-left: 50%; } } @media (min-width: 1200px) { .col-lg-1 { width: 8.3333%; } .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; } .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; } .col-lg-offset-1 { margin-left: 8.3333%; } .col-lg-offset-2 { margin-left: 16.6667%; } .col-lg-offset-3 { margin-left: 25%; } } /* ========================================================================== Utilities ========================================================================== */ .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .pull-right { float: right !important; } .pull-left { float: left !important; } .center-block { display: block; margin-right: auto; margin-left: auto; } .hide, .hidden { display: none !important; } .show { display: block !important; } .invisible { visibility: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-nowrap { white-space: nowrap; } .text-uppercase { text-transform: uppercase; } .text-small { font-size: 13px; } .text-muted { color: var(--text-muted); } .text-color, .title-color { color: var(--text) !important; } .text-primary, .theme-color, .text-primary span { color: var(--link) !important; } .text-success { color: var(--success-text) !important; } .text-warning { color: var(--warning-text) !important; } .text-danger { color: var(--danger-text) !important; } .text-info { color: var(--info-text) !important; } .text-white { color: #fff !important; } .watermark { color: var(--surface-3); } .bg-primary, .primary { color: var(--brand-contrast); background-color: var(--brand) !important; } .bg-primary a { color: var(--brand-contrast) !important; } .bg-success { background-color: var(--success-soft); } .bg-warning { background-color: var(--warning-soft); } .bg-danger { background-color: var(--danger-soft); } .bg-info { background-color: var(--info-soft); } .img-responsive, .img-fluid { display: block; max-width: 100%; height: auto; } .img-rounded { border-radius: var(--radius); } .img-circle { border-radius: 50%; } .align-baseline { vertical-align: baseline !important; } .align-middle { vertical-align: middle !important; } .d-none { display: none !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 48px !important; } .mt-1 { margin-top: 4px !important; } .pt-2 { padding-top: 8px !important; } .pt-3 { padding-top: 16px !important; } .pb-2 { padding-bottom: 8px !important; } /* spacing scale of the former theme: xs 6px, sm 12px, md 16px, lg 24px, xl 32px */ .m-0 { margin: 0 !important; } .m-xs { margin: 6px !important; } .m-sm { margin: 12px !important; } .m-md { margin: 16px !important; } .m-lg { margin: 24px !important; } .m-xl { margin: 32px !important; } .m-t-0 { margin-top: 0 !important; } .m-t-xs { margin-top: 6px !important; } .m-t-sm { margin-top: 12px !important; } .m-t-md { margin-top: 16px !important; } .m-t-lg { margin-top: 24px !important; } .m-t-xl { margin-top: 32px !important; } .m-r-0 { margin-right: 0 !important; } .m-r-xs { margin-right: 6px !important; } .m-r-sm { margin-right: 12px !important; } .m-r-md { margin-right: 16px !important; } .m-r-lg { margin-right: 24px !important; } .m-r-xl { margin-right: 32px !important; } .m-b-0 { margin-bottom: 0 !important; } .m-b-xs { margin-bottom: 6px !important; } .m-b-sm { margin-bottom: 12px !important; } .m-b-md { margin-bottom: 16px !important; } .m-b-lg { margin-bottom: 24px !important; } .m-b-xl { margin-bottom: 32px !important; } .m-l-0 { margin-left: 0 !important; } .m-l-xs { margin-left: 6px !important; } .m-l-sm { margin-left: 12px !important; } .m-l-md { margin-left: 16px !important; } .m-l-lg { margin-left: 24px !important; } .m-l-xl { margin-left: 32px !important; } .m-h-xs { margin-top: 6px !important; margin-bottom: 6px !important; } .m-h-sm { margin-top: 12px !important; margin-bottom: 12px !important; } .m-h-md { margin-top: 16px !important; margin-bottom: 16px !important; } .m-h-lg { margin-top: 24px !important; margin-bottom: 24px !important; } .m-v-xs { margin-left: 6px !important; margin-right: 6px !important; } .m-v-sm { margin-left: 12px !important; margin-right: 12px !important; } .m-v-md { margin-left: 16px !important; margin-right: 16px !important; } .m-v-lg { margin-left: 24px !important; margin-right: 24px !important; } .p-0 { padding: 0 !important; } .p-xs { padding: 6px !important; } .p-sm { padding: 12px !important; } .p-md { padding: 16px !important; } .p-lg { padding: 24px !important; } .p-xl { padding: 32px !important; } .p-t-0 { padding-top: 0 !important; } .p-t-xs { padding-top: 6px !important; } .p-t-sm { padding-top: 12px !important; } .p-t-md { padding-top: 16px !important; } .p-t-lg { padding-top: 24px !important; } .p-t-xl { padding-top: 32px !important; } .p-r-0 { padding-right: 0 !important; } .p-r-xs { padding-right: 6px !important; } .p-r-sm { padding-right: 12px !important; } .p-r-md { padding-right: 16px !important; } .p-r-lg { padding-right: 24px !important; } .p-r-xl { padding-right: 32px !important; } .p-b-0 { padding-bottom: 0 !important; } .p-b-xs { padding-bottom: 6px !important; } .p-b-sm { padding-bottom: 12px !important; } .p-b-md { padding-bottom: 16px !important; } .p-b-lg { padding-bottom: 24px !important; } .p-b-xl { padding-bottom: 32px !important; } .p-l-0 { padding-left: 0 !important; } .p-l-xs { padding-left: 6px !important; } .p-l-sm { padding-left: 12px !important; } .p-l-md { padding-left: 16px !important; } .p-l-lg { padding-left: 24px !important; } .p-l-xl { padding-left: 32px !important; } .p-h-xs { padding-top: 6px !important; padding-bottom: 6px !important; } .p-h-sm { padding-top: 12px !important; padding-bottom: 12px !important; } .p-h-md { padding-top: 16px !important; padding-bottom: 16px !important; } .p-h-lg { padding-top: 24px !important; padding-bottom: 24px !important; } .p-v-xs { padding-left: 6px !important; padding-right: 6px !important; } .p-v-sm { padding-left: 12px !important; padding-right: 12px !important; } .p-v-md { padding-left: 16px !important; padding-right: 16px !important; } .p-v-lg { padding-left: 24px !important; padding-right: 24px !important; } /* responsive visibility */ .visible-xs, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs, .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } @media print { .hidden-print { display: none !important; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-block; margin-bottom: 0; padding: 8px 14px; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: var(--radius); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn:focus { outline: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; opacity: .6; box-shadow: none; } a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } .btn-lg { padding: 10px 18px; font-size: 16px; line-height: 24px; border-radius: var(--radius-lg); } .btn-sm { padding: 5px 10px; font-size: 13px; line-height: 18px; border-radius: var(--radius-sm); } .btn-xs { padding: 2px 8px; font-size: 12px; line-height: 18px; border-radius: var(--radius-sm); } .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 5px; } .btn .fa + span, .btn .zmdi + span { margin-left: 4px; } .btn-default { color: var(--text); background-color: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: var(--text); background-color: var(--surface-2); } .btn-primary { color: var(--brand-contrast); background-color: var(--brand); border-color: var(--brand); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: var(--brand-contrast); background-color: var(--brand-hover); border-color: var(--brand-hover); } .btn-success { color: #fff; background-color: var(--success); border-color: var(--success); } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { color: #fff; background-color: var(--success-strong); border-color: var(--success-strong); } .btn-danger { color: #fff; background-color: var(--danger); border-color: var(--danger); } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { color: #fff; background-color: var(--danger-strong); border-color: var(--danger-strong); } .btn-warning { color: #1c1917; background-color: var(--warning); border-color: var(--warning); } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { color: #1c1917; background-color: var(--warning-strong); border-color: var(--warning-strong); } .btn-info { color: #fff; background-color: var(--info); border-color: var(--info); } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { color: #fff; background-color: var(--info-strong); border-color: var(--info-strong); } .btn-link { color: var(--link); background: transparent; border-color: transparent; box-shadow: none; } .btn-link:hover, .btn-link:focus { color: var(--link-hover); text-decoration: underline; } .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .btn-group > .btn { position: relative; flex: 0 1 auto; } .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn.active { z-index: 2; } .btn-group > .btn + .btn, .btn-group > .btn + .btn-group, .btn-group > .btn-group + .btn, .btn-group > .btn-group + .btn-group { margin-left: -1px; } /* only the corners where another button is attached are squared; a form or menu next to a button (e.g. a delete form in the group) keeps it rounded */ .btn-group > .btn:has(+ .btn, + .btn-group) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn + .btn, .btn-group > .btn-group + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* buttons floated right next to each other (e.g. the actions of a page heading) touch like a group; the next one in the markup sits to the left */ .btn.pull-right + .btn.pull-right { margin-right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn.pull-right:has(+ .btn.pull-right) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical { flex-direction: column; } .btn-toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; opacity: .7; } .close { float: right; padding: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--text-muted); cursor: pointer; background: transparent; border: 0; opacity: .8; } .close:hover, .close:focus { color: var(--text); opacity: 1; } /* ========================================================================== Forms ========================================================================== */ .form-group { margin-bottom: 24px; } .form-control { display: block; width: 100%; height: 38px; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--text); background-color: var(--surface); background-image: none; border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: var(--text-subtle); opacity: 1; } .form-control:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px var(--brand-ring); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { color: var(--text-muted); background-color: var(--surface-2); opacity: 1; } .form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; } textarea.form-control { height: auto; min-height: 100px; } select[multiple].form-control, select[size].form-control { height: auto; } select.form-control { padding-right: 8px; } input[type="file"].form-control { height: auto; padding: 6px 8px; } .form-control-static { min-height: 38px; margin-bottom: 0; padding: 9px 0; } .input-sm, .form-group-sm .form-control { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 18px; border-radius: var(--radius-sm); } .input-lg, .form-control-lg, .form-group-lg .form-control { height: 46px; padding: 10px 16px; font-size: 16px; line-height: 24px; border-radius: var(--radius-lg); } .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: var(--text-muted); } .radio, .checkbox { position: relative; display: block; margin-top: 0; margin-bottom: 12px; } .radio label, .checkbox label { min-height: 20px; margin-bottom: 0; padding-left: 22px; font-weight: 400; cursor: pointer; } .radio input[type="radio"], .checkbox input[type="checkbox"], .radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"] { position: absolute; margin-top: 3px; margin-left: -22px; } .radio-inline, .checkbox-inline { position: relative; display: inline-block; margin-bottom: 0; padding-left: 22px; font-weight: 400; vertical-align: middle; cursor: pointer; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-left: 12px; } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox { color: var(--danger-text); } .has-error .form-control { border-color: var(--danger); } .has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); } .has-warning .help-block, .has-warning .control-label { color: var(--warning-text); } .has-warning .form-control { border-color: var(--warning); } .has-success .help-block, .has-success .control-label { color: var(--success-text); } .has-success .form-control { border-color: var(--success); } .input-group { position: relative; display: flex; align-items: stretch; width: 100%; } .input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > .form-control:focus { z-index: 3; } .input-group-addon, .input-group-btn { display: flex; align-items: center; white-space: nowrap; } .input-group-addon { padding: 0 12px; font-size: 14px; color: var(--text-muted); background-color: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); } .input-group-btn > .btn { position: relative; height: 100%; } .input-group > :not(:first-child):not(:last-child), .input-group > :not(:first-child):not(:last-child) > .btn { border-radius: 0; } .input-group > :first-child:not(:last-child), .input-group > .input-group-btn:first-child:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > :last-child:not(:first-child), .input-group > .input-group-btn:last-child:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > * + .input-group-addon, .input-group > .input-group-addon + *, .input-group > * + .input-group-btn > .btn, .input-group > .input-group-btn + .form-control { margin-left: -1px; } @media (min-width: 768px) { .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .form-inline .form-control { display: inline-block; width: auto; min-width: 250px; vertical-align: middle; } .form-inline .control-label { margin-bottom: 0; vertical-align: middle; } .form-horizontal .control-label { margin-bottom: 0; padding-top: 9px; text-align: right; } } .form-horizontal .form-group { margin-bottom: 24px; } /* ========================================================================== Tables ========================================================================== */ .table { width: 100%; max-width: 100%; margin-bottom: 20px; color: var(--text); } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 10px 12px; line-height: 1.45; vertical-align: middle; border-top: 1px solid var(--border); } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th { font-size: 13px; font-weight: 600; color: var(--text-muted); background-color: var(--surface-2); } .table > thead > tr > th { vertical-align: bottom; border-bottom: 1px solid var(--border); } .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td { border-top: 0; } .table th a { color: var(--text-muted); } .table th a:hover { color: var(--link); } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px 8px; } .table-bordered { border-bottom: 1px solid var(--border); } .table-striped > tbody > tr:nth-of-type(odd) { background-color: color-mix(in srgb, var(--surface-2) 70%, transparent); } .table > tbody > tr:hover > td, .table-hover > tbody > tr:hover { background-color: var(--row-hover); } .table .table { background-color: var(--surface); } .table > * > tr.active > td, .table > * > tr.active > th, .table > * > tr > td.active, .table > * > tr > th.active { background-color: var(--surface-3); } .table > * > tr.success > td, .table > * > tr.success > th, .table > * > tr > td.success, .table > * > tr > th.success, .table-success { background-color: var(--success-soft); } .table > * > tr.info > td, .table > * > tr.info > th, .table > * > tr > td.info, .table > * > tr > th.info { background-color: var(--info-soft); } .table > * > tr.warning > td, .table > * > tr.warning > th, .table > * > tr > td.warning, .table > * > tr > th.warning { background-color: var(--warning-soft); } .table > * > tr.danger > td, .table > * > tr.danger > th, .table > * > tr > td.danger, .table > * > tr > th.danger, .table-error { background-color: var(--danger-soft); } .table-responsive { min-height: .01%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== Alerts, badges, labels, progress ========================================================================== */ .alert { position: relative; margin-bottom: 20px; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--radius); } .alert::after { content: ""; display: table; clear: both; } .alert h4 { margin-top: 0; color: inherit; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .alert-dismissible { padding-right: 40px; } .alert-dismissible .close { position: absolute; top: 10px; right: 14px; color: inherit; } .alert-success { color: var(--success-text); background-color: var(--success-soft); border-color: var(--success-border); } .alert-info { color: var(--info-text); background-color: var(--info-soft); border-color: var(--info-border); } .alert-warning { color: var(--warning-text); background-color: var(--warning-soft); border-color: var(--warning-border); } .alert-danger { color: var(--danger-text); background-color: var(--danger-soft); border-color: var(--danger-border); } .alert a:not(.btn), .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .alert hr { border-top-color: currentColor; opacity: .2; } .badge { display: inline-block; min-width: 10px; padding: 3px 8px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--text); text-align: center; white-space: nowrap; vertical-align: middle; background-color: var(--surface-3); border-radius: 999px; } .badge:empty { display: none; } .list-badge { font-size: 13px; } .label { display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; border-radius: 999px; color: var(--text); background-color: var(--surface-3); } .label-primary { color: var(--brand-contrast); background-color: var(--brand); } .label-success { color: var(--success-text); background-color: var(--success-soft); } .label-warning { color: var(--warning-text); background-color: var(--warning-soft); } .label-danger { color: var(--danger-text); background-color: var(--danger-soft); } .label-info { color: var(--info-text); background-color: var(--info-soft); } /* Shared step navigation */ .stepper { margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .stepper-track { display: flex; min-width: 800px; padding: 2px 0 8px; } .stepper-item { position: relative; display: flex; flex: 1 0 0; flex-direction: column; align-items: center; min-width: 0; color: var(--text-muted); text-align: center; text-decoration: none; } .stepper-item::before { position: absolute; top: 19px; left: calc(-50% + 18px); width: calc(100% - 36px); height: 2px; content: ""; background-color: var(--border-strong); } .stepper-item:first-child::before { display: none; } .stepper-number { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; font-size: 13px; font-weight: 700; color: var(--text-muted); background-color: var(--surface); border: 2px solid var(--border-strong); border-radius: 50%; } .stepper-label { margin-top: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; } .stepper-item.is-done::before { background-color: var(--success); } .stepper-item.is-done .stepper-number { color: #fff; background-color: var(--success); border-color: var(--success); } .stepper-item.is-done .stepper-label { color: var(--success-text); } .stepper-item.is-active::before { background-color: var(--brand); } .stepper-item.is-active .stepper-number { color: var(--brand-contrast); background-color: var(--brand); border-color: var(--brand); } .stepper-item.is-active .stepper-label { color: var(--link); font-weight: 700; } a.stepper-item:hover .stepper-label, a.stepper-item:focus-visible .stepper-label { text-decoration: underline; } a.stepper-item:focus-visible { outline: none; } a.stepper-item:focus-visible .stepper-number { box-shadow: 0 0 0 3px var(--brand-ring); } .progress { height: 10px; margin-bottom: 20px; overflow: hidden; background-color: var(--surface-3); border-radius: 999px; } .progress-bar { float: left; width: 0; height: 100%; font-size: 10px; line-height: 10px; color: var(--brand-contrast); text-align: center; background-color: var(--brand); transition: width .6s ease; } .progress-bar-success { background-color: var(--success); } .progress-bar-warning { background-color: var(--warning); } .progress-bar-danger { background-color: var(--danger); } /* ========================================================================== Cards: widgets, panels, wells, list groups ========================================================================== */ .widget, .box, .card { display: flow-root; margin-bottom: 24px; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-body { display: flow-root; padding: 20px; } .widget-header { padding: 16px 20px 12px; } .widget-body { padding: 16px 20px; } .widget-footer { padding: 12px 20px; } .widget-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } h3.widget-title { margin-bottom: 16px; font-size: 20px; } .widget-separator { margin: 0 20px; } .widget small { font-size: 95%; font-weight: 500; } .widget p { line-height: 1.7; } .stats-widget { overflow: hidden; } .stats-widget .widget-body { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; } .stats-widget .widget-body::before, .stats-widget .widget-body::after { display: none; } .stats-widget .widget-title, .stats-widget .widget-title .counter { margin: 0 0 2px; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--text) !important; font-variant-numeric: tabular-nums; } .stats-widget .widget-body small { font-size: 13px; font-weight: 500; color: var(--text-muted) !important; } .stats-widget .big-icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 46px; height: 46px; font-size: 20px; color: var(--link); background: var(--brand-soft); border-radius: var(--radius-lg); } .stats-widget .widget-footer { padding: 10px 20px; background: var(--surface-2) !important; border-top: 1px solid var(--border); } .stats-widget .widget-footer a { font-size: 13px; font-weight: 500; color: var(--link) !important; } .stats-widget .widget-footer a:hover { color: var(--link-hover) !important; } .media { display: flex; gap: 12px; } .media-body { flex: 1 1 auto; min-width: 0; } .media-group-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); } .media-group-item:last-child { border-bottom: 0; } .media-group-item h5 { margin: 0 0 2px; font-weight: 500; } .panel { display: flow-root; margin-bottom: 20px; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .panel-body { display: flow-root; padding: 16px; } .panel-body p { color: var(--text-muted); } .panel-heading { padding: 12px 16px; color: var(--text); background-color: var(--surface-2); border-bottom: 1px solid var(--border); border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); } .panel-title { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text); } .panel-title > a, .panel-title > small, .panel-title > a > small { display: block; color: inherit; } .panel-title > a.collapsed, .panel-title > a { position: relative; padding-right: 24px; } .panel-title > a[data-toggle="collapse"]::after { content: ""; position: absolute; top: 50%; right: 2px; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55; transform: rotate(45deg); transition: transform .2s ease; } .panel-title > a[data-toggle="collapse"].collapsed::after { margin-top: -3px; transform: rotate(-45deg); } .panel-footer { padding: 12px 16px; background-color: var(--surface-2); border-top: 1px solid var(--border); border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); } .panel-heading:last-child { border-bottom: 0; border-radius: calc(var(--radius-lg) - 1px); } .panel-heading + .panel-collapse > .panel-body, .panel-heading + .panel-collapse > .list-group { border-top: 0; } .panel-collapse.in + .panel-footer, .panel > .panel-collapse:last-child > .panel-body { border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); } .panel-heading:has(+ .panel-collapse:not(.in):not(.collapsing)) { border-bottom-color: transparent; border-radius: calc(var(--radius-lg) - 1px); } .panel > .table, .panel > .table-responsive > .table { margin-bottom: 0; } .panel-group { margin-bottom: 20px; } .panel-group .panel { margin-bottom: 0; border-radius: var(--radius); } .panel-group .panel + .panel { margin-top: 8px; } .well { min-height: 20px; margin-bottom: 20px; padding: 16px; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .well-sm { padding: 9px; } .well-lg { padding: 24px; } .list-group { margin-bottom: 20px; } .list-group-item { position: relative; display: block; margin-bottom: -1px; padding: 10px 14px; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); } .list-group-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .list-group-item:last-child { margin-bottom: 0; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; } a.list-group-item, button.list-group-item { color: var(--text); } a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus { color: var(--text); background-color: var(--surface-2); } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; font-weight: 600; color: var(--link); background-color: var(--brand-soft); } .list-group-item.active > .badge { color: var(--brand-contrast); background-color: var(--brand); } .list-group-item.disabled { color: var(--text-subtle); cursor: not-allowed; } .list-group-item-heading { margin-top: 0; color: var(--text); } .list-group-item-text { color: var(--text-muted); } /* navigation lists (all items are links) get a card look */ .list-group:has(> a.list-group-item) { padding: 6px; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .list-group:has(> a.list-group-item) > .list-group-item { margin-bottom: 2px; padding: 9px 12px; background-color: transparent; border: 0; border-radius: var(--radius); } .list-group:has(> a.list-group-item) > .list-group-item:last-child { margin-bottom: 0; } .list-group:has(> a.list-group-item) > a.list-group-item:hover { background-color: var(--surface-2); } .list-group:has(> a.list-group-item) > .list-group-item.active { background-color: var(--brand-soft); } /* ========================================================================== Pagination ========================================================================== */ .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 20px 0; padding-left: 0; } .pagination > li > a, .pagination > li > span { display: block; min-width: 34px; padding: 6px 10px; line-height: 20px; color: var(--text); text-align: center; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .pagination > li > a:hover, .pagination > li > a:focus { color: var(--text); background-color: var(--surface-2); border-color: var(--border-strong); } .pagination > .active > a, .pagination > .active > span { color: var(--brand-contrast); cursor: default; background-color: var(--brand); border-color: var(--brand); } .pagination > .disabled > a, .pagination > .disabled > span { color: var(--text-muted); cursor: not-allowed; background-color: transparent; border-color: transparent; } /* ========================================================================== Dropdowns ========================================================================== */ .dropdown, .dropup { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 180px; margin: 6px 0 0; padding: 6px; font-size: 14px; color: var(--text); text-align: left; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .open > .dropdown-menu { display: block; animation: pop-in .12s var(--ease); } .dropdown-menu.pull-right, .dropdown-menu-right, .dropdown-menu.dropdown-menu-right-edge { right: 0; left: auto; } .dropup .dropdown-menu { top: auto; bottom: 100%; margin: 0 0 6px; } .dropdown-menu > li > a { display: block; padding: 7px 12px; clear: both; font-weight: 400; line-height: 20px; color: var(--text); white-space: nowrap; border-radius: var(--radius-sm); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--text); background-color: var(--surface-2); } .dropdown-menu > .active > a { color: var(--link); background-color: var(--brand-soft); } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover { color: var(--text-muted); cursor: default; background-color: transparent; } .dropdown-menu .divider { height: 1px; margin: 6px -6px; overflow: hidden; background-color: var(--border); } .dropdown-header, .dropdown-menu .h4Fix { display: block; margin: 0; padding: 8px 12px 4px !important; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle) !important; } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ========================================================================== Collapse & fade ========================================================================== */ .fade { opacity: 0; transition: opacity .15s linear; } .fade.in { opacity: 1; } .collapse { display: none; } .collapse.in { display: block; } tr.collapse.in { display: table-row; } tbody.collapse.in { display: table-row-group; } .collapsing { position: relative; height: 0; overflow: hidden; transition: height .25s var(--ease); } /* ========================================================================== Modals ========================================================================== */ .modal-open { overflow: hidden; } .modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; -webkit-overflow-scrolling: touch; } .modal-dialog { position: relative; width: auto; margin: 12px; transition: transform .2s var(--ease), opacity .2s ease; } .modal.fade .modal-dialog { opacity: 0; transform: translateY(-12px) scale(.98); } .modal.in .modal-dialog { opacity: 1; transform: none; } .modal-content { position: relative; color: var(--text); background-color: var(--surface); background-clip: padding-box; border: 1px solid var(--border); border-radius: var(--radius-lg); outline: 0; box-shadow: var(--shadow-lg); } .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: #0b0f17; } .modal-backdrop.fade { opacity: 0; transition: opacity .2s linear; } .modal-backdrop.in { opacity: .5; } .modal-header { display: flow-root; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-header .close { margin-top: -2px; } .modal-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text); } .modal-body { position: relative; display: flow-root; padding: 20px; } .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; background-color: var(--surface-2); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .modal-footer .btn + .btn { margin-left: 0; } .modal-footer .pull-left { margin-right: auto; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 40px auto; } .modal-sm { width: 360px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } /* ========================================================================== Popovers & tooltips ========================================================================== */ .popover, .tooltip { position: absolute; top: 0; left: 0; z-index: 1070; font-family: var(--font-sans); font-size: 13px; line-height: 1.45; text-align: left; white-space: normal; opacity: 0; transition: opacity .12s ease; pointer-events: none; } .popover.in, .tooltip.in { opacity: 1; } .popover.in { pointer-events: auto; } .popover { max-width: 300px; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .popover-title { margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; background-color: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .popover-content { padding: 8px 12px; } .popover > .arrow, .popover > .arrow::after, .tooltip-arrow { position: absolute; width: 0; height: 0; border: solid transparent; } .popover > .arrow { border-width: 8px; } .popover > .arrow::after { content: ""; border-width: 7px; } .popover.top > .arrow { bottom: -8px; margin-left: -8px; border-bottom-width: 0; border-top-color: var(--border); } .popover.top > .arrow::after { bottom: 1px; margin-left: -7px; border-bottom-width: 0; border-top-color: var(--surface); } .popover.bottom > .arrow { top: -8px; margin-left: -8px; border-top-width: 0; border-bottom-color: var(--border); } .popover.bottom > .arrow::after { top: 1px; margin-left: -7px; border-top-width: 0; border-bottom-color: var(--surface); } .popover.right > .arrow { top: 50%; left: -8px; margin-top: -8px; border-left-width: 0; border-right-color: var(--border); } .popover.right > .arrow::after { bottom: -7px; left: 1px; border-left-width: 0; border-right-color: var(--surface); } .popover.left > .arrow { top: 50%; right: -8px; margin-top: -8px; border-right-width: 0; border-left-color: var(--border); } .popover.left > .arrow::after { right: 1px; bottom: -7px; border-right-width: 0; border-left-color: var(--surface); } .tooltip-inner { max-width: 240px; padding: 5px 9px; color: #fff; text-align: center; background-color: #111827; border-radius: var(--radius-sm); } .tooltip-arrow { border-width: 5px; } .tooltip.top .tooltip-arrow { bottom: -5px; margin-left: -5px; border-bottom-width: 0; border-top-color: #111827; } .tooltip.bottom .tooltip-arrow { top: -5px; margin-left: -5px; border-top-width: 0; border-bottom-color: #111827; } .tooltip.left .tooltip-arrow { top: 50%; right: -5px; margin-top: -5px; border-right-width: 0; border-left-color: #111827; } .tooltip.right .tooltip-arrow { top: 50%; left: -5px; margin-top: -5px; border-left-width: 0; border-right-color: #111827; } /* ========================================================================== Dialogs, loading overlay, spinner ========================================================================== */ .dialog-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 18vh 16px 16px; background: var(--overlay); opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .15s ease; } .dialog-backdrop.in { opacity: 1; } .dialog { width: 100%; max-width: 440px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(-8px) scale(.98); transition: transform .2s var(--ease); } .dialog-backdrop.in .dialog { transform: none; } .dialog-body { padding: 22px 24px; line-height: 1.55; overflow-wrap: anywhere; } .dialog-input { margin-top: 12px; } .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--border); } .dialog-footer .btn { min-width: 80px; } .loading-overlay { position: fixed; inset: 0; z-index: 1990; display: flex; align-items: center; justify-content: center; color: var(--text); background: var(--scrim); opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .15s ease; } .loading-overlay.in { opacity: 1; } .spinner { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; border: .14em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } .spinner-lg { width: 44px; height: 44px; border-width: 4px; color: var(--brand); } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Inline editing, tag input, searchable select ========================================================================== */ .editable-click, a.editable-click { color: var(--link); cursor: pointer; border-bottom: 1px dashed var(--link); } .editable-click:hover { color: var(--link-hover); } .editable-empty, .editable-empty:hover { font-style: italic; color: var(--danger-text); } .editable-disabled { color: inherit; cursor: default; border-bottom: 0; } .inline-edit, .search-select-panel, .tag-input-suggestions { position: absolute; z-index: 1080; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .inline-edit { min-width: 260px; max-width: calc(100vw - 16px); padding: 10px; opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s var(--ease); } .inline-edit.in { opacity: 1; transform: none; } .inline-edit-title { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .inline-edit-row { display: flex; align-items: flex-start; gap: 6px; } .inline-edit-input { flex: 1 1 auto; min-width: 0; } .inline-edit-buttons { display: flex; gap: 4px; } .inline-edit-buttons .btn { height: 30px; padding: 4px 9px; } .inline-edit-error { display: none; margin-top: 8px; font-size: 13px; color: var(--danger-text); } .inline-edit.has-error .inline-edit-error { display: block; } .inline-edit.has-error .form-control { border-color: var(--danger); } .inline-edit.saving { cursor: progress; } .tag-input { display: flex; flex-wrap: wrap; gap: 4px; height: auto; min-height: 30px; padding: 3px 6px; cursor: text; } .tag-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .tag-input-field { flex: 1 1 80px; min-width: 80px; padding: 1px 2px; font-size: 13px; color: var(--text); background: transparent; border: 0; outline: 0; } .tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; font-size: 12px; line-height: 20px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-remove { width: 18px; height: 18px; padding: 0; font-size: 15px; line-height: 16px; color: var(--text-muted); background: transparent; border: 0; border-radius: 4px; } .tag-remove:hover { color: var(--text); background: var(--border); } .search-select-native { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; } .search-select { position: relative; width: 100%; } .search-select-control { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 10px 4px 12px; cursor: pointer; background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } .search-select-control:focus, .search-select.open .search-select-control { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px var(--brand-ring); } .has-error .search-select-control { border-color: var(--danger); } .search-select.locked .search-select-control { cursor: default; background-color: var(--surface-2); } .search-select.locked .caret { opacity: .3; } .search-select.disabled .search-select-control { cursor: not-allowed; background-color: var(--surface-2); opacity: .8; } .search-select-value { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px; min-width: 0; } .search-select-text, .search-select-placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-select-placeholder { color: var(--text-subtle); } .search-select-clear { padding: 0 4px; font-size: 16px; color: var(--text-muted); cursor: pointer; } .search-select-clear:hover { color: var(--text); } .search-select .caret { flex: 0 0 auto; transition: transform .15s ease; } .search-select.open .caret { transform: rotate(180deg); } .search-select-panel { padding: 6px; } .search-select-search { margin-bottom: 6px; } .search-select-options { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .search-select-options li { padding: 7px 10px; cursor: pointer; border-radius: var(--radius-sm); } .search-select-options li.active { background: var(--surface-2); } .search-select-options li.selected { font-weight: 600; color: var(--link); } .search-select-options li.selected::after { content: ""; float: right; width: 5px; height: 10px; margin-top: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .search-select-options li.disabled, .search-select-none { color: var(--text-subtle); cursor: default; } .tag-input-suggestions { padding: 4px; } /* ========================================================================== Charts ========================================================================== */ .chart-pie { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; max-width: 100%; } .chart-pie svg { flex: 0 0 auto; max-width: 100%; height: auto; } .chart-slice { stroke: var(--surface); stroke-width: 1.5; transition: opacity .15s ease; } .chart-empty { fill: var(--surface-3); } .chart-legend { display: grid; gap: 4px; min-width: 160px; max-width: 260px; margin: 0; padding: 0; font-size: 13px; text-align: left; list-style: none; } .chart-legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 2px 0; color: var(--text); transition: opacity .15s ease; } .chart-swatch { width: 12px; height: 12px; border-radius: 3px; } .chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chart-value { color: var(--text-muted); font-variant-numeric: tabular-nums; } .chart-pie .dimmed { opacity: .35; } /* ========================================================================== Application shell ========================================================================== */ .app-layout { display: flex; flex-direction: column; min-height: 100vh; } .app-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); } .app-header-bar, .app-nav, .app-main, .app-footer-inner, .app-search-inner { width: 100%; max-width: calc(var(--content-width) + 60px); margin: 0 auto; padding-right: 30px; padding-left: 30px; } @media (min-width: 1400px) { :root { --content-width: 1320px; } } .app-header-bar { display: flex; align-items: center; gap: 8px; height: var(--header-height); } .app-brand { display: flex; flex: 0 0 auto; align-items: center; height: 100%; margin-right: auto; } .app-logo { display: block; width: auto; height: 28px; max-width: 220px; } .app-logo-icon { display: none; height: 30px; } .app-toolbar { display: flex; align-items: center; gap: 2px; } .app-toolbar > .dropdown, .app-toolbar > a, .app-toolbar > button { flex: 0 0 auto; } .app-toolbar-btn, .app-header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; font-size: 14px; color: var(--text-muted); white-space: nowrap; cursor: pointer; background: transparent; border: 0; border-radius: var(--radius); transition: background-color .15s ease, color .15s ease; } .app-toolbar-btn:hover, .app-toolbar-btn:focus, .app-header-btn:hover, .app-header-btn:focus, .open > .app-toolbar-btn { color: var(--text); background-color: var(--surface-3); } .app-toolbar-btn .fa, .app-toolbar-btn .zmdi, .app-header-btn .fa, .app-header-btn .zmdi { font-size: 17px; } .app-credit { font-weight: 600; font-variant-numeric: tabular-nums; } .app-toolbar .dropdown-menu { right: 0; left: auto; width: 260px; margin-top: 10px; } .app-toolbar .dropdown-menu > li > a { white-space: normal; } .app-indicator { position: relative; display: inline-flex; } .app-indicator::after { content: ""; position: absolute; top: -2px; left: -6px; width: 8px; height: 8px; background: var(--warning); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); } .app-avatar { width: 36px; height: 36px; padding: 0; margin-left: 6px; overflow: hidden; cursor: pointer; background: var(--surface-3); border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); transition: box-shadow .15s ease; } .app-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .app-avatar:hover, .open > .app-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-ring); } .app-header-btn.nav-toggle, .app-header-btn.toolbar-toggle { display: none; } /* search field at the top of the mobile drawer */ .app-nav-search { display: none; } .app-nav { display: flex; height: var(--nav-height); } .app-menu { display: flex; gap: 2px; height: 100%; } .app-menu > li > a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .15s ease, box-shadow .15s ease; } .app-menu > li > a:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--border-strong); } .app-menu > li.active > a { color: var(--link); box-shadow: inset 0 -2px 0 var(--brand); } .app-menu .menu-icon { font-size: 17px; opacity: .85; } .app-menu > li.active .menu-icon { opacity: 1; } .app-nav-backdrop { display: none; } .app-search { position: fixed; inset: 0; z-index: 1040; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .app-search-inner { display: flex; align-items: center; gap: 10px; height: var(--header-height); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: none; } .app-search form { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; width: 100%; max-width: var(--content-width); margin: 0 auto; } .app-search .fa-search { color: var(--text-muted); } .app-search-field { flex: 1 1 auto; height: 40px; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: 0; } /* domain favicons (or the globe shown without one) fill their fixed-size box instead of running into the domain name next to it */ .favicon { vertical-align: -.2em; } .favicon > img, .favicon > .fa, .favicon > .zmdi { display: block; width: 100%; height: 100%; } .app-banner { margin-bottom: 0; text-align: center; border-width: 0 0 1px; border-radius: 0; } .app-banner p + p { margin-top: 4px; } .app-main { flex: 1 1 auto; padding-top: 24px; padding-bottom: 24px; } .app-main > h4:first-child, .app-main > h4.m-b-lg { font-size: 20px; font-weight: 600; line-height: 28px; } .app-main > h4 > .pull-right { margin-top: 2px; } .app-main > h4 > small { margin-left: 6px; font-size: 13px; font-weight: 400; } .app-footer { font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); } .app-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; } .app-footer-links { display: flex; gap: 24px; } .app-footer a { color: var(--text-muted); } .app-footer a:hover { color: var(--text); } :root[data-theme="dark"] .app-logo, :root[data-theme="dark"] .app-logo-icon { filter: brightness(0) invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .app-logo, :root:not([data-theme="light"]):not([data-theme="dark"]) .app-logo-icon { filter: brightness(0) invert(1); } } @media (max-width: 767px) { .app-header-bar, .app-main, .app-footer-inner, .app-search-inner { padding-right: 15px; padding-left: 15px; } /* a backdrop filter would make the header the containing block of the fixed drawer */ .app-header { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .app-header-bar { gap: 4px; height: 56px; } .app-header-btn.nav-toggle, .app-header-btn.toolbar-toggle { display: inline-flex; } .app-brand { margin: 0 auto; } .app-logo { display: none; } .app-logo-icon { display: block; } /* the toolbar folds into a second row */ .app-toolbar { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-wrap: wrap; justify-content: flex-end; padding: 6px 15px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .app-header.toolbar-open .app-toolbar { display: flex; } .app-toolbar .search-toggle { display: none; } .app-toolbar .dropdown { position: static; } .app-toolbar .dropdown-menu { right: 15px; left: 15px; width: auto; } /* the navigation becomes a drawer */ .app-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1035; display: block; width: 260px; height: auto; padding: 16px 10px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .22s var(--ease); } .nav-open .app-nav { transform: none; } .app-nav-backdrop { position: fixed; inset: 0; z-index: 1034; display: block; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .nav-open .app-nav-backdrop { opacity: 1; pointer-events: auto; } .app-nav-search { position: relative; display: block; margin: 0 2px 12px; } .app-nav-search .fa-search { position: absolute; top: 50%; left: 12px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; } .app-nav-search .form-control { height: 40px; padding-left: 36px; font-size: 16px; } .app-menu { display: block; height: auto; } .app-menu > li { margin-bottom: 2px; } .app-menu > li > a { height: auto; padding: 11px 12px; border-radius: var(--radius); box-shadow: none; } .app-menu > li > a:hover { background: var(--surface-2); box-shadow: none; } .app-menu > li.active > a { background: var(--brand-soft); box-shadow: none; } .app-footer-inner { flex-direction: column; } } @media print { .app-header, .app-footer, .app-nav-backdrop { display: none !important; } } /* ========================================================================== Sign-in page ========================================================================== */ .auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; background: var(--surface); } .auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--surface); } .auth-card { width: 100%; max-width: 380px; } .auth-head { margin-bottom: 32px; text-align: center; } .auth-logo { max-width: 100%; max-height: 80px; } .auth-subtitle { display: block; margin: 16px 0; color: var(--text-muted); } .auth-language { max-width: 250px; margin: 0 auto; } .auth .form-control { height: 44px; padding: 10px 14px; font-size: 15px; border-radius: 10px; } .auth .btn { padding: 11px 16px; font-weight: 600; border-radius: 10px; } .auth .form-group { margin-bottom: 16px; } .auth-passkey .fa { margin-right: 8px; color: var(--link); } .auth-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .auth-remember label { margin: 0; font-weight: 400; color: var(--text-muted); } .auth-remember input { margin: 0; } .auth-note { margin-top: 24px; font-size: 13px; color: var(--text-muted); text-align: center; } .auth-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; background: #0b1220 url("/img/world.jpg") center / cover no-repeat; } .auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 55%, transparent) 0%, rgba(8, 12, 24, .2) 55%, rgba(8, 12, 24, .6) 100%); pointer-events: none; } .auth-teaser { position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 32px; text-align: center; color: var(--text); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .auth-teaser h3 { margin: 12px 0 8px; } .auth-teaser p { color: var(--text-muted); } .auth-teaser-logo { max-height: 44px; } :root:not([data-theme="dark"]) .auth-teaser-logo { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-logo { filter: brightness(0) invert(1); } :root:not([data-theme="light"]) .auth-teaser-logo { filter: none; } } @media (max-width: 991px) { .auth { display: block; padding: 24px 16px; background: #0b1220 url("/img/world.jpg") center / cover fixed no-repeat; } .auth::before { content: ""; position: fixed; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 50%, transparent) 0%, rgba(8, 12, 24, .55) 100%); pointer-events: none; } .auth-panel { position: relative; max-width: 480px; margin: 0 auto; padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .auth-visual { position: relative; max-width: 480px; margin: 0 auto; padding: 0; background: none; } .auth-visual::after { display: none; } .auth-teaser { margin-top: 16px; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .spinner, .fa-spin, .fa-pulse { animation-duration: 1s !important; animation-iteration-count: infinite !important; } }