dialog.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 11.x core/themes/claro/css/components/dialog.css
  3. 11.x core/themes/starterkit_theme/css/components/dialog.css
  4. 11.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  5. 11.x core/themes/admin/migration/css/components/dialog.css
  6. 11.x core/themes/admin/css/components/dialog.css
Same filename and directory in other branches
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 10 core/themes/claro/css/components/dialog.css
  3. 10 core/themes/starterkit_theme/css/components/dialog.css
  4. 10 core/assets/vendor/jquery.ui/themes/base/dialog.css
  5. 9 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  6. 9 core/themes/seven/css/components/dialog.css
  7. 9 core/themes/claro/css/components/dialog.css
  8. 9 core/themes/bartik/css/classy/components/dialog.css
  9. 9 core/themes/starterkit_theme/css/components/dialog.css
  10. 9 core/themes/classy/css/components/dialog.css
  11. 9 core/assets/vendor/jquery.ui/themes/base/dialog.css
  12. 9 core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  13. 9 core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  14. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  15. 8.9.x core/themes/seven/css/components/dialog.css
  16. 8.9.x core/themes/claro/css/components/dialog.css
  17. 8.9.x core/themes/bartik/css/classy/components/dialog.css
  18. 8.9.x core/themes/classy/css/components/dialog.css
  19. 8.9.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  20. 8.9.x core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  21. 8.9.x core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  22. main core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  23. main core/themes/claro/css/components/dialog.css
  24. main core/themes/starterkit_theme/css/components/dialog.css
  25. main core/assets/vendor/jquery.ui/themes/base/dialog.css
  26. main core/themes/admin/migration/css/components/dialog.css
  27. main core/themes/admin/migration/css/theme/dialog.css
  28. main core/themes/admin/css/components/dialog.css
/* cspell:ignore tablesaw */

.ui-dialog a,
.ui-dialog .link,
.ui-dialog button.link,
.ui-dialog .tabs__link.is-active,
.ui-dialog [open] .gin-details__summary--accordion,
.ui-dialog [open] .gin-details__summary--accordion-item,
.ui-dialog [open] .gin-details__summary--vertical-tabs-item,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
  color: var(--gin-color-primary);
  text-decoration-style: var(--gin-link-decoration-style);
}

.ui-dialog a:hover,
.ui-dialog .link:hover,
.ui-dialog button.link:hover,
.ui-dialog .tabs__link.is-active:hover,
.ui-dialog [open] .gin-details__summary--accordion:hover,
.ui-dialog [open] .gin-details__summary--accordion-item:hover,
.ui-dialog [open] .gin-details__summary--vertical-tabs-item:hover,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
  color: var(--gin-color-primary-hover);
}

.ui-dialog a:active,
.ui-dialog .link:active,
.ui-dialog button.link:active,
.ui-dialog .tabs__link.is-active:active,
.ui-dialog [open] .gin-details__summary--accordion:active,
.ui-dialog [open] .gin-details__summary--accordion-item:active,
.ui-dialog [open] .gin-details__summary--vertical-tabs-item:active,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:active {
  color: var(--gin-color-primary-active);
}

.ui-dialog *|*:any-link:not(svg|a) {
  text-decoration: underline;
  text-decoration-style: var(--gin-link-decoration-style);
}

.ui-dialog .is-horizontal .tabs__link:hover,
.ui-dialog .gin-details__summary:hover,
.ui-dialog .action-link:hover {
  color: var(--gin-color-primary-hover);
}

.ui-dialog .gin-details[open] > .gin-details__summary:focus {
  color: var(--gin-color-primary-active);
}

.ui-dialog .form-boolean--type-checkbox:checked,
.ui-dialog .form-boolean--type-radio:checked:not(:disabled),
.ui-dialog .is-horizontal .tabs__link.is-active::before,
.ui-dialog .tabs__tab.is-active::before,
.ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after,
.ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after,
.ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,
.ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
  border-color: var(--gin-color-primary);
}

.ui-dialog .form-boolean--type-checkbox:checked:hover,
.ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover,
.ui-dialog .is-horizontal .tabs__link.is-active::before:hover,
.ui-dialog .tabs__tab.is-active::before:hover,
.ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after:hover,
.ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after:hover,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after:hover,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after:hover,
.ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after:hover,
.ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after:hover,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:hover {
  border-color: var(--gin-color-primary-hover);
}

.ui-dialog .form-boolean--type-checkbox:checked:active,
.ui-dialog .form-boolean--type-radio:checked:not(:disabled):active,
.ui-dialog .is-horizontal .tabs__link.is-active::before:active,
.ui-dialog .tabs__tab.is-active::before:active,
.ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after:active,
.ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after:active,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after:active,
.ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after:active,
.ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after:active,
.ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after:active,
.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:active {
  border-color: var(--gin-color-primary-active);
}

.ui-dialog .form-element {
  box-sizing: border-box;
  min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
  color: var(--gin-color-text);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-m);
  background-color: var(--gin-bg-input);
  line-height: var(--input-line-height);
  padding-block: calc(var(--input-padding-vertical) - 1px);
  padding-inline: var(--input-padding-horizontal);
}

@media (prefers-reduced-motion: no-preference) {
  .ui-dialog .form-element {
    transition: var(--gin-transition);
  }
}

