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/theme/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 treetable */
.ui-dialog:not(.ui-dialog-off-canvas) {
  max-width: 1280px;
  border: 0 none !important;
  border-radius: var(--gin-border-m);
  background: var(--gin-bg-layer);
}

@media (forced-colors: active) {
  .ui-dialog:not(.ui-dialog-off-canvas) {
    border: 1px solid buttonBorder !important;
  }
}

.ui-dialog:not(.ui-dialog-off-canvas) .ui-dialog-content:first-of-type {
  border-start-start-radius: var(--gin-border-m);
  border-start-end-radius: var(--gin-border-m);
}

.ui-dialog:not(.ui-dialog-off-canvas) .layout-region-node-actions {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: var(--gin-spacing-m);
  inset-block-start: auto;
  inset-inline-end: auto;
}

.ui-dialog:not(.ui-dialog-off-canvas) .layout-region--secondary {
  width: 100%;
}

.ui-dialog:not(.ui-dialog-off-canvas) .views-exposed-form.views-exposed-form,
.ui-dialog:not(.ui-dialog-off-canvas) .views-displays {
  border: 1px solid var(--gin-border-color-layer);
}

@media (max-width: 47.99em) {
  .ui-dialog:not(.ui-dialog-off-canvas) {
    min-width: 92%;
    max-width: 92%;
  }
}

.ui-dialog.ui-dialog {
  position: absolute;
  outline: none;
  font-family: var(--gin-font);
  inset-block-start: 0;
}

[dir="ltr"] .ui-dialog.ui-dialog {
  inset-inline-start: 0;
}

[dir="rtl"] .ui-dialog.ui-dialog {
  inset-inline-end: 0;
}

.ui-dialog.ui-dialog,
.ui-dialog.ui-dialog:focus,
.ui-dialog.ui-dialog:focus:active,
.ui-dialog.ui-dialog:focus:hover {
  box-shadow: var(--gin-shadow-l1);
}

.ui-dialog.ui-dialog .ui-dialog-titlebar.ui-dialog-titlebar {
  position: relative;
  padding: var(--gin-spacing-m) var(--gin-spacing-l);
  border: 0 none;
  border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
  background: #1b1b1d;
  line-height: 1.2;
}

@media (forced-colors: active) {
  .ui-dialog.ui-dialog .ui-dialog-titlebar.ui-dialog-titlebar {
    border-block-end: 1px solid buttonBorder;
  }
}

.ui-dialog.ui-dialog .ui-dialog-title.ui-dialog-title {
  box-sizing: border-box;
  width: 100%;
  padding-inline-end: var(--gin-spacing-xl);
  color: #fff;
  font-size: var(--gin-font-size-l);
  font-weight: var(--gin-font-weight-normal);
}

.ui-dialog.ui-dialog .ui-dialog-content.ui-dialog-content {
  color: var(--gin-color-text);
}

.ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
  padding: var(--gin-spacing-s) var(--gin-spacing-l);
  border-block-start: 1px solid var(--gin-border-color-layer);
  border-end-start-radius: var(--gin-border-m);
  border-end-end-radius: var(--gin-border-m);
  background: var(--gin-bg-app);
}

.ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button {
  height: auto;
  font-family: var(--gin-font);
  font-size: var(--gin-font-size-s);
  font-weight: var(--gin-font-weight-semibold);
  padding-block: calc(var(--gin-spacing-s) - 2px);
  padding-inline: var(--gin-spacing-m);
  margin-block: 0;
}

.ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button:last-of-type {
  margin-inline-end: 0;
}

.ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button.button--danger,
.ui-dialog.ui-dialog [data-drupal-selector*="-remove-form"] .button.button--danger {
  border-color: var(--gin-color-danger) !important;
}

.ui-dialog.ui-dialog .ui-dialog-buttonset {
  margin: 0;
}

.ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close {
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin: 0 var(--gin-spacing-m);
  transform: translateY(-50%);
  opacity: 0.8;
  border: none;
  background: none;
  inset-block-start: 50%;
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close .ui-icon-closethick.ui-icon-closethick {
  width: 100%;
  height: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: 0;
  transform: none;
  background: #fff;
  -webkit-mask-image: url("../../media/sprite.svg#close-view");
  mask-image: url("../../media/sprite.svg#close-view");
  -webkit-mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
  mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

@media (forced-colors: active) {
  .ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close .ui-icon-closethick.ui-icon-closethick {
    background: linktext;
  }
}

.ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close:hover {
  opacity: 1;
}

.ui-dialog.ui-dialog .ui-widget-content.ui-dialog-content {
  padding-inline: var(--gin-spacing-l);
  background: var(--gin-bg-layer);
}

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

.ui-dialog.ui-dialog .gin-confirm-form {
  margin-block-start: var(--gin-spacing-m);
  margin-block-end: var(--gin-spacing-s);
}

.ui-dialog.ui-dialog.token-tree-dialog {
  z-index: 505;
  max-width: none;
}

.ui-widget-overlay {
  opacity: 0.9;
  background: var(--gin-bg-layer2);
}

.views-ui-dialog .views-offset-bottom {
  border-block-start: 1px solid var(--gin-border-color);
}

@media (forced-colors: active) {
  .views-ui-dialog .views-offset-bottom {
    border-block-start: none;
  }
}

.ui-widget-content a {
  color: var(--gin-color-primary);
}

.ui-widget.ui-dialog.ui-dialog-off-canvas {
  --gin-offcanvas-active: var(--gin-color-primary);

  border: 0 none;
  background: #444;
  box-shadow: 0 0 48px rgb(0, 0, 0, 0.075);
}

.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
  border-radius: 0;
  background: #1b1b1d;
}

.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-resizable-w {
  border: 0 none;
  background-color: transparent;
}

.ui-widget.ui-dialog.ui-dialog-off-canvas .fieldset {
  color: var(--gin-color-text);
}

.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"] {
  background: var(--gin-offcanvas-active);
}

