dialog.css

Same filename in this branch
  1. main core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. main core/themes/claro/css/components/dialog.css
  3. main core/themes/starterkit_theme/css/components/dialog.css
  4. main core/assets/vendor/jquery.ui/themes/base/dialog.css
  5. main core/themes/admin/migration/css/components/dialog.css
  6. main core/themes/admin/migration/css/theme/dialog.css
  7. main core/themes/admin/css/components/dialog.css
  8. main core/modules/system/tests/themes/test_base_theme/css/components/dialog.css
  9. main core/themes/default_admin/migration/css/components/dialog.css
  10. main core/themes/default_admin/migration/css/theme/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. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  5. 11.x core/themes/claro/css/components/dialog.css
  6. 11.x core/themes/starterkit_theme/css/components/dialog.css
  7. 11.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  8. 10 core/assets/vendor/jquery.ui/themes/base/dialog.css
  9. 9 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  10. 9 core/themes/seven/css/components/dialog.css
  11. 9 core/themes/claro/css/components/dialog.css
  12. 9 core/themes/bartik/css/classy/components/dialog.css
  13. 9 core/themes/starterkit_theme/css/components/dialog.css
  14. 9 core/themes/classy/css/components/dialog.css
  15. 9 core/assets/vendor/jquery.ui/themes/base/dialog.css
  16. 9 core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  17. 9 core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  18. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  19. 8.9.x core/themes/seven/css/components/dialog.css
  20. 8.9.x core/themes/claro/css/components/dialog.css
  21. 8.9.x core/themes/bartik/css/classy/components/dialog.css
  22. 8.9.x core/themes/classy/css/components/dialog.css
  23. 8.9.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  24. 8.9.x core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  25. 8.9.x core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  26. 11.x core/themes/admin/migration/css/components/dialog.css
  27. 11.x core/themes/admin/migration/css/theme/dialog.css
  28. 11.x core/themes/admin/css/components/dialog.css
  29. 11.x core/modules/system/tests/themes/test_base_theme/css/components/dialog.css
  30. 11.x core/themes/default_admin/migration/css/components/dialog.css
  31. 11.x core/themes/default_admin/migration/css/theme/dialog.css
  32. 11.x core/themes/default_admin/css/components/dialog.css

Dialog and modal styles, including theme overrides for form elements, links, and controls.

File

core/themes/default_admin/css/components/dialog.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Dialog and modal styles, including theme overrides for form elements,
  10. * links, and controls.
  11. */
  12. .ui-dialog {
  13. position: absolute;
  14. border-radius: var(--admin-radius-m);
  15. outline: none;
  16. background: var(--admin-color-bg-surface);
  17. box-shadow: var(--admin-shadow-1);
  18. font-family: var(--admin-font-family);
  19. .ui-dialog-titlebar {
  20. position: relative;
  21. padding: var(--admin-space-m) var(--admin-space-l);
  22. /* Fixed white (not a surface token): text sits on the always-dark titlebar
  23. (background #1b1b1d below), so it must stay light in both modes. */
  24. color: var(--admin-color-white);
  25. border: 0 none;
  26. border-radius: var(--admin-radius-m) var(--admin-radius-m) 0 0;
  27. background: #1b1b1d;
  28. line-height: 1.2;
  29. @media (forced-colors: active) {
  30. border-block-end: 1px solid buttonBorder;
  31. }
  32. }
  33. .ui-dialog-titlebar-close {
  34. position: absolute;
  35. width: 2rem;
  36. height: 2rem;
  37. margin: 0 var(--admin-space-m);
  38. transform: translateY(-50%);
  39. opacity: 0.8;
  40. color: inherit;
  41. border: none;
  42. background: none;
  43. inset-block-start: 50%;
  44. inset-inline-end: 0;
  45. &:hover {
  46. opacity: 1;
  47. }
  48. .ui-icon-closethick {
  49. width: 100%;
  50. height: 100%;
  51. inset-block-start: 0;
  52. inset-inline-start: 0;
  53. margin: 0;
  54. transform: none;
  55. background: currentColor;
  56. mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3e %3cpath d='M20 4L4 20' /%3e %3cpath d='M4 4L20 20' /%3e %3c/g%3e%3c/svg%3e");
  57. mask-size: var(--admin-icon-size-close) var(--admin-icon-size-close);
  58. mask-repeat: no-repeat;
  59. mask-position: center;
  60. @media (forced-colors: active) {
  61. background: linktext;
  62. }
  63. }
  64. }
  65. .ui-dialog-title {
  66. padding-inline-end: var(--admin-space-xl);
  67. font-size: var(--admin-font-size-h6);
  68. }
  69. .ui-dialog-content {
  70. color: var(--admin-color-text);
  71. &:first-of-type {
  72. border-start-start-radius: var(--admin-radius-m);
  73. border-start-end-radius: var(--admin-radius-m);
  74. }
  75. }
  76. .ui-widget-content {
  77. padding-inline: var(--admin-space-l);
  78. background: var(--admin-color-bg-surface);
  79. &.ui-dialog-content {
  80. overflow: auto;
  81. }
  82. }
  83. .ui-widget-content.ui-dialog-buttonpane {
  84. padding: var(--admin-space-s) var(--admin-space-l);
  85. border-block-start: 1px solid var(--admin-color-border-soft);
  86. background: var(--admin-color-bg);
  87. .button {
  88. padding-block: calc(var(--admin-space-s) - 2px);
  89. padding-inline: var(--admin-space-m);
  90. margin-block: 0;
  91. &:last-of-type {
  92. margin-inline-end: 0;
  93. }
  94. }
  95. }
  96. .ui-dialog-buttonset {
  97. margin: 0;
  98. }
  99. [data-drupal-selector*="-remove-form"] .button.button--danger {
  100. border-color: var(--admin-color-error) !important;
  101. }
  102. .gin--dark-mode
  103. }
  104. .form-edit .form-actions {
  105. margin-block-end: 0;
  106. padding: 0;
  107. border: 0 none;
  108. background-color: transparent;
  109. }
  110. tr .form-item {
  111. margin-block: 0;
  112. }
  113. .layout-region-node-actions {
  114. position: absolute;
  115. inset-block-end: 0;
  116. inset-inline-start: var(--admin-space-m);
  117. inset-block-start: auto;
  118. inset-inline-end: auto;
  119. }
  120. .layout-region--secondary {
  121. width: 100%;
  122. }
  123. .gin-layer-wrapper {
  124. margin-block: var(--admin-space-l);
  125. }
  126. .gin-confirm-form {
  127. margin-block-start: var(--admin-space-m);
  128. margin-block-end: var(--admin-space-s);
  129. }
  130. @media (--admin-to-small) {
  131. min-width: 92%;
  132. max-width: 92%;
  133. }
  134. }
  135. .ui-widget-overlay {
  136. opacity: 0.9;
  137. background: var(--admin-color-bg-surface-nested);
  138. }
  139. .ui-widget.ui-widget-content {
  140. padding: 0;
  141. border: 1px solid var(--admin-color-border);
  142. }
  143. #drupal-modal .gin-sticky-form-actions.form-actions {
  144. display: none;
  145. }

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