.atwho-view { position: absolute; top: 0; left: 0; display: none; margin-top: 18px; background: white; color: black; border: 1px solid #DDD; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); min-width: 120px; z-index: 11110 !important; } .atwho-view .atwho-header { padding: 5px; margin: 5px; cursor: pointer; border-bottom: solid 1px #eaeff1; color: #6f8092; font-size: 11px; font-weight: bold; } .atwho-view .atwho-header .small { color: #6f8092; float: right; padding-top: 2px; margin-right: -5px; font-size: 12px; font-weight: normal; } .atwho-view .atwho-header:hover { cursor: default; } .atwho-view .cur { background: #3366FF; color: white; } .atwho-view .cur small { color: white; } .atwho-view strong { color: #3366FF; } .atwho-view .cur strong { color: white; font: bold; } .atwho-view ul { /* width: 100px; */ list-style: none; padding: 0; margin: auto; max-height: 200px; overflow-y: auto; } .atwho-view ul li { display: block; padding: 5px 10px; border-bottom: 1px solid #DDD; cursor: pointer; /* border-top: 1px solid #C8C8C8; */ } .atwho-view small { font-size: smaller; color: #777; font-weight: normal; } /* * The MIT License * Copyright (c) 2012 Matias Meno */ .dropzone, .dropzone * { box-sizing: border-box; } .dropzone { position: relative; } .dropzone .dz-preview { position: relative; display: inline-block; width: 120px; margin: 0.5em; } .dropzone .dz-preview .dz-progress { display: block; height: 15px; border: 1px solid #aaa; } .dropzone .dz-preview .dz-progress .dz-upload { display: block; height: 100%; width: 0; background: green; } .dropzone .dz-preview .dz-error-message { color: red; display: none; } .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { display: block; } .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark { position: absolute; display: none; left: 30px; top: 30px; width: 54px; height: 58px; left: 50%; margin-left: -27px; } /* stylelint-disable gitlab/no-gl-class */ /* stylelint-disable length-zero-no-unit */ :root { --performance-bar-height: 0px; --system-header-height: 0px; --header-height: 0px; --top-bar-height: 0px; --broadcast-message-height: 0px; --system-footer-height: 0px; --application-header-height: calc( var(--header-height) + var(--system-header-height) + var(--performance-bar-height) + var(--top-bar-height) ); --application-bar-right: 0px; /** * CI icon styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/177222 * Owner: Verify: Pipeline execution */ --ci-icon-success-background-color: var(--gl-color-green-100); --ci-icon-success-text-color: var(--gl-color-green-700); --ci-icon-success-icon-color: var(--gl-color-neutral-0); --ci-icon-success-icon-background-color: var(--gl-color-green-500); --ci-icon-warning-background-color: var(--gl-color-orange-100); --ci-icon-warning-text-color: var(--gl-color-orange-700); --ci-icon-warning-icon-color: var(--gl-color-neutral-0); --ci-icon-warning-icon-background-color: var(--gl-color-orange-500); --ci-icon-danger-background-color: var(--gl-color-red-100); --ci-icon-danger-text-color: var(--gl-color-red-700); --ci-icon-danger-icon-color: var(--gl-color-neutral-0); --ci-icon-danger-icon-background-color: var(--gl-color-red-500); --ci-icon-info-background-color: var(--gl-color-blue-100); --ci-icon-info-text-color: var(--gl-color-blue-700); --ci-icon-info-icon-color: var(--gl-color-blue-500); --ci-icon-info-icon-background-color: var(--gl-color-neutral-0); --ci-icon-neutral-background-color: var(--gl-color-neutral-100); --ci-icon-neutral-text-color: var(--gl-color-neutral-700); --ci-icon-neutral-icon-color: var(--gl-color-neutral-500); --ci-icon-neutral-icon-background-color: var(--gl-color-neutral-0); /** * Diff styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/171514 * Owner: Create: Code review */ --diff-warning-text-color: var(--gl-feedback-warning-text-color); --diff-warning-background-color: var(--gl-feedback-warning-background-color); /** * Review note styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167708 * Owner: Create: Code review */ --timeline-entry-draft-note-background-color: var(--gl-color-orange-50); /** * Work item note styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167708 * Owner: Plan: Project Management */ --timeline-entry-internal-note-background-color: var(--gl-color-orange-50); /** * Target note styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167708 * Owner: TBD */ --timeline-entry-target-background-color: var(--gl-color-blue-50); /** * Contribution graph styles on user profile * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/180664 * Owner: Organizations */ --user-contribution-graph-cell-level-0: var(--gl-color-neutral-50); --user-contribution-graph-cell-level-1: var(--gl-color-data-blue-100); --user-contribution-graph-cell-level-2: var(--gl-color-data-blue-400); --user-contribution-graph-cell-level-3: var(--gl-color-data-blue-600); --user-contribution-graph-cell-level-4: var(--gl-color-data-blue-900); } :root .contrib-calendar-root { --user-contribution-graph-cell-level-0: var(--gl-color-neutral-50); --user-contribution-graph-cell-level-1: var(--gl-color-orange-200); --user-contribution-graph-cell-level-2: var(--gl-color-orange-400); --user-contribution-graph-cell-level-3: var(--gl-color-orange-600); --user-contribution-graph-cell-level-4: var(--gl-color-orange-800); } :root.ui-indigo .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-purple-200); --user-contribution-graph-cell-level-2: var(--gl-color-purple-400); --user-contribution-graph-cell-level-3: var(--gl-color-purple-600); --user-contribution-graph-cell-level-4: var(--gl-color-purple-800); } :root.ui-blue .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-blue-200); --user-contribution-graph-cell-level-2: var(--gl-color-blue-400); --user-contribution-graph-cell-level-3: var(--gl-color-blue-600); --user-contribution-graph-cell-level-4: var(--gl-color-blue-800); } :root.ui-green .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-green-200); --user-contribution-graph-cell-level-2: var(--gl-color-green-400); --user-contribution-graph-cell-level-3: var(--gl-color-green-600); --user-contribution-graph-cell-level-4: var(--gl-color-green-800); } :root.ui-red .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-red-200); --user-contribution-graph-cell-level-2: var(--gl-color-red-400); --user-contribution-graph-cell-level-3: var(--gl-color-red-600); --user-contribution-graph-cell-level-4: var(--gl-color-red-800); } :root.ui-gray .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-neutral-200); --user-contribution-graph-cell-level-2: var(--gl-color-neutral-400); --user-contribution-graph-cell-level-3: var(--gl-color-neutral-600); --user-contribution-graph-cell-level-4: var(--gl-color-neutral-800); } :root { /** * Severity colors * Discussion: https://gitlab.com/gitlab-org/gitlab/-/issues/581121 * Owner: Security Risk Management: Security Insights */ --severity-color-critical: var(--gl-color-red-800); --severity-color-high: var(--gl-color-red-600); --severity-color-medium: var(--gl-color-orange-400); --severity-color-low: var(--gl-color-orange-300); --severity-color-info: var(--gl-color-blue-400); --severity-color-unknown: var(--gl-color-neutral-400); /** * Find and replace highlight styles * Discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/231274 * Owner: Group Knowledge */ --find-and-replace-match-text-color: var(--gl-highlight-match-text-color); --find-and-replace-match-background-color: var(--gl-color-orange-100); --find-and-replace-match-active-text-color: var(--gl-highlight-match-text-color); --find-and-replace-match-active-background-color: var(--gl-highlight-match-background-color); } :root.gl-dark { --ci-icon-success-background-color: var(--gl-color-green-300); --ci-icon-success-text-color: var(--gl-color-green-900); --ci-icon-success-icon-color: var(--gl-color-green-300); --ci-icon-success-icon-background-color: var(--gl-color-green-900); --ci-icon-warning-background-color: var(--gl-color-orange-300); --ci-icon-warning-text-color: var(--gl-color-orange-900); --ci-icon-warning-icon-color: var(--gl-color-orange-300); --ci-icon-warning-icon-background-color: var(--gl-color-orange-900); --ci-icon-danger-background-color: var(--gl-color-red-300); --ci-icon-danger-text-color: var(--gl-color-red-900); --ci-icon-danger-icon-color: var(--gl-color-red-300); --ci-icon-danger-icon-background-color: var(--gl-color-red-900); --ci-icon-info-background-color: var(--gl-color-blue-300); --ci-icon-info-text-color: var(--gl-color-blue-900); --ci-icon-info-icon-color: var(--gl-color-blue-300); --ci-icon-info-icon-background-color: var(--gl-color-blue-900); --ci-icon-neutral-background-color: var(--gl-color-neutral-300); --ci-icon-neutral-text-color: var(--gl-color-neutral-900); --ci-icon-neutral-icon-color: var(--gl-color-neutral-300); --ci-icon-neutral-icon-background-color: var(--gl-color-neutral-900); --diff-warning-background-color: #453522; --timeline-entry-draft-note-background-color: #453522; --timeline-entry-internal-note-background-color: #453522; --timeline-entry-target-background-color: #2A394E; --user-contribution-graph-cell-level-0: var(--gl-color-neutral-900); --user-contribution-graph-cell-level-1: var(--gl-color-data-blue-900); --user-contribution-graph-cell-level-2: var(--gl-color-data-blue-600); --user-contribution-graph-cell-level-3: var(--gl-color-data-blue-400); --user-contribution-graph-cell-level-4: var(--gl-color-data-blue-100); } :root.gl-dark .contrib-calendar-root { --user-contribution-graph-cell-level-0: var(--gl-color-neutral-900); --user-contribution-graph-cell-level-1: var(--gl-color-orange-800); --user-contribution-graph-cell-level-2: var(--gl-color-orange-600); --user-contribution-graph-cell-level-3: var(--gl-color-orange-400); --user-contribution-graph-cell-level-4: var(--gl-color-orange-200); } :root.gl-dark.ui-indigo .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-purple-800); --user-contribution-graph-cell-level-2: var(--gl-color-purple-600); --user-contribution-graph-cell-level-3: var(--gl-color-purple-400); --user-contribution-graph-cell-level-4: var(--gl-color-purple-200); } :root.gl-dark.ui-blue .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-blue-800); --user-contribution-graph-cell-level-2: var(--gl-color-blue-600); --user-contribution-graph-cell-level-3: var(--gl-color-blue-400); --user-contribution-graph-cell-level-4: var(--gl-color-blue-200); } :root.gl-dark.ui-green .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-green-800); --user-contribution-graph-cell-level-2: var(--gl-color-green-600); --user-contribution-graph-cell-level-3: var(--gl-color-green-400); --user-contribution-graph-cell-level-4: var(--gl-color-green-200); } :root.gl-dark.ui-red .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-red-800); --user-contribution-graph-cell-level-2: var(--gl-color-red-600); --user-contribution-graph-cell-level-3: var(--gl-color-red-400); --user-contribution-graph-cell-level-4: var(--gl-color-red-200); } :root.gl-dark.ui-gray .contrib-calendar-root { --user-contribution-graph-cell-level-1: var(--gl-color-neutral-800); --user-contribution-graph-cell-level-2: var(--gl-color-neutral-600); --user-contribution-graph-cell-level-3: var(--gl-color-neutral-400); --user-contribution-graph-cell-level-4: var(--gl-color-neutral-200); } :root.gl-dark { --severity-color-critical: var(--gl-color-red-500); --severity-color-high: var(--gl-color-red-300); --severity-color-medium: var(--gl-color-orange-300); --severity-color-low: var(--gl-color-orange-100); --severity-color-info: var(--gl-color-blue-300); --severity-color-unknown: var(--gl-color-neutral-300); --find-and-replace-match-active-text-color: var(--gl-color-neutral-0); --find-and-replace-match-active-background-color: var(--gl-color-orange-800); } /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* * Layout */ /** 🚨 Do not use this spacing scale — it is deprecated and being removed. 🚨 See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. Instead, if you need a spacing class, add it to app/assets/stylesheets/framework/common.scss, using the following values. $gl-spacing-scale-0: 0; $gl-spacing-scale-1: 2px; $gl-spacing-scale-2: 4px; $gl-spacing-scale-3: 8px; $gl-spacing-scale-4: 12px; $gl-spacing-scale-5: 16px; $gl-spacing-scale-6: 24px; $gl-spacing-scale-7: 32px; $gl-spacing-scale-8: 40px; $gl-spacing-scale-9: 48px; $gl-spacing-scale-10: 56px; $gl-spacing-scale-11: 64px; $gl-spacing-scale-12: 80px; $gl-spacing-scale-13: 96px; E.g., a padding top of 96px can be added using: .gl-shim-pt-13 { padding-top: 96px; } Please use -shim- so it can be differentiated from the old scale classes. These will be replaced when the Gitlab UI utilities are included. **/ /* Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2792 */ /* End gitlab-ui#1709 */ /* * Text */ /* * Lists */ /* * Code */ /* * Tooltips */ /* * Padding */ /* * Misc */ /* * Merge requests */ /* * Calculated heights */ /* tanuki logo colors */ /* * State colors: */ /* * Commit Diff Colors */ /* * The transparent colors are used in Monaco editor. Using full opacity colors * would hide other layers (selected text, matching brackets). * * When the transparent colors get layered on white background, they create their * full opacity counterparts: * * - white + $line-added-transparent = $line-added * - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark * * More details: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41553 */ /* * Fonts * The --default-mono-font and --default-regular-font variables give users * a way to override our font choices for them. */ /* * Dropdowns */ /* * Sidebar */ /* * Buttons */ /* * Badges */ /* * Award emoji */ /* * Search Box */ /* * Notes */ /* * Boards */ /* * Builds */ /* * Commit Page */ /* * Files */ /* * Forms */ /* * Label */ /* * Animation */ /* * Login */ /* * Typography */ /* Pipeline Graph */ /* GitLab Plans */ /* Performance Bar */ /* Image Commenting cursor */ /* Popup */ /* Drawers */ /* Modals */ /* Popovers */ /* Merge requests */ /* Board Swimlanes */ /* Source Editor theme overrides */ /** Bootstrap 4.2.0 introduced new icons for validating forms. Our design system does not use those, so we are disabling them for now: - Docs: https://getbootstrap.com/docs/4.3/components/forms/#server-side - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242 */ /* * This file is only for overriding Bootstrap 4 variables. * Please add any new variables to variables.scss */ /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /** * Prefilled mixins * Mixins with fixed values */ /* * Base mixin for lists in GitLab */ /* * Mixin for status badges, as used for pipelines and commit signatures */ /* * Mixin that fixes wrapping issues with long strings (e.g. URLs) * * Note: the width needs to be set for it to work in Firefox */ /* * Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs) */ /* * Mixin that handles the position of the controls placed on the top bar */ /* * Mixin that handles the size and right margin of avatars. */ /** * Style to apply to, for example, search results matches or text wrapped * around (allowed in Markdown). */ /** * Line connecting activity entries, used in issuables, work items etc */ /** * Deprecated mixin for dark mode */ /** * CI/CD Job item failed status background * * Sets background color of items to visually * highlight failed jobs in the UI. */ /** * Declares a property with a fluid value that decreases or * rises depending on the viewport’s size. The property type * should be numeric. * * Values are expected in rem units. * Fluid range: between 48rem (768px) – 75rem (1200px). * * @param $property Property name, i.e. line-height, font-size, width, height, etc. * @param $min Property value lower bound. * @param $max Property value upper bound. */ /** * Helper function for :focus * * @param $size is deprecated and should not be used anymore */ /** * Helper function for @media of at least the minimum * breakpoint width. * * @param $name Breakpoint name, such as `sm` or `md`. */ /** * Helper function for @media of at most the maximum * breakpoint width. * * Note: Before using, consider using a mobile-first * approach, and define @media for larger breakpoints * using `gl-media-breakpoint-up` while using this rule as * the starting point instead. * * @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid */ /** * Helper function to resolve font-size value from $gl-font-sizes and * $gl-font-sizes-fixed maps. * * @param $size Number font-size scale * @param $fixed Boolean toggle default and fixed font size scales */ /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ :root { --blue: #007bff; --indigo: #6610f2; --purple: #6d49cb; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #28272d; --gray: #a5a3a3; --gray-dark: #dcdbd9; --primary: #007bff; --secondary: #28272d; --success: #0c7265; --info: #3f8edd; --warning: #b34013; --danger: #c52042; --light: #3a383d; --dark: #dcdbd9; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; } *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left; } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.25rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 600; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } pre, code, kbd, samp { font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: left; caption-side: bottom; } th { text-align: inherit; text-align: -webkit-match-parent; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus:not(:focus-visible) { outline: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } [role=button] { cursor: pointer; } select { word-wrap: normal; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding: 0; border-style: none; } input[type=radio], input[type=checkbox] { box-sizing: border-box; padding: 0; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { outline-offset: -2px; -webkit-appearance: none; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; } h1, .h1 { font-size: 2.1875rem; } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.53125rem; } h4, .h4 { font-size: 1.3125rem; } h5, .h5 { font-size: 1.09375rem; } h6, .h6 { font-size: 0.875rem; } .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; } .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; } .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } hr { margin-top: 0.5rem; margin-bottom: 0.5rem; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } small, .small { font-size: 0.875em; font-weight: 400; } mark, .mark { padding: 0.2em; background-color: #fcf8e3; } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } .initialism { font-size: 90%; text-transform: uppercase; } .blockquote { margin-bottom: 0.5rem; font-size: 1.25rem; } .blockquote-footer { display: block; font-size: 0.875em; color: #a5a3a3; } .blockquote-footer::before { content: "— "; } .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { padding: 0.25rem; background-color: #18171d; border: 1px solid #646163; border-radius: 0.25rem; max-width: 100%; height: auto; } .figure { display: inline-block; } .figure-img { margin-bottom: 0.25rem; line-height: 1; } .figure-caption { font-size: 90%; color: #a5a3a3; } code { font-size: 90%; color: #e83e8c; word-wrap: break-word; } a > code { color: inherit; } pre { display: block; font-size: 90%; color: #ecebea; } pre code { font-size: inherit; color: inherit; word-break: normal; } .pre-scrollable { max-height: 340px; overflow-y: scroll; } .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; } .gl-col-xl, .gl-col-xl-auto, .gl-col-xl-12, .gl-col-xl-11, .gl-col-xl-10, .gl-col-xl-9, .gl-col-xl-8, .gl-col-xl-7, .gl-col-xl-6, .gl-col-xl-5, .gl-col-xl-4, .gl-col-xl-3, .gl-col-xl-2, .gl-col-xl-1, .gl-col-lg, .gl-col-lg-auto, .gl-col-lg-12, .gl-col-lg-11, .gl-col-lg-10, .gl-col-lg-9, .gl-col-lg-8, .gl-col-lg-7, .gl-col-lg-6, .gl-col-lg-5, .gl-col-lg-4, .gl-col-lg-3, .gl-col-lg-2, .gl-col-lg-1, .gl-col-md, .gl-col-md-auto, .gl-col-md-12, .gl-col-md-11, .gl-col-md-10, .gl-col-md-9, .gl-col-md-8, .gl-col-md-7, .gl-col-md-6, .gl-col-md-5, .gl-col-md-4, .gl-col-md-3, .gl-col-md-2, .gl-col-md-1, .gl-col-sm, .gl-col-sm-auto, .gl-col-sm-12, .gl-col-sm-11, .gl-col-sm-10, .gl-col-sm-9, .gl-col-sm-8, .gl-col-sm-7, .gl-col-sm-6, .gl-col-sm-5, .gl-col-sm-4, .gl-col-sm-3, .gl-col-sm-2, .gl-col-sm-1, .gl-col, .gl-col-auto, .gl-col-12, .gl-col-11, .gl-col-10, .gl-col-9, .gl-col-8, .gl-col-7, .gl-col-6, .gl-col-5, .gl-col-4, .gl-col-3, .gl-col-2, .gl-col-1, .col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .order-first { order: -1; } .order-last { order: 13; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-sm-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-sm-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .order-sm-first { order: -1; } .order-sm-last { order: 13; } .order-sm-0 { order: 0; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } .order-sm-6 { order: 6; } .order-sm-7 { order: 7; } .order-sm-8 { order: 8; } .order-sm-9 { order: 9; } .order-sm-10 { order: 10; } .order-sm-11 { order: 11; } .order-sm-12 { order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-md-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-md-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .order-md-first { order: -1; } .order-md-last { order: 13; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } .order-md-11 { order: 11; } .order-md-12 { order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-lg-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-lg-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .order-lg-first { order: -1; } .order-lg-last { order: 13; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } .order-lg-11 { order: 11; } .order-lg-12 { order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-xl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-xl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .order-xl-first { order: -1; } .order-xl-last { order: 13; } .order-xl-0 { order: 0; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } .order-xl-6 { order: 6; } .order-xl-7 { order: 7; } .order-xl-8 { order: 8; } .order-xl-9 { order: 9; } .order-xl-10 { order: 10; } .order-xl-11 { order: 11; } .order-xl-12 { order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } } .table-sm th, .table-sm td { padding: 0.3rem; } .table-bordered { border: 1px solid #dcdbd9; } .table-bordered th, .table-bordered td { border: 1px solid #dcdbd9; } .table-bordered thead th, .table-bordered thead td { border-bottom-width: 2px; } .table-borderless th, .table-borderless td, .table-borderless thead th, .table-borderless tbody + tbody { border: 0; } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--gl-background-color-subtle); } .table-hover tbody tr:hover { color: #3a383d; background-color: rgba(255, 255, 255, 0.075); } .table-primary, .table-primary > th, .table-primary > td { background-color: rgb(28.8, 62.52, 103.8); } .table-primary th, .table-primary td, .table-primary thead th, .table-primary tbody + tbody { border-color: rgb(19.2, 82.68, 154.2); } .table-hover .table-primary:hover { background-color: rgb(23.2615384615, 50.4969230769, 83.8384615385); } .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { background-color: rgb(23.2615384615, 50.4969230769, 83.8384615385); } .table-secondary, .table-secondary > th, .table-secondary > td { background-color: #28272d; } .table-secondary th, .table-secondary td, .table-secondary thead th, .table-secondary tbody + tbody { border-color: #28272d; } .table-hover .table-secondary:hover { background-color: rgb(27.8571428571, 27.1607142857, 31.3392857143); } .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { background-color: rgb(27.8571428571, 27.1607142857, 31.3392857143); } .table-success, .table-success > th, .table-success > td { background-color: rgb(32.16, 60, 60.68); } .table-success th, .table-success td, .table-success thead th, .table-success tbody + tbody { border-color: rgb(25.44, 78, 74.12); } .table-hover .table-success:hover { background-color: rgb(23.3267384748, 43.5200344679, 44.0132615252); } .table-hover .table-success:hover > td, .table-hover .table-success:hover > th { background-color: rgb(23.3267384748, 43.5200344679, 44.0132615252); } .table-info, .table-info > th, .table-info > td { background-color: rgb(46.44, 67.84, 94.28); } .table-info th, .table-info td, .table-info thead th, .table-info tbody + tbody { border-color: rgb(51.96, 92.56, 136.52); } .table-hover .table-info:hover { background-color: rgb(38.0245650938, 55.5466515065, 77.1954349062); } .table-hover .table-info:hover > td, .table-hover .table-info:hover > th { background-color: rgb(38.0245650938, 55.5466515065, 77.1954349062); } .table-warning, .table-warning > th, .table-warning > td { background-color: rgb(78.92, 46, 37.72); } .table-warning th, .table-warning td, .table-warning thead th, .table-warning tbody + tbody { border-color: rgb(112.28, 52, 31.48); } .table-hover .table-warning:hover { background-color: rgb(61.666399177, 35.9434156379, 29.473600823); } .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { background-color: rgb(61.666399177, 35.9434156379, 29.473600823); } .table-danger, .table-danger > th, .table-danger > td { background-color: rgb(83.96, 37.04, 50.88); } .table-danger th, .table-danger td, .table-danger thead th, .table-danger tbody + tbody { border-color: rgb(121.64, 35.36, 55.92); } .table-hover .table-danger:hover { background-color: rgb(66.2659504132, 29.2340495868, 40.1573553719); } .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { background-color: rgb(66.2659504132, 29.2340495868, 40.1573553719); } .table-light, .table-light > th, .table-light > td { background-color: rgb(45.04, 43.76, 49.48); } .table-light th, .table-light td, .table-light thead th, .table-light tbody + tbody { border-color: rgb(49.36, 47.84, 53.32); } .table-hover .table-light:hover { background-color: rgb(32.7221106821, 31.7921750322, 35.9478249678); } .table-hover .table-light:hover > td, .table-hover .table-light:hover > th { background-color: rgb(32.7221106821, 31.7921750322, 35.9478249678); } .table-dark, .table-dark > th, .table-dark > td { background-color: rgb(90.4, 89.4, 93.16); } .table-dark th, .table-dark td, .table-dark thead th, .table-dark tbody + tbody { border-color: rgb(133.6, 132.6, 134.44); } .table-hover .table-dark:hover { background-color: rgb(77.7729184926, 76.9125985977, 80.1474014023); } .table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { background-color: rgb(77.7729184926, 76.9125985977, 80.1474014023); } .table-active, .table-active > th, .table-active > td { background-color: rgba(255, 255, 255, 0.075); } .table-hover .table-active:hover { background-color: rgba(242.25, 242.25, 242.25, 0.075); } .table-hover .table-active:hover > td, .table-hover .table-active:hover > th { background-color: rgba(242.25, 242.25, 242.25, 0.075); } .table .thead-dark th { color: #28272d; background-color: #dcdbd9; border-color: rgb(238.3390410959, 237.8630136986, 236.9109589041); } .table .thead-light th { color: #c1bfbe; background-color: #4d4b4e; border-color: #dcdbd9; } .table-dark { color: #28272d; background-color: #dcdbd9; } .table-dark th, .table-dark td, .table-dark thead th { border-color: rgb(238.3390410959, 237.8630136986, 236.9109589041); } .table-dark.table-bordered { border: 0; } .table-dark.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(40, 39, 45, 0.05); } .table-dark.table-hover tbody tr:hover { color: #28272d; background-color: rgba(40, 39, 45, 0.075); } @container (width < 576px) { :where(html.with-gl-container-queries) .table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html.with-gl-container-queries) .table-responsive-sm > .table-bordered { border: 0; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) .table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html:not(.with-gl-container-queries)) .table-responsive-sm > .table-bordered { border: 0; } } @container (width < 768px) { :where(html.with-gl-container-queries) .table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html.with-gl-container-queries) .table-responsive-md > .table-bordered { border: 0; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html:not(.with-gl-container-queries)) .table-responsive-md > .table-bordered { border: 0; } } @container (width < 992px) { :where(html.with-gl-container-queries) .table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html.with-gl-container-queries) .table-responsive-lg > .table-bordered { border: 0; } } @media (width < 992px) { :where(html:not(.with-gl-container-queries)) .table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html:not(.with-gl-container-queries)) .table-responsive-lg > .table-bordered { border: 0; } } @container (width < 1200px) { :where(html.with-gl-container-queries) .table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html.with-gl-container-queries) .table-responsive-xl > .table-bordered { border: 0; } } @media (width < 1200px) { :where(html:not(.with-gl-container-queries)) .table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html:not(.with-gl-container-queries)) .table-responsive-xl > .table-bordered { border: 0; } } .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive > .table-bordered { border: 0; } .form-control { display: block; width: 100%; height: 32px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #3a383d; background-color: #28272d; background-clip: padding-box; border: 1px solid #747273; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } .form-control::-ms-expand { background-color: transparent; border: 0; } .form-control:focus-visible { color: #3a383d; background-color: #28272d; border-color: rgb(127.5, 189, 255); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .form-control::placeholder { color: #a5a3a3; opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: #18171d; opacity: 1; } input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control { appearance: none; } select.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #3a383d; } select.form-control:focus-visible::-ms-value { color: #3a383d; background-color: #28272d; } .form-control-file, .form-control-range { display: block; width: 100%; } .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; } .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; } .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; } .form-control-plaintext { display: block; width: 100%; padding: 0.375rem 0; margin-bottom: 0; font-size: 0.875rem; line-height: 1.5; color: #3a383d; background-color: transparent; border: solid transparent; border-width: 1px 0; } .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } select.form-control[size], select.form-control[multiple] { height: auto; } textarea.form-control { height: auto; } .form-group { margin-bottom: 1rem; } .form-text { display: block; margin-top: 0.25rem; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .form-row > .col, .form-row > [class*=col-] { padding-right: 5px; padding-left: 5px; } .form-check { position: relative; display: block; padding-left: 1.25rem; } .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { color: #a5a3a3; } .form-check-label { margin-bottom: 0; } .form-check-inline { display: inline-flex; align-items: center; padding-left: 0; margin-right: 0.75rem; } .form-check-inline .form-check-input { position: static; margin-top: 0; margin-right: 0.3125rem; margin-left: 0; } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #0c7265; } .valid-tooltip { position: absolute; top: 100%; left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.5rem 0.75rem; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.5; color: #f7f7f5; background-color: #0c7265; border-radius: 0.25rem; } .form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip { left: 5px; } .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip { display: block; } .was-validated .form-control:valid, .form-control.is-valid { border-color: #0c7265; } .was-validated .form-control:valid:focus-visible, .form-control.is-valid:focus-visible { border-color: #0c7265; box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.25); } .was-validated .custom-select:valid, .custom-select.is-valid { border-color: #0c7265; } .was-validated .custom-select:valid:focus-visible, .custom-select.is-valid:focus-visible { border-color: #0c7265; box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #0c7265; } .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { color: #0c7265; } .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { border-color: #0c7265; } .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { border-color: rgb(16.8571428571, 160.1428571429, 141.880952381); background-color: rgb(16.8571428571, 160.1428571429, 141.880952381); } .was-validated .custom-control-input:valid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-valid:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.25); } .was-validated .custom-control-input:valid:focus-visible:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus-visible:not(:checked) ~ .custom-control-label::before { border-color: #0c7265; } .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { border-color: #0c7265; } .was-validated .custom-file-input:valid:focus-visible ~ .custom-file-label, .custom-file-input.is-valid:focus-visible ~ .custom-file-label { border-color: #0c7265; box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.25); } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #c52042; } .invalid-tooltip { position: absolute; top: 100%; left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.5rem 0.75rem; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.5; color: #f7f7f5; background-color: #c52042; border-radius: 0.25rem; } .form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip { left: 5px; } .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #c52042; } .was-validated .form-control:invalid:focus-visible, .form-control.is-invalid:focus-visible { border-color: #c52042; box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.25); } .was-validated .custom-select:invalid, .custom-select.is-invalid { border-color: #c52042; } .was-validated .custom-select:invalid:focus-visible, .custom-select.is-invalid:focus-visible { border-color: #c52042; box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #c52042; } .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { color: #c52042; } .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #c52042; } .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { border-color: rgb(222.8602620087, 57.1397379913, 91.288209607); background-color: rgb(222.8602620087, 57.1397379913, 91.288209607); } .was-validated .custom-control-input:invalid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-invalid:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.25); } .was-validated .custom-control-input:invalid:focus-visible:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus-visible:not(:checked) ~ .custom-control-label::before { border-color: #c52042; } .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { border-color: #c52042; } .was-validated .custom-file-input:invalid:focus-visible ~ .custom-file-label, .custom-file-input.is-invalid:focus-visible ~ .custom-file-label { border-color: #c52042; box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.25); } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } .form-inline .form-check { width: 100%; } @media (min-width: 576px) { .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0; } .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .form-inline .form-control-plaintext { display: inline-block; } .form-inline .input-group, .form-inline .custom-select { width: auto; } .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0; } .form-inline .form-check-input { position: relative; flex-shrink: 0; margin-top: 0; margin-right: 0.25rem; margin-left: 0; } .form-inline .custom-control { align-items: center; justify-content: center; } .form-inline .custom-control-label { margin-bottom: 0; } } .btn { display: inline-block; font-weight: 400; color: #3a383d; text-align: center; vertical-align: middle; -webkit-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 20px; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:hover { color: #3a383d; text-decoration: none; } .btn:focus-visible, .btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .btn.disabled, .btn:disabled { opacity: 0.65; } .btn:not(:disabled):not(.disabled) { cursor: pointer; } a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } .btn-primary { color: #f7f7f5; background-color: #007bff; border-color: #007bff; } .btn-primary:hover { color: #f7f7f5; background-color: rgb(0, 104.55, 216.75); border-color: rgb(0, 98.4, 204); } .btn-primary:focus-visible, .btn-primary.focus { color: #f7f7f5; background-color: rgb(0, 104.55, 216.75); border-color: rgb(0, 98.4, 204); box-shadow: 0 0 0 0.2rem rgba(37.05, 141.6, 253.5, 0.5); } .btn-primary.disabled, .btn-primary:disabled { color: #f7f7f5; background-color: #007bff; border-color: #007bff; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #f7f7f5; background-color: rgb(0, 98.4, 204); border-color: rgb(0, 92.25, 191.25); } .btn-primary:not(:disabled):not(.disabled):active:focus-visible, .btn-primary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-primary.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(37.05, 141.6, 253.5, 0.5); } .btn-secondary { color: #f7f7f5; background-color: #28272d; border-color: #28272d; } .btn-secondary:hover { color: #f7f7f5; background-color: rgb(21.7857142857, 21.2410714286, 24.5089285714); border-color: rgb(15.7142857143, 15.3214285714, 17.6785714286); } .btn-secondary:focus-visible, .btn-secondary.focus { color: #f7f7f5; background-color: rgb(21.7857142857, 21.2410714286, 24.5089285714); border-color: rgb(15.7142857143, 15.3214285714, 17.6785714286); box-shadow: 0 0 0 0.2rem rgba(71.05, 70.2, 75, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { color: #f7f7f5; background-color: #28272d; border-color: #28272d; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #f7f7f5; background-color: rgb(15.7142857143, 15.3214285714, 17.6785714286); border-color: rgb(9.6428571429, 9.4017857143, 10.8482142857); } .btn-secondary:not(:disabled):not(.disabled):active:focus-visible, .btn-secondary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-secondary.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(71.05, 70.2, 75, 0.5); } .btn-success { color: #f7f7f5; background-color: #0c7265; border-color: #0c7265; } .btn-success:hover { color: #f7f7f5; background-color: rgb(8.3571428571, 79.3928571429, 70.3392857143); border-color: rgb(7.1428571429, 67.8571428571, 60.119047619); } .btn-success:focus-visible, .btn-success.focus { color: #f7f7f5; background-color: rgb(8.3571428571, 79.3928571429, 70.3392857143); border-color: rgb(7.1428571429, 67.8571428571, 60.119047619); box-shadow: 0 0 0 0.2rem rgba(47.25, 133.95, 122.6, 0.5); } .btn-success.disabled, .btn-success:disabled { color: #f7f7f5; background-color: #0c7265; border-color: #0c7265; } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #f7f7f5; background-color: rgb(7.1428571429, 67.8571428571, 60.119047619); border-color: rgb(5.9285714286, 56.3214285714, 49.8988095238); } .btn-success:not(:disabled):not(.disabled):active:focus-visible, .btn-success:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-success.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(47.25, 133.95, 122.6, 0.5); } .btn-info { color: #f7f7f5; background-color: #3f8edd; border-color: #3f8edd; } .btn-info:hover { color: #f7f7f5; background-color: rgb(36.9712389381, 122.875, 208.7787610619); border-color: rgb(35.0530973451, 116.5, 197.9469026549); } .btn-info:focus-visible, .btn-info.focus { color: #f7f7f5; background-color: rgb(36.9712389381, 122.875, 208.7787610619); border-color: rgb(35.0530973451, 116.5, 197.9469026549); box-shadow: 0 0 0 0.2rem rgba(90.6, 157.75, 224.6, 0.5); } .btn-info.disabled, .btn-info:disabled { color: #f7f7f5; background-color: #3f8edd; border-color: #3f8edd; } .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #f7f7f5; background-color: rgb(35.0530973451, 116.5, 197.9469026549); border-color: rgb(33.1349557522, 110.125, 187.1150442478); } .btn-info:not(:disabled):not(.disabled):active:focus-visible, .btn-info:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-info.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(90.6, 157.75, 224.6, 0.5); } .btn-warning { color: #f7f7f5; background-color: #b34013; border-color: #b34013; } .btn-warning:hover { color: #f7f7f5; background-color: rgb(144.4204545455, 51.6363636364, 15.3295454545); border-color: rgb(132.8939393939, 47.5151515152, 14.1060606061); } .btn-warning:focus-visible, .btn-warning.focus { color: #f7f7f5; background-color: rgb(144.4204545455, 51.6363636364, 15.3295454545); border-color: rgb(132.8939393939, 47.5151515152, 14.1060606061); box-shadow: 0 0 0 0.2rem rgba(189.2, 91.45, 52.9, 0.5); } .btn-warning.disabled, .btn-warning:disabled { color: #f7f7f5; background-color: #b34013; border-color: #b34013; } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #f7f7f5; background-color: rgb(132.8939393939, 47.5151515152, 14.1060606061); border-color: rgb(121.3674242424, 43.3939393939, 12.8825757576); } .btn-warning:not(:disabled):not(.disabled):active:focus-visible, .btn-warning:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-warning.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(189.2, 91.45, 52.9, 0.5); } .btn-danger { color: #f7f7f5; background-color: #c52042; border-color: #c52042; } .btn-danger:hover { color: #f7f7f5; background-color: rgb(164.0949781659, 26.6550218341, 54.9759825328); border-color: rgb(153.1266375546, 24.8733624454, 51.3013100437); } .btn-danger:focus-visible, .btn-danger.focus { color: #f7f7f5; background-color: rgb(164.0949781659, 26.6550218341, 54.9759825328); border-color: rgb(153.1266375546, 24.8733624454, 51.3013100437); box-shadow: 0 0 0 0.2rem rgba(204.5, 64.25, 92.85, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #f7f7f5; background-color: #c52042; border-color: #c52042; } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #f7f7f5; background-color: rgb(153.1266375546, 24.8733624454, 51.3013100437); border-color: rgb(142.1582969432, 23.0917030568, 47.6266375546); } .btn-danger:not(:disabled):not(.disabled):active:focus-visible, .btn-danger:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-danger.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(204.5, 64.25, 92.85, 0.5); } .btn-light { color: #f7f7f5; background-color: #3a383d; border-color: #3a383d; } .btn-light:hover { color: #f7f7f5; background-color: rgb(39.0384615385, 37.6923076923, 41.0576923077); border-color: rgb(32.7179487179, 31.5897435897, 34.4102564103); } .btn-light:focus-visible, .btn-light.focus { color: #f7f7f5; background-color: rgb(39.0384615385, 37.6923076923, 41.0576923077); border-color: rgb(32.7179487179, 31.5897435897, 34.4102564103); box-shadow: 0 0 0 0.2rem rgba(86.35, 84.65, 88.6, 0.5); } .btn-light.disabled, .btn-light:disabled { color: #f7f7f5; background-color: #3a383d; border-color: #3a383d; } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #f7f7f5; background-color: rgb(32.7179487179, 31.5897435897, 34.4102564103); border-color: rgb(26.3974358974, 25.4871794872, 27.7628205128); } .btn-light:not(:disabled):not(.disabled):active:focus-visible, .btn-light:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-light.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(86.35, 84.65, 88.6, 0.5); } .btn-dark { color: #28272d; background-color: #dcdbd9; border-color: #dcdbd9; } .btn-dark:hover { color: #28272d; background-color: rgb(201.6609589041, 200.1369863014, 197.0890410959); border-color: rgb(195.5479452055, 193.8493150685, 190.4520547945); } .btn-dark:focus-visible, .btn-dark.focus { color: #28272d; background-color: rgb(201.6609589041, 200.1369863014, 197.0890410959); border-color: rgb(195.5479452055, 193.8493150685, 190.4520547945); box-shadow: 0 0 0 0.2rem rgba(193, 192, 191.2, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #28272d; background-color: #dcdbd9; border-color: #dcdbd9; } .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #28272d; background-color: rgb(195.5479452055, 193.8493150685, 190.4520547945); border-color: rgb(189.4349315068, 187.5616438356, 183.8150684932); } .btn-dark:not(:disabled):not(.disabled):active:focus-visible, .btn-dark:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-dark.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(193, 192, 191.2, 0.5); } .btn-outline-primary { color: #007bff; border-color: #007bff; } .btn-outline-primary:hover { color: #f7f7f5; background-color: #007bff; border-color: #007bff; } .btn-outline-primary:focus-visible, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #007bff; background-color: transparent; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #f7f7f5; background-color: #007bff; border-color: #007bff; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-primary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-primary.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .btn-outline-secondary { color: #28272d; border-color: #28272d; } .btn-outline-secondary:hover { color: #f7f7f5; background-color: #28272d; border-color: #28272d; } .btn-outline-secondary:focus-visible, .btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(40, 39, 45, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #28272d; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #f7f7f5; background-color: #28272d; border-color: #28272d; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-secondary.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(40, 39, 45, 0.5); } .btn-outline-success { color: #0c7265; border-color: #0c7265; } .btn-outline-success:hover { color: #f7f7f5; background-color: #0c7265; border-color: #0c7265; } .btn-outline-success:focus-visible, .btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.5); } .btn-outline-success.disabled, .btn-outline-success:disabled { color: #0c7265; background-color: transparent; } .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #f7f7f5; background-color: #0c7265; border-color: #0c7265; } .btn-outline-success:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-success:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-success.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.5); } .btn-outline-info { color: #3f8edd; border-color: #3f8edd; } .btn-outline-info:hover { color: #f7f7f5; background-color: #3f8edd; border-color: #3f8edd; } .btn-outline-info:focus-visible, .btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(63, 142, 221, 0.5); } .btn-outline-info.disabled, .btn-outline-info:disabled { color: #3f8edd; background-color: transparent; } .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { color: #f7f7f5; background-color: #3f8edd; border-color: #3f8edd; } .btn-outline-info:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-info:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-info.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(63, 142, 221, 0.5); } .btn-outline-warning { color: #b34013; border-color: #b34013; } .btn-outline-warning:hover { color: #f7f7f5; background-color: #b34013; border-color: #b34013; } .btn-outline-warning:focus-visible, .btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(179, 64, 19, 0.5); } .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: #b34013; background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #f7f7f5; background-color: #b34013; border-color: #b34013; } .btn-outline-warning:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-warning:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-warning.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(179, 64, 19, 0.5); } .btn-outline-danger { color: #c52042; border-color: #c52042; } .btn-outline-danger:hover { color: #f7f7f5; background-color: #c52042; border-color: #c52042; } .btn-outline-danger:focus-visible, .btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.5); } .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #c52042; background-color: transparent; } .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #f7f7f5; background-color: #c52042; border-color: #c52042; } .btn-outline-danger:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-danger:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-danger.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.5); } .btn-outline-light { color: #3a383d; border-color: #3a383d; } .btn-outline-light:hover { color: #f7f7f5; background-color: #3a383d; border-color: #3a383d; } .btn-outline-light:focus-visible, .btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(58, 56, 61, 0.5); } .btn-outline-light.disabled, .btn-outline-light:disabled { color: #3a383d; background-color: transparent; } .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #f7f7f5; background-color: #3a383d; border-color: #3a383d; } .btn-outline-light:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-light:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-light.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(58, 56, 61, 0.5); } .btn-outline-dark { color: #dcdbd9; border-color: #dcdbd9; } .btn-outline-dark:hover { color: #28272d; background-color: #dcdbd9; border-color: #dcdbd9; } .btn-outline-dark:focus-visible, .btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(220, 219, 217, 0.5); } .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: #dcdbd9; background-color: transparent; } .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #28272d; background-color: #dcdbd9; border-color: #dcdbd9; } .btn-outline-dark:not(:disabled):not(.disabled):active:focus-visible, .btn-outline-dark:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-outline-dark.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.2rem rgba(220, 219, 217, 0.5); } .btn-link { font-weight: 400; color: var(--gl-text-color-link); text-decoration: none; } .btn-link:hover { color: var(--gl-text-color-link); text-decoration: underline; } .btn-link:focus-visible, .btn-link.focus { text-decoration: underline; } .btn-link:disabled, .btn-link.disabled { color: #a5a3a3; pointer-events: none; } .btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 0.5rem; } input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].btn-block { width: 100%; } .fade { transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } .fade:not(.show) { opacity: 0; } .collapse:not(.show) { display: none; } .collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } .collapsing.width { width: 0; height: auto; transition: width 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing.width { transition: none; } } .dropup, .dropright, .dropdown, .dropleft { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #3a383d; text-align: left; list-style: none; background-color: #28272d; background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.25rem; } .dropdown-menu-left { right: auto; left: 0; } .dropdown-menu-right { right: 0; left: auto; } .dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0; border-right: 0.3em solid transparent; border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } .dropup .dropdown-toggle:empty::after { margin-left: 0; } .dropright .dropdown-menu { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: 0.125rem; } .dropright .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } .dropright .dropdown-toggle:empty::after { margin-left: 0; } .dropright .dropdown-toggle::after { vertical-align: 0; } .dropleft .dropdown-menu { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 0.125rem; } .dropleft .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; display: none; } .dropleft .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } .dropleft .dropdown-toggle:empty::after { margin-left: 0; } .dropleft .dropdown-toggle::before { vertical-align: 0; } .dropdown-menu[x-placement^=top], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left] { right: auto; bottom: auto; } .dropdown-divider { height: 0; margin: 4px 0; overflow: hidden; border-top: 1px solid #4d4b4e; } .dropdown-item { display: block; width: 100%; padding: 8px 12px; clear: both; font-weight: 400; color: #ecebea; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item:hover, .dropdown-item:focus-visible { color: rgb(223.8875, 222.25, 220.6125); text-decoration: none; background-color: #4d4b4e; } .dropdown-item.active, .dropdown-item:active { color: #28272d; text-decoration: none; background-color: #007bff; } .dropdown-item.disabled, .dropdown-item:disabled { color: #8a8888; pointer-events: none; background-color: transparent; } .dropdown-menu.show { display: block; } .dropdown-header { display: block; padding: 0.5rem 12px; margin-bottom: 0; font-size: 0.875rem; color: #a5a3a3; white-space: nowrap; } .dropdown-item-text { display: block; padding: 8px 12px; color: #ecebea; } .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover { z-index: 1; } .btn-group > .btn:focus-visible, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus-visible, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1; } .btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; } .btn-toolbar .input-group { width: auto; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: -1px; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after { margin-left: 0; } .dropleft .dropdown-toggle-split::before { margin-right: 0; } .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } .btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } .btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; } .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0; } .btn-group-toggle > .btn input[type=radio], .btn-group-toggle > .btn input[type=checkbox], .btn-group-toggle > .btn-group > .btn input[type=radio], .btn-group-toggle > .btn-group > .btn input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } .input-group > .form-control + .form-control, .input-group > .form-control + .custom-select, .input-group > .form-control + .custom-file, .input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, .input-group > .form-control-plaintext + .custom-file, .input-group > .custom-select + .form-control, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .custom-file, .input-group > .custom-file + .form-control, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .custom-file { margin-left: -1px; } .input-group > .form-control:focus-visible, .input-group > .custom-select:focus-visible, .input-group > .custom-file .custom-file-input:focus-visible ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus-visible { z-index: 4; } .input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .custom-file { display: flex; align-items: center; } .input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group:not(.has-validation) > .form-control:not(:last-child), .input-group:not(.has-validation) > .custom-select:not(:last-child), .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label, .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group.has-validation > .form-control:nth-last-child(n+3), .input-group.has-validation > .custom-select:nth-last-child(n+3), .input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label, .input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group-prepend, .input-group-append { display: flex; } .input-group-prepend .btn, .input-group-append .btn { position: relative; z-index: 2; } .input-group-prepend .btn:focus-visible, .input-group-append .btn:focus-visible { z-index: 3; } .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .input-group-text, .input-group-append .input-group-text + .btn { margin-left: -1px; } .input-group-prepend { margin-right: -1px; } .input-group-append { margin-left: -1px; } .input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #3a383d; text-align: center; white-space: nowrap; background-color: #4d4b4e; border: 1px solid #747273; border-radius: 0.25rem; } .input-group-text input[type=radio], .input-group-text input[type=checkbox] { margin-top: 0; } .input-group-lg > .form-control:not(textarea), .input-group-lg > .custom-select { height: calc(1.5em + 1rem + 2px); } .input-group-lg > .form-control, .input-group-lg > .custom-select, .input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .input-group-sm > .form-control:not(textarea), .input-group-sm > .custom-select { height: calc(1.5em + 0.5rem + 2px); } .input-group-sm > .form-control, .input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .custom-control { position: relative; z-index: 1; display: block; min-height: 1.5rem; padding-left: 1.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .custom-control-inline { display: inline-flex; margin-right: 1rem; } .custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before { color: #28272d; border-color: #007bff; background-color: #007bff; } .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-control-input:focus-visible:not(:checked) ~ .custom-control-label::before { border-color: rgb(127.5, 189, 255); } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #28272d; background-color: rgb(178.5, 215.4, 255); border-color: rgb(178.5, 215.4, 255); } .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { color: #a5a3a3; } .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { background-color: #18171d; } .custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; } .custom-control-label::before { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #28272d; border: 1px solid #8a8888; } .custom-control-label::after { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: 50%/50% 50% no-repeat; } .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328272d' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: #007bff; background-color: #007bff; } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%2328272d' d='M0 2h4'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); } .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); } .custom-radio .custom-control-label::before { border-radius: 50%; } .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2328272d'/%3e%3c/svg%3e"); } .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); } .custom-switch { padding-left: 2.25rem; } .custom-switch .custom-control-label::before { left: -2.25rem; width: 1.75rem; pointer-events: all; border-radius: 0.5rem; } .custom-switch .custom-control-label::after { top: calc(0.25rem + 2px); left: calc(-2.25rem + 2px); width: calc(1rem - 4px); height: calc(1rem - 4px); background-color: #8a8888; border-radius: 0.5rem; transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .custom-switch .custom-control-label::after { transition: none; } } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #28272d; transform: translateX(0.75rem); } .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); } .custom-select { display: inline-block; width: 100%; height: 32px; padding: 0.375rem 1.75rem 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #3a383d; vertical-align: middle; background: #28272d url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23dcdbd9' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; border: 1px solid #747273; border-radius: 0.25rem; appearance: none; } .custom-select:focus-visible { border-color: rgb(127.5, 189, 255); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-select:focus-visible::-ms-value { color: #3a383d; background-color: #28272d; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; padding-right: 0.75rem; background-image: none; } .custom-select:disabled { color: #a5a3a3; background-color: #4d4b4e; } .custom-select::-ms-expand { display: none; } .custom-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #3a383d; } .custom-select-sm { height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.875rem; } .custom-select-lg { height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; font-size: 1.25rem; } .custom-file { position: relative; display: inline-block; width: 100%; height: 32px; margin-bottom: 0; } .custom-file-input { position: relative; z-index: 2; width: 100%; height: 32px; margin: 0; overflow: hidden; opacity: 0; } .custom-file-input:focus-visible ~ .custom-file-label { border-color: rgb(127.5, 189, 255); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { background-color: #18171d; } .custom-file-input:lang(en) ~ .custom-file-label::after { content: "Browse"; } .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } .custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 32px; padding: 0.375rem 0.75rem; overflow: hidden; font-weight: 400; line-height: 1.5; color: #3a383d; background-color: #28272d; border: 1px solid #747273; border-radius: 0.25rem; } .custom-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: #3a383d; content: "Browse"; background-color: #4d4b4e; border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } .custom-range { width: 100%; height: 1.4rem; padding: 0; background-color: transparent; appearance: none; } .custom-range:focus-visible { outline: 0; } .custom-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-range:focus-visible::-ms-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-range::-moz-focus-outer { border: 0; } .custom-range::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: #007bff; border: 0; border-radius: 1rem; -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .custom-range::-webkit-slider-thumb { -webkit-transition: none; transition: none; } } .custom-range::-webkit-slider-thumb:active { background-color: rgb(178.5, 215.4, 255); } .custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #646163; border-color: transparent; border-radius: 1rem; } .custom-range::-moz-range-thumb { appearance: none; width: 1rem; height: 1rem; background-color: #007bff; border: 0; border-radius: 1rem; -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .custom-range::-moz-range-thumb { -moz-transition: none; transition: none; } } .custom-range::-moz-range-thumb:active { background-color: rgb(178.5, 215.4, 255); } .custom-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #646163; border-color: transparent; border-radius: 1rem; } .custom-range::-ms-thumb { appearance: none; width: 1rem; height: 1rem; margin-top: 0; margin-right: 0.2rem; margin-left: 0.2rem; background-color: #007bff; border: 0; border-radius: 1rem; -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .custom-range::-ms-thumb { -ms-transition: none; transition: none; } } .custom-range::-ms-thumb:active { background-color: rgb(178.5, 215.4, 255); } .custom-range::-ms-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: transparent; border-color: transparent; border-width: 0.5rem; } .custom-range::-ms-fill-lower { background-color: #646163; border-radius: 1rem; } .custom-range::-ms-fill-upper { margin-right: 15px; background-color: #646163; border-radius: 1rem; } .custom-range:disabled::-webkit-slider-thumb { background-color: #8a8888; } .custom-range:disabled::-webkit-slider-runnable-track { cursor: default; } .custom-range:disabled::-moz-range-thumb { background-color: #8a8888; } .custom-range:disabled::-moz-range-track { cursor: default; } .custom-range:disabled::-ms-thumb { background-color: #8a8888; } .custom-control-label::before, .custom-file-label, .custom-select { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .custom-control-label::before, .custom-file-label, .custom-select { transition: none; } } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; } .nav-link:hover, .nav-link:focus-visible { text-decoration: none; } .nav-link.disabled { color: #a5a3a3; pointer-events: none; cursor: default; } .nav-tabs { border-bottom: 1px solid #646163; } .nav-tabs .nav-link { margin-bottom: -1px; background-color: transparent; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus-visible { isolation: isolate; border-color: #4d4b4e #4d4b4e #646163; } .nav-tabs .nav-link.disabled { color: #a5a3a3; background-color: transparent; border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #c1bfbe; background-color: #18171d; border-color: #646163 #646163 #18171d; } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .nav-pills .nav-link { background: none; border: 0; border-radius: 0.25rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #28272d; background-color: #007bff; } .nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; } .navbar .container, .navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 0.5rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } .navbar-brand:hover, .navbar-brand:focus-visible { text-decoration: none; } .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar-nav .dropdown-menu { position: static; float: none; } .navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } .navbar-toggler:hover, .navbar-toggler:focus-visible { text-decoration: none; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: 50%/100% 100% no-repeat; } .navbar-nav-scroll { max-height: 75vh; overflow-y: auto; } @media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { padding-right: 0; padding-left: 0; } } @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-sm .navbar-nav { flex-direction: row; } .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { flex-wrap: nowrap; } .navbar-expand-sm .navbar-nav-scroll { overflow: visible; } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-sm .navbar-toggler { display: none; } } @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { padding-right: 0; padding-left: 0; } } @media (min-width: 768px) { .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-md .navbar-nav { flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { flex-wrap: nowrap; } .navbar-expand-md .navbar-nav-scroll { overflow: visible; } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; } } @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { padding-right: 0; padding-left: 0; } } @media (min-width: 992px) { .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { flex-wrap: nowrap; } .navbar-expand-lg .navbar-nav-scroll { overflow: visible; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } } @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { padding-right: 0; padding-left: 0; } } @media (min-width: 1200px) { .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-xl .navbar-nav { flex-direction: row; } .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { flex-wrap: nowrap; } .navbar-expand-xl .navbar-nav-scroll { overflow: visible; } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-xl .navbar-toggler { display: none; } } .navbar-expand > .container, .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl { padding-right: 0; padding-left: 0; } .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand .navbar-nav { flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand > .container, .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl { flex-wrap: nowrap; } .navbar-expand .navbar-nav-scroll { overflow: visible; } .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand .navbar-toggler { display: none; } .navbar-light .navbar-brand { color: rgba(255, 255, 255, 0.9); } .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus-visible { color: rgba(255, 255, 255, 0.9); } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus-visible { color: rgba(255, 255, 255, 0.7); } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.3); } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgba(255, 255, 255, 0.9); } .navbar-light .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-light .navbar-text { color: rgba(255, 255, 255, 0.5); } .navbar-light .navbar-text a { color: rgba(255, 255, 255, 0.9); } .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus-visible { color: rgba(255, 255, 255, 0.9); } .navbar-dark .navbar-brand { color: #28272d; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus-visible { color: #28272d; } .navbar-dark .navbar-nav .nav-link { color: rgba(40, 39, 45, 0.5); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus-visible { color: rgba(40, 39, 45, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(40, 39, 45, 0.25); } .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #28272d; } .navbar-dark .navbar-toggler { color: rgba(40, 39, 45, 0.5); border-color: rgba(40, 39, 45, 0.1); } .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2840, 39, 45, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-dark .navbar-text { color: rgba(40, 39, 45, 0.5); } .navbar-dark .navbar-text a { color: #28272d; } .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus-visible { color: #28272d; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #28272d; background-clip: border-box; border: 1px solid #dcdbd9; border-radius: 0.25rem; } .card > hr { margin-right: 0; margin-left: 0; } .card > .list-group { border-top: inherit; border-bottom: inherit; } .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0; } .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; } .card-title { margin-bottom: 0.75rem; } .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; } .card-text:last-child { margin-bottom: 0; } .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1.25rem; } .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: #28272d; border-bottom: 1px solid #dcdbd9; } .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } .card-footer { padding: 0.75rem 1.25rem; background-color: #28272d; border-top: 1px solid #dcdbd9; } .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } .card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } .card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; border-radius: calc(0.25rem - 1px); } .card-img, .card-img-top, .card-img-bottom { flex-shrink: 0; width: 100%; } .card-img, .card-img-top { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .accordion { overflow-anchor: none; } .accordion > .card { overflow: hidden; } .accordion > .card:not(:last-of-type) { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .accordion > .card:not(:first-of-type) { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion > .card > .card-header { border-radius: 0; margin-bottom: -1px; } .breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: #4d4b4e; border-radius: 0.25rem; } .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0.5rem; color: #a5a3a3; content: "/"; } .breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; text-decoration: none; } .breadcrumb-item.active { color: #a5a3a3; } .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem; } .page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: var(--gl-text-color-link); background-color: #28272d; border: 1px solid #646163; } .page-link:hover { z-index: 2; color: var(--gl-text-color-link); text-decoration: none; background-color: #4d4b4e; border-color: #646163; } .page-link:focus-visible { z-index: 3; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .page-item.active .page-link { z-index: 3; color: #28272d; background-color: #007bff; border-color: #007bff; } .page-item.disabled .page-link { color: #a5a3a3; pointer-events: none; cursor: auto; background-color: #28272d; border-color: #646163; } .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; } .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } .badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .badge { transition: none; } } a.badge:hover, a.badge:focus-visible { text-decoration: none; } .badge:empty { display: none; } .btn .badge { position: relative; top: -1px; } .badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; } .badge-primary { color: #f7f7f5; background-color: #007bff; } a.badge-primary:hover, a.badge-primary:focus-visible { color: #f7f7f5; background-color: rgb(0, 98.4, 204); } a.badge-primary:focus-visible, a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .badge-secondary { color: #f7f7f5; background-color: #28272d; } a.badge-secondary:hover, a.badge-secondary:focus-visible { color: #f7f7f5; background-color: rgb(15.7142857143, 15.3214285714, 17.6785714286); } a.badge-secondary:focus-visible, a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(40, 39, 45, 0.5); } .badge-success { color: #f7f7f5; background-color: #0c7265; } a.badge-success:hover, a.badge-success:focus-visible { color: #f7f7f5; background-color: rgb(7.1428571429, 67.8571428571, 60.119047619); } a.badge-success:focus-visible, a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.5); } .badge-info { color: #f7f7f5; background-color: #3f8edd; } a.badge-info:hover, a.badge-info:focus-visible { color: #f7f7f5; background-color: rgb(35.0530973451, 116.5, 197.9469026549); } a.badge-info:focus-visible, a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(63, 142, 221, 0.5); } .badge-warning { color: #f7f7f5; background-color: #b34013; } a.badge-warning:hover, a.badge-warning:focus-visible { color: #f7f7f5; background-color: rgb(132.8939393939, 47.5151515152, 14.1060606061); } a.badge-warning:focus-visible, a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(179, 64, 19, 0.5); } .badge-danger { color: #f7f7f5; background-color: #c52042; } a.badge-danger:hover, a.badge-danger:focus-visible { color: #f7f7f5; background-color: rgb(153.1266375546, 24.8733624454, 51.3013100437); } a.badge-danger:focus-visible, a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.5); } .badge-light { color: #f7f7f5; background-color: #3a383d; } a.badge-light:hover, a.badge-light:focus-visible { color: #f7f7f5; background-color: rgb(32.7179487179, 31.5897435897, 34.4102564103); } a.badge-light:focus-visible, a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(58, 56, 61, 0.5); } .badge-dark { color: #28272d; background-color: #dcdbd9; } a.badge-dark:hover, a.badge-dark:focus-visible { color: #28272d; background-color: rgb(195.5479452055, 193.8493150685, 190.4520547945); } a.badge-dark:focus-visible, a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(220, 219, 217, 0.5); } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-heading { color: inherit; } .alert-link { font-weight: 600; } .alert-dismissible { padding-right: 4rem; } .alert-dismissible .close { position: absolute; top: 0; right: 0; z-index: 2; padding: 0.75rem 1.25rem; color: inherit; } .alert-primary { color: rgb(122.4, 186.36, 255); background-color: rgb(32, 55.8, 87); border-color: rgb(28.8, 62.52, 103.8); } .alert-primary hr { border-top-color: rgb(23.2615384615, 50.4969230769, 83.8384615385); } .alert-primary .alert-link { color: rgb(71.4, 159.96, 255); } .alert-secondary { color: rgb(143.2, 142.68, 145.8); background-color: #28272d; border-color: #28272d; } .alert-secondary hr { border-top-color: rgb(27.8571428571, 27.1607142857, 31.3392857143); } .alert-secondary .alert-link { color: rgb(117.6250704225, 117.0676056338, 120.4123943662); } .alert-success { color: rgb(128.64, 181.68, 174.92); background-color: rgb(34.4, 54, 56.2); border-color: rgb(32.16, 60, 60.68); } .alert-success hr { border-top-color: rgb(23.3267384748, 43.5200344679, 44.0132615252); } .alert-success .alert-link { color: rgb(96.3665625, 162.9534375, 154.466875); } .alert-info { color: rgb(155.16, 196.24, 237.32); background-color: rgb(44.6, 59.6, 80.2); border-color: rgb(46.44, 67.84, 94.28); } .alert-info hr { border-top-color: rgb(38.0245650938, 55.5466515065, 77.1954349062); } .alert-info .alert-link { color: rgb(111.8325663717, 170.74, 229.6474336283); } .alert-warning { color: rgb(215.48, 155.68, 132.28); background-color: rgb(67.8, 44, 39.8); border-color: rgb(78.92, 46, 37.72); } .alert-warning hr { border-top-color: rgb(61.666399177, 35.9434156379, 29.473600823); } .alert-warning .alert-link { color: rgb(203.0569230769, 124.4588461538, 93.7030769231); } .alert-danger { color: rgb(224.84, 139.04, 156.72); background-color: rgb(71.4, 37.6, 49.2); border-color: rgb(83.96, 37.04, 50.88); } .alert-danger hr { border-top-color: rgb(66.2659504132, 29.2340495868, 40.1573553719); } .alert-danger .alert-link { color: rgb(214.3133096085, 98.5666903915, 122.4175088968); } .alert-light { color: rgb(152.56, 151.52, 154.12); background-color: rgb(43.6, 42.4, 48.2); border-color: rgb(45.04, 43.76, 49.48); } .alert-light hr { border-top-color: rgb(32.7221106821, 31.7921750322, 35.9478249678); } .alert-light .alert-link { color: rgb(126.9960305344, 125.7001526718, 128.9398473282); } .alert-dark { color: rgb(236.8, 236.28, 235.24); background-color: rgb(76, 75, 79.4); border-color: rgb(90.4, 89.4, 93.16); } .alert-dark hr { border-top-color: rgb(77.7729184926, 76.9125985977, 80.1474014023); } .alert-dark .alert-link { color: rgb(212.3479452055, 211.1293150685, 208.6920547945); } @keyframes progress-bar-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } .progress { display: flex; height: 1rem; overflow: hidden; line-height: 0; font-size: 0.75rem; background-color: #4d4b4e; border-radius: 0.25rem; } .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #28272d; text-align: center; white-space: nowrap; background-color: #007bff; transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } } .progress-bar-striped { background-image: linear-gradient(45deg, rgba(40, 39, 45, 0.15) 25%, transparent 25%, transparent 50%, rgba(40, 39, 45, 0.15) 50%, rgba(40, 39, 45, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .progress-bar-animated { animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } .media { display: flex; align-items: flex-start; } .media-body { flex: 1; } .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.25rem; } .list-group-item-action { width: 100%; color: #c1bfbe; text-align: inherit; } .list-group-item-action:hover, .list-group-item-action:focus-visible { z-index: 1; color: #c1bfbe; text-decoration: none; background-color: #3a383d; } .list-group-item-action:active { color: #3a383d; background-color: #4d4b4e; } .list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; background-color: #28272d; border: 1px solid rgba(255, 255, 255, 0.125); } .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .list-group-item.disabled, .list-group-item:disabled { color: #a5a3a3; pointer-events: none; background-color: #28272d; } .list-group-item.active { z-index: 2; color: #28272d; background-color: #007bff; border-color: #007bff; } .list-group-item + .list-group-item { border-top-width: 0; } .list-group-item + .list-group-item.active { margin-top: -1px; border-top-width: 1px; } .list-group-flush { border-radius: 0; } .list-group-flush > .list-group-item { border-width: 0 0 1px; } .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } .list-group-item-primary { color: rgb(122.4, 186.36, 255); background-color: rgb(28.8, 62.52, 103.8); } .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus-visible { color: rgb(122.4, 186.36, 255); background-color: rgb(23.2615384615, 50.4969230769, 83.8384615385); } .list-group-item-primary.list-group-item-action.active { color: #28272d; background-color: rgb(122.4, 186.36, 255); border-color: rgb(122.4, 186.36, 255); } .list-group-item-secondary { color: rgb(143.2, 142.68, 145.8); background-color: #28272d; } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus-visible { color: rgb(143.2, 142.68, 145.8); background-color: rgb(27.8571428571, 27.1607142857, 31.3392857143); } .list-group-item-secondary.list-group-item-action.active { color: #28272d; background-color: rgb(143.2, 142.68, 145.8); border-color: rgb(143.2, 142.68, 145.8); } .list-group-item-success { color: rgb(128.64, 181.68, 174.92); background-color: rgb(32.16, 60, 60.68); } .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus-visible { color: rgb(128.64, 181.68, 174.92); background-color: rgb(23.3267384748, 43.5200344679, 44.0132615252); } .list-group-item-success.list-group-item-action.active { color: #28272d; background-color: rgb(128.64, 181.68, 174.92); border-color: rgb(128.64, 181.68, 174.92); } .list-group-item-info { color: rgb(155.16, 196.24, 237.32); background-color: rgb(46.44, 67.84, 94.28); } .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus-visible { color: rgb(155.16, 196.24, 237.32); background-color: rgb(38.0245650938, 55.5466515065, 77.1954349062); } .list-group-item-info.list-group-item-action.active { color: #28272d; background-color: rgb(155.16, 196.24, 237.32); border-color: rgb(155.16, 196.24, 237.32); } .list-group-item-warning { color: rgb(215.48, 155.68, 132.28); background-color: rgb(78.92, 46, 37.72); } .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus-visible { color: rgb(215.48, 155.68, 132.28); background-color: rgb(61.666399177, 35.9434156379, 29.473600823); } .list-group-item-warning.list-group-item-action.active { color: #28272d; background-color: rgb(215.48, 155.68, 132.28); border-color: rgb(215.48, 155.68, 132.28); } .list-group-item-danger { color: rgb(224.84, 139.04, 156.72); background-color: rgb(83.96, 37.04, 50.88); } .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus-visible { color: rgb(224.84, 139.04, 156.72); background-color: rgb(66.2659504132, 29.2340495868, 40.1573553719); } .list-group-item-danger.list-group-item-action.active { color: #28272d; background-color: rgb(224.84, 139.04, 156.72); border-color: rgb(224.84, 139.04, 156.72); } .list-group-item-light { color: rgb(152.56, 151.52, 154.12); background-color: rgb(45.04, 43.76, 49.48); } .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus-visible { color: rgb(152.56, 151.52, 154.12); background-color: rgb(32.7221106821, 31.7921750322, 35.9478249678); } .list-group-item-light.list-group-item-action.active { color: #28272d; background-color: rgb(152.56, 151.52, 154.12); border-color: rgb(152.56, 151.52, 154.12); } .list-group-item-dark { color: rgb(236.8, 236.28, 235.24); background-color: rgb(90.4, 89.4, 93.16); } .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus-visible { color: rgb(236.8, 236.28, 235.24); background-color: rgb(77.7729184926, 76.9125985977, 80.1474014023); } .list-group-item-dark.list-group-item-action.active { color: #28272d; background-color: rgb(236.8, 236.28, 235.24); border-color: rgb(236.8, 236.28, 235.24); } .close { float: right; font-size: 1.5rem; font-weight: 600; line-height: 1; color: #fff; text-shadow: 0 1px 0 #28272d; opacity: 0.5; } .close:hover { color: #fff; text-decoration: none; } .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus-visible { opacity: 0.75; } button.close { padding: 0; background-color: transparent; border: 0; } a.close.disabled { pointer-events: none; } .modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } .modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); } .modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); height: min-content; content: ""; } .modal-dialog-centered.modal-dialog-scrollable { flex-direction: column; justify-content: center; height: 100%; } .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #28272d; background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.3rem; outline: 0; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.64; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #c1bfbe; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } .modal-header .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } .modal-title { margin-bottom: 0; line-height: 1.25rem; } .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #c1bfbe; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } .modal-footer > * { margin: 0.25rem; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } .modal-dialog-centered::before { height: calc(100vh - 3.5rem); height: min-content; } .modal-sm { max-width: 300px; } } @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } } @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } } .tooltip { position: absolute; z-index: 1070; display: block; margin: 0; font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; white-space: normal; word-spacing: normal; line-break: auto; font-size: 0.75rem; word-wrap: break-word; opacity: 0; } .tooltip.show { opacity: 1; } .tooltip .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; } .tooltip .arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-tooltip-top, .bs-tooltip-auto[x-placement^=top] { padding: 0.5rem 0; } .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^=top] .arrow { bottom: 0; } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { top: 0; border-width: 0.5rem 0.5rem 0; border-top-color: #dcdbd9; } .bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] { padding: 0 0.5rem; } .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^=right] .arrow { left: 0; width: 0.5rem; height: 1rem; } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before { right: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #dcdbd9; } .bs-tooltip-bottom, .bs-tooltip-auto[x-placement^=bottom] { padding: 0.5rem 0; } .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^=bottom] .arrow { top: 0; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { bottom: 0; border-width: 0 0.5rem 0.5rem; border-bottom-color: #dcdbd9; } .bs-tooltip-left, .bs-tooltip-auto[x-placement^=left] { padding: 0 0.5rem; } .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^=left] .arrow { right: 0; width: 0.5rem; height: 1rem; } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before { left: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #dcdbd9; } .tooltip-inner { max-width: 200px; padding: 0.5rem 0.75rem; color: #18171d; text-align: center; background-color: #dcdbd9; border-radius: 0.25rem; } .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: block; max-width: 300px; font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; white-space: normal; word-spacing: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-clip: padding-box; border: 1px solid #dcdbd9; } .popover .arrow { position: absolute; display: block; width: 0.5rem; height: 0.25rem; margin: 0 0.3rem; } .popover .arrow::before, .popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } .bs-popover-top, .bs-popover-auto[x-placement^=top] { margin-bottom: 0.25rem; } .bs-popover-top > .arrow, .bs-popover-auto[x-placement^=top] > .arrow { bottom: calc(-0.25rem - 1px); } .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before { bottom: 0; border-width: 0.25rem 0.25rem 0; } .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after { bottom: 1px; border-width: 0.25rem 0.25rem 0; } .bs-popover-right, .bs-popover-auto[x-placement^=right] { margin-left: 0.25rem; } .bs-popover-right > .arrow, .bs-popover-auto[x-placement^=right] > .arrow { left: calc(-0.25rem - 1px); width: 0.25rem; height: 0.5rem; margin: 0.3rem 0; } .bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^=right] > .arrow::before { left: 0; border-width: 0.25rem 0.25rem 0.25rem 0; border-right-color: #dcdbd9; } .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^=right] > .arrow::after { left: 1px; border-width: 0.25rem 0.25rem 0.25rem 0; } .bs-popover-bottom, .bs-popover-auto[x-placement^=bottom] { margin-top: 0.25rem; } .bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^=bottom] > .arrow { top: calc(-0.25rem - 1px); } .bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before { top: 0; border-width: 0 0.25rem 0.25rem 0.25rem; border-bottom-color: #dcdbd9; } .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after { top: 1px; border-width: 0 0.25rem 0.25rem 0.25rem; } .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before { position: absolute; top: 0; left: 50%; display: block; width: 0.5rem; margin-left: -0.25rem; content: ""; border-bottom: 1px solid rgb(32.7142857143, 31.8964285714, 36.8035714286); } .bs-popover-left, .bs-popover-auto[x-placement^=left] { margin-right: 0.25rem; } .bs-popover-left > .arrow, .bs-popover-auto[x-placement^=left] > .arrow { right: calc(-0.25rem - 1px); width: 0.25rem; height: 0.5rem; margin: 0.3rem 0; } .bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^=left] > .arrow::before { right: 0; border-width: 0.25rem 0 0.25rem 0.25rem; border-left-color: #dcdbd9; } .bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^=left] > .arrow::after { right: 1px; border-width: 0.25rem 0 0.25rem 0.25rem; } .popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0; font-size: 1rem; color: #3a383d; border-bottom: 1px solid rgb(20.5714285714, 20.0571428571, 23.1428571429); } .popover-header:empty { display: none; } .popover-body { padding: 0.5rem 0.75rem; color: #3a383d; } @media print { *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; } a:not(.btn) { text-decoration: underline; } abbr[title]::after { content: " (" attr(title) ")"; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #8a8888; page-break-inside: avoid; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } @page { size: a3; } body { min-width: 992px !important; } .container { min-width: 992px !important; } .navbar { display: none; } .badge { border: 1px solid #fff; } .table { border-collapse: collapse !important; } .table td, .table th { background-color: #28272d !important; } .table-bordered th, .table-bordered td { border: 1px solid #646163 !important; } .table-dark { color: inherit; } .table-dark th, .table-dark td, .table-dark thead th, .table-dark tbody + tbody { border-color: #dcdbd9; } .table .thead-dark th { color: inherit; border-color: #dcdbd9; } } .bv-no-focus-ring:focus-visible { outline: none; } .dropdown:not(.dropleft) .dropdown-toggle.dropdown-toggle-no-caret::after { display: none !important; } .dropdown.dropleft .dropdown-toggle.dropdown-toggle-no-caret::before { display: none !important; } .dropdown .dropdown-menu:focus-visible { outline: none; } .b-dropdown-form { display: inline-block; padding: 8px 12px; width: 100%; clear: both; font-weight: 400; } .b-dropdown-form:focus-visible { outline: 1px dotted !important; outline: 5px auto -webkit-focus-ring-color !important; } .b-dropdown-form.disabled, .b-dropdown-form:disabled { outline: 0 !important; color: #8a8888; pointer-events: none; } .b-dropdown-text { display: inline-block; padding: 8px 12px; margin-bottom: 0; width: 100%; clear: both; font-weight: lighter; } .modal-backdrop { opacity: 0.64; } .popover.b-popover { display: block; opacity: 1; outline: 0; } .popover.b-popover.fade:not(.show) { opacity: 0; } .popover.b-popover.show { opacity: 1; } .table.b-table.b-table-fixed { table-layout: fixed; } .table.b-table.b-table-no-border-collapse { border-collapse: separate; border-spacing: 0; } .table.b-table[aria-busy=true] { opacity: 1; } .table.b-table > tbody > tr.b-table-details > td { border-top: none !important; } .table.b-table > caption { caption-side: bottom; } .table.b-table.b-table-caption-top > caption { caption-side: top !important; } .table.b-table > tbody > .table-active, .table.b-table > tbody > .table-active > th, .table.b-table > tbody > .table-active > td { background-color: rgba(255, 255, 255, 0.075); } .table.b-table.table-hover > tbody > tr.table-active:hover td, .table.b-table.table-hover > tbody > tr.table-active:hover th { color: #3a383d; background-image: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075)); background-repeat: no-repeat; } .table.b-table > tbody > .bg-active, .table.b-table > tbody > .bg-active > th, .table.b-table > tbody > .bg-active > td { background-color: rgba(40, 39, 45, 0.075) !important; } .table.b-table.table-hover.table-dark > tbody > tr.bg-active:hover td, .table.b-table.table-hover.table-dark > tbody > tr.bg-active:hover th { color: #28272d; background-image: linear-gradient(rgba(40, 39, 45, 0.075), rgba(40, 39, 45, 0.075)); background-repeat: no-repeat; } .b-table-sticky-header, .table-responsive { margin-bottom: 0.5rem; } .b-table-sticky-header > .table, .table-responsive > .table { margin-bottom: 0; } .b-table-sticky-header { overflow-y: auto; max-height: 300px; } @media print { .b-table-sticky-header { overflow-y: visible !important; max-height: none !important; } } @supports (position: sticky) { .b-table-sticky-header > .table.b-table > thead > tr > th { position: sticky; top: 0; z-index: 2; } .b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column, .b-table-sticky-header > .table.b-table > tbody > tr > .b-table-sticky-column, .b-table-sticky-header > .table.b-table > tfoot > tr > .b-table-sticky-column, .table-responsive > .table.b-table > thead > tr > .b-table-sticky-column, .table-responsive > .table.b-table > tbody > tr > .b-table-sticky-column, .table-responsive > .table.b-table > tfoot > tr > .b-table-sticky-column { position: sticky; left: 0; } .b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column, .table-responsive > .table.b-table > thead > tr > .b-table-sticky-column { z-index: 5; } .b-table-sticky-header > .table.b-table > tbody > tr > .b-table-sticky-column, .b-table-sticky-header > .table.b-table > tfoot > tr > .b-table-sticky-column, .table-responsive > .table.b-table > tbody > tr > .b-table-sticky-column, .table-responsive > .table.b-table > tfoot > tr > .b-table-sticky-column { z-index: 2; } .table.b-table > thead > tr > .table-b-table-default, .table.b-table > tbody > tr > .table-b-table-default, .table.b-table > tfoot > tr > .table-b-table-default { color: #3a383d; background-color: #18171d; } .table.b-table.table-dark > thead > tr > .bg-b-table-default, .table.b-table.table-dark > tbody > tr > .bg-b-table-default, .table.b-table.table-dark > tfoot > tr > .bg-b-table-default { color: #28272d; background-color: #dcdbd9; } .table.b-table.table-striped > tbody > tr:nth-of-type(odd) > .table-b-table-default { background-image: linear-gradient(var(--gl-background-color-subtle), var(--gl-background-color-subtle)); background-repeat: no-repeat; } .table.b-table.table-striped.table-dark > tbody > tr:nth-of-type(odd) > .bg-b-table-default { background-image: linear-gradient(rgba(40, 39, 45, 0.05), rgba(40, 39, 45, 0.05)); background-repeat: no-repeat; } .table.b-table.table-hover > tbody > tr:hover > .table-b-table-default { color: #3a383d; background-image: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075)); background-repeat: no-repeat; } .table.b-table.table-hover.table-dark > tbody > tr:hover > .bg-b-table-default { color: #28272d; background-image: linear-gradient(rgba(40, 39, 45, 0.075), rgba(40, 39, 45, 0.075)); background-repeat: no-repeat; } } .table.b-table > thead > tr > [aria-sort], .table.b-table > tfoot > tr > [aria-sort] { cursor: pointer; background-image: none; background-repeat: no-repeat; background-size: 0.65em 1em; } .table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left), .table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) { background-position: right calc(0.75rem / 2) center; padding-right: calc(0.75rem + 0.65em); } .table.b-table > thead > tr > [aria-sort].b-table-sort-icon-left, .table.b-table > tfoot > tr > [aria-sort].b-table-sort-icon-left { background-position: left calc(0.75rem / 2) center; padding-left: calc(0.75rem + 0.65em); } .table.b-table > thead > tr > [aria-sort=none], .table.b-table > tfoot > tr > [aria-sort=none] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table > thead > tr > [aria-sort=ascending], .table.b-table > tfoot > tr > [aria-sort=ascending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table > thead > tr > [aria-sort=descending], .table.b-table > tfoot > tr > [aria-sort=descending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table.table-dark > thead > tr > [aria-sort=none], .table.b-table.table-dark > tfoot > tr > [aria-sort=none], .table.b-table > .thead-dark > tr > [aria-sort=none] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table.table-dark > thead > tr > [aria-sort=ascending], .table.b-table.table-dark > tfoot > tr > [aria-sort=ascending], .table.b-table > .thead-dark > tr > [aria-sort=ascending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table.table-dark > thead > tr > [aria-sort=descending], .table.b-table.table-dark > tfoot > tr > [aria-sort=descending], .table.b-table > .thead-dark > tr > [aria-sort=descending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table > thead > tr > .table-dark[aria-sort=none], .table.b-table > tfoot > tr > .table-dark[aria-sort=none] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table > thead > tr > .table-dark[aria-sort=ascending], .table.b-table > tfoot > tr > .table-dark[aria-sort=ascending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table > thead > tr > .table-dark[aria-sort=descending], .table.b-table > tfoot > tr > .table-dark[aria-sort=descending] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); } .table.b-table.table-sm > thead > tr > [aria-sort]:not(.b-table-sort-icon-left), .table.b-table.table-sm > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) { background-position: right calc(0.3rem / 2) center; padding-right: calc(0.3rem + 0.65em); } .table.b-table.table-sm > thead > tr > [aria-sort].b-table-sort-icon-left, .table.b-table.table-sm > tfoot > tr > [aria-sort].b-table-sort-icon-left { background-position: left calc(0.3rem / 2) center; padding-left: calc(0.3rem + 0.65em); } .table.b-table.b-table-selectable:not(.b-table-selectable-no-click) > tbody > tr { cursor: pointer; } .table.b-table.b-table-selectable:not(.b-table-selectable-no-click).b-table-selecting.b-table-select-range > tbody > tr { -webkit-user-select: none; user-select: none; } @container (width < 576px) { :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm { display: block; width: 100%; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > caption, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > th { display: block; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > thead, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tfoot { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > thead > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > thead > tr.b-table-bottom-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > caption { caption-side: top !important; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr.top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr.bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { border-top-width: 3px; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm { display: block; width: 100%; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > caption, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > th { display: block; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > thead, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tfoot { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > thead > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > thead > tr.b-table-bottom-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > caption { caption-side: top !important; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr.top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr.bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { border-top-width: 3px; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @container (width < 768px) { :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md { display: block; width: 100%; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > caption, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > th { display: block; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > thead, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tfoot { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > thead > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > thead > tr.b-table-bottom-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tfoot > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tfoot > tr.b-table-bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > caption { caption-side: top !important; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr.top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr.bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > :first-child { border-top-width: 3px; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md { display: block; width: 100%; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > caption, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > th { display: block; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > thead, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tfoot { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > thead > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > thead > tr.b-table-bottom-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tfoot > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tfoot > tr.b-table-bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > caption { caption-side: top !important; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr.top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr.bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > :first-child { border-top-width: 3px; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @container (width < 992px) { :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg { display: block; width: 100%; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > caption, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > th { display: block; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > thead, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tfoot { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > thead > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > thead > tr.b-table-bottom-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > caption { caption-side: top !important; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr.top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr.bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > :first-child { border-top-width: 3px; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @media (width < 992px) { :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg { display: block; width: 100%; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > caption, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > th { display: block; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > thead, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tfoot { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > thead > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > thead > tr.b-table-bottom-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > caption { caption-side: top !important; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr.top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr.bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > :first-child { border-top-width: 3px; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @container (width < 1200px) { :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl { display: block; width: 100%; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > caption, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > th { display: block; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > thead, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tfoot { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > thead > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > thead > tr.b-table-bottom-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > caption { caption-side: top !important; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr.top-row, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr.bottom-row { display: none; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > :first-child { border-top-width: 3px; } :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + td, :where(html.with-gl-container-queries) .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + th { border-top-width: 3px; } } @media (width < 1200px) { :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl { display: block; width: 100%; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > caption, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > th { display: block; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > thead, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tfoot { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > thead > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > thead > tr.b-table-bottom-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > caption { caption-side: top !important; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr.top-row, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr.bottom-row { display: none; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > :first-child { border-top-width: 3px; } :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + td, :where(html:not(.with-gl-container-queries)) .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + th { border-top-width: 3px; } } .table.b-table.b-table-stacked { display: block; width: 100%; } .table.b-table.b-table-stacked > caption, .table.b-table.b-table-stacked > tbody, .table.b-table.b-table-stacked > tbody > tr, .table.b-table.b-table-stacked > tbody > tr > td, .table.b-table.b-table-stacked > tbody > tr > th { display: block; } .table.b-table.b-table-stacked > thead, .table.b-table.b-table-stacked > tfoot { display: none; } .table.b-table.b-table-stacked > thead > tr.b-table-top-row, .table.b-table.b-table-stacked > thead > tr.b-table-bottom-row, .table.b-table.b-table-stacked > tfoot > tr.b-table-top-row, .table.b-table.b-table-stacked > tfoot > tr.b-table-bottom-row { display: none; } .table.b-table.b-table-stacked > caption { caption-side: top !important; } .table.b-table.b-table-stacked > tbody > tr > [data-label]::before { content: attr(data-label); width: 40%; float: left; text-align: right; overflow-wrap: break-word; font-weight: bold; font-style: normal; padding: 0 calc(1rem / 2) 0 0; margin: 0; } .table.b-table.b-table-stacked > tbody > tr > [data-label]::after { display: block; clear: both; content: ""; } .table.b-table.b-table-stacked > tbody > tr > [data-label] > div { display: inline-block; width: calc(100% - 40%); padding: 0 0 0 calc(1rem / 2); margin: 0; } .table.b-table.b-table-stacked > tbody > tr.top-row, .table.b-table.b-table-stacked > tbody > tr.bottom-row { display: none; } .table.b-table.b-table-stacked > tbody > tr > :first-child { border-top-width: 3px; } .table.b-table.b-table-stacked > tbody > tr > [rowspan] + td, .table.b-table.b-table-stacked > tbody > tr > [rowspan] + th { border-top-width: 3px; } .tooltip.b-tooltip { display: block; opacity: 1; outline: 0; } .tooltip.b-tooltip.fade:not(.show) { opacity: 0; } .tooltip.b-tooltip.show { opacity: 1; } .tooltip.b-tooltip.noninteractive { pointer-events: none; } .tooltip.b-tooltip .arrow { margin: 0 0.25rem; } .tooltip.b-tooltip.bs-tooltip-right .arrow, .tooltip.b-tooltip.bs-tooltip-auto[x-placement^=right] .arrow, .tooltip.b-tooltip.bs-tooltip-left .arrow, .tooltip.b-tooltip.bs-tooltip-auto[x-placement^=left] .arrow { margin: 0.25rem 0; } /** * Do not edit directly, this file was auto-generated. */ :root, .gl-light-scope { --gl-border-radius-full: 9999px; --gl-color-alpha-0: rgba(0, 0, 0, 0); --gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02); --gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04); --gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06); --gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08); --gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16); --gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24); --gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4); --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02); --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04); --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06); --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08); --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16); --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24); --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36); --gl-color-alpha-light-40: rgba(255, 255, 255, 0.4); --gl-color-blue-50: #e8f2fd; --gl-color-blue-100: #c8e0f9; --gl-color-blue-200: #9dc8f2; --gl-color-blue-300: #64a7e9; --gl-color-blue-400: #3f8edd; --gl-color-blue-500: #1f73ca; --gl-color-blue-600: #2566b5; --gl-color-blue-700: #27599f; --gl-color-blue-800: #254581; --gl-color-blue-900: #1f3166; --gl-color-blue-950: #1d2153; --gl-color-brand-white: #fff; --gl-color-brand-charcoal: #171321; --gl-color-brand-orange-01g: #ffd1bf; --gl-color-brand-orange-01p: #fca326; --gl-color-brand-orange-02p: #fc6d26; --gl-color-brand-orange-03p: #e24329; --gl-color-brand-purple-01g: #ceb3ef; --gl-color-brand-purple-01p: #a989f5; --gl-color-brand-purple-02p: #7759c2; --gl-color-brand-gray-01: #d1d0d3; --gl-color-brand-gray-02: #a2a1a6; --gl-color-brand-gray-03: #74717a; --gl-color-brand-gray-04: #45424d; --gl-color-brand-gray-05: #2b2838; --gl-color-brand-pink-01g: #ffb9c9; --gl-color-data-green-50: #ddfab7; --gl-color-data-green-100: #c6ed94; --gl-color-data-green-200: #b0d97b; --gl-color-data-green-300: #94c25e; --gl-color-data-green-400: #81ac41; --gl-color-data-green-500: #619025; --gl-color-data-green-600: #4e7f0e; --gl-color-data-green-700: #366800; --gl-color-data-green-800: #275600; --gl-color-data-green-900: #1a4500; --gl-color-data-green-950: #133a03; --gl-color-data-aqua-50: #b5fefd; --gl-color-data-aqua-100: #93f2ef; --gl-color-data-aqua-200: #5edee3; --gl-color-data-aqua-300: #32c5d2; --gl-color-data-aqua-400: #00acc4; --gl-color-data-aqua-500: #0090b1; --gl-color-data-aqua-600: #007b9b; --gl-color-data-aqua-700: #006381; --gl-color-data-aqua-800: #00516c; --gl-color-data-aqua-900: #004059; --gl-color-data-aqua-950: #00344b; --gl-color-data-blue-50: #e9ebff; --gl-color-data-blue-100: #d2dcff; --gl-color-data-blue-200: #b7c6ff; --gl-color-data-blue-300: #97acff; --gl-color-data-blue-400: #7992f5; --gl-color-data-blue-500: #617ae2; --gl-color-data-blue-600: #4e65cd; --gl-color-data-blue-700: #3f51ae; --gl-color-data-blue-800: #374291; --gl-color-data-blue-900: #303470; --gl-color-data-blue-950: #2a2b59; --gl-color-data-magenta-50: #ffe3eb; --gl-color-data-magenta-100: #ffccdb; --gl-color-data-magenta-200: #fcacc5; --gl-color-data-magenta-300: #f88aaf; --gl-color-data-magenta-400: #e86e9a; --gl-color-data-magenta-500: #cf4d81; --gl-color-data-magenta-600: #b93d71; --gl-color-data-magenta-700: #9a2e5d; --gl-color-data-magenta-800: #7c214f; --gl-color-data-magenta-900: #661e3a; --gl-color-data-magenta-950: #541d31; --gl-color-data-orange-50: #fae8d1; --gl-color-data-orange-100: #f5d6b3; --gl-color-data-orange-200: #eebd8c; --gl-color-data-orange-300: #e99b60; --gl-color-data-orange-400: #e07e41; --gl-color-data-orange-500: #c95d2e; --gl-color-data-orange-600: #b14f18; --gl-color-data-orange-700: #92430a; --gl-color-data-orange-800: #6f3500; --gl-color-data-orange-900: #5e2f05; --gl-color-data-orange-950: #4b2707; --gl-color-green-50: #e6f5ea; --gl-color-green-100: #bee6d0; --gl-color-green-200: #84d4b6; --gl-color-green-300: #35b597; --gl-color-green-400: #129c84; --gl-color-green-500: #0d8070; --gl-color-green-600: #0c7265; --gl-color-green-700: #0b645a; --gl-color-green-800: #075048; --gl-color-green-900: #003c36; --gl-color-green-950: #002c26; --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f7f7f5; --gl-color-neutral-50: #ecebea; --gl-color-neutral-100: #dcdbd9; --gl-color-neutral-200: #c1bfbe; --gl-color-neutral-300: #a5a3a3; --gl-color-neutral-400: #8a8888; --gl-color-neutral-500: #747273; --gl-color-neutral-600: #646163; --gl-color-neutral-700: #4d4b4e; --gl-color-neutral-800: #3a383d; --gl-color-neutral-900: #28272d; --gl-color-neutral-950: #18171d; --gl-color-neutral-1000: #050408; --gl-color-orange-50: #fdf0d5; --gl-color-orange-100: #fada9c; --gl-color-orange-200: #f7b951; --gl-color-orange-300: #fb8017; --gl-color-orange-400: #e95f21; --gl-color-orange-500: #c74816; --gl-color-orange-600: #b34013; --gl-color-orange-700: #9e3811; --gl-color-orange-800: #7d2d0e; --gl-color-orange-900: #5d220d; --gl-color-orange-950: #461807; --gl-color-purple-50: #f4f0fc; --gl-color-purple-100: #e1daf7; --gl-color-purple-200: #c9beef; --gl-color-purple-300: #a997e1; --gl-color-purple-400: #927cd7; --gl-color-purple-500: #7862c8; --gl-color-purple-600: #6a54c0; --gl-color-purple-700: #5b46b8; --gl-color-purple-800: #483698; --gl-color-purple-900: #362676; --gl-color-purple-950: #291a5c; --gl-color-red-50: #feeef0; --gl-color-red-100: #ffd3d7; --gl-color-red-200: #ffafb8; --gl-color-red-300: #fc7988; --gl-color-red-400: #f15168; --gl-color-red-500: #de1d4b; --gl-color-red-600: #c52042; --gl-color-red-700: #ac203a; --gl-color-red-800: #891c2f; --gl-color-red-900: #641925; --gl-color-red-950: #48151d; --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'; --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace; --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */ --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */ --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */ --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */ --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */ --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */ --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */ --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */ --gl-font-size-xs: 0.625rem; --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */ --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */ --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */ --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */ --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */ --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */ --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */ --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */ --gl-font-weight-100: 100; --gl-font-weight-300: 300; --gl-font-weight-normal: 400; --gl-font-weight-semibold: 500; --gl-font-weight-bold: 600; --gl-line-height-12: 0.75rem; --gl-line-height-16: 1rem; --gl-line-height-20: 1.25rem; --gl-line-height-24: 1.5rem; --gl-line-height-28: 1.75rem; --gl-line-height-32: 2rem; --gl-line-height-36: 2.25rem; --gl-line-height-42: 2.625rem; --gl-line-height-44: 2.75rem; --gl-line-height-52: 3.25rem; --gl-line-height-heading: 1.25; --gl-opacity-0: 0; --gl-opacity-1: .1; --gl-opacity-2: .2; --gl-opacity-3: .3; --gl-opacity-4: .4; --gl-opacity-5: .5; --gl-opacity-6: .6; --gl-opacity-7: .7; --gl-opacity-8: .8; --gl-opacity-9: .9; --gl-opacity-10: 1; --gl-spacing-scale-0: 0px; --gl-spacing-scale-1: 0.125rem; --gl-spacing-scale-2: 0.25rem; --gl-spacing-scale-3: 0.5rem; --gl-spacing-scale-4: 0.75rem; --gl-spacing-scale-5: 1rem; --gl-spacing-scale-6: 1.5rem; --gl-spacing-scale-7: 2rem; --gl-spacing-scale-8: 2.5rem; --gl-spacing-scale-9: 3rem; --gl-spacing-scale-10: 3.5rem; --gl-spacing-scale-11: 4rem; --gl-spacing-scale-12: 5rem; --gl-spacing-scale-13: 6rem; --gl-spacing-scale-15: 7.5rem; --gl-spacing-scale-18: 9rem; --gl-spacing-scale-20: 10rem; --gl-spacing-scale-26: 13rem; --gl-spacing-scale-28: 14rem; --gl-spacing-scale-30: 15rem; --gl-spacing-scale-31: 15.5rem; --gl-spacing-scale-33: 16.5rem; --gl-spacing-scale-34: 17rem; --gl-spacing-scale-37: 18.5rem; --gl-spacing-scale-48: 24rem; --gl-spacing-scale-62: 31rem; --gl-spacing-scale-75: 37.5rem; --gl-spacing-scale-80: 40rem; --gl-spacing-scale-88: 44rem; --gl-spacing-scale-px: 1px; --gl-spacing-scale-2-5: 0.375rem; --gl-spacing-scale-11-5: 4.5rem; --gl-zindex-0: 0; --gl-zindex-1: 1; --gl-zindex-2: 2; --gl-zindex-3: 3; --gl-zindex-4: 4; --gl-zindex-200: 200; --gl-zindex-9999: 9999; --gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */ --gl-broadcast-banner-background-color-blue: #235180; /** Used for the background for the blue banner type. */ --gl-broadcast-banner-background-color-green: #1b653f; /** Used for the background for the green banner type. */ --gl-broadcast-banner-background-color-indigo: #41419f; /** Used for the background for the indigo banner type. */ --gl-broadcast-banner-background-color-lightblue: #4977a5; /** Used for the background for the lightblue banner type. */ --gl-broadcast-banner-background-color-lightgreen: #308258; /** Used for the background for the lightgreen banner type. */ --gl-broadcast-banner-background-color-lightindigo: #6666c4; /** Used for the background for the lightindigo banner type. */ --gl-broadcast-banner-background-color-lightred: #ad4a3b; /** Used for the background for the lightred banner type. */ --gl-broadcast-banner-background-color-red: #8f2110; /** Used for the background for the red banner type. */ --gl-broadcast-banner-border-color-blue: #0b2640; /** Used for the border for the blue banner type. */ --gl-broadcast-banner-border-color-green: #0e4328; /** Used for the border for the green banner type. */ --gl-broadcast-banner-border-color-indigo: #222261; /** Used for the border for the indigo banner type. */ --gl-broadcast-banner-border-color-lightblue: #235180; /** Used for the border for the lightblue banner type. */ --gl-broadcast-banner-border-color-lightgreen: #1b653f; /** Used for the border for the lightgreen banner type. */ --gl-broadcast-banner-border-color-lightindigo: #41419f; /** Used for the border for the lightindigo banner type. */ --gl-broadcast-banner-border-color-lightred: #8f2110; /** Used for the border for the lightred banner type. */ --gl-broadcast-banner-border-color-red: #580d02; /** Used for the border for the red banner type. */ --gl-chart-threshold-area-color: rgba(222, 29, 75, 0.1); /** Used in charts to delineate a threshold area in a chart. */ --gl-illustration-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail. */ --gl-illustration-stroke-width-default: 2; /** Default stroke width to define shape and provide essential detail. */ --gl-illustration-fill-color-default: #fff; /** Default fill color for an element where specific meaning or emphasis is not required. */ --gl-illustration-status-fill-color-neutral: #aea5d6; /** Used as a fill to convey a concept which is neither positive or negative. */ --gl-illustration-status-fill-color-success: #6fdac9; /** Used as a fill to convey a success or active concept, has a positive connotation. */ --gl-illustration-status-fill-color-warning: #fca326; /** Used as a fill to convey a caution or warning concept, has a slightly negative connotation. */ --gl-illustration-status-fill-color-danger: #ff9d73; /** Used as a fill to convey a critical or danger concept, has a negative connotation. */ --gl-illustration-accent-stroke-color-orange: #ff9d73; /** Used for orange accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-stroke-color-teal: #6fdac9; /** Used for teal accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-stroke-color-strong: #aea5d6; /** Used for dark accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-fill-color-subtle: #d0c5e2; /** Used to add depth to a secondary element and supporting surface. */ --gl-illustration-accent-fill-color-strong: #aea5d6; /** Used for an element requiring visual emphasis without competing with primary content or status indicators. */ --gl-illustration-accent-fill-color-orange: #ff9d73; /** Used to add orange to a secondary element and supporting surface. */ --gl-illustration-accent-fill-color-teal: #6fdac9; /** Used to add teal to a secondary element and supporting surface. */ --gl-illustration-base-fill-color: #e7e4f2; /** Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion. */ --gl-illustration-isometric-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail in isometric illustration. */ --gl-illustration-isometric-stroke-width-default: 2; /** Default stroke width to define shape and provide essential detail in isometric illustration. */ --gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; /** Used for the top face of isometric text and number elements. */ --gl-illustration-isometric-glyph-front-fill-color: #fff; /** Used for the front face of isometric text and number elements. */ --gl-illustration-isometric-glyph-side-fill-color: #6fdac9; /** Used for the side face of isometric text and number elements. */ --gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; /** Used for the shadow of isometric text and number elements. */ --gl-illustration-isometric-object-top-fill-color: #ff9d73; /** Used for the top face of an isometric object or symbol. */ --gl-illustration-isometric-object-front-fill-color: #ffc2a8; /** Used for the front face of an isometric object or symbol. */ --gl-illustration-isometric-object-side-fill-color: #ff7b42; /** Used for the side face of an isometric object or symbol. */ --gl-illustration-isometric-object-highlight-fill-color: #fff; /** Used for the face of an isometric object or symbol that requires maximum distinction from other elements. */ --gl-illustration-isometric-object-shadow-fill-color: #e24329; /** Used for the shadow of an isometric object or symbol. */ --gl-illustration-isometric-accent-top-fill-color: #45424d; /** Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-accent-front-fill-color: #74717a; /** Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-accent-side-fill-color: #2b2838; /** Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-base-top-fill-color: #e7e4f2; /** Used for the top surface of an isometric base platform. */ --gl-illustration-isometric-base-front-fill-color: #d5d0e8; /** Used for the front face of an isometric base platform. */ --gl-illustration-isometric-base-side-fill-color: #aea5d6; /** Used for the side face of an isometric base platform. */ --gl-nav-item-font-weight: 425; /** Used for the font weight of a navigation item */ --data-viz-green-50: #ddfab7; --data-viz-green-100: #c6ed94; --data-viz-green-200: #b0d97b; --data-viz-green-300: #94c25e; --data-viz-green-400: #81ac41; --data-viz-green-500: #619025; --data-viz-green-600: #4e7f0e; --data-viz-green-700: #366800; --data-viz-green-800: #275600; --data-viz-green-900: #1a4500; --data-viz-green-950: #133a03; --data-viz-aqua-50: #b5fefd; --data-viz-aqua-100: #93f2ef; --data-viz-aqua-200: #5edee3; --data-viz-aqua-300: #32c5d2; --data-viz-aqua-400: #00acc4; --data-viz-aqua-500: #0090b1; --data-viz-aqua-600: #007b9b; --data-viz-aqua-700: #006381; --data-viz-aqua-800: #00516c; --data-viz-aqua-900: #004059; --data-viz-aqua-950: #00344b; --data-viz-blue-50: #e9ebff; --data-viz-blue-100: #d2dcff; --data-viz-blue-200: #b7c6ff; --data-viz-blue-300: #97acff; --data-viz-blue-400: #7992f5; --data-viz-blue-500: #617ae2; --data-viz-blue-600: #4e65cd; --data-viz-blue-700: #3f51ae; --data-viz-blue-800: #374291; --data-viz-blue-900: #303470; --data-viz-blue-950: #2a2b59; --data-viz-magenta-50: #ffe3eb; --data-viz-magenta-100: #ffccdb; --data-viz-magenta-200: #fcacc5; --data-viz-magenta-300: #f88aaf; --data-viz-magenta-400: #e86e9a; --data-viz-magenta-500: #cf4d81; --data-viz-magenta-600: #b93d71; --data-viz-magenta-700: #9a2e5d; --data-viz-magenta-800: #7c214f; --data-viz-magenta-900: #661e3a; --data-viz-magenta-950: #541d31; --data-viz-orange-50: #fae8d1; --data-viz-orange-100: #f5d6b3; --data-viz-orange-200: #eebd8c; --data-viz-orange-300: #e99b60; --data-viz-orange-400: #e07e41; --data-viz-orange-500: #c95d2e; --data-viz-orange-600: #b14f18; --data-viz-orange-700: #92430a; --data-viz-orange-800: #6f3500; --data-viz-orange-900: #5e2f05; --data-viz-orange-950: #4b2707; --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */ --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */ --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */ --brand-orange-03: #e24329; /** Use color.brand-orange.03p instead. */ --brand-purple-01: #a989f5; /** Use color.purple.01p instead. */ --brand-purple-02: #7759c2; /** Use color.purple.02p instead. */ --brand-gray-01: #d1d0d3; /** Use color.brand-gray.01 instead. */ --brand-gray-02: #a2a1a6; /** Use color.brand-gray.02 instead. */ --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */ --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */ --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */ --t-gray-a-16: rgba(5, 5, 6, 0.16); /** Use color.alpha.dark.16 instead. */ --t-gray-a-24: rgba(5, 5, 6, 0.24); /** Use color.alpha.dark.24 instead. */ --t-gray-a-02: rgba(5, 5, 6, 0.02); /** Use color.alpha.dark.2 instead. */ --t-gray-a-04: rgba(5, 5, 6, 0.04); /** Use color.alpha.dark.4 instead. */ --t-gray-a-06: rgba(5, 5, 6, 0.06); /** Use color.alpha.dark.6 instead. */ --t-gray-a-08: rgba(5, 5, 6, 0.08); /** Use color.alpha.dark.8 instead. */ --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */ --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */ --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */ --t-white-a-02: rgba(255, 255, 255, 0.02); /** Use color.alpha.light.2 instead. */ --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */ --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */ --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */ --gl-action-danger-background-color-default: rgba(222, 29, 75, 0); /** Used for the background of a danger (destructive) action in the default state. */ --gl-action-danger-background-color-hover: rgba(222, 29, 75, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */ --gl-action-danger-background-color-active: rgba(172, 32, 58, 0.24); /** Used for the background of a danger (destructive) action in the active state. */ --gl-letter-spacing-heading: -0.01em; --gl-heading-3-letter-spacing: inherit; --gl-heading-4-letter-spacing: inherit; --gl-heading-5-letter-spacing: inherit; --gl-heading-6-letter-spacing: inherit; --gl-heading-scale-100-letter-spacing: inherit; --gl-heading-scale-200-letter-spacing: inherit; --gl-heading-scale-300-letter-spacing: inherit; --gl-heading-scale-400-letter-spacing: inherit; --gl-heading-scale-500-letter-spacing: inherit; --gl-heading-scale-800-line-height: 1.125; --gl-heading-scale-100-fixed-letter-spacing: inherit; --gl-heading-scale-200-fixed-letter-spacing: inherit; --gl-heading-scale-300-fixed-letter-spacing: inherit; --gl-heading-scale-400-fixed-letter-spacing: inherit; --gl-heading-scale-500-fixed-letter-spacing: inherit; --gl-heading-scale-800-fixed-line-height: 1.125; --gl-heading-display-line-height: 1.125; --gl-heading-3-fixed-letter-spacing: inherit; --gl-heading-4-fixed-letter-spacing: inherit; --gl-heading-5-fixed-letter-spacing: inherit; --gl-heading-6-fixed-letter-spacing: inherit; --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */ --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */ --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */ --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */ --gl-border-radius-none: var(--gl-spacing-scale-0); --gl-border-radius-xs: var(--gl-spacing-scale-px); --gl-border-radius-sm: var(--gl-spacing-scale-1); --gl-border-radius-md: var(--gl-spacing-scale-2); --gl-border-radius-lg: var(--gl-spacing-scale-3); --gl-border-radius-xl: var(--gl-spacing-scale-4); --gl-border-radius-2xl: var(--gl-spacing-scale-5); --gl-border-radius-3xl: var(--gl-spacing-scale-6); --gl-font-size-sm: var(--gl-font-size-100); --gl-font-size-md: var(--gl-font-size-300); --gl-font-size-lg: var(--gl-font-size-400); --gl-font-weight-heading: var(--gl-font-weight-bold); --gl-heading-default-margin-top: var(--gl-spacing-scale-0); --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5); --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */ --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a neutral alert. */ --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */ --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */ --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */ --gl-alert-success-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a success alert. */ --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */ --gl-alert-warning-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a warning alert. */ --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */ --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a danger alert. */ --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */ --gl-application-chrome-background-color: var(--gl-color-neutral-50); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */ --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /** Used to define the edge of an avatar. */ --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /** Used to increase the edge definition of an avatar in the hover state. */ --gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */ --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /** Red text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-800); /** Purple text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-800); /** Blue text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-green: var(--gl-color-green-800); /** Green text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-800); /** Orange text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-800); /** Neutral text color for avatar fallback with no particular meaning. */ --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a muted badge when static or the default state when linked. */ --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /** Used for the background of a muted badge in the active state. */ --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a muted badge when static or the default state when linked. */ --gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a muted badge in the hover state. */ --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the focus state. */ --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the active state. */ --gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /** Used for the text of a muted badge when static or the default state when linked. */ --gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /** Used for the text of a muted badge in the hover state. */ --gl-badge-muted-text-color-active: var(--gl-color-neutral-800); /** Used for the text of a muted badge in the active state. */ --gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /** Used for the icon of a muted badge when static or the default state when linked. */ --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /** Used for the icon of a muted badge in the hover state. */ --gl-badge-muted-icon-color-active: var(--gl-color-neutral-700); /** Used for the icon of a muted badge in the active state. */ --gl-badge-neutral-background-color-default: var(--gl-color-neutral-100); /** Used for the background of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a neutral badge in the active state. */ --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a neutral badge in the hover state. */ --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the focus state. */ --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the active state. */ --gl-badge-neutral-text-color-default: var(--gl-color-neutral-700); /** Used for the text of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-800); /** Used for the text of a neutral badge in the hover state. */ --gl-badge-neutral-text-color-active: var(--gl-color-neutral-900); /** Used for the text of a neutral badge in the active state. */ --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-500); /** Used for the icon of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-600); /** Used for the icon of a neutral badge in the hover state. */ --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-700); /** Used for the icon of a neutral badge in the active state. */ --gl-badge-info-background-color-default: var(--gl-color-blue-100); /** Used for the background of an informational badge when static or the default state when linked. */ --gl-badge-info-background-color-active: var(--gl-color-blue-200); /** Used for the background of an informational badge in the active state. */ --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an informational badge when static or the default state when linked. */ --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /** Used for the border of an informational badge in the hover state. */ --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the focus state. */ --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the active state. */ --gl-badge-info-text-color-default: var(--gl-color-blue-700); /** Used for the text of an informational badge when static or the default state when linked. */ --gl-badge-info-text-color-hover: var(--gl-color-blue-800); /** Used for the text of an informational badge in the hover state. */ --gl-badge-info-text-color-active: var(--gl-color-blue-900); /** Used for the text of an informational badge in the active state. */ --gl-badge-info-icon-color-default: var(--gl-color-blue-500); /** Used for the icon of an informational badge when static or the default state when linked. */ --gl-badge-info-icon-color-hover: var(--gl-color-blue-600); /** Used for the icon of an informational badge in the hover state. */ --gl-badge-info-icon-color-active: var(--gl-color-blue-700); /** Used for the icon of an informational badge in the active state. */ --gl-badge-success-background-color-default: var(--gl-color-green-100); /** Used for the background of a success badge when static or the default state when linked. */ --gl-badge-success-background-color-active: var(--gl-color-green-200); /** Used for the background of a success badge in the active state. */ --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a success badge when static or the default state when linked. */ --gl-badge-success-border-color-hover: var(--gl-color-green-200); /** Used for the border of a success badge in the hover state. */ --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a success badge in the focus state. */ --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a success badge in the active state. */ --gl-badge-success-text-color-default: var(--gl-color-green-700); /** Used for the text of a success badge when static or the default state when linked. */ --gl-badge-success-text-color-hover: var(--gl-color-green-800); /** Used for the text of a success badge in the hover state. */ --gl-badge-success-text-color-active: var(--gl-color-green-900); /** Used for the text of a success badge in the active state. */ --gl-badge-success-icon-color-default: var(--gl-color-green-500); /** Used for the icon of a success badge when static or the default state when linked. */ --gl-badge-success-icon-color-hover: var(--gl-color-green-600); /** Used for the icon of a success badge in the hover state. */ --gl-badge-success-icon-color-active: var(--gl-color-green-700); /** Used for the icon of a success badge in the active state. */ --gl-badge-warning-background-color-default: var(--gl-color-orange-100); /** Used for the background of a warning badge when static or the default state when linked. */ --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /** Used for the background of a warning badge in the active state. */ --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a warning badge when static or the default state when linked. */ --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /** Used for the border of a warning badge in the hover state. */ --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the focus state. */ --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the active state. */ --gl-badge-warning-text-color-default: var(--gl-color-orange-700); /** Used for the text of a warning badge when static or the default state when linked. */ --gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /** Used for the text of a warning badge in the hover state. */ --gl-badge-warning-text-color-active: var(--gl-color-orange-900); /** Used for the text of a warning badge in the active state. */ --gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /** Used for the icon of a warning badge when static or the default state when linked. */ --gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /** Used for the icon of a warning badge in the hover state. */ --gl-badge-warning-icon-color-active: var(--gl-color-orange-700); /** Used for the icon of a warning badge in the active state. */ --gl-badge-danger-background-color-default: var(--gl-color-red-100); /** Used for the background of a danger badge when static or the default state when linked. */ --gl-badge-danger-background-color-active: var(--gl-color-red-200); /** Used for the background of a danger badge in the active state. */ --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger badge when static or the default state when linked. */ --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /** Used for the border of a danger badge in the hover state. */ --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the focus state. */ --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the active state. */ --gl-badge-danger-text-color-default: var(--gl-color-red-700); /** Used for the text of a danger badge when static or the default state when linked. */ --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /** Used for the text of a danger badge in the hover state. */ --gl-badge-danger-text-color-active: var(--gl-color-red-900); /** Used for the text of a danger badge in the active state. */ --gl-badge-danger-icon-color-default: var(--gl-color-red-700); /** Used for the icon of a danger badge when static or the default state when linked. */ --gl-badge-danger-icon-color-hover: var(--gl-color-red-800); /** Used for the icon of a danger badge in the hover state. */ --gl-badge-danger-icon-color-active: var(--gl-color-red-900); /** Used for the icon of a danger badge in the active state. */ --gl-badge-tier-background-color-default: var(--gl-color-purple-100); /** Used for the background of a tier related badge when static or the default state when linked. */ --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /** Used for the background of a tier related badge in the active state. */ --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a tier related badge when static or the default state when linked. */ --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /** Used for the border of a tier related badge in the hover state. */ --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the focus state. */ --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the active state. */ --gl-badge-tier-text-color-default: var(--gl-color-purple-700); /** Used for the text of a tier related badge when static or the default state when linked. */ --gl-badge-tier-text-color-hover: var(--gl-color-purple-800); /** Used for the text of a tier related badge in the hover state. */ --gl-badge-tier-text-color-active: var(--gl-color-purple-900); /** Used for the text of a tier related badge in the active state. */ --gl-badge-tier-icon-color-default: var(--gl-color-purple-700); /** Used for the icon of a tier related badge when static or the default state when linked. */ --gl-badge-tier-icon-color-hover: var(--gl-color-purple-800); /** Used for the icon of a tier related badge in the hover state. */ --gl-badge-tier-icon-color-active: var(--gl-color-purple-900); /** Used for the icon of a tier related badge in the active state. */ --gl-banner-intro-border-color: var(--gl-color-blue-200); /** Used for the border of an info banner. */ --gl-banner-promo-background-color: var(--gl-color-purple-50); /** Used for the background of a promo banner. */ --gl-banner-promo-border-color: var(--gl-color-purple-200); /** Used for the border of a promo banner. */ --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */ --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */ --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */ --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */ --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */ --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */ --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */ --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */ --gl-broadcast-banner-icon-color-indigo: var(--gl-color-neutral-0); /** Used for the icon for the indigo banner type. */ --gl-broadcast-banner-icon-color-light: var(--gl-color-neutral-900); /** Used for the icon for the light banner type. */ --gl-broadcast-banner-icon-color-lightblue: var(--gl-color-neutral-0); /** Used for the icon for the lightblue banner type. */ --gl-broadcast-banner-icon-color-lightgreen: var(--gl-color-neutral-0); /** Used for the icon for the lightgreen banner type. */ --gl-broadcast-banner-icon-color-lightindigo: var(--gl-color-neutral-0); /** Used for the icon for the lightindigo banner type. */ --gl-broadcast-banner-icon-color-lightred: var(--gl-color-neutral-0); /** Used for the icon for the lightred banner type. */ --gl-broadcast-banner-icon-color-red: var(--gl-color-neutral-0); /** Used for the icon for the red banner type. */ --gl-broadcast-banner-text-color-blue: var(--gl-color-neutral-0); /** Used for the text for the blue banner type. */ --gl-broadcast-banner-text-color-dark: var(--gl-color-neutral-0); /** Used for the text for the dark banner type. */ --gl-broadcast-banner-text-color-green: var(--gl-color-neutral-0); /** Used for the text for the green banner type. */ --gl-broadcast-banner-text-color-indigo: var(--gl-color-neutral-0); /** Used for the text for the indigo banner type. */ --gl-broadcast-banner-text-color-light: var(--gl-color-neutral-900); /** Used for the text for the light banner type. */ --gl-broadcast-banner-text-color-lightblue: var(--gl-color-neutral-0); /** Used for the text for the lightblue banner type. */ --gl-broadcast-banner-text-color-lightgreen: var(--gl-color-neutral-0); /** Used for the text for the lightgreen banner type. */ --gl-broadcast-banner-text-color-lightindigo: var(--gl-color-neutral-0); /** Used for the text for the lightindigo banner type. */ --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /** Used for the text for the lightred banner type. */ --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /** Used for the text for the red banner type. */ --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a default primary button in the default state. */ --gl-button-default-primary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an default primary button in the default state. */ --gl-button-default-primary-background-color-hover: var(--gl-color-neutral-50); /** Used for the background of an default primary button in the hover state. */ --gl-button-default-primary-background-color-active: var(--gl-color-neutral-100); /** Used for the background of an default primary button in the active state. */ --gl-button-default-primary-border-color-default: var(--gl-color-neutral-200); /** Used for the border of an default primary button in the default state. */ --gl-button-default-primary-border-color-hover: var(--gl-color-neutral-400); /** Used for the border of an default primary button in the hover state. */ --gl-button-default-primary-border-color-active: var(--gl-color-neutral-600); /** Used for the border of an default primary button in the active state. */ --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a confirm (positive) primary button in the default state. */ --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a confirm (positive) primary button in the default state. */ --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-950); /** Used for the background of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-background-color-active: var(--gl-color-neutral-1000); /** Used for the background of a confirm (positive) primary button in the active state. */ --gl-button-confirm-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the default state. */ --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a confirm (positive) button in the default state. */ --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-neutral-1000); /** Used for the foreground of a confirm (positive) button in the active state. */ --gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an outlined confirm (positive) button in the default state. */ --gl-button-confirm-secondary-background-color-hover: var(--gl-color-neutral-50); /** Used for the background of an outlined confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-background-color-active: var(--gl-color-neutral-100); /** Used for the background of an outlined confirm (positive) button in the active state. */ --gl-button-confirm-secondary-border-color-default: var(--gl-color-neutral-800); /** Used for the border of an outlined confirm (positive) button in the default state. */ --gl-button-confirm-secondary-border-color-hover: var(--gl-color-neutral-950); /** Used for the border of an outlined confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-border-color-active: var(--gl-color-neutral-1000); /** Used for the border of an outlined confirm (positive) button in the active state. */ --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-background-color-default: var(--gl-color-red-600); /** Used for the background of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-background-color-hover: var(--gl-color-red-700); /** Used for the background of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-background-color-active: var(--gl-color-red-900); /** Used for the background of a danger (destructive) primary button in the active state. */ --gl-button-danger-primary-border-color-default: var(--gl-color-red-700); /** Used for the border of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-border-color-hover: var(--gl-color-red-900); /** Used for the border of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-border-color-active: var(--gl-color-red-950); /** Used for the border of a danger (destructive) primary button in the active state. */ --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) button in the default state. */ --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) button in the hover state. */ --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-900); /** Used for the foreground of a danger (destructive) button in the active state. */ --gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an outlined danger (destructive) button in the default state. */ --gl-button-danger-secondary-background-color-hover: var(--gl-color-red-50); /** Used for the background of an outlined danger (destructive) button in the hover state. */ --gl-button-danger-secondary-background-color-active: var(--gl-color-red-100); /** Used for the background of an outlined danger (destructive) button in the active state. */ --gl-button-danger-secondary-border-color-default: var(--gl-color-red-600); /** Used for the border of an outlined danger (destructive) button in the default state. */ --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-800); /** Used for the border of an outlined danger (destructive) button in the hover state. */ --gl-button-danger-secondary-border-color-active: var(--gl-color-red-900); /** Used for the border of an outlined danger (destructive) button in the active state. */ --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /** Used for the background of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /** Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /** Used for the background of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /** Used for the border of a dashed button in the default state. */ --gl-button-dashed-border-color-active: var(--gl-color-neutral-600); /** Used for the border of a dashed button in the active state. */ --gl-button-selected-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a selected button in the default state. */ --gl-button-selected-border-color-default: var(--gl-color-neutral-300); /** Used for the border of a selected button in the default state. */ --gl-button-selected-border-color-hover: var(--gl-color-neutral-400); /** Used for the border of a selected button in the hover state. */ --gl-button-selected-border-color-active: var(--gl-color-neutral-600); /** Used for the border of a selected button in the active state. */ --gl-button-disabled-foreground-color: var(--gl-color-neutral-500); /** Used for the foreground of a disabled button. */ --gl-button-disabled-background-color: var(--gl-color-neutral-10); /** Used for the background of a disabled button. */ --gl-button-disabled-border-color: var(--gl-color-neutral-100); /** Used for the border of a disabled button. */ --gl-button-count-background-color: var(--gl-color-alpha-dark-8); /** Used for the background of a button count element. */ --gl-chart-axis-line-color: var(--gl-color-neutral-200); /** Used in charts for axis line color. */ --gl-chart-threshold-line-color: var(--gl-color-red-500); /** Used in charts to divide a threshold area in a chart from other data. */ --gl-chart-zoom-filler-color: var(--gl-color-alpha-dark-8); /** Used in charts for the overlay color when zooming in on a specific area of data. */ --gl-datepicker-background-color: var(--gl-color-neutral-0); /** Used for the background color of datepicker. */ --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-50); /** Used for the background of a selected dropdown option in the default state. */ --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-100); /** Used for the background of a selected dropdown option in the hover state. */ --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-200); /** Used for the background of a selected dropdown option in the active state. */ --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-2); /** Used for the background of a search input in a dropdown listbox. */ --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-50); /** Used for the filtered search type token background color in the default state. */ --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-100); /** Used for the filtered search type token background color in the hover state. */ --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-100); /** Used for the filtered search data background color in the default state. */ --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-200); /** Used for the filtered search data token background color in the hover state. */ --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-50); /** Used for the filtered search operator background color in the default state. */ --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-100); /** Used for the filtered search operator token background color in the hover state. */ --gl-label-light-text-color: var(--gl-color-neutral-950); /** Used for the label text color on a light background color. */ --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a light background color in the default state. */ --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /** Used for the label remove button background on a light background color in the hover state. */ --gl-label-light-button-icon-color-default: var(--gl-color-neutral-950); /** Used for the label remove button icon on a light background color in the default state. */ --gl-label-dark-text-color: var(--gl-color-neutral-0); /** Used for the label text color on a dark background color. */ --gl-label-dark-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a dark background color in the default state. */ --gl-label-dark-button-background-color-hover: var(--gl-color-neutral-0); /** Used for the label remove button background on a dark background color in the hover state. */ --gl-label-dark-button-icon-color-default: var(--gl-color-neutral-0); /** Used for the label remove button icon on a dark background color in the default state. */ --gl-label-scoped-text-color: var(--gl-color-neutral-950); /** Used for the scoped label text color. */ --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-950); /** Used for the scoped label remove button background in the hover state. */ --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-950); /** Used for the scoped label remove button icon in the default state. */ --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-0); /** Used for the scoped label remove button icon in the hover state. */ --gl-link-mention-text-color-default: var(--gl-color-blue-800); /** Used for the mention link text color. */ --gl-link-mention-text-color-current: var(--gl-color-orange-800); /** Used for the mention link text color when referencing the current user. */ --gl-link-mention-background-color-default: var(--gl-color-blue-100); /** Used for the mention link default background. */ --gl-link-mention-background-color-current: var(--gl-color-orange-100); /** Used for the mention link background when referencing the current user. */ --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */ --gl-nav-item-foreground-color-default: var(--gl-color-neutral-600); /** Used for the foreground of a default navigation item in the default state. */ --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a default navigation item in the hover state. */ --gl-nav-item-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a default navigation item in the default state. */ --gl-nav-item-background-color-hover: var(--gl-color-neutral-100); /** Used for the background of a default navigation item in the hover state. */ --gl-nav-item-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a default navigation item in the active state. */ --gl-nav-item-selected-font-weight: var(--gl-font-weight-bold); /** Used for the font weight of a selected navigation item. */ --gl-nav-item-selected-background-color-default: var(--gl-color-neutral-100); /** Used for the background of a selected navigation item in the default state. */ --gl-nav-item-selected-indicator-color: var(--gl-color-orange-500); /** Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss. */ --gl-progress-bar-track-color: var(--gl-color-neutral-200); /** Used for the track color for all progress-bar variants. */ --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /** Used for the skeleton loader background color. */ --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /** Used for the animated shimmer effect in a skeleton loader. */ --gl-spinner-track-color-default: var(--gl-color-neutral-100); /** Used for the static track (background) of a loading spinner. */ --gl-spinner-track-color-light: var(--gl-color-neutral-800); /** Used for the static track (background) of a loading spinner on a dark background. */ --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /** Used for the animated segment of a loading spinner. */ --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /** Used for the animated segment of a loading spinner on a dark background. */ --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */ --gl-token-background-color: var(--gl-color-neutral-100); /** Used for the token background color. */ --gl-tooltip-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode. */ --black: var(--gl-color-neutral-1000); --white: var(--gl-color-neutral-0); --blue-50: var(--gl-color-blue-50); --blue-100: var(--gl-color-blue-100); --blue-200: var(--gl-color-blue-200); --blue-300: var(--gl-color-blue-300); --blue-400: var(--gl-color-blue-400); --blue-500: var(--gl-color-blue-500); --blue-600: var(--gl-color-blue-600); --blue-700: var(--gl-color-blue-700); --blue-800: var(--gl-color-blue-800); --blue-900: var(--gl-color-blue-900); --blue-950: var(--gl-color-blue-950); --gray-10: var(--gl-color-neutral-10); --gray-50: var(--gl-color-neutral-50); --gray-100: var(--gl-color-neutral-100); --gray-200: var(--gl-color-neutral-200); --gray-300: var(--gl-color-neutral-300); --gray-400: var(--gl-color-neutral-400); --gray-500: var(--gl-color-neutral-500); --gray-600: var(--gl-color-neutral-600); --gray-700: var(--gl-color-neutral-700); --gray-800: var(--gl-color-neutral-800); --gray-900: var(--gl-color-neutral-900); --gray-950: var(--gl-color-neutral-950); --green-50: var(--gl-color-green-50); --green-100: var(--gl-color-green-100); --green-200: var(--gl-color-green-200); --green-300: var(--gl-color-green-300); --green-400: var(--gl-color-green-400); --green-500: var(--gl-color-green-500); --green-600: var(--gl-color-green-600); --green-700: var(--gl-color-green-700); --green-800: var(--gl-color-green-800); --green-900: var(--gl-color-green-900); --green-950: var(--gl-color-green-950); --orange-50: var(--gl-color-orange-50); --orange-100: var(--gl-color-orange-100); --orange-200: var(--gl-color-orange-200); --orange-300: var(--gl-color-orange-300); --orange-400: var(--gl-color-orange-400); --orange-500: var(--gl-color-orange-500); --orange-600: var(--gl-color-orange-600); --orange-700: var(--gl-color-orange-700); --orange-800: var(--gl-color-orange-800); --orange-900: var(--gl-color-orange-900); --orange-950: var(--gl-color-orange-950); --purple-50: var(--gl-color-purple-50); --purple-100: var(--gl-color-purple-100); --purple-200: var(--gl-color-purple-200); --purple-300: var(--gl-color-purple-300); --purple-400: var(--gl-color-purple-400); --purple-500: var(--gl-color-purple-500); --purple-600: var(--gl-color-purple-600); --purple-700: var(--gl-color-purple-700); --purple-800: var(--gl-color-purple-800); --purple-900: var(--gl-color-purple-900); --purple-950: var(--gl-color-purple-950); --red-50: var(--gl-color-red-50); --red-100: var(--gl-color-red-100); --red-200: var(--gl-color-red-200); --red-300: var(--gl-color-red-300); --red-400: var(--gl-color-red-400); --red-500: var(--gl-color-red-500); --red-600: var(--gl-color-red-600); --red-700: var(--gl-color-red-700); --red-800: var(--gl-color-red-800); --red-900: var(--gl-color-red-900); --red-950: var(--gl-color-red-950); --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /** Used for the foreground of a disabled action. */ --gl-action-disabled-background-color: var(--gl-color-neutral-50); /** Used for the background of a disabled action. */ --gl-action-disabled-border-color: var(--gl-color-neutral-100); /** Used for the border of a disabled action. */ --gl-action-selected-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a selected action in the default state. */ --gl-action-selected-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a selected action in the default state. */ --gl-action-selected-background-color-hover: var(--gl-color-neutral-950); /** Used for the background of a selected action in the hover state. */ --gl-action-selected-background-color-active: var(--gl-color-neutral-1000); /** Used for the background of a selected action in the active state. */ --gl-action-selected-background-color-disabled: var(--gl-color-neutral-400); /** Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled. */ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /** Used for the foreground of a neutral action in the default state. */ --gl-action-neutral-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a neutral action in the default state. */ --gl-action-neutral-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a neutral action in the hover state. */ --gl-action-neutral-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a neutral action in the active state. */ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral action in the default state. */ --gl-action-confirm-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a confirm (positive) action in the default state. */ --gl-action-confirm-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) action in the hover state. */ --gl-action-confirm-foreground-color-active: var(--gl-color-neutral-1000); /** Used for the foreground of a confirm (positive) action in the active state. */ --gl-action-confirm-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a confirm (positive) action in the default state. */ --gl-action-confirm-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a confirm (positive) action in the hover state. */ --gl-action-confirm-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a confirm (positive) action in the active state. */ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */ --gl-action-danger-foreground-color-default: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) action in the default state. */ --gl-action-danger-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) action in the hover state. */ --gl-action-danger-foreground-color-active: var(--gl-color-red-950); /** Used for the foreground of a danger (destructive) action in the active state. */ --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /** Used for the background of a danger (destructive) action in the focus state. */ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger action in the default state. */ --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /** Used for the background of a strong confirm action in the default state. */ --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-600); /** Used for the background of a strong confirm action in the hover state. */ --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-700); /** Used for the background of a strong confirm action in the active state. */ --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a strong confirm action in the default state. */ --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong confirm action in the default state. */ --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-600); /** Used for the background of a strong neutral action in the default state. */ --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-700); /** Used for the background of a strong neutral action in the hover state. */ --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-800); /** Used for the background of a strong neutral action in the active state. */ --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the default state. */ --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong neutral action in the default state. */ --gl-background-color-default: var(--gl-color-neutral-0); /** Used for the default background color. */ --gl-background-color-subtle: var(--gl-color-neutral-10); /** Used to slightly differentiate the background from the default. */ --gl-background-color-strong: var(--gl-color-neutral-50); /** Used to make the background easily stand out from the default. */ --gl-background-color-disabled: var(--gl-color-neutral-10); /** Used to identify a disabled section. */ --gl-background-color-overlap: var(--gl-color-neutral-0); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */ --gl-background-color-section: var(--gl-color-neutral-0); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */ --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /** Used for an overlay that covers other content. */ --gl-control-background-color-default: var(--gl-color-neutral-0); /** Used for form control (input, radio button, checkbox, textarea) default background. */ --gl-control-background-color-disabled: var(--gl-color-neutral-10); /** Used for disabled form control (input, textarea) background. */ --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /** Used for the background of static content that prepends or appends a text input. */ --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /** Used for the background of static content that prepends or appends a text input. */ --gl-control-background-color-selected-default: var(--gl-color-neutral-800); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */ --gl-control-background-color-selected-hover: var(--gl-color-neutral-950); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */ --gl-control-border-color-default: var(--gl-color-neutral-400); /** Used for form control (input, radio button, checkbox, textarea) default border. */ --gl-control-border-color-hover: var(--gl-color-neutral-600); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */ --gl-control-border-color-focus: var(--gl-color-neutral-900); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */ --gl-control-border-color-disabled: var(--gl-color-neutral-100); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */ --gl-control-placeholder-color: var(--gl-color-neutral-500); /** Used for placeholder text within inputs. */ --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /** Used for checkbox and radio button state indicators. */ --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */ --gl-feedback-strong-border-color: var(--gl-color-neutral-1000); /** Used for the border associated with strong feedback. */ --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */ --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /** Used for an icon on a strong feedback background. */ --gl-feedback-strong-link-color: var(--gl-color-blue-300); /** Used for a link on a strong feedback background. */ --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /** Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-border-color: var(--gl-color-neutral-200); /** Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-text-color: var(--gl-color-neutral-700); /** Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-info-background-color: var(--gl-color-blue-50); /** Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-border-color: var(--gl-color-blue-200); /** Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-text-color: var(--gl-color-blue-700); /** Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-icon-color: var(--gl-color-blue-600); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-success-background-color: var(--gl-color-green-50); /** Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-border-color: var(--gl-color-green-200); /** Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-text-color: var(--gl-color-green-700); /** Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-icon-color: var(--gl-color-green-600); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-warning-background-color: var(--gl-color-orange-50); /** Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-border-color: var(--gl-color-orange-200); /** Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-text-color: var(--gl-color-orange-700); /** Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-danger-background-color: var(--gl-color-red-50); /** Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-border-color: var(--gl-color-red-500); /** Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-text-color: var(--gl-color-red-700); /** Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-icon-color: var(--gl-color-red-600); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-brand-background-color: var(--gl-color-purple-50); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-border-color: var(--gl-color-purple-200); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-text-color: var(--gl-color-purple-700); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-icon-color: var(--gl-color-purple-600); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-focus-ring-outer-color: var(--gl-color-blue-500); /** Used for the outer color portion of the focus ring. */ --gl-highlight-match-background-color: var(--gl-color-orange-500); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */ --gl-highlight-match-text-color: var(--gl-color-neutral-0); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */ --gl-highlight-target-background-color: var(--gl-color-blue-50); /** Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */ --gl-highlight-target-border-color: var(--gl-color-blue-200); /** Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */ --gl-icon-color-info: var(--gl-color-blue-700); /** Used for an icon associated with information or help. */ --gl-status-neutral-background-color: var(--gl-color-neutral-100); /** Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-neutral-text-color: var(--gl-color-neutral-700); /** Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-neutral-icon-color: var(--gl-color-neutral-500); /** Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-info-background-color: var(--gl-color-blue-100); /** Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-info-text-color: var(--gl-color-blue-700); /** Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-info-icon-color: var(--gl-color-blue-500); /** Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-success-background-color: var(--gl-color-green-100); /** Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-success-text-color: var(--gl-color-green-700); /** Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-success-icon-color: var(--gl-color-green-500); /** Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-warning-background-color: var(--gl-color-orange-100); /** Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-warning-text-color: var(--gl-color-orange-700); /** Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-warning-icon-color: var(--gl-color-orange-500); /** Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-danger-background-color: var(--gl-color-red-100); /** Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-danger-text-color: var(--gl-color-red-700); /** Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-danger-icon-color: var(--gl-color-red-500); /** Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-brand-background-color: var(--gl-color-purple-100); /** Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-text-color: var(--gl-color-purple-700); /** Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-icon-color: var(--gl-color-purple-500); /** Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-text-color-default: var(--gl-color-neutral-800); /** Used for the default text color. */ --gl-text-color-subtle: var(--gl-color-neutral-600); /** Used for supplemental text that doesn't need to be as prominent as other text. */ --gl-text-color-strong: var(--gl-color-neutral-950); /** Used for text with the highest contrast. */ --gl-text-color-heading: var(--gl-color-neutral-950); /** Used for headings level 1-6. */ --gl-text-color-link: var(--gl-color-blue-700); /** Used for default text links. */ --gl-text-color-warning: var(--gl-color-orange-600); /** Used for text that requires caution or careful attention. */ --gl-text-color-danger: var(--gl-color-red-600); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */ --gl-text-color-success: var(--gl-color-green-600); /** Used for text indicating success, completion, approval, addition, or validity. */ --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */ --gl-heading-1-font-size: var(--gl-font-size-700); --gl-heading-1-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-1-line-height: var(--gl-line-height-heading); --gl-heading-2-font-size: var(--gl-font-size-600); --gl-heading-2-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-2-line-height: var(--gl-line-height-heading); --gl-heading-3-font-size: var(--gl-font-size-500); --gl-heading-3-line-height: var(--gl-line-height-heading); --gl-heading-4-font-size: var(--gl-font-size-400); --gl-heading-4-line-height: var(--gl-line-height-heading); --gl-heading-5-font-size: var(--gl-font-size-300); --gl-heading-5-line-height: var(--gl-line-height-heading); --gl-heading-6-font-size: var(--gl-font-size-200); --gl-heading-6-line-height: var(--gl-line-height-heading); --gl-heading-scale-100-font-size: var(--gl-font-size-100); --gl-heading-scale-100-line-height: var(--gl-line-height-heading); --gl-heading-scale-200-font-size: var(--gl-font-size-200); --gl-heading-scale-200-line-height: var(--gl-line-height-heading); --gl-heading-scale-300-font-size: var(--gl-font-size-300); --gl-heading-scale-300-line-height: var(--gl-line-height-heading); --gl-heading-scale-400-font-size: var(--gl-font-size-400); --gl-heading-scale-400-line-height: var(--gl-line-height-heading); --gl-heading-scale-500-font-size: var(--gl-font-size-500); --gl-heading-scale-500-line-height: var(--gl-line-height-heading); --gl-heading-scale-600-font-size: var(--gl-font-size-600); --gl-heading-scale-600-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-600-line-height: var(--gl-line-height-heading); --gl-heading-scale-700-font-size: var(--gl-font-size-700); --gl-heading-scale-700-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-700-line-height: var(--gl-line-height-heading); --gl-heading-scale-800-font-size: var(--gl-font-size-800); --gl-heading-scale-800-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-100-fixed-font-size: var(--gl-font-size-100-fixed); --gl-heading-scale-100-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-200-fixed-font-size: var(--gl-font-size-200-fixed); --gl-heading-scale-200-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-300-fixed-font-size: var(--gl-font-size-300-fixed); --gl-heading-scale-300-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-400-fixed-font-size: var(--gl-font-size-400-fixed); --gl-heading-scale-400-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-500-fixed-font-size: var(--gl-font-size-500-fixed); --gl-heading-scale-500-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-600-fixed-font-size: var(--gl-font-size-600-fixed); --gl-heading-scale-600-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-600-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-700-fixed-font-size: var(--gl-font-size-700-fixed); --gl-heading-scale-700-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-700-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-800-fixed-font-size: var(--gl-font-size-800-fixed); --gl-heading-scale-800-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-display-font-size: var(--gl-font-size-800); --gl-heading-display-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-display-margin-bottom: var(--gl-spacing-scale-6); --gl-heading-1-fixed-font-size: var(--gl-font-size-700-fixed); --gl-heading-1-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-1-fixed-line-height: var(--gl-line-height-heading); --gl-heading-2-fixed-font-size: var(--gl-font-size-600-fixed); --gl-heading-2-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-2-fixed-line-height: var(--gl-line-height-heading); --gl-heading-3-fixed-font-size: var(--gl-font-size-500-fixed); --gl-heading-3-fixed-line-height: var(--gl-line-height-heading); --gl-heading-4-fixed-font-size: var(--gl-font-size-400-fixed); --gl-heading-4-fixed-line-height: var(--gl-line-height-heading); --gl-heading-5-fixed-font-size: var(--gl-font-size-300-fixed); --gl-heading-5-fixed-line-height: var(--gl-line-height-heading); --gl-heading-6-fixed-font-size: var(--gl-font-size-200-fixed); --gl-heading-6-fixed-line-height: var(--gl-line-height-heading); --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */ --gl-border-radius-default: var(--gl-border-radius-md); --gl-font-size-base: var(--gl-font-size-md); --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */ --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */ --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */ --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */ --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */ --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */ --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */ --gl-alert-info-title-color: var(--gl-text-color-heading); /** Used for the title color of an info alert. */ --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */ --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */ --gl-alert-success-title-color: var(--gl-text-color-heading); /** Used for the title color of a success alert. */ --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */ --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */ --gl-alert-warning-title-color: var(--gl-text-color-heading); /** Used for the title color of a warning alert. */ --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */ --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */ --gl-alert-danger-title-color: var(--gl-text-color-heading); /** Used for the title color of a danger alert. */ --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */ --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */ --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */ --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */ --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */ --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /** Used for the icon of a muted badge in the focus state. */ --gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /** Used for the background of a neutral badge in the hover state. */ --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /** Used for the text of a neutral badge in the focus state. */ --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /** Used for the icon of a neutral badge in the focus state. */ --gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /** Used for the background of an informational badge in the hover state. */ --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /** Used for the text of an informational badge in the focus state. */ --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /** Used for the icon of an informational badge in the focus state. */ --gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /** Used for the background of a success badge in the hover state. */ --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /** Used for the text of a success badge in the focus state. */ --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /** Used for the icon of a success badge in the focus state. */ --gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /** Used for the background of a warning badge in the hover state. */ --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /** Used for the text of a warning badge in the focus state. */ --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /** Used for the icon of a warning badge in the focus state. */ --gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /** Used for the background of a danger badge in the hover state. */ --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /** Used for the text of a danger badge in the focus state. */ --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /** Used for the icon of a danger badge in the focus state. */ --gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /** Used for the background of a tier related badge in the hover state. */ --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /** Used for the text of a tier related badge in the focus state. */ --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /** Used for the icon of a tier related badge in the focus state. */ --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the hover state. */ --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the focus state. */ --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the active state. */ --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */ --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /** Used for the border of an default primary button in the focus state. */ --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default borderless, tertiary button in the default state. */ --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default borderless, tertiary button in the default state. */ --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default borderless, tertiary button in the active state. */ --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /** Used for the border of a default borderless, tertiary button in the default state. */ --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /** Used for the foreground of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /** Used for the background of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-primary-border-color-hover: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-primary-border-color-active: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the active state. */ --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /** Used for the foreground of a confirm (positive) button in the focus state. */ --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */ --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /** Used for the border of an outlined confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /** Used for the background of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /** Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /** Used for the background of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /** Used for the border of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the focus state. */ --gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the active state. */ --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /** Used for the background of a danger (destructive) primary button in the focus state. */ --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /** Used for the border of a danger (destructive) primary button in the focus state. */ --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /** Used for the foreground of a danger (destructive) button in the focus state. */ --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /** Used for the background of an outlined danger (destructive) button in the focus state. */ --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /** Used for the border of an outlined danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /** Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */ --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */ --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */ --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */ --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a selected button in the default state. */ --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /** Used for the background of a selected button in the hover state. */ --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /** Used for the background of a selected button in the active state. */ --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */ --gl-card-border-radius: var(--gl-border-radius-xl); /** Used for card border radius. */ --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */ --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */ --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */ --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */ --gl-dropdown-border-color: var(--gl-border-color-strong); /** Used for the border of a dropdown. */ --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */ --gl-dropdown-divider-color: var(--gl-border-color-default); /** Used for the divider of a dropdown. */ --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the text of a dropdown option in the default state. */ --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */ --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for the dropdown selected option indicator in the default state. */ --gl-dropdown-option-indicator-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for the dropdown selected option indicator in the hover state. */ --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /** Used for the background of an unselected dropdown option in the default state. */ --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of an unselected dropdown option in the hover state. */ --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /** Used for the background of an unselected dropdown option in the active state. */ --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */ --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */ --gl-nav-item-foreground-color-focus: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a default navigation item in the focus state. */ --gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-hover); /** Used for the background of a default navigation item in the focus state. */ --gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the default state. */ --gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */ --gl-nav-item-selected-background-color-hover: var(--gl-nav-item-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */ --gl-nav-item-selected-background-color-active: var(--gl-nav-item-background-color-active); /** Used for the background of a selected navigation item in the active state. */ --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */ --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */ --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */ --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */ --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */ --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */ --gl-toggle-switch-track-color-unchecked-default: var(--gl-control-background-color-default); /** Used for the track color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-track-color-unchecked-active: var(--gl-action-neutral-background-color-active); /** Used for the track color of an unchecked toggle switch in the active state. */ --gl-toggle-switch-track-color-unchecked-disabled: var(--gl-control-background-color-default); /** Used for the track color of a disabled unchecked toggle switch. */ --gl-toggle-switch-track-color-checked-default: var(--gl-action-selected-background-color-default); /** Used for the track color of a checked toggle switch in the default state. */ --gl-toggle-switch-track-color-checked-hover: var(--gl-action-selected-background-color-hover); /** Used for the track color of a checked toggle switch in the hover state. */ --gl-toggle-switch-track-color-checked-active: var(--gl-action-selected-background-color-active); /** Used for the track color of a checked toggle switch in the active state. */ --gl-toggle-switch-track-color-checked-disabled: var(--gl-action-selected-background-color-disabled); /** Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible. */ --gl-toggle-switch-track-color-loading: var(--gl-action-disabled-background-color); /** Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state. */ --gl-toggle-switch-track-border-color-unchecked-default: var(--gl-control-border-color-default); /** Used for the track border color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-track-border-color-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track border color of an unchecked toggle switch in the hover state. */ --gl-toggle-switch-track-border-color-unchecked-disabled: var(--gl-action-disabled-border-color); /** Used for the track border color of a disabled unchecked toggle switch. */ --gl-toggle-switch-background-color-unchecked-default: var(--gl-action-selected-background-color-default); /** Used for the background color of the unchecked toggle switch thumb in the default state. */ --gl-toggle-switch-background-color-unchecked-disabled: var(--gl-action-disabled-foreground-color); /** Used for the background color of the disabled unchecked toggle switch thumb. */ --gl-toggle-switch-background-color-checked-default: var(--gl-action-selected-foreground-color-default); /** Used for the background color of the checked toggle switch thumb in the default state. */ --gl-toggle-switch-background-color-checked-disabled: var(--gl-action-selected-foreground-color-default); /** Used for the background color of the disabled checked toggle switch thumb. */ --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-selected-foreground-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-icon-color-checked-default: var(--gl-action-selected-background-color-default); /** Used for the icon color of a checked toggle switch in the default state. */ --gl-toggle-switch-icon-color-checked-hover: var(--gl-action-selected-background-color-hover); /** Used for the icon color of a checked toggle switch in the hover state. */ --gl-toggle-switch-icon-color-checked-active: var(--gl-action-selected-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */ --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */ --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */ --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */ --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */ --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */ --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */ --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the border of a selected action in the hover state. */ --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /** Used for the border of a selected action in the active state. */ --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the hover state. */ --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the focus state. */ --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the active state. */ --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /** Used for the background of a neutral action in the focus state. */ --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the hover state. */ --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the focus state. */ --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the active state. */ --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) action in the focus state. */ --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /** Used for the background of a confirm (positive) action in the focus state. */ --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the hover state. */ --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the focus state. */ --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the active state. */ --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a danger (destructive) action in the focus state. */ --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the hover state. */ --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the focus state. */ --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the active state. */ --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /** Used for the background of a strong confirm action in the focus state. */ --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the foreground of a strong confirm action in the hover state. */ --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */ --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */ --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /** Used for the foreground of a strong neutral action in the hover state. */ --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */ --gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus. */ --gl-control-background-color-selected-disabled: var(--gl-action-selected-background-color-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled. */ --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */ --gl-control-border-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */ --gl-control-border-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */ --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */ --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */ --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */ --gl-control-indicator-color-disabled: var(--gl-control-indicator-color-selected); /** Used for disabled checkbox and radio button state indicators. */ --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */ --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */ --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */ --gl-icon-color-subtle: var(--gl-text-color-subtle); /** Used for a static or decorational icon. Can be paired with subtle text. */ --gl-icon-color-strong: var(--gl-text-color-strong); /** Used for an icon with the highest contrast. */ --gl-icon-color-disabled: var(--gl-text-color-disabled); /** Used for an icon within a disabled section. */ --gl-icon-color-link: var(--gl-text-color-link); /** Used for an icon within a link. */ --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */ --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */ --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */ --gl-text-primary: var(--gl-text-color-default); /** Use text.color.default instead. */ --gl-text-secondary: var(--gl-text-color-subtle); /** Use text.color.subtle instead. */ --gl-text-tertiary: var(--gl-text-color-disabled); /** Use text.color.disabled instead. */ --gl-heading-1-font-weight: var(--gl-font-weight-heading); --gl-heading-1-margin-top: var(--gl-heading-default-margin-top); --gl-heading-1-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-1-color: var(--gl-text-color-heading); --gl-heading-2-font-weight: var(--gl-font-weight-heading); --gl-heading-2-margin-top: var(--gl-heading-default-margin-top); --gl-heading-2-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-2-color: var(--gl-text-color-heading); --gl-heading-3-font-weight: var(--gl-font-weight-heading); --gl-heading-3-margin-top: var(--gl-heading-default-margin-top); --gl-heading-3-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-3-color: var(--gl-text-color-heading); --gl-heading-4-font-weight: var(--gl-font-weight-heading); --gl-heading-4-margin-top: var(--gl-heading-default-margin-top); --gl-heading-4-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-4-color: var(--gl-text-color-heading); --gl-heading-5-font-weight: var(--gl-font-weight-heading); --gl-heading-5-margin-top: var(--gl-heading-default-margin-top); --gl-heading-5-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-5-color: var(--gl-text-color-heading); --gl-heading-6-font-weight: var(--gl-font-weight-heading); --gl-heading-6-margin-top: var(--gl-heading-default-margin-top); --gl-heading-6-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-6-color: var(--gl-text-color-heading); --gl-heading-scale-100-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-100-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-100-color: var(--gl-text-color-heading); --gl-heading-scale-200-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-200-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-200-color: var(--gl-text-color-heading); --gl-heading-scale-300-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-300-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-300-color: var(--gl-text-color-heading); --gl-heading-scale-400-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-400-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-400-color: var(--gl-text-color-heading); --gl-heading-scale-500-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-500-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-500-color: var(--gl-text-color-heading); --gl-heading-scale-600-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-600-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-600-color: var(--gl-text-color-heading); --gl-heading-scale-700-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-700-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-700-color: var(--gl-text-color-heading); --gl-heading-scale-800-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-800-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-800-color: var(--gl-text-color-heading); --gl-heading-scale-100-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-100-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-100-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-200-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-200-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-200-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-300-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-300-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-300-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-400-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-400-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-400-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-500-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-500-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-500-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-600-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-600-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-600-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-700-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-700-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-700-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-800-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-800-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-800-fixed-color: var(--gl-text-color-heading); --gl-heading-display-font-weight: var(--gl-font-weight-heading); --gl-heading-display-margin-top: var(--gl-heading-default-margin-top); --gl-heading-display-color: var(--gl-text-color-heading); --gl-heading-1-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-1-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-1-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-1-fixed-color: var(--gl-text-color-heading); --gl-heading-2-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-2-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-2-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-2-fixed-color: var(--gl-text-color-heading); --gl-heading-3-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-3-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-3-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-3-fixed-color: var(--gl-text-color-heading); --gl-heading-4-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-4-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-4-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-4-fixed-color: var(--gl-text-color-heading); --gl-heading-5-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-5-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-5-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-5-fixed-color: var(--gl-text-color-heading); --gl-heading-6-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-6-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-6-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-6-fixed-color: var(--gl-text-color-heading); --gl-avatar-square-border-radius-default: var(--gl-border-radius-default); /** Border radius for square avatars at smaller sizes (16px, 24px, 32px). */ --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */ --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */ --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */ --gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /** Used for the background of a success badge in the focus state. */ --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /** Used for the background of a warning badge in the focus state. */ --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */ --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */ --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */ --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */ --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */ --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /** Used for the border of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /** Used for the border of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /** Used for the border of a default borderless, tertiary button in the active state. */ --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-hover); /** Used for the foreground of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /** Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /** Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /** Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /** Used for the border of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-danger-tertiary-foreground-color-focus: var(--gl-action-danger-foreground-color-focus); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /** Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /** Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /** Used for the border of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the hover state. */ --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the focus state. */ --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the active state. */ --gl-button-selected-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover); /** Used for the foreground of a selected button in the hover state. */ --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /** Used for the foreground of a selected button in the focus state. */ --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /** Used for the foreground of a selected button in the active state. */ --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /** Used for the background of a selected button in the focus state. */ --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */ --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */ --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */ --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */ --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */ --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the focus state. */ --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */ --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */ --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */ --gl-nav-item-foreground-color-active: var(--gl-nav-item-foreground-color-focus); /** Used for the foreground of a default navigation item in the active state. */ --gl-nav-item-selected-foreground-color-focus: var(--gl-nav-item-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */ --gl-nav-item-selected-background-color-focus: var(--gl-nav-item-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */ --gl-tab-selected-indicator-color-default: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */ --gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-default); /** Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size. */ --gl-toggle-switch-track-color-checked-focus: var(--gl-action-selected-background-color-focus); /** Used for the track color of a checked toggle switch in the focus state. */ --gl-toggle-switch-track-border-color-unchecked-focus: var(--gl-toggle-switch-track-border-color-unchecked-hover); /** Used for the track border color of an unchecked toggle switch in the focus state. */ --gl-toggle-switch-track-border-color-checked-default: var(--gl-action-selected-border-color-default); /** Used for the track border color of a checked toggle switch in the default state. */ --gl-toggle-switch-track-border-color-checked-hover: var(--gl-action-selected-border-color-hover); /** Used for the track border color of a checked toggle switch in the hover state. */ --gl-toggle-switch-track-border-color-checked-active: var(--gl-action-selected-border-color-active); /** Used for the track border color of a checked toggle switch in the active state. */ --gl-toggle-switch-track-border-color-checked-disabled: var(--gl-toggle-switch-track-color-checked-disabled); /** Used for the track border color of a disabled checked toggle switch, which matches the track color. */ --gl-toggle-switch-track-border-color-loading: var(--gl-toggle-switch-track-color-loading); /** Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill. */ --gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */ --gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the focus state. */ --gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the active state. */ --gl-toggle-switch-background-color-checked-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the background color of the checked toggle switch thumb in the hover state. */ --gl-toggle-switch-background-color-disabled: var(--gl-toggle-switch-background-color-unchecked-disabled); /** Use toggle.switch.background.color.unchecked.disabled instead. */ --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */ --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-selected-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */ --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */ --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */ --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */ --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */ --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */ --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */ --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */ --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */ --gl-control-border-color-selected-disabled: var(--gl-control-background-color-selected-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled. */ --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */ --gl-nav-item-selected-foreground-color-active: var(--gl-nav-item-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */ --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size. */ --gl-toggle-switch-track-border-color-unchecked-active: var(--gl-toggle-switch-track-border-color-unchecked-focus); /** Used for the track border color of an unchecked toggle switch in the active state. */ --gl-toggle-switch-track-border-color-checked-focus: var(--gl-action-selected-border-color-focus); /** Used for the track border color of a checked toggle switch in the focus state. */ --gl-toggle-switch-background-color-checked-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the background color of the checked toggle switch thumb in the focus state. */ --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */ --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */ --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */ --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */ --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /** Used for the foreground of a strong neutral action in the active state. */ --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */ --gl-toggle-switch-background-color-checked-active: var(--gl-action-selected-foreground-color-active); /** Used for the background color of the checked toggle switch thumb in the active state. */ --gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-selected-foreground-color-active); /** Used for the icon color of an unchecked toggle switch in the active state. */ } /** * Do not edit directly, this file was auto-generated. */ :root.gl-dark, .gl-dark-scope { --gl-border-radius-full: 9999px; --gl-color-alpha-0: rgba(0, 0, 0, 0); --gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02); --gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04); --gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06); --gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08); --gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16); --gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24); --gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4); --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02); --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04); --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06); --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08); --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16); --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24); --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36); --gl-color-alpha-light-40: rgba(255, 255, 255, 0.4); --gl-color-blue-50: #e8f2fd; --gl-color-blue-100: #c8e0f9; --gl-color-blue-200: #9dc8f2; --gl-color-blue-300: #64a7e9; --gl-color-blue-400: #3f8edd; --gl-color-blue-500: #1f73ca; --gl-color-blue-600: #2566b5; --gl-color-blue-700: #27599f; --gl-color-blue-800: #254581; --gl-color-blue-900: #1f3166; --gl-color-blue-950: #1d2153; --gl-color-brand-white: #fff; --gl-color-brand-charcoal: #171321; --gl-color-brand-orange-01g: #ffd1bf; --gl-color-brand-orange-01p: #fca326; --gl-color-brand-orange-02p: #fc6d26; --gl-color-brand-orange-03p: #e24329; --gl-color-brand-purple-01g: #ceb3ef; --gl-color-brand-purple-01p: #a989f5; --gl-color-brand-purple-02p: #7759c2; --gl-color-brand-gray-01: #d1d0d3; --gl-color-brand-gray-02: #a2a1a6; --gl-color-brand-gray-03: #74717a; --gl-color-brand-gray-04: #45424d; --gl-color-brand-gray-05: #2b2838; --gl-color-brand-pink-01g: #ffb9c9; --gl-color-data-green-50: #ddfab7; --gl-color-data-green-100: #c6ed94; --gl-color-data-green-200: #b0d97b; --gl-color-data-green-300: #94c25e; --gl-color-data-green-400: #81ac41; --gl-color-data-green-500: #619025; --gl-color-data-green-600: #4e7f0e; --gl-color-data-green-700: #366800; --gl-color-data-green-800: #275600; --gl-color-data-green-900: #1a4500; --gl-color-data-green-950: #133a03; --gl-color-data-aqua-50: #b5fefd; --gl-color-data-aqua-100: #93f2ef; --gl-color-data-aqua-200: #5edee3; --gl-color-data-aqua-300: #32c5d2; --gl-color-data-aqua-400: #00acc4; --gl-color-data-aqua-500: #0090b1; --gl-color-data-aqua-600: #007b9b; --gl-color-data-aqua-700: #006381; --gl-color-data-aqua-800: #00516c; --gl-color-data-aqua-900: #004059; --gl-color-data-aqua-950: #00344b; --gl-color-data-blue-50: #e9ebff; --gl-color-data-blue-100: #d2dcff; --gl-color-data-blue-200: #b7c6ff; --gl-color-data-blue-300: #97acff; --gl-color-data-blue-400: #7992f5; --gl-color-data-blue-500: #617ae2; --gl-color-data-blue-600: #4e65cd; --gl-color-data-blue-700: #3f51ae; --gl-color-data-blue-800: #374291; --gl-color-data-blue-900: #303470; --gl-color-data-blue-950: #2a2b59; --gl-color-data-magenta-50: #ffe3eb; --gl-color-data-magenta-100: #ffccdb; --gl-color-data-magenta-200: #fcacc5; --gl-color-data-magenta-300: #f88aaf; --gl-color-data-magenta-400: #e86e9a; --gl-color-data-magenta-500: #cf4d81; --gl-color-data-magenta-600: #b93d71; --gl-color-data-magenta-700: #9a2e5d; --gl-color-data-magenta-800: #7c214f; --gl-color-data-magenta-900: #661e3a; --gl-color-data-magenta-950: #541d31; --gl-color-data-orange-50: #fae8d1; --gl-color-data-orange-100: #f5d6b3; --gl-color-data-orange-200: #eebd8c; --gl-color-data-orange-300: #e99b60; --gl-color-data-orange-400: #e07e41; --gl-color-data-orange-500: #c95d2e; --gl-color-data-orange-600: #b14f18; --gl-color-data-orange-700: #92430a; --gl-color-data-orange-800: #6f3500; --gl-color-data-orange-900: #5e2f05; --gl-color-data-orange-950: #4b2707; --gl-color-green-50: #e6f5ea; --gl-color-green-100: #bee6d0; --gl-color-green-200: #84d4b6; --gl-color-green-300: #35b597; --gl-color-green-400: #129c84; --gl-color-green-500: #0d8070; --gl-color-green-600: #0c7265; --gl-color-green-700: #0b645a; --gl-color-green-800: #075048; --gl-color-green-900: #003c36; --gl-color-green-950: #002c26; --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f7f7f5; --gl-color-neutral-50: #ecebea; --gl-color-neutral-100: #dcdbd9; --gl-color-neutral-200: #c1bfbe; --gl-color-neutral-300: #a5a3a3; --gl-color-neutral-400: #8a8888; --gl-color-neutral-500: #747273; --gl-color-neutral-600: #646163; --gl-color-neutral-700: #4d4b4e; --gl-color-neutral-800: #3a383d; --gl-color-neutral-900: #28272d; --gl-color-neutral-950: #18171d; --gl-color-neutral-1000: #050408; --gl-color-orange-50: #fdf0d5; --gl-color-orange-100: #fada9c; --gl-color-orange-200: #f7b951; --gl-color-orange-300: #fb8017; --gl-color-orange-400: #e95f21; --gl-color-orange-500: #c74816; --gl-color-orange-600: #b34013; --gl-color-orange-700: #9e3811; --gl-color-orange-800: #7d2d0e; --gl-color-orange-900: #5d220d; --gl-color-orange-950: #461807; --gl-color-purple-50: #f4f0fc; --gl-color-purple-100: #e1daf7; --gl-color-purple-200: #c9beef; --gl-color-purple-300: #a997e1; --gl-color-purple-400: #927cd7; --gl-color-purple-500: #7862c8; --gl-color-purple-600: #6a54c0; --gl-color-purple-700: #5b46b8; --gl-color-purple-800: #483698; --gl-color-purple-900: #362676; --gl-color-purple-950: #291a5c; --gl-color-red-50: #feeef0; --gl-color-red-100: #ffd3d7; --gl-color-red-200: #ffafb8; --gl-color-red-300: #fc7988; --gl-color-red-400: #f15168; --gl-color-red-500: #de1d4b; --gl-color-red-600: #c52042; --gl-color-red-700: #ac203a; --gl-color-red-800: #891c2f; --gl-color-red-900: #641925; --gl-color-red-950: #48151d; --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'; --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace; --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */ --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */ --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */ --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */ --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */ --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */ --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */ --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */ --gl-font-size-xs: 0.625rem; --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */ --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */ --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */ --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */ --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */ --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */ --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */ --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */ --gl-font-weight-100: 100; --gl-font-weight-300: 300; --gl-font-weight-normal: 400; --gl-font-weight-semibold: 500; --gl-font-weight-bold: 600; --gl-line-height-12: 0.75rem; --gl-line-height-16: 1rem; --gl-line-height-20: 1.25rem; --gl-line-height-24: 1.5rem; --gl-line-height-28: 1.75rem; --gl-line-height-32: 2rem; --gl-line-height-36: 2.25rem; --gl-line-height-42: 2.625rem; --gl-line-height-44: 2.75rem; --gl-line-height-52: 3.25rem; --gl-line-height-heading: 1.25; --gl-opacity-0: 0; --gl-opacity-1: .1; --gl-opacity-2: .2; --gl-opacity-3: .3; --gl-opacity-4: .4; --gl-opacity-5: .5; --gl-opacity-6: .6; --gl-opacity-7: .7; --gl-opacity-8: .8; --gl-opacity-9: .9; --gl-opacity-10: 1; --gl-spacing-scale-0: 0px; --gl-spacing-scale-1: 0.125rem; --gl-spacing-scale-2: 0.25rem; --gl-spacing-scale-3: 0.5rem; --gl-spacing-scale-4: 0.75rem; --gl-spacing-scale-5: 1rem; --gl-spacing-scale-6: 1.5rem; --gl-spacing-scale-7: 2rem; --gl-spacing-scale-8: 2.5rem; --gl-spacing-scale-9: 3rem; --gl-spacing-scale-10: 3.5rem; --gl-spacing-scale-11: 4rem; --gl-spacing-scale-12: 5rem; --gl-spacing-scale-13: 6rem; --gl-spacing-scale-15: 7.5rem; --gl-spacing-scale-18: 9rem; --gl-spacing-scale-20: 10rem; --gl-spacing-scale-26: 13rem; --gl-spacing-scale-28: 14rem; --gl-spacing-scale-30: 15rem; --gl-spacing-scale-31: 15.5rem; --gl-spacing-scale-33: 16.5rem; --gl-spacing-scale-34: 17rem; --gl-spacing-scale-37: 18.5rem; --gl-spacing-scale-48: 24rem; --gl-spacing-scale-62: 31rem; --gl-spacing-scale-75: 37.5rem; --gl-spacing-scale-80: 40rem; --gl-spacing-scale-88: 44rem; --gl-spacing-scale-px: 1px; --gl-spacing-scale-2-5: 0.375rem; --gl-spacing-scale-11-5: 4.5rem; --gl-zindex-0: 0; --gl-zindex-1: 1; --gl-zindex-2: 2; --gl-zindex-3: 3; --gl-zindex-4: 4; --gl-zindex-200: 200; --gl-zindex-9999: 9999; --gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */ --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */ --gl-broadcast-banner-background-color-blue: #235180; /** Used for the background for the blue banner type. */ --gl-broadcast-banner-background-color-green: #1b653f; /** Used for the background for the green banner type. */ --gl-broadcast-banner-background-color-indigo: #41419f; /** Used for the background for the indigo banner type. */ --gl-broadcast-banner-background-color-lightblue: #4977a5; /** Used for the background for the lightblue banner type. */ --gl-broadcast-banner-background-color-lightgreen: #308258; /** Used for the background for the lightgreen banner type. */ --gl-broadcast-banner-background-color-lightindigo: #6666c4; /** Used for the background for the lightindigo banner type. */ --gl-broadcast-banner-background-color-lightred: #ad4a3b; /** Used for the background for the lightred banner type. */ --gl-broadcast-banner-background-color-red: #8f2110; /** Used for the background for the red banner type. */ --gl-broadcast-banner-border-color-blue: #0b2640; /** Used for the border for the blue banner type. */ --gl-broadcast-banner-border-color-green: #0e4328; /** Used for the border for the green banner type. */ --gl-broadcast-banner-border-color-indigo: #222261; /** Used for the border for the indigo banner type. */ --gl-broadcast-banner-border-color-lightblue: #235180; /** Used for the border for the lightblue banner type. */ --gl-broadcast-banner-border-color-lightgreen: #1b653f; /** Used for the border for the lightgreen banner type. */ --gl-broadcast-banner-border-color-lightindigo: #41419f; /** Used for the border for the lightindigo banner type. */ --gl-broadcast-banner-border-color-lightred: #8f2110; /** Used for the border for the lightred banner type. */ --gl-broadcast-banner-border-color-red: #580d02; /** Used for the border for the red banner type. */ --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */ --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */ --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */ --gl-button-danger-secondary-background-color-default: rgba(241, 81, 104, 0.4); /** Used for the background of an outlined danger (destructive) button in the default state. */ --gl-button-danger-secondary-background-color-hover: rgba(241, 81, 104, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */ --gl-button-danger-secondary-background-color-active: rgba(241, 81, 104, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */ --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */ --gl-chart-threshold-area-color: rgba(222, 29, 75, 0.1); /** Used in charts to delineate a threshold area in a chart. */ --gl-illustration-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail. */ --gl-illustration-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail. */ --gl-illustration-fill-color-default: #423f4f; /** Default fill color for an element where specific meaning or emphasis is not required. */ --gl-illustration-status-fill-color-neutral: #6f6796; /** Used as a fill to convey a concept which is neither positive or negative. */ --gl-illustration-status-fill-color-success: #3b8581; /** Used as a fill to convey a success or active concept, has a positive connotation. */ --gl-illustration-status-fill-color-warning: #ab752f; /** Used as a fill to convey a caution or warning concept, has a slightly negative connotation. */ --gl-illustration-status-fill-color-danger: #aa563a; /** Used as a fill to convey a critical or danger concept, has a negative connotation. */ --gl-illustration-accent-stroke-color-orange: #e3865f; /** Used for orange accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-stroke-color-teal: #6baea3; /** Used for teal accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-stroke-color-strong: #aea5d6; /** Used for dark accent stroke detail on an object or attention-drawing element. */ --gl-illustration-accent-fill-color-subtle: #5c5371; /** Used to add depth to a secondary element and supporting surface. */ --gl-illustration-accent-fill-color-strong: #6f6796; /** Used for an element requiring visual emphasis without competing with primary content or status indicators. */ --gl-illustration-accent-fill-color-orange: #aa563a; /** Used to add orange to a secondary element and supporting surface. */ --gl-illustration-accent-fill-color-teal: #3b8581; /** Used to add teal to a secondary element and supporting surface. */ --gl-illustration-base-fill-color: #32303c; /** Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion. */ --gl-illustration-isometric-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail in isometric illustration. */ --gl-illustration-isometric-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail in isometric illustration. */ --gl-illustration-isometric-glyph-top-fill-color: #5a566c; /** Used for the top face of isometric text and number elements. */ --gl-illustration-isometric-glyph-front-fill-color: #423f4f; /** Used for the front face of isometric text and number elements. */ --gl-illustration-isometric-glyph-side-fill-color: #373441; /** Used for the side face of isometric text and number elements. */ --gl-illustration-isometric-glyph-shadow-fill-color: #292730; /** Used for the shadow of isometric text and number elements. */ --gl-illustration-isometric-object-top-fill-color: #aa563a; /** Used for the top face of an isometric object or symbol. */ --gl-illustration-isometric-object-front-fill-color: #a54623; /** Used for the front face of an isometric object or symbol. */ --gl-illustration-isometric-object-side-fill-color: #8f4424; /** Used for the side face of an isometric object or symbol. */ --gl-illustration-isometric-object-highlight-fill-color: #423f4f; /** Used for the face of an isometric object or symbol that requires maximum distinction from other elements. */ --gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; /** Used for the shadow of an isometric object or symbol. */ --gl-illustration-isometric-accent-top-fill-color: #6d6972; /** Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-accent-front-fill-color: #49474d; /** Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-accent-side-fill-color: #212023; /** Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */ --gl-illustration-isometric-base-top-fill-color: #32303c; /** Used for the top surface of an isometric base platform. */ --gl-illustration-isometric-base-front-fill-color: #2b2932; /** Used for the front face of an isometric base platform. */ --gl-illustration-isometric-base-side-fill-color: #23222b; /** Used for the side face of an isometric base platform. */ --gl-nav-item-font-weight: 425; /** Used for the font weight of a navigation item */ --data-viz-green-50: #133a03; --data-viz-green-100: #1a4500; --data-viz-green-200: #275600; --data-viz-green-300: #366800; --data-viz-green-400: #4e7f0e; --data-viz-green-500: #619025; --data-viz-green-600: #81ac41; --data-viz-green-700: #94c25e; --data-viz-green-800: #b0d97b; --data-viz-green-900: #c6ed94; --data-viz-green-950: #ddfab7; --data-viz-aqua-50: #00344b; --data-viz-aqua-100: #004059; --data-viz-aqua-200: #00516c; --data-viz-aqua-300: #006381; --data-viz-aqua-400: #007b9b; --data-viz-aqua-500: #0090b1; --data-viz-aqua-600: #00acc4; --data-viz-aqua-700: #32c5d2; --data-viz-aqua-800: #5edee3; --data-viz-aqua-900: #93f2ef; --data-viz-aqua-950: #b5fefd; --data-viz-blue-50: #2a2b59; --data-viz-blue-100: #303470; --data-viz-blue-200: #374291; --data-viz-blue-300: #3f51ae; --data-viz-blue-400: #4e65cd; --data-viz-blue-500: #617ae2; --data-viz-blue-600: #7992f5; --data-viz-blue-700: #97acff; --data-viz-blue-800: #b7c6ff; --data-viz-blue-900: #d2dcff; --data-viz-blue-950: #e9ebff; --data-viz-magenta-50: #541d31; --data-viz-magenta-100: #661e3a; --data-viz-magenta-200: #7c214f; --data-viz-magenta-300: #9a2e5d; --data-viz-magenta-400: #b93d71; --data-viz-magenta-500: #cf4d81; --data-viz-magenta-600: #e86e9a; --data-viz-magenta-700: #f88aaf; --data-viz-magenta-800: #fcacc5; --data-viz-magenta-900: #ffccdb; --data-viz-magenta-950: #ffe3eb; --data-viz-orange-50: #4b2707; --data-viz-orange-100: #5e2f05; --data-viz-orange-200: #6f3500; --data-viz-orange-300: #92430a; --data-viz-orange-400: #b14f18; --data-viz-orange-500: #c95d2e; --data-viz-orange-600: #e07e41; --data-viz-orange-700: #e99b60; --data-viz-orange-800: #eebd8c; --data-viz-orange-900: #f5d6b3; --data-viz-orange-950: #fae8d1; --blue-950: #f2f9ff; --green-950: #f1fdf6; --orange-950: #fff4e1; --red-950: #fff4f3; --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */ --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */ --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */ --brand-orange-03: #e24329; /** Use color.brand-orange.03p instead. */ --brand-purple-01: #a989f5; /** Use color.purple.01p instead. */ --brand-purple-02: #7759c2; /** Use color.purple.02p instead. */ --brand-gray-01: #d1d0d3; /** Use color.brand-gray.01 instead. */ --brand-gray-02: #a2a1a6; /** Use color.brand-gray.02 instead. */ --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */ --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */ --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */ --t-gray-a-16: rgba(5, 5, 6, 0.16); /** Use color.alpha.dark.16 instead. */ --t-gray-a-24: rgba(5, 5, 6, 0.24); /** Use color.alpha.dark.24 instead. */ --t-gray-a-02: rgba(5, 5, 6, 0.02); /** Use color.alpha.dark.2 instead. */ --t-gray-a-04: rgba(5, 5, 6, 0.04); /** Use color.alpha.dark.4 instead. */ --t-gray-a-06: rgba(5, 5, 6, 0.06); /** Use color.alpha.dark.6 instead. */ --t-gray-a-08: rgba(5, 5, 6, 0.08); /** Use color.alpha.dark.8 instead. */ --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */ --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */ --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */ --t-white-a-02: rgba(255, 255, 255, 0.02); /** Use color.alpha.light.2 instead. */ --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */ --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */ --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */ --gl-action-danger-background-color-default: rgba(241, 81, 104, 0); /** Used for the background of a danger (destructive) action in the default state. */ --gl-action-danger-background-color-hover: rgba(241, 81, 104, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */ --gl-action-danger-background-color-active: rgba(241, 81, 104, 0.16); /** Used for the background of a danger (destructive) action in the active state. */ --gl-background-color-overlay: rgba(0, 0, 0, 0.64); /** Used for an overlay that covers other content. */ --gl-letter-spacing-heading: -0.01em; --gl-heading-3-letter-spacing: inherit; --gl-heading-4-letter-spacing: inherit; --gl-heading-5-letter-spacing: inherit; --gl-heading-6-letter-spacing: inherit; --gl-heading-scale-100-letter-spacing: inherit; --gl-heading-scale-200-letter-spacing: inherit; --gl-heading-scale-300-letter-spacing: inherit; --gl-heading-scale-400-letter-spacing: inherit; --gl-heading-scale-500-letter-spacing: inherit; --gl-heading-scale-800-line-height: 1.125; --gl-heading-scale-100-fixed-letter-spacing: inherit; --gl-heading-scale-200-fixed-letter-spacing: inherit; --gl-heading-scale-300-fixed-letter-spacing: inherit; --gl-heading-scale-400-fixed-letter-spacing: inherit; --gl-heading-scale-500-fixed-letter-spacing: inherit; --gl-heading-scale-800-fixed-line-height: 1.125; --gl-heading-display-line-height: 1.125; --gl-heading-3-fixed-letter-spacing: inherit; --gl-heading-4-fixed-letter-spacing: inherit; --gl-heading-5-fixed-letter-spacing: inherit; --gl-heading-6-fixed-letter-spacing: inherit; --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */ --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */ --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */ --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */ --gl-border-radius-none: var(--gl-spacing-scale-0); --gl-border-radius-xs: var(--gl-spacing-scale-px); --gl-border-radius-sm: var(--gl-spacing-scale-1); --gl-border-radius-md: var(--gl-spacing-scale-2); --gl-border-radius-lg: var(--gl-spacing-scale-3); --gl-border-radius-xl: var(--gl-spacing-scale-4); --gl-border-radius-2xl: var(--gl-spacing-scale-5); --gl-border-radius-3xl: var(--gl-spacing-scale-6); --gl-font-size-sm: var(--gl-font-size-100); --gl-font-size-md: var(--gl-font-size-300); --gl-font-size-lg: var(--gl-font-size-400); --gl-font-weight-heading: var(--gl-font-weight-bold); --gl-heading-default-margin-top: var(--gl-spacing-scale-0); --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5); --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */ --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border color of a neutral alert. */ --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */ --gl-alert-info-title-color: var(--gl-color-blue-200); /** Used for the title color of an info alert. */ --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */ --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */ --gl-alert-success-title-color: var(--gl-color-green-200); /** Used for the title color of a success alert. */ --gl-alert-success-border-top-color: var(--gl-color-green-400); /** Used for the border color of a success alert. */ --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */ --gl-alert-warning-title-color: var(--gl-color-orange-200); /** Used for the title color of a warning alert. */ --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /** Used for the border color of a warning alert. */ --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */ --gl-alert-danger-title-color: var(--gl-color-red-200); /** Used for the title color of a danger alert. */ --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */ --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */ --gl-application-chrome-background-color: var(--gl-color-neutral-1000); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */ --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /** Used to define the edge of an avatar. */ --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /** Used to increase the edge definition of an avatar in the hover state. */ --gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */ --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /** Red text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-200); /** Purple text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-200); /** Blue text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-green: var(--gl-color-green-200); /** Green text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-200); /** Orange text color for avatar fallback with no particular meaning. */ --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-200); /** Neutral text color for avatar fallback with no particular meaning. */ --gl-badge-muted-background-color-default: var(--gl-color-neutral-400); /** Used for the background of a muted badge when static or the default state when linked. */ --gl-badge-muted-background-color-active: var(--gl-color-neutral-300); /** Used for the background of a muted badge in the active state. */ --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a muted badge when static or the default state when linked. */ --gl-badge-muted-border-color-hover: var(--gl-color-neutral-300); /** Used for the border of a muted badge in the hover state. */ --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the focus state. */ --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the active state. */ --gl-badge-muted-text-color-default: var(--gl-color-neutral-950); /** Used for the text of a muted badge when static or the default state when linked. */ --gl-badge-muted-text-color-hover: var(--gl-color-neutral-950); /** Used for the text of a muted badge in the hover state. */ --gl-badge-muted-text-color-active: var(--gl-color-neutral-950); /** Used for the text of a muted badge in the active state. */ --gl-badge-muted-icon-color-default: var(--gl-color-neutral-950); /** Used for the icon of a muted badge when static or the default state when linked. */ --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-950); /** Used for the icon of a muted badge in the hover state. */ --gl-badge-muted-icon-color-active: var(--gl-color-neutral-950); /** Used for the icon of a muted badge in the active state. */ --gl-badge-neutral-background-color-default: var(--gl-color-neutral-300); /** Used for the background of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a neutral badge in the active state. */ --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a neutral badge in the hover state. */ --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the focus state. */ --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the active state. */ --gl-badge-neutral-text-color-default: var(--gl-color-neutral-950); /** Used for the text of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-950); /** Used for the text of a neutral badge in the hover state. */ --gl-badge-neutral-text-color-active: var(--gl-color-neutral-950); /** Used for the text of a neutral badge in the active state. */ --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge when static or the default state when linked. */ --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge in the hover state. */ --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge in the active state. */ --gl-badge-info-background-color-default: var(--gl-color-blue-300); /** Used for the background of an informational badge when static or the default state when linked. */ --gl-badge-info-background-color-active: var(--gl-color-blue-200); /** Used for the background of an informational badge in the active state. */ --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an informational badge when static or the default state when linked. */ --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /** Used for the border of an informational badge in the hover state. */ --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the focus state. */ --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the active state. */ --gl-badge-info-text-color-default: var(--gl-color-blue-950); /** Used for the text of an informational badge when static or the default state when linked. */ --gl-badge-info-text-color-hover: var(--gl-color-blue-950); /** Used for the text of an informational badge in the hover state. */ --gl-badge-info-text-color-active: var(--gl-color-blue-950); /** Used for the text of an informational badge in the active state. */ --gl-badge-info-icon-color-default: var(--gl-color-blue-950); /** Used for the icon of an informational badge when static or the default state when linked. */ --gl-badge-info-icon-color-hover: var(--gl-color-blue-950); /** Used for the icon of an informational badge in the hover state. */ --gl-badge-info-icon-color-active: var(--gl-color-blue-950); /** Used for the icon of an informational badge in the active state. */ --gl-badge-success-background-color-default: var(--gl-color-green-300); /** Used for the background of a success badge when static or the default state when linked. */ --gl-badge-success-background-color-active: var(--gl-color-green-200); /** Used for the background of a success badge in the active state. */ --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a success badge when static or the default state when linked. */ --gl-badge-success-border-color-hover: var(--gl-color-green-200); /** Used for the border of a success badge in the hover state. */ --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a success badge in the focus state. */ --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a success badge in the active state. */ --gl-badge-success-text-color-default: var(--gl-color-green-950); /** Used for the text of a success badge when static or the default state when linked. */ --gl-badge-success-text-color-hover: var(--gl-color-green-950); /** Used for the text of a success badge in the hover state. */ --gl-badge-success-text-color-active: var(--gl-color-green-950); /** Used for the text of a success badge in the active state. */ --gl-badge-success-icon-color-default: var(--gl-color-green-950); /** Used for the icon of a success badge when static or the default state when linked. */ --gl-badge-success-icon-color-hover: var(--gl-color-green-950); /** Used for the icon of a success badge in the hover state. */ --gl-badge-success-icon-color-active: var(--gl-color-green-950); /** Used for the icon of a success badge in the active state. */ --gl-badge-warning-background-color-default: var(--gl-color-orange-300); /** Used for the background of a warning badge when static or the default state when linked. */ --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /** Used for the background of a warning badge in the active state. */ --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a warning badge when static or the default state when linked. */ --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /** Used for the border of a warning badge in the hover state. */ --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the focus state. */ --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the active state. */ --gl-badge-warning-text-color-default: var(--gl-color-orange-950); /** Used for the text of a warning badge when static or the default state when linked. */ --gl-badge-warning-text-color-hover: var(--gl-color-orange-950); /** Used for the text of a warning badge in the hover state. */ --gl-badge-warning-text-color-active: var(--gl-color-orange-950); /** Used for the text of a warning badge in the active state. */ --gl-badge-warning-icon-color-default: var(--gl-color-orange-950); /** Used for the icon of a warning badge when static or the default state when linked. */ --gl-badge-warning-icon-color-hover: var(--gl-color-orange-950); /** Used for the icon of a warning badge in the hover state. */ --gl-badge-warning-icon-color-active: var(--gl-color-orange-950); /** Used for the icon of a warning badge in the active state. */ --gl-badge-danger-background-color-default: var(--gl-color-red-300); /** Used for the background of a danger badge when static or the default state when linked. */ --gl-badge-danger-background-color-active: var(--gl-color-red-200); /** Used for the background of a danger badge in the active state. */ --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger badge when static or the default state when linked. */ --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /** Used for the border of a danger badge in the hover state. */ --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the focus state. */ --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the active state. */ --gl-badge-danger-text-color-default: var(--gl-color-red-950); /** Used for the text of a danger badge when static or the default state when linked. */ --gl-badge-danger-text-color-hover: var(--gl-color-red-950); /** Used for the text of a danger badge in the hover state. */ --gl-badge-danger-text-color-active: var(--gl-color-red-950); /** Used for the text of a danger badge in the active state. */ --gl-badge-danger-icon-color-default: var(--gl-color-red-950); /** Used for the icon of a danger badge when static or the default state when linked. */ --gl-badge-danger-icon-color-hover: var(--gl-color-red-950); /** Used for the icon of a danger badge in the hover state. */ --gl-badge-danger-icon-color-active: var(--gl-color-red-950); /** Used for the icon of a danger badge in the active state. */ --gl-badge-tier-background-color-default: var(--gl-color-purple-300); /** Used for the background of a tier related badge when static or the default state when linked. */ --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /** Used for the background of a tier related badge in the active state. */ --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a tier related badge when static or the default state when linked. */ --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /** Used for the border of a tier related badge in the hover state. */ --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the focus state. */ --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the active state. */ --gl-badge-tier-text-color-default: var(--gl-color-purple-950); /** Used for the text of a tier related badge when static or the default state when linked. */ --gl-badge-tier-text-color-hover: var(--gl-color-purple-950); /** Used for the text of a tier related badge in the hover state. */ --gl-badge-tier-text-color-active: var(--gl-color-purple-950); /** Used for the text of a tier related badge in the active state. */ --gl-badge-tier-icon-color-default: var(--gl-color-purple-950); /** Used for the icon of a tier related badge when static or the default state when linked. */ --gl-badge-tier-icon-color-hover: var(--gl-color-purple-950); /** Used for the icon of a tier related badge in the hover state. */ --gl-badge-tier-icon-color-active: var(--gl-color-purple-950); /** Used for the icon of a tier related badge in the active state. */ --gl-banner-intro-border-color: var(--gl-color-blue-700); /** Used for the border of an info banner. */ --gl-banner-promo-background-color: var(--gl-color-purple-950); /** Used for the background of a promo banner. */ --gl-banner-promo-border-color: var(--gl-color-purple-700); /** Used for the border of a promo banner. */ --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */ --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */ --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */ --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */ --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */ --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */ --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */ --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */ --gl-broadcast-banner-icon-color-indigo: var(--gl-color-neutral-0); /** Used for the icon for the indigo banner type. */ --gl-broadcast-banner-icon-color-light: var(--gl-color-neutral-900); /** Used for the icon for the light banner type. */ --gl-broadcast-banner-icon-color-lightblue: var(--gl-color-neutral-0); /** Used for the icon for the lightblue banner type. */ --gl-broadcast-banner-icon-color-lightgreen: var(--gl-color-neutral-0); /** Used for the icon for the lightgreen banner type. */ --gl-broadcast-banner-icon-color-lightindigo: var(--gl-color-neutral-0); /** Used for the icon for the lightindigo banner type. */ --gl-broadcast-banner-icon-color-lightred: var(--gl-color-neutral-0); /** Used for the icon for the lightred banner type. */ --gl-broadcast-banner-icon-color-red: var(--gl-color-neutral-0); /** Used for the icon for the red banner type. */ --gl-broadcast-banner-text-color-blue: var(--gl-color-neutral-0); /** Used for the text for the blue banner type. */ --gl-broadcast-banner-text-color-dark: var(--gl-color-neutral-0); /** Used for the text for the dark banner type. */ --gl-broadcast-banner-text-color-green: var(--gl-color-neutral-0); /** Used for the text for the green banner type. */ --gl-broadcast-banner-text-color-indigo: var(--gl-color-neutral-0); /** Used for the text for the indigo banner type. */ --gl-broadcast-banner-text-color-light: var(--gl-color-neutral-900); /** Used for the text for the light banner type. */ --gl-broadcast-banner-text-color-lightblue: var(--gl-color-neutral-0); /** Used for the text for the lightblue banner type. */ --gl-broadcast-banner-text-color-lightgreen: var(--gl-color-neutral-0); /** Used for the text for the lightgreen banner type. */ --gl-broadcast-banner-text-color-lightindigo: var(--gl-color-neutral-0); /** Used for the text for the lightindigo banner type. */ --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /** Used for the text for the lightred banner type. */ --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /** Used for the text for the red banner type. */ --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a default primary button in the default state. */ --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */ --gl-button-default-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the default state. */ --gl-button-default-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the hover state. */ --gl-button-default-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the active state. */ --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) primary button in the default state. */ --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a confirm (positive) primary button in the default state. */ --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-10); /** Used for the background of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-background-color-active: var(--gl-color-neutral-100); /** Used for the background of a confirm (positive) primary button in the active state. */ --gl-button-confirm-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the default state. */ --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a confirm (positive) button in the default state. */ --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-neutral-10); /** Used for the foreground of a confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a confirm (positive) button in the active state. */ --gl-button-confirm-secondary-background-color-default: var(--gl-color-alpha-light-24); /** Used for the background of an outlined confirm (positive) button in the default state. */ --gl-button-confirm-secondary-background-color-hover: var(--gl-color-alpha-light-40); /** Used for the background of an outlined confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-background-color-active: var(--gl-color-alpha-light-16); /** Used for the background of an outlined confirm (positive) button in the active state. */ --gl-button-confirm-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the default state. */ --gl-button-confirm-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the hover state. */ --gl-button-confirm-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the active state. */ --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-background-color-default: var(--gl-color-red-400); /** Used for the background of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-background-color-hover: var(--gl-color-red-300); /** Used for the background of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-background-color-active: var(--gl-color-red-200); /** Used for the background of a danger (destructive) primary button in the active state. */ --gl-button-danger-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the default state. */ --gl-button-danger-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the active state. */ --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) button in the default state. */ --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the hover state. */ --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the active state. */ --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /** Used for the background of an outlined danger (destructive) button in the focus state. */ --gl-button-danger-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the default state. */ --gl-button-danger-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the hover state. */ --gl-button-danger-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the active state. */ --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /** Used for the background of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /** Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /** Used for the background of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /** Used for the border of a dashed button in the default state. */ --gl-button-dashed-border-color-active: var(--gl-color-neutral-300); /** Used for the border of a dashed button in the active state. */ --gl-button-selected-foreground-color-default: var(--gl-color-neutral-900); /** Used for the foreground of a selected button in the default state. */ --gl-button-selected-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the hover state. */ --gl-button-selected-foreground-color-focus: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the focus state. */ --gl-button-selected-foreground-color-active: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the active state. */ --gl-button-selected-background-color-default: var(--gl-color-neutral-300); /** Used for the background of a selected button in the default state. */ --gl-button-selected-background-color-hover: var(--gl-color-neutral-200); /** Used for the background of a selected button in the hover state. */ --gl-button-selected-background-color-focus: var(--gl-color-neutral-200); /** Used for the background of a selected button in the focus state. */ --gl-button-selected-background-color-active: var(--gl-color-neutral-400); /** Used for the background of a selected button in the active state. */ --gl-button-selected-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a selected button in the default state. */ --gl-button-selected-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a selected button in the hover state. */ --gl-button-selected-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a selected button in the active state. */ --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /** Used for the foreground of a disabled button. */ --gl-button-disabled-border-color: var(--gl-color-alpha-0); /** Used for the border of a disabled button. */ --gl-button-count-background-color: var(--gl-color-alpha-light-16); /** Used for the background of a button count element. */ --gl-chart-axis-line-color: var(--gl-color-neutral-700); /** Used in charts for axis line color. */ --gl-chart-threshold-line-color: var(--gl-color-red-600); /** Used in charts to divide a threshold area in a chart from other data. */ --gl-chart-zoom-filler-color: var(--gl-color-alpha-light-16); /** Used in charts for the overlay color when zooming in on a specific area of data. */ --gl-datepicker-background-color: var(--gl-color-neutral-900); /** Used for the background color of datepicker. */ --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */ --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */ --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */ --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */ --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */ --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */ --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */ --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-700); /** Used for the filtered search data token background color in the hover state. */ --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search operator background color in the default state. */ --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search operator token background color in the hover state. */ --gl-label-light-text-color: var(--gl-color-neutral-950); /** Used for the label text color on a light background color. */ --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a light background color in the default state. */ --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /** Used for the label remove button background on a light background color in the hover state. */ --gl-label-light-button-icon-color-default: var(--gl-color-neutral-950); /** Used for the label remove button icon on a light background color in the default state. */ --gl-label-dark-text-color: var(--gl-color-neutral-0); /** Used for the label text color on a dark background color. */ --gl-label-dark-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a dark background color in the default state. */ --gl-label-dark-button-background-color-hover: var(--gl-color-neutral-0); /** Used for the label remove button background on a dark background color in the hover state. */ --gl-label-dark-button-icon-color-default: var(--gl-color-neutral-0); /** Used for the label remove button icon on a dark background color in the default state. */ --gl-label-scoped-text-color: var(--gl-color-neutral-0); /** Used for the scoped label text color. */ --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /** Used for the scoped label remove button background in the hover state. */ --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /** Used for the scoped label remove button icon in the default state. */ --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /** Used for the scoped label remove button icon in the hover state. */ --gl-link-mention-text-color-default: var(--gl-color-blue-100); /** Used for the mention link text color. */ --gl-link-mention-text-color-current: var(--gl-color-orange-100); /** Used for the mention link text color when referencing the current user. */ --gl-link-mention-background-color-default: var(--gl-color-blue-800); /** Used for the mention link default background. */ --gl-link-mention-background-color-current: var(--gl-color-orange-800); /** Used for the mention link background when referencing the current user. */ --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */ --gl-nav-item-foreground-color-default: var(--gl-color-neutral-200); /** Used for the foreground of a default navigation item in the default state. */ --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a default navigation item in the hover state. */ --gl-nav-item-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a default navigation item in the default state. */ --gl-nav-item-background-color-hover: var(--gl-color-neutral-800); /** Used for the background of a default navigation item in the hover state. */ --gl-nav-item-background-color-active: var(--gl-color-neutral-950); /** Used for the background of a default navigation item in the active state. */ --gl-nav-item-selected-font-weight: var(--gl-font-weight-bold); /** Used for the font weight of a selected navigation item. */ --gl-nav-item-selected-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a selected navigation item in the default state. */ --gl-nav-item-selected-indicator-color: var(--gl-color-orange-300); /** Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss. */ --gl-progress-bar-track-color: var(--gl-color-neutral-700); /** Used for the track color for all progress-bar variants. */ --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /** Used for the skeleton loader background color. */ --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /** Used for the animated shimmer effect in a skeleton loader. */ --gl-spinner-track-color-default: var(--gl-color-neutral-600); /** Used for the static track (background) of a loading spinner. */ --gl-spinner-track-color-light: var(--gl-color-neutral-800); /** Used for the static track (background) of a loading spinner on a dark background. */ --gl-spinner-segment-color-default: var(--gl-color-neutral-100); /** Used for the animated segment of a loading spinner. */ --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /** Used for the animated segment of a loading spinner on a dark background. */ --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */ --gl-token-background-color: var(--gl-color-neutral-800); /** Used for the token background color. */ --gl-tooltip-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode. */ --black: var(--gl-color-neutral-0); --white: var(--gl-color-neutral-900); --blue-50: var(--gl-color-blue-900); --blue-100: var(--gl-color-blue-800); --blue-200: var(--gl-color-blue-700); --blue-300: var(--gl-color-blue-600); --blue-400: var(--gl-color-blue-500); --blue-500: var(--gl-color-blue-400); --blue-600: var(--gl-color-blue-300); --blue-700: var(--gl-color-blue-200); --blue-800: var(--gl-color-blue-100); --blue-900: var(--gl-color-blue-50); --gray-10: var(--gl-color-neutral-950); --gray-50: var(--gl-color-neutral-900); --gray-100: var(--gl-color-neutral-800); --gray-200: var(--gl-color-neutral-700); --gray-300: var(--gl-color-neutral-600); --gray-400: var(--gl-color-neutral-500); --gray-500: var(--gl-color-neutral-400); --gray-600: var(--gl-color-neutral-300); --gray-700: var(--gl-color-neutral-200); --gray-800: var(--gl-color-neutral-100); --gray-900: var(--gl-color-neutral-50); --gray-950: var(--gl-color-neutral-10); --green-50: var(--gl-color-green-900); --green-100: var(--gl-color-green-800); --green-200: var(--gl-color-green-700); --green-300: var(--gl-color-green-600); --green-400: var(--gl-color-green-500); --green-500: var(--gl-color-green-400); --green-600: var(--gl-color-green-300); --green-700: var(--gl-color-green-200); --green-800: var(--gl-color-green-100); --green-900: var(--gl-color-green-50); --orange-50: var(--gl-color-orange-900); --orange-100: var(--gl-color-orange-800); --orange-200: var(--gl-color-orange-700); --orange-300: var(--gl-color-orange-600); --orange-400: var(--gl-color-orange-500); --orange-500: var(--gl-color-orange-400); --orange-600: var(--gl-color-orange-300); --orange-700: var(--gl-color-orange-200); --orange-800: var(--gl-color-orange-100); --orange-900: var(--gl-color-orange-50); --purple-50: var(--gl-color-purple-950); --purple-100: var(--gl-color-purple-900); --purple-200: var(--gl-color-purple-800); --purple-300: var(--gl-color-purple-700); --purple-400: var(--gl-color-purple-600); --purple-500: var(--gl-color-purple-500); --purple-600: var(--gl-color-purple-400); --purple-700: var(--gl-color-purple-300); --purple-800: var(--gl-color-purple-200); --purple-900: var(--gl-color-purple-100); --purple-950: var(--gl-color-purple-50); --red-50: var(--gl-color-red-900); --red-100: var(--gl-color-red-800); --red-200: var(--gl-color-red-700); --red-300: var(--gl-color-red-600); --red-400: var(--gl-color-red-500); --red-500: var(--gl-color-red-400); --red-600: var(--gl-color-red-300); --red-700: var(--gl-color-red-200); --red-800: var(--gl-color-red-100); --red-900: var(--gl-color-red-50); --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /** Used for the foreground of a disabled action. */ --gl-action-disabled-background-color: var(--gl-color-neutral-900); /** Used for the background of a disabled action. */ --gl-action-disabled-border-color: var(--gl-color-neutral-800); /** Used for the border of a disabled action. */ --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a selected action in the default state. */ --gl-action-selected-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a selected action in the default state. */ --gl-action-selected-background-color-hover: var(--gl-color-neutral-10); /** Used for the background of a selected action in the hover state. */ --gl-action-selected-background-color-active: var(--gl-color-neutral-0); /** Used for the background of a selected action in the active state. */ --gl-action-selected-background-color-disabled: var(--gl-color-neutral-500); /** Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled. */ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a neutral action in the default state. */ --gl-action-neutral-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a neutral action in the default state. */ --gl-action-neutral-background-color-hover: var(--gl-color-alpha-light-16); /** Used for the background of a neutral action in the hover state. */ --gl-action-neutral-background-color-active: var(--gl-color-alpha-light-8); /** Used for the background of a neutral action in the active state. */ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral action in the default state. */ --gl-action-confirm-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a confirm (positive) action in the default state. */ --gl-action-confirm-foreground-color-hover: var(--gl-color-neutral-10); /** Used for the foreground of a confirm (positive) action in the hover state. */ --gl-action-confirm-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a confirm (positive) action in the active state. */ --gl-action-confirm-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a confirm (positive) action in the default state. */ --gl-action-confirm-background-color-hover: var(--gl-color-alpha-light-16); /** Used for the background of a confirm (positive) action in the hover state. */ --gl-action-confirm-background-color-active: var(--gl-color-alpha-light-8); /** Used for the background of a confirm (positive) action in the active state. */ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */ --gl-action-danger-foreground-color-default: var(--gl-color-red-200); /** Used for the foreground of a danger (destructive) action in the default state. */ --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) action in the hover state. */ --gl-action-danger-foreground-color-active: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) action in the active state. */ --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /** Used for the background of a danger (destructive) action in the focus state. */ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger action in the default state. */ --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-300); /** Used for the background of a strong confirm action in the default state. */ --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-200); /** Used for the background of a strong confirm action in the hover state. */ --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-400); /** Used for the background of a strong confirm action in the active state. */ --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a strong confirm action in the default state. */ --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong confirm action in the default state. */ --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /** Used for the background of a strong neutral action in the default state. */ --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /** Used for the background of a strong neutral action in the hover state. */ --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /** Used for the background of a strong neutral action in the active state. */ --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a strong neutral action in the default state. */ --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the hover state. */ --gl-action-strong-neutral-foreground-color-focus: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the focus state. */ --gl-action-strong-neutral-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the active state. */ --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong neutral action in the default state. */ --gl-background-color-default: var(--gl-color-neutral-950); /** Used for the default background color. */ --gl-background-color-subtle: var(--gl-color-neutral-900); /** Used to slightly differentiate the background from the default. */ --gl-background-color-strong: var(--gl-color-neutral-800); /** Used to make the background easily stand out from the default. */ --gl-background-color-disabled: var(--gl-color-neutral-900); /** Used to identify a disabled section. */ --gl-background-color-overlap: var(--gl-color-neutral-900); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */ --gl-background-color-section: var(--gl-color-neutral-800); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */ --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */ --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (input, textarea) background. */ --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */ --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /** Used for the background of static content that prepends or appends a text input. */ --gl-control-background-color-selected-default: var(--gl-color-neutral-50); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */ --gl-control-background-color-selected-hover: var(--gl-color-neutral-10); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */ --gl-control-border-color-default: var(--gl-color-neutral-500); /** Used for form control (input, radio button, checkbox, textarea) default border. */ --gl-control-border-color-hover: var(--gl-color-neutral-300); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */ --gl-control-border-color-focus: var(--gl-color-neutral-50); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */ --gl-control-border-color-disabled: var(--gl-color-neutral-800); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */ --gl-control-placeholder-color: var(--gl-color-neutral-400); /** Used for placeholder text within inputs. */ --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */ --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */ --gl-feedback-strong-border-color: var(--gl-color-neutral-300); /** Used for the border associated with strong feedback. */ --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */ --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /** Used for an icon on a strong feedback background. */ --gl-feedback-strong-link-color: var(--gl-color-blue-300); /** Used for a link on a strong feedback background. */ --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /** Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-border-color: var(--gl-color-neutral-600); /** Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-200); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-info-background-color: var(--gl-color-blue-950); /** Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-border-color: var(--gl-color-blue-600); /** Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-icon-color: var(--gl-color-blue-200); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-success-background-color: var(--gl-color-green-900); /** Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-border-color: var(--gl-color-green-600); /** Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-text-color: var(--gl-color-green-200); /** Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-icon-color: var(--gl-color-green-200); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-warning-background-color: var(--gl-color-orange-900); /** Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-border-color: var(--gl-color-orange-600); /** Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-icon-color: var(--gl-color-orange-200); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-danger-background-color: var(--gl-color-red-900); /** Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-border-color: var(--gl-color-red-300); /** Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-icon-color: var(--gl-color-red-200); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-brand-background-color: var(--gl-color-purple-950); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-border-color: var(--gl-color-purple-600); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-text-color: var(--gl-color-purple-200); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-feedback-brand-icon-color: var(--gl-color-purple-200); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */ --gl-focus-ring-outer-color: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */ --gl-highlight-match-background-color: var(--gl-color-orange-200); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */ --gl-highlight-match-text-color: var(--gl-color-neutral-950); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */ --gl-highlight-target-background-color: var(--gl-color-blue-950); /** Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */ --gl-highlight-target-border-color: var(--gl-color-blue-700); /** Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */ --gl-icon-color-info: var(--gl-color-blue-200); /** Used for an icon associated with information or help. */ --gl-status-neutral-background-color: var(--gl-color-neutral-800); /** Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ --gl-status-info-background-color: var(--gl-color-blue-800); /** Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-info-icon-color: var(--gl-color-blue-300); /** Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */ --gl-status-success-background-color: var(--gl-color-green-800); /** Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-success-text-color: var(--gl-color-green-200); /** Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-success-icon-color: var(--gl-color-green-300); /** Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */ --gl-status-warning-background-color: var(--gl-color-orange-800); /** Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-warning-icon-color: var(--gl-color-orange-300); /** Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */ --gl-status-danger-background-color: var(--gl-color-red-800); /** Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-danger-icon-color: var(--gl-color-red-300); /** Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */ --gl-status-brand-background-color: var(--gl-color-purple-900); /** Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-text-color: var(--gl-color-purple-300); /** Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-icon-color: var(--gl-color-purple-500); /** Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-text-color-default: var(--gl-color-neutral-50); /** Used for the default text color. */ --gl-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental text that doesn't need to be as prominent as other text. */ --gl-text-color-strong: var(--gl-color-neutral-0); /** Used for text with the highest contrast. */ --gl-text-color-heading: var(--gl-color-neutral-0); /** Used for headings level 1-6. */ --gl-text-color-link: var(--gl-color-blue-200); /** Used for default text links. */ --gl-text-color-warning: var(--gl-color-orange-300); /** Used for text that requires caution or careful attention. */ --gl-text-color-danger: var(--gl-color-red-300); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */ --gl-text-color-success: var(--gl-color-green-300); /** Used for text indicating success, completion, approval, addition, or validity. */ --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */ --gl-heading-1-font-size: var(--gl-font-size-700); --gl-heading-1-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-1-line-height: var(--gl-line-height-heading); --gl-heading-2-font-size: var(--gl-font-size-600); --gl-heading-2-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-2-line-height: var(--gl-line-height-heading); --gl-heading-3-font-size: var(--gl-font-size-500); --gl-heading-3-line-height: var(--gl-line-height-heading); --gl-heading-4-font-size: var(--gl-font-size-400); --gl-heading-4-line-height: var(--gl-line-height-heading); --gl-heading-5-font-size: var(--gl-font-size-300); --gl-heading-5-line-height: var(--gl-line-height-heading); --gl-heading-6-font-size: var(--gl-font-size-200); --gl-heading-6-line-height: var(--gl-line-height-heading); --gl-heading-scale-100-font-size: var(--gl-font-size-100); --gl-heading-scale-100-line-height: var(--gl-line-height-heading); --gl-heading-scale-200-font-size: var(--gl-font-size-200); --gl-heading-scale-200-line-height: var(--gl-line-height-heading); --gl-heading-scale-300-font-size: var(--gl-font-size-300); --gl-heading-scale-300-line-height: var(--gl-line-height-heading); --gl-heading-scale-400-font-size: var(--gl-font-size-400); --gl-heading-scale-400-line-height: var(--gl-line-height-heading); --gl-heading-scale-500-font-size: var(--gl-font-size-500); --gl-heading-scale-500-line-height: var(--gl-line-height-heading); --gl-heading-scale-600-font-size: var(--gl-font-size-600); --gl-heading-scale-600-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-600-line-height: var(--gl-line-height-heading); --gl-heading-scale-700-font-size: var(--gl-font-size-700); --gl-heading-scale-700-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-700-line-height: var(--gl-line-height-heading); --gl-heading-scale-800-font-size: var(--gl-font-size-800); --gl-heading-scale-800-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-100-fixed-font-size: var(--gl-font-size-100-fixed); --gl-heading-scale-100-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-200-fixed-font-size: var(--gl-font-size-200-fixed); --gl-heading-scale-200-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-300-fixed-font-size: var(--gl-font-size-300-fixed); --gl-heading-scale-300-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-400-fixed-font-size: var(--gl-font-size-400-fixed); --gl-heading-scale-400-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-500-fixed-font-size: var(--gl-font-size-500-fixed); --gl-heading-scale-500-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-600-fixed-font-size: var(--gl-font-size-600-fixed); --gl-heading-scale-600-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-600-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-700-fixed-font-size: var(--gl-font-size-700-fixed); --gl-heading-scale-700-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-scale-700-fixed-line-height: var(--gl-line-height-heading); --gl-heading-scale-800-fixed-font-size: var(--gl-font-size-800-fixed); --gl-heading-scale-800-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-display-font-size: var(--gl-font-size-800); --gl-heading-display-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-display-margin-bottom: var(--gl-spacing-scale-6); --gl-heading-1-fixed-font-size: var(--gl-font-size-700-fixed); --gl-heading-1-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-1-fixed-line-height: var(--gl-line-height-heading); --gl-heading-2-fixed-font-size: var(--gl-font-size-600-fixed); --gl-heading-2-fixed-letter-spacing: var(--gl-letter-spacing-heading); --gl-heading-2-fixed-line-height: var(--gl-line-height-heading); --gl-heading-3-fixed-font-size: var(--gl-font-size-500-fixed); --gl-heading-3-fixed-line-height: var(--gl-line-height-heading); --gl-heading-4-fixed-font-size: var(--gl-font-size-400-fixed); --gl-heading-4-fixed-line-height: var(--gl-line-height-heading); --gl-heading-5-fixed-font-size: var(--gl-font-size-300-fixed); --gl-heading-5-fixed-line-height: var(--gl-line-height-heading); --gl-heading-6-fixed-font-size: var(--gl-font-size-200-fixed); --gl-heading-6-fixed-line-height: var(--gl-line-height-heading); --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */ --gl-border-radius-default: var(--gl-border-radius-md); --gl-font-size-base: var(--gl-font-size-md); --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */ --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */ --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */ --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */ --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */ --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */ --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */ --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */ --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */ --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */ --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */ --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */ --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */ --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */ --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */ --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */ --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */ --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */ --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /** Used for the icon of a muted badge in the focus state. */ --gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /** Used for the background of a neutral badge in the hover state. */ --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /** Used for the text of a neutral badge in the focus state. */ --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /** Used for the icon of a neutral badge in the focus state. */ --gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /** Used for the background of an informational badge in the hover state. */ --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /** Used for the text of an informational badge in the focus state. */ --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /** Used for the icon of an informational badge in the focus state. */ --gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /** Used for the background of a success badge in the hover state. */ --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /** Used for the text of a success badge in the focus state. */ --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /** Used for the icon of a success badge in the focus state. */ --gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /** Used for the background of a warning badge in the hover state. */ --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /** Used for the text of a warning badge in the focus state. */ --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /** Used for the icon of a warning badge in the focus state. */ --gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /** Used for the background of a danger badge in the hover state. */ --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /** Used for the text of a danger badge in the focus state. */ --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /** Used for the icon of a danger badge in the focus state. */ --gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /** Used for the background of a tier related badge in the hover state. */ --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /** Used for the text of a tier related badge in the focus state. */ --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /** Used for the icon of a tier related badge in the focus state. */ --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the hover state. */ --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the focus state. */ --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the active state. */ --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /** Used for the border of an default primary button in the focus state. */ --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default borderless, tertiary button in the default state. */ --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default borderless, tertiary button in the default state. */ --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default borderless, tertiary button in the active state. */ --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /** Used for the border of a default borderless, tertiary button in the default state. */ --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /** Used for the foreground of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /** Used for the background of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-primary-border-color-hover: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the hover state. */ --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-primary-border-color-active: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the active state. */ --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /** Used for the foreground of a confirm (positive) button in the focus state. */ --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */ --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /** Used for the border of an outlined confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /** Used for the background of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /** Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /** Used for the background of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /** Used for the border of a borderless, tertiary confirm (positive) button in the default state. */ --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the hover state. */ --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the focus state. */ --gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the active state. */ --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /** Used for the background of a danger (destructive) primary button in the focus state. */ --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /** Used for the border of a danger (destructive) primary button in the focus state. */ --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /** Used for the foreground of a danger (destructive) button in the focus state. */ --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /** Used for the border of an outlined danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /** Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */ --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */ --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */ --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */ --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */ --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */ --gl-card-border-radius: var(--gl-border-radius-xl); /** Used for card border radius. */ --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */ --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */ --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */ --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */ --gl-dropdown-border-color: var(--gl-border-color-default); /** Used for the border of a dropdown. */ --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */ --gl-dropdown-divider-color: var(--gl-border-color-subtle); /** Used for the divider of a dropdown. */ --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the text of a dropdown option in the default state. */ --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */ --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for the dropdown selected option indicator in the default state. */ --gl-dropdown-option-indicator-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for the dropdown selected option indicator in the hover state. */ --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /** Used for the background of an unselected dropdown option in the default state. */ --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of an unselected dropdown option in the hover state. */ --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /** Used for the background of an unselected dropdown option in the active state. */ --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */ --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */ --gl-nav-item-foreground-color-focus: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a default navigation item in the focus state. */ --gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-hover); /** Used for the background of a default navigation item in the focus state. */ --gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the default state. */ --gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */ --gl-nav-item-selected-background-color-hover: var(--gl-nav-item-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */ --gl-nav-item-selected-background-color-active: var(--gl-nav-item-background-color-active); /** Used for the background of a selected navigation item in the active state. */ --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */ --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */ --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */ --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */ --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */ --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */ --gl-toggle-switch-track-color-unchecked-default: var(--gl-control-background-color-default); /** Used for the track color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-track-color-unchecked-active: var(--gl-action-neutral-background-color-active); /** Used for the track color of an unchecked toggle switch in the active state. */ --gl-toggle-switch-track-color-unchecked-disabled: var(--gl-control-background-color-default); /** Used for the track color of a disabled unchecked toggle switch. */ --gl-toggle-switch-track-color-checked-default: var(--gl-action-selected-background-color-default); /** Used for the track color of a checked toggle switch in the default state. */ --gl-toggle-switch-track-color-checked-hover: var(--gl-action-selected-background-color-hover); /** Used for the track color of a checked toggle switch in the hover state. */ --gl-toggle-switch-track-color-checked-active: var(--gl-action-selected-background-color-active); /** Used for the track color of a checked toggle switch in the active state. */ --gl-toggle-switch-track-color-checked-disabled: var(--gl-action-selected-background-color-disabled); /** Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible. */ --gl-toggle-switch-track-color-loading: var(--gl-action-disabled-background-color); /** Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state. */ --gl-toggle-switch-track-border-color-unchecked-default: var(--gl-control-border-color-default); /** Used for the track border color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-track-border-color-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track border color of an unchecked toggle switch in the hover state. */ --gl-toggle-switch-track-border-color-unchecked-disabled: var(--gl-action-disabled-border-color); /** Used for the track border color of a disabled unchecked toggle switch. */ --gl-toggle-switch-background-color-unchecked-default: var(--gl-action-selected-background-color-default); /** Used for the background color of the unchecked toggle switch thumb in the default state. */ --gl-toggle-switch-background-color-unchecked-disabled: var(--gl-action-disabled-foreground-color); /** Used for the background color of the disabled unchecked toggle switch thumb. */ --gl-toggle-switch-background-color-checked-default: var(--gl-action-selected-foreground-color-default); /** Used for the background color of the checked toggle switch thumb in the default state. */ --gl-toggle-switch-background-color-checked-disabled: var(--gl-action-selected-foreground-color-default); /** Used for the background color of the disabled checked toggle switch thumb. */ --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-selected-foreground-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */ --gl-toggle-switch-icon-color-checked-default: var(--gl-action-selected-background-color-default); /** Used for the icon color of a checked toggle switch in the default state. */ --gl-toggle-switch-icon-color-checked-hover: var(--gl-action-selected-background-color-hover); /** Used for the icon color of a checked toggle switch in the hover state. */ --gl-toggle-switch-icon-color-checked-active: var(--gl-action-selected-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */ --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */ --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */ --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */ --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */ --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */ --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */ --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the border of a selected action in the hover state. */ --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /** Used for the border of a selected action in the active state. */ --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the hover state. */ --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the focus state. */ --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the active state. */ --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /** Used for the background of a neutral action in the focus state. */ --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the hover state. */ --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the focus state. */ --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the active state. */ --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) action in the focus state. */ --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /** Used for the background of a confirm (positive) action in the focus state. */ --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the hover state. */ --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the focus state. */ --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the active state. */ --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a danger (destructive) action in the focus state. */ --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the hover state. */ --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the focus state. */ --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the active state. */ --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /** Used for the background of a strong confirm action in the focus state. */ --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the foreground of a strong confirm action in the hover state. */ --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */ --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */ --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */ --gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus. */ --gl-control-background-color-selected-disabled: var(--gl-action-selected-background-color-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled. */ --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */ --gl-control-border-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */ --gl-control-border-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */ --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */ --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */ --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */ --gl-control-indicator-color-disabled: var(--gl-control-indicator-color-selected); /** Used for disabled checkbox and radio button state indicators. */ --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */ --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */ --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */ --gl-icon-color-subtle: var(--gl-text-color-subtle); /** Used for a static or decorational icon. Can be paired with subtle text. */ --gl-icon-color-strong: var(--gl-text-color-strong); /** Used for an icon with the highest contrast. */ --gl-icon-color-disabled: var(--gl-text-color-disabled); /** Used for an icon within a disabled section. */ --gl-icon-color-link: var(--gl-text-color-link); /** Used for an icon within a link. */ --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */ --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */ --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */ --gl-text-primary: var(--gl-text-color-default); /** Use text.color.default instead. */ --gl-text-secondary: var(--gl-text-color-subtle); /** Use text.color.subtle instead. */ --gl-text-tertiary: var(--gl-text-color-disabled); /** Use text.color.disabled instead. */ --gl-heading-1-font-weight: var(--gl-font-weight-heading); --gl-heading-1-margin-top: var(--gl-heading-default-margin-top); --gl-heading-1-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-1-color: var(--gl-text-color-heading); --gl-heading-2-font-weight: var(--gl-font-weight-heading); --gl-heading-2-margin-top: var(--gl-heading-default-margin-top); --gl-heading-2-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-2-color: var(--gl-text-color-heading); --gl-heading-3-font-weight: var(--gl-font-weight-heading); --gl-heading-3-margin-top: var(--gl-heading-default-margin-top); --gl-heading-3-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-3-color: var(--gl-text-color-heading); --gl-heading-4-font-weight: var(--gl-font-weight-heading); --gl-heading-4-margin-top: var(--gl-heading-default-margin-top); --gl-heading-4-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-4-color: var(--gl-text-color-heading); --gl-heading-5-font-weight: var(--gl-font-weight-heading); --gl-heading-5-margin-top: var(--gl-heading-default-margin-top); --gl-heading-5-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-5-color: var(--gl-text-color-heading); --gl-heading-6-font-weight: var(--gl-font-weight-heading); --gl-heading-6-margin-top: var(--gl-heading-default-margin-top); --gl-heading-6-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-6-color: var(--gl-text-color-heading); --gl-heading-scale-100-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-100-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-100-color: var(--gl-text-color-heading); --gl-heading-scale-200-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-200-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-200-color: var(--gl-text-color-heading); --gl-heading-scale-300-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-300-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-300-color: var(--gl-text-color-heading); --gl-heading-scale-400-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-400-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-400-color: var(--gl-text-color-heading); --gl-heading-scale-500-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-500-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-500-color: var(--gl-text-color-heading); --gl-heading-scale-600-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-600-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-600-color: var(--gl-text-color-heading); --gl-heading-scale-700-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-700-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-700-color: var(--gl-text-color-heading); --gl-heading-scale-800-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-800-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-800-color: var(--gl-text-color-heading); --gl-heading-scale-100-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-100-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-100-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-200-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-200-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-200-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-300-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-300-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-300-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-400-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-400-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-400-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-500-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-500-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-500-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-600-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-600-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-600-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-700-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-700-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-700-fixed-color: var(--gl-text-color-heading); --gl-heading-scale-800-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-scale-800-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-scale-800-fixed-color: var(--gl-text-color-heading); --gl-heading-display-font-weight: var(--gl-font-weight-heading); --gl-heading-display-margin-top: var(--gl-heading-default-margin-top); --gl-heading-display-color: var(--gl-text-color-heading); --gl-heading-1-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-1-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-1-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-1-fixed-color: var(--gl-text-color-heading); --gl-heading-2-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-2-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-2-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-2-fixed-color: var(--gl-text-color-heading); --gl-heading-3-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-3-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-3-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-3-fixed-color: var(--gl-text-color-heading); --gl-heading-4-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-4-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-4-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-4-fixed-color: var(--gl-text-color-heading); --gl-heading-5-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-5-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-5-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-5-fixed-color: var(--gl-text-color-heading); --gl-heading-6-fixed-font-weight: var(--gl-font-weight-heading); --gl-heading-6-fixed-margin-top: var(--gl-heading-default-margin-top); --gl-heading-6-fixed-margin-bottom: var(--gl-heading-default-margin-bottom); --gl-heading-6-fixed-color: var(--gl-text-color-heading); --gl-avatar-square-border-radius-default: var(--gl-border-radius-default); /** Border radius for square avatars at smaller sizes (16px, 24px, 32px). */ --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */ --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */ --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */ --gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /** Used for the background of a success badge in the focus state. */ --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /** Used for the background of a warning badge in the focus state. */ --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */ --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */ --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */ --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */ --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */ --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /** Used for the border of a default borderless, tertiary button in the hover state. */ --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /** Used for the border of a default borderless, tertiary button in the focus state. */ --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /** Used for the border of a default borderless, tertiary button in the active state. */ --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-hover); /** Used for the foreground of a confirm (positive) primary button in the focus state. */ --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /** Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /** Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */ --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /** Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */ --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /** Used for the border of a borderless, tertiary confirm (positive) button in the active state. */ --gl-button-danger-tertiary-foreground-color-focus: var(--gl-action-danger-foreground-color-focus); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /** Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */ --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /** Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */ --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /** Used for the border of a borderless, tertiary danger (destructive) button in the active state. */ --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the hover state. */ --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the focus state. */ --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the active state. */ --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */ --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */ --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */ --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */ --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */ --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the focus state. */ --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */ --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */ --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */ --gl-nav-item-foreground-color-active: var(--gl-nav-item-foreground-color-focus); /** Used for the foreground of a default navigation item in the active state. */ --gl-nav-item-selected-foreground-color-focus: var(--gl-nav-item-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */ --gl-nav-item-selected-background-color-focus: var(--gl-nav-item-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */ --gl-tab-selected-indicator-color-default: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */ --gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-default); /** Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size. */ --gl-toggle-switch-track-color-checked-focus: var(--gl-action-selected-background-color-focus); /** Used for the track color of a checked toggle switch in the focus state. */ --gl-toggle-switch-track-border-color-unchecked-focus: var(--gl-toggle-switch-track-border-color-unchecked-hover); /** Used for the track border color of an unchecked toggle switch in the focus state. */ --gl-toggle-switch-track-border-color-checked-default: var(--gl-action-selected-border-color-default); /** Used for the track border color of a checked toggle switch in the default state. */ --gl-toggle-switch-track-border-color-checked-hover: var(--gl-action-selected-border-color-hover); /** Used for the track border color of a checked toggle switch in the hover state. */ --gl-toggle-switch-track-border-color-checked-active: var(--gl-action-selected-border-color-active); /** Used for the track border color of a checked toggle switch in the active state. */ --gl-toggle-switch-track-border-color-checked-disabled: var(--gl-toggle-switch-track-color-checked-disabled); /** Used for the track border color of a disabled checked toggle switch, which matches the track color. */ --gl-toggle-switch-track-border-color-loading: var(--gl-toggle-switch-track-color-loading); /** Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill. */ --gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */ --gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the focus state. */ --gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the active state. */ --gl-toggle-switch-background-color-checked-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the background color of the checked toggle switch thumb in the hover state. */ --gl-toggle-switch-background-color-disabled: var(--gl-toggle-switch-background-color-unchecked-disabled); /** Use toggle.switch.background.color.unchecked.disabled instead. */ --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */ --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-selected-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */ --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */ --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */ --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */ --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */ --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */ --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */ --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */ --gl-control-border-color-selected-disabled: var(--gl-control-background-color-selected-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled. */ --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */ --gl-nav-item-selected-foreground-color-active: var(--gl-nav-item-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */ --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size. */ --gl-toggle-switch-track-border-color-unchecked-active: var(--gl-toggle-switch-track-border-color-unchecked-focus); /** Used for the track border color of an unchecked toggle switch in the active state. */ --gl-toggle-switch-track-border-color-checked-focus: var(--gl-action-selected-border-color-focus); /** Used for the track border color of a checked toggle switch in the focus state. */ --gl-toggle-switch-background-color-checked-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the background color of the checked toggle switch thumb in the focus state. */ --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */ --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */ --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */ --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */ --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */ --gl-toggle-switch-background-color-checked-active: var(--gl-action-selected-foreground-color-active); /** Used for the background color of the checked toggle switch thumb in the active state. */ --gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-selected-foreground-color-active); /** Used for the icon color of an unchecked toggle switch in the active state. */ } /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ body{ background-color: var(--gl-background-color-default); color: var(--gl-text-color-default); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ color: var(--gl-text-color-heading); } a{ color: var(--gl-text-color-link); text-decoration-line: none; } a:hover{ color: var(--gl-text-color-link); text-decoration-line: underline; } a:not([href]):not([class]){ color: inherit; text-decoration-line: none; } a:not([href]):not([class]):hover{ color: inherit; text-decoration-line: none; } caption{ color: var(--gl-text-color-subtle); } pre{ color: var(--gl-text-color-strong); } kbd{ border-style: solid; border-color: var(--gl-border-color-default); display: inline-block; border-width: 1px; border-bottom-color: var(--gl-border-color-strong); background-color: var(--gl-background-color-subtle); line-height: 1; color: var(--gl-text-color-default); font-size: 87.5%; padding: 3px 5px; vertical-align: unset; border-image: none; border-radius: 3px; box-shadow: inset 0 -1px 0 var(--gl-border-color-strong); } .table{ margin-bottom: var(--gl-spacing-scale-3); width: 100%; background-color: transparent; color: var(--gl-text-color-default); } .modal-header .modal-title.table { margin-right: -1rem; padding-right: 1rem; } .table th, .table td{ border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 1px; padding: var(--gl-spacing-scale-4); vertical-align: top; } .table thead th{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 2px; vertical-align: bottom; } .table tbody + tbody{ border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 2px; } .gl-disclosure-dropdown.gl-new-dropdown .gl-new-dropdown-inner { max-height: none; } .gl-disclosure-dropdown.gl-new-dropdown .gl-new-dropdown-item-content:disabled, .gl-disclosure-dropdown.gl-new-dropdown .gl-new-dropdown-item-content[disabled], .gl-disclosure-dropdown.gl-new-dropdown .gl-new-dropdown-item-content.disabled { color: var(--gl-dropdown-option-text-color-disabled); cursor: not-allowed; background: none; text-decoration: none; } .gl-keyset-pagination.btn-group .gl-button.gl-button{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); border-radius: var(--gl-action-border-radius); } .gl-token-selector.gl-token-selector-focus-glow { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-token-selector.gl-token-selector-focus-glow { outline: 2px solid LinkText !important; } } .gl-token-selector.gl-token-selector-focus-glow.is-invalid { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-token-selector.gl-token-selector-focus-glow.is-invalid { outline: 2px solid LinkText !important; } } .gl-token-selector.gl-token-selector-view-only { background: var(--gl-control-background-color-readonly) !important; box-shadow: none !important; } .gl-token-selector-token-container:focus-visible .gl-token { background-color: var(--gl-token-selector-token-container-token-background-color-focus); box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-token-selector-input { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.5rem; padding-right: 0.5rem; } .gl-card{ background-color: var(--gl-background-color-strong); border-width: 1px; border-style: solid; border-color: var(--gl-border-color-transparent); } @media (prefers-contrast: more){ .gl-card{ border-color: var(--gl-border-color-strong); } } .gl-card{ display: flex; flex-direction: column; overflow-wrap: break-word; position: relative; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-card{ margin-top: var(--gl-spacing-scale-0); } .gl-card{ padding: var(--gl-spacing-scale-2); border-radius: var(--gl-card-border-radius); } .gl-card-header, .gl-card-body{ color: var(--gl-text-color-default); } .gl-card-header{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-3); margin-top: var(--gl-spacing-scale-1); margin-bottom: var(--gl-spacing-scale-1); border-top-left-radius: calc(var(--gl-card-border-radius) - 1px); border-top-right-radius: calc(var(--gl-card-border-radius) - 1px); } .gl-card-header h2, .gl-card-header h3, .gl-card-header h4, .gl-card-header h5, .gl-card-header h6{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-card-header h2,.recents-wrapper .gl-card-header h3,.recents-wrapper .gl-card-header h4,.recents-wrapper .gl-card-header h5,.recents-wrapper .gl-card-header h6{ margin-top: var(--gl-spacing-scale-0); } .gl-card-header h2, .gl-card-header h3, .gl-card-header h4, .gl-card-header h5, .gl-card-header h6{ color: var(--gl-text-color-heading); margin: var(--gl-spacing-scale-0); } .gl-card-body{ flex-grow: 1; padding: var(--gl-spacing-scale-3); background-color: var(--gl-background-color-default); } @media (prefers-contrast: more){ .gl-card-body{ border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; } } @media (forced-colors: active){ .gl-card-body{ border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; } } .gl-card-body { border-radius: calc(var(--gl-card-border-radius) - 0.25rem); } .gl-card-footer{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-2); border-bottom-left-radius: calc(var(--gl-card-border-radius) - 1px); border-bottom-right-radius: calc(var(--gl-card-border-radius) - 1px); color: var(--gl-text-color-subtle); } .gl-clear-icon-button{ background-color: transparent; border-style: none; cursor: pointer; } .gl-clear-icon-button:focus-visible{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-accordion-item{ margin-bottom: var(--gl-spacing-scale-5); } .gl-accordion-item .gl-accordion-item-header{ margin: var(--gl-spacing-scale-0); line-height: 1rem; } .gl-accordion-item:last-child{ margin-bottom: var(--gl-spacing-scale-0); } .gl-accordion-item .collapse { margin-left: 1.25rem; } /* * --gl-alert-padding-x * * Way to hook into spacing of gl-alert. * This is used e.g. for page wide containers * in GitLab. */ .gl-alert{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-alert{ margin-top: var(--gl-spacing-scale-0); } .gl-alert { border-radius: var(--gl-alert-border-radius); padding-inline: calc(2rem + var(--gl-alert-padding-x, 0px)); position: relative; border: 1px solid; } .gl-alert-not-dismissible { padding-right: calc(0.75rem + var(--gl-alert-padding-x, 0px)); } .gl-alert .gl-link:not(.gl-label-link){ text-decoration-line: underline; } .gl-alert.gl-alert-has-actions{ padding-bottom: var(--gl-spacing-scale-4); } .gl-alert-sticky { position: sticky; top: 0; } .gl-alert-title{ font-weight: var(--gl-heading-scale-300-font-weight); margin-top: var(--gl-heading-scale-300-margin-top); font-size: var(--gl-heading-scale-300-font-size); letter-spacing: var(--gl-heading-scale-300-letter-spacing); line-height: var(--gl-heading-scale-300-line-height); color: var(--gl-heading-scale-300-color); margin-bottom: var(--gl-spacing-scale-2); line-height: var(--gl-line-height-20); } .gl-alert-icon-container{ position: absolute; top: var(--gl-spacing-scale-3); left: calc(0.5rem + var(--gl-alert-padding-x, 0px)); display: flex; align-items: center; height: 1.25rem; } .gl-alert-body{ line-height: var(--gl-line-height-20); color: var(--gl-text-color-default); } .gl-alert-actions{ display: flex; flex-direction: column; flex-wrap: wrap; row-gap: var(--gl-spacing-scale-3); margin-top: var(--gl-spacing-scale-3); } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-alert-actions{ flex-direction: row; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-alert-actions{ flex-direction: row; } } .gl-alert-action{ margin-right: var(--gl-spacing-scale-0); width: 100%; } .modal-header .modal-title.gl-alert-action { margin-right: -1rem; padding-right: 1rem; } .gl-alert-action{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-alert-action{ margin-top: var(--gl-spacing-scale-0); } .gl-alert-action{ line-height: 1rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-alert-action{ margin-right: var(--gl-spacing-scale-3); width: auto; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-alert-action{ margin-right: var(--gl-spacing-scale-3); width: auto; } } .gl-dismiss-btn { position: absolute; top: calc(0.5rem - (1.5rem - 1.25rem) / 2); right: calc(0.25rem + var(--gl-alert-padding-x, 0px)); } /* Variants */ .gl-alert-danger { background-color: var(--gl-alert-danger-background-color); border-color: var(--gl-alert-danger-border-color); } .gl-alert-danger .gl-alert-title { color: var(--gl-alert-danger-title-color); } @media (forced-colors: none) { .gl-alert-danger .gl-alert-icon { color: var(--gl-feedback-danger-icon-color); } } .gl-alert-warning { background-color: var(--gl-alert-warning-background-color); border-color: var(--gl-alert-warning-border-color); } .gl-alert-warning .gl-alert-title { color: var(--gl-alert-warning-title-color); } @media (forced-colors: none) { .gl-alert-warning .gl-alert-icon { color: var(--gl-feedback-warning-icon-color); } } .gl-alert-tip { background-color: var(--gl-alert-neutral-background-color); border-color: var(--gl-alert-neutral-border-color); } .gl-alert-tip .gl-alert-title { color: var(--gl-alert-neutral-title-color); } @media (forced-colors: none) { .gl-alert-tip .gl-alert-icon { color: var(--gl-feedback-neutral-icon-color); } } .gl-alert-info { background-color: var(--gl-alert-info-background-color); border-color: var(--gl-alert-info-border-color); } .gl-alert-info .gl-alert-title { color: var(--gl-alert-info-title-color); } @media (forced-colors: none) { .gl-alert-info .gl-alert-icon { color: var(--gl-feedback-info-icon-color); } } .gl-alert-success { background-color: var(--gl-alert-success-background-color); border-color: var(--gl-alert-success-border-color); } .gl-alert-success .gl-alert-title { color: var(--gl-alert-success-title-color); } @media (forced-colors: none) { .gl-alert-success .gl-alert-icon { color: var(--gl-feedback-success-icon-color); } } .gl-attribute-list{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-attribute-list{ margin-top: var(--gl-spacing-scale-0); } .gl-attribute-list{ line-height: var(--gl-line-height-16); display: grid; column-gap: var(--gl-spacing-scale-7); } @container (min-width: 25rem) { .gl-attribute-list-horizontal-items { grid-template-columns: fit-content(15rem) 1fr; } .gl-attribute-list-horizontal-items .gl-attribute-list-item{ grid-column: span 2 / span 2; } } @container (min-width: 54rem) { .gl-attribute-list-horizontal-items { grid-template-columns: repeat(2, fit-content(15rem) 1fr); grid-auto-flow: column; grid-template-rows: repeat(var(--attribute-list-row-count), auto); } } @container (min-width: 40rem) { .gl-attribute-list-vertical-items{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--attribute-list-row-count), auto); } } .gl-attribute-list-item{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; padding-top: var(--gl-spacing-scale-5); padding-bottom: var(--gl-spacing-scale-5); gap: var(--gl-spacing-scale-4); display: grid; grid-template-columns: subgrid; } .gl-attribute-list-item-label{ color: var(--gl-text-color-strong); display: flex; gap: var(--gl-spacing-scale-3); } .gl-attribute-list-item-label-icon{ flex: none; } .gl-attribute-list-item-description{ margin-bottom: var(--gl-spacing-scale-0); min-width: var(--gl-spacing-scale-0); color: var(--gl-text-color-default); } .gl-avatar{ display: inline-flex; } .commit-content .committer.gl-avatar { gap: 0.5ch; } .gl-avatar{ overflow: hidden; flex-shrink: 0; line-height: 1; object-fit: contain; outline: 1px solid var(--gl-avatar-border-color-default); outline-offset: -1px; } .gl-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } .gl-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } .gl-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } .gl-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } .gl-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } .gl-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s16{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); font-size: 0.75rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s24{ width: var(--gl-spacing-scale-6); height: var(--gl-spacing-scale-6); font-size: 1rem; border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s32{ width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); border-radius: var(--gl-avatar-square-border-radius-default); } } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s48{ width: var(--gl-spacing-scale-9); height: var(--gl-spacing-scale-9); font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s64{ width: var(--gl-spacing-scale-11); height: var(--gl-spacing-scale-11); font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-avatar-s96{ width: var(--gl-spacing-scale-13); height: var(--gl-spacing-scale-13); font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); border-radius: var(--gl-avatar-square-border-radius-lg); } } .gl-avatar-circle { border-radius: var(--gl-avatar-circle-border-radius-default); } .gl-avatar-identicon{ text-align: center; vertical-align: top; justify-content: center; align-items: center; color: var(--gl-text-color-strong); } .gl-avatar-identicon-bg1 { color: var(--gl-avatar-fallback-text-color-red); background-color: var(--gl-avatar-fallback-background-color-red); } .gl-avatar-identicon-bg2 { color: var(--gl-avatar-fallback-text-color-purple); background-color: var(--gl-avatar-fallback-background-color-purple); } .gl-avatar-identicon-bg3 { color: var(--gl-avatar-fallback-text-color-purple); background-color: var(--gl-avatar-fallback-background-color-purple); } .gl-avatar-identicon-bg4 { color: var(--gl-avatar-fallback-text-color-blue); background-color: var(--gl-avatar-fallback-background-color-blue); } .gl-avatar-identicon-bg5 { color: var(--gl-avatar-fallback-text-color-green); background-color: var(--gl-avatar-fallback-background-color-green); } .gl-avatar-identicon-bg6 { color: var(--gl-avatar-fallback-text-color-orange); background-color: var(--gl-avatar-fallback-background-color-orange); } .gl-avatar-identicon-bg7 { color: var(--gl-avatar-fallback-text-color-neutral); background-color: var(--gl-avatar-fallback-background-color-neutral); } .gl-avatar-labeled{ display: inline-flex; } .commit-content .committer.gl-avatar-labeled { gap: 0.5ch; } .gl-avatar-labeled-labels{ margin-left: var(--gl-spacing-scale-3); display: flex; flex-direction: column; justify-content: center; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-avatar-labeled-labels{ margin-top: var(--gl-spacing-scale-0); } .gl-avatar-labeled-labels{ line-height: 1rem; color: var(--gl-text-color-strong); } .gl-avatar-labeled-labels.inline-labels{ flex-direction: row; align-items: center; gap: var(--gl-spacing-scale-2); } .gl-avatar-labeled-label{ font-weight: var(--gl-font-weight-bold); padding: var(--gl-spacing-scale-1); color: var(--gl-text-color-strong); } .gl-avatar-labeled-sublabel{ color: var(--gl-text-color-subtle); overflow-wrap: anywhere; } .gl-avatar-link{ display: inline-flex; } .commit-content .committer.gl-avatar-link { gap: 0.5ch; } .gl-avatar-link .gl-avatar{ transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease; } .gl-avatar-link:hover{ text-decoration-line: none; } .gl-avatar-link:hover .gl-avatar { outline: 1px solid var(--gl-avatar-border-color-hover); } .gl-avatar-link:hover .gl-avatar-labeled-label{ text-decoration-line: underline; } .gl-avatar-link:hover .gl-avatar-labeled-sublabel{ text-decoration-line: underline; } .gl-avatar-link:active, .gl-avatar-link:focus-visible, .gl-avatar-link:focus-visible:active { box-shadow: none !important; outline: none !important; } .gl-avatar-link:active .gl-avatar, .gl-avatar-link:focus-visible .gl-avatar, .gl-avatar-link:focus-visible:active .gl-avatar{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-avatars-inline { --avatar-size: 24px; --avatar-radius: calc(var(--avatar-size) * 0.5); --mask-offset: calc(var(--avatar-size) * -0.25); --mask-cutout: calc(var(--avatar-radius) + 1.5px); display: inline-flex; } .commit-content .committer.gl-avatars-inline { gap: 0.5ch; } .gl-avatars-inline-sm { --avatar-size: 16px; } .gl-avatars-inline-md { --avatar-size: 24px; } .gl-avatars-inline-lg { --avatar-size: 32px; } .gl-avatars-inline-child{ display: inline-flex; } .commit-content .committer.gl-avatars-inline-child { gap: 0.5ch; } .gl-avatars-inline-child:not(:last-child) { margin-right: var(--mask-offset); mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0); } .gl-avatars-inline-child:not(:last-child):hover + .gl-avatars-inline-child > .gl-avatar-link, .gl-avatars-inline-child:not(:last-child):hover + .gl-avatars-inline-child > .gl-avatars-inline-badge { mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0); } .gl-avatars-inline-child:not(:last-child):hover, .gl-avatars-inline-child:not(:last-child):focus-within{ z-index: var(--gl-zindex-1); mask: none; } .gl-avatars-inline-badge{ display: inline-flex; } .commit-content .committer.gl-avatars-inline-badge { gap: 0.5ch; } .gl-avatars-inline-badge{ align-items: center; justify-content: center; font-size: var(--gl-font-size-sm); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); line-height: 1rem; border-radius: .75rem; background-color: var(--gl-status-neutral-background-color); color: var(--gl-status-neutral-text-color); height: var(--avatar-size); min-width: var(--avatar-size); } .gl-avatars-inline-badge.lg{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-avatars-inline-badge.lg{ margin-top: var(--gl-spacing-scale-0); } .gl-avatars-inline-badge.lg{ border-radius: var(--gl-border-radius-3xl); } .gl-animated-icon { display: flex; fill: none !important; stroke: currentColor !important; } .gl-animated-icon * { transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); transition-property: color, fill, opacity, transform, rotate, translate, scale, stroke-dasharray, stroke-dashoffset; animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); animation-fill-mode: both; } @media (prefers-reduced-motion) { .gl-animated-icon * { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; } } /* * * * * * * * * * * * * * * * * * Color variants. * * * * * * * * * * * * * * * * */ .gl-animated-icon-default { color: var(--gl-icon-color-default); } .gl-animated-icon-subtle { color: var(--gl-icon-color-subtle); } .gl-animated-icon-strong { color: var(--gl-icon-color-strong); } .gl-animated-icon-disabled { color: var(--gl-icon-color-disabled); } .gl-animated-icon-link { color: var(--gl-icon-color-link); } .gl-animated-icon-info { color: var(--gl-icon-color-info); } .gl-animated-icon-warning { color: var(--gl-icon-color-warning); } .gl-animated-icon-danger { color: var(--gl-icon-color-danger); } .gl-animated-icon-success { color: var(--gl-icon-color-success); } /* * * * * * * * * * * * * * * * * * animated_chevron_lg_right_down_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-chevron-lg-right-down-arrow { transform-origin: center center; } /* on state */ .gl-animated-icon-on .gl-animated-chevron-lg-right-down-arrow { rotate: 90deg; } /* off state */ .gl-animated-icon-off .gl-animated-chevron-lg-right-down-arrow { rotate: 0deg; } /* * * * * * * * * * * * * * * * * * animated_chevron_right_down_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-chevron-right-down-arrow { transform-origin: center center; } /* on state */ .gl-animated-icon-on .gl-animated-chevron-right-down-arrow { rotate: 90deg; } /* off state */ .gl-animated-icon-off .gl-animated-chevron-right-down-arrow { rotate: 0deg; } /* * * * * * * * * * * * * * * * * * animated_chevron_lg_down_up_icon.vue * * * * * * * * * * * * * * * * */ /* on state */ .gl-animated-icon-on .gl-animated-chevron-lg-down-up-arrow-left-line, .gl-animated-icon-on .gl-animated-chevron-lg-down-up-arrow-right-line { translate: 50% 31.2%; scale: 1 1.01; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.2s linear(1 0%, -29 16%, 1 100%); } .gl-animated-icon-on .gl-animated-chevron-lg-down-up-arrow-left-line { rotate: 45deg; } .gl-animated-icon-on .gl-animated-chevron-lg-down-up-arrow-right-line { rotate: -45deg; } /* off state */ .gl-animated-icon-off .gl-animated-chevron-lg-down-up-arrow-left-line, .gl-animated-icon-off .gl-animated-chevron-lg-down-up-arrow-right-line { translate: 50% 68.8%; scale: 1 1; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.2s linear(1 0%, 29 16%, 1 100%); } .gl-animated-icon-off .gl-animated-chevron-lg-down-up-arrow-left-line { rotate: 135deg; } .gl-animated-icon-off .gl-animated-chevron-lg-down-up-arrow-right-line { rotate: -135deg; } /* * * * * * * * * * * * * * * * * * animated_chevron_down_up_icon.vue * * * * * * * * * * * * * * * * */ /* on state */ .gl-animated-icon-on .gl-animated-chevron-down-up-arrow-left-line, .gl-animated-icon-on .gl-animated-chevron-down-up-arrow-right-line { translate: 50% 37.6%; scale: 1 1.01; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.2s linear(1 0%, -27 16%, 1 100%); } .gl-animated-icon-on .gl-animated-chevron-down-up-arrow-left-line { rotate: 45deg; } .gl-animated-icon-on .gl-animated-chevron-down-up-arrow-right-line { rotate: -45deg; } /* off state */ .gl-animated-icon-off .gl-animated-chevron-down-up-arrow-left-line, .gl-animated-icon-off .gl-animated-chevron-down-up-arrow-right-line { translate: 50% 62.6%; scale: 1 1; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.2s linear(1 0%, 27 16%, 1 100%); } .gl-animated-icon-off .gl-animated-chevron-down-up-arrow-left-line { rotate: 135deg; } .gl-animated-icon-off .gl-animated-chevron-down-up-arrow-right-line { rotate: -135deg; } /* * * * * * * * * * * * * * * * * * animated_duo_chat_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-duo-chat-small-sparkle, .gl-animated-duo-chat-big-sparkle { transform-origin: 50% 50%; } /* on state */ .gl-animated-icon-on .gl-animated-duo-chat-small-sparkle, .gl-animated-icon-on .gl-animated-duo-chat-big-sparkle { animation-name: gl-animated-duo-chat-sparkle; animation-duration: 2s; animation-iteration-count: infinite; } .gl-animated-icon-on .gl-animated-duo-chat-small-sparkle { animation-delay: -0.5s; } .gl-animated-icon-on .gl-animated-duo-chat-big-sparkle { animation-delay: -1.5s; } @keyframes gl-animated-duo-chat-sparkle { 0% { translate: -45% -45%; scale: 0; } 20%, 45% { translate: -31% -31%; scale: 1; } 50%, 80% { translate: 0 -6%; scale: 0.8; } 100% { translate: 0 -6%; scale: 0; } } /* off state */ .gl-animated-duo-chat-small-sparkle { translate: 0 -6%; scale: 0.8; } .gl-animated-duo-chat-big-sparkle { translate: -31% -31%; scale: 1; } @media (prefers-reduced-motion) { .gl-animated-icon-on .gl-animated-duo-chat-small-sparkle, .gl-animated-icon-on .gl-animated-duo-chat-big-sparkle { animation-name: none; } } /* * * * * * * * * * * * * * * * * * animated_loader_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-icon-on .gl-animated-loader-shape { animation: gl-animated-loader-on 1.8s ease infinite; } .gl-animated-icon-on .gl-animated-loader-shape-1 { animation-delay: 0.15s; } .gl-animated-icon-on .gl-animated-loader-shape-2 { animation-delay: 0.3s; } @keyframes gl-animated-loader-on { 30% { translate: 0 -30%; } 60% { translate: 0 2%; } 65% { translate: 0 0; } } /* * * * * * * * * * * * * * * * * * animated_notifications_icon.vue * * * * * * * * * * * * * * * * */ /* on state */ .gl-animated-icon-on .gl-animated-notifications-bottom-part { stroke-dasharray: 80% 100%; stroke-dashoffset: -43%; } .gl-animated-icon-on .gl-animated-notifications-top-part { stroke-dashoffset: 0; } .gl-animated-icon-on .gl-animated-notifications-line { stroke-dasharray: 115% 120%; stroke-dashoffset: 0; } /* off state */ .gl-animated-icon-off .gl-animated-notifications-bottom-part { stroke-dasharray: 145% 100%; stroke-dashoffset: 0; } .gl-animated-icon-off .gl-animated-notifications-top-part { stroke-dasharray: 100% 100%; stroke-dashoffset: 0; } .gl-animated-icon-off .gl-animated-notifications-line { stroke-dasharray: 115% 120%; stroke-dashoffset: -111%; } /* * * * * * * * * * * * * * * * * * animated_sidebar_icon.vue * * * * * * * * * * * * * * * * */ /* on state */ .gl-animated-icon-on .gl-animated-sidebar-line { translate: 1% 0; transition-timing-function: linear(0 0%, 5 60%, 1 100%); } /* off state */ .gl-animated-icon-off .gl-animated-sidebar-line { translate: -1% 0; transition-timing-function: linear(0 0%, 5 60%, 1 100%); } /* * * * * * * * * * * * * * * * * * animated_smile_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-smile-big-smile { transform-origin: 50% 70%; } .gl-animated-smile-eyes circle { fill: currentColor !important; } /* on state */ .gl-animated-icon-on .gl-animated-smile-eyes { transition-timing-function: linear(0 0%, -1 20%, 1 100%); translate: 0 -6%; } .gl-animated-icon-on .gl-animated-smile-big-smile { scale: 1; transition-delay: 0.1s; } .gl-animated-icon-on .gl-animated-smile-slight-smile { stroke-dasharray: 10% 100%; stroke-dashoffset: -8%; } /* off state */ .gl-animated-icon-off .gl-animated-smile-eyes { translate: 0 0; } .gl-animated-icon-off .gl-animated-smile-big-smile { scale: 0.1; } .gl-animated-icon-off .gl-animated-smile-slight-smile { stroke-dasharray: 30% 100%; stroke-dashoffset: 0; } /* * * * * * * * * * * * * * * * * * animated_sort_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-sort-icon { overflow: visible; } /* off state */ .gl-animated-icon-off .gl-animated { animation-name: gl-animated-star-off; } .gl-animated-sort-arrow-left, .gl-animated-sort-arrow-right { transform-origin: 18.7% 6.7%; } .gl-animated-icon-off .gl-animated-sort-arrow-left, .gl-animated-icon-off .gl-animated-sort-arrow-right { rotate: 0deg; translate: 0 10%; } .gl-animated-icon-off .gl-animated-sort-long-line-off, .gl-animated-icon-off .gl-animated-sort-medium-line-off, .gl-animated-icon-off .gl-animated-sort-short-line-off { opacity: 0; transition-delay: -1s; } .gl-animated-icon-off .gl-animated-sort-long-line-on { transition-delay: 0.05s; } .gl-animated-icon-off .gl-animated-sort-medium-line-on { transition-delay: 0.1s; } .gl-animated-icon-off .gl-animated-sort-short-line-on { transition-delay: 0.15s; } .gl-animated-icon-off .gl-animated-sort-line { translate: 0 -7%; } /* on state */ .gl-animated-icon-on .gl-animated-sort-arrow-left { rotate: 90deg; translate: 0 77%; } .gl-animated-icon-on .gl-animated-sort-arrow-right { rotate: -90deg; translate: 0 77%; } .gl-animated-icon-on .gl-animated-sort-long-line-on, .gl-animated-icon-on .gl-animated-sort-medium-line-on, .gl-animated-icon-on .gl-animated-sort-short-line-on { opacity: 0; transition-delay: -1s; } .gl-animated-icon-on .gl-animated-sort-long-line-off { transition-delay: 0.15s; } .gl-animated-icon-on .gl-animated-sort-medium-line-off { transition-delay: 0.1s; } .gl-animated-icon-on .gl-animated-sort-short-line-off { transition-delay: 0.05s; } .gl-animated-icon-on .gl-animated-sort-line { translate: 0 0; } /* * * * * * * * * * * * * * * * * * animated_star_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-star-shape { transform-origin: center center; } /* on state */ .gl-animated-icon-on .gl-animated-star-shape { animation-name: gl-animated-star-on; } @keyframes gl-animated-star-on { 0%, 25% { fill: transparent; } 50% { fill: currentColor; } 100% { fill: currentColor; } 0%, 100% { scale: 1; } 25% { scale: 0.7; } 50% { scale: 1.1; } } /* off state */ .gl-animated-icon-off .gl-animated-star-shape { animation-name: gl-animated-star-off; } @keyframes gl-animated-star-off { 0%, 25% { fill: currentColor; } 50% { fill: transparent; } 100% { fill: transparent; } 0%, 100% { scale: 1; } 25% { scale: 0.7; } 50% { scale: 1.1; } } /* * * * * * * * * * * * * * * * * * animated_todo_icon.vue * * * * * * * * * * * * * * * * */ /* on state */ .gl-animated-icon-on .gl-animated-todo-box { stroke-dasharray: 240% 100%; stroke-dashoffset: -19%; } .gl-animated-icon-on .gl-animated-todo-plus-line { stroke-dasharray: 0% 100%; stroke-dashoffset: -14%; translate: 14% 7%; } .gl-animated-icon-on .gl-animated-todo-check { stroke-dasharray: 76% 100%; stroke-dashoffset: 0; } /* off state */ .gl-animated-icon-off .gl-animated-todo-box { stroke-dasharray: 215% 100%; stroke-dashoffset: -12%; } .gl-animated-icon-off .gl-animated-todo-plus-line { stroke-dasharray: 30% 100%; stroke-dashoffset: 0; translate: 0 0; } .gl-animated-icon-off .gl-animated-todo-check { stroke-dasharray: 76% 100%; stroke-dashoffset: -76%; } /* * * * * * * * * * * * * * * * * * animated_upload_icon.vue * * * * * * * * * * * * * * * * */ .gl-animated-upload-line { stroke-dasharray: 70% 100%; } /* on state */ .gl-animated-icon-on .gl-animated-upload-line { animation-name: gl-animated-upload-line; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes gl-animated-upload-line { 0%, 60%, 100% { translate: 0 0; stroke-dashoffset: 0; } 10% { translate: 0% 20%; stroke-dashoffset: -20%; } 40% { translate: 0 -10%; stroke-dashoffset: 0; } 55% { translate: 0 5%; stroke-dashoffset: -5%; } } .gl-animated-icon-on .gl-animated-upload-arrow { animation-name: gl-animated-upload-arrow; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes gl-animated-upload-arrow { 0%, 60%, 100% { translate: 0 0; } 10% { translate: 0 20%; } 40% { translate: 0 -8%; } 55% { translate: 0 8%; } } /* Basic badge styles */ .gl-badge{ font-size: var(--gl-font-size-sm); font-weight: var(--gl-font-weight-normal); line-height: 1rem; /* CSS Grid is used here to deal with 3 cases: * Badge shouldn't shrink inside flex containers by default * Content inside the badge should shrink when gl-text-truncate class is used on the contents * Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot) */ display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.125rem 0.375rem; transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion) { .gl-badge { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .gl-badge:has(.gl-truncate, .gl-text-truncate) { max-width: 100%; } @media (forced-colors: active) { .gl-badge { border: 1px solid; } } .gl-badge .gl-badge-icon{ height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); flex-shrink: 0; top: auto; } .gl-badge .gl-badge-content { display: flex; justify-content: center; min-width: 0.5rem; } a.gl-badge.disabled { cursor: not-allowed; } /* Variants */ .gl-badge.badge-neutral { background-color: var(--gl-badge-neutral-background-color-default); color: var(--gl-badge-neutral-text-color-default); } .gl-badge.badge-neutral .gl-badge-icon { color: var(--gl-badge-neutral-icon-color-default); transition: inherit; } a.gl-badge.badge-neutral:not(.disabled):hover { color: var(--gl-badge-neutral-text-color-hover); background-color: var(--gl-badge-neutral-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-neutral-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-neutral:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-neutral-icon-color-hover); } a.gl-badge.badge-neutral:not(.disabled):focus-visible { color: var(--gl-badge-neutral-text-color-focus); background-color: var(--gl-badge-neutral-background-color-focus); } a.gl-badge.badge-neutral:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-neutral-icon-color-focus); } a.gl-badge.badge-neutral:not(.disabled).active, a.gl-badge.badge-neutral:not(.disabled):active { color: var(--gl-badge-neutral-text-color-active); background-color: var(--gl-badge-neutral-background-color-active); } a.gl-badge.badge-neutral:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-neutral:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-neutral-icon-color-active); } a.gl-badge.badge-neutral:not(.disabled):active, a.gl-badge.badge-neutral:not(.disabled):focus-visible, a.gl-badge.badge-neutral:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-badge.badge-info { background-color: var(--gl-badge-info-background-color-default); color: var(--gl-badge-info-text-color-default); } .gl-badge.badge-info .gl-badge-icon { color: var(--gl-badge-info-icon-color-default); transition: inherit; } a.gl-badge.badge-info:not(.disabled):hover { color: var(--gl-badge-info-text-color-hover); background-color: var(--gl-badge-info-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-info-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-info:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-info-icon-color-hover); } a.gl-badge.badge-info:not(.disabled):focus-visible { color: var(--gl-badge-info-text-color-focus); background-color: var(--gl-badge-info-background-color-focus); } a.gl-badge.badge-info:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-info-icon-color-focus); } a.gl-badge.badge-info:not(.disabled).active, a.gl-badge.badge-info:not(.disabled):active { color: var(--gl-badge-info-text-color-active); background-color: var(--gl-badge-info-background-color-active); } a.gl-badge.badge-info:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-info:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-info-icon-color-active); } a.gl-badge.badge-info:not(.disabled):active, a.gl-badge.badge-info:not(.disabled):focus-visible, a.gl-badge.badge-info:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-badge.badge-success { background-color: var(--gl-badge-success-background-color-default); color: var(--gl-badge-success-text-color-default); } .gl-badge.badge-success .gl-badge-icon { color: var(--gl-badge-success-icon-color-default); transition: inherit; } a.gl-badge.badge-success:not(.disabled):hover { color: var(--gl-badge-success-text-color-hover); background-color: var(--gl-badge-success-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-success-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-success:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-success-icon-color-hover); } a.gl-badge.badge-success:not(.disabled):focus-visible { color: var(--gl-badge-success-text-color-focus); background-color: var(--gl-badge-success-background-color-focus); } a.gl-badge.badge-success:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-success-icon-color-focus); } a.gl-badge.badge-success:not(.disabled).active, a.gl-badge.badge-success:not(.disabled):active { color: var(--gl-badge-success-text-color-active); background-color: var(--gl-badge-success-background-color-active); } a.gl-badge.badge-success:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-success:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-success-icon-color-active); } a.gl-badge.badge-success:not(.disabled):active, a.gl-badge.badge-success:not(.disabled):focus-visible, a.gl-badge.badge-success:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-badge.badge-warning { background-color: var(--gl-badge-warning-background-color-default); color: var(--gl-badge-warning-text-color-default); } .gl-badge.badge-warning .gl-badge-icon { color: var(--gl-badge-warning-icon-color-default); transition: inherit; } a.gl-badge.badge-warning:not(.disabled):hover { color: var(--gl-badge-warning-text-color-hover); background-color: var(--gl-badge-warning-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-warning-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-warning:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-warning-icon-color-hover); } a.gl-badge.badge-warning:not(.disabled):focus-visible { color: var(--gl-badge-warning-text-color-focus); background-color: var(--gl-badge-warning-background-color-focus); } a.gl-badge.badge-warning:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-warning-icon-color-focus); } a.gl-badge.badge-warning:not(.disabled).active, a.gl-badge.badge-warning:not(.disabled):active { color: var(--gl-badge-warning-text-color-active); background-color: var(--gl-badge-warning-background-color-active); } a.gl-badge.badge-warning:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-warning:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-warning-icon-color-active); } a.gl-badge.badge-warning:not(.disabled):active, a.gl-badge.badge-warning:not(.disabled):focus-visible, a.gl-badge.badge-warning:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-badge.badge-danger { background-color: var(--gl-badge-danger-background-color-default); color: var(--gl-badge-danger-text-color-default); } .gl-badge.badge-danger .gl-badge-icon { color: var(--gl-badge-danger-icon-color-default); transition: inherit; } a.gl-badge.badge-danger:not(.disabled):hover { color: var(--gl-badge-danger-text-color-hover); background-color: var(--gl-badge-danger-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-danger-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-danger:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-danger-icon-color-hover); } a.gl-badge.badge-danger:not(.disabled):focus-visible { color: var(--gl-badge-danger-text-color-focus); background-color: var(--gl-badge-danger-background-color-focus); } a.gl-badge.badge-danger:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-danger-icon-color-focus); } a.gl-badge.badge-danger:not(.disabled).active, a.gl-badge.badge-danger:not(.disabled):active { color: var(--gl-badge-danger-text-color-active); background-color: var(--gl-badge-danger-background-color-active); } a.gl-badge.badge-danger:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-danger:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-danger-icon-color-active); } a.gl-badge.badge-danger:not(.disabled):active, a.gl-badge.badge-danger:not(.disabled):focus-visible, a.gl-badge.badge-danger:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-badge.badge-tier { background-color: var(--gl-badge-tier-background-color-default); color: var(--gl-badge-tier-text-color-default); } .gl-badge.badge-tier .gl-badge-icon { color: var(--gl-badge-tier-icon-color-default); transition: inherit; } a.gl-badge.badge-tier:not(.disabled):hover { color: var(--gl-badge-tier-text-color-hover); background-color: var(--gl-badge-tier-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-badge-tier-border-color-hover); text-decoration-line: none; } a.gl-badge.badge-tier:not(.disabled):hover .gl-badge-icon { color: var(--gl-badge-tier-icon-color-hover); } a.gl-badge.badge-tier:not(.disabled):focus-visible { color: var(--gl-badge-tier-text-color-focus); background-color: var(--gl-badge-tier-background-color-focus); } a.gl-badge.badge-tier:not(.disabled):focus-visible .gl-badge-icon { color: var(--gl-badge-tier-icon-color-focus); } a.gl-badge.badge-tier:not(.disabled).active, a.gl-badge.badge-tier:not(.disabled):active { color: var(--gl-badge-tier-text-color-active); background-color: var(--gl-badge-tier-background-color-active); } a.gl-badge.badge-tier:not(.disabled).active .gl-badge-icon, a.gl-badge.badge-tier:not(.disabled):active .gl-badge-icon { color: var(--gl-badge-tier-icon-color-active); } a.gl-badge.badge-tier:not(.disabled):active, a.gl-badge.badge-tier:not(.disabled):focus-visible, a.gl-badge.badge-tier:not(.disabled):focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button .gl-badge { top: 0; padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); } .gl-new-dropdown-contents .gl-badge, .gl-tab-nav-item .gl-badge{ margin-top: calc(var(--gl-spacing-scale-1) * -1); margin-bottom: calc(var(--gl-spacing-scale-1) * -1); } .gl-breadcrumbs{ display: flex; } .gl-breadcrumb-list{ background-color: transparent; padding: var(--gl-spacing-scale-0); align-items: flex-start; line-height: 1rem; margin: var(--gl-spacing-scale-0); flex-wrap: nowrap; max-width: 100%; } .modal-header .modal-title.gl-breadcrumb-list { margin-right: -1rem; padding-right: 1rem; } .gl-breadcrumb-item{ display: inline-flex; } .commit-content .committer.gl-breadcrumb-item { gap: 0.5ch; } .gl-breadcrumb-item{ align-items: center; line-height: 1rem; flex-shrink: 0; } .gl-breadcrumb-item:not(:last-child, :has(+ .gl-breadcrumb-clipboard-button))::after { color: var(--gl-breadcrumb-separator-color); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); content: "/"; } .gl-breadcrumb-item > a{ display: inline-block; border-radius: var(--gl-border-radius-default); color: var(--gl-text-color-subtle); text-underline-offset: var(--gl-spacing-scale-1); } .gl-breadcrumb-item > a:hover{ text-decoration-line: underline; } .gl-breadcrumb-item > a:active, .gl-breadcrumb-item > a:focus-visible, .gl-breadcrumb-item > a:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-breadcrumb-item .gl-new-dropdown-icon-only.gl-button.btn-icon { min-height: auto; } .gl-breadcrumb-item:last-child > a, .gl-breadcrumb-item:has(+ .gl-breadcrumb-clipboard-button) > a{ color: var(--gl-text-color-default); font-weight: var(--gl-font-weight-bold); } .gl-breadcrumb-item-sm{ font-size: var(--gl-font-size-sm); height: var(--gl-spacing-scale-6); } .gl-breadcrumb-item-md{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-breadcrumb-item-md{ margin-top: var(--gl-spacing-scale-0); } .gl-breadcrumb-item-md{ height: var(--gl-spacing-scale-7); } .gl-breadcrumb-item { /** * If the last/only item, which is always visible, has a very long title, * it could overflow the breadcrumb component. This CSS makes sure it * shows an ellipsis instead. * But this CSS cannot be active while we do the size calculation, as that * would then not take the real unshrunk width of that item into account. */ } .gl-breadcrumb-item.gl-breadcrumb-only-item{ flex-shrink: 1; max-width: var(--gl-breadcrumb-truncated-item-max-width, 100%); } .gl-breadcrumb-item.gl-breadcrumb-only-item a{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; } .modal-header .modal-title.gl-breadcrumb-item.gl-breadcrumb-only-item a { margin-right: -1rem; padding-right: 1rem; } .gl-breadcrumb-clipboard-button{ line-height: 1rem; flex-shrink: 0; } .gl-banner{ border-radius: var(--gl-feedback-border-radius); background-color: var(--gl-banner-promo-background-color); border-color: var(--gl-banner-promo-border-color); } .gl-banner-illustration{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-6); } .gl-banner-illustration img { max-width: 7.5rem; } @container (width < 768px) { :where(html.with-gl-container-queries) .gl-banner-illustration { display: none; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .gl-banner-illustration { display: none; } } .gl-banner-title{ font-weight: var(--gl-heading-scale-500-font-weight); margin-top: var(--gl-heading-scale-500-margin-top); font-size: var(--gl-heading-scale-500-font-size); letter-spacing: var(--gl-heading-scale-500-letter-spacing); line-height: var(--gl-heading-scale-500-line-height); color: var(--gl-heading-scale-500-color); margin-bottom: var(--gl-spacing-scale-3); } .gl-banner-close { position: absolute; top: 0.5rem; right: 0.5rem; } .gl-banner-introduction { background-color: var(--gl-feedback-info-background-color); border-color: var(--gl-banner-intro-border-color); } /* * --gl-broadcast-message-padding-x * * Way to hook into spacing of gl-alert. * This is used e.g. for page wide containers * in GitLab. */ .gl-broadcast-message{ display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-broadcast-message{ margin-top: var(--gl-spacing-scale-0); } .gl-broadcast-message{ line-height: var(--gl-line-height-20); padding-left: calc(1rem + var(--gl-broadcast-message-padding-x, 0px)); padding-right: calc(0.75rem + var(--gl-broadcast-message-padding-x, 0px)); padding-top: var(--gl-spacing-scale-5); padding-bottom: var(--gl-spacing-scale-5); } .gl-broadcast-message.indigo { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-indigo); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-indigo); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-indigo); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-indigo); } .gl-broadcast-message.light-indigo { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightindigo); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightindigo); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightindigo); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightindigo); } .gl-broadcast-message.blue { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-blue); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-blue); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-blue); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-blue); } .gl-broadcast-message.light-blue { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightblue); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightblue); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightblue); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightblue); } .gl-broadcast-message.green { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-green); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-green); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-green); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-green); } .gl-broadcast-message.light-green { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightgreen); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightgreen); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightgreen); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightgreen); } .gl-broadcast-message.red { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-red); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-red); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-red); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-red); } .gl-broadcast-message.light-red { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightred); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightred); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightred); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightred); } .gl-broadcast-message.dark { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-dark); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-dark); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-dark); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-dark); } .gl-broadcast-message.light { --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-light); --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-light); --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-light); --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-light); } .gl-broadcast-message.banner { background-color: var(--gl-broadcast-message-bg-color); box-shadow: inset 0 -1px 0 0 var(--gl-broadcast-message-border-color); color: var(--gl-broadcast-message-text-color); } .gl-broadcast-message.banner .gl-broadcast-message-icon { color: var(--gl-broadcast-message-icon-color); } .gl-broadcast-message.notification{ border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; --tw-shadow: var(--gl-shadow-md); --tw-shadow-colored: var(--gl-shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); background-color: var(--gl-background-color-overlap); color: var(--gl-text-color-default); border-radius: var(--gl-broadcast-banner-border-radius); max-width: 18.75rem; } .gl-broadcast-message-content{ display: flex; justify-content: center; } .gl-broadcast-message-content a{ color: inherit; text-decoration-line: underline; } .gl-broadcast-message-content p:last-of-type{ margin-bottom: var(--gl-spacing-scale-0); } .gl-broadcast-message-icon{ margin-right: var(--gl-spacing-scale-5); line-height: 1rem; } .gl-broadcast-message-icon > svg{ vertical-align: bottom; } .gl-broadcast-message-text { margin-top: -0.125rem; margin-bottom: -0.125rem; hyphens: auto; overflow-wrap: anywhere; word-break: normal; } .gl-broadcast-message-dismiss{ margin-top: calc(var(--gl-spacing-scale-2) * -1); margin-bottom: calc(var(--gl-spacing-scale-2) * -1); margin-left: var(--gl-spacing-scale-5); color: inherit !important; } /*! * Pikaday * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/ */ .pika-single { z-index: 9999; display: block; position: relative; color: var(--gl-text-color-default); background: var(--gl-datepicker-background-color); border: 1px solid var(--gl-border-color-default); border-bottom-color: var(--gl-border-color-default); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .pika-single.is-hidden { display: none; } .pika-single.is-bound { position: absolute; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5); } .pika-single { *zoom: 1; } .pika-single:before, .pika-single:after { content: " "; display: table; } .pika-single:after { clear: both; } .pika-lendar { float: left; width: 240px; margin: 8px; } .pika-title { position: relative; text-align: center; } .pika-title select { cursor: pointer; position: absolute; z-index: 9998; margin: 0; left: 0; top: 5px; filter: alpha(opacity=0); opacity: 0; } .pika-label { display: inline-block; *display: inline; position: relative; z-index: 9999; overflow: hidden; margin: 0; padding: 5px 3px; font-size: 14px; line-height: 20px; font-weight: bold; color: var(--gl-action-neutral-foreground-color-default); background-color: var(--gl-action-neutral-background-color-default); } .pika-prev, .pika-next { display: block; cursor: pointer; position: relative; outline: none; border: 0; padding: 0; width: 20px; height: 30px; text-indent: 20px; white-space: nowrap; overflow: hidden; background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 75% 75%; opacity: 0.5; *position: absolute; *top: 0; } .pika-prev:hover, .pika-next:hover { opacity: 1; } .pika-prev.is-disabled, .pika-next.is-disabled { cursor: default; opacity: 0.2; } .pika-prev, .is-rtl .pika-next { float: left; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=="); *left: 0; } .pika-next, .is-rtl .pika-prev { float: right; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII="); *right: 0; } .pika-select { display: inline-block; *display: inline; } .pika-table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 0; } .pika-table th, .pika-table td { width: 14.2857142857%; padding: 0; } .pika-table th { color: var(--gl-text-color-subtle); font-size: 12px; line-height: 25px; font-weight: bold; text-align: center; } .pika-table abbr { border-bottom: none; cursor: help; } .pika-button { cursor: pointer; display: block; box-sizing: border-box; outline: none; border: 0; margin: 0; width: 100%; padding: 5px; color: var(--gl-text-color-default); font-size: 12px; line-height: 15px; text-align: right; background: transparent; } .is-today .pika-button { color: var(--gl-text-color-default); font-weight: bold; } .is-selected .pika-button { color: var(--gl-datepicker-date-text-color-selected); font-weight: bold; background: var(--gl-control-background-color-selected-default); box-shadow: inset 0 1px 3px var(--gl-control-background-color-selected-default); border-radius: 3px; } .is-disabled .pika-button, .is-outside-current-month .pika-button { color: var(--gl-text-color-disabled); opacity: 0.3; } .is-disabled .pika-button { pointer-events: none; cursor: default; } .pika-button:hover { color: var(--gl-text-color-default); background: transparent; box-shadow: none; border-radius: 3px; } .pika-button .is-selection-disabled { pointer-events: none; cursor: default; } .pika-week { font-size: 11px; color: var(--gl-text-color-subtle); } .is-inrange .pika-button { background: #D5E9F7; } .is-startrange .pika-button { color: #fff; background: #6CB31D; box-shadow: none; border-radius: 3px; } .is-endrange .pika-button { color: #fff; background: #33aaff; box-shadow: none; border-radius: 3px; } .gl-datepicker-actions{ font-size: var(--gl-font-size-sm); position: absolute; top: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); } .gl-datepicker-actions .gl-button.gl-button{ border-radius: var(--gl-border-radius-md); } .gl-datepicker-theme{ font-family: var(--gl-font-family-regular); border-style: none; margin-top: var(--gl-spacing-scale-3); border-radius: var(--gl-dropdown-border-radius); background-color: var(--gl-datepicker-background-color); } .gl-datepicker-theme.is-bound{ --tw-shadow: var(--gl-shadow-md); --tw-shadow-colored: var(--gl-shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (forced-colors: active) { .gl-datepicker-theme.is-bound { border: 1px solid; } } .gl-datepicker-theme .pika-lendar{ margin: var(--gl-spacing-scale-0); padding-top: var(--gl-spacing-scale-5); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); border-radius: var(--gl-border-radius-default); } .gl-datepicker-theme .pika-title{ line-height: 1rem; margin-bottom: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); } .gl-datepicker-theme .pika-next, .gl-datepicker-theme .pika-prev{ border-radius: .125rem; width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); } .gl-datepicker-theme .pika-next.is-disabled, .gl-datepicker-theme .pika-prev.is-disabled{ cursor: not-allowed; } @media (forced-colors: none) { .gl-datepicker-theme .pika-next, .gl-datepicker-theme .pika-prev { background-color: var(--gl-action-neutral-background-color-default); box-shadow: inset 0 0 0 1px var(--gl-action-neutral-border-color-default); background-image: none; opacity: 100%; } .gl-datepicker-theme .pika-next::before, .gl-datepicker-theme .pika-prev::before { /* Apply a slightly larger border-radius to the ::before pseudo-element to prevent background color shimmer issue in Safari. This is necessary because the parent element (which already has a border-radius) requires the ::before element to extend beyond its edges to ensure proper coverage. */ border-radius: var(--gl-border-radius-lg); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--gl-action-neutral-foreground-color-default); } .gl-datepicker-theme .pika-next:not(.is-disabled):hover, .gl-datepicker-theme .pika-prev:not(.is-disabled):hover { background-color: var(--gl-action-neutral-background-color-hover); } .gl-datepicker-theme .pika-next:not(.is-disabled):hover::before, .gl-datepicker-theme .pika-prev:not(.is-disabled):hover::before { background-color: var(--gl-action-neutral-foreground-color-hover); } .gl-datepicker-theme .pika-next:not(.is-disabled):focus-visible, .gl-datepicker-theme .pika-prev:not(.is-disabled):focus-visible { background-color: var(--gl-action-neutral-background-color-focus); } .gl-datepicker-theme .pika-next:not(.is-disabled):focus-visible::before, .gl-datepicker-theme .pika-prev:not(.is-disabled):focus-visible::before { background-color: var(--gl-action-neutral-foreground-color-focus); } .gl-datepicker-theme .pika-next:not(.is-disabled):active, .gl-datepicker-theme .pika-prev:not(.is-disabled):active { background-color: var(--gl-action-neutral-background-color-active); } .gl-datepicker-theme .pika-next:not(.is-disabled):active::before, .gl-datepicker-theme .pika-prev:not(.is-disabled):active::before { background-color: var(--gl-action-neutral-foreground-color-active); } .gl-datepicker-theme .pika-next.is-disabled::before, .gl-datepicker-theme .pika-prev.is-disabled::before { background-color: var(--gl-action-disabled-foreground-color); } } @media (forced-colors: active) { .gl-datepicker-theme .pika-next, .gl-datepicker-theme .pika-prev { border: 1px solid; } } .gl-datepicker-theme .pika-next::before { mask-image: url('data:image/svg+xml;utf8,'); } @media (forced-colors: active) { .gl-datepicker-theme .pika-next { background-image: url('data:image/svg+xml;utf8,'); } } .gl-datepicker-theme .pika-prev::before { mask-image: url('data:image/svg+xml;utf8,'); } @media (forced-colors: active) { .gl-datepicker-theme .pika-prev { background-image: url('data:image/svg+xml;utf8,'); } } .gl-datepicker-theme .pika-label{ border-radius: .125rem; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-datepicker-theme .pika-label{ margin-top: var(--gl-spacing-scale-0); } .gl-datepicker-theme .pika-label{ padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); background-color: var(--gl-action-neutral-background-color-default); box-shadow: inset 0 0 0 1px var(--gl-action-neutral-border-color-default); color: var(--gl-action-neutral-foreground-color-default); } .gl-datepicker-theme .pika-label:hover { background-color: var(--gl-action-neutral-background-color-hover); box-shadow: inset 0 0 0 1px var(--gl-action-neutral-border-color-hover); color: var(--gl-action-neutral-foreground-color-hover); } @media (forced-colors: active) { .gl-datepicker-theme .pika-label { border: 1px solid; } } .gl-datepicker-theme .pika-select { top: 0; height: var(--gl-spacing-scale-5); } .gl-datepicker-theme th{ padding-bottom: var(--gl-spacing-scale-3); font-weight: var(--gl-font-weight-bold); line-height: 1rem; } .gl-datepicker-theme abbr[title]{ text-decoration-line: none; cursor: default; } .gl-datepicker-theme .pika-button { border-radius: var(--gl-action-border-radius); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); text-align: center; line-height: 1rem; width: var(--gl-spacing-scale-7); height: var(--gl-spacing-scale-7); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-datepicker-theme .pika-button{ margin-top: var(--gl-spacing-scale-0); } .gl-datepicker-theme .pika-button{ border-width: 1px; border-style: solid; border-color: var(--gl-border-color-transparent); } .gl-datepicker-theme .pika-button:hover { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-hover); } @media (forced-colors: active) { .gl-datepicker-theme .pika-button { border: 1px solid; } } .gl-datepicker-theme .is-today > .pika-button{ font-weight: var(--gl-font-weight-bold); border-color: var(--gl-border-color-strong); } .gl-datepicker-theme .is-selected > .pika-button{ font-weight: var(--gl-font-weight-normal); } .gl-datepicker-theme .is-selected > .pika-button:hover { background-color: var(--gl-control-background-color-selected-hover); color: var(--gl-datepicker-date-text-color-selected); box-shadow: none; } .gl-datepicker-theme .is-selected.is-today > .pika-button{ font-weight: var(--gl-font-weight-bold); border-color: var(--gl-border-color-transparent); } .gl-datepicker-theme .is-disabled{ cursor: not-allowed; } .gl-daterange-picker{ line-height: 1rem; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-daterange-picker{ margin-top: var(--gl-spacing-scale-0); } .gl-daterange-picker{ font-family: var(--gl-font-family-regular); } .gl-daterange-picker label{ font-weight: var(--gl-font-weight-bold); color: var(--gl-text-color-strong); } .gl-daterange-picker .gl-daterange-picker-indicator{ display: flex; flex-direction: row; align-items: center; align-self: flex-end; gap: var(--gl-spacing-scale-3); height: var(--gl-spacing-scale-7); color: var(--gl-text-color-subtle); } .gl-drawer{ background-color: var(--gl-background-color-overlap); right: 0; transition-property: all; transition-timing-function: ease; transition-duration: 200ms; position: fixed; height: 100%; width: 100%; } .modal-header .modal-title.gl-drawer { margin-right: -1rem; padding-right: 1rem; } .gl-drawer{ overflow-y: auto; --tw-shadow: var(--gl-shadow-lg); --tw-shadow-colored: var(--gl-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-drawer{ margin-top: var(--gl-spacing-scale-0); } .gl-drawer{ line-height: 1rem; display: flex; flex-direction: column; border-top-left-radius: var(--gl-drawer-border-radius); border-bottom-left-radius: var(--gl-drawer-border-radius); } .gl-drawer .gl-drawer-header-sticky{ background-color: var(--gl-background-color-overlap); top: 0; position: sticky; } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-drawer-default { width: 400px; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-drawer-default { width: 400px; } } .gl-drawer-default .gl-drawer-header, .gl-drawer-default .gl-drawer-body > *{ padding: var(--gl-spacing-scale-5); } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-drawer-sidebar { width: 290px; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-drawer-sidebar { width: 290px; } } .gl-drawer-sidebar .gl-drawer-header, .gl-drawer-sidebar .gl-drawer-body > *{ padding-top: var(--gl-spacing-scale-5); padding-bottom: var(--gl-spacing-scale-5); } .gl-drawer-sidebar .gl-drawer-body > *{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; margin-left: var(--gl-spacing-scale-5); margin-right: var(--gl-spacing-scale-5); } .gl-drawer-sidebar .gl-drawer-body > *:last-child{ border-style: none; } .gl-drawer-sidebar .gl-drawer-header{ padding-left: var(--gl-spacing-scale-5); padding-right: var(--gl-spacing-scale-5); } .gl-drawer-footer{ background-color: var(--gl-background-color-overlap); border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 1px; padding: var(--gl-spacing-scale-5); } .gl-drawer-body-scrim-on-footer::before { background: linear-gradient(to bottom, var(--gl-color-alpha-0), var(--gl-background-color-overlap)); top: -1px; --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); content: ""; left: 0; position: absolute; pointer-events: none; width: 100%; } .modal-header .modal-title.gl-drawer-body-scrim-on-footer::before { margin-right: -1rem; padding-right: 1rem; } .gl-drawer-body-scrim-on-footer::before{ height: var(--gl-spacing-scale-7); } .gl-drawer-footer-sticky { bottom: 0; position: sticky; } .gl-drawer-header{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; } .gl-drawer-title{ color: var(--gl-text-color-heading); display: flex; align-items: center; justify-content: space-between; } .gl-drawer-title svg{ width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); vertical-align: middle; } .gl-drawer-close-button{ align-self: flex-start; background-color: transparent; border-style: none; } .gl-drawer-body{ flex-grow: 1; background-color: inherit; } .gl-drawer-body-shrink { overflow-y: auto; } .gl-drawer-body-scrim::after { background: linear-gradient(to bottom, var(--gl-color-alpha-0), var(--gl-background-color-overlap)); content: ""; bottom: 0; pointer-events: none; width: 100%; } .modal-header .modal-title.gl-drawer-body-scrim::after { margin-right: -1rem; padding-right: 1rem; } .gl-drawer-body-scrim::after { position: fixed; height: var(--gl-spacing-scale-7); border-bottom-left-radius: var(--gl-drawer-border-radius); } .gl-drawer-enter-to{ --tw-translate-x: var(--gl-spacing-scale-0); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .gl-drawer-enter, .gl-drawer-leave-to{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .gl-drawer-enter-active, .gl-drawer-leave-active{ transition-property: all; transition-timing-function: ease; transition-duration: 200ms; } .gl-dropdown .dropdown-menu{ border-width: 1px; border-color: var(--gl-dropdown-border-color); background-color: var(--gl-dropdown-background-color); margin-top: var(--gl-spacing-scale-2); margin-bottom: var(--gl-spacing-scale-2); padding: var(--gl-spacing-scale-0); --tw-shadow: 0 2px 4px 0 #0000001a; --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-radius: var(--gl-dropdown-border-radius); width: 15rem; } .gl-dropdown .dropdown-menu .gl-search-box-by-type{ margin: var(--gl-spacing-scale-3); } .gl-dropdown .dropdown-menu li{ padding: var(--gl-spacing-scale-0); } .gl-dropdown .gl-dropdown-inner{ display: flex; flex-direction: column; max-height: 19.5rem; } .gl-dropdown .gl-dropdown-inner > :first-child{ padding-top: var(--gl-spacing-scale-3); } .gl-dropdown .gl-dropdown-inner > :last-child{ padding-bottom: var(--gl-spacing-scale-3); } .gl-dropdown .gl-dropdown-contents{ flex-grow: 1; overflow-y: auto; } .gl-dropdown .gl-dropdown-header-top{ border-width: 1px; border-color: var(--gl-dropdown-divider-color); border-bottom-style: solid; display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-dropdown .gl-dropdown-header-top{ margin-top: var(--gl-spacing-scale-0); } .gl-dropdown .gl-dropdown-header-top{ color: var(--gl-text-color-strong); font-weight: var(--gl-font-weight-bold); justify-content: center; line-height: 1rem; margin: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-5); padding-right: var(--gl-spacing-scale-5); } .gl-dropdown .gl-dropdown-header{ border-bottom-width: 1px; border-bottom-color: var(--gl-dropdown-divider-color); border-bottom-style: solid; } .gl-dropdown .gl-dropdown-footer{ border-top-width: 1px; border-top-color: var(--gl-dropdown-divider-color); border-top-style: solid; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .gl-dropdown .dropdown-toggle::after{ display: none; } .gl-dropdown .dropdown-toggle.gl-button, .gl-dropdown .dropdown-toggle.gl-button.btn-block{ padding-right: var(--gl-spacing-scale-3); } .gl-dropdown .dropdown-toggle.gl-button.btn-sm, .gl-dropdown .btn-group-sm > .dropdown-toggle.gl-button.btn, .gl-dropdown .dropdown-toggle.gl-button.btn-block.btn-sm{ padding-right: var(--gl-spacing-scale-2); } .gl-dropdown .dropdown-toggle.dropdown-toggle-no-caret, .gl-dropdown .dropdown-toggle.dropdown-toggle-no-caret.btn-sm{ padding: var(--gl-spacing-scale-3); } .gl-dropdown .dropdown-toggle.dropdown-toggle-no-caret .dropdown-chevron, .gl-dropdown .dropdown-toggle.dropdown-toggle-no-caret.btn-sm .dropdown-chevron { display: none; } .gl-dropdown .dropdown-toggle-split::after{ border-width: 0px; content: ""; display: block; width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); background-color: currentColor; mask-image: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center; mask-size: cover; } .gl-dropdown .dropdown-toggle-split.gl-button{ padding-left: var(--gl-spacing-scale-0); padding-right: var(--gl-spacing-scale-0); } .gl-dropdown .dropdown-toggle-split.gl-button.btn-sm, .gl-dropdown .btn-group-sm > .dropdown-toggle-split.gl-button.btn{ padding-left: var(--gl-spacing-scale-0); padding-right: var(--gl-spacing-scale-0); } .gl-dropdown .gl-dropdown-toggle.btn-block{ justify-content: space-between; } .gl-dropdown .gl-dropdown-toggle .gl-button-text{ display: inline-flex; } .commit-content .committer.gl-dropdown .gl-dropdown-toggle .gl-button-text { gap: 0.5ch; } .gl-dropdown .gl-dropdown-button-text{ margin-right: auto; overflow: hidden; text-overflow: ellipsis; } .gl-dropdown.dropdown.show .dropdown-toggle-split{ border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); } .gl-dropdown.dropdown.btn-sm .gl-icon, .btn-group-sm > .gl-dropdown.dropdown.btn .gl-icon{ margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); } .gl-dropdown.dropdown.btn-sm .gl-icon.dropdown-chevron, .btn-group-sm > .gl-dropdown.dropdown.btn .gl-icon.dropdown-chevron{ height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); } .gl-dropdown.dropdown .gl-button .dropdown-chevron, .gl-dropdown.dropdown .gl-button.btn-block .dropdown-chevron, .gl-dropdown.dropdown .dropdown-chevron{ margin-left: var(--gl-spacing-scale-2); margin-right: var(--gl-spacing-scale-0); } .gl-dropdown .dropdown-icon{ margin-right: var(--gl-spacing-scale-2); } .gl-dropdown .dropdown-icon-text, .gl-dropdown .dropdown-icon-only{ padding-left: var(--gl-spacing-scale-3); } .gl-dropdown .dropdown-icon-only.dropdown-toggle-no-caret { padding: 0 !important; } .gl-dropdown .dropdown-icon-only .dropdown-icon, .gl-dropdown .dropdown-icon-only .gl-button-icon.gl-button-icon{ margin-right: var(--gl-spacing-scale-0); } .gl-dropdown .dropdown-icon-only.btn-sm .dropdown-chevron, .gl-dropdown .btn-group-sm > .dropdown-icon-only.btn .dropdown-chevron{ margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); } .gl-dropdown .split-content-button{ padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); } .gl-dropdown .icon-split-content-button{ padding-left: var(--gl-spacing-scale-3); } .gl-dropdown .icon-split-content-button .dropdown-icon{ margin-right: var(--gl-spacing-scale-0); } /* Styling when the component is used on its own */ .gl-dropdown-divider{ overflow: hidden; height: var(--gl-spacing-scale-0); margin-top: var(--gl-spacing-scale-2); margin-bottom: var(--gl-spacing-scale-2); margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); padding: var(--gl-spacing-scale-0); border-top-width: 1px; border-top-color: var(--gl-dropdown-divider-color); border-top-style: solid; } /* Styling to override the vue-bootstrap CSS included in GitLab CSS */ .gl-dropdown .gl-dropdown-divider{ overflow: hidden; height: var(--gl-spacing-scale-0); margin-top: var(--gl-spacing-scale-2); margin-bottom: var(--gl-spacing-scale-2); margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); padding: var(--gl-spacing-scale-0); border-top-width: 1px; border-top-color: var(--gl-dropdown-divider-color); border-top-style: solid; } /* Styling when the component is used on its own */ .gl-dropdown-section-header .dropdown-header{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-dropdown-section-header .dropdown-header{ margin-top: var(--gl-spacing-scale-0); } .gl-dropdown-section-header .dropdown-header{ color: var(--gl-text-color-strong); line-height: 1rem; text-align: left; font-weight: var(--gl-font-weight-bold); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); white-space: normal; } /* Styling to override the vue-bootstrap CSS included in GitLab CSS */ .gl-dropdown .gl-dropdown-section-header .dropdown-header{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-dropdown .gl-dropdown-section-header .dropdown-header{ margin-top: var(--gl-spacing-scale-0); } .gl-dropdown .gl-dropdown-section-header .dropdown-header{ color: var(--gl-text-color-strong); line-height: 1rem; text-align: left; font-weight: var(--gl-font-weight-bold); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); white-space: normal; } .gl-dropdown-item .dropdown-item{ align-items: center; background-color: transparent; border-width: 0px; display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-dropdown-item .dropdown-item{ margin-top: var(--gl-spacing-scale-0); } .gl-dropdown-item .dropdown-item{ font-weight: var(--gl-font-weight-normal); line-height: 1rem; padding-left: var(--gl-spacing-scale-5); padding-right: var(--gl-spacing-scale-5); padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); position: relative; border-radius: var(--gl-border-radius-none); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); color: var(--gl-dropdown-option-text-color-default); text-align: left; width: 100%; } .modal-header .modal-title.gl-dropdown-item .dropdown-item { margin-right: -1rem; padding-right: 1rem; } .gl-dropdown-item .dropdown-item{ white-space: normal; cursor: pointer; } .gl-dropdown-item .dropdown-item .gl-avatar{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-3); } .gl-dropdown-item .dropdown-item .gl-dropdown-item-check-icon{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-3); color: var(--gl-dropdown-option-indicator-color-selected-default); } .gl-dropdown-item .dropdown-item .gl-dropdown-item-icon{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-3); } .gl-dropdown-item .dropdown-item .gl-dropdown-item-text-primary{ margin: var(--gl-spacing-scale-0); } .gl-dropdown-item .dropdown-item .gl-dropdown-item-text-secondary{ margin: var(--gl-spacing-scale-0); color: var(--gl-text-color-subtle); } .gl-dropdown-item .dropdown-item .gl-dropdown-item-text-wrapper{ min-width: var(--gl-spacing-scale-0); flex-grow: 1; margin-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .gl-dropdown-item .dropdown-item.text-danger{ color: var(--gl-text-color-danger); } .gl-dropdown-item .dropdown-item.disable-hover{ text-decoration-line: none; } .gl-dropdown-item .dropdown-item:disabled{ color: var(--gl-text-color-disabled); } .gl-dropdown-item .dropdown-item:disabled .gl-new-dropdown-item-check-icon{ color: inherit; } .gl-dropdown-item .dropdown-item:disabled .gl-new-dropdown-item-text-secondary{ color: inherit; } .gl-dropdown-item .dropdown-item:disabled .gl-avatar{ opacity: var(--gl-opacity-7); } .gl-dropdown-item .dropdown-item:not(.disable-hover):hover, .gl-dropdown-item .dropdown-item:active, .gl-dropdown-item .dropdown-item:focus-visible, .gl-dropdown-item .dropdown-item.is-focused { background-color: var(--gl-dropdown-option-background-color-unselected-hover); text-decoration-line: none; color: var(--gl-dropdown-option-text-color-default); } .gl-dropdown-item .dropdown-item:not(.disable-hover):hover.text-danger, .gl-dropdown-item .dropdown-item:active.text-danger, .gl-dropdown-item .dropdown-item:focus-visible.text-danger, .gl-dropdown-item .dropdown-item.is-focused.text-danger{ color: var(--gl-text-color-danger); } .gl-dropdown-item .dropdown-item:active, .gl-dropdown-item .dropdown-item:focus-visible, .gl-dropdown-item .dropdown-item:focus-visible:active { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-dropdown-item .dropdown-item:active, .gl-dropdown-item .dropdown-item:focus-visible, .gl-dropdown-item .dropdown-item:focus-visible:active { outline: 2px solid LinkText; } } .gl-dropdown-text .b-dropdown-text{ align-items: center; background-color: transparent; border-width: 0px; display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-dropdown-text .b-dropdown-text{ margin-top: var(--gl-spacing-scale-0); } .gl-dropdown-text .b-dropdown-text{ font-weight: var(--gl-font-weight-normal); line-height: 1rem; padding-left: var(--gl-spacing-scale-5); padding-right: var(--gl-spacing-scale-5); padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); position: relative; border-radius: var(--gl-border-radius-none); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); color: var(--gl-dropdown-option-text-color-default); text-align: left; width: 100%; } .modal-header .modal-title.gl-dropdown-text .b-dropdown-text { margin-right: -1rem; padding-right: 1rem; } .gl-dropdown-text .b-dropdown-text{ white-space: normal; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .gl-filtered-search-scrollable-container{ display: flex; flex-grow: 1; flex-basis: var(--gl-spacing-scale-0); overflow: hidden; align-items: center; padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-7); border-style: none; border-radius: var(--gl-control-border-radius); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default); background-color: var(--gl-control-background-color-default); } .input-group-prepend + .gl-filtered-search-scrollable-container{ border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); } .gl-filtered-search-scrollable-container-with-search-button{ border-top-right-radius: var(--gl-border-radius-none); border-bottom-right-radius: var(--gl-border-radius-none); } .gl-filtered-search-scrollable{ display: flex; overflow-y: auto; width: 100%; } .modal-header .modal-title.gl-filtered-search-scrollable { margin-right: -1rem; padding-right: 1rem; } .gl-filtered-search-item{ display: flex; padding-left: var(--gl-spacing-scale-1); padding-right: var(--gl-spacing-scale-1); } .gl-filtered-search-item:first-child{ padding-left: var(--gl-spacing-scale-0); } .gl-filtered-search-last-item .gl-filtered-search-term-value{ height: 100%; width: 100%; } .modal-header .modal-title.gl-filtered-search-last-item .gl-filtered-search-term-value { margin-right: -1rem; padding-right: 1rem; } .gl-filtered-search-last-item .gl-filtered-search-term-value{ align-items: center; } .gl-filtered-search-last-item{ flex-grow: 1; padding: var(--gl-spacing-scale-0); padding-left: var(--gl-spacing-scale-1); height: var(--gl-spacing-scale-6); min-width: 5rem; } .gl-filtered-search-view-only { background: var(--gl-control-background-color-disabled); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-disabled); } .gl-filtered-search-suggestion{ padding: var(--gl-spacing-scale-0); } .gl-filtered-search-suggestion-active { background-color: var(--gl-dropdown-option-background-color-selected-default); text-decoration-line: none; color: var(--gl-dropdown-option-text-color-default); outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-filtered-search-suggestion-active { outline: 2px solid LinkText; } } .gl-filtered-search-suggestion-list.dropdown-menu{ display: block; width: 15rem; padding: var(--gl-spacing-scale-2); background-color: var(--gl-dropdown-background-color); border-color: var(--gl-dropdown-border-color); border-radius: var(--gl-border-radius-lg); --tw-shadow: var(--gl-shadow-md); --tw-shadow-colored: var(--gl-shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-filtered-search-suggestion-list { position: absolute; overflow-y: auto; max-height: 19.5rem; } .gl-filtered-search-suggestion-list .gl-filtered-search-suggestion, .gl-filtered-search-suggestion-list .gl-filtered-search-suggestion > a, .gl-filtered-search-suggestion-list .gl-filtered-search-suggestion > button{ border-radius: var(--gl-border-radius-default) !important; } .gl-filtered-search-suggestion-list .gl-dropdown-divider{ margin-left: calc(var(--gl-spacing-scale-2) * -1); margin-right: calc(var(--gl-spacing-scale-2) * -1); } .gl-filtered-search-suggestion-list .gl-spinner-container{ margin-top: var(--gl-spacing-scale-2); margin-bottom: var(--gl-spacing-scale-2); } .gl-filtered-search-suggestion-list .gl-filtered-search-suggestion{ padding: var(--gl-spacing-scale-0); } .gl-filtered-search-term .gl-filtered-search-term-token{ cursor: text; } .gl-filtered-search-term-input{ padding: var(--gl-spacing-scale-0); background-color: transparent; border-style: none; outline: 2px solid transparent; outline-offset: 2px; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title.gl-filtered-search-term-input { margin-right: -1rem; padding-right: 1rem; } .gl-filtered-search-term-input { min-width: 15rem; } .gl-filtered-search-term-icon{ margin-right: var(--gl-spacing-scale-2); } .gl-filtered-search-token.gl-filtered-search-token-active{ cursor: default; } .gl-filtered-search-token{ height: var(--gl-spacing-scale-6); display: inline-flex; } .commit-content .committer.gl-filtered-search-token { gap: 0.5ch; } .gl-filtered-search-token{ white-space: nowrap; cursor: pointer; } .gl-filtered-search-token.gl-filtered-search-token-hover:hover .gl-filtered-search-token-type { background-color: var(--gl-filtered-search-token-type-background-color-hover); } .gl-filtered-search-token.gl-filtered-search-token-hover:hover .gl-filtered-search-token-data { background-color: var(--gl-filtered-search-token-data-background-color-hover); } .gl-filtered-search-token.gl-filtered-search-token-hover:hover .gl-filtered-search-token-operator { background-color: var(--gl-filtered-search-token-operator-background-color-hover); } .gl-token{ border-radius: var(--gl-border-radius-none); } .gl-token.gl-filtered-search-token-type{ height: var(--gl-spacing-scale-6); border-top-right-radius: var(--gl-border-radius-none); border-bottom-right-radius: var(--gl-border-radius-none); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); margin-right: var(--gl-spacing-scale-1); background-color: var(--gl-filtered-search-token-type-background-color-default); } .gl-token.gl-filtered-search-token-operator{ height: var(--gl-spacing-scale-6); margin-right: var(--gl-spacing-scale-1); border-radius: var(--gl-border-radius-none); background-color: var(--gl-filtered-search-token-operator-background-color-default); } .gl-token.gl-filtered-search-token-data{ height: var(--gl-spacing-scale-6); background-color: var(--gl-filtered-search-token-data-background-color-default); border-top-right-radius: var(--gl-token-border-radius); border-bottom-right-radius: var(--gl-token-border-radius); } .gl-token.gl-filtered-search-token-data .gl-filtered-search-token-data-content{ display: inline-flex; } .commit-content .committer.gl-token.gl-filtered-search-token-data .gl-filtered-search-token-data-content { gap: 0.5ch; } .gl-filtered-search-token-operator-description{ color: var(--gl-text-color-subtle); margin-left: auto; } .gl-filtered-search-token-segment{ display: inline-flex; } .commit-content .committer.gl-filtered-search-token-segment { gap: 0.5ch; } .gl-filtered-search-token-segment{ align-items: center; width: 100%; } .modal-header .modal-title.gl-filtered-search-token-segment { margin-right: -1rem; padding-right: 1rem; } .gl-filtered-search-token-segment{ height: var(--gl-spacing-scale-6); white-space: nowrap; cursor: pointer; } .gl-filtered-search-token-segment.gl-filtered-search-token-segment-active{ cursor: default; } .gl-filtered-search-token-segment-input{ padding: var(--gl-spacing-scale-0); height: 100%; background-color: transparent; border-style: none; outline: 2px solid transparent; outline-offset: 2px; min-width: 15rem; } .gl-filtered-search-token-segment-input.gl-form-date input:not(.form-control-plaintext){ border-radius: var(--gl-border-radius-none); padding: var(--gl-spacing-scale-0); height: 100%; background-color: transparent; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); width: auto; } .gl-filtered-search-token-segment-input.gl-form-date input:not(.form-control-plaintext):hover, .gl-filtered-search-token-segment-input.gl-form-date input:not(.form-control-plaintext):focus{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-filtered-search-token-segment-input-disabled { background: var(--gl-control-background-color-disabled); } .gl-filtered-search-token-segment-icon{ margin-right: var(--gl-spacing-scale-2); } .gl-form-date input::-webkit-datetime-edit { line-height: 1; padding: 0; margin-bottom: -2px; } input[type=color].form-control { height: 32px; padding: 0.125rem 0.25rem; } input[type=color].form-control.form-control-sm, .input-group-sm input[type=color].form-control { height: calc(1.5em + 0.5rem + 2px); padding: 0.125rem 0.25rem; } input[type=color].form-control.form-control-lg, .input-group-lg input[type=color].form-control { height: calc(1.5em + 1rem + 2px); padding: 0.125rem 0.25rem; } input[type=color].form-control:disabled { background-color: #747273; opacity: 0.65; } .input-group > .custom-range { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0; } .input-group > .custom-range + .form-control, .input-group > .custom-range + .form-control-plaintext, .input-group > .custom-range + .custom-select, .input-group > .custom-range + .custom-range, .input-group > .custom-range + .custom-file { margin-left: -1px; } .input-group > .form-control + .custom-range, .input-group > .form-control-plaintext + .custom-range, .input-group > .custom-select + .custom-range, .input-group > .custom-range + .custom-range, .input-group > .custom-file + .custom-range { margin-left: -1px; } .input-group > .custom-range:focus { z-index: 3; } .input-group > .custom-range:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .custom-range:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .custom-range { padding: 0 0.75rem; background-color: #28272d; background-clip: padding-box; border: 1px solid #747273; height: 32px; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .input-group > .custom-range { transition: none; } } .input-group > .custom-range:focus { color: #3a383d; background-color: #28272d; border-color: rgb(127.5, 189, 255); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .input-group > .custom-range:disabled, .input-group > .custom-range[readonly] { background-color: #18171d; } .input-group-lg > .custom-range { height: calc(1.5em + 1rem + 2px); padding: 0 1rem; border-radius: 0.3rem; } .input-group-sm > .custom-range { height: calc(1.5em + 0.5rem + 2px); padding: 0 0.5rem; border-radius: 0.2rem; } .was-validated .input-group .custom-range:valid, .input-group .custom-range.is-valid { border-color: #0c7265; } .was-validated .input-group .custom-range:valid:focus, .input-group .custom-range.is-valid:focus { border-color: #0c7265; box-shadow: 0 0 0 0.2rem rgba(12, 114, 101, 0.25); } .was-validated .custom-range:valid:focus::-webkit-slider-thumb, .custom-range.is-valid:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(69.0714285714, 235.4285714286, 214.2261904762); } .was-validated .custom-range:valid:focus::-moz-range-thumb, .custom-range.is-valid:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(69.0714285714, 235.4285714286, 214.2261904762); } .was-validated .custom-range:valid:focus::-ms-thumb, .custom-range.is-valid:focus::-ms-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(69.0714285714, 235.4285714286, 214.2261904762); } .was-validated .custom-range:valid::-webkit-slider-thumb, .custom-range.is-valid::-webkit-slider-thumb { background-color: #0c7265; background-image: none; } .was-validated .custom-range:valid::-webkit-slider-thumb:active, .custom-range.is-valid::-webkit-slider-thumb:active { background-color: rgb(69.0714285714, 235.4285714286, 214.2261904762); background-image: none; } .was-validated .custom-range:valid::-webkit-slider-runnable-track, .custom-range.is-valid::-webkit-slider-runnable-track { background-color: rgba(12, 114, 101, 0.35); } .was-validated .custom-range:valid::-moz-range-thumb, .custom-range.is-valid::-moz-range-thumb { background-color: #0c7265; background-image: none; } .was-validated .custom-range:valid::-moz-range-thumb:active, .custom-range.is-valid::-moz-range-thumb:active { background-color: rgb(69.0714285714, 235.4285714286, 214.2261904762); background-image: none; } .was-validated .custom-range:valid::-moz-range-track, .custom-range.is-valid::-moz-range-track { background: rgba(12, 114, 101, 0.35); } .was-validated .custom-range:valid ~ .valid-feedback, .was-validated .custom-range:valid ~ .valid-tooltip, .custom-range.is-valid ~ .valid-feedback, .custom-range.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-range:valid::-ms-thumb, .custom-range.is-valid::-ms-thumb { background-color: #0c7265; background-image: none; } .was-validated .custom-range:valid::-ms-thumb:active, .custom-range.is-valid::-ms-thumb:active { background-color: rgb(69.0714285714, 235.4285714286, 214.2261904762); background-image: none; } .was-validated .custom-range:valid::-ms-track-lower, .custom-range.is-valid::-ms-track-lower { background: rgba(12, 114, 101, 0.35); } .was-validated .custom-range:valid::-ms-track-upper, .custom-range.is-valid::-ms-track-upper { background: rgba(12, 114, 101, 0.35); } .was-validated .input-group .custom-range:invalid, .input-group .custom-range.is-invalid { border-color: #c52042; } .was-validated .input-group .custom-range:invalid:focus, .input-group .custom-range.is-invalid:focus { border-color: #c52042; box-shadow: 0 0 0 0.2rem rgba(197, 32, 66, 0.25); } .was-validated .custom-range:invalid:focus::-webkit-slider-thumb, .custom-range.is-invalid:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(240.6768558952, 166.8231441048, 182.0414847162); } .was-validated .custom-range:invalid:focus::-moz-range-thumb, .custom-range.is-invalid:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(240.6768558952, 166.8231441048, 182.0414847162); } .was-validated .custom-range:invalid:focus::-ms-thumb, .custom-range.is-invalid:focus::-ms-thumb { box-shadow: 0 0 0 1px #18171d, 0 0 0 0.2rem rgb(240.6768558952, 166.8231441048, 182.0414847162); } .was-validated .custom-range:invalid::-webkit-slider-thumb, .custom-range.is-invalid::-webkit-slider-thumb { background-color: #c52042; background-image: none; } .was-validated .custom-range:invalid::-webkit-slider-thumb:active, .custom-range.is-invalid::-webkit-slider-thumb:active { background-color: rgb(240.6768558952, 166.8231441048, 182.0414847162); background-image: none; } .was-validated .custom-range:invalid::-webkit-slider-runnable-track, .custom-range.is-invalid::-webkit-slider-runnable-track { background-color: rgba(197, 32, 66, 0.35); } .was-validated .custom-range:invalid::-moz-range-thumb, .custom-range.is-invalid::-moz-range-thumb { background-color: #c52042; background-image: none; } .was-validated .custom-range:invalid::-moz-range-thumb:active, .custom-range.is-invalid::-moz-range-thumb:active { background-color: rgb(240.6768558952, 166.8231441048, 182.0414847162); background-image: none; } .was-validated .custom-range:invalid::-moz-range-track, .custom-range.is-invalid::-moz-range-track { background: rgba(197, 32, 66, 0.35); } .was-validated .custom-range:invalid ~ .invalid-feedback, .was-validated .custom-range:invalid ~ .invalid-tooltip, .custom-range.is-invalid ~ .invalid-feedback, .custom-range.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-range:invalid::-ms-thumb, .custom-range.is-invalid::-ms-thumb { background-color: #c52042; background-image: none; } .was-validated .custom-range:invalid::-ms-thumb:active, .custom-range.is-invalid::-ms-thumb:active { background-color: rgb(240.6768558952, 166.8231441048, 182.0414847162); background-image: none; } .was-validated .custom-range:invalid::-ms-track-lower, .custom-range.is-invalid::-ms-track-lower { background: rgba(197, 32, 66, 0.35); } .was-validated .custom-range:invalid::-ms-track-upper, .custom-range.is-invalid::-ms-track-upper { background: rgba(197, 32, 66, 0.35); } .gl-form-input, .gl-form-input.form-control { appearance: none; box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default); background: var(--gl-control-background-color-default); border-radius: var(--gl-control-border-radius); font-family: var(--gl-font-family-regular); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-input,.recents-wrapper .gl-form-input.form-control{ margin-top: var(--gl-spacing-scale-0); } .gl-form-input, .gl-form-input.form-control{ line-height: 1rem; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); height: auto; border-style: none; } .gl-form-input:focus-visible, .gl-form-input.form-control:focus-visible { color: #3a383d; background-color: #28272d; border-color: rgb(127.5, 189, 255); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .gl-form-input, .gl-form-input.form-control{ color: var(--gl-text-color-default); } @media (forced-colors: active) { .gl-form-input, .gl-form-input.form-control { border: 1px solid; } } .gl-form-input:hover, .gl-form-input.form-control:hover { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-hover); } .gl-form-input:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type=color]):read-only, .gl-form-input.form-control:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type=color]):read-only { background: var(--gl-control-background-color-readonly); box-shadow: none; } .gl-form-input:disabled, .gl-form-input.form-control:disabled{ cursor: not-allowed; background: var(--gl-control-background-color-disabled); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-disabled); color: var(--gl-text-color-disabled); } .gl-form-input:not(.form-control-plaintext):focus-visible, .gl-form-input.form-control:not(.form-control-plaintext):focus-visible { background: var(--gl-control-background-color-default); color: var(--gl-text-color-default); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } @media (forced-colors: active) { .gl-form-input:not(.form-control-plaintext):focus-visible, .gl-form-input.form-control:not(.form-control-plaintext):focus-visible { outline: 2px solid LinkText; } } .gl-form-input.is-invalid, .gl-form-input.form-control.is-invalid { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error); } .gl-form-input.is-invalid:focus-visible, .gl-form-input.form-control.is-invalid:focus-visible { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } @media (forced-colors: active) { .gl-form-input.is-invalid:focus-visible, .gl-form-input.form-control.is-invalid:focus-visible { outline: 2px solid LinkText; } } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { color: var(--gl-control-placeholder-color); } .gl-form-input.form-control-plaintext, .gl-form-input.form-control.form-control-plaintext{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-form-input-xs { max-width: 5rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-input-xs { max-width: 5rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-input-xs { max-width: 5rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-input-xs { max-width: 5rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-input-xs { max-width: 5rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-input-xs { max-width: 5rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-input-xs { max-width: 5rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-input-xs { max-width: 5rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-input-xs { max-width: 5rem; } } .gl-form-input-sm { max-width: 10rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-input-sm { max-width: 10rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-input-sm { max-width: 10rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-input-sm { max-width: 10rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-input-sm { max-width: 10rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-input-sm { max-width: 10rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-input-sm { max-width: 10rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-input-sm { max-width: 10rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-input-sm { max-width: 10rem; } } .gl-form-input-md { max-width: 15rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-input-md { max-width: 15rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-input-md { max-width: 15rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-input-md { max-width: 15rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-input-md { max-width: 15rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-input-md { max-width: 15rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-input-md { max-width: 15rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-input-md { max-width: 15rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-input-md { max-width: 15rem; } } .gl-form-input-lg { max-width: 20rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-input-lg { max-width: 20rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-input-lg { max-width: 20rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-input-lg { max-width: 20rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-input-lg { max-width: 20rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-input-lg { max-width: 20rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-input-lg { max-width: 20rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-input-lg { max-width: 20rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-input-lg { max-width: 20rem; } } .gl-form-input-xl { max-width: 35rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-input-xl { max-width: 35rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-input-xl { max-width: 35rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-input-xl { max-width: 35rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-input-xl { max-width: 35rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-input-xl { max-width: 35rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-input-xl { max-width: 35rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-input-xl { max-width: 35rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-input-xl { max-width: 35rem; } } .input-group > .input-group-prepend > .btn-group > .btn, .input-group > .input-group-append:not(:last-child) > .btn-group > .btn, .input-group > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-append > .btn-group > .btn, .input-group > .input-group-prepend:not(:first-child) > .btn-group > .btn, .input-group > .input-group-prepend:first-child > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .gl-form-password-input { position: relative; width: 100%; } .modal-header .modal-title.gl-form-password-input { margin-right: -1rem; padding-right: 1rem; } .gl-form-password-input input[type=password]::-ms-reveal { display: none; } .gl-form-password-input-field.gl-form-input{ padding-inline-end: var(--gl-spacing-scale-7); } .gl-form-password-input-toggle { position: absolute; top: 50%; inset-inline-end: var(--gl-spacing-scale-2); transform: translateY(-50%); } .gl-form-checkbox-group{ line-height: 1rem; } .gl-form-checkbox, .gl-form-radio{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-checkbox,.recents-wrapper .gl-form-radio{ margin-top: var(--gl-spacing-scale-0); } .gl-form-checkbox, .gl-form-radio{ line-height: 1rem; color: var(--gl-text-color-default); } .gl-form-checkbox.form-check, .gl-form-radio.form-check{ display: flex; padding-left: var(--gl-spacing-scale-0); } .gl-form-checkbox.form-check-inline, .gl-form-radio.form-check-inline{ display: inline-flex; } .commit-content .committer.gl-form-checkbox.form-check-inline,.commit-content .committer .gl-form-radio.form-check-inline { gap: 0.5ch; } .gl-form-checkbox.form-check-inline, .gl-form-radio.form-check-inline{ align-items: center; } .gl-form-checkbox .form-check-input, .gl-form-radio .form-check-input{ margin-top: var(--gl-spacing-scale-1); margin-left: var(--gl-spacing-scale-0); align-self: flex-start; position: static; height: auto; margin-right: var(--gl-spacing-scale-0); } .gl-form-checkbox .form-check-input:active, .gl-form-checkbox .form-check-input:focus-visible, .gl-form-checkbox .form-check-input:focus-visible:active, .gl-form-radio .form-check-input:active, .gl-form-radio .form-check-input:focus-visible, .gl-form-radio .form-check-input:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-form-checkbox .form-check-label, .gl-form-radio .form-check-label{ padding-left: var(--gl-spacing-scale-3); line-height: 1rem; } .gl-form-checkbox .form-check-input:disabled, .gl-form-checkbox .form-check-input:disabled ~ .form-check-label, .gl-form-checkbox .custom-control-input:disabled, .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label, .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label > .help-text, .gl-form-radio .form-check-input:disabled, .gl-form-radio .form-check-input:disabled ~ .form-check-label, .gl-form-radio .custom-control-input:disabled, .gl-form-radio .custom-control-input:disabled ~ .custom-control-label, .gl-form-radio .custom-control-input:disabled ~ .custom-control-label > .help-text{ cursor: not-allowed; color: var(--gl-text-color-disabled); } .gl-form-checkbox.custom-control, .gl-form-radio.custom-control{ padding-left: var(--gl-spacing-scale-5); } .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label, .gl-form-radio.custom-control .custom-control-input ~ .custom-control-label{ cursor: pointer; padding-left: var(--gl-spacing-scale-3); margin-bottom: var(--gl-spacing-scale-3); } .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label::before, .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input ~ .custom-control-label::after { top: 0; left: -1rem; } .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input ~ .custom-control-label::before { background-color: var(--gl-control-background-color-default); border-color: var(--gl-control-border-color-default); } .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):hover ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):hover ~ .custom-control-label::before { border-color: var(--gl-control-border-color-hover); } .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):focus-visible ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):focus-visible ~ .custom-control-label::before{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; border-color: var(--gl-control-border-color-focus); } .gl-form-checkbox.custom-control .custom-control-input:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-default); border-color: var(--gl-control-border-color-selected-default); } @media (forced-colors: active) { .gl-form-checkbox.custom-control .custom-control-input:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:checked ~ .custom-control-label::before { background-color: LinkText; border-color: LinkText; } } .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:checked ~ .custom-control-label::after, .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:indeterminate ~ .custom-control-label::after, .gl-form-checkbox.custom-control .custom-control-input[type=radio]:checked ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:checked ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:indeterminate ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=radio]:checked ~ .custom-control-label::after { background: 50% 50% no-repeat; background-color: var(--gl-control-indicator-color-selected); mask-repeat: no-repeat; mask-position: center center; } .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:checked ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:checked ~ .custom-control-label::after { background-color: var(--gl-control-indicator-color-selected); mask-image: url('data:image/svg+xml,%3Csvg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.75 4.76289L3.15312 7.24678L9.25 1.1499" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A'); } .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:indeterminate ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:indeterminate ~ .custom-control-label::after { background-color: var(--gl-control-indicator-color-selected); mask-image: url('data:image/svg+xml,%3Csvg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.75 1H8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A'); } .gl-form-checkbox.custom-control .custom-control-input[type=radio]:checked ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=radio]:checked ~ .custom-control-label::after { background-color: var(--gl-control-indicator-color-selected); mask-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="3" fill="white"/%3E%3C/svg%3E%0A'); } .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover::before, .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-hover); border-color: var(--gl-control-border-color-selected-hover); } .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-focus); border-color: var(--gl-control-border-color-selected-focus); } @media (forced-colors: active) { .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover::before, .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label::before, .gl-form-checkbox.custom-control .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label::before { background-color: LinkText; border-color: LinkText; } } .gl-form-checkbox.custom-control .custom-control-input:not(:disabled) ~ .custom-control-label, .gl-form-radio.custom-control .custom-control-input:not(:disabled) ~ .custom-control-label{ color: var(--gl-text-color-default); } .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-default); border-color: var(--gl-control-border-color-selected-default); } @media (forced-colors: active) { .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: LinkText; border-color: LinkText; } } .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before { background-color: var(--gl-control-background-color-selected-hover); border-color: var(--gl-control-border-color-selected-hover); } .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:not(:disabled):focus-visible:indeterminate ~ .custom-control-label::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:not(:disabled):focus-visible:indeterminate ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-focus); border-color: var(--gl-control-border-color-selected-focus); } @media (forced-colors: active) { .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before, .gl-form-checkbox.custom-control.custom-checkbox .custom-control-input:not(:disabled):focus-visible:indeterminate ~ .custom-control-label::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before, .gl-form-radio.custom-control.custom-checkbox .custom-control-input:not(:disabled):focus-visible:indeterminate ~ .custom-control-label::before { background-color: LinkText; border-color: LinkText; } } .gl-form-checkbox.custom-control .custom-control-input:disabled ~ .custom-control-label, .gl-form-radio.custom-control .custom-control-input:disabled ~ .custom-control-label{ cursor: not-allowed; } .gl-form-checkbox.custom-control .custom-control-input:disabled ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:disabled ~ .custom-control-label::before{ pointer-events: auto; background-color: var(--gl-control-background-color-default); border-color: var(--gl-control-border-color-disabled); } @media (forced-colors: active) { .gl-form-checkbox.custom-control .custom-control-input:disabled ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:disabled ~ .custom-control-label::before { opacity: 0.5; } } .gl-form-checkbox.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::before, .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::before, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::before { background-color: var(--gl-control-background-color-selected-disabled); border-color: var(--gl-control-border-color-selected-disabled); } .gl-form-checkbox.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::after, .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::after { background-image: none; background-color: var(--gl-control-indicator-color-disabled); /* Ensure state indicators (like the checkmark for checked or the dash for indeterminate) are visible in Windows High Contrast Mode. */ } @media screen and (forced-colors: active) { .gl-form-checkbox.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::after, .gl-form-checkbox.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input:checked:disabled ~ .custom-control-label::after, .gl-form-radio.custom-control .custom-control-input[type=checkbox]:indeterminate:disabled ~ .custom-control-label::after { forced-color-adjust: none; /* system color reference for disabled text applied to background here. */ background-color: GrayText; } } .gl-form-checkbox .help-text, .gl-form-radio .help-text{ margin-top: var(--gl-spacing-scale-2); margin-bottom: var(--gl-spacing-scale-0); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-checkbox .help-text,.recents-wrapper .gl-form-radio .help-text{ margin-top: var(--gl-spacing-scale-0); } .gl-form-checkbox .help-text, .gl-form-radio .help-text{ line-height: 1rem; color: var(--gl-text-color-subtle); } .gl-form-group{ margin-bottom: var(--gl-spacing-scale-5); } .gl-form-group .col-form-label{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-group .col-form-label{ margin-top: var(--gl-spacing-scale-0); } .gl-form-group .col-form-label{ font-weight: var(--gl-font-weight-bold); line-height: 1rem; padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-3); color: var(--gl-text-color-strong); } .gl-form-group .col-form-label > .label-description{ margin-top: var(--gl-spacing-scale-2); color: var(--gl-text-color-subtle); } .gl-form-group .optional-label, .gl-form-group .label-description{ font-weight: var(--gl-font-weight-normal); } .gl-form-group .invalid-feedback { color: var(--gl-control-text-color-error); } .gl-form-group .valid-feedback { color: var(--gl-control-text-color-valid); } .gl-form-group .invalid-feedback, .gl-form-group .valid-feedback, .gl-form-group .text-muted, .gl-form-group .gl-text-secondary{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-group .invalid-feedback,.recents-wrapper .gl-form-group .valid-feedback,.recents-wrapper .gl-form-group .text-muted,.recents-wrapper .gl-form-group .gl-text-secondary{ margin-top: var(--gl-spacing-scale-0); } .gl-form-group .invalid-feedback, .gl-form-group .valid-feedback, .gl-form-group .text-muted, .gl-form-group .gl-text-secondary{ line-height: 1rem; } .gl-form-group .text-muted{ color: var(--gl-text-color-subtle) !important; } .gl-form-group .form-control + .invalid-feedback, .gl-form-group .form-control + .valid-feedback, .gl-form-group .form-control + .gl-text-secondary, .gl-form-group .form-control + .text-muted, .gl-form-group .form-control.is-valid + .invalid-feedback + .text-muted, .gl-form-group .form-control.is-valid + .invalid-feedback + .gl-text-secondary{ margin-top: var(--gl-spacing-scale-3); } .gl-form-group legend { border-bottom: 0; } .gl-form-radio-group{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-radio-group{ margin-top: var(--gl-spacing-scale-0); } .gl-form-radio-group{ line-height: 1rem; } /* This is a temporary measure to ensure custom select styles are not affected by our lack of an autoprefixer tool for compiling bootstrap. TODO: Remove once bootstrap is included in GitLab UI or we include an autoprefixer on gitlab See: https://gitlab.com/gitlab-org/gitlab/issues/30055 */ /* stylelint-disable property-no-vendor-prefix */ .gl-form-select{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-select{ margin-top: var(--gl-spacing-scale-0); } .gl-form-select{ font-family: var(--gl-font-family-regular); opacity: var(--gl-opacity-10); line-height: 1rem; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); height: auto; overflow: hidden; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .gl-badge:has(.gl-form-select, .gl-text-truncate) { max-width: 100%; } .gl-form-select{ background-repeat: no-repeat; border-style: none; border-radius: var(--gl-control-border-radius); appearance: none; background-color: var(--gl-control-background-color-default); background-image: none; box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default); color: var(--gl-text-color-default); padding-right: 1.75rem; position: relative; } @media (forced-colors: active) { .gl-form-select { box-shadow: none; border: 1px solid; } } .gl-form-select:hover { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-hover); } .gl-form-select:focus-visible, .gl-form-select:focus-visible:active { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-form-select:focus-visible, .gl-form-select:focus-visible:active { outline: 2px solid LinkText !important; } } .gl-form-select:disabled{ cursor: not-allowed; color: var(--gl-text-color-disabled); background-color: var(--gl-control-background-color-disabled); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-disabled); } .gl-form-select.is-invalid:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error); } .gl-form-select.is-invalid:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error); } .gl-form-select.is-invalid:not(:disabled):focus-visible { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-error), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-form-select.is-invalid:not(:disabled):focus-visible { outline: 2px solid LinkText !important; } } .gl-form-select-wrapper { position: relative; display: inline-block; width: 100%; } .gl-form-select-wrapper::after { content: ""; background-color: var(--gl-icon-color-default); mask-image: url('data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A'); mask-repeat: no-repeat; mask-position: center center; pointer-events: none; position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); height: 5px; width: 8px; } @media (forced-colors: active) { .gl-form-select-wrapper::after { background-color: CanvasText; } } .gl-form-select-wrapper:has(> .gl-form-select:disabled)::after { background-color: var(--gl-icon-color-disabled); } @media (forced-colors: active) { .gl-form-select-wrapper:has(> .gl-form-select:disabled)::after { background-color: GrayText; } } .gl-form-select-xs { max-width: 5rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-select-xs { max-width: 5rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-select-xs { max-width: 5rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-select-xs { max-width: 5rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-select-xs { max-width: 5rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-select-xs { max-width: 5rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-select-xs { max-width: 5rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-select-xs { max-width: 5rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-select-xs { max-width: 5rem; } } .gl-form-select-sm { max-width: 10rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-select-sm { max-width: 10rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-select-sm { max-width: 10rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-select-sm { max-width: 10rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-select-sm { max-width: 10rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-select-sm { max-width: 10rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-select-sm { max-width: 10rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-select-sm { max-width: 10rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-select-sm { max-width: 10rem; } } .gl-form-select-md { max-width: 15rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-select-md { max-width: 15rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-select-md { max-width: 15rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-select-md { max-width: 15rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-select-md { max-width: 15rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-select-md { max-width: 15rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-select-md { max-width: 15rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-select-md { max-width: 15rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-select-md { max-width: 15rem; } } .gl-form-select-lg { max-width: 20rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-select-lg { max-width: 20rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-select-lg { max-width: 20rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-select-lg { max-width: 20rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-select-lg { max-width: 20rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-select-lg { max-width: 20rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-select-lg { max-width: 20rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-select-lg { max-width: 20rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-select-lg { max-width: 20rem; } } .gl-form-select-xl { max-width: 35rem; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-sm-form-select-xl { max-width: 35rem; } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-sm-form-select-xl { max-width: 35rem; } } @container (width >= 768px) { :where(html.with-gl-container-queries) .gl-md-form-select-xl { max-width: 35rem; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .gl-md-form-select-xl { max-width: 35rem; } } @container (width >= 992px) { :where(html.with-gl-container-queries) .gl-lg-form-select-xl { max-width: 35rem; } } @media (width >= 992px) { :where(html:not(.with-gl-container-queries)) .gl-lg-form-select-xl { max-width: 35rem; } } @container (width >= 1200px) { :where(html.with-gl-container-queries) .gl-xl-form-select-xl { max-width: 35rem; } } @media (width >= 1200px) { :where(html:not(.with-gl-container-queries)) .gl-xl-form-select-xl { max-width: 35rem; } } /* stylelint-enable property-no-vendor-prefix */ .gl-form-combobox .gl-form-combobox-inner { max-height: 19.5rem; position: relative; flex-grow: 1; overflow-y: auto; padding-left: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); list-style-type: none; border-radius: var(--gl-dropdown-border-radius); } .gl-form-combobox .gl-form-combobox-inner:focus-visible{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-form-combobox .gl-form-combobox-inner ul{ list-style-type: none; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item{ cursor: pointer; padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); margin-top: var(--gl-spacing-scale-1); margin-bottom: var(--gl-spacing-scale-1); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item:first-child{ margin-top: var(--gl-spacing-scale-0); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item:last-child{ margin-bottom: var(--gl-spacing-scale-0); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item { transition: background-color 0.1s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); border-radius: var(--gl-border-radius-default); border-width: 0px; width: 100%; } .modal-header .modal-title.gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item { margin-right: -1rem; padding-right: 1rem; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item { background-color: var(--gl-dropdown-option-background-color-unselected-default); align-items: center; display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item{ margin-top: var(--gl-spacing-scale-0); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item{ font-weight: var(--gl-font-weight-normal); line-height: 1rem; padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); position: relative; text-decoration-line: none; color: var(--gl-dropdown-option-text-color-default); text-align: left; white-space: normal; } @media (prefers-reduced-motion) { .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item .gl-dropdown-item-text-wrapper{ min-width: var(--gl-spacing-scale-0); flex-grow: 1; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:not(.disable-hover):hover { color: var(--gl-dropdown-option-text-color-hover); background-color: var(--gl-dropdown-option-background-color-unselected-hover); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible { color: var(--gl-dropdown-option-text-color-focus); background-color: var(--gl-dropdown-option-background-color-unselected-focus); box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible { outline: 2px solid LinkText; } } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible { z-index: 1; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:active, .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible:active { color: var(--gl-dropdown-option-text-color-active); background-color: var(--gl-dropdown-option-background-color-unselected-active); box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:active, .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible:active { outline: 2px solid LinkText; } } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.active { color: var(--gl-dropdown-option-text-color-focus) !important; background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important; box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.active { outline: 2px solid LinkText; } } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.active { z-index: 1; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.is-focused { color: var(--gl-dropdown-option-text-color-focus) !important; background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important; box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.is-focused { outline: 2px solid LinkText; } } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item.is-focused { z-index: 1; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item .dropdown-item:focus-visible { outline: none; } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item[aria-selected=true] .dropdown-item { background-color: var(--gl-dropdown-option-background-color-selected-default); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item[aria-selected=true] .dropdown-item:hover { background-color: var(--gl-dropdown-option-background-color-selected-hover); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item[aria-selected=true] .dropdown-item:focus-visible { background-color: var(--gl-dropdown-option-background-color-selected-focus); } .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item[aria-selected=true] .dropdown-item:active, .gl-form-combobox .gl-form-combobox-inner .gl-dropdown-item[aria-selected=true] .dropdown-item:focus-visible:active { background-color: var(--gl-dropdown-option-background-color-selected-active); } .input-group-text { background-color: var(--gl-control-background-color-concatenation); border-color: var(--gl-control-border-color-default); color: var(--gl-text-color-default); font-size: var(--gl-font-size-base); } .recents-wrapper .input-group-text{ margin-top: var(--gl-spacing-scale-0); } .input-group-text{ line-height: 1rem; border-radius: var(--gl-control-border-radius); } .gl-icon.s8 { width: 8px; height: 8px; } .gl-icon.s12 { width: 12px; height: 12px; } .gl-icon.s14 { width: 14px; height: 14px; } .gl-icon.s16 { width: 16px; height: 16px; } .gl-icon.s24 { width: 24px; height: 24px; } .gl-icon.s32 { width: 32px; height: 32px; } .gl-icon.s48 { width: 48px; height: 48px; } .gl-icon.s72 { width: 72px; height: 72px; } .gl-infinite-scroll-container{ overflow-x: hidden; overflow-y: auto; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-infinite-scroll-container{ margin-top: var(--gl-spacing-scale-0); } .gl-infinite-scroll-legend{ text-align: center; font-size: var(--gl-font-size-sm); color: var(--gl-text-color-subtle); margin-top: var(--gl-spacing-scale-3); } .gl-label{ align-items: center; background-color: var(--gl-background-color-default); overflow: hidden; display: inline-flex; } .commit-content .committer.gl-label { gap: 0.5ch; } .gl-label{ border-radius: .75rem; position: relative; max-width: 100%; } .modal-header .modal-title.gl-label { margin-right: -1rem; padding-right: 1rem; } .gl-label{ font-size: var(--gl-font-size-sm); line-height: 1rem; box-shadow: var(--label-inset-border) !important; } @media (forced-colors: active) { .gl-label { border: 1px solid; } } .gl-label:not(.gl-label-scoped) { background-color: var(--label-background-color); } .gl-label:has(*:first-child:focus-visible) { box-shadow: inset 0 0 0 1px var(--label-background-color, var(--gl-background-color-default)), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-label:has(*:first-child:focus-visible) { outline: 2px solid LinkText !important; } } .gl-label .gl-label-link{ display: flex; font-weight: var(--gl-font-weight-normal); overflow: hidden; color: inherit; max-width: 100%; } .modal-header .modal-title.gl-label .gl-label-link { margin-right: -1rem; padding-right: 1rem; } .gl-label .gl-label-link:hover, .gl-label .gl-label-link:focus-visible, .gl-label .gl-label-link:focus-visible:active{ color: inherit; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline: 2px solid transparent; outline-offset: 2px; } .gl-label .gl-label-link-underline { text-decoration: none; } .gl-label .gl-label-link-underline:hover .gl-label-text, .gl-label .gl-label-link-underline:hover .gl-label-text-scoped, .gl-label .gl-label-link-underline:focus-visible .gl-label-text, .gl-label .gl-label-link-underline:focus-visible .gl-label-text-scoped, .gl-label .gl-label-link-underline:focus-visible:active .gl-label-text, .gl-label .gl-label-link-underline:focus-visible:active .gl-label-text-scoped { text-decoration: underline; } .gl-label .gl-label-text, .gl-label .gl-label-text-scoped{ display: block; padding: 0.125rem 0.375rem; display: inline-block; min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; max-width: 100%; } .gl-label > .gl-label-close.gl-button{ border-width: 0px; display: flex; width: 0.875rem; height: 0.875rem; min-height: auto !important; min-width: auto !important; margin-left: -0.1875rem; margin-right: 0.1875rem; padding: var(--gl-spacing-scale-0); border-radius: var(--gl-border-radius-full); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-label > .gl-label-close.gl-button:focus-visible, .gl-label > .gl-label-close.gl-button:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-label > .gl-label-close.gl-button .gl-icon { vertical-align: -1px; } .gl-label-text-dark { color: var(--gl-label-light-text-color); } .gl-label-text-dark .gl-label-close.gl-button { color: var(--gl-label-light-button-icon-color-default); background-color: var(--gl-label-light-button-background-color-default); } .gl-label-text-dark .gl-label-close.gl-button:focus-visible, .gl-label-text-dark .gl-label-close.gl-button:hover { color: var(--label-background-color); background-color: var(--gl-label-light-button-background-color-hover); } .gl-label-text-light { color: var(--gl-label-dark-text-color); } .gl-label-text-light .gl-label-close.gl-button { color: var(--gl-label-dark-button-icon-color-default); background-color: var(--gl-label-dark-button-background-color-default); } .gl-label-text-light .gl-label-close.gl-button:focus-visible, .gl-label-text-light .gl-label-close.gl-button:hover { color: var(--label-background-color); background-color: var(--gl-label-dark-button-background-color-hover); } .gl-label-scoped .gl-label-close.gl-button { margin-left: -0.375rem; color: var(--gl-label-scoped-button-icon-color-default); } .gl-label-scoped .gl-label-close.gl-button:focus-visible, .gl-label-scoped .gl-label-close.gl-button:hover { color: var(--gl-label-scoped-button-icon-color-hover); background-color: var(--gl-label-scoped-button-background-color-hover); } .gl-label-scoped .gl-label-text { background-color: var(--label-background-color); } @media (forced-colors: active) { .gl-label-scoped .gl-label-text { border-right: 1px solid; } } .gl-label-scoped .gl-label-text-scoped { color: var(--gl-label-scoped-text-color); padding-left: 0.25rem; padding-right: 0.5rem; } .gl-label-tooltip-title{ display: block; color: var(--gl-feedback-strong-text-color); font-weight: var(--gl-font-weight-bold); } .gl-link { text-underline-offset: var(--gl-spacing-scale-1); } .gl-link:hover{ cursor: pointer; } .gl-link, .gl-link:hover, .gl-link:active, .gl-link:focus-visible{ color: var(--gl-text-color-link); } .gl-link:active, .gl-link:focus-visible, .gl-link:focus-visible:active{ text-decoration-line: underline; outline: 2px solid var(--gl-focus-ring-outer-color); outline-offset: 2px; } .gl-link-inline{ text-decoration-line: underline; } .gl-link-inline:hover{ text-decoration-line: underline; } .gl-link-external::after { content: " ↗"/attr(data-alt); font-size: 1em; } .gl-link-meta{ text-decoration-line: none; } .gl-link-meta:hover{ text-decoration-line: underline; } .gl-link-meta, .gl-link-meta:hover, .gl-link-meta:focus-visible, .gl-link-meta:focus-visible:hover{ color: inherit; } .gl-link-mention, .gl-link-mention-current{ padding-left: var(--gl-spacing-scale-1); padding-right: var(--gl-spacing-scale-1); border-radius: var(--gl-border-radius-default); text-decoration-line: none; } .gl-link-mention:hover, .gl-link-mention-current:hover{ text-decoration-line: underline; } .gl-link-mention:active, .gl-link-mention:focus-visible, .gl-link-mention:focus-visible:active, .gl-link-mention-current:active, .gl-link-mention-current:focus-visible, .gl-link-mention-current:focus-visible:active{ text-decoration-line: none; } .gl-link-mention { background-color: var(--gl-link-mention-background-color-default); } .gl-link-mention, .gl-link-mention:hover, .gl-link-mention:active, .gl-link-mention:focus-visible, .gl-link-mention:focus-visible:active { color: var(--gl-link-mention-text-color-default); } .gl-link-mention-current { background-color: var(--gl-link-mention-background-color-current); } .gl-link-mention-current, .gl-link-mention-current:hover, .gl-link-mention-current:active, .gl-link-mention-current:focus-visible, .gl-link-mention-current:focus-visible:active { color: var(--gl-link-mention-text-color-current); } .gl-spinner-container{ line-height: 0; text-align: center; } .gl-spinner { position: relative; display: inline-flex; } .commit-content .committer.gl-spinner { gap: 0.5ch; } .gl-spinner{ border-radius: var(--gl-border-radius-full); border-style: solid; margin-left: auto; margin-right: auto; margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-spinner{ margin-top: var(--gl-spacing-scale-0); } @keyframes gl-spin{ to{ transform: rotate(360deg); } } .gl-spinner{ animation: gl-spin 0.6s infinite linear; width: 1rem; height: 1rem; border-width: 2px; transform-origin: 50% 50% calc(1rem / 2 + 2px); } .gl-spinner.gl-spinner-md { width: 1.5rem; height: 1.5rem; border-width: 3px; transform-origin: 50% 50% calc(1.5rem / 2 + 3px); } .gl-spinner.gl-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; transform-origin: 50% 50% calc(2rem / 2 + 3px); } .gl-spinner.gl-spinner-xl { width: 4rem; height: 4rem; border-width: 4px; transform-origin: 50% 50% calc(4rem / 2 + 4px); } .gl-spinner.gl-spinner-dark { border-color: var(--gl-spinner-track-color-default); border-top-color: var(--gl-spinner-segment-color-default); } .gl-spinner.gl-spinner-light { border-color: var(--gl-spinner-track-color-light); border-top-color: var(--gl-spinner-segment-color-light); } .gl-dots-loader{ line-height: 0; text-align: center; } .gl-dots-loader::before, .gl-dots-loader > span, .gl-dots-loader::after { content: ""; display: inline-block; border-radius: 100%; animation: gl-dots-loader-animation 1400ms ease-in-out infinite; animation-fill-mode: both; } .gl-dots-loader::before { animation-delay: -0.3s; } .gl-dots-loader > span { animation-delay: -0.15s; } .gl-dots-loader::after { margin-right: 0 !important; } .gl-dots-loader::before, .gl-dots-loader > span, .gl-dots-loader::after { width: 0.375rem; height: 0.375rem; margin-right: calc(0.375rem / 2); } .gl-dots-loader.gl-dots-loader::before, .gl-dots-loader.gl-dots-loader > span, .gl-dots-loader.gl-dots-loader::after { background-color: var(--gl-icon-color-subtle); } .gl-dots-loader.gl-dots-loader-md::before, .gl-dots-loader.gl-dots-loader-md > span, .gl-dots-loader.gl-dots-loader-md::after { width: 0.5rem; height: 0.5rem; margin-right: calc(0.5rem / 2); } .gl-dots-loader.gl-dots-loader-lg::before, .gl-dots-loader.gl-dots-loader-lg > span, .gl-dots-loader.gl-dots-loader-lg::after { width: 0.75rem; height: 0.75rem; margin-right: calc(0.75rem / 2); } .gl-dots-loader.gl-dots-loader-xl::before, .gl-dots-loader.gl-dots-loader-xl > span, .gl-dots-loader.gl-dots-loader-xl::after { width: 1rem; height: 1rem; margin-right: calc(1rem / 2); } @keyframes gl-dots-loader-animation { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .gl-markdown{ font-size: var(--gl-font-size-lg); line-height: var(--gl-line-height-24); color: var(--gl-text-color-default); font-family: var(--gl-font-family-regular); font-weight: var(--gl-font-weight-normal); } .gl-markdown :first-child{ margin-top: var(--gl-spacing-scale-0); } .gl-markdown h1, .gl-markdown .gl-h1{ font-weight: var(--gl-heading-1-font-weight); margin-top: var(--gl-heading-1-margin-top); font-size: var(--gl-heading-1-font-size); letter-spacing: var(--gl-heading-1-letter-spacing); line-height: var(--gl-heading-1-line-height); margin-bottom: var(--gl-heading-1-margin-bottom); color: var(--gl-heading-1-color); margin-top: var(--gl-spacing-scale-7); } .gl-markdown h2, .gl-markdown .gl-h2{ font-weight: var(--gl-heading-2-font-weight); margin-top: var(--gl-heading-2-margin-top); font-size: var(--gl-heading-2-font-size); letter-spacing: var(--gl-heading-2-letter-spacing); line-height: var(--gl-heading-2-line-height); margin-bottom: var(--gl-heading-2-margin-bottom); color: var(--gl-heading-2-color); margin-top: var(--gl-spacing-scale-6); } .gl-markdown h3, .gl-markdown .gl-h3{ font-weight: var(--gl-heading-3-font-weight); margin-top: var(--gl-heading-3-margin-top); font-size: var(--gl-heading-3-font-size); letter-spacing: var(--gl-heading-3-letter-spacing); line-height: var(--gl-heading-3-line-height); margin-bottom: var(--gl-heading-3-margin-bottom); color: var(--gl-heading-3-color); margin-top: var(--gl-spacing-scale-6); } .gl-markdown h4, .gl-markdown .gl-h4{ font-weight: var(--gl-heading-4-font-weight); margin-top: var(--gl-heading-4-margin-top); font-size: var(--gl-heading-4-font-size); letter-spacing: var(--gl-heading-4-letter-spacing); line-height: var(--gl-heading-4-line-height); margin-bottom: var(--gl-heading-4-margin-bottom); color: var(--gl-heading-4-color); margin-top: var(--gl-spacing-scale-5); } .gl-markdown h5, .gl-markdown .gl-h5{ font-weight: var(--gl-heading-5-font-weight); margin-top: var(--gl-heading-5-margin-top); font-size: var(--gl-heading-5-font-size); letter-spacing: var(--gl-heading-5-letter-spacing); line-height: var(--gl-heading-5-line-height); margin-bottom: var(--gl-heading-5-margin-bottom); color: var(--gl-heading-5-color); margin-top: var(--gl-spacing-scale-5); } .gl-markdown h6, .gl-markdown .gl-h6{ font-weight: var(--gl-heading-6-font-weight); margin-top: var(--gl-heading-6-margin-top); font-size: var(--gl-heading-6-font-size); letter-spacing: var(--gl-heading-6-letter-spacing); line-height: var(--gl-heading-6-line-height); margin-bottom: var(--gl-heading-6-margin-bottom); color: var(--gl-heading-6-color); margin-top: var(--gl-spacing-scale-5); } .gl-markdown p, .gl-markdown .gl-paragraph{ margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); } .gl-markdown p + p, .gl-markdown p + .gl-paragraph, .gl-markdown .gl-paragraph + p, .gl-markdown .gl-paragraph + .gl-paragraph{ margin-top: var(--gl-spacing-scale-5); } .gl-markdown p.sm, .gl-markdown .gl-paragraph.sm { font-size: 0.875rem; line-height: var(--gl-line-height-20); } .gl-markdown .sm { font-size: 0.875rem; line-height: var(--gl-line-height-20); } .gl-markdown .monospace, .gl-markdown code{ font-family: var(--gl-font-family-monospace); font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-variant-ligatures: none; } .gl-markdown blockquote{ color: var(--gl-text-color-subtle); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-6); margin-top: var(--gl-spacing-scale-3); margin-bottom: var(--gl-spacing-scale-3); margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); box-shadow: inset 4px 0 0 0 var(--gl-border-color-strong); } .gl-markdown .idiff{ border-radius: var(--gl-border-radius-default); display: inline-flex; } .commit-content .committer.gl-markdown .idiff { gap: 0.5ch; } .gl-markdown .idiff{ padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); } .gl-markdown .deletion{ background-color: var(--gl-status-danger-background-color); } .gl-markdown .addition{ background-color: var(--gl-status-success-background-color); } .gl-markdown code{ border-radius: var(--gl-border-radius-default); background-color: var(--gl-background-color-strong); color: var(--gl-text-color-strong); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); padding-top: var(--gl-spacing-scale-1); padding-bottom: var(--gl-spacing-scale-1); } .gl-markdown pre{ border-radius: var(--gl-border-radius-default); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); box-shadow: inset 0 0 0 1px var(--gl-border-color-default); margin-top: var(--gl-spacing-scale-7); margin-bottom: var(--gl-spacing-scale-7); overflow: auto; } .gl-markdown pre code{ background-color: var(--gl-background-color-default); border-radius: var(--gl-border-radius-none); color: var(--gl-text-color-strong); padding: var(--gl-spacing-scale-0); } .gl-markdown .audio-container{ display: inline-flex; } .commit-content .committer.gl-markdown .audio-container { gap: 0.5ch; } .gl-markdown .audio-container{ flex-direction: column; width: 100%; } .modal-header .modal-title.gl-markdown .audio-container { margin-right: -1rem; padding-right: 1rem; } .gl-markdown .audio-container audio{ width: 100%; } .modal-header .modal-title.gl-markdown .audio-container audio { margin-right: -1rem; padding-right: 1rem; } .gl-markdown .audio-container a{ margin-top: var(--gl-spacing-scale-3); } .gl-markdown .audio-container a::before{ margin-right: var(--gl-spacing-scale-2); text-rendering: auto; -webkit-font-smoothing: antialiased; content: "📎"; } .gl-markdown table{ margin-top: var(--gl-spacing-scale-7); margin-bottom: var(--gl-spacing-scale-7); } .gl-markdown table th, .gl-markdown table td{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); box-shadow: inset 0 -1px 0 0 var(--gl-border-color-default); vertical-align: top; } .gl-markdown table th { box-shadow: inset 0 1px 0 0 var(--gl-border-color-default), inset 0 -1px 0 0 var(--gl-border-color-default); font-weight: var(--gl-font-weight-bold); } .gl-markdown table thead{ background-color: var(--gl-background-color-strong); } .gl-markdown table tr:nth-child(even){ background-color: var(--gl-background-color-subtle); } .gl-compact-markdown{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-compact-markdown{ margin-top: var(--gl-spacing-scale-0); } .gl-compact-markdown{ line-height: var(--gl-line-height-20); } .gl-compact-markdown h1, .gl-compact-markdown .gl-h1{ font-weight: var(--gl-heading-1-fixed-font-weight); margin-top: var(--gl-heading-1-fixed-margin-top); font-size: var(--gl-heading-1-fixed-font-size); letter-spacing: var(--gl-heading-1-fixed-letter-spacing); line-height: var(--gl-heading-1-fixed-line-height); margin-bottom: var(--gl-heading-1-fixed-margin-bottom); color: var(--gl-heading-1-fixed-color); margin-top: var(--gl-spacing-scale-7); } .gl-compact-markdown h2, .gl-compact-markdown .gl-h2{ font-weight: var(--gl-heading-2-fixed-font-weight); margin-top: var(--gl-heading-2-fixed-margin-top); font-size: var(--gl-heading-2-fixed-font-size); letter-spacing: var(--gl-heading-2-fixed-letter-spacing); line-height: var(--gl-heading-2-fixed-line-height); margin-bottom: var(--gl-heading-2-fixed-margin-bottom); color: var(--gl-heading-2-fixed-color); margin-top: var(--gl-spacing-scale-6); } .gl-compact-markdown h3, .gl-compact-markdown .gl-h3{ font-weight: var(--gl-heading-3-fixed-font-weight); margin-top: var(--gl-heading-3-fixed-margin-top); font-size: var(--gl-heading-3-fixed-font-size); letter-spacing: var(--gl-heading-3-fixed-letter-spacing); line-height: var(--gl-heading-3-fixed-line-height); margin-bottom: var(--gl-heading-3-fixed-margin-bottom); color: var(--gl-heading-3-fixed-color); margin-top: var(--gl-spacing-scale-6); } .gl-compact-markdown h4, .gl-compact-markdown .gl-h4{ font-weight: var(--gl-heading-4-fixed-font-weight); margin-top: var(--gl-heading-4-fixed-margin-top); font-size: var(--gl-heading-4-fixed-font-size); letter-spacing: var(--gl-heading-4-fixed-letter-spacing); line-height: var(--gl-heading-4-fixed-line-height); margin-bottom: var(--gl-heading-4-fixed-margin-bottom); color: var(--gl-heading-4-fixed-color); margin-top: var(--gl-spacing-scale-5); } .gl-compact-markdown h5, .gl-compact-markdown .gl-h5{ font-weight: var(--gl-heading-5-fixed-font-weight); margin-top: var(--gl-heading-5-fixed-margin-top); font-size: var(--gl-heading-5-fixed-font-size); letter-spacing: var(--gl-heading-5-fixed-letter-spacing); line-height: var(--gl-heading-5-fixed-line-height); margin-bottom: var(--gl-heading-5-fixed-margin-bottom); color: var(--gl-heading-5-fixed-color); margin-top: var(--gl-spacing-scale-5); } .gl-compact-markdown h6, .gl-compact-markdown .gl-h6{ font-weight: var(--gl-heading-6-fixed-font-weight); margin-top: var(--gl-heading-6-fixed-margin-top); font-size: var(--gl-heading-6-fixed-font-size); letter-spacing: var(--gl-heading-6-fixed-letter-spacing); line-height: var(--gl-heading-6-fixed-line-height); margin-bottom: var(--gl-heading-6-fixed-margin-bottom); color: var(--gl-heading-6-fixed-color); margin-top: var(--gl-spacing-scale-5); } .gl-compact-markdown .sm{ font-size: var(--gl-font-size-sm); } .gl-compact-markdown .monospace, .gl-compact-markdown code{ font-family: var(--gl-font-family-monospace); font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-variant-ligatures: none; } .gl-compact-markdown table th, .gl-compact-markdown table td{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } body.modal-open{ overflow: hidden; } .gl-modal{ container-type: inline-size; container-name: gl-modal; } @media (min-width: 576px) { .gl-modal .modal-dialog-scrollable { max-height: calc(100% - 8rem); } } .gl-modal .modal-sm { max-width: 32rem; } .gl-modal .modal-md { max-width: 48rem; } .gl-modal .modal-lg { max-width: 61.875rem; } .gl-modal .modal-xl { max-width: 98%; } .gl-modal .modal-content{ border-width: 0px; --tw-shadow: var(--gl-shadow-lg); --tw-shadow-colored: var(--gl-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); color: var(--gl-text-color-default); background-color: var(--gl-background-color-overlap); border-radius: var(--gl-modal-border-radius); } .gl-modal .modal-content > :first-child { border-top-left-radius: var(--gl-modal-border-radius); border-top-right-radius: var(--gl-modal-border-radius); } .gl-modal .modal-content > :last-child { border-bottom-left-radius: var(--gl-modal-border-radius); border-bottom-right-radius: var(--gl-modal-border-radius); } .gl-modal .modal-header{ padding-bottom: var(--gl-spacing-scale-3); border-style: none; } .gl-modal .modal-header .modal-title{ font-weight: var(--gl-heading-scale-500-font-weight); margin-top: var(--gl-heading-scale-500-margin-top); font-size: var(--gl-heading-scale-500-font-size); letter-spacing: var(--gl-heading-scale-500-letter-spacing); line-height: var(--gl-heading-scale-500-line-height); color: var(--gl-heading-scale-500-color); } .gl-modal .modal-body { min-height: 80px; line-height: 1.5; position: relative; padding: var(--gl-spacing-scale-5); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); text-align: left; white-space: normal; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-modal .modal-body{ margin-top: var(--gl-spacing-scale-0); } .gl-modal .modal-body{ line-height: var(--gl-line-height-20); } .gl-modal .modal-footer{ display: flex; flex-direction: row; padding: var(--gl-spacing-scale-5); padding-top: var(--gl-spacing-scale-3); border-style: none; } .gl-modal .modal-footer .btn{ margin: var(--gl-spacing-scale-0); } .gl-modal .modal-footer .btn + .btn:not(.dropdown-toggle-split), .gl-modal .modal-footer .btn + .btn-group, .gl-modal .modal-footer .btn-group + .btn{ margin-left: var(--gl-spacing-scale-3); } .gl-modal .modal-footer .btn-group .btn + .btn { margin-left: -1px; } @media (max-width: 575.98px) { .gl-modal .modal-footer{ flex-direction: column; } .gl-modal .modal-footer .btn + .btn:not(.dropdown-toggle-split), .gl-modal .modal-footer .btn + .btn-group, .gl-modal .modal-footer .btn-group + .btn{ margin-left: var(--gl-spacing-scale-0); margin-top: var(--gl-spacing-scale-3); } .gl-modal .modal-footer .btn-group .btn + .btn { margin-left: -1px; margin-top: var(--gl-spacing-scale-0); } } .gl-modal ~ .modal-backdrop{ background-color: var(--gl-background-color-overlay); opacity: 1; } @media (min-width: 576px) { .gl-modal .modal-dialog{ margin-left: auto; margin-right: auto; margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); display: flex; align-items: center; min-height: calc(100% - 1rem); } } .gl-nav-item{ position: relative; display: flex; align-items: center; gap: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-1); padding-bottom: var(--gl-spacing-scale-1); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); width: 100%; } .modal-header .modal-title.gl-nav-item { margin-right: -1rem; padding-right: 1rem; } .gl-nav-item{ text-decoration-line: none; text-align: left; border-style: none; cursor: pointer; appearance: none; } .gl-nav-item:focus-visible{ box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } .gl-nav-item { min-height: 1.75rem; min-width: 1.75rem; border-radius: var(--gl-nav-item-border-radius); font-size: var(--gl-nav-item-font-size); font-weight: var(--gl-nav-item-font-weight); color: var(--gl-nav-item-foreground-color-default); background-color: var(--gl-nav-item-background-color-default); } .gl-nav-item.gl-nav-item-has-start-slot{ padding-left: var(--gl-spacing-scale-2); } .gl-nav-item.gl-nav-item-has-end-slot{ padding-right: var(--gl-spacing-scale-2); } .gl-nav-item.gl-nav-item-is-icon-only{ padding-left: var(--gl-spacing-scale-1); padding-right: var(--gl-spacing-scale-1); } .gl-nav-item:hover{ text-decoration-line: none; color: var(--gl-nav-item-foreground-color-hover); background-color: var(--gl-nav-item-background-color-hover); } .gl-nav-item:focus-visible { color: var(--gl-nav-item-foreground-color-focus); background-color: var(--gl-nav-item-background-color-focus); } .gl-nav-item:active, .gl-nav-item:focus-visible:active { color: var(--gl-nav-item-foreground-color-active); background-color: var(--gl-nav-item-background-color-active); } .gl-nav-item.selected { font-weight: var(--gl-nav-item-selected-font-weight); color: var(--gl-nav-item-selected-foreground-color-default); background-color: var(--gl-nav-item-selected-background-color-default); } .gl-nav-item.selected:hover { color: var(--gl-nav-item-selected-foreground-color-hover); background-color: var(--gl-nav-item-selected-background-color-hover); } .gl-nav-item.selected:focus-visible { color: var(--gl-nav-item-selected-foreground-color-focus); background-color: var(--gl-nav-item-selected-background-color-focus); } .gl-nav-item.selected:active, .gl-nav-item.selected:focus-visible:active { color: var(--gl-nav-item-selected-foreground-color-active); background-color: var(--gl-nav-item-selected-background-color-active); } .gl-nav-item.selected::before{ position: absolute; content: ""; background-color: var(--gl-nav-item-selected-indicator-color); } .gl-nav-item-indicator-left.selected::before{ left: calc(var(--gl-spacing-scale-3) * -1); top: var(--gl-spacing-scale-2); bottom: var(--gl-spacing-scale-2); width: var(--gl-spacing-scale-1); border-top-right-radius: var(--gl-border-radius-default); border-bottom-right-radius: var(--gl-border-radius-default); } .gl-nav-item-indicator-right.selected::before{ right: calc(var(--gl-spacing-scale-3) * -1); top: var(--gl-spacing-scale-2); bottom: var(--gl-spacing-scale-2); width: var(--gl-spacing-scale-1); border-top-left-radius: var(--gl-border-radius-default); border-bottom-left-radius: var(--gl-border-radius-default); } .gl-nav-item-indicator-bottom.selected::before{ bottom: calc(var(--gl-spacing-scale-3) * -1); left: var(--gl-spacing-scale-2); right: var(--gl-spacing-scale-2); height: var(--gl-spacing-scale-1); border-top-left-radius: var(--gl-border-radius-default); border-top-right-radius: var(--gl-border-radius-default); } .gl-nav-item-slot{ display: flex; align-items: center; justify-content: center; height: var(--gl-spacing-scale-6); width: var(--gl-spacing-scale-6); flex-shrink: 0; } .gl-nav-item-label{ flex-grow: 1; } .gl-nav-item-chevron{ margin: auto; color: var(--gl-text-color-subtle); } /* * Button-specific utilities */ .gl-button{ display: inline-flex; } .commit-content .committer.gl-button { gap: 0.5ch; } .gl-button:not(.btn-link):focus-visible, .gl-button:not(.btn-link):active, .gl-button:not(.btn-link):focus-visible:active{ text-decoration-line: none; } .gl-button.gl-button { border-radius: var(--gl-button-border-radius); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); background-color: var(--gl-button-default-primary-background-color-default); line-height: 1rem; color: var(--gl-button-default-primary-foreground-color-default); fill: currentColor; justify-content: center; align-items: center; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-button.gl-button{ margin-top: var(--gl-spacing-scale-0); } .gl-button.gl-button{ padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); border: 1px solid var(--gl-button-default-primary-border-color-default); min-height: 2rem; min-width: 2rem; transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), text-decoration-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion) { .gl-button.gl-button { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .gl-button.gl-button:focus-visible, .gl-button.gl-button:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button .gl-button-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; padding-bottom: 1px; margin-top: -1px; margin-bottom: -1px; } .gl-button.gl-button .gl-button-icon{ height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); flex-shrink: 0; margin-right: var(--gl-spacing-scale-2); top: auto; } .gl-button.gl-button .gl-button-count{ display: inline-flex; } .commit-content .committer.gl-button.gl-button .gl-button-count { gap: 0.5ch; } .gl-button.gl-button .gl-button-count{ align-items: center; justify-content: center; font-size: var(--gl-font-size-sm); font-weight: var(--gl-font-weight-normal); line-height: 1rem; margin-left: var(--gl-spacing-scale-2); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); flex-shrink: 0; border-width: 1px; border-style: solid; border-color: var(--gl-border-color-transparent); border-radius: var(--gl-border-radius-full); min-width: var(--gl-spacing-scale-3); background-color: var(--gl-button-count-background-color); } .gl-button.gl-button gl-emoji{ margin-right: var(--gl-spacing-scale-2); position: relative; font-size: var(--gl-font-size-lg); } .gl-button.gl-button.btn-default, .gl-button.gl-button.btn-default-secondary { color: var(--gl-button-default-primary-foreground-color-default); background-color: var(--gl-button-default-primary-background-color-default); border-color: var(--gl-button-default-primary-border-color-default); } .gl-button.gl-button.btn-default::before, .gl-button.gl-button.btn-default-secondary::before { background-color: var(--gl-button-default-primary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-default:hover, .gl-button.gl-button.btn-default-secondary:hover { color: var(--gl-button-default-primary-foreground-color-hover); background-color: var(--gl-button-default-primary-background-color-hover); border-color: var(--gl-button-default-primary-border-color-hover); } .gl-button.gl-button.btn-default:focus-visible, .gl-button.gl-button.btn-default-secondary:focus-visible { color: var(--gl-button-default-primary-foreground-color-focus); background-color: var(--gl-button-default-primary-background-color-focus); border-color: var(--gl-button-default-primary-border-color-focus); } .gl-button.gl-button.btn-default:active, .gl-button.gl-button.btn-default.active, .gl-button.gl-button.btn-default-secondary:active, .gl-button.gl-button.btn-default-secondary.active { color: var(--gl-button-default-primary-foreground-color-active); background-color: var(--gl-button-default-primary-background-color-active); border-color: var(--gl-button-default-primary-border-color-active); } .gl-button.gl-button.btn-default:active :focus-visible, .gl-button.gl-button.btn-default:active:focus-visible:active, .gl-button.gl-button.btn-default.active :focus-visible, .gl-button.gl-button.btn-default.active:focus-visible:active, .gl-button.gl-button.btn-default-secondary:active :focus-visible, .gl-button.gl-button.btn-default-secondary:active:focus-visible:active, .gl-button.gl-button.btn-default-secondary.active :focus-visible, .gl-button.gl-button.btn-default-secondary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-default.selected, .gl-button.gl-button.btn-default-secondary.selected { color: var(--gl-button-selected-foreground-color-default); background-color: var(--gl-button-selected-background-color-default); } .gl-button.gl-button.btn-default.selected::before, .gl-button.gl-button.btn-default-secondary.selected::before { width: 2px !important; } .gl-button.gl-button.btn-default.selected::before, .gl-button.gl-button.btn-default.selected + .gl-button::before, .gl-button.gl-button.btn-default-secondary.selected::before, .gl-button.gl-button.btn-default-secondary.selected + .gl-button::before { background-color: var(--gl-button-selected-border-color-default); } .gl-button.gl-button.btn-default.selected, .gl-button.gl-button.btn-default-secondary.selected { border-width: 1px; border-color: var(--gl-button-selected-border-color-default); box-shadow: inset 0 0 0 1px var(--gl-button-selected-border-color-default); } .gl-button.gl-button.btn-default.selected:hover, .gl-button.gl-button.btn-default-secondary.selected:hover { color: var(--gl-button-selected-foreground-color-hover); background-color: var(--gl-button-selected-background-color-hover); border-color: var(--gl-button-selected-border-color-hover); box-shadow: inset 0 0 0 1px var(--gl-button-selected-border-color-hover); } .gl-button.gl-button.btn-default.selected:hover::before, .gl-button.gl-button.btn-default.selected:hover + .gl-button::before, .gl-button.gl-button.btn-default-secondary.selected:hover::before, .gl-button.gl-button.btn-default-secondary.selected:hover + .gl-button::before { background-color: var(--gl-button-selected-border-color-hover); } .gl-button.gl-button.btn-default.selected:focus-visible, .gl-button.gl-button.btn-default-secondary.selected:focus-visible { color: var(--gl-button-selected-foreground-color-focus); background-color: var(--gl-button-selected-background-color-focus); box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; border-color: var(--gl-button-selected-border-color-focus); } .gl-button.gl-button.btn-default.selected:focus-visible::before, .gl-button.gl-button.btn-default.selected:focus-visible + .gl-button::before, .gl-button.gl-button.btn-default-secondary.selected:focus-visible::before, .gl-button.gl-button.btn-default-secondary.selected:focus-visible + .gl-button::before { background-color: var(--gl-button-selected-border-color-focus); } .gl-button.gl-button.btn-default.selected:active, .gl-button.gl-button.btn-default.selected.active, .gl-button.gl-button.btn-default-secondary.selected:active, .gl-button.gl-button.btn-default-secondary.selected.active { color: var(--gl-button-selected-foreground-color-active); background-color: var(--gl-button-selected-background-color-active); box-shadow: inset 0 0 0 1px var(--gl-button-selected-border-color-active); border-color: var(--gl-button-selected-border-color-active); } .gl-button.gl-button.btn-default.selected:active::before, .gl-button.gl-button.btn-default.selected.active::before, .gl-button.gl-button.btn-default.selected:active + .gl-button::before, .gl-button.gl-button.btn-default.selected.active + .gl-button::before, .gl-button.gl-button.btn-default-secondary.selected:active::before, .gl-button.gl-button.btn-default-secondary.selected.active::before, .gl-button.gl-button.btn-default-secondary.selected:active + .gl-button::before, .gl-button.gl-button.btn-default-secondary.selected.active + .gl-button::before { background-color: var(--gl-button-selected-border-color-active); } .gl-button.gl-button.btn-reset::before { background-color: var(--gl-button-default-primary-border-color-default); } .gl-button.gl-button.btn-default-tertiary { color: var(--gl-button-default-tertiary-foreground-color-default); background-color: var(--gl-button-default-tertiary-background-color-default); border-color: var(--gl-button-default-tertiary-border-color-default); } .gl-button.gl-button.btn-default-tertiary::before { background-color: var(--gl-button-default-tertiary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-default-tertiary:hover { color: var(--gl-button-default-tertiary-foreground-color-hover); background-color: var(--gl-button-default-tertiary-background-color-hover); border-color: var(--gl-button-default-tertiary-border-color-hover); } .gl-button.gl-button.btn-default-tertiary:focus-visible { color: var(--gl-button-default-tertiary-foreground-color-focus); background-color: var(--gl-button-default-tertiary-background-color-focus); border-color: var(--gl-button-default-tertiary-border-color-focus); } .gl-button.gl-button.btn-default-tertiary:active, .gl-button.gl-button.btn-default-tertiary.active { color: var(--gl-button-default-tertiary-foreground-color-active); background-color: var(--gl-button-default-tertiary-background-color-active); border-color: var(--gl-button-default-tertiary-border-color-active); } .gl-button.gl-button.btn-default-tertiary:active :focus-visible, .gl-button.gl-button.btn-default-tertiary:active:focus-visible:active, .gl-button.gl-button.btn-default-tertiary.active :focus-visible, .gl-button.gl-button.btn-default-tertiary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-confirm { color: var(--gl-button-confirm-primary-foreground-color-default); background-color: var(--gl-button-confirm-primary-background-color-default); border-color: var(--gl-button-confirm-primary-border-color-default); } .gl-button.gl-button.btn-confirm::before { background-color: var(--gl-button-confirm-primary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-confirm:hover { color: var(--gl-button-confirm-primary-foreground-color-hover); background-color: var(--gl-button-confirm-primary-background-color-hover); border-color: var(--gl-button-confirm-primary-border-color-hover); } .gl-button.gl-button.btn-confirm:focus-visible { color: var(--gl-button-confirm-primary-foreground-color-focus); background-color: var(--gl-button-confirm-primary-background-color-focus); border-color: var(--gl-button-confirm-primary-border-color-focus); } .gl-button.gl-button.btn-confirm:active, .gl-button.gl-button.btn-confirm.active { color: var(--gl-button-confirm-primary-foreground-color-active); background-color: var(--gl-button-confirm-primary-background-color-active); border-color: var(--gl-button-confirm-primary-border-color-active); } .gl-button.gl-button.btn-confirm:active :focus-visible, .gl-button.gl-button.btn-confirm:active:focus-visible:active, .gl-button.gl-button.btn-confirm.active :focus-visible, .gl-button.gl-button.btn-confirm.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-confirm-secondary { color: var(--gl-button-confirm-secondary-foreground-color-default); background-color: var(--gl-button-confirm-secondary-background-color-default); border-color: var(--gl-button-confirm-secondary-border-color-default); } .gl-button.gl-button.btn-confirm-secondary::before { background-color: var(--gl-button-confirm-secondary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-confirm-secondary:hover { color: var(--gl-button-confirm-secondary-foreground-color-hover); background-color: var(--gl-button-confirm-secondary-background-color-hover); border-color: var(--gl-button-confirm-secondary-border-color-hover); } .gl-button.gl-button.btn-confirm-secondary:focus-visible { color: var(--gl-button-confirm-secondary-foreground-color-focus); background-color: var(--gl-button-confirm-secondary-background-color-focus); border-color: var(--gl-button-confirm-secondary-border-color-focus); } .gl-button.gl-button.btn-confirm-secondary:active, .gl-button.gl-button.btn-confirm-secondary.active { color: var(--gl-button-confirm-secondary-foreground-color-active); background-color: var(--gl-button-confirm-secondary-background-color-active); border-color: var(--gl-button-confirm-secondary-border-color-active); } .gl-button.gl-button.btn-confirm-secondary:active :focus-visible, .gl-button.gl-button.btn-confirm-secondary:active:focus-visible:active, .gl-button.gl-button.btn-confirm-secondary.active :focus-visible, .gl-button.gl-button.btn-confirm-secondary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-confirm-tertiary { color: var(--gl-button-confirm-tertiary-foreground-color-default); background-color: var(--gl-button-confirm-tertiary-background-color-default); border-color: var(--gl-button-confirm-tertiary-border-color-default); } .gl-button.gl-button.btn-confirm-tertiary::before { background-color: var(--gl-button-confirm-tertiary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-confirm-tertiary:hover { color: var(--gl-button-confirm-tertiary-foreground-color-hover); background-color: var(--gl-button-confirm-tertiary-background-color-hover); border-color: var(--gl-button-confirm-tertiary-border-color-hover); } .gl-button.gl-button.btn-confirm-tertiary:focus-visible { color: var(--gl-button-confirm-tertiary-foreground-color-focus); background-color: var(--gl-button-confirm-tertiary-background-color-focus); border-color: var(--gl-button-confirm-tertiary-border-color-focus); } .gl-button.gl-button.btn-confirm-tertiary:active, .gl-button.gl-button.btn-confirm-tertiary.active { color: var(--gl-button-confirm-tertiary-foreground-color-active); background-color: var(--gl-button-confirm-tertiary-background-color-active); border-color: var(--gl-button-confirm-tertiary-border-color-active); } .gl-button.gl-button.btn-confirm-tertiary:active :focus-visible, .gl-button.gl-button.btn-confirm-tertiary:active:focus-visible:active, .gl-button.gl-button.btn-confirm-tertiary.active :focus-visible, .gl-button.gl-button.btn-confirm-tertiary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-danger { color: var(--gl-button-danger-primary-foreground-color-default); background-color: var(--gl-button-danger-primary-background-color-default); border-color: var(--gl-button-danger-primary-border-color-default); } .gl-button.gl-button.btn-danger::before { background-color: var(--gl-button-danger-primary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-danger:hover { color: var(--gl-button-danger-primary-foreground-color-hover); background-color: var(--gl-button-danger-primary-background-color-hover); border-color: var(--gl-button-danger-primary-border-color-hover); } .gl-button.gl-button.btn-danger:focus-visible { color: var(--gl-button-danger-primary-foreground-color-focus); background-color: var(--gl-button-danger-primary-background-color-focus); border-color: var(--gl-button-danger-primary-border-color-focus); } .gl-button.gl-button.btn-danger:active, .gl-button.gl-button.btn-danger.active { color: var(--gl-button-danger-primary-foreground-color-active); background-color: var(--gl-button-danger-primary-background-color-active); border-color: var(--gl-button-danger-primary-border-color-active); } .gl-button.gl-button.btn-danger:active :focus-visible, .gl-button.gl-button.btn-danger:active:focus-visible:active, .gl-button.gl-button.btn-danger.active :focus-visible, .gl-button.gl-button.btn-danger.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-danger-secondary { color: var(--gl-button-danger-secondary-foreground-color-default); background-color: var(--gl-button-danger-secondary-background-color-default); border-color: var(--gl-button-danger-secondary-border-color-default); } .gl-button.gl-button.btn-danger-secondary::before { background-color: var(--gl-button-danger-secondary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-danger-secondary:hover { color: var(--gl-button-danger-secondary-foreground-color-hover); background-color: var(--gl-button-danger-secondary-background-color-hover); border-color: var(--gl-button-danger-secondary-border-color-hover); } .gl-button.gl-button.btn-danger-secondary:focus-visible { color: var(--gl-button-danger-secondary-foreground-color-focus); background-color: var(--gl-button-danger-secondary-background-color-focus); border-color: var(--gl-button-danger-secondary-border-color-focus); } .gl-button.gl-button.btn-danger-secondary:active, .gl-button.gl-button.btn-danger-secondary.active { color: var(--gl-button-danger-secondary-foreground-color-active); background-color: var(--gl-button-danger-secondary-background-color-active); border-color: var(--gl-button-danger-secondary-border-color-active); } .gl-button.gl-button.btn-danger-secondary:active :focus-visible, .gl-button.gl-button.btn-danger-secondary:active:focus-visible:active, .gl-button.gl-button.btn-danger-secondary.active :focus-visible, .gl-button.gl-button.btn-danger-secondary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-button.gl-button.btn-danger-tertiary { color: var(--gl-button-danger-tertiary-foreground-color-default); background-color: var(--gl-button-danger-tertiary-background-color-default); border-color: var(--gl-button-danger-tertiary-border-color-default); } .gl-button.gl-button.btn-danger-tertiary::before { background-color: var(--gl-button-danger-tertiary-border-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-button.gl-button.btn-danger-tertiary:hover { color: var(--gl-button-danger-tertiary-foreground-color-hover); background-color: var(--gl-button-danger-tertiary-background-color-hover); border-color: var(--gl-button-danger-tertiary-border-color-hover); } .gl-button.gl-button.btn-danger-tertiary:focus-visible { color: var(--gl-button-danger-tertiary-foreground-color-focus); background-color: var(--gl-button-danger-tertiary-background-color-focus); border-color: var(--gl-button-danger-tertiary-border-color-focus); } .gl-button.gl-button.btn-danger-tertiary:active, .gl-button.gl-button.btn-danger-tertiary.active { color: var(--gl-button-danger-tertiary-foreground-color-active); background-color: var(--gl-button-danger-tertiary-background-color-active); border-color: var(--gl-button-danger-tertiary-border-color-active); } .gl-button.gl-button.btn-danger-tertiary:active :focus-visible, .gl-button.gl-button.btn-danger-tertiary:active:focus-visible:active, .gl-button.gl-button.btn-danger-tertiary.active :focus-visible, .gl-button.gl-button.btn-danger-tertiary.active:focus-visible:active{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } @media (forced-colors: active) { .gl-button.gl-button.btn-default-secondary, .gl-button.gl-button.btn-confirm-secondary, .gl-button.gl-button.btn-danger-secondary, .gl-button.gl-button.btn-reset-secondary, .gl-button.gl-button.btn-reset-tertiary { color: LinkText; border: 1px solid LinkText; } .gl-button.gl-button.btn-default-tertiary, .gl-button.gl-button.btn-confirm-tertiary, .gl-button.gl-button.btn-danger-tertiary { color: LinkText; mix-blend-mode: initial; border: 0; } } .gl-button.gl-button.btn-sm, .btn-group-sm > .gl-button.gl-button.btn{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); line-height: 1rem; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-button.gl-button.btn-sm,.recents-wrapper .btn-group-sm > .gl-button.gl-button.btn{ margin-top: var(--gl-spacing-scale-0); } .gl-button.gl-button.btn-sm, .btn-group-sm > .gl-button.gl-button.btn { min-height: 1.5rem; min-width: 1.5rem; } .gl-button.gl-button.btn-sm gl-emoji, .btn-group-sm > .gl-button.gl-button.btn gl-emoji{ font-size: var(--gl-font-size-sm); } .gl-button.gl-button.btn-icon{ line-height: 1rem; padding: var(--gl-spacing-scale-0); } .gl-button.gl-button.btn-icon .gl-button-icon{ margin-right: var(--gl-spacing-scale-0); } .gl-button.gl-button.button-ellipsis-horizontal, .gl-button.gl-button.button-ellipsis-horizontal.btn-sm{ padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); min-height: auto; min-width: auto; } .gl-button.gl-button.button-ellipsis-horizontal svg, .gl-button.gl-button.button-ellipsis-horizontal.btn-sm svg{ height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); margin: var(--gl-spacing-scale-0); } .gl-button.gl-button.btn-label, .gl-button.gl-button.btn-label:hover, .gl-button.gl-button.btn-label:focus-visible, .gl-button.gl-button.btn-label:active{ background-color: var(--gl-background-color-subtle); cursor: default; -webkit-user-select: text; user-select: text; } .gl-button.gl-button.btn-link{ background-color: transparent; border-width: 0px; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-button.gl-button.btn-link{ margin-top: var(--gl-spacing-scale-0); } .gl-button.gl-button.btn-link{ line-height: 1rem; padding-left: var(--gl-spacing-scale-0); padding-right: var(--gl-spacing-scale-0); border-radius: var(--gl-button-link-border-radius); color: var(--gl-button-link-text-color-default); min-height: auto; min-width: auto; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: transparent; } .gl-button.gl-button.btn-link:hover{ background-color: transparent; color: var(--gl-button-link-text-color-hover); text-decoration-color: var(--gl-button-link-text-color-hover); } .gl-button.gl-button.btn-link:active { color: var(--gl-button-link-text-color-active); text-decoration-color: var(--gl-button-link-text-color-active); } .gl-button.gl-button.btn-link:active, .gl-button.gl-button.btn-link:focus-visible, .gl-button.gl-button.btn-link:focus-visible:active{ background-color: transparent; } @media (forced-colors: active) { .gl-button.gl-button.btn-link { color: LinkText; } } .gl-button.gl-button.btn-block{ width: 100%; } .modal-header .modal-title.gl-button.gl-button.btn-block { margin-right: -1rem; padding-right: 1rem; } .gl-button.gl-button.btn-block + .btn-block{ margin-top: var(--gl-spacing-scale-2); } .gl-button.gl-button.disabled, .gl-button.gl-button.disabled:hover, .gl-button.gl-button.disabled:focus-visible, .gl-button.gl-button.disabled:active, .gl-button.gl-button.disabled.selected, .gl-button.gl-button[disabled], .gl-button.gl-button[disabled]:hover, .gl-button.gl-button[disabled]:focus-visible, .gl-button.gl-button[disabled]:active, .gl-button.gl-button[disabled].selected { background-color: var(--gl-button-disabled-background-color); color: var(--gl-button-disabled-foreground-color); border-color: var(--gl-button-disabled-border-color); opacity: 1; cursor: not-allowed !important; } .gl-button.gl-button.disabled::before, .gl-button.gl-button.disabled:hover::before, .gl-button.gl-button.disabled:focus-visible::before, .gl-button.gl-button.disabled:active::before, .gl-button.gl-button.disabled.selected::before, .gl-button.gl-button[disabled]::before, .gl-button.gl-button[disabled]:hover::before, .gl-button.gl-button[disabled]:focus-visible::before, .gl-button.gl-button[disabled]:active::before, .gl-button.gl-button[disabled].selected::before { background-color: var(--gl-button-disabled-border-color); } .gl-button.gl-button.disabled[class*=-tertiary], .gl-button.gl-button[disabled][class*=-tertiary], .gl-button.gl-button.btn-link.disabled, .gl-button.gl-button.btn-link[disabled]{ background-color: transparent; } .gl-button.gl-button.disabled[class*=-tertiary]:not(:focus-visible), .gl-button.gl-button[disabled][class*=-tertiary]:not(:focus-visible), .gl-button.gl-button.btn-link.disabled:not(:focus-visible), .gl-button.gl-button.btn-link[disabled]:not(:focus-visible){ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-button-text:has(.gl-sr-only) { position: relative; } .gl-button-group:not(.gl-keyset-pagination), .btn-group:not(.gl-keyset-pagination), .gl-dropdown.btn-group{ position: relative; } .gl-button-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child), .gl-button-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button, .gl-button-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child), .btn-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button, .gl-dropdown.btn-group > .gl-button:not(:first-child), .gl-dropdown.btn-group > .btn-group:not(:first-child) > .gl-button, .gl-dropdown.btn-group > .gl-new-dropdown:not(:first-child) > .gl-button{ border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); border-left-width: 0px; } .gl-button-group:not(.gl-keyset-pagination) > .gl-button:not(:last-child):not(.dropdown-toggle), .gl-button-group:not(.gl-keyset-pagination) > .btn-group:not(:last-child) > .gl-button, .gl-button-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:last-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-button:not(:last-child):not(.dropdown-toggle), .btn-group:not(.gl-keyset-pagination) > .btn-group:not(:last-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:last-child) > .gl-button, .gl-dropdown.btn-group > .gl-button:not(:last-child):not(.dropdown-toggle), .gl-dropdown.btn-group > .btn-group:not(:last-child) > .gl-button, .gl-dropdown.btn-group > .gl-new-dropdown:not(:last-child) > .gl-button{ border-top-right-radius: var(--gl-border-radius-none); border-bottom-right-radius: var(--gl-border-radius-none); border-right-width: 0px; } .gl-button-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child), .gl-button-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button, .gl-button-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child), .btn-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button, .btn-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button, .gl-dropdown.btn-group > .gl-button:not(:first-child), .gl-dropdown.btn-group > .btn-group:not(:first-child) > .gl-button, .gl-dropdown.btn-group > .gl-new-dropdown:not(:first-child) > .gl-button{ position: relative; isolation: isolate; margin-left: 1px; } .gl-button-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child)::before, .gl-button-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button::before, .gl-button-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button::before, .btn-group:not(.gl-keyset-pagination) > .gl-button:not(:first-child)::before, .btn-group:not(.gl-keyset-pagination) > .btn-group:not(:first-child) > .gl-button::before, .btn-group:not(.gl-keyset-pagination) > .gl-new-dropdown:not(:first-child) > .gl-button::before, .gl-dropdown.btn-group > .gl-button:not(:first-child)::before, .gl-dropdown.btn-group > .btn-group:not(:first-child) > .gl-button::before, .gl-dropdown.btn-group > .gl-new-dropdown:not(:first-child) > .gl-button::before { content: ""; position: absolute; bottom: -1px; left: -1px; top: -1px; display: block; width: 1px; z-index: 4; } .gl-button-group:not(.gl-keyset-pagination) > .gl-button:focus-visible, .gl-button-group:not(.gl-keyset-pagination) > .gl-button:active, .gl-button-group:not(.gl-keyset-pagination) > .gl-button.active, .btn-group:not(.gl-keyset-pagination) > .gl-button:focus-visible, .btn-group:not(.gl-keyset-pagination) > .gl-button:active, .btn-group:not(.gl-keyset-pagination) > .gl-button.active, .gl-dropdown.btn-group > .gl-button:focus-visible, .gl-dropdown.btn-group > .gl-button:active, .gl-dropdown.btn-group > .gl-button.active { z-index: 3; } .gl-button-group:not(.gl-keyset-pagination) .btn-confirm:not(.disabled):not([disabled])::before, .gl-button-group:not(.gl-keyset-pagination) .btn-danger:not(.disabled):not([disabled])::before, .btn-group:not(.gl-keyset-pagination) .btn-confirm:not(.disabled):not([disabled])::before, .btn-group:not(.gl-keyset-pagination) .btn-danger:not(.disabled):not([disabled])::before, .gl-dropdown.btn-group .btn-confirm:not(.disabled):not([disabled])::before, .gl-dropdown.btn-group .btn-danger:not(.disabled):not([disabled])::before{ background-color: transparent; } .gl-button-group:not(.gl-keyset-pagination) .gl-button.btn-icon .gl-button-text .gl-button-icon, .btn-group:not(.gl-keyset-pagination) .gl-button.btn-icon .gl-button-text .gl-button-icon, .gl-dropdown.btn-group .gl-button.btn-icon .gl-button-text .gl-button-icon{ margin-right: -1px; } .gl-button-group:not(.gl-keyset-pagination).disabled::before, .gl-button-group:not(.gl-keyset-pagination)[disabled]::before, .btn-group:not(.gl-keyset-pagination).disabled::before, .btn-group:not(.gl-keyset-pagination)[disabled]::before, .gl-dropdown.btn-group.disabled::before, .gl-dropdown.btn-group[disabled]::before { background-color: var(--gl-button-disabled-border-color); } .gl-button-group:not(.gl-keyset-pagination) .btn-confirm-secondary:not(.disabled):not([disabled])::before, .btn-group:not(.gl-keyset-pagination) .btn-confirm-secondary:not(.disabled):not([disabled])::before, .gl-dropdown.btn-group .btn-confirm-secondary:not(.disabled):not([disabled])::before { background-color: var(--gl-button-confirm-secondary-border-color-default); } .gl-button-group:not(.gl-keyset-pagination) .btn-danger-secondary:not(.disabled):not([disabled])::before, .btn-group:not(.gl-keyset-pagination) .btn-danger-secondary:not(.disabled):not([disabled])::before, .gl-dropdown.btn-group .btn-danger-secondary:not(.disabled):not([disabled])::before { background-color: var(--gl-button-danger-secondary-border-color-default); } .gl-button-group-vertical, .btn-group-vertical{ flex-direction: column; align-items: flex-start; justify-content: center; } .gl-button-group-vertical > .gl-button, .gl-button-group-vertical > .btn-group, .btn-group-vertical > .gl-button, .btn-group-vertical > .btn-group{ position: relative; width: 100%; } .modal-header .modal-title.gl-button-group-vertical > .gl-button, .modal-header .modal-title .gl-button-group-vertical > .btn-group, .modal-header .modal-title .btn-group-vertical > .gl-button, .modal-header .modal-title .btn-group-vertical > .btn-group { margin-right: -1rem; padding-right: 1rem; } .gl-button-group-vertical > .gl-button:not(:first-child), .gl-button-group-vertical > .btn-group:not(:first-child) > .gl-button, .gl-button-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button, .btn-group-vertical > .gl-button:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .gl-button, .btn-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button{ border-top-left-radius: var(--gl-border-radius-none); border-top-right-radius: var(--gl-border-radius-none); border-top-width: 0px; } .gl-button-group-vertical > .gl-button:not(:last-child):not(.dropdown-toggle), .gl-button-group-vertical > .btn-group:not(:last-child) > .gl-button, .gl-button-group-vertical > .gl-new-dropdown:not(:last-child) > .gl-button, .btn-group-vertical > .gl-button:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .gl-button, .btn-group-vertical > .gl-new-dropdown:not(:last-child) > .gl-button{ border-bottom-right-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); border-bottom-width: 0px; } .gl-button-group-vertical > .gl-button:not(:first-child), .gl-button-group-vertical > .btn-group:not(:first-child) > .gl-button, .gl-button-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button, .btn-group-vertical > .gl-button:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .gl-button, .btn-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button{ position: relative; margin-top: 1px; } .gl-button-group-vertical > .gl-button:not(:first-child)::before, .gl-button-group-vertical > .btn-group:not(:first-child) > .gl-button::before, .gl-button-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button::before, .btn-group-vertical > .gl-button:not(:first-child)::before, .btn-group-vertical > .btn-group:not(:first-child) > .gl-button::before, .btn-group-vertical > .gl-new-dropdown:not(:first-child) > .gl-button::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; display: block; height: 1px; z-index: 4; } .gl-button-group-vertical .btn-confirm:not(.disabled):not([disabled])::before, .gl-button-group-vertical .btn-danger:not(.disabled):not([disabled])::before, .btn-group-vertical .btn-confirm:not(.disabled):not([disabled])::before, .btn-group-vertical .btn-danger:not(.disabled):not([disabled])::before{ background-color: transparent; } .gl-pagination{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-pagination{ margin-top: var(--gl-spacing-scale-0); } .gl-pagination{ text-wrap: nowrap; } .gl-pagination ul { border-radius: var(--gl-action-border-radius); display: flex; margin: var(--gl-spacing-scale-0); padding-left: var(--gl-spacing-scale-0); list-style-type: none; } .gl-pagination a { color: var(--gl-action-neutral-foreground-color-default); } .gl-pagination-item { border-radius: var(--gl-action-border-radius); transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; justify-content: center; padding: var(--gl-spacing-scale-3); line-height: 1rem; text-decoration-line: none; min-width: var(--gl-spacing-scale-7); text-align: center; border-width: 1px; border-style: solid; color: var(--gl-action-neutral-foreground-color-default); background-color: var(--gl-action-neutral-background-color-default); border-color: var(--gl-action-neutral-border-color-default); } .gl-pagination-item:hover{ color: var(--gl-action-neutral-foreground-color-hover); background-color: var(--gl-action-neutral-background-color-hover); border-color: var(--gl-action-neutral-border-color-hover); } .gl-pagination-item:focus-visible{ color: var(--gl-action-neutral-foreground-color-focus); background-color: var(--gl-action-neutral-background-color-focus); border-color: var(--gl-action-neutral-border-color-focus); } .gl-pagination-item:active{ color: var(--gl-action-neutral-foreground-color-active); background-color: var(--gl-action-neutral-background-color-active); border-color: var(--gl-action-neutral-border-color-active); } @media (prefers-reduced-motion) { .gl-pagination-item { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .gl-pagination-item:hover{ text-decoration-line: none; } .gl-pagination-item:focus-visible, .gl-pagination-item:active:focus-visible{ text-decoration-line: none; box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-pagination-item:active{ text-decoration-line: none; } .gl-pagination-item:not(.disabled).active { color: var(--gl-action-selected-foreground-color-default); background-color: var(--gl-action-selected-background-color-default); border-color: var(--gl-action-selected-border-color-default); } .gl-pagination-item:not(.disabled).active:hover { color: var(--gl-action-selected-foreground-color-hover); background-color: var(--gl-action-selected-background-color-hover); border-color: var(--gl-action-selected-border-color-hover); } .gl-pagination-item:not(.disabled).active:focus-visible { color: var(--gl-action-selected-foreground-color-focus); background-color: var(--gl-action-selected-background-color-focus); border-color: var(--gl-action-selected-border-color-focus); } .gl-pagination-item:not(.disabled).active:active { color: var(--gl-action-selected-foreground-color-active); background-color: var(--gl-action-selected-background-color-active); border-color: var(--gl-action-selected-border-color-active); } .gl-pagination .disabled .gl-pagination-item{ border-color: var(--gl-border-color-transparent); background-color: transparent; color: var(--gl-action-disabled-foreground-color); } .gl-path-nav { position: relative; display: flex; } .gl-path-nav .gl-path-nav-list{ padding: var(--gl-spacing-scale-1); margin: var(--gl-spacing-scale-0); list-style-type: none; display: inline-flex; } .commit-content .committer.gl-path-nav .gl-path-nav-list { gap: 0.5ch; } .gl-path-nav .gl-path-nav-list{ overflow: hidden; margin-left: -1px; position: relative; } .gl-path-nav .gl-path-nav-list-item{ min-width: -moz-fit-content; min-width: fit-content; padding-top: 1px; padding-bottom: 1px; } .gl-path-nav .gl-path-nav-list-item:first-of-type { padding-left: 1px; } .gl-path-nav .gl-path-button{ padding-left: var(--gl-spacing-scale-5); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-path-nav .gl-path-button{ margin-top: var(--gl-spacing-scale-0); } .gl-path-nav .gl-path-button{ z-index: var(--gl-zindex-0); font-weight: var(--gl-font-weight-bold); line-height: 1rem; border-top-left-radius: var(--gl-border-radius-default); border-bottom-left-radius: var(--gl-border-radius-default); border-style: none; background-color: var(--gl-action-neutral-background-color-default); color: var(--gl-action-neutral-foreground-color-default); margin-right: 0.875rem; padding-right: 0.625rem; position: relative; } .gl-path-nav .gl-path-button::before, .gl-path-nav .gl-path-button::after{ background-color: inherit; content: ""; position: absolute; top: 0.25rem; right: -0.75rem; width: 1.5rem; z-index: -1; height: 1.5rem; transform: rotate(45deg) skew(14deg, 14deg); border-top-left-radius: 0.625rem; border-bottom-right-radius: 0.625rem; border-top-right-radius: 0.125rem; clip-path: polygon(100% 0, 0 0, 100% 100%); } .gl-path-nav .gl-path-button::before { background-color: var(--gl-color-alpha-0); display: none; z-index: 2; right: calc(-0.75rem + 1px); box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color); clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%); transform: rotate(45deg) skew(14deg, 14deg) scale(0.99); } .gl-path-nav .gl-path-button:hover { background-color: var(--gl-action-neutral-background-color-hover); color: var(--gl-action-neutral-foreground-color-hover); } .gl-path-nav .gl-path-button:focus-visible { background-color: var(--gl-action-neutral-background-color-focus); color: var(--gl-action-neutral-foreground-color-focus); } .gl-path-nav .gl-path-button:active { background-color: var(--gl-action-neutral-background-color-active); color: var(--gl-action-neutral-foreground-color-active); } .gl-path-nav .gl-path-button:active, .gl-path-nav .gl-path-button:focus-visible, .gl-path-nav .gl-path-button:focus-visible:active { box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; border-top-right-radius: 1px; border-bottom-right-radius: 1px; } .gl-path-nav .gl-path-button:active::before, .gl-path-nav .gl-path-button:focus-visible::before, .gl-path-nav .gl-path-button:focus-visible:active::before { display: block; } .gl-path-nav .gl-path-button.gl-path-active-item { background-color: var(--gl-action-selected-background-color-default); color: var(--gl-action-selected-foreground-color-default); } .gl-path-nav .gl-path-button:disabled{ cursor: not-allowed; background-color: var(--gl-color-alpha-0); box-shadow: none; color: var(--gl-action-disabled-foreground-color); } .gl-path-nav .gl-path-button:disabled::before { box-shadow: none; } .gl-path-nav .gl-path-fade{ width: var(--gl-spacing-scale-8); height: 100%; z-index: var(--gl-zindex-2); bottom: 0; color: var(--gl-text-color-subtle); position: absolute; } .gl-path-nav .gl-path-fade-left { left: 0; background-image: linear-gradient(to left, rgba(40, 39, 45, 0), var(--path-bg-color) 33%); } .gl-path-nav .gl-path-fade-right { right: 0; text-align: right; background-image: linear-gradient(to right, rgba(40, 39, 45, 0), var(--path-bg-color) 33%); } .gl-path-nav .gl-clear-icon-button{ padding: var(--gl-spacing-scale-0); height: 100%; color: var(--gl-icon-color-subtle); } .gl-path-nav .gl-clear-icon-button .gl-icon{ vertical-align: middle; } .gl-popover { max-width: 17.5rem; background-color: var(--gl-background-color-overlap); border-style: none; --tw-drop-shadow: drop-shadow(0 0 0.5px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 0.5px 1px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 1px 3px var(--gl-shadow-color-default, #05050629)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); font-size: var(--gl-font-size-sm); border-radius: var(--gl-feedback-border-radius); } .gl-popover .popover-body{ color: var(--gl-text-color-default); } .gl-popover.bs-popover-top, .gl-popover.bs-popover-auto[x-placement^=top] { /* When popover position is top, the arrow is translated 1 pixel * due to the box-shadow include in our custom styles. */ } .gl-popover.bs-popover-top > .arrow::before, .gl-popover.bs-popover-auto[x-placement^=top] > .arrow::before { bottom: 1px; border-top-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-top > .arrow::after, .gl-popover.bs-popover-auto[x-placement^=top] > .arrow::after { bottom: 2px; border-top-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-bottom > .arrow::before, .gl-popover.bs-popover-auto[x-placement^=bottom] > .arrow::before { top: 1px; border-bottom-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-bottom > .arrow::after, .gl-popover.bs-popover-auto[x-placement^=bottom] > .arrow::after { top: 2px; border-bottom-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-bottom > .popover-header::before, .gl-popover.bs-popover-auto[x-placement^=bottom] > .popover-header::before { border-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-right > .arrow::before, .gl-popover.bs-popover-auto[x-placement^=right] > .arrow::before { left: 1px; border-right-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-right > .arrow::after, .gl-popover.bs-popover-auto[x-placement^=right] > .arrow::after { left: 2px; border-right-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-left > .arrow::before, .gl-popover.bs-popover-auto[x-placement^=left] > .arrow::before { right: 1px; border-left-color: var(--gl-background-color-overlap); } .gl-popover.bs-popover-left > .arrow::after, .gl-popover.bs-popover-auto[x-placement^=left] > .arrow::after { right: 2px; border-left-color: var(--gl-background-color-overlap); } .gl-popover .popover-header{ font-weight: var(--gl-heading-scale-200-font-weight); margin-top: var(--gl-heading-scale-200-margin-top); font-size: var(--gl-heading-scale-200-font-size); letter-spacing: var(--gl-heading-scale-200-letter-spacing); line-height: var(--gl-heading-scale-200-line-height); color: var(--gl-heading-scale-200-color); border-bottom-width: 0px; padding-bottom: var(--gl-spacing-scale-0); } .gl-popover.has-title .popover-header{ hyphens: auto; overflow-wrap: anywhere; word-break: normal; display: flex; align-items: flex-start; justify-content: space-between; } .gl-popover.has-close-button:not(.has-title) .popover-header { padding-top: 0.25rem; } .gl-popover .popover-body{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); } .gl-popover .popover-body > .popover-hr{ margin-top: var(--gl-spacing-scale-5); margin-bottom: var(--gl-spacing-scale-5); margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); } .gl-progress-bar { background-color: var(--gl-progress-bar-track-color); border-radius: var(--gl-border-radius-full); } .gl-progress{ flex-direction: column; justify-content: center; width: 100%; } .modal-header .modal-title.gl-progress { margin-right: -1rem; padding-right: 1rem; } .gl-progress{ overflow: hidden; text-align: center; white-space: nowrap; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transform-origin: left; } .gl-progress-bar-primary { background-color: var(--gl-progress-bar-indicator-color-default); } .gl-progress-bar-success { background-color: var(--gl-progress-bar-indicator-color-success); } .gl-progress-bar-warning { background-color: var(--gl-progress-bar-indicator-color-warning); } .gl-progress-bar-danger { background-color: var(--gl-progress-bar-indicator-color-danger); } .gl-search-box-by-type-search-icon{ width: var(--gl-spacing-scale-5); position: absolute; left: 0.5rem; top: calc(50% - 16px / 2); } .gl-search-box-by-type{ display: flex; position: relative; } .gl-search-box-by-type-loading-icon{ fill: var(--gl-icon-color-subtle); width: var(--gl-spacing-scale-5); margin-right: var(--gl-spacing-scale-2); } .gl-search-box-by-type-clear{ z-index: var(--gl-zindex-3); } .gl-search-box-by-type-input, .gl-search-box-by-type-input.gl-form-input{ height: var(--gl-spacing-scale-7); padding-right: var(--gl-spacing-scale-7); padding-left: 1.75rem; } .gl-search-box-by-type-input::-webkit-search-cancel-button, .gl-search-box-by-type-input.gl-form-input::-webkit-search-cancel-button{ display: none; } .gl-search-box-by-type-input-borderless, .gl-search-box-by-type-input-borderless.gl-form-input{ border-style: none; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-search-box-by-type-input-borderless,.recents-wrapper .gl-search-box-by-type-input-borderless.gl-form-input{ margin-top: var(--gl-spacing-scale-0); } .gl-search-box-by-type-input-borderless, .gl-search-box-by-type-input-borderless.gl-form-input{ height: auto; line-height: 1rem; padding-left: var(--gl-spacing-scale-7); padding-top: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); width: 100%; } .modal-header .modal-title.gl-search-box-by-type-input-borderless, .modal-header .modal-title .gl-search-box-by-type-input-borderless.gl-form-input { margin-right: -1rem; padding-right: 1rem; } .gl-search-box-by-type-input-borderless, .gl-search-box-by-type-input-borderless.gl-form-input { border-radius: 0; padding-right: calc(1.5rem + 0.25rem); } .gl-search-box-by-type-input-borderless:not(.form-control-plaintext):focus-visible, .gl-search-box-by-type-input-borderless.gl-form-input:not(.form-control-plaintext):focus-visible { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-search-box-by-type-input-borderless:not(.form-control-plaintext):focus-visible, .gl-search-box-by-type-input-borderless.gl-form-input:not(.form-control-plaintext):focus-visible { outline: 2px solid LinkText; } } .gl-search-box-by-type-input-borderless::placeholder, .gl-search-box-by-type-input-borderless.gl-form-input::placeholder { color: var(--gl-control-placeholder-color); } .gl-search-box-by-type-input-borderless::-webkit-search-cancel-button, .gl-search-box-by-type-input-borderless.gl-form-input::-webkit-search-cancel-button{ display: none; } .gl-search-box-by-type-right-icons{ display: flex; align-items: center; line-height: 0; right: 0.25rem; position: absolute; height: 100%; } .gl-search-box-by-click{ font-size: var(--gl-font-size-base); } .recents-wrapper .gl-search-box-by-click{ margin-top: var(--gl-spacing-scale-0); } .gl-search-box-by-click .gl-search-box-by-click-history > .gl-button { padding-left: 0.75rem !important; padding-right: 0.5rem !important; border-top-right-radius: 0; border-bottom-right-radius: 0; } .gl-search-box-by-click .gl-search-box-by-click-history > .gl-button, .gl-search-box-by-click .gl-search-box-by-click-search-button.gl-button { background-color: var(--gl-control-background-color-default); border-color: var(--gl-control-border-color-default) !important; } .gl-search-box-by-click .gl-search-box-by-click-history > .gl-button:disabled, .gl-search-box-by-click .gl-search-box-by-click-search-button.gl-button:disabled { background: var(--gl-control-background-color-disabled); border-color: var(--gl-control-border-color-disabled) !important; } .gl-search-box-by-click .gl-search-box-by-click-input::-webkit-search-cancel-button{ display: none; } .gl-search-box-by-click .gl-search-box-by-click-clear-button { position: absolute; top: 0.25rem; right: 0.25rem; margin-right: var(--gl-spacing-scale-2); z-index: var(--gl-zindex-3); } .gl-search-box-by-click-with-search-button .gl-search-box-by-click-input{ padding-right: var(--gl-spacing-scale-7); } .gl-search-box-by-click-with-search-button .gl-search-box-by-click-clear-button { right: 2rem; } .gl-skeleton-loader-default-container { width: 235px; } .gl-skeleton-loader-fill-background-color { fill: var(--gl-skeleton-loader-background-color); } .gl-skeleton-loader stop{ opacity: var(--gl-opacity-10); } .gl-skeleton-loader .background-stop { stop-color: var(--gl-skeleton-loader-background-color); } .gl-skeleton-loader .shimmer-stop { stop-color: var(--gl-skeleton-loader-shimmer-color); } .gl-tabs-wrapper{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); position: relative; display: flex; flex-wrap: wrap; border-bottom-width: 1px; } .gl-tabs-nav{ flex-grow: 1; } .gl-tab-nav-item { position: relative; padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); padding-top: var(--gl-spacing-scale-5); padding-bottom: var(--gl-spacing-scale-5); line-height: 1rem; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-tab-nav-item{ margin-top: var(--gl-spacing-scale-0); } .gl-tab-nav-item{ display: flex; justify-content: center; border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; height: 100%; color: var(--gl-action-neutral-foreground-color-default); background-color: var(--gl-action-neutral-background-color-default); border-color: var(--gl-action-neutral-border-color-default); } .gl-tab-nav-item:hover{ color: var(--gl-action-neutral-foreground-color-hover); background-color: var(--gl-action-neutral-background-color-hover); border-color: var(--gl-action-neutral-border-color-hover); } .gl-tab-nav-item:focus-visible{ color: var(--gl-action-neutral-foreground-color-focus); background-color: var(--gl-action-neutral-background-color-focus); border-color: var(--gl-action-neutral-border-color-focus); } .gl-tab-nav-item:active{ color: var(--gl-action-neutral-foreground-color-active); background-color: var(--gl-action-neutral-background-color-active); border-color: var(--gl-action-neutral-border-color-active); } .gl-tab-nav-item { transition: box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .gl-tab-nav-item::before { content: ""; position: absolute; border-bottom: 2px solid transparent; translate: 0 2px; transition: border-bottom 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); bottom: -1px; left: -1px; right: -1px; } @media (prefers-reduced-motion: reduce) { .gl-tab-nav-item, .gl-tab-nav-item::before { transition-duration: 0.01ms; } } .gl-tab-nav-item:hover:not(.gl-tab-nav-item-active)::before { border-bottom-color: var(--gl-border-color-strong); translate: 0; } .gl-tab-nav-item:focus-visible{ border-radius: var(--gl-border-radius-default); } .gl-tab-nav-item.disabled{ pointer-events: auto; cursor: not-allowed; color: var(--gl-action-disabled-foreground-color); } .gl-tab-nav-item.disabled:hover{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .gl-tab-nav-item > .gl-tab-counter-badge { font-weight: inherit; margin-left: var(--gl-spacing-scale-2); } .gl-tab-content{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-tab-content{ margin-top: var(--gl-spacing-scale-0); } .gl-tab-content{ line-height: 1rem; color: var(--gl-text-color-default); } .gl-tab-nav-item-active{ font-weight: var(--gl-font-weight-bold); z-index: 1; } .gl-tab-nav-item-active:active, .gl-tab-nav-item-active:focus-visible, .gl-tab-nav-item-active:focus-visible:active { box-shadow: inset 0 0 0 1px var(--gl-action-neutral-border-color-active), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } @media (forced-colors: active) { .gl-tab-nav-item-active:active, .gl-tab-nav-item-active:focus-visible, .gl-tab-nav-item-active:focus-visible:active { outline: 2px solid LinkText; } } .gl-scrollable-tabs-nav .gl-tab-nav-item-active:active, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible:active { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-scrollable-tabs-nav .gl-tab-nav-item-active:active, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible:active { outline: 2px solid LinkText; } } .gl-scrollable-tabs-nav .gl-tab-nav-item-active:active::before, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible::before, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible:active::before { border-radius: 0 0 1px 1px; left: 3px; right: 3px; bottom: 3px; } .gl-tab-nav-item-active:active::before, .gl-tab-nav-item-active:focus-visible::before, .gl-tab-nav-item-active:focus-visible:active::before { border-radius: 0 0 2px 2px; left: 0; right: 0; } .gl-tab-nav-item-active::before { border-bottom-color: var(--gl-tab-selected-indicator-color-default); translate: 0; } .gl-actions-tabs-start{ width: 100%; } .modal-header .modal-title.gl-actions-tabs-start { margin-right: -1rem; padding-right: 1rem; } .gl-actions-tabs-start{ display: flex; flex-direction: column; flex-grow: 0; margin-top: var(--gl-spacing-scale-3); } @container (min-width: 768px){ .gl-actions-tabs-start{ display: none; } } .gl-actions-tabs-end{ display: none; flex-grow: 0; justify-content: flex-end; align-items: center; flex-direction: row; margin-top: var(--gl-spacing-scale-0); } @container (min-width: 768px){ .gl-actions-tabs-end{ display: flex; } } .gl-actions-tabs-start button, .gl-actions-tabs-end button{ margin-bottom: var(--gl-spacing-scale-3); } @container (min-width: 768px){ .gl-actions-tabs-start button, .gl-actions-tabs-end button{ margin-right: var(--gl-spacing-scale-3); margin-bottom: var(--gl-spacing-scale-0); } } .gl-actions-tabs-start button:last-child, .gl-actions-tabs-end button:last-child{ margin: var(--gl-spacing-scale-0); } .gl-tabs-fade{ position: absolute; bottom: var(--gl-spacing-scale-0); top: var(--gl-spacing-scale-0); z-index: var(--gl-zindex-2); width: var(--gl-spacing-scale-8); padding: var(--gl-spacing-scale-2); display: flex; } .gl-tabs-fade-left{ left: var(--gl-spacing-scale-0); background-image: linear-gradient(to left, rgba(40, 39, 45, 0), var(--gl-background-color-default) 33%); } .gl-tabs-fade-right{ right: var(--gl-spacing-scale-0); justify-content: flex-end; background-image: linear-gradient(to right, rgba(40, 39, 45, 0), var(--gl-background-color-default) 33%); } .gl-tabs-fade-icon-button{ border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; color: var(--gl-action-neutral-foreground-color-default); background-color: var(--gl-action-neutral-background-color-default); border-color: var(--gl-action-neutral-border-color-default); } .gl-tabs-fade-icon-button:hover{ color: var(--gl-action-neutral-foreground-color-hover); background-color: var(--gl-action-neutral-background-color-hover); border-color: var(--gl-action-neutral-border-color-hover); } .gl-tabs-fade-icon-button:focus-visible{ color: var(--gl-action-neutral-foreground-color-focus); background-color: var(--gl-action-neutral-background-color-focus); border-color: var(--gl-action-neutral-border-color-focus); } .gl-tabs-fade-icon-button:active{ color: var(--gl-action-neutral-foreground-color-active); background-color: var(--gl-action-neutral-background-color-active); border-color: var(--gl-action-neutral-border-color-active); } .gl-tabs-fade-icon-button{ padding: var(--gl-spacing-scale-0); height: 100%; } .gl-scrollable-tabs-nav{ overflow: hidden; position: relative; flex-wrap: nowrap; } /* * These styles are specific to the gl-toast component. * Documentation: https://design.gitlab.com/components/toast */ .b-toaster { z-index: 1100; } .b-toaster.b-toaster-bottom-left { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; height: 0; overflow: visible; } .b-toaster.b-toaster-bottom-left .b-toaster-slot { position: absolute; max-width: 36.625rem; padding: 0; margin: 0; width: auto; display: flex; flex-direction: column; gap: var(--gl-spacing-scale-4); bottom: 1.5rem; left: 1.5rem; right: auto; view-transition-name: gl-toast; } @supports (-moz-appearance: none) { .b-toaster.b-toaster-bottom-left .b-toaster-slot { view-transition-name: unset; } } @media (max-width: 575.98px) { .b-toaster.b-toaster-bottom-left .b-toaster-slot{ width: 100%; } .modal-header .modal-title.b-toaster.b-toaster-bottom-left .b-toaster-slot { margin-right: -1rem; padding-right: 1rem; } .b-toaster.b-toaster-bottom-left .b-toaster-slot{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); left: 0; right: 0; } } .b-toaster .b-toast { display: block; position: relative; max-width: 36.625rem; } @supports (-moz-appearance: none) { .b-toaster .b-toast { transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } } .b-toaster .gl-toast { opacity: 1; font-size: var(--gl-font-size-base); } .recents-wrapper .b-toaster .gl-toast{ margin-top: var(--gl-spacing-scale-0); } .b-toaster .gl-toast{ padding-top: var(--gl-spacing-scale-5); padding-bottom: var(--gl-spacing-scale-5); padding-left: var(--gl-spacing-scale-6); padding-right: var(--gl-spacing-scale-6); line-height: 1rem; display: flex; align-items: center; justify-content: space-between; --tw-shadow: var(--gl-shadow-md); --tw-shadow-colored: var(--gl-shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-radius: var(--gl-feedback-border-radius); background-color: var(--gl-feedback-strong-background-color); color: var(--gl-feedback-strong-text-color); } .b-toaster .gl-toast.fade:not(.show) { opacity: 0; } .b-toaster .toast-body { display: block; font-weight: var(--gl-font-weight-300); padding-right: var(--gl-spacing-scale-3); order: 1; } .b-toaster .toast-header{ display: flex; order: 2; } .b-toaster .gl-toast-action{ padding: var(--gl-spacing-scale-3); margin: var(--gl-spacing-scale-0); margin-left: var(--gl-spacing-scale-5); text-transform: none; font-size: var(--gl-font-size-base); } .recents-wrapper .b-toaster .gl-toast-action{ margin-top: var(--gl-spacing-scale-0); } .b-toaster .gl-toast-action{ white-space: nowrap; font-weight: var(--gl-font-weight-bold); cursor: pointer; color: var(--gl-feedback-strong-link-color); } .b-toaster .gl-toast-close-button{ margin-left: var(--gl-spacing-scale-5); color: inherit !important; } ::view-transition-group(gl-toast) { animation-duration: 0.2s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } table.gl-table { background-color: var(--gl-color-alpha-0); color: var(--gl-text-color-default); } table.gl-table tr th, table.gl-table tr td{ border-bottom-width: 1px; background-color: transparent; padding: var(--gl-spacing-scale-5); border-bottom-style: solid; border-color: var(--gl-border-color-default); line-height: 1rem; font-size: var(--gl-font-size-base); } .recents-wrapper table.gl-table tr th,.recents-wrapper table.gl-table tr td{ margin-top: var(--gl-spacing-scale-0); } table.gl-table tr th, table.gl-table tr td{ vertical-align: top; color: var(--gl-text-color-default); font-weight: var(--gl-font-weight-normal); } table.gl-table tr:focus-visible{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; position: relative; z-index: 1; } table.gl-table.table-borderless tr td{ border-bottom-width: 0px; } table.gl-table thead tr th{ font-weight: var(--gl-font-weight-bold); color: var(--gl-text-color-heading); } table.gl-table thead tr th .gl-table-th-sort-icon-wrapper{ margin-left: var(--gl-spacing-scale-2); } table.gl-table thead tr th.gl-table-th-align-right > div{ flex-direction: row-reverse; } table.gl-table thead tr th.gl-table-th-align-right > div .gl-table-th-sort-icon-wrapper{ margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-2); } table.gl-table thead tr th [name=sort-icon] { -webkit-user-select: none; user-select: none; color: var(--gl-table-sorting-icon-color); } table.gl-table--sticky-header thead tr { position: sticky; top: -1px; background-color: var(--gl-background-color-default); box-shadow: inset 0 -1px 0 var(--gl-border-color-default); } table.gl-table .table-primary, table.gl-table .table-primary:hover { background-color: var(--gl-feedback-info-background-color); } table.gl-table .table-primary > td, table.gl-table .table-primary:hover > td { background-color: var(--gl-feedback-info-background-color); } table.gl-table caption{ padding-top: var(--gl-spacing-scale-2); } table.gl-table.b-table.b-table-stacked tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header table.modal-title.gl-table.b-table.b-table-stacked tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } table.gl-table.b-table.b-table-stacked tbody > tr::after{ display: block; } table.gl-table.b-table.b-table-stacked tbody > tr > td[data-label], table.gl-table.b-table.b-table-stacked tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } table.gl-table.b-table.b-table-stacked tbody > tr > td[data-label]::before, table.gl-table.b-table.b-table-stacked tbody > tr > th[data-label]::before{ text-align: left; } table.gl-table.b-table.b-table-stacked tbody > tr > td[data-label]:first-child, table.gl-table.b-table.b-table-stacked tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } table.gl-table.b-table.b-table-stacked tbody > tr > td[data-label]:not(:first-child), table.gl-table.b-table.b-table-stacked tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } table.gl-table.b-table.b-table-stacked tbody > tr div{ text-align: right; overflow-wrap: break-word; } @container (width < 576px) { :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after{ display: block; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label], :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]::before, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]::before{ text-align: left; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]:first-child, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]:not(:first-child), :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-sm tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr::after{ display: block; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label], :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]::before, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]::before{ text-align: left; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]:first-child, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > td[data-label]:not(:first-child), :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-sm tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @container (width < 768px) { :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr::after{ display: block; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label], :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]::before, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]::before{ text-align: left; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]:first-child, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]:not(:first-child), :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-md tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr::after{ display: block; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label], :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]::before, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]::before{ text-align: left; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]:first-child, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > td[data-label]:not(:first-child), :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-md tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @container (width < 992px) { :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after{ display: block; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label], :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]::before, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]::before{ text-align: left; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]:first-child, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]:not(:first-child), :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-lg tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @media (width < 992px) { :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr::after{ display: block; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label], :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]::before, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]::before{ text-align: left; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]:first-child, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > td[data-label]:not(:first-child), :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-lg tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @container (width < 1200px) { :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after{ display: block; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label], :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]::before, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]::before{ text-align: left; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]:first-child, :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]:not(:first-child), :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html.with-gl-container-queries) table.gl-table.b-table.b-table-stacked-xl tbody > tr div{ text-align: right; overflow-wrap: break-word; } } @media (width < 1200px) { :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after { content: ""; height: var(--gl-spacing-scale-6); width: 100%; } .modal-header .modal-title:where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after { margin-right: -1rem; padding-right: 1rem; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr::after{ display: block; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label], :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]{ border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]::before, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]::before{ text-align: left; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]:first-child, :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]:first-child{ border-top-width: 1px; border-top-style: solid; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > td[data-label]:not(:first-child), :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr > th[data-label]:not(:first-child){ border-top-width: 0px; } :where(html:not(.with-gl-container-queries)) table.gl-table.b-table.b-table-stacked-xl tbody > tr div{ text-align: right; overflow-wrap: break-word; } } table.gl-table.table-hover tbody tr:hover, table.gl-table.table-hover td.table-secondary:hover { background-color: var(--gl-table-row-background-color-hover); } table.gl-table thead th:hover { background-color: transparent !important; } table.gl-table thead th:hover [name=sort-icon] { display: flex !important; } .table.b-table > thead > tr > th, .table.b-table > tfoot > tr > th { background-image: none !important; } .table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left), .table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) { padding-right: 1rem; } /** * Toggle button * * @usage * ### Active and Inactive text should be provided as data attributes: * * ### Checked should have `is-checked` class * * ### Disabled should have `is-disabled` class * */ .gl-toggle-wrapper{ line-height: 1rem; font-weight: var(--gl-font-weight-normal); display: inline-flex; } .commit-content .committer.gl-toggle-wrapper { gap: 0.5ch; } .gl-description-label{ color: var(--gl-text-color-subtle); } .gl-help-label{ margin-top: var(--gl-spacing-scale-3); font-weight: var(--gl-font-weight-normal); color: var(--gl-text-color-subtle); } .gl-toggle-label-inline{ flex-direction: row; align-items: center; } .gl-toggle-label-inline .gl-toggle-label{ white-space: nowrap; margin-bottom: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-3); } .gl-toggle-label-inline .gl-help-label{ margin-top: var(--gl-spacing-scale-0); margin-left: var(--gl-spacing-scale-3); } .gl-toggle-label{ font-weight: var(--gl-font-weight-bold); color: var(--gl-text-color-strong); } .gl-toggle{ display: inline-flex; } .commit-content .committer.gl-toggle { gap: 0.5ch; } .gl-toggle{ align-items: center; justify-content: center; border-width: 0px; cursor: pointer; color: var(--gl-toggle-switch-icon-color-unchecked-default); background-color: var(--gl-toggle-switch-track-color-unchecked-default); position: relative; width: 2.25rem; height: 1.25rem; -webkit-user-select: none; user-select: none; box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-default); border-radius: .75rem; line-height: 1rem; transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion) { .gl-toggle { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } @media (forced-colors: active) { .gl-toggle { outline: 1px solid CanvasText !important; outline-offset: -1px; transition: none; } } .gl-toggle::selection, .gl-toggle::before::selection, .gl-toggle::after::selection{ background-color: transparent; } .gl-toggle:hover { color: var(--gl-toggle-switch-icon-color-unchecked-hover); background-color: var(--gl-toggle-switch-track-color-unchecked-hover); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-hover); } .gl-toggle:focus-visible { color: var(--gl-toggle-switch-icon-color-unchecked-focus); background-color: var(--gl-toggle-switch-track-color-unchecked-focus); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle:focus-visible { outline: 2px solid LinkText !important; } } .gl-toggle:active { color: var(--gl-toggle-switch-icon-color-unchecked-active); background-color: var(--gl-toggle-switch-track-color-unchecked-active); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-active), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle:active { outline: 2px solid LinkText !important; } } .gl-toggle:hover .toggle-icon::before, .gl-toggle:focus-visible .toggle-icon::before { transform: scale(0.875); } .gl-toggle .toggle-loading{ height: var(--gl-spacing-scale-5); } .gl-toggle .toggle-icon{ position: absolute; width: var(--gl-spacing-scale-5); height: var(--gl-spacing-scale-5); left: var(--gl-spacing-scale-1); top: var(--gl-spacing-scale-1); transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion) { .gl-toggle .toggle-icon { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } @media (forced-colors: active) { .gl-toggle .toggle-icon { transition: none; } } .gl-toggle .toggle-icon::before { content: ""; position: absolute; inset: var(--gl-spacing-scale-0); border-radius: var(--gl-border-radius-full); background-color: var(--gl-toggle-switch-background-color-unchecked-default); transform: scale(0.75); transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion) { .gl-toggle .toggle-icon::before { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } @media (forced-colors: active) { .gl-toggle .toggle-icon::before { background-color: CanvasText; transition: none; } } .gl-toggle .toggle-icon > svg{ position: absolute; width: var(--gl-spacing-scale-4); height: var(--gl-spacing-scale-4); top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } @media (forced-colors: active) { .gl-toggle .toggle-icon > svg { color: Canvas; display: block; } } .gl-toggle.is-checked { color: var(--gl-toggle-switch-icon-color-checked-default); background-color: var(--gl-toggle-switch-track-color-checked-default); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-default); } .gl-toggle.is-checked:hover { color: var(--gl-toggle-switch-icon-color-checked-hover); background-color: var(--gl-toggle-switch-track-color-checked-hover); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-hover); } .gl-toggle.is-checked:focus-visible { color: var(--gl-toggle-switch-icon-color-checked-focus); background-color: var(--gl-toggle-switch-track-color-checked-focus); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle.is-checked:focus-visible { outline: 2px solid LinkText !important; } } .gl-toggle.is-checked:active { color: var(--gl-toggle-switch-icon-color-checked-active); background-color: var(--gl-toggle-switch-track-color-checked-active); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-active), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle.is-checked:active { outline: 2px solid LinkText !important; } .gl-toggle.is-checked { background-color: CanvasText !important; } .gl-toggle.is-checked svg { color: CanvasText; } } .gl-toggle.is-checked .toggle-icon { transform: translateX(1rem); } .gl-toggle.is-checked .toggle-icon::before { background-color: var(--gl-toggle-switch-background-color-checked-default); transform: scale(1); } .gl-toggle.is-disabled{ cursor: not-allowed; background-color: var(--gl-toggle-switch-track-color-unchecked-disabled); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-disabled); } .gl-toggle.is-disabled .toggle-icon { color: var(--gl-toggle-switch-icon-color-disabled); } .gl-toggle.is-disabled .toggle-icon::before { background-color: var(--gl-toggle-switch-background-color-unchecked-disabled); } @media (forced-colors: active) { .gl-toggle.is-disabled .toggle-icon::before { background-color: GrayText; } } .gl-toggle.is-disabled:hover .toggle-icon::before, .gl-toggle.is-disabled:focus-visible .toggle-icon::before { transform: scale(0.75); } .gl-toggle.is-disabled:active, .gl-toggle.is-disabled:focus-visible, .gl-toggle.is-disabled:focus-visible:active { box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-unchecked-disabled), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle.is-disabled:active, .gl-toggle.is-disabled:focus-visible, .gl-toggle.is-disabled:focus-visible:active { outline: 2px solid LinkText !important; } } .gl-toggle.is-checked.is-disabled { background-color: var(--gl-toggle-switch-track-color-checked-disabled); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-disabled); } .gl-toggle.is-checked.is-disabled .toggle-icon::before { background-color: var(--gl-toggle-switch-background-color-checked-disabled); transform: scale(1); } .gl-toggle.is-checked.is-disabled:hover .toggle-icon::before, .gl-toggle.is-checked.is-disabled:focus-visible .toggle-icon::before { transform: scale(1); } .gl-toggle.is-checked.is-disabled:active, .gl-toggle.is-checked.is-disabled:focus-visible, .gl-toggle.is-checked.is-disabled:focus-visible:active { box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-checked-disabled), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle.is-checked.is-disabled:active, .gl-toggle.is-checked.is-disabled:focus-visible, .gl-toggle.is-checked.is-disabled:focus-visible:active { outline: 2px solid LinkText !important; } .gl-toggle.is-checked.is-disabled { background-color: GrayText !important; } } .gl-toggle.is-loading, .gl-toggle.is-checked.is-loading { background-color: var(--gl-toggle-switch-track-color-loading); box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-loading); } .gl-toggle.is-loading:active, .gl-toggle.is-loading:focus-visible, .gl-toggle.is-loading:focus-visible:active, .gl-toggle.is-checked.is-loading:active, .gl-toggle.is-checked.is-loading:focus-visible, .gl-toggle.is-checked.is-loading:focus-visible:active { box-shadow: inset 0 0 0 1px var(--gl-toggle-switch-track-border-color-loading), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color) !important; outline: none !important; } @media (forced-colors: active) { .gl-toggle.is-loading:active, .gl-toggle.is-loading:focus-visible, .gl-toggle.is-loading:focus-visible:active, .gl-toggle.is-checked.is-loading:active, .gl-toggle.is-checked.is-loading:focus-visible, .gl-toggle.is-checked.is-loading:focus-visible:active { outline: 2px solid LinkText !important; } } .gl-token { color: var(--gl-token-foreground-color); background-color: var(--gl-token-background-color); padding-left: var(--gl-spacing-scale-3); display: inline-flex; } .commit-content .committer.gl-token { gap: 0.5ch; } .gl-token{ flex-direction: column; justify-content: center; border-radius: var(--gl-token-border-radius); } .gl-token.gl-token-view-only{ padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-3); } .gl-token-search-type-variant { background-color: var(--gl-token-background-color); border-top-right-radius: var(--gl-border-radius-none); border-bottom-right-radius: var(--gl-border-radius-none); } .gl-token-search-value-variant{ border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); } .gl-token-content{ font-size: var(--gl-font-size-sm); line-height: 1rem; display: flex; align-items: center; color: inherit; } .gl-token-content > .gl-avatar:first-child, .gl-token-content > .gl-spinner-container:first-child{ margin-right: var(--gl-spacing-scale-2); } .gl-token-close{ margin-left: var(--gl-spacing-scale-2); color: inherit !important; background-color: transparent !important; } .gl-tooltip{ font-size: var(--gl-font-size-sm); padding: var(--gl-spacing-scale-2); } .gl-tooltip .tooltip-inner{ --tw-drop-shadow: drop-shadow(0 0 0.5px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 0.5px 1px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 1px 3px var(--gl-shadow-color-default, #05050629)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); line-height: 1rem; font-weight: var(--gl-font-weight-normal); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); border-radius: var(--gl-feedback-border-radius); background: var(--gl-feedback-strong-background-color); color: var(--gl-feedback-strong-text-color); --gl-text-color-subtle: var(--gl-tooltip-text-color-subtle); } .gl-tooltip .arrow{ height: var(--gl-spacing-scale-3); width: var(--gl-spacing-scale-2); } .gl-tooltip .arrow::before{ border-width: 4px; } .gl-tooltip.bs-tooltip-top .arrow, .gl-tooltip.bs-tooltip-auto[x-placement^=top] .arrow, .gl-tooltip.bs-tooltip-bottom .arrow, .gl-tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow{ width: var(--gl-spacing-scale-3); height: var(--gl-spacing-scale-2); } .gl-tooltip.bs-tooltip-top .arrow::before, .gl-tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before{ border-bottom-width: 0px; border-top-color: var(--gl-feedback-strong-background-color); } .gl-tooltip.bs-tooltip-right .arrow::before, .gl-tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before{ border-left-width: 0px; border-right-color: var(--gl-feedback-strong-background-color); } .gl-tooltip.bs-tooltip-bottom .arrow::before, .gl-tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before{ border-top-width: 0px; border-bottom-color: var(--gl-feedback-strong-background-color); } .gl-tooltip.bs-tooltip-left .arrow::before, .gl-tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before{ border-right-width: 0px; border-left-color: var(--gl-feedback-strong-background-color); } .gl-heatmap { position: relative; } .gl-heatmap .gl-legend-inline-series{ pointer-events: none; } .gl-legend { position: relative; } .gl-legend-inline-series, .gl-legend-tabular-row { font: inherit; border-width: 0px; background-color: transparent; padding: var(--gl-spacing-scale-0); text-align: left; } .gl-chart-h-auto .gl-legend-inline { max-height: 6.75rem; overflow: auto; } .gl-legend-tabular.gl-legend-b-fade::after, .gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade::after { background-image: linear-gradient(to bottom, rgba(40, 39, 45, 0), var(--gl-background-color-default)); bottom: 0; content: ""; display: block; height: var(--gl-spacing-scale-4); position: absolute; width: 100%; } .modal-header .modal-title.gl-legend-tabular.gl-legend-b-fade::after, .modal-header .modal-title .gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade::after { margin-right: -1rem; padding-right: 1rem; } .gl-legend-inline{ display: flex; flex-wrap: wrap; flex-shrink: 0; } .gl-legend-inline .gl-legend-inline-series{ display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; padding-right: var(--gl-spacing-scale-5); border-radius: var(--gl-border-radius-default); } .gl-legend-inline .gl-legend-inline-series:hover{ cursor: pointer; text-decoration-line: underline; } .gl-legend-inline .gl-legend-inline-series:focus-visible { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-legend-inline .gl-legend-inline-series:focus-visible { outline: 2px solid LinkText; } } .gl-legend-inline .gl-legend-inline-series .gl-legend-inline-series-label{ margin-right: var(--gl-spacing-scale-3); } .gl-legend-tabular .gl-legend-tabular-header{ display: flex; justify-content: flex-end; } .gl-legend-tabular .gl-legend-tabular-header-cell, .gl-legend-tabular .gl-legend-tabular-details-cell{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; width: 12.5%; } .gl-legend-tabular .gl-legend-tabular-header-cell{ font-weight: var(--gl-font-weight-bold); line-height: var(--gl-line-height-24); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); } .gl-legend-tabular .gl-legend-tabular-body { height: 5.25rem; overflow-y: auto; } .gl-legend-tabular .gl-legend-tabular-row{ display: flex; width: 100%; } .modal-header .modal-title.gl-legend-tabular .gl-legend-tabular-row { margin-right: -1rem; padding-right: 1rem; } .gl-legend-tabular .gl-legend-tabular-row:nth-child(odd){ background-color: var(--gl-background-color-strong); } .gl-legend-tabular .gl-legend-tabular-row:focus-visible { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-legend-tabular .gl-legend-tabular-row:focus-visible { outline: 2px solid LinkText; } } .gl-legend-tabular .gl-legend-tabular-title-cell, .gl-legend-tabular .gl-legend-tabular-details-cell{ line-height: var(--gl-line-height-24); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); } .gl-legend-tabular .gl-legend-tabular-title-cell{ overflow: hidden; width: 50%; } .gl-series-label-container{ display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-series-label-container{ margin-top: var(--gl-spacing-scale-0); } .gl-series-label-container{ overflow: hidden; overflow-wrap: break-word; } .gl-series-label-color{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-3); } .gl-series-label-color svg{ display: block; } .gl-series-label-text{ overflow: hidden; overflow-wrap: break-word; } .gl-single-stat{ line-height: 1; } .gl-single-stat:hover[tabindex="0"]{ background-color: var(--gl-background-color-strong); border-radius: var(--gl-border-radius-default); } .gl-single-stat .gl-single-stat-number { font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); } .gl-single-stat .gl-single-stat-content .gl-badge { position: relative; top: -0.125em; } .gl-chart-tooltip { position: absolute; } .gl-chart-tooltip .popover{ min-width: var(--gl-spacing-scale-0); width: max-content; max-width: 32rem; } .gl-charts-tooltip-default-format-series{ display: flex; justify-content: space-between; } .gl-charts-tooltip-default-format-series-label, .gl-charts-tooltip-default-format-series-value{ font-size: var(--gl-font-size-sm); } .gl-charts-tooltip-default-format-series-label{ line-height: 1rem; margin-right: var(--gl-spacing-scale-7); } .gl-charts-tooltip-default-format-series-value{ font-weight: var(--gl-font-weight-bold); } /** * gridstack SASS styles 12.6.0 * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license */ .grid-stack { position: relative; } .grid-stack-rtl { direction: ltr; } .grid-stack-rtl > .grid-stack-item { direction: rtl; } .grid-stack-placeholder > .placeholder-content { background-color: rgba(0, 0, 0, 0.1); margin: 0; position: absolute; width: auto; z-index: 0 !important; } .grid-stack > .grid-stack-item { position: absolute; padding: 0; top: 0; width: var(--gs-column-width); height: var(--gs-cell-height); } .grid-stack > .grid-stack-item > .grid-stack-item-content { margin: 0; position: absolute; width: auto; overflow-x: hidden; overflow-y: auto; } .grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content { overflow-y: hidden; } .grid-stack:not(.grid-stack-rtl) > .grid-stack-item { left: 0; } .grid-stack.grid-stack-rtl > .grid-stack-item { right: 0; } .grid-stack > .grid-stack-item > .grid-stack-item-content, .grid-stack > .grid-stack-placeholder > .placeholder-content { top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); } .grid-stack-item > .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; touch-action: none; } .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle { display: none; } .grid-stack-item > .ui-resizable-ne, .grid-stack-item > .ui-resizable-nw, .grid-stack-item > .ui-resizable-se, .grid-stack-item > .ui-resizable-sw { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; } .grid-stack-item > .ui-resizable-ne { transform: rotate(45deg); } .grid-stack-item > .ui-resizable-sw { transform: rotate(45deg); } .grid-stack-item > .ui-resizable-nw { transform: rotate(-45deg); } .grid-stack-item > .ui-resizable-se { transform: rotate(-45deg); } .grid-stack-item > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); } .grid-stack-item > .ui-resizable-n { cursor: n-resize; height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; } .grid-stack-item > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); } .grid-stack-item > .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; right: var(--gs-item-margin-right); } .grid-stack-item > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); right: var(--gs-item-margin-right); } .grid-stack-item > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; } .grid-stack-item > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); } .grid-stack-item > .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); } .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle { display: none !important; } .grid-stack-item.ui-draggable-dragging { will-change: left, right, top; } .grid-stack-item.ui-resizable-resizing { will-change: width, height; } .ui-draggable-dragging, .ui-resizable-resizing { z-index: 10000; } .ui-draggable-dragging > .grid-stack-item-content, .ui-resizable-resizing > .grid-stack-item-content { box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); opacity: 0.8; } .grid-stack-animate, .grid-stack-animate .grid-stack-item { transition: left 0.3s, right 0.3s, top 0.3s, height 0.3s, width 0.3s; } .grid-stack-animate .grid-stack-item.ui-draggable-dragging, .grid-stack-animate .grid-stack-item.ui-resizable-resizing, .grid-stack-animate .grid-stack-item.grid-stack-placeholder { transition: left 0s, right 0s, top 0s, height 0s, width 0s; } .grid-stack > .grid-stack-item[gs-y="0"] { top: 0px; } .grid-stack:not(.grid-stack-rtl) > .grid-stack-item[gs-x="0"] { left: 0%; } .grid-stack.grid-stack-rtl > .grid-stack-item[gs-x="0"] { right: 0%; } .gl-truncate-component { display: inline-flex; max-width: 100%; } .gl-truncate-start, .gl-truncate-end { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow-x: clip; overflow-y: visible; } .gl-truncate-start { direction: rtl; text-align: left; text-overflow: ""; } .gl-truncate-end { text-overflow: ellipsis; } /** Note: although vendor-prefixes are used here, these properties are supported by all browsers. See https://caniuse.com/css-line-clamp **/ .gl-truncate-text { display: -webkit-box; -webkit-line-clamp: var(--mobile-lines); -webkit-box-orient: vertical; } @container (width >= 576px) { :where(html.with-gl-container-queries) .gl-truncate-text { -webkit-line-clamp: var(--lines); } } @media (width >= 576px) { :where(html:not(.with-gl-container-queries)) .gl-truncate-text { -webkit-line-clamp: var(--lines); } } .gl-new-dropdown{ display: inline-flex; } .commit-content .committer.gl-new-dropdown { gap: 0.5ch; } .gl-new-dropdown{ vertical-align: middle; } .gl-new-dropdown .gl-new-dropdown-custom-toggle > *:first-child:not(:disabled){ cursor: pointer; } .gl-new-dropdown .gl-new-dropdown-custom-toggle > *:first-child:focus-visible{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-new-dropdown .gl-new-dropdown-toggle.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon){ padding-right: var(--gl-spacing-scale-3); } .gl-new-dropdown .gl-new-dropdown-toggle.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon).btn-sm, .gl-new-dropdown .btn-group-sm > .gl-new-dropdown-toggle.gl-button.btn:not(.gl-new-dropdown-toggle-no-caret, .btn-icon){ padding-right: var(--gl-spacing-scale-2); } .gl-new-dropdown .gl-new-dropdown-toggle.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron{ display: none; } .gl-new-dropdown .gl-new-dropdown-toggle .gl-button-text{ display: inline-flex; } .commit-content .committer.gl-new-dropdown .gl-new-dropdown-toggle .gl-button-text { gap: 0.5ch; } .gl-new-dropdown .gl-new-dropdown-toggle .gl-button-text:has(.gl-sr-only) { width: auto; } .gl-new-dropdown .gl-new-dropdown-toggle.is-invalid{ border-color: var(--gl-control-border-color-error); } .gl-new-dropdown .gl-new-dropdown-toggle.is-invalid:focus{ border-color: var(--gl-control-border-color-error); } .gl-new-dropdown .gl-new-dropdown-button-text{ margin-right: auto; overflow: hidden; text-overflow: ellipsis; } .gl-new-dropdown.btn-sm .gl-icon, .btn-group-sm > .gl-new-dropdown.btn .gl-icon{ margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); } .gl-new-dropdown.btn-sm .gl-icon.gl-new-dropdown-chevron, .btn-group-sm > .gl-new-dropdown.btn .gl-icon.gl-new-dropdown-chevron{ height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); } .gl-new-dropdown .gl-button:not(.gl-new-dropdown-caret-only) .gl-button-icon.gl-new-dropdown-chevron{ margin-left: var(--gl-spacing-scale-2); margin-right: var(--gl-spacing-scale-0); } .gl-new-dropdown .gl-new-dropdown-icon-only.gl-button:not(.gl-new-dropdown-toggle-no-caret){ padding-right: var(--gl-spacing-scale-2); padding-left: var(--gl-spacing-scale-3); } .gl-new-dropdown .gl-new-dropdown-icon-only.gl-button:not(.gl-new-dropdown-toggle-no-caret).btn-sm, .gl-new-dropdown .btn-group-sm > .gl-new-dropdown-icon-only.gl-button.btn:not(.gl-new-dropdown-toggle-no-caret){ padding-right: var(--gl-spacing-scale-0); } .gl-new-dropdown .gl-new-dropdown-icon-only .gl-button-icon.gl-button-icon{ margin-right: var(--gl-spacing-scale-0); } .gl-new-dropdown .gl-new-dropdown-icon-only .gl-button-icon.gl-button-icon.gl-button-loading-indicator{ margin-right: var(--gl-spacing-scale-2); } .gl-new-dropdown .gl-new-dropdown-icon-only.btn-sm .gl-new-dropdown-chevron, .gl-new-dropdown .btn-group-sm > .gl-new-dropdown-icon-only.btn .gl-new-dropdown-chevron{ margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); } .gl-new-dropdown .gl-new-dropdown-caret-only{ padding-left: var(--gl-spacing-scale-2); } .gl-new-dropdown .gl-new-dropdown-caret-only.btn-sm, .gl-new-dropdown .btn-group-sm > .gl-new-dropdown-caret-only.btn{ padding-left: var(--gl-spacing-scale-0); } .gl-new-dropdown-container .gl-new-dropdown-arrow { width: 8px; height: 8px; background: var(--gl-dropdown-background-color); border-bottom: 1px solid var(--gl-dropdown-background-color); border-right: 1px solid var(--gl-dropdown-background-color); position: absolute; } .gl-new-dropdown-container .gl-new-dropdown-panel{ display: none; background-color: var(--gl-dropdown-background-color); border-radius: var(--gl-dropdown-border-radius); --tw-drop-shadow: drop-shadow(0 0 0.5px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 0.5px 1px var(--gl-shadow-color-default, #05050629)) drop-shadow(0 1px 3px var(--gl-shadow-color-default, #05050629)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); top: 0; left: 0; z-index: 1000; } .gl-new-dropdown-container .gl-new-dropdown-panel-fluid-width { min-width: 15.5rem; max-width: 28.5rem; } .gl-new-dropdown-container .gl-new-dropdown-inner{ display: flex; flex-direction: column; max-height: 19.5rem; } .gl-new-dropdown-container .gl-new-dropdown-contents { position: relative; flex-grow: 1; overflow-y: auto; padding-left: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); list-style-type: none; } .gl-new-dropdown-container .gl-new-dropdown-contents:focus-visible{ box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } .gl-new-dropdown-container .gl-new-dropdown-contents ul{ list-style-type: none; } .gl-new-dropdown-container .gl-new-dropdown-contents-with-scrim-overlay { padding: 0; } .gl-new-dropdown-container .gl-new-dropdown-contents .top-scrim-wrapper, .gl-new-dropdown-container .gl-new-dropdown-contents .bottom-scrim-wrapper { height: 0.25rem; opacity: 0; position: sticky; z-index: 1; display: block; overflow: visible; left: 1px; right: 1px; pointer-events: none; transition: opacity 0.1s; } .gl-new-dropdown-container .gl-new-dropdown-contents .top-scrim-wrapper { top: 0; } .gl-new-dropdown-container .gl-new-dropdown-contents .top-scrim-wrapper .top-scrim { left: 0; right: 0; } .gl-new-dropdown-container .gl-new-dropdown-contents .top-scrim-wrapper .top-scrim.top-scrim-light { height: 2.25rem; border-radius: 0.375rem 0.375rem 0 0; background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0)); } .gl-new-dropdown-container .gl-new-dropdown-contents .top-scrim-wrapper .top-scrim.top-scrim-dark { height: 0.25rem; background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%); } .gl-new-dropdown-container .gl-new-dropdown-contents .bottom-scrim-wrapper { bottom: 0; height: 0.25rem; } .gl-new-dropdown-container .gl-new-dropdown-contents .bottom-scrim-wrapper .bottom-scrim { height: 0; position: relative; top: calc(-2.25rem + 0.25rem); border-radius: 0 0 0.375rem 0.375rem; background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color)); } .gl-new-dropdown-container .gl-new-dropdown-contents.top-scrim-visible .top-scrim-wrapper, .gl-new-dropdown-container .gl-new-dropdown-contents.bottom-scrim-visible .bottom-scrim-wrapper { opacity: 1; } .gl-new-dropdown-container .gl-new-dropdown-contents.bottom-scrim-visible .bottom-scrim { height: 2.25rem; } .btn-group .gl-new-dropdown:not(:last-child) .gl-new-dropdown-toggle{ border-top-right-radius: var(--gl-border-radius-none); border-bottom-right-radius: var(--gl-border-radius-none); } .btn-group .gl-new-dropdown:not(:first-child) .gl-new-dropdown-toggle{ border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); } .btn-group .gl-new-dropdown:hover .gl-new-dropdown-toggle{ z-index: var(--gl-zindex-1); } .btn-group .gl-new-dropdown .gl-new-dropdown-toggle:focus-visible, .btn-group .gl-new-dropdown .gl-new-dropdown-toggle:active{ z-index: var(--gl-zindex-1); } .gl-new-dropdown-item{ cursor: pointer; padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); margin-top: var(--gl-spacing-scale-1); margin-bottom: var(--gl-spacing-scale-1); /* when there is a scrim `li` items inside the list, the first and last real items do not match the selector `:first-child` and `:last-child`, that's why we have to target them with a different selector */ } .gl-new-dropdown-item:first-child, .gl-new-dropdown-contents-with-scrim-overlay > .gl-new-dropdown-item:nth-child(3):not(:last-child){ margin-top: var(--gl-spacing-scale-0); } .gl-new-dropdown-item:last-child, .gl-new-dropdown-contents-with-scrim-overlay > .gl-new-dropdown-item:nth-last-child(3):not(:first-child){ margin-bottom: var(--gl-spacing-scale-0); } .gl-new-dropdown-item:not(.disabled):hover .gl-new-dropdown-item-content { color: var(--gl-dropdown-option-text-color-hover); background-color: var(--gl-dropdown-option-background-color-unselected-hover); } .gl-new-dropdown-item:not(.disabled):focus-visible .gl-new-dropdown-item-content { color: var(--gl-dropdown-option-text-color-focus); background-color: var(--gl-dropdown-option-background-color-unselected-focus); } .gl-new-dropdown-item:not(.disabled):active .gl-new-dropdown-item-content, .gl-new-dropdown-item:not(.disabled):focus-visible:active .gl-new-dropdown-item-content { color: var(--gl-dropdown-option-text-color-active); background-color: var(--gl-dropdown-option-background-color-unselected-active); } .gl-new-dropdown-item[aria-selected=true] .gl-new-dropdown-item-content { background-color: var(--gl-dropdown-option-background-color-selected-default); } .gl-new-dropdown-item[aria-selected=true].disabled .gl-new-dropdown-item-content { background-color: var(--gl-background-color-disabled); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):hover .gl-new-dropdown-item-content { background-color: var(--gl-dropdown-option-background-color-selected-hover); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):hover .gl-new-dropdown-item-check-icon { color: var(--gl-dropdown-option-indicator-color-selected-hover); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):focus-visible .gl-new-dropdown-item-content { background-color: var(--gl-dropdown-option-background-color-selected-focus); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):focus-visible .gl-new-dropdown-item-check-icon { color: var(--gl-dropdown-option-indicator-color-selected-focus); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):active .gl-new-dropdown-item-content, .gl-new-dropdown-item[aria-selected=true]:not(.disabled):focus-visible:active .gl-new-dropdown-item-content { background-color: var(--gl-dropdown-option-background-color-selected-active); } .gl-new-dropdown-item[aria-selected=true]:not(.disabled):active .gl-new-dropdown-item-check-icon, .gl-new-dropdown-item[aria-selected=true]:not(.disabled):focus-visible:active .gl-new-dropdown-item-check-icon { color: var(--gl-dropdown-option-indicator-color-selected-active); } .gl-new-dropdown-item:focus-visible { outline: none; } .gl-new-dropdown-item:not(.disabled):active .gl-new-dropdown-item-content, .gl-new-dropdown-item:not(.disabled):focus-visible .gl-new-dropdown-item-content, .gl-new-dropdown-item:not(.disabled):focus-visible:active .gl-new-dropdown-item-content { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-new-dropdown-item:not(.disabled):active .gl-new-dropdown-item-content, .gl-new-dropdown-item:not(.disabled):focus-visible .gl-new-dropdown-item-content, .gl-new-dropdown-item:not(.disabled):focus-visible:active .gl-new-dropdown-item-content { outline: 2px solid LinkText; } } .gl-new-dropdown-item:focus-visible .gl-new-dropdown-item-content { z-index: 1; } .gl-new-dropdown-item.gl-new-dropdown-item-highlighted .gl-new-dropdown-item-content { color: var(--gl-dropdown-option-text-color-focus); background-color: var(--gl-dropdown-option-background-color-unselected-focus); box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-new-dropdown-item.gl-new-dropdown-item-highlighted .gl-new-dropdown-item-content { outline: 2px solid LinkText; } } .gl-new-dropdown-item.disabled { cursor: not-allowed; -webkit-user-select: none; user-select: none; } .gl-new-dropdown-item.disabled .gl-new-dropdown-item-content { color: var(--gl-text-color-disabled); pointer-events: none; } .gl-new-dropdown-item.disabled .gl-new-dropdown-item-content .gl-new-dropdown-item-check-icon { color: var(--gl-icon-color-disabled); } .gl-new-dropdown-item .gl-new-dropdown-item-content { transition: background-color 0.1s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); border-radius: var(--gl-border-radius-default); border-width: 0px; width: 100%; } .modal-header .modal-title.gl-new-dropdown-item .gl-new-dropdown-item-content { margin-right: -1rem; padding-right: 1rem; } .gl-new-dropdown-item .gl-new-dropdown-item-content { background-color: var(--gl-dropdown-option-background-color-unselected-default); align-items: center; display: flex; font-size: var(--gl-font-size-base); } .recents-wrapper .gl-new-dropdown-item .gl-new-dropdown-item-content{ margin-top: var(--gl-spacing-scale-0); } .gl-new-dropdown-item .gl-new-dropdown-item-content{ font-weight: var(--gl-font-weight-normal); line-height: 1rem; padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); position: relative; text-decoration-line: none; color: var(--gl-dropdown-option-text-color-default); text-align: left; white-space: normal; } @media (prefers-reduced-motion) { .gl-new-dropdown-item .gl-new-dropdown-item-content { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .gl-new-dropdown-item .gl-new-dropdown-item-content .gl-new-dropdown-item-check-icon{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-3); color: var(--gl-dropdown-option-indicator-color-selected-default); } .gl-new-dropdown-item .gl-new-dropdown-item-content .gl-new-dropdown-item-icon{ flex-shrink: 0; margin-right: var(--gl-spacing-scale-2); display: inline-block; height: var(--gl-spacing-scale-5); width: var(--gl-spacing-scale-5); } .gl-new-dropdown-item .gl-new-dropdown-item-content .gl-new-dropdown-item-icon .gl-icon { vertical-align: -3px; } .gl-new-dropdown-item .gl-new-dropdown-item-content .gl-new-dropdown-item-text-wrapper{ min-width: var(--gl-spacing-scale-0); flex-grow: 1; padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .gl-new-dropdown-item.gl-new-dropdown-item-danger .gl-new-dropdown-item-content { color: var(--gl-action-danger-foreground-color-default); background-color: var(--gl-action-danger-background-color-default); } .gl-new-dropdown-item.gl-new-dropdown-item-danger:hover .gl-new-dropdown-item-content:not(:disabled):not(.disabled) { color: var(--gl-action-danger-foreground-color-hover); background-color: var(--gl-action-danger-background-color-hover); } .gl-new-dropdown-item.gl-new-dropdown-item-danger:focus-visible .gl-new-dropdown-item-content { color: var(--gl-action-danger-foreground-color-focus); background-color: var(--gl-action-danger-background-color-focus); } .gl-new-dropdown-item.gl-new-dropdown-item-danger:active .gl-new-dropdown-item-content, .gl-new-dropdown-item.gl-new-dropdown-item-danger:focus-visible:active .gl-new-dropdown-item-content { color: var(--gl-action-danger-foreground-color-active); background-color: var(--gl-action-danger-background-color-active); } .gl-listbox-search { position: relative; } .gl-listbox-search .gl-listbox-search-input{ width: 100%; } .modal-header .modal-title.gl-listbox-search .gl-listbox-search-input { margin-right: -1rem; padding-right: 1rem; } .gl-listbox-search .gl-listbox-search-input{ line-height: 1rem; height: auto; border-style: none; border-radius: var(--gl-border-radius-none); padding-left: calc(2rem + 0.25rem); padding-right: calc(1.5rem + 0.25rem); padding-top: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); font-size: var(--gl-font-size-base); } .recents-wrapper .gl-listbox-search .gl-listbox-search-input{ margin-top: var(--gl-spacing-scale-0); } .gl-listbox-search .gl-listbox-search-input{ color: var(--gl-text-color-default); background-color: var(--gl-dropdown-search-background-color); } .gl-listbox-search .gl-listbox-search-input:focus-visible { box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } @media (forced-colors: active) { .gl-listbox-search .gl-listbox-search-input:focus-visible { outline: 2px solid LinkText; } } .gl-listbox-search .gl-listbox-search-input::placeholder { color: var(--gl-control-placeholder-color); } .gl-listbox-search .gl-listbox-search-input::-webkit-search-cancel-button{ display: none; } .gl-listbox-search.gl-listbox-topmost .gl-listbox-search-input { border-top-left-radius: calc(0.5rem - 1px); border-top-right-radius: calc(0.5rem - 1px); } .gl-listbox-search .gl-listbox-search-icon { position: absolute; top: calc(50% - 12px / 2); left: 0.75rem; color: var(--gl-icon-color-subtle); } .gl-listbox-search .gl-listbox-search-clear-button { position: absolute; top: calc(50% - 24px / 2); right: 0.5rem; } .gl-empty-state-content { max-width: 65ch; } :root.ui-neutral, .ui-neutral-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #fbfafd; --gl-color-neutral-50: #ececef; --gl-color-neutral-100: #dcdcde; --gl-color-neutral-200: #bfbfc3; --gl-color-neutral-300: #a4a3a8; --gl-color-neutral-400: #89888d; --gl-color-neutral-500: #737278; --gl-color-neutral-600: #626168; --gl-color-neutral-700: #4c4b51; --gl-color-neutral-800: #3a383f; --gl-color-neutral-900: #28272d; --gl-color-neutral-950: #18171d; --gl-color-neutral-1000: #050506; } :root.ui-indigo, .ui-indigo-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f9f8fa; --gl-color-neutral-50: #efebf2; --gl-color-neutral-100: #e1d9e6; --gl-color-neutral-200: #c2bdc7; --gl-color-neutral-300: #a5a2a8; --gl-color-neutral-400: #89888b; --gl-color-neutral-500: #737374; --gl-color-neutral-600: #646067; --gl-color-neutral-700: #504955; --gl-color-neutral-800: #3f3546; --gl-color-neutral-900: #2e2434; --gl-color-neutral-950: #1d1424; --gl-color-neutral-1000: #120a18; } :root.ui-blue, .ui-blue-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f8f8fa; --gl-color-neutral-50: #e9ebf0; --gl-color-neutral-100: #d7dce5; --gl-color-neutral-200: #bcbfc6; --gl-color-neutral-300: #a1a3a7; --gl-color-neutral-400: #88888a; --gl-color-neutral-500: #727273; --gl-color-neutral-600: #5f6266; --gl-color-neutral-700: #474c54; --gl-color-neutral-800: #333945; --gl-color-neutral-900: #222733; --gl-color-neutral-950: #121722; --gl-color-neutral-1000: #090d17; } :root.ui-green, .ui-green-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f7f9f8; --gl-color-neutral-50: #e6edeb; --gl-color-neutral-100: #d4dfdb; --gl-color-neutral-200: #b9c1bf; --gl-color-neutral-300: #a0a4a3; --gl-color-neutral-400: #878988; --gl-color-neutral-500: #717372; --gl-color-neutral-600: #5e6361; --gl-color-neutral-700: #444e4a; --gl-color-neutral-800: #313b38; --gl-color-neutral-900: #1f2a26; --gl-color-neutral-950: #101916; --gl-color-neutral-1000: #060f0c; } :root.ui-red, .ui-red-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #fbf7f9; --gl-color-neutral-50: #f4eaee; --gl-color-neutral-100: #e9d7de; --gl-color-neutral-200: #cabbc1; --gl-color-neutral-300: #aaa1a4; --gl-color-neutral-400: #8b8789; --gl-color-neutral-500: #747273; --gl-color-neutral-600: #656062; --gl-color-neutral-700: #53494c; --gl-color-neutral-800: #423539; --gl-color-neutral-900: #312428; --gl-color-neutral-950: #201418; --gl-color-neutral-1000: #150a0e; } :root.ui-gray, .ui-gray-scope { --gl-color-neutral-0: #fff; --gl-color-neutral-10: #f8f8f8; --gl-color-neutral-50: #ececec; --gl-color-neutral-100: #dcdcdc; --gl-color-neutral-200: #bfbfbf; --gl-color-neutral-300: #a3a3a3; --gl-color-neutral-400: #898889; --gl-color-neutral-500: #727272; --gl-color-neutral-600: #616161; --gl-color-neutral-700: #4b4b4b; --gl-color-neutral-800: #383839; --gl-color-neutral-900: #272727; --gl-color-neutral-950: #171717; --gl-color-neutral-1000: #0d0d0d; } :root.ui-indigo, .ui-indigo-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-purple-500); --gl-nav-item-foreground-color-default: var(--gl-color-purple-800); --gl-nav-item-foreground-color-hover: var(--gl-color-purple-950); } :root.ui-indigo.gl-dark, .ui-indigo-scope.gl-dark-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-purple-300); --gl-nav-item-foreground-color-default: var(--gl-color-purple-200); --gl-nav-item-foreground-color-hover: var(--gl-color-purple-50); } :root.ui-blue, .ui-blue-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-blue-500); --gl-nav-item-foreground-color-default: var(--gl-color-blue-800); --gl-nav-item-foreground-color-hover: var(--gl-color-blue-950); } :root.ui-blue.gl-dark, .ui-blue-scope.gl-dark-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-blue-300); --gl-nav-item-foreground-color-default: var(--gl-color-blue-200); --gl-nav-item-foreground-color-hover: var(--gl-color-blue-50); } :root.ui-green, .ui-green-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-green-500); --gl-nav-item-foreground-color-default: var(--gl-color-green-800); --gl-nav-item-foreground-color-hover: var(--gl-color-green-950); } :root.ui-green.gl-dark, .ui-green-scope.gl-dark-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-green-300); --gl-nav-item-foreground-color-default: var(--gl-color-green-200); --gl-nav-item-foreground-color-hover: var(--gl-color-green-50); } :root.ui-red, .ui-red-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-red-500); --gl-nav-item-foreground-color-default: var(--gl-color-red-800); --gl-nav-item-foreground-color-hover: var(--gl-color-red-950); } :root.ui-red.gl-dark, .ui-red-scope.gl-dark-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-red-300); --gl-nav-item-foreground-color-default: var(--gl-color-red-200); --gl-nav-item-foreground-color-hover: var(--gl-color-red-50); } :root.ui-gray, .ui-gray-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-neutral-500); --gl-nav-item-foreground-color-default: var(--gl-color-neutral-800); --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-950); } :root.ui-gray.gl-dark, .ui-gray-scope.gl-dark-scope { --gl-nav-item-selected-indicator-color: var(--gl-color-neutral-300); --gl-nav-item-foreground-color-default: var(--gl-color-neutral-200); --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-50); } /* * SASS preserves units in arithmetic operations. For example: * 12em * 0 = 0em. This function return the unit of a numeric value. * * For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ */ /* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */ /** * Declares a property with a fluid value that decreases or * rises depending on the viewport’s size. The property type * should be numeric. * * Values are expected in rem units. * Fluid range: between 48rem (768px) – 75rem (1200px). * * @param $property Property name, i.e. line-height, font-size, width, height, etc. * @param $min Property value lower bound. * @param $max Property value upper bound. */ /** * Helper function for :focus * * @param $size is deprecated and should not be used anymore */ /** * Helper function for @media of at least the minimum * breakpoint width. * * @param $name Breakpoint name, such as `sm` or `md`. */ /** * Helper function for @media of at most the maximum * breakpoint width. * * Note: Before using, consider using a mobile-first * approach, and define @media for larger breakpoints * using `gl-media-breakpoint-up` while using this rule as * the starting point instead. * * @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid */ /** * Helper function to resolve font-size value from $gl-font-sizes and * $gl-font-sizes-fixed maps. * * @param $size Number font-size scale * @param $fixed Boolean toggle default and fixed font size scales */ .resizable-content{ height: 100%; width: 100%; } .modal-header .modal-title.resizable-content { margin-right: -1rem; padding-right: 1rem; } .resizable-content { background: var(--gl-background-color-default); border-radius: 0.5rem; overflow-y: auto; --tw-shadow: var(--gl-shadow-lg); --tw-shadow-colored: var(--gl-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); font-size: var(--gl-font-size-base); } .recents-wrapper .resizable-content{ margin-top: var(--gl-spacing-scale-0); } .resizable-content{ line-height: 1rem; display: flex; flex-direction: column; } .resizable-component .resizable-t, .resizable-component .resizable-l { background-color: transparent; border-radius: 3px; } @media (prefers-reduced-motion) { .resizable-component .resizable-t, .resizable-component .resizable-l { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .resizable-component .resizable-t, .resizable-component .resizable-l { transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .resizable-component .resizable-t:hover, .resizable-component .resizable-l:hover { background-color: var(--gl-color-blue-200); } .resizable-component .resizable-t { width: 95% !important; transform: translateX(-50%); left: 50% !important; height: 4px !important; top: 2px !important; } .resizable-component .resizable-l { height: 95% !important; transform: translateY(-50%); top: 50% !important; width: 4px !important; left: 2px !important; } .resizable-component .duo-chat{ z-index: var(--gl-zindex-0); } .resizable-component .resizable-l, .resizable-component .resizable-lt, .resizable-component .resizable-t{ z-index: var(--gl-zindex-1); } .duo-chat { z-index: 999; font-family: var(--gl-font-family-regular); } .duo-chat .message-enter-active, .duo-chat .message-leave-active { transition: all 0.5s ease; } .duo-chat .message-enter, .duo-chat .message-leave-to{ opacity: var(--gl-opacity-0); transform: translateY(10px); } .duo-chat .duo-chat-loader.message-leave, .duo-chat .duo-chat-loader.message-leave-to { transition: none; } .duo-chat .duo-agent-mode-switcher > *, .duo-chat .duo-model-switcher > * { width: 100%; } .duo-chat-drawer { right: 0; transition-property: all; transition-timing-function: ease; transition-duration: 200ms; position: fixed; height: 100%; width: 100%; } .modal-header .modal-title.duo-chat-drawer { margin-right: -1rem; padding-right: 1rem; } .duo-chat-drawer{ overflow-y: auto; --tw-shadow: var(--gl-shadow-lg); --tw-shadow-colored: var(--gl-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); font-size: var(--gl-font-size-base); } .recents-wrapper .duo-chat-drawer{ margin-top: var(--gl-spacing-scale-0); } .duo-chat-drawer{ line-height: 1rem; display: flex; flex-direction: column; } .duo-chat-drawer-footer{ padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); } .duo-chat-drawer-footer::before { background: linear-gradient(to bottom, transparent, var(--gl-background-color-default)); top: 0; --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); content: ""; left: 0; position: absolute; pointer-events: none; width: 100%; } .modal-header .modal-title.duo-chat-drawer-footer::before { margin-right: -1rem; padding-right: 1rem; } .duo-chat-drawer-footer::before{ height: var(--gl-spacing-scale-4); } .duo-chat-history { scroll-behavior: smooth; /* Browsers a are pretty good at keeping the focus on an element while the parent element grows in size. With this we mark all child elements of the chat history as "non" anchors. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor */ } .duo-chat-history * { overflow-anchor: none; } .duo-chat-history { /* Right at the bottom of the chat history we add a scroll-anchor element. This scroll-anchor element is the only "possible" anchor. The beauty of it: It only will be used as an anchor _if_ it is currently inside the view port. So if the user manually scrolls up while a chunked message is coming in, it won't stick to the bottom while the message still loads. */ } .duo-chat-history .scroll-anchor { overflow-anchor: auto; height: 1px; margin-top: -1px; } .history-item{ padding-right: var(--gl-spacing-scale-2); margin-left: calc(var(--gl-spacing-scale-3) * -1); margin-right: calc(var(--gl-spacing-scale-3) * -1); border-radius: var(--gl-border-radius-lg); display: flex; gap: var(--gl-spacing-scale-3); align-items: center; background: var(--gl-button-default-tertiary-background-color-default); transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .history-item:hover, .history-item:focus, .history-item:focus-within { background: var(--gl-button-default-tertiary-background-color-hover); } .history-item:hover .history-remove-button, .history-item:focus .history-remove-button, .history-item:focus-within .history-remove-button { opacity: 1; } .history-item .history-remove-button { opacity: 0; transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .history-item .history-item-name{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); border-radius: var(--gl-border-radius-lg); border-width: 0px; } .history-item .history-item-name, .history-item .history-item-name:hover, .history-item .history-item-name:active, .history-item .history-item-name:focus { background-color: transparent !important; } .history-item .gl-button-text{ width: 100%; } .modal-header .modal-title.history-item .gl-button-text { margin-right: -1rem; padding-right: 1rem; } .history-item .gl-button-text{ display: flex; flex-direction: row; align-items: center; gap: var(--gl-spacing-scale-3); text-align: left; } .duo-chat-input{ display: flex; flex-direction: column; max-height: 240px; overflow: hidden; background: var(--gl-control-background-color-default); box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default); border-radius: 1.25rem; } .duo-chat-input:focus-within { box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color); outline: none; } @media (forced-colors: active) { .duo-chat-input:focus-within { outline: 2px solid LinkText; } } .duo-chat-input .gl-form-textarea.form-control { flex: 1; resize: none; max-height: 240px; padding-right: 40px; border-radius: 1.25rem; } .duo-chat-input::after { content: attr(data-value) " "; visibility: hidden; padding: var(--gl-spacing-scale-4); font-family: var(--gl-font-family-regular); padding-right: 40px; word-break: break-word; } .duo-chat .duo-chat-suggestion-button{ border-radius: var(--gl-border-radius-2xl); } .slash-commands{ margin-top: calc(var(--gl-spacing-scale-2) * -1); } .slash-commands .active-command{ background-color: var(--gl-background-color-strong); border-radius: .25rem; } .slash-commands .gl-dropdown-item button.dropdown-item{ font-size: var(--gl-font-size-sm); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); background-color: transparent; } .slash-commands .gl-dropdown-item button.dropdown-item:hover{ background-color: transparent; } .duo-chat-markdown{ font-size: var(--gl-font-size-lg); line-height: var(--gl-line-height-24); color: var(--gl-text-color-default); font-family: var(--gl-font-family-regular); font-weight: var(--gl-font-weight-normal); } .duo-chat-markdown [dir=auto] { text-align: initial; } .duo-chat-markdown :first-child{ margin-top: var(--gl-spacing-scale-0); } .duo-chat-markdown h1, .duo-chat-markdown .gl-h1{ font-weight: var(--gl-heading-1-font-weight); margin-top: var(--gl-heading-1-margin-top); font-size: var(--gl-heading-1-font-size); letter-spacing: var(--gl-heading-1-letter-spacing); line-height: var(--gl-heading-1-line-height); margin-bottom: var(--gl-heading-1-margin-bottom); color: var(--gl-heading-1-color); margin-top: var(--gl-spacing-scale-7); } .duo-chat-markdown h2, .duo-chat-markdown .gl-h2{ font-weight: var(--gl-heading-2-font-weight); margin-top: var(--gl-heading-2-margin-top); font-size: var(--gl-heading-2-font-size); letter-spacing: var(--gl-heading-2-letter-spacing); line-height: var(--gl-heading-2-line-height); margin-bottom: var(--gl-heading-2-margin-bottom); color: var(--gl-heading-2-color); margin-top: var(--gl-spacing-scale-6); } .duo-chat-markdown h3, .duo-chat-markdown .gl-h3{ font-weight: var(--gl-heading-3-font-weight); margin-top: var(--gl-heading-3-margin-top); font-size: var(--gl-heading-3-font-size); letter-spacing: var(--gl-heading-3-letter-spacing); line-height: var(--gl-heading-3-line-height); margin-bottom: var(--gl-heading-3-margin-bottom); color: var(--gl-heading-3-color); margin-top: var(--gl-spacing-scale-6); } .duo-chat-markdown h4, .duo-chat-markdown .gl-h4{ font-weight: var(--gl-heading-4-font-weight); margin-top: var(--gl-heading-4-margin-top); font-size: var(--gl-heading-4-font-size); letter-spacing: var(--gl-heading-4-letter-spacing); line-height: var(--gl-heading-4-line-height); margin-bottom: var(--gl-heading-4-margin-bottom); color: var(--gl-heading-4-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-markdown h5, .duo-chat-markdown .gl-h5{ font-weight: var(--gl-heading-5-font-weight); margin-top: var(--gl-heading-5-margin-top); font-size: var(--gl-heading-5-font-size); letter-spacing: var(--gl-heading-5-letter-spacing); line-height: var(--gl-heading-5-line-height); margin-bottom: var(--gl-heading-5-margin-bottom); color: var(--gl-heading-5-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-markdown h6, .duo-chat-markdown .gl-h6{ font-weight: var(--gl-heading-6-font-weight); margin-top: var(--gl-heading-6-margin-top); font-size: var(--gl-heading-6-font-size); letter-spacing: var(--gl-heading-6-letter-spacing); line-height: var(--gl-heading-6-line-height); margin-bottom: var(--gl-heading-6-margin-bottom); color: var(--gl-heading-6-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-markdown p, .duo-chat-markdown .gl-paragraph{ margin-top: var(--gl-spacing-scale-0); margin-bottom: var(--gl-spacing-scale-0); } .duo-chat-markdown p + p, .duo-chat-markdown p + .gl-paragraph, .duo-chat-markdown .gl-paragraph + p, .duo-chat-markdown .gl-paragraph + .gl-paragraph{ margin-top: var(--gl-spacing-scale-5); } .duo-chat-markdown p.sm, .duo-chat-markdown .gl-paragraph.sm { font-size: 0.875rem; line-height: var(--gl-line-height-20); } .duo-chat-markdown .sm { font-size: 0.875rem; line-height: var(--gl-line-height-20); } .duo-chat-markdown blockquote{ color: var(--gl-text-color-subtle); padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); padding-left: var(--gl-spacing-scale-6); margin-top: var(--gl-spacing-scale-3); margin-bottom: var(--gl-spacing-scale-3); margin-left: var(--gl-spacing-scale-0); margin-right: var(--gl-spacing-scale-0); box-shadow: inset 4px 0 0 0 var(--gl-border-color-default); } .duo-chat-markdown .idiff{ border-radius: .25rem; display: inline-flex; } .commit-content .committer.duo-chat-markdown .idiff { gap: 0.5ch; } .duo-chat-markdown .idiff{ padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); } .duo-chat-markdown .deletion{ background-color: var(--red-100); } .duo-chat-markdown .addition{ background-color: var(--green-100); } .duo-chat-markdown .audio-container{ display: inline-flex; } .commit-content .committer.duo-chat-markdown .audio-container { gap: 0.5ch; } .duo-chat-markdown .audio-container{ flex-direction: column; width: 100%; } .modal-header .modal-title.duo-chat-markdown .audio-container { margin-right: -1rem; padding-right: 1rem; } .duo-chat-markdown .audio-container audio{ width: 100%; } .modal-header .modal-title.duo-chat-markdown .audio-container audio { margin-right: -1rem; padding-right: 1rem; } .duo-chat-markdown .audio-container a{ margin-top: var(--gl-spacing-scale-3); } .duo-chat-markdown .audio-container a::before{ margin-right: var(--gl-spacing-scale-2); text-rendering: auto; -webkit-font-smoothing: antialiased; content: "📎"; } .duo-chat-markdown table{ margin-top: var(--gl-spacing-scale-7); margin-bottom: var(--gl-spacing-scale-7); } .duo-chat-markdown table th, .duo-chat-markdown table td{ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); box-shadow: inset 0 -1px 0 0 var(--gl-border-color-default); vertical-align: top; } .duo-chat-markdown table th { box-shadow: inset 0 1px 0 0 var(--gl-border-color-default), inset 0 -1px 0 0 var(--gl-border-color-default); font-weight: var(--gl-font-weight-bold); } .duo-chat-markdown table thead{ background-color: var(--gl-background-color-strong); } .duo-chat-markdown table tr:nth-child(even){ background-color: var(--gl-background-color-subtle); } .duo-chat-compact-markdown{ font-size: var(--gl-font-size-base); } .recents-wrapper .duo-chat-compact-markdown{ margin-top: var(--gl-spacing-scale-0); } .duo-chat-compact-markdown{ line-height: var(--gl-line-height-20); } .duo-chat-compact-markdown h1, .duo-chat-compact-markdown .gl-h1{ font-weight: var(--gl-heading-1-fixed-font-weight); margin-top: var(--gl-heading-1-fixed-margin-top); font-size: var(--gl-heading-1-fixed-font-size); letter-spacing: var(--gl-heading-1-fixed-letter-spacing); line-height: var(--gl-heading-1-fixed-line-height); margin-bottom: var(--gl-heading-1-fixed-margin-bottom); color: var(--gl-heading-1-fixed-color); margin-top: var(--gl-spacing-scale-7); } .duo-chat-compact-markdown h2, .duo-chat-compact-markdown .gl-h2{ font-weight: var(--gl-heading-2-fixed-font-weight); margin-top: var(--gl-heading-2-fixed-margin-top); font-size: var(--gl-heading-2-fixed-font-size); letter-spacing: var(--gl-heading-2-fixed-letter-spacing); line-height: var(--gl-heading-2-fixed-line-height); margin-bottom: var(--gl-heading-2-fixed-margin-bottom); color: var(--gl-heading-2-fixed-color); margin-top: var(--gl-spacing-scale-6); } .duo-chat-compact-markdown h3, .duo-chat-compact-markdown .gl-h3{ font-weight: var(--gl-heading-3-fixed-font-weight); margin-top: var(--gl-heading-3-fixed-margin-top); font-size: var(--gl-heading-3-fixed-font-size); letter-spacing: var(--gl-heading-3-fixed-letter-spacing); line-height: var(--gl-heading-3-fixed-line-height); margin-bottom: var(--gl-heading-3-fixed-margin-bottom); color: var(--gl-heading-3-fixed-color); margin-top: var(--gl-spacing-scale-6); } .duo-chat-compact-markdown h4, .duo-chat-compact-markdown .gl-h4{ font-weight: var(--gl-heading-4-fixed-font-weight); margin-top: var(--gl-heading-4-fixed-margin-top); font-size: var(--gl-heading-4-fixed-font-size); letter-spacing: var(--gl-heading-4-fixed-letter-spacing); line-height: var(--gl-heading-4-fixed-line-height); margin-bottom: var(--gl-heading-4-fixed-margin-bottom); color: var(--gl-heading-4-fixed-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-compact-markdown h5, .duo-chat-compact-markdown .gl-h5{ font-weight: var(--gl-heading-5-fixed-font-weight); margin-top: var(--gl-heading-5-fixed-margin-top); font-size: var(--gl-heading-5-fixed-font-size); letter-spacing: var(--gl-heading-5-fixed-letter-spacing); line-height: var(--gl-heading-5-fixed-line-height); margin-bottom: var(--gl-heading-5-fixed-margin-bottom); color: var(--gl-heading-5-fixed-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-compact-markdown h6, .duo-chat-compact-markdown .gl-h6{ font-weight: var(--gl-heading-6-fixed-font-weight); margin-top: var(--gl-heading-6-fixed-margin-top); font-size: var(--gl-heading-6-fixed-font-size); letter-spacing: var(--gl-heading-6-fixed-letter-spacing); line-height: var(--gl-heading-6-fixed-line-height); margin-bottom: var(--gl-heading-6-fixed-margin-bottom); color: var(--gl-heading-6-fixed-color); margin-top: var(--gl-spacing-scale-5); } .duo-chat-compact-markdown .sm{ font-size: var(--gl-font-size-sm); } .duo-chat-compact-markdown table th, .duo-chat-compact-markdown table td{ padding-top: var(--gl-spacing-scale-3); padding-bottom: var(--gl-spacing-scale-3); } .message-tool-approval-collapsed { border-bottom: 0; } .message-tool-approval-collapsed-header { border-bottom-left-radius: calc(var(--gl-card-border-radius) - 1px); border-bottom-right-radius: calc(var(--gl-card-border-radius) - 1px); } .duo-chat-loader{ display: flex; } @media (prefers-reduced-motion) { .duo-chat-loader .transition { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .duo-chat-loader .transition { transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1); } .duo-chat-loader .text-enter{ opacity: var(--gl-opacity-0); } @media (prefers-reduced-motion) { .duo-chat-loader .text-enter-active { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .duo-chat-loader .text-enter-active { transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1); } .duo-chat-loader .text-enter-to{ opacity: var(--gl-opacity-10); } .duo-chat-loader .text-leave{ opacity: var(--gl-opacity-10); } @media (prefers-reduced-motion) { .duo-chat-loader .text-leave-active { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } .duo-chat-loader .text-leave-active { transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1); } .duo-chat-loader .text-leave-to{ opacity: var(--gl-opacity-0); } .duo-chat-message { position: relative; border-radius: 1rem 1rem 0; color: var(--duo-chat-message-color, inherit) !important; --gl-text-color-heading: var(--duo-chat-message-heading-color, inherit) !important; } .duo-chat-message p:not(:last-of-type){ margin-bottom: var(--gl-spacing-scale-4); } .duo-chat-message p:last-of-type{ margin-bottom: var(--gl-spacing-scale-0); } @keyframes animated-text-segment-fade-in { from { opacity: 0; } to { opacity: 1; } } .duo-chat-message-markdown-smooth .animated-text-segment { animation: animated-text-segment-fade-in 0.3s ease-out forwards; } .duo-chat-message-error > p { margin: 0; } .agentic-feedback-hover-wrapper { transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out; } .gl-group:hover .agentic-feedback-hover-wrapper, .agentic-feedback-hover-wrapper:focus-within { width: auto; opacity: 1; margin-right: 0; overflow: visible; } .duo-message-pre-block pre{ border-radius: .25rem; border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; padding-left: var(--gl-spacing-scale-4); padding-right: var(--gl-spacing-scale-4); padding-top: var(--gl-spacing-scale-4); padding-bottom: var(--gl-spacing-scale-4); max-height: 60vh; overflow: auto; scroll-behavior: smooth; color: inherit; background-color: var(--gl-background-color-preformat, var(--gl-background-color-default)); box-shadow: none; } .duo-message-pre-block pre::before, .duo-message-pre-block pre::after { content: ""; left: 1px; width: calc(100% - 2px); position: absolute; pointer-events: none; height: var(--gl-spacing-scale-7); border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; } .duo-message-pre-block pre.scrim-top::before { background: linear-gradient(to bottom, transparent, var(--gl-background-color-default)); top: 1px; --tw-rotate: -180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .duo-message-pre-block pre.scrim-bottom::after { background: linear-gradient(to bottom, transparent, var(--gl-background-color-default)); bottom: 1px; } .message-tool-approval pre.duo-message-pre-block{ background-color: var(--gl-background-color-subtle); } .duo-message-pre-block pre code{ display: block; white-space: pre; border-radius: var(--gl-border-radius-none); background-color: transparent; padding: var(--gl-spacing-scale-0); font-size: var(--gl-font-size-sm); color: var(--gl-text-color-default); } .duo-message-pre-block code.hljs { background: transparent !important; padding: 0 !important; } .duo-message-pre-block duo-copy-code, .duo-message-pre-block duo-insert-code-snippet { position: absolute; transition-property: all; transition-timing-function: ease; transition-duration: 200ms; opacity: var(--gl-opacity-0); right: 0.5rem; top: calc(0.5rem - 1px); z-index: var(--gl-zindex-1); } .duo-message-pre-block duo-copy-code [role=tooltip], .duo-message-pre-block duo-insert-code-snippet [role=tooltip] { display: none; background: var(--gl-feedback-strong-background-color); color: var(--gl-feedback-strong-text-color); padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-1); padding-bottom: var(--gl-spacing-scale-1); width: max-content; position: absolute; top: 0; left: 0; border-radius: .25rem; } .duo-message-pre-block duo-copy-code [role=tooltip] .arrow, .duo-message-pre-block duo-insert-code-snippet [role=tooltip] .arrow { position: absolute; background: inherit; height: var(--gl-spacing-scale-3); width: var(--gl-spacing-scale-3); transform: rotate(45deg); } .duo-message-pre-block duo-copy-code { margin-right: 2.5rem; } .duo-message-pre-block:focus duo-copy-code, .duo-message-pre-block:focus duo-insert-code-snippet, .duo-message-pre-block:focus .copy-to-clipboard-button-container, .duo-message-pre-block:hover duo-copy-code, .duo-message-pre-block:hover duo-insert-code-snippet, .duo-message-pre-block:hover .copy-to-clipboard-button-container, .duo-message-pre-block:has(button:focus) duo-copy-code, .duo-message-pre-block:has(button:focus) duo-insert-code-snippet, .duo-message-pre-block:has(button:focus) .copy-to-clipboard-button-container { opacity: 1; } .duo-chat-message-markdown-smooth .duo-message-pre-block:focus duo-copy-code, .duo-chat-message-markdown-smooth .duo-message-pre-block:focus duo-insert-code-snippet, .duo-chat-message-markdown-smooth .duo-message-pre-block:hover duo-copy-code, .duo-chat-message-markdown-smooth .duo-message-pre-block:hover duo-insert-code-snippet, .duo-chat-message-markdown-smooth .duo-message-pre-block:has(button:focus) duo-copy-code, .duo-chat-message-markdown-smooth .duo-message-pre-block:has(button:focus) duo-insert-code-snippet { opacity: 0; } .insert-code-hidden duo-insert-code-snippet { display: none; } .insert-code-hidden duo-copy-code { margin-right: 0; } .duo-chat-markdown .monospace, .duo-chat-markdown code, .duo-chat-compact-markdown .monospace, .duo-chat-compact-markdown code{ font-family: var(--gl-font-family-monospace); font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-variant-ligatures: none; } .duo-chat-markdown code{ border-radius: .25rem; background-color: var(--gl-background-color-strong); color: var(--gl-text-color-default); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); padding-top: var(--gl-spacing-scale-1); padding-bottom: var(--gl-spacing-scale-1); } .duo-chat-message code{ background-color: var(--gl-status-neutral-background-color); } .recents-wrapper .gl-accordion-item-header .gl-button.gl-button.btn-link{ display: block; width: 100%; } .modal-header .modal-title.recents-wrapper .gl-accordion-item-header .gl-button.gl-button.btn-link { margin-right: -1rem; padding-right: 1rem; } .recents-wrapper .gl-accordion-item-header .gl-button.gl-button.btn-link{ padding-left: var(--gl-spacing-scale-3); padding-top: var(--gl-spacing-scale-2); padding-bottom: var(--gl-spacing-scale-2); border-radius: var(--gl-border-radius-none); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); text-decoration-line: none; text-transform: uppercase; font-weight: var(--gl-font-weight-bold); font-size: var(--gl-font-size-sm); } .recents-wrapper .gl-accordion-item-header > .collapse{ margin-left: var(--gl-spacing-scale-0); } .recents-wrapper .gl-text-base{ margin-top: var(--gl-spacing-scale-0); } .agentic-binary-feedback .feedback-colored-icon { animation: feedback-fade-out 0.3s ease-in-out forwards; animation-delay: 0.3s; will-change: opacity; margin-left: 4px; } .agentic-binary-feedback .feedback-thanks { pointer-events: none; animation: feedback-fade-in 0.3s ease-in-out forwards; animation-delay: 0.3s; will-change: opacity, width, margin; } @keyframes feedback-fade-out { to { opacity: 0; width: 0; overflow: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .feedback-colored-icon, .feedback-thanks { animation: none; } } @keyframes feedback-fade-in { to { opacity: 1; width: auto; margin-left: -6px; pointer-events: auto; } } body { font-size: 0.875rem; } legend{ border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; margin-bottom: 20px; } button, html [type=button], [type=reset], [type=submit], [role=button] { /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-appearance: inherit; cursor: pointer; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; } h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; } h5, .h5 { font-size: 0.875rem; } b, strong { font-weight: 600; } hr { overflow: hidden; } code{ padding-top: var(--gl-spacing-scale-1); padding-bottom: var(--gl-spacing-scale-1); padding-left: var(--gl-spacing-scale-2); padding-right: var(--gl-spacing-scale-2); color: var(--gl-text-color-strong); background-color: var(--gl-background-color-strong); border-radius: .25rem; } .code > code, .build-log code { background-color: inherit; padding: unset; } table { border-spacing: 0; } pre code { white-space: pre-wrap; } /* Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons, so we need to reset the vertical alignment to the default value. See: - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362 */ svg { vertical-align: baseline; } .form-control, .search form { font-size: 0.875rem; } /* Our adjustments to hx & .hx above add unnecessary margins to modal-title and page-title in modals, so we set them to 0 in order to have properly formatted modal headers. */ .modal-header .modal-title, .modal-header .page-title { margin-top: 0; margin-bottom: 0; } input[type=file] { line-height: 1; } @container panel (width >= 768px) { :where(html.with-gl-container-queries) .form-group.row > .col-form-label { text-align: right; } } @media (width >= 768px) { :where(html:not(.with-gl-container-queries)) .form-group.row > .col-form-label { text-align: right; } } .hidden { display: none !important; visibility: hidden !important; } .hide { display: none; } .dropdown-toggle::after, .dropright .dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge), .label { padding: 4px 5px; font-size: 12px; font-style: normal; font-weight: 400; display: inline-block; } .divider { height: 0; margin: 4px 0; overflow: hidden; border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 1px; } .info-well{ background-color: var(--gl-background-color-subtle); color: var(--gl-text-color-default); border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; border-color: var(--gl-border-color-section); border-radius: .25rem; margin-bottom: 16px; } .info-well .well-segment { padding: 1rem; } .info-well .well-segment:not(:first-of-type){ border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 1px; border-top-color: var(--gl-border-color-section); } .info-well .well-segment p:last-of-type, .info-well .well-segment ol:last-of-type, .info-well .well-segment ul:last-of-type, .info-well .well-segment .form-group:last-of-type { margin-bottom: 0; } .card.card-without-border, .card.bg-light { border: 0 !important; } .nav-tabs { border-bottom: 0; } .nav-tabs .nav-link { border-top: 0; border-left: 0; border-right: 0; } .nav-tabs .nav-item { margin-bottom: 0; } .alert { border-radius: 0; } .alert-danger { background-color: var(--gl-feedback-danger-background-color); border-color: var(--gl-feedback-danger-border-color); color: var(--gl-feedback-danger-text-color); } input[type=color].form-control { height: 32px; } .project-templates-buttons .btn { vertical-align: unset; } :root { --layout-sticky-header-height: 0px; --container-padding-x: 0.75rem; --ai-panel-width: 0px; --ai-navigation-rail-size: 0px; } :root.page-with-ai-panel { --ai-panel-width: clamp(25rem, 20vw, 35rem); --ai-navigation-rail-size: 2.5rem; } html { scrollbar-color: var(--gl-color-neutral-400) transparent; } @media (forced-colors: active) { html { scrollbar-color: var(--gl-color-neutral-950) transparent; } } html.touch .tooltip { display: none !important; } .page-with-panels, .page-with-panels body{ height: 100%; } .page-with-panels body{ display: flex; flex-direction: column; background-color: var(--gl-application-chrome-background-color); } .container-fluid.limit-container-width .flash-container.sticky, .limit-container-width.container-sm .flash-container.sticky, .limit-container-width.container-md .flash-container.sticky, .limit-container-width.container-lg .flash-container.sticky, .limit-container-width.container-xl .flash-container.sticky { max-width: 1006px; margin-right: auto; margin-left: auto; } .container-queries-enabled { width: calc(100% + var(--container-padding-x) * 2 + var(--scrollbar-width, 0px)); padding-right: var(--container-padding-x); padding-left: calc(var(--container-padding-x) + var(--scrollbar-width, 0px)); margin-right: calc(var(--container-padding-x) * -1); margin-left: calc((var(--container-padding-x) + var(--scrollbar-width, 0px)) * -1); } .layout-page{ padding-top: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); } .page-with-panels .layout-page:where(.page-with-super-sidebar){ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: auto 1fr auto var(--ai-navigation-rail-size); gap: var(--gl-spacing-scale-0); } @media (min-width: 576px){ .page-with-panels .layout-page:where(.page-with-super-sidebar){ padding-bottom: var(--gl-spacing-scale-3); } } .page-with-panels .layout-page:where(.page-with-super-sidebar){ min-height: var(--gl-spacing-scale-0); flex: 1 1 0%; } @media (min-width: 576px){ .page-with-panels .layout-page:where(.page-with-super-sidebar){ padding-left: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-3); } } .page-with-panels .layout-page:where(.page-with-super-sidebar) { grid-template-areas: "broadcast-message" "panels" "ai-panel" "ai-navigation-rail"; } @media (min-width: 992px) { .page-with-panels .layout-page:where(.page-with-super-sidebar){ grid-template-columns: auto 1fr auto var(--ai-navigation-rail-size); grid-template-rows: auto 1fr; grid-template-areas: "super-sidebar-nav broadcast-message broadcast-message ." "super-sidebar-nav panels ai-panel ai-navigation-rail"; } } .page-with-panels .broadcast-wrapper { grid-area: broadcast-message; } .page-with-panels .broadcast-wrapper:has(> .gl-broadcast-message){ margin-bottom: var(--gl-spacing-scale-3); } @media (min-width: 992px) { .page-with-panels .super-sidebar-wrapper { grid-area: super-sidebar-nav; } } .page-with-panels .panels-container { grid-area: panels; } @media (min-width: 576px){ .page-with-panels.page-with-ai-panel .layout-page{ padding-bottom: var(--gl-spacing-scale-0); } } @media (min-width: 992px){ .page-with-panels.page-with-ai-panel .layout-page{ padding-bottom: var(--gl-spacing-scale-3); padding-right: var(--gl-spacing-scale-0); } } .panels-container{ position: relative; flex-grow: 1; display: flex; padding-right: var(--gl-spacing-scale-0); padding-bottom: var(--gl-spacing-scale-0); min-height: var(--gl-spacing-scale-0); --application-header-height: 0px; --system-header-height: 0px; --performance-bar-height: 0px; --header-height: 0px; --top-bar-height: 0px; } .panels-container .panel-content-inner > .alert-wrapper:not(:has(*)), .panels-container .vue-portal-target .work-item-detail-panel-content > .alert-wrapper:not(:has(*)){ display: none; } @supports (width: calc-size(auto, size)) { .panels-container, .super-sidebar.super-sidebar-toggled-manually { width: calc-size(auto, size); /* stylelint-disable-next-line property-no-unknown */ interpolate-size: allow-keywords; transition: width 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } } .ai-panel-wrapper { grid-area: ai-panel; overflow: inherit; position: relative; } .ai-navigation-rail { grid-area: ai-navigation-rail; display: flex; flex: 1 1 0%; align-items: center; gap: var(--gl-spacing-scale-5); padding: var(--gl-spacing-scale-3); height: var(--ai-navigation-rail-size); } @media (min-width: 992px){ .ai-navigation-rail{ flex-direction: column; gap: var(--gl-spacing-scale-3); width: var(--ai-navigation-rail-size); height: 100%; } } .ai-navigation-rail .gl-nav-item.selected::before{ bottom: -6px; } @media (min-width: 992px){ .ai-navigation-rail .gl-nav-item.selected::before{ bottom: var(--gl-spacing-scale-2); right: -6px; } .layout-page.ai-panel-maximized{ grid-template-columns: auto 2fr 3fr; } } .layout-page.ai-panel-maximized .ai-panel-wrapper { grid-column-start: panels; grid-column-end: ai-panel; } .layout-page.ai-panel-maximized .ai-panel{ width: 100%; } .modal-header .modal-title.layout-page.ai-panel-maximized .ai-panel { margin-right: -1rem; padding-right: 1rem; } .layout-page.ai-panel-maximized .ai-panel{ border-left-color: var(--gl-border-color-transparent); } .layout-page.ai-panel-maximized .ai-panel:where(.gl-dark *){ border-left-color: var(--gl-border-color-subtle); } .layout-page.ai-panel-maximized .ai-panel{ border-radius: var(--gl-border-radius-xl); --tw-shadow: var(--gl-shadow-sm); --tw-shadow-colored: var(--gl-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); clip-path: none; } .layout-page.ai-panel-maximized .panels-container { display: none; } @media (min-width: 2560px) { .layout-page.ai-panel-maximized .ai-panel-wrapper { grid-column-start: ai-panel; } .layout-page.ai-panel-maximized .ai-panel{ border-left-style: solid; border-left-color: var(--gl-border-color-default); border-left-width: 1px; border-top-left-radius: var(--gl-border-radius-none); border-bottom-left-radius: var(--gl-border-radius-none); } .layout-page.ai-panel-maximized .panels-container { display: flex; } } .content-wrapper { padding-top: var(--top-bar-height); padding-bottom: 56px; } .container { padding-top: 0; z-index: 5; } .container .content { margin: 0; } @container panel (width < 576px) { :where(html.with-gl-container-queries) .container .content { margin-top: 20px; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) .container .content { margin-top: 20px; } } @container panel (width < 576px) { :where(html.with-gl-container-queries) .container .container .title { padding-left: 15px !important; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) .container .container .title { padding-left: 15px !important; } } .container-limited { max-width: 1296px; } .container-limited.limit-container-width { max-width: 1006px; } .alert-wrapper-top-space .gl-alert:first-child{ margin-top: var(--gl-spacing-scale-3); } .alert-wrapper .alert-link-group { float: right; } @container panel (width < 768px) { :where(html.with-gl-container-queries) .alert-wrapper .alert-link-group { float: none; margin-top: 8px; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .alert-wrapper .alert-link-group { float: none; margin-top: 8px; } } .fullscreen-layout { padding-top: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; } .fullscreen-layout > #js-peek { position: static; top: auto; } .fullscreen-layout .flash-container { margin-top: 0; margin-bottom: 0; } .gl-drawer-responsive { width: 28%; min-width: 400px; padding-left: 16px; padding-right: 16px; box-shadow: none; background-color: var(--gl-background-color-subtle); border-left-style: solid; border-left-color: var(--gl-border-color-default); border-left-width: 1px; } @container panel (width < 768px) { :where(html.with-gl-container-queries) .gl-drawer-responsive { min-width: unset; width: 100%; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .gl-drawer-responsive { min-width: unset; width: 100%; } } .gl-drawer-responsive .gl-drawer-header, .gl-drawer-responsive .gl-drawer-body > * { padding-left: 0; padding-right: 0; } #goog-gt-tt { display: none; } /* * These are used by the `Tab width` user preference in * `https://gitlab.com/-/profile/preferences`. The `css_class_for_user` method in * `lib/gitlab/tab_width.rb` is used to add one of these classes to the `body` element. */ .tab-width-1 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 1; } .tab-width-2 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 2; } .tab-width-3 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 3; } .tab-width-4 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 4; } .tab-width-5 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 5; } .tab-width-6 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 6; } .tab-width-7 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 7; } .tab-width-8 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 8; } .tab-width-9 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 9; } .tab-width-10 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 10; } .tab-width-11 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 11; } .tab-width-12 { /* stylelint-disable-next-line property-no-vendor-prefix */ tab-size: 12; } :root { /** * Bloom backgrounds */ } :root.with-bloom body{ background-color: var(--gl-application-chrome-background-color); } :root.with-bloom body::before, :root.with-bloom body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { :root.with-bloom body::before, :root.with-bloom body::after { transition: opacity 0.6s ease-in-out; } } :root.with-bloom body::before { opacity: 0; } @media (min-width: 992px) { :root.with-bloom body::before { background-image: url(/assets/blooms/bloom-side-a17ad5187e2a6699d57babcd08a1eb502866d773d2d631cc01a47e47e1023b19.png); background-position: top right; background-size: 350px 600px; opacity: 1; } } :root.with-bloom body::after { background-image: url(/assets/blooms/bloom-bottom-0767bcecbbfc2dffc3ed95fe12b689d298c7e0845e609c9538b68de5ebf38c80.png); background-position: bottom right -300px; background-size: 1200px 400px; opacity: 0; } :root.with-bloom.ai-panel-is-open body::before { opacity: 0; } :root.with-bloom.ai-panel-is-open body::after { opacity: 1; } :root.html-devise-layout body{ background-color: var(--gl-application-chrome-background-color); } :root.html-devise-layout body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url(/assets/blooms/bloom-grand-ambient-a1791dfc95bc1d5b14a11439df5ad4d69be46f89ec8e23af9fac01b7090980f4.png); background-position: bottom center; background-size: 1440px 525px; background-repeat: no-repeat; } :root.html-devise-layout .footer-container hr { display: none; } .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.once { animation-iteration-count: 1; } .animated.short { animation-duration: 321ms; animation-fill-mode: none; } @keyframes pulse { from, to { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } } .pulse { animation-name: pulse; } /* * General hover animations */ .btn { transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear; } .dropdown-menu-toggle { transition: border-color 100ms linear; } .note-action-button, .dropdown-toggle-caret { transition: color 100ms linear; } .stage-nav-item { transition: background-color 100ms linear, box-shadow 100ms linear; } .dropdown-menu a, .dropdown-menu button { transition: none; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { animation: fadeIn 200ms 1; } @keyframes fadeInHalf { 0% { opacity: 0; } 100% { opacity: 0.5; } } .fade-in-half { animation: fadeInHalf 200ms 1; } @keyframes fadeInFull { 0% { opacity: 0.5; } 100% { opacity: 1; } } .fade-in-full { animation: fadeInFull 200ms 1; } .animation-container { height: 40px; overflow: hidden; } .animation-container.animation-container-small { height: 12px; } .animation-container.animation-container-right .skeleton-line-2 { left: 0; right: 150px; } .animation-container [class^=skeleton-line-] { position: relative; background-color: var(--gl-background-color-strong); height: 10px; overflow: hidden; } .animation-container [class^=skeleton-line-]:not(:last-of-type) { margin-bottom: 4px; } .animation-container [class^=skeleton-line-]::after { content: " "; display: block; animation: blockTextShine 1s linear infinite forwards; background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(to right, #28272d 0%, #18171d 20%, #28272d 40%, #28272d 100%); height: 10px; } .skeleton-line-1 { width: 156px; } .skeleton-line-2 { width: 235px; } .skeleton-line-3 { width: 200px; } @keyframes blockTextShine { 0% { transform: translateX(-468px); } 100% { transform: translateX(468px); } } .slide-down-enter-active { transition: transform 0.2s; } .slide-down-enter, .slide-down-leave-to { transform: translateY(-30%); } .slide-in-fwd-bottom-enter-active { animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-in-fwd-bottom-leave-active { animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both reverse; } /* ---------------------------------------------- * Generated by Animista on 2019-4-26 17:40:41 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @keyframes slide-in-fwd-bottom { 0% { transform: translateZ(-1400px) translateY(800px); opacity: 0; } 100% { transform: translateZ(0) translateY(0); opacity: 1; } } .hotspot-pulse{ position: relative; } .hotspot-pulse::after { content: ""; height: var(--gl-spacing-scale-3); width: var(--gl-spacing-scale-3); border-radius: var(--gl-border-radius-full); background-color: var(--gl-status-info-icon-color); position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; } @media (prefers-reduced-motion) { .hotspot-pulse::before { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; } } .hotspot-pulse::before { content: ""; position: absolute; height: var(--gl-spacing-scale-3); width: var(--gl-spacing-scale-3); border-radius: var(--gl-border-radius-full); pointer-events: none; /* Position exactly where the ::after dot will be */ right: 0; top: 50%; transform: translateY(-50%); background-color: rgb(from var(--gl-status-info-icon-color) r g b/0.7); z-index: 1; animation: hotspot-pulse 2s infinite; transform-origin: center; } @keyframes hotspot-pulse { 0% { transform: translateY(-50%) scale(1); opacity: 0.7; } 100% { transform: translateY(-50%) scale(2.5); opacity: 0; } } /** * Transition classes are built dynamically, please read about vue-transitions * here before removing https://vuejs.org/guide/built-ins/transition **/ .fade-enter-active, .fade-leave-active, .fade-in-enter-active, .fade-out-leave-active{ transition-property: opacity; transition-timing-function: ease; transition-duration: 200ms; } .fade-enter, .fade-in-enter, .fade-out-leave-to, .fade-leave-to { opacity: 0; } .slide-enter-from-element.slide-enter, .slide-enter-from-element.slide-leave-to { position: absolute; transform: translateX(-150%); } .slide-enter-to-element.slide-enter, .slide-enter-to-element.slide-leave-to { position: absolute; transform: translateX(150%); } .slide-enter-active, .slide-leave-active { transition: transform 300ms ease-out; } .slide-enter-to, .slide-leave { transform: translateX(0); } .blob-embed { margin: 16px 0; overflow: hidden; border-style: solid; border-color: var(--gl-border-color-default); border-width: 1px; border-radius: var(--gl-border-radius-lg); } .blob-embed .blob-embed-header { display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; background-color: var(--gl-background-color-subtle); border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; } .blob-embed .blob-embed-title { font-size: 90%; word-break: break-all; color: var(--gl-text-color-default); } .blob-embed .line-numbers a { text-decoration: none; } .blob-embed .line-numbers a::after { content: none; } .nothing-here-block { text-align: center; padding: 16px; color: var(--gl-text-color-subtle); font-weight: 400; font-size: 14px; } .nothing-here-block.diff-collapsed { padding: 5px; line-height: 34px; } .nothing-here-block.diff-collapsed .click-to-expand { cursor: pointer; vertical-align: initial; } .row-content-block { margin-top: 0; background-color: var(--gl-background-color-subtle); padding: 16px; margin-bottom: 0; border-top-style: solid; border-top-color: var(--gl-border-color-default); border-top-width: 1px; border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; color: var(--gl-text-color-default); } .row-content-block.top-block { border-top: 0; } .row-content-block.top-block .container-fluid, .row-content-block.top-block .container-sm, .row-content-block.top-block .container-md, .row-content-block.top-block .container-lg, .row-content-block.top-block .container-xl { background-color: inherit; } .row-content-block.middle-block { margin-top: 24px; margin-bottom: 0; } .row-content-block.second-block { margin-top: -1px; margin-bottom: 0; } .row-content-block.footer-block { margin-top: 24px; border-bottom: 0; } .row-content-block.content-component-block{ background-color: var(--gl-background-color-default); } .row-content-block .title{ color: var(--gl-text-color-heading); } .row-content-block > p:last-child { margin-bottom: 0; } .content-block { padding: 16px 0; border-bottom-style: solid; border-bottom-color: var(--gl-border-color-default); border-bottom-width: 1px; } .content-block > .controls { float: right; } .landing { margin: 16px auto; overflow: hidden; display: flex; position: relative; border: 1px solid var(--gl-banner-intro-border-color); border-radius: 0.25rem; background-color: var(--gl-feedback-info-background-color); justify-content: center; } .landing .svg-container { align-self: center; } @container panel (width < 768px) { :where(html.with-gl-container-queries) .landing { flex-direction: column; } } @media (width < 768px) { :where(html:not(.with-gl-container-queries)) .landing { flex-direction: column; } } .empty-state { margin: 5% auto 0; } .empty-state .text-content { max-width: 460px; margin: 0 auto; padding: 16px; } .empty-state .emoji-icon { display: inline-block; } .empty-state .btn:not(.split-content-button):not(.dropdown-toggle-split) { margin: 8px 4px; } @container panel (width < 576px) { :where(html.with-gl-container-queries) .empty-state .btn:not(.split-content-button):not(.dropdown-toggle-split) { width: 100%; margin: 8px 0; } } @media (width < 576px) { :where(html:not(.with-gl-container-queries)) .empty-state .btn:not(.split-content-button):not(.dropdown-toggle-split) { width: 100%; margin: 8px 0; } } .code-block { white-space: pre; overflow-x: auto; font-size: 12px; border: 0; padding: 0.5rem; } .code-block code { background-color: inherit; padding: inherit; } .gl-empty-state { margin-top: 2rem; } #js-vue-page-breadcrumbs-wrapper { flex-grow: 1; min-width: 1px; /* * Our auto-resizing GlBreadcrumb component works best when it is set to grow with the available space. * Only this way can its ResizeObserver detect that more space than currently taken is available, * so it can uncollapse items when more space becomes available. * But we do *not* want this effect on pages that use the injectVueAppBreadcrumbs() mechanism. * There, we want the lefthand breadcrumbs only take as much space as they needed on their first size calc, * so that the second, injected GlBreadcrumb component sits right next to it, with no "grow effect" taking * empty space between them. * The only downside to this approach is that on such injected pages, the lefthand breadcrumbs won't * uncollapse themselves when more space becomes available, as they won't "grow" into it, not triggering * their ResizeObserver. */ } #js-vue-page-breadcrumbs-wrapper nav.gl-breadcrumbs:only-of-type { flex-grow: 1; } #js-vue-page-breadcrumbs-wrapper { /* If a Vue app portals its breadcrumbs here (like `NewNamespacePage` does), hide the others! */ /* stylelint-disable-next-line gitlab/no-has -- scoped to direct children of breadcrumb container */ } #js-vue-page-breadcrumbs-wrapper > :has(~ .vue-portal-target) { display: none; } #js-vue-page-breadcrumbs-wrapper { /* ... and give portaled element room to grow */ } #js-vue-page-breadcrumbs-wrapper > .vue-portal-target { flex-grow: 1; } .btn { white-space: nowrap; border-radius: var(--gl-button-border-radius); font-size: 0.875rem; font-weight: 400; padding: 6px 10px; } .btn:focus-visible, .btn:active { background-color: #28272d; } .btn:focus-visible:active { outline: 0; } .btn.btn-grouped { margin-left: 0.5rem; float: left; } .btn.btn-grouped.inline { float: none; } .btn svg { height: 15px; width: 15px; } .btn svg:not(:last-child) { margin-right: 5px; } .btn-group.btn-grouped { margin-left: 0.5rem; float: left; } .btn-group.btn-grouped.inline { float: none; } .button-reset{ border-style: none; background-color: transparent; padding: var(--gl-spacing-scale-0); } .button-reset:focus-visible{ box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color); outline: none; } .button-reset { cursor: default !important; } /** * Use `gl-button-theme` mixin from GitLab UI to apply same styles to *