@atlassian/aui/dist/aui/aui-prototyping-browserfocus.css

Atlassian User Interface library

/**
 * BASE THEME
 */
:root {
  color-scheme: light;
  --aui-shadow1: rgba(9, 30, 66, 0.13);
  --aui-shadow2: rgba(9, 30, 66, 0.25);
  --aui-blanket: rgba(23, 43, 77, 0.45);
  --aui-body-text: #172B4D;
  --aui-lesser-body-text: #5E6C84;
  --aui-lesser-header-text: #6B778C;
  --aui-body-background: #F4F5F7;
  --aui-page-background: #FFFFFF;
  --aui-page-border: #DFE1E6;
  --aui-border: #DFE1E6;
  --aui-border-strong: #7A869A;
  --aui-focus: #2684FF;
  --aui-link-color: #0052CC;
  --aui-link-decoration: none;
  --aui-link-hover-color: #0065FF;
  --aui-link-active-color: #0747A6;
  --aui-link-hover-decoration: underline;
  --aui-link-visited-color: #403294;
  --aui-itemheading-text: #5E6C84;
  --aui-item-bg: transparent;
  --aui-item-text: #42526E;
  --aui-item-focus-bg: rgba(9, 30, 66, 0.08);
  --aui-item-focus-text: #42526E;
  --aui-item-active-text: #0052CC;
  --aui-item-active-bg: #DEEBFF;
  --aui-item-selected-bg: var(--aui-item-focus-bg);
  --aui-item-selected-text: var(--aui-item-focus-text);
  --aui-item-disabled-bg: transparent;
  --aui-item-disabled-text: #7A869A;
  --aui-tooltip-bg-color: #172B4D;
  --aui-tooltip-border-color: #172B4D;
  --aui-tooltip-content-text-color: #FFFFFF;
  --aui-tooltip-title-text-color: #FFFFFF;
  --aui-help-color: #5243AA;
  --aui-badge-bg-color: rgba(9, 30, 66, 0.13);
  --aui-badge-text-color: #172B4D;
  --aui-badge-primary-bg-color: #0052CC;
  --aui-badge-primary-text-color: #FFFFFF;
  --aui-badge-added-bg-color: #E3FCEF;
  --aui-badge-addded-text-color: #006644;
  --aui-badge-removed-bg-color: #FFEBE6;
  --aui-badge-removed-text-color: #BF2600;
  --aui-badge-important-bg-color: #DE350B;
  --aui-badge-important-text-color: #FFFFFF;
  --aui-badge-on-blue-text-color: #FFFFFF;
  --aui-badge-on-blue-bg-color: rgba(255, 255, 255, 0.25);
  --aui-avatar-outline: #FFFFFF;
  --aui-avatar-text: #7A869A;
  --aui-lozenge-bg-color: #42526E;
  --aui-lozenge-text-color: #FFFFFF;
  --aui-lozenge-subtle-bg-color: #DFE1E6;
  --aui-lozenge-subtle-text-color: #42526E;
  --aui-lozenge-success-bg-color: #00875A;
  --aui-lozenge-success-text-color: #FFFFFF;
  --aui-lozenge-success-subtle-bg-color: #E3FCEF;
  --aui-lozenge-success-subtle-text-color: #006644;
  --aui-lozenge-current-bg-color: #0052CC;
  --aui-lozenge-current-text-color: #FFFFFF;
  --aui-lozenge-current-subtle-bg-color: #DEEBFF;
  --aui-lozenge-current-subtle-text-color: #0747A6;
  --aui-lozenge-moved-bg-color: #FF991F;
  --aui-lozenge-moved-text-color: #172B4D;
  --aui-lozenge-moved-subtle-bg-color: #FFF0B3;
  --aui-lozenge-moved-subtle-text-color: #172B4D;
  --aui-lozenge-error-bg-color: #BF2600;
  --aui-lozenge-error-text-color: #FFFFFF;
  --aui-lozenge-error-subtle-bg-color: #FFEBE6;
  --aui-lozenge-error-subtle-text-color: #BF2600;
  --aui-lozenge-new-bg-color: #5243AA;
  --aui-lozenge-new-text-color: #FFFFFF;
  --aui-lozenge-new-subtle-bg-color: #EAE6FF;
  --aui-lozenge-new-subtle-text-color: #403294;
  --aui-message-info-bg-color: #DEEBFF;
  --aui-message-info-icon-color: #0052CC;
  --aui-message-info-text-color: #344563;
  --aui-message-success-bg-color: #E3FCEF;
  --aui-message-success-icon-color: #00875A;
  --aui-message-success-text-color: #344563;
  --aui-message-warning-bg-color: #FFFAE6;
  --aui-message-warning-icon-color: #FF991F;
  --aui-message-warning-text-color: #344563;
  --aui-message-error-bg-color: #FFEBE6;
  --aui-message-error-icon-color: #DE350B;
  --aui-message-error-text-color: #344563;
  --aui-message-change-bg-color: #EAE6FF;
  --aui-message-change-icon-color: #5243AA;
  --aui-message-change-text-color: #344563;
  --aui-banner-error-bg-color: #DE350B;
  --aui-banner-error-text-color: #FFFFFF;
  --aui-flag-bg-color: var(--aui-dropdown-bg-color);
  --aui-flag-info-color: #0052CC;
  --aui-flag-success-color: #36B37E;
  --aui-flag-warning-color: #FFAB00;
  --aui-flag-error-color: #FF5630;
  --aui-button-default-bg-color: rgba(9, 30, 66, 0.08);
  --aui-button-default-text-color: #344563;
  --aui-button-default-hover-bg-color: rgba(9, 30, 66, 0.13);
  --aui-button-default-active-bg-color: #DEEBFF;
  --aui-button-default-active-text-color: #0052CC;
  --aui-button-default-selected-bg-color: #344563;
  --aui-button-default-selected-text-color: #FFFFFF;
  --aui-button-default-disabled-bg-color: rgba(9, 30, 66, 0.04);
  --aui-button-default-disabled-text-color: #A5ADBA;
  --aui-button-primary-bg-color: #0052CC;
  --aui-button-primary-text-color: #FFFFFF;
  --aui-button-primary-hover-bg-color: #0065FF;
  --aui-button-primary-active-bg-color: #0052CC;
  --aui-button-primary-active-text-color: #FFFFFF;
  --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
  --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
  --aui-button-light-bg-color: #FFFFFF;
  --aui-button-subtle-text-color: #344563;
  --aui-label-text-color: inherit;
  --aui-label-link-color: inherit;
  --aui-label-bg-color: #F4F5F7;
  --aui-label-hover-bg-color: #F4F5F7;
  --aui-label-close-hover-bg-color: #FFBDAD;
  --aui-label-close-hover-text-color: #172B4D;
  --aui-form-placeholder-text-color: #5E6C84;
  --aui-form-placeholder-disabled-text-color: #A5ADBA;
  --aui-form-label-text-color: #6B778C;
  --aui-form-error-text-color: #DE350B;
  --aui-form-description-text-color: #6B778C;
  --aui-form-disabled-field-bg-color: #F4F5F7;
  --aui-form-disabled-field-text-color: #97A0AF;
  --aui-form-disabled-field-label-color: #97A0AF;
  --aui-form-field-border-color: #DFE1E6;
  --aui-form-field-hover-border-color: #DFE1E6;
  --aui-form-field-default-text-color: #172B4D;
  --aui-form-field-default-bg-color: #FAFBFC;
  --aui-form-field-hover-text-color: var(--aui-form-field-default-text-color);
  --aui-form-field-hover-bg-color: #EBECF1;
  --aui-form-field-focus-bg-color: #FFFFFF;
  --aui-form-select-bg-color: #EBECF1;
  --aui-form-select-border-color: #EBECF1;
  --aui-form-select-hover-bg-color: #DFE1E6;
  --aui-form-checkbox-radio-hover-bg-color: #0065FF;
  --aui-form-checkbox-radio-active-bg-color: #DEEBFF;
  --aui-form-optgroup-text-color: #7A869A;
  --aui-form-optgroup-bg-color: #F4F5F7;
  --aui-form-option-bg-color: #FFFFFF;
  --aui-form-pre-bg-color: #F4F5F7;
  --aui-form-field-autofilled-bg-color: #EAE6FF;
  --aui-form-field-autofilled-border-color: #6554C0;
  --aui-form-field-autofilled-text-color: #403294;
  --aui-form-glyph-disabled-icon-color: #A5ADBA;
  --aui-form-glyph-disabled-fill-color: rgba(9, 30, 66, 0.04);
  --aui-form-glyph-icon-color: #FFFFFF;
  --aui-form-glyph-fill-color: #0052CC;
  --aui-form-checkbox-active-bg-color: #DEEBFF;
  --aui-form-checkbox-active-border-color: #DEEBFF;
  --aui-form-checkbox-active-icon-color: #0052CC;
  --aui-form-radio-unchecked-bg-color: #FAFBFC;
  --aui-form-radio-unchecked-border-color: #DFE1E6;
  --aui-form-radio-unchecked-hover-bg-color: #EBECF1;
  --aui-form-radio-unchecked-hover-border-color: #DFE1E6;
  --aui-toggle-default-bg-color: #6B778C;
  --aui-toggle-default-bg-hover-color: #A5ADBA;
  --aui-toggle-button-color: #FFFFFF;
  --aui-toggle-on-color: #00875A;
  --aui-toggle-on-hover-color: #36B37E;
  --aui-toggle-disabled-overlay-color: rgba(255, 255, 255, 0.5);
  --aui-toggle-tick-color: #FFFFFF;
  --aui-toggle-cross-color: #FFFFFF;
  --aui-form-notification-info-color: #97A0AF;
  --aui-form-notification-error-color: var(--aui-message-error-icon-color);
  --aui-form-notification-success-color: var(--aui-message-success-icon-color);
  --aui-progressbar-color: #42526E;
  --aui-progressbar-track-color: rgba(9, 30, 66, 0.13);
  --aui-spinner-color: #42526E;
  --aui-nav-pagination-text-color: #172B4D;
  --aui-nav-pagination-active-text-color: #97A0AF;
  --aui-appheader-bg-color: #0747A6;
  --aui-appheader-text-color: #DEEBFF;
  --aui-appheader-item-focus-bg-color: rgba(9, 30, 66, 0.48);
  --aui-appheader-item-focus-text-color: #DEEBFF;
  --aui-appheader-item-active-bg-color: rgba(9, 30, 66, 0.48);
  --aui-appheader-item-active-text-color: #DEEBFF;
  --aui-appheader-quicksearch-bg-color: rgba(9, 30, 66, 0.48);
  --aui-appheader-quicksearch-border-color: transparent;
  --aui-appheader-quicksearch-text-color: #DEEBFF;
  --aui-appheader-quicksearch-placeholder-text-color: #97A0AF;
  --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
  --aui-appheader-quicksearch-focus-text-color: #DEEBFF;
  --aui-sidebar-icon-color: #505F79;
  --aui-sidebar-toggle-icon-color: #505F79;
  --aui-sidebar-bg-color: #F4F5F7;
  --aui-sidebar-dropdown-arrow-color: #505F79;
  --aui-sidebar-tooltip-bg-color: rgba(9, 30, 66, 0.95);
  --aui-sidebar-badge-bg-color: #C1C7D0;
  --aui-sidebar-badge-text-color: inherit;
  --aui-tabs-tab-border-color: #EBECF1;
  --aui-tabs-tab-text-color: #42526E;
  --aui-tabs-tab-hover-text-color: #4C9AFF;
  --aui-tabs-tab-active-border-color: #0052CC;
  --aui-tabs-tab-active-text-color: #0052CC;
  --aui-progress-tracker-step-border-color: #F4F5F7;
  --aui-progress-tracker-container-color: #F4F5F7;
  --aui-progress-tracker-current-step-color: #0065FF;
  --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
  --aui-progress-tracker-visited-step-text-color: #172B4D;
  --aui-progress-tracker-visited-step-hover-text-color: #0052CC;
  --aui-progress-tracker-visited-step-active-text-color: #0747A6;
  --aui-progress-tracker-future-step-color: #A5ADBA;
  --aui-progress-tracker-future-step-text-color: #5E6C84;
  --aui-table-row-bg-color: transparent;
  --aui-table-row-text-color: #172B4D;
  --aui-table-header-bg-color: transparent;
  --aui-table-heading-text-color: #6B778C;
  --aui-table-border-color: #DFE1E6;
  --aui-table-caption-bg-color: #F4F5F7;
  --aui-table-caption-text-color: #7A869A;
  --aui-table-list-row-hover-color: rgba(9, 30, 66, 0.08);
  --aui-table-list-row-subtle-color: #B3BAC5;
  --aui-table-sortable-hover-bg-color: rgba(9, 30, 66, 0.08);
  --aui-table-sortable-active-bg-color: #DEEBFF;
  --aui-table-sortable-active-border-color: #0747A6;
  --aui-table-sortable-active-text-color: #0747A6;
  --aui-table-sortable-selected-bg-color: transparent;
  --aui-table-sortable-selected-border-color: #7A869A;
  --aui-table-sortable-selected-text-color: #505F79;
  --aui-restfultable-row-focused-border-color: #B3BAC5;
  --aui-restfultable-row-create-border-color: #DFE1E6;
  --aui-restfultable-row-editable-hover-bg-color: var(--aui-form-field-hover-bg-color);
  --aui-restfultable-error-text-color: var(--aui-form-notification-error-color);
  --aui-restfultable-header-row-bg-color: #FFFFFF;
  --aui-restfultable-header-row-text-color: #6B778C;
  --aui-restfultable-row-moving-bg-color: #F4F5F7;
  --aui-restfultable-editable-em-text-color: #97A0AF;
  --aui-restfultable-row-active-bg-color: #F4F5F7;
  --aui-restfultable-row-hover-bg-color: #F4F5F7;
  --aui-dropdown-bg-color: #FFFFFF;
  --aui-dropdown-border-color: #DFE1E6;
  --aui-select2-placeholder-text-color: #7A869A;
  --aui-select2-chosen-bg-color: #FFFFFF;
  --aui-select2-chosen-text-color: #172B4D;
  --aui-select2-chosen-hover-bg-color: #FFFFFF;
  --aui-select2-chosen-hover-text-color: #172B4D;
  --aui-select2-active-chosen-bg-color: #DFE1E6;
  --aui-select2-active-chosen-text-color: #172B4D;
  --aui-select2-field-default-bg-color: var(--aui-form-select-bg-color);
  --aui-select2-field-border-color: var(--aui-form-select-border-color);
  --aui-select2-field-hover-bg-color: var(--aui-form-select-hover-bg-color);
  --aui-select2-drop-bg-color: var(--aui-dropdown-bg-color);
  --aui-dialog-bg-color: #FFFFFF;
  --aui-dialog-border-color: #EBECF1;
  --aui-dialog-header-bg-color: var(--aui-dialog-bg-color);
  --aui-dialog-header-warning-bg-color: #DE350B;
  --aui-dialog-header-warning-text-color: #FFFFFF;
  --aui-dialog-button-hover-border-color: #97A0AF;
  --aui-dialog-footer-hint-text-color: #505F79;
  --aui-inline-dialog-bg-color: var(--aui-dropdown-bg-color);
  --aui-inline-dialog-border-color: var(--aui-dropdown-border-color);
  --aui-datepicker-panel-bg-color: #FFFFFF;
  --aui-datepicker-panel-divider-color: #DFE1E6;
  --aui-datepicker-heading-bg-color: #F4F5F7;
  --aui-datepicker-heading-text-color: #344563;
  --aui-datepicker-heading-weekdays-text-color: #5E6C84;
  --aui-datepicker-option-bg-color: transparent;
  --aui-datepicker-option-text-color: #0052CC;
  --aui-datepicker-option-focus-bg-color: #F4F5F7;
  --aui-datepicker-option-focus-text-color: #0052CC;
  --aui-datepicker-option-selected-bg-color: #0052CC;
  --aui-datepicker-option-selected-text-color: #FFFFFF;
  --aui-datepicker-option-unselectable-bg-color: #F4F5F7;
  --aui-datepicker-option-unselectable-text-color: #7A869A;
  --aui-datepicker-disabled-text-color: #7A869A;
  --aui-datepicker-hint-text-color: #505F79;
}
/**
 * RESET
 */
html,
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
img,
pre,
form,
fieldset {
  margin: 0;
  padding: 0;
}
ul,
ol,
dl {
  margin: 0;
}
img,
fieldset {
  border: 0;
}
details,
summary,
main {
  display: block;
}
progress {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: button;
  font-family: inherit;
}
@media all and (min--moz-device-pixel-ratio: 0) {
  img {
    font-size: 0;
  }
  img:-moz-broken {
    font-size: inherit;
  }
}
[hidden] {
  display: none !important;
}

.aui-browser-focus button::-moz-focus-inner,
.aui-browser-focus input::-moz-focus-inner {
  border: 0;
}
.aui-browser-focus :focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--aui-focus);
  outline-offset: 1px;
  -moz-outline-radius: 3px;
  outline-radius: 3px;
}
html:not(.aui-no-focusvisible) .aui-browser-focus :focus:not(:focus-visible) {
  outline: unset;
  outline-offset: unset;
}
html:not(.aui-no-focusvisible) .aui-browser-focus :focus-visible {
  outline-style: none;
  box-shadow: 0 0 0 2px var(--aui-focus);
}