You are here

Home » API reference » Dialog 7.2

dialog.css in Dialog 7.2

Same filename in this branch
  1. 7.2 themes/classy/css/components/dialog.css
  2. 7.2 themes/seven/css/components/dialog.css
/**
 * Presentational styles for Drupal dialogs.
 */

.ui-dialog {
  background: transparent;
  border: 0;
  position: absolute;
  z-index: 1260;
  padding: 0;
}
@media all and (max-width: 48em) { /* 768px */
  .ui-dialog {
    min-width: 92%;
    max-width: 92%;
  }
}
.ui-dialog .ui-dialog-titlebar {
  background: #6b6b6b;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px 49px 15px 15px;
}
.ui-dialog .ui-dialog-title {
  font-size: 1.231em;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.ui-dialog .ui-dialog-titlebar-close {
  border: 0;
  background: none;
  right: 20px; /* LTR */
  top: 20px;
  margin: 0;
  height: 16px;
  width: 16px;
  position: absolute;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
  right: auto;
  left: 20px;
}
.ui-dialog .ui-icon.ui-icon-closethick {
  background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
  margin-top: -12px;
}
.ui-dialog .ui-widget-content.ui-dialog-content {
  background: #ffffff;
  overflow: auto;
  padding: 1em;
}
.views-ui-dialog .ui-widget-content.ui-dialog-content {
  padding: 0;
}
.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
  background: #f5f5f2;
  /*border-top: 1px solid #bfbfbf;*/
  margin: 0;
  padding: 15px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: 0;
  padding: 0;
  float: none;
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  padding: 0;
}
.ui-dialog .ui-dialog-content {
  position: static;
}

/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions {
  padding: 0;
  margin: 0;
}
.ui-dialog .ajax-progress-throbber {
  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  left: 49%; /* LTR */
  position: fixed;
  top: 48.5%;
  z-index: 1000;
  background-color: #232323;
  background-image: url(../../../../misc/loading-small.gif);
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 7px;
  height: 24px;
  opacity: 0.9;
  padding: 4px;
  width: 24px;
}
[dir="rtl"] .ui-dialog .ajax-progress-throbber {
  left: auto;
  right: 49%;
}
.ui-dialog .ajax-progress-throbber .throbber,
.ui-dialog .ajax-progress-throbber .message {
  display: none;
}

File

themes/seven/css/components/dialog.css
View source 
  1. /**

  2.  * Presentational styles for Drupal dialogs.

  3.  */

  4. 

  5. .ui-dialog {

  6.   background: transparent;

  7.   border: 0;

  8.   position: absolute;

  9.   z-index: 1260;

  10.   padding: 0;

  11. }

  12. @media all and (max-width: 48em) { /* 768px */

  13.   .ui-dialog {

  14.     min-width: 92%;

  15.     max-width: 92%;

  16.   }

  17. }

  18. .ui-dialog .ui-dialog-titlebar {

  19.   background: #6b6b6b;

  20.   border-top-left-radius: 5px;

  21.   border-top-right-radius: 5px;

  22.   padding: 15px 49px 15px 15px;

  23. }

  24. .ui-dialog .ui-dialog-title {

  25.   font-size: 1.231em;

  26.   font-weight: 600;

  27.   margin: 0;

  28.   color: #ffffff;

  29.   -webkit-font-smoothing: antialiased;

  30. }

  31. .ui-dialog .ui-dialog-titlebar-close {

  32.   border: 0;

  33.   background: none;

  34.   right: 20px; /* LTR */

  35.   top: 20px;

  36.   margin: 0;

  37.   height: 16px;

  38.   width: 16px;

  39.   position: absolute;

  40. }

  41. [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {

  42.   right: auto;

  43.   left: 20px;

  44. }

  45. .ui-dialog .ui-icon.ui-icon-closethick {

  46.   background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;

  47.   margin-top: -12px;

  48. }

  49. .ui-dialog .ui-widget-content.ui-dialog-content {

  50.   background: #ffffff;

  51.   overflow: auto;

  52.   padding: 1em;

  53. }

  54. .views-ui-dialog .ui-widget-content.ui-dialog-content {

  55.   padding: 0;

  56. }

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

  58.   background: #f5f5f2;

  59.   /*border-top: 1px solid #bfbfbf;*/

  60.   margin: 0;

  61.   padding: 15px 20px;

  62.   border-bottom-left-radius: 5px;

  63.   border-bottom-right-radius: 5px;

  64. }

  65. .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {

  66.   margin: 0;

  67.   padding: 0;

  68.   float: none;

  69. }

  70. .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {

  71.   padding: 0;

  72. }

  73. .ui-dialog .ui-dialog-content {

  74.   position: static;

  75. }

  76. 

  77. /* Form action buttons are moved in dialogs. Remove empty space. */

  78. .ui-dialog .ui-dialog-content .form-actions {

  79.   padding: 0;

  80.   margin: 0;

  81. }

  82. .ui-dialog .ajax-progress-throbber {

  83.   /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */

  84.   left: 49%; /* LTR */

  85.   position: fixed;

  86.   top: 48.5%;

  87.   z-index: 1000;

  88.   background-color: #232323;

  89.   background-image: url(../../../../misc/loading-small.gif);

  90.   background-position: center center;

  91.   background-repeat: no-repeat;

  92.   border-radius: 7px;

  93.   height: 24px;

  94.   opacity: 0.9;

  95.   padding: 4px;

  96.   width: 24px;

  97. }

  98. [dir="rtl"] .ui-dialog .ajax-progress-throbber {

  99.   left: auto;

  100.   right: 49%;

  101. }

  102. .ui-dialog .ajax-progress-throbber .throbber,

  103. .ui-dialog .ajax-progress-throbber .message {

  104.   display: none;

  105. }

  106.