.ui-dialog .ui-widget-content.ui-dialog-content {
  overflow: auto;
}

table.treetable tr.branch {
  background-color: transparent;
}

.ui-dialog .gin-layer-wrapper {
  margin-block: var(--gin-spacing-l);
}

.views-ui-dialog.views-ui-dialog > .ui-dialog-content {
  padding: 0;
}

#drupal-modal .gin-sticky-form-actions.form-actions {
  display: none;
}

File

View on git.drupalcode.org

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

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

  2. .ui-dialog:not(.ui-dialog-off-canvas) {

  3.   max-width: 1280px;

  4.   border: 0 none !important;

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

  6.   background: var(--gin-bg-layer);

  7. }

  8. 

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

  10.   .ui-dialog:not(.ui-dialog-off-canvas) {

  11.     border: 1px solid buttonBorder !important;

  12.   }

  13. }

  14. 

  15. .ui-dialog:not(.ui-dialog-off-canvas) .ui-dialog-content:first-of-type {

  16.   border-start-start-radius: var(--gin-border-m);

  17.   border-start-end-radius: var(--gin-border-m);

  18. }

  19. 

  20. .ui-dialog:not(.ui-dialog-off-canvas) .layout-region-node-actions {

  21.   position: absolute;

  22.   inset-block-end: 0;

  23.   inset-inline-start: var(--gin-spacing-m);

  24.   inset-block-start: auto;

  25.   inset-inline-end: auto;

  26. }

  27. 

  28. .ui-dialog:not(.ui-dialog-off-canvas) .layout-region--secondary {

  29.   width: 100%;

  30. }

  31. 

  32. .ui-dialog:not(.ui-dialog-off-canvas) .views-exposed-form.views-exposed-form,

  33. .ui-dialog:not(.ui-dialog-off-canvas) .views-displays {

  34.   border: 1px solid var(--gin-border-color-layer);

  35. }

  36. 

  37. @media (max-width: 47.99em) {

  38.   .ui-dialog:not(.ui-dialog-off-canvas) {

  39.     min-width: 92%;

  40.     max-width: 92%;

  41.   }

  42. }

  43. 

  44. .ui-dialog.ui-dialog {

  45.   position: absolute;

  46.   outline: none;

  47.   font-family: var(--gin-font);

  48.   inset-block-start: 0;

  49. }

  50. 

  51. [dir="ltr"] .ui-dialog.ui-dialog {

  52.   inset-inline-start: 0;

  53. }

  54. 

  55. [dir="rtl"] .ui-dialog.ui-dialog {

  56.   inset-inline-end: 0;

  57. }

  58. 

  59. .ui-dialog.ui-dialog,

  60. .ui-dialog.ui-dialog:focus,

  61. .ui-dialog.ui-dialog:focus:active,

  62. .ui-dialog.ui-dialog:focus:hover {

  63.   box-shadow: var(--gin-shadow-l1);

  64. }

  65. 

  66. .ui-dialog.ui-dialog .ui-dialog-titlebar.ui-dialog-titlebar {

  67.   position: relative;

  68.   padding: var(--gin-spacing-m) var(--gin-spacing-l);

  69.   border: 0 none;

  70.   border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;

  71.   background: #1b1b1d;

  72.   line-height: 1.2;

  73. }

  74. 

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

  76.   .ui-dialog.ui-dialog .ui-dialog-titlebar.ui-dialog-titlebar {

  77.     border-block-end: 1px solid buttonBorder;

  78.   }

  79. }

  80. 

  81. .ui-dialog.ui-dialog .ui-dialog-title.ui-dialog-title {

  82.   box-sizing: border-box;

  83.   width: 100%;

  84.   padding-inline-end: var(--gin-spacing-xl);

  85.   color: #fff;

  86.   font-size: var(--gin-font-size-l);

  87.   font-weight: var(--gin-font-weight-normal);

  88. }

  89. 

  90. .ui-dialog.ui-dialog .ui-dialog-content.ui-dialog-content {

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

  92. }

  93. 

  94. .ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane {

  95.   padding: var(--gin-spacing-s) var(--gin-spacing-l);

  96.   border-block-start: 1px solid var(--gin-border-color-layer);

  97.   border-end-start-radius: var(--gin-border-m);

  98.   border-end-end-radius: var(--gin-border-m);

  99.   background: var(--gin-bg-app);

  100. }

  101. 

  102. .ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button {

  103.   height: auto;

  104.   font-family: var(--gin-font);

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

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

  107.   padding-block: calc(var(--gin-spacing-s) - 2px);

  108.   padding-inline: var(--gin-spacing-m);

  109.   margin-block: 0;

  110. }

  111. 

  112. .ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button:last-of-type {

  113.   margin-inline-end: 0;

  114. }

  115. 

  116. .ui-dialog.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button.button--danger,

  117. .ui-dialog.ui-dialog [data-drupal-selector*="-remove-form"] .button.button--danger {

  118.   border-color: var(--gin-color-danger) !important;

  119. }

  120. 

  121. .ui-dialog.ui-dialog .ui-dialog-buttonset {

  122.   margin: 0;

  123. }

  124. 

  125. .ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close {

  126.   position: absolute;

  127.   width: 2rem;

  128.   height: 2rem;

  129.   margin: 0 var(--gin-spacing-m);

  130.   transform: translateY(-50%);

  131.   opacity: 0.8;

  132.   border: none;

  133.   background: none;

  134.   inset-block-start: 50%;

  135.   inset-inline-start: auto;

  136.   inset-inline-end: 0;

  137. }

  138. 

  139. .ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close .ui-icon-closethick.ui-icon-closethick {

  140.   width: 100%;

  141.   height: 100%;

  142.   inset-block-start: 0;

  143.   inset-inline-start: 0;

  144.   margin: 0;

  145.   transform: none;

  146.   background: #fff;

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

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

  149.   -webkit-mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);

  150.   mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);

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

  152.   mask-repeat: no-repeat;

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

  154.   mask-position: center center;

  155. }

  156. 

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

  158.   .ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close .ui-icon-closethick.ui-icon-closethick {

  159.     background: linktext;

  160.   }

  161. }

  162. 

  163. .ui-dialog.ui-dialog .ui-dialog-titlebar-close.ui-dialog-titlebar-close:hover {

  164.   opacity: 1;

  165. }

  166. 

  167. .ui-dialog.ui-dialog .ui-widget-content.ui-dialog-content {

  168.   padding-inline: var(--gin-spacing-l);

  169.   background: var(--gin-bg-layer);

  170. }

  171. 

  172. .ui-dialog.ui-dialog .gin-layer-wrapper {

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

  174. }

  175. 

  176. .ui-dialog.ui-dialog .gin-confirm-form {

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

  178.   margin-block-end: var(--gin-spacing-s);

  179. }

  180. 

  181. .ui-dialog.ui-dialog.token-tree-dialog {

  182.   z-index: 505;

  183.   max-width: none;

  184. }

  185. 

  186. .ui-widget-overlay {

  187.   opacity: 0.9;

  188.   background: var(--gin-bg-layer2);

  189. }

  190. 

  191. .views-ui-dialog .views-offset-bottom {

  192.   border-block-start: 1px solid var(--gin-border-color);

  193. }

  194. 

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

  196.   .views-ui-dialog .views-offset-bottom {

  197.     border-block-start: none;

  198.   }

  199. }

  200. 

  201. .ui-widget-content a {

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

  203. }

  204. 

  205. .ui-widget.ui-dialog.ui-dialog-off-canvas {

  206.   --gin-offcanvas-active: var(--gin-color-primary);

  207. 

  208.   border: 0 none;

  209.   background: #444;

  210.   box-shadow: 0 0 48px rgb(0, 0, 0, 0.075);

  211. }

  212. 

  213. .ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {

  214.   border-radius: 0;

  215.   background: #1b1b1d;

  216. }

  217. 

  218. .ui-widget.ui-dialog.ui-dialog-off-canvas .ui-resizable-w {

  219.   border: 0 none;

  220.   background-color: transparent;

  221. }

  222. 

  223. .ui-widget.ui-dialog.ui-dialog-off-canvas .fieldset {

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

  225. }

  226. 

  227. .ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"] {

  228.   background: var(--gin-offcanvas-active);

  229. }

  230. 

  231. .ui-dialog .ui-widget-content.ui-dialog-content {

  232.   overflow: auto;

  233. }

  234. 

  235. table.treetable tr.branch {

  236.   background-color: transparent;

  237. }

  238. 

  239. .ui-dialog .gin-layer-wrapper {

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

  241. }

  242. 

  243. .views-ui-dialog.views-ui-dialog > .ui-dialog-content {

  244.   padding: 0;

  245. }

  246. 

  247. #drupal-modal .gin-sticky-form-actions.form-actions {

  248.   display: none;

  249. }

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