.ui-dialog .form-element:hover {
  border-color: var(--gin-color-text);
  box-shadow: inset 0 0 0 1px var(--gin-color-text);
}

.ui-dialog .form-element--small,
.ui-dialog .form-element--extrasmall {
  border-radius: var(--gin-border-s);
  font-size: var(--gin-font-size-s);
  line-height: 1.5;
}

.ui-dialog .form-element[disabled],
.ui-dialog .form-element[disabled]:hover {
  cursor: not-allowed;
  color: var(--gin-color-disabled);
  border-color: var(--gin-color-disabled-border);
  background-color: var(--gin-color-disabled-bg) !important;
  box-shadow: none;
}

.gin--dark-mode .ui-dialog .form-element {
  color-scheme: dark;
}

.ui-dialog .form-textarea-wrapper {
  border-radius: var(--gin-border-m);
}

.ui-dialog .form-textarea-wrapper textarea {
  max-width: 100%;
}

.ui-dialog .form-item--editor-format,
.ui-dialog .form-element--editor-format {
  width: auto;
}

.ui-dialog .form-item--editor-format .form-item__label,
.ui-dialog .form-element--editor-format .form-item__label {
  inset-block-start: 3px;
  padding-block-end: 0;
}

.ui-dialog .password-field {
  width: 100%;
}

.ui-dialog .password-confirm {
  width: 100%;
  max-width: var(--gin-max-line-length);
}

.ui-dialog .password-strength__title {
  color: var(--gin-color-text-light);
}

.ui-dialog .password-strength__text {
  color: var(--gin-color-title);
}

.ui-dialog .password-suggestions {
  color: var(--gin-color-text-light);
  border: 1px solid var(--gin-border-color-layer2);
  background-color: transparent;
}

.ui-dialog .form-element--type-select {
  padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
}

.gin--dark-mode .ui-dialog .form-element--type-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
}

.ui-dialog .form-element--type-select--small {
  min-height: 2.25rem;
  font-size: var(--gin-font-size-xs);
  line-height: 1.4;
  padding-block: 0.474rem;
}

[dir="ltr"] .ui-dialog .form-element--type-select--small {
  background-position: 100% 52%;
}

[dir="rtl"] .ui-dialog .form-element--type-select--small {
  background-position: 0% 52%;
}

.ui-dialog .form-boolean {
  width: 21px;
  height: 21px;
  border-color: var(--gin-border-color-form-element);
  border-radius: var(--gin-border-xs);
}

.gin--dark-mode .ui-dialog .form-boolean--type-checkbox:not(:checked) {
  background: var(--gin-bg-input);
}

.ui-dialog .form-boolean--type-checkbox:checked {
  background-color: var(--gin-color-primary);
}

.gin--dark-mode .ui-dialog .form-boolean--type-checkbox:checked:not(:disabled) {
  background-image: url("../../media/sprite.svg#checked-view");
}

.ui-dialog .form-boolean--type-checkbox:checked:hover {
  background-color: var(--gin-color-primary-hover);
}

.ui-dialog .form-boolean--type-checkbox:checked:active {
  background-color: var(--gin-color-primary-active);
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {
  position: relative;
  margin-inline-start: 0;
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 2.5rem;
  height: 1.5rem;
  cursor: pointer;
  vertical-align: top;
  border: 3px solid transparent;
  border-radius: var(--gin-border-l);
  background-color: var(--gin-color-disabled);
  all: unset;
  appearance: none;
  clip-path: circle(var(--gin-spacing-l) at 50% 50%);
}

.gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {
  background-color: var(--gin-bg-input);
}

@media (forced-colors: active) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {
    border-width: 2px;
  }
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 21px;
  background-color: #fff;
}

[dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
  transform: translateX(-16px);
}

[dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
  transform: translateX(16px);
}

@media (prefers-reduced-motion: no-preference) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
    transition: transform 0.3s;
  }
}

.gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
  background-color: var(--gin-border-color-form-element);
}

@media (forced-colors: active) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {
    background-color: CanvasText;
  }
}

@media (forced-colors: active) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    transition: transform 0.3s;
    background-color: Canvas;
    -webkit-mask-image: url("../../media/sprite.svg#toggle-unchecked-view");
    mask-image: url("../../media/sprite.svg#toggle-unchecked-view");
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-position: 17px 2px;
    mask-position: 17px 2px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {
    transform: translateX(-16px);
  }

  [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {
    transform: translateX(16px);
  }
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled {
  cursor: not-allowed;
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:hover {
  opacity: 0.9;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:active,
.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:focus {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked {
  background-color: var(--gin-switch);
}

.gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked {
  background-color: var(--gin-color-primary-light-active);
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
  background-color: #fff;
}

[dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
  transform: translateX(16px);
}

[dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
  transform: translateX(-16px);
}

.gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
  background-color: var(--gin-color-primary-hover);
}

.gin--high-contrast-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
  background-color: var(--gin-border-color);
}

@media (forced-colors: active) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {
    padding-inline-start: var(--gin-spacing-xs);
    background-color: LinkText !important;
  }
}

@media (forced-colors: active) {
  .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {
    -webkit-mask-image: url("../../media/sprite.svg#checked-view");
    mask-image: url("../../media/sprite.svg#checked-view");
    -webkit-mask-position: 2px 2px;
    mask-position: 2px 2px;
  }

  [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {
    transform: translateX(16px);
  }

  [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {
    transform: translateX(-16px);
  }
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled {
  opacity: 0.75;
  background-color: var(--gin-color-disabled);
  box-shadow: none;
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled::before {
  opacity: 0.6;
  background-color: #fff;
}

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox label {
  position: relative;
  z-index: 1;
  padding-block-end: 0;
  padding-inline-start: var(--gin-spacing-xxs);
  color: var(--gin-color-text);
}

.ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
  margin-inline-start: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--gin-spacing-m));
}

.gin--dark-mode .ui-dialog .form-boolean:hover,
.gin--dark-mode .ui-dialog .form-boolean:active {
  border-color: var(--gin-color-text);
  box-shadow: none;
}

.ui-dialog .form-boolean--type-radio,
.ui-dialog .form-boolean--type-radio:hover,
.ui-dialog .form-boolean--type-radio:active,
.ui-dialog .form-boolean--type-radio:focus,
.ui-dialog .form-boolean--type-radio:hover:focus {
  border-color: var(--gin-border-color-form-element);
  border-radius: 50%;
  background-color: var(--gin-bg-input);
  background-image: none;
}

.ui-dialog .form-boolean--type-radio:hover {
  box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);
}

.ui-dialog .form-boolean--type-radio:hover,
.gin--dark-mode .ui-dialog .form-boolean--type-radio:hover {
  border-color: var(--gin-color-text);
}

.ui-dialog .form-boolean--type-radio:active,
.ui-dialog .form-boolean--type-radio:focus {
  box-shadow:
    inset 0 0 0 1px var(--gin-border-color-layer2),
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.ui-dialog .form-boolean--type-radio:checked:not(:disabled),
.ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover {
  background-color: var(--gin-bg-layer);
  background-image: none;
  box-shadow: inset 0 0 0 5px var(--gin-color-primary);
}

.ui-dialog .form-boolean--type-radio:checked:not(:disabled):active,
.ui-dialog .form-boolean--type-radio:checked:not(:disabled):focus,
.ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover:focus {
  border-color: var(--gin-color-focus-border);
  box-shadow:
    inset 0 0 0 5px var(--gin-color-primary),
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.ui-dialog .form-boolean--type-radio:disabled,
.ui-dialog .form-boolean--type-radio:disabled:hover {
  cursor: not-allowed;
  border-color: var(--gin-color-disabled-border);
  background: var(--gin-color-disabled-bg);
}

.ui-dialog .form-boolean--type-radio:checked:disabled,
.ui-dialog .form-boolean--type-radio:checked:disabled:hover {
  background: var(--gin-color-disabled);
  box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
}

.ui-dialog .form-boolean--type-checkbox[disabled],
.ui-dialog .form-boolean--type-checkbox[disabled]:hover {
  cursor: not-allowed;
  border-color: var(--gin-color-disabled-border);
  background-color: var(--gin-color-disabled-bg);
}

.ui-dialog .form-boolean--type-checkbox[disabled]:checked,
.ui-dialog .form-boolean--type-checkbox[disabled]:hover:checked {
  border-color: var(--gin-color-disabled-border);
  background-color: var(--gin-color-disabled-bg);
  box-shadow: none;
}

.ui-dialog .form-radios .form-type--boolean,
.ui-dialog .form-checkboxes .form-type--boolean {
  margin-block: var(--gin-spacing-xs);
}

.ui-dialog .form-actions {
  margin-block-end: 0;
}

.ui-dialog .form-edit .form-actions {
  margin-block-end: 0;
  padding: 0;
  border: 0 none;
  background-color: transparent;
}

.ui-dialog fieldset:not(.fieldgroup) {
  padding-block-start: var(--gin-spacing-xs);
  color: var(--gin-color-text-light);
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-m);
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}

.ui-dialog fieldset:not(.fieldgroup) > legend {
  inset-block-start: 20px;
}

.ui-dialog fieldset:not(.fieldgroup) > .fieldset-wrapper {
  margin-block-start: 20px;
}

.ui-dialog fieldset:not(.fieldgroup).error {
  border: 2px solid var(--gin-color-danger);
}

.ui-dialog .fieldset__label,
.ui-dialog .fieldset__label--group,
.ui-dialog .form-item__label {
  margin-block-start: 0;
  margin-block-end: var(--gin-spacing-xs);
  color: var(--gin-color-title);
  font-size: var(--gin-font-size-s);
  font-weight: var(--gin-font-weight-semibold);
}

.ui-dialog .form-item__label.has-error,
.ui-dialog .form-item__error-message {
  color: var(--gin-color-danger);
}

.ui-dialog .form-item__description,
.ui-dialog .fieldset__description,
.ui-dialog .filter-guidelines__item {
  max-width: var(--gin-max-line-length);
  color: var(--gin-color-text-light);
}

.ui-dialog .form-item__label.form-required::after,
.ui-dialog .fieldset__label.form-required::after,
.ui-dialog .form-required > .fieldset__label::after,
.ui-dialog .horizontal-tab-button .form-required::after,
.ui-dialog .vertical-tabs__menu-link .form-required::after {
  content: "*";
  vertical-align: text-top;
  color: var(--gin-color-danger);
  background: none;
  line-height: 1;
  margin-inline: 0.15em;
}

.ui-dialog .gin-details.error {
  border: 2px solid var(--gin-color-danger);
}

.ui-dialog .gin-details__summary:not(.form-required) .required-mark {
  display: none;
}

.ui-dialog .form-item__warning {
  display: inline-block;
  margin-block-start: var(--gin-spacing-xs);
}

.ui-dialog html.js .form-autocomplete {
  padding-inline-end: 36px;
}

.ui-dialog .entity-form-display-form > .form-actions {
  margin-block: 0;
}

.ui-dialog .required-mark::after {
  background: var(--gin-color-danger);
  -webkit-mask-image: url("../../media/sprite.svg#asterisk-view");
  mask-image: url("../../media/sprite.svg#asterisk-view");
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ui-dialog .form-wrapper .form-item__label,
.ui-dialog .form-composite .form-item__label {
  position: relative;
}

.ui-dialog .field--type-text-with-summary .form-item,
.ui-dialog .field--widget-text-textarea .form-item {
  margin-block-end: 0;
}

.ui-dialog .field--type-text-with-summary .filter-wrapper,
.ui-dialog .field--widget-text-textarea .filter-wrapper {
  border: 0 none;
  padding-inline: 0;
}

.ui-dialog .gin-autocomplete {
  width: calc(100% - var(--gin-spacing-m));
}

.ui-dialog .gin-autocomplete .form-autocomplete {
  width: 100%;
}

.ui-dialog .no-touchevents .form-element--type-select.form-element--extrasmall {
  min-height: 1.75rem;
  font-size: var(--gin-font-size-s);
  line-height: 1.5;
}

.ui-dialog #block-gin-content > form > .form-item:first-of-type {
  margin-block-start: 0;
}

.ui-dialog .image-style-new .form-item {
  margin-inline-end: var(--gin-spacing-xxs);
}

.ui-dialog tr .form-item {
  margin-block: 0;
}

.ui-dialog .container-inline .form-item {
  margin-block: var(--gin-spacing-density-s);
}

.ui-dialog .field-plugin-settings-edit-form {
  margin-block-start: var(--gin-spacing-s);
}

.ui-dialog .field-plugin-settings-edit-form .form-item {
  margin-block: var(--gin-spacing-m);
}

.ui-dialog .field-plugin-settings-edit-form .form-boolean-group .form-item {
  margin-block: var(--gin-spacing-xs);
}

.ui-dialog .length-indicator {
  margin-block-end: var(--gin-spacing-l);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/theme/dialog.css

View source 
  1. /* cspell:ignore tablesaw */

  2. 

  3. .ui-dialog a,

  4. .ui-dialog .link,

  5. .ui-dialog button.link,

  6. .ui-dialog .tabs__link.is-active,

  7. .ui-dialog [open] .gin-details__summary--accordion,

  8. .ui-dialog [open] .gin-details__summary--accordion-item,

  9. .ui-dialog [open] .gin-details__summary--vertical-tabs-item,

  10. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {

  11.   color: var(--gin-color-primary);

  12.   text-decoration-style: var(--gin-link-decoration-style);

  13. }

  14. 

  15. .ui-dialog a:hover,

  16. .ui-dialog .link:hover,

  17. .ui-dialog button.link:hover,

  18. .ui-dialog .tabs__link.is-active:hover,

  19. .ui-dialog [open] .gin-details__summary--accordion:hover,

  20. .ui-dialog [open] .gin-details__summary--accordion-item:hover,

  21. .ui-dialog [open] .gin-details__summary--vertical-tabs-item:hover,

  22. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {

  23.   color: var(--gin-color-primary-hover);

  24. }

  25. 

  26. .ui-dialog a:active,

  27. .ui-dialog .link:active,

  28. .ui-dialog button.link:active,

  29. .ui-dialog .tabs__link.is-active:active,

  30. .ui-dialog [open] .gin-details__summary--accordion:active,

  31. .ui-dialog [open] .gin-details__summary--accordion-item:active,

  32. .ui-dialog [open] .gin-details__summary--vertical-tabs-item:active,

  33. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:active {

  34.   color: var(--gin-color-primary-active);

  35. }

  36. 

  37. .ui-dialog *|*:any-link:not(svg|a) {

  38.   text-decoration: underline;

  39.   text-decoration-style: var(--gin-link-decoration-style);

  40. }

  41. 

  42. .ui-dialog .is-horizontal .tabs__link:hover,

  43. .ui-dialog .gin-details__summary:hover,

  44. .ui-dialog .action-link:hover {

  45.   color: var(--gin-color-primary-hover);

  46. }

  47. 

  48. .ui-dialog .gin-details[open] > .gin-details__summary:focus {

  49.   color: var(--gin-color-primary-active);

  50. }

  51. 

  52. .ui-dialog .form-boolean--type-checkbox:checked,

  53. .ui-dialog .form-boolean--type-radio:checked:not(:disabled),

  54. .ui-dialog .is-horizontal .tabs__link.is-active::before,

  55. .ui-dialog .tabs__tab.is-active::before,

  56. .ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after,

  57. .ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after,

  58. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after,

  59. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after,

  60. .ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,

  61. .ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after,

  62. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {

  63.   border-color: var(--gin-color-primary);

  64. }

  65. 

  66. .ui-dialog .form-boolean--type-checkbox:checked:hover,

  67. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover,

  68. .ui-dialog .is-horizontal .tabs__link.is-active::before:hover,

  69. .ui-dialog .tabs__tab.is-active::before:hover,

  70. .ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after:hover,

  71. .ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after:hover,

  72. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after:hover,

  73. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after:hover,

  74. .ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after:hover,

  75. .ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after:hover,

  76. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:hover {

  77.   border-color: var(--gin-color-primary-hover);

  78. }

  79. 

  80. .ui-dialog .form-boolean--type-checkbox:checked:active,

  81. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):active,

  82. .ui-dialog .is-horizontal .tabs__link.is-active::before:active,

  83. .ui-dialog .tabs__tab.is-active::before:active,

  84. .ui-dialog [open] > .gin-details__summary--accordion:not(:focus, :active)::after:active,

  85. .ui-dialog [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after:active,

  86. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after:active,

  87. .ui-dialog .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after:active,

  88. .ui-dialog [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after:active,

  89. .ui-dialog .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after:active,

  90. .ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:active {

  91.   border-color: var(--gin-color-primary-active);

  92. }

  93. 

  94. .ui-dialog .form-element {

  95.   box-sizing: border-box;

  96.   min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));

  97.   color: var(--gin-color-text);

  98.   border: 1px solid var(--gin-border-color-form-element);

  99.   border-radius: var(--gin-border-m);

  100.   background-color: var(--gin-bg-input);

  101.   line-height: var(--input-line-height);

  102.   padding-block: calc(var(--input-padding-vertical) - 1px);

  103.   padding-inline: var(--input-padding-horizontal);

  104. }

  105. 

  106. @media (prefers-reduced-motion: no-preference) {

  107.   .ui-dialog .form-element {

  108.     transition: var(--gin-transition);

  109.   }

  110. }

  111. 

  112. .ui-dialog .form-element:hover {

  113.   border-color: var(--gin-color-text);

  114.   box-shadow: inset 0 0 0 1px var(--gin-color-text);

  115. }

  116. 

  117. .ui-dialog .form-element--small,

  118. .ui-dialog .form-element--extrasmall {

  119.   border-radius: var(--gin-border-s);

  120.   font-size: var(--gin-font-size-s);

  121.   line-height: 1.5;

  122. }

  123. 

  124. .ui-dialog .form-element[disabled],

  125. .ui-dialog .form-element[disabled]:hover {

  126.   cursor: not-allowed;

  127.   color: var(--gin-color-disabled);

  128.   border-color: var(--gin-color-disabled-border);

  129.   background-color: var(--gin-color-disabled-bg) !important;

  130.   box-shadow: none;

  131. }

  132. 

  133. .gin--dark-mode .ui-dialog .form-element {

  134.   color-scheme: dark;

  135. }

  136. 

  137. .ui-dialog .form-textarea-wrapper {

  138.   border-radius: var(--gin-border-m);

  139. }

  140. 

  141. .ui-dialog .form-textarea-wrapper textarea {

  142.   max-width: 100%;

  143. }

  144. 

  145. .ui-dialog .form-item--editor-format,

  146. .ui-dialog .form-element--editor-format {

  147.   width: auto;

  148. }

  149. 

  150. .ui-dialog .form-item--editor-format .form-item__label,

  151. .ui-dialog .form-element--editor-format .form-item__label {

  152.   inset-block-start: 3px;

  153.   padding-block-end: 0;

  154. }

  155. 

  156. .ui-dialog .password-field {

  157.   width: 100%;

  158. }

  159. 

  160. .ui-dialog .password-confirm {

  161.   width: 100%;

  162.   max-width: var(--gin-max-line-length);

  163. }

  164. 

  165. .ui-dialog .password-strength__title {

  166.   color: var(--gin-color-text-light);

  167. }

  168. 

  169. .ui-dialog .password-strength__text {

  170.   color: var(--gin-color-title);

  171. }

  172. 

  173. .ui-dialog .password-suggestions {

  174.   color: var(--gin-color-text-light);

  175.   border: 1px solid var(--gin-border-color-layer2);

  176.   background-color: transparent;

  177. }

  178. 

  179. .ui-dialog .form-element--type-select {

  180.   padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);

  181. }

  182. 

  183. .gin--dark-mode .ui-dialog .form-element--type-select {

  184.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");

  185. }

  186. 

  187. .ui-dialog .form-element--type-select--small {

  188.   min-height: 2.25rem;

  189.   font-size: var(--gin-font-size-xs);

  190.   line-height: 1.4;

  191.   padding-block: 0.474rem;

  192. }

  193. 

  194. [dir="ltr"] .ui-dialog .form-element--type-select--small {

  195.   background-position: 100% 52%;

  196. }

  197. 

  198. [dir="rtl"] .ui-dialog .form-element--type-select--small {

  199.   background-position: 0% 52%;

  200. }

  201. 

  202. .ui-dialog .form-boolean {

  203.   width: 21px;

  204.   height: 21px;

  205.   border-color: var(--gin-border-color-form-element);

  206.   border-radius: var(--gin-border-xs);

  207. }

  208. 

  209. .gin--dark-mode .ui-dialog .form-boolean--type-checkbox:not(:checked) {

  210.   background: var(--gin-bg-input);

  211. }

  212. 

  213. .ui-dialog .form-boolean--type-checkbox:checked {

  214.   background-color: var(--gin-color-primary);

  215. }

  216. 

  217. .gin--dark-mode .ui-dialog .form-boolean--type-checkbox:checked:not(:disabled) {

  218.   background-image: url("../../media/sprite.svg#checked-view");

  219. }

  220. 

  221. .ui-dialog .form-boolean--type-checkbox:checked:hover {

  222.   background-color: var(--gin-color-primary-hover);

  223. }

  224. 

  225. .ui-dialog .form-boolean--type-checkbox:checked:active {

  226.   background-color: var(--gin-color-primary-active);

  227. }

  228. 

  229. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {

  230.   position: relative;

  231.   margin-inline-start: 0;

  232. }

  233. 

  234. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {

  235.   position: relative;

  236.   display: inline-block;

  237.   overflow: hidden;

  238.   box-sizing: border-box;

  239.   width: 2.5rem;

  240.   height: 1.5rem;

  241.   cursor: pointer;

  242.   vertical-align: top;

  243.   border: 3px solid transparent;

  244.   border-radius: var(--gin-border-l);

  245.   background-color: var(--gin-color-disabled);

  246.   all: unset;

  247.   appearance: none;

  248.   clip-path: circle(var(--gin-spacing-l) at 50% 50%);

  249. }

  250. 

  251. .gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {

  252.   background-color: var(--gin-bg-input);

  253. }

  254. 

  255. @media (forced-colors: active) {

  256.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input {

  257.     border-width: 2px;

  258.   }

  259. }

  260. 

  261. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  262.   position: absolute;

  263.   width: 100%;

  264.   height: 100%;

  265.   content: "";

  266.   border-radius: 21px;

  267.   background-color: #fff;

  268. }

  269. 

  270. [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  271.   transform: translateX(-16px);

  272. }

  273. 

  274. [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  275.   transform: translateX(16px);

  276. }

  277. 

  278. @media (prefers-reduced-motion: no-preference) {

  279.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  280.     transition: transform 0.3s;

  281.   }

  282. }

  283. 

  284. .gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  285.   background-color: var(--gin-border-color-form-element);

  286. }

  287. 

  288. @media (forced-colors: active) {

  289.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::before {

  290.     background-color: CanvasText;

  291.   }

  292. }

  293. 

  294. @media (forced-colors: active) {

  295.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {

  296.     position: absolute;

  297.     width: 100%;

  298.     height: 100%;

  299.     content: "";

  300.     transition: transform 0.3s;

  301.     background-color: Canvas;

  302.     -webkit-mask-image: url("../../media/sprite.svg#toggle-unchecked-view");

  303.     mask-image: url("../../media/sprite.svg#toggle-unchecked-view");

  304.     -webkit-mask-size: 16px 16px;

  305.     mask-size: 16px 16px;

  306.     -webkit-mask-position: 17px 2px;

  307.     mask-position: 17px 2px;

  308.     -webkit-mask-repeat: no-repeat;

  309.     mask-repeat: no-repeat;

  310.   }

  311. 

  312.   [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {

  313.     transform: translateX(-16px);

  314.   }

  315. 

  316.   [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input::after {

  317.     transform: translateX(16px);

  318.   }

  319. }

  320. 

  321. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled {

  322.   cursor: not-allowed;

  323. }

  324. 

  325. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:hover {

  326.   opacity: 0.9;

  327.   box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);

  328. }

  329. 

  330. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:active,

  331. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:focus {

  332.   box-shadow:

  333.     0 0 0 1px var(--gin-color-focus-border),

  334.     0 0 0 4px var(--gin-color-focus);

  335. }

  336. 

  337. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked {

  338.   background-color: var(--gin-switch);

  339. }

  340. 

  341. .gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked {

  342.   background-color: var(--gin-color-primary-light-active);

  343. }

  344. 

  345. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  346.   background-color: #fff;

  347. }

  348. 

  349. [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  350.   transform: translateX(16px);

  351. }

  352. 

  353. [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  354.   transform: translateX(-16px);

  355. }

  356. 

  357. .gin--dark-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  358.   background-color: var(--gin-color-primary-hover);

  359. }

  360. 

  361. .gin--high-contrast-mode .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  362.   background-color: var(--gin-border-color);

  363. }

  364. 

  365. @media (forced-colors: active) {

  366.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::before {

  367.     padding-inline-start: var(--gin-spacing-xs);

  368.     background-color: LinkText !important;

  369.   }

  370. }

  371. 

  372. @media (forced-colors: active) {

  373.   .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {

  374.     -webkit-mask-image: url("../../media/sprite.svg#checked-view");

  375.     mask-image: url("../../media/sprite.svg#checked-view");

  376.     -webkit-mask-position: 2px 2px;

  377.     mask-position: 2px 2px;

  378.   }

  379. 

  380.   [dir="ltr"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {

  381.     transform: translateX(16px);

  382.   }

  383. 

  384.   [dir="rtl"] .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:checked::after {

  385.     transform: translateX(-16px);

  386.   }

  387. }

  388. 

  389. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled {

  390.   opacity: 0.75;

  391.   background-color: var(--gin-color-disabled);

  392.   box-shadow: none;

  393. }

  394. 

  395. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox input:disabled::before {

  396.   opacity: 0.6;

  397.   background-color: #fff;

  398. }

  399. 

  400. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox label {

  401.   position: relative;

  402.   z-index: 1;

  403.   padding-block-end: 0;

  404.   padding-inline-start: var(--gin-spacing-xxs);

  405.   color: var(--gin-color-text);

  406. }

  407. 

  408. .ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {

  409.   margin-inline-start: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--gin-spacing-m));

  410. }

  411. 

  412. .gin--dark-mode .ui-dialog .form-boolean:hover,

  413. .gin--dark-mode .ui-dialog .form-boolean:active {

  414.   border-color: var(--gin-color-text);

  415.   box-shadow: none;

  416. }

  417. 

  418. .ui-dialog .form-boolean--type-radio,

  419. .ui-dialog .form-boolean--type-radio:hover,

  420. .ui-dialog .form-boolean--type-radio:active,

  421. .ui-dialog .form-boolean--type-radio:focus,

  422. .ui-dialog .form-boolean--type-radio:hover:focus {

  423.   border-color: var(--gin-border-color-form-element);

  424.   border-radius: 50%;

  425.   background-color: var(--gin-bg-input);

  426.   background-image: none;

  427. }

  428. 

  429. .ui-dialog .form-boolean--type-radio:hover {

  430.   box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);

  431. }

  432. 

  433. .ui-dialog .form-boolean--type-radio:hover,

  434. .gin--dark-mode .ui-dialog .form-boolean--type-radio:hover {

  435.   border-color: var(--gin-color-text);

  436. }

  437. 

  438. .ui-dialog .form-boolean--type-radio:active,

  439. .ui-dialog .form-boolean--type-radio:focus {

  440.   box-shadow:

  441.     inset 0 0 0 1px var(--gin-border-color-layer2),

  442.     0 0 0 1px var(--gin-color-focus-border),

  443.     0 0 0 4px var(--gin-color-focus);

  444. }

  445. 

  446. .ui-dialog .form-boolean--type-radio:checked:not(:disabled),

  447. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover {

  448.   background-color: var(--gin-bg-layer);

  449.   background-image: none;

  450.   box-shadow: inset 0 0 0 5px var(--gin-color-primary);

  451. }

  452. 

  453. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):active,

  454. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):focus,

  455. .ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover:focus {

  456.   border-color: var(--gin-color-focus-border);

  457.   box-shadow:

  458.     inset 0 0 0 5px var(--gin-color-primary),

  459.     0 0 0 1px var(--gin-color-focus-border),

  460.     0 0 0 4px var(--gin-color-focus);

  461. }

  462. 

  463. .ui-dialog .form-boolean--type-radio:disabled,

  464. .ui-dialog .form-boolean--type-radio:disabled:hover {

  465.   cursor: not-allowed;

  466.   border-color: var(--gin-color-disabled-border);

  467.   background: var(--gin-color-disabled-bg);

  468. }

  469. 

  470. .ui-dialog .form-boolean--type-radio:checked:disabled,

  471. .ui-dialog .form-boolean--type-radio:checked:disabled:hover {

  472.   background: var(--gin-color-disabled);

  473.   box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

  474. }

  475. 

  476. .ui-dialog .form-boolean--type-checkbox[disabled],

  477. .ui-dialog .form-boolean--type-checkbox[disabled]:hover {

  478.   cursor: not-allowed;

  479.   border-color: var(--gin-color-disabled-border);

  480.   background-color: var(--gin-color-disabled-bg);

  481. }

  482. 

  483. .ui-dialog .form-boolean--type-checkbox[disabled]:checked,

  484. .ui-dialog .form-boolean--type-checkbox[disabled]:hover:checked {

  485.   border-color: var(--gin-color-disabled-border);

  486.   background-color: var(--gin-color-disabled-bg);

  487.   box-shadow: none;

  488. }

  489. 

  490. .ui-dialog .form-radios .form-type--boolean,

  491. .ui-dialog .form-checkboxes .form-type--boolean {

  492.   margin-block: var(--gin-spacing-xs);

  493. }

  494. 

  495. .ui-dialog .form-actions {

  496.   margin-block-end: 0;

  497. }

  498. 

  499. .ui-dialog .form-edit .form-actions {

  500.   margin-block-end: 0;

  501.   padding: 0;

  502.   border: 0 none;

  503.   background-color: transparent;

  504. }

  505. 

  506. .ui-dialog fieldset:not(.fieldgroup) {

  507.   padding-block-start: var(--gin-spacing-xs);

  508.   color: var(--gin-color-text-light);

  509.   border-color: var(--gin-border-color);

  510.   border-radius: var(--gin-border-m);

  511.   background: transparent;

  512.   box-shadow: none;

  513.   padding-inline: 0;

  514. }

  515. 

  516. .ui-dialog fieldset:not(.fieldgroup) > legend {

  517.   inset-block-start: 20px;

  518. }

  519. 

  520. .ui-dialog fieldset:not(.fieldgroup) > .fieldset-wrapper {

  521.   margin-block-start: 20px;

  522. }

  523. 

  524. .ui-dialog fieldset:not(.fieldgroup).error {

  525.   border: 2px solid var(--gin-color-danger);

  526. }

  527. 

  528. .ui-dialog .fieldset__label,

  529. .ui-dialog .fieldset__label--group,

  530. .ui-dialog .form-item__label {

  531.   margin-block-start: 0;

  532.   margin-block-end: var(--gin-spacing-xs);

  533.   color: var(--gin-color-title);

  534.   font-size: var(--gin-font-size-s);

  535.   font-weight: var(--gin-font-weight-semibold);

  536. }

  537. 

  538. .ui-dialog .form-item__label.has-error,

  539. .ui-dialog .form-item__error-message {

  540.   color: var(--gin-color-danger);

  541. }

  542. 

  543. .ui-dialog .form-item__description,

  544. .ui-dialog .fieldset__description,

  545. .ui-dialog .filter-guidelines__item {

  546.   max-width: var(--gin-max-line-length);

  547.   color: var(--gin-color-text-light);

  548. }

  549. 

  550. .ui-dialog .form-item__label.form-required::after,

  551. .ui-dialog .fieldset__label.form-required::after,

  552. .ui-dialog .form-required > .fieldset__label::after,

  553. .ui-dialog .horizontal-tab-button .form-required::after,

  554. .ui-dialog .vertical-tabs__menu-link .form-required::after {

  555.   content: "*";

  556.   vertical-align: text-top;

  557.   color: var(--gin-color-danger);

  558.   background: none;

  559.   line-height: 1;

  560.   margin-inline: 0.15em;

  561. }

  562. 

  563. .ui-dialog .gin-details.error {

  564.   border: 2px solid var(--gin-color-danger);

  565. }

  566. 

  567. .ui-dialog .gin-details__summary:not(.form-required) .required-mark {

  568.   display: none;

  569. }

  570. 

  571. .ui-dialog .form-item__warning {

  572.   display: inline-block;

  573.   margin-block-start: var(--gin-spacing-xs);

  574. }

  575. 

  576. .ui-dialog html.js .form-autocomplete {

  577.   padding-inline-end: 36px;

  578. }

  579. 

  580. .ui-dialog .entity-form-display-form > .form-actions {

  581.   margin-block: 0;

  582. }

  583. 

  584. .ui-dialog .required-mark::after {

  585.   background: var(--gin-color-danger);

  586.   -webkit-mask-image: url("../../media/sprite.svg#asterisk-view");

  587.   mask-image: url("../../media/sprite.svg#asterisk-view");

  588.   -webkit-mask-position: center center;

  589.   mask-position: center center;

  590.   -webkit-mask-size: 100% 100%;

  591.   mask-size: 100% 100%;

  592. }

  593. 

  594. .ui-dialog .form-wrapper .form-item__label,

  595. .ui-dialog .form-composite .form-item__label {

  596.   position: relative;

  597. }

  598. 

  599. .ui-dialog .field--type-text-with-summary .form-item,

  600. .ui-dialog .field--widget-text-textarea .form-item {

  601.   margin-block-end: 0;

  602. }

  603. 

  604. .ui-dialog .field--type-text-with-summary .filter-wrapper,

  605. .ui-dialog .field--widget-text-textarea .filter-wrapper {

  606.   border: 0 none;

  607.   padding-inline: 0;

  608. }

  609. 

  610. .ui-dialog .gin-autocomplete {

  611.   width: calc(100% - var(--gin-spacing-m));

  612. }

  613. 

  614. .ui-dialog .gin-autocomplete .form-autocomplete {

  615.   width: 100%;

  616. }

  617. 

  618. .ui-dialog .no-touchevents .form-element--type-select.form-element--extrasmall {

  619.   min-height: 1.75rem;

  620.   font-size: var(--gin-font-size-s);

  621.   line-height: 1.5;

  622. }

  623. 

  624. .ui-dialog #block-gin-content > form > .form-item:first-of-type {

  625.   margin-block-start: 0;

  626. }

  627. 

  628. .ui-dialog .image-style-new .form-item {

  629.   margin-inline-end: var(--gin-spacing-xxs);

  630. }

  631. 

  632. .ui-dialog tr .form-item {

  633.   margin-block: 0;

  634. }

  635. 

  636. .ui-dialog .container-inline .form-item {

  637.   margin-block: var(--gin-spacing-density-s);

  638. }

  639. 

  640. .ui-dialog .field-plugin-settings-edit-form {

  641.   margin-block-start: var(--gin-spacing-s);

  642. }

  643. 

  644. .ui-dialog .field-plugin-settings-edit-form .form-item {

  645.   margin-block: var(--gin-spacing-m);

  646. }

  647. 

  648. .ui-dialog .field-plugin-settings-edit-form .form-boolean-group .form-item {

  649.   margin-block: var(--gin-spacing-xs);

  650. }

  651. 

  652. .ui-dialog .length-indicator {

  653.   margin-block-end: var(--gin-spacing-l);

  654. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.