overlay-child.css

Basic styling for the Overlay child pages.

File

drupal/core/modules/overlay/overlay-child.css
View source
  1. /**
  2. * @file
  3. * Basic styling for the Overlay child pages.
  4. */
  5. .js {
  6. background: transparent !important;
  7. overflow-y: scroll;
  8. }
  9. .js body {
  10. background: transparent !important;
  11. margin-left: 0;
  12. margin-right: 0;
  13. padding: 20px 0;
  14. }
  15. #overlay {
  16. display: table;
  17. margin: 0 auto;
  18. min-height: 100px;
  19. min-width: 700px;
  20. position: relative;
  21. padding: .2em;
  22. padding-bottom: 2em;
  23. padding-right: 26px; /* LTR */
  24. width: 88%;
  25. }
  26. #overlay-titlebar {
  27. padding: 0 20px;
  28. position: relative;
  29. white-space: nowrap;
  30. z-index: 100;
  31. }
  32. #overlay-content {
  33. background: #fff;
  34. clear: both;
  35. color: #000;
  36. padding: .5em 1em;
  37. position: relative;
  38. }
  39. #overlay-title-wrapper {
  40. overflow: hidden;
  41. }
  42. #overlay-title {
  43. color: #fff;
  44. float: left; /* LTR */
  45. font-size: 20px;
  46. margin: 0;
  47. padding: 0.3em 0;
  48. }
  49. #overlay-title:active,
  50. #overlay-title:focus {
  51. outline: 0;
  52. }
  53. .overlay #skip-link {
  54. margin-top: -20px;
  55. }
  56. .overlay #skip-link a {
  57. color: #fff; /* This is white to contrast with the dark background behind it. */
  58. }
  59. #overlay-close-wrapper {
  60. position: absolute;
  61. right: 0; /* LTR */
  62. }
  63. #overlay-close,
  64. #overlay-close:hover {
  65. background: transparent url(images/close.png) no-repeat; /* LTR */
  66. border-top-left-radius: 0; /* LTR */
  67. display: block;
  68. height: 26px;
  69. margin: 0;
  70. padding: 0;
  71. /* Replace with position:fixed to get a scrolling close button. */
  72. position: absolute;
  73. width: 26px;
  74. }
  75. /**
  76. * Tabs on the overlay.
  77. */
  78. #overlay-tabs {
  79. line-height: 26px;
  80. margin: -28px 0 0 0;
  81. position: absolute;
  82. right: 20px; /* LTR */
  83. text-transform: uppercase;
  84. }
  85. #overlay-tabs li {
  86. display: inline-block;
  87. list-style: none;
  88. margin: 0;
  89. padding: 0;
  90. }
  91. #overlay-tabs li a,
  92. #overlay-tabs li a:active,
  93. #overlay-tabs li a:visited,
  94. #overlay-tabs li a:hover {
  95. background-color: #a6a7a2;
  96. border-radius: 8px 8px 0 0;
  97. color: #000;
  98. display: inline-block;
  99. font-size: 11px;
  100. font-weight: bold;
  101. margin: 0 1px;
  102. outline: 0;
  103. padding: 0 14px;
  104. text-decoration: none;
  105. }
  106. #overlay-tabs li.active a,
  107. #overlay-tabs li.active a.active,
  108. #overlay-tabs li.active a:active,
  109. #overlay-tabs li.active a:visited {
  110. background-color: #fff;
  111. margin-bottom: 0;
  112. padding-bottom: 2px;
  113. }
  114. #overlay-tabs li a:focus,
  115. #overlay-tabs li a:hover {
  116. color: #fff;
  117. }
  118. #overlay-tabs li.active a:focus,
  119. #overlay-tabs li.active a:hover {
  120. color: #000;
  121. }
  122. /**
  123. * Add to shortcuts link
  124. */
  125. #overlay-titlebar .add-or-remove-shortcuts {
  126. padding-top: 0.9em;
  127. }
  128. /**
  129. * Disable message.
  130. */
  131. #overlay-disable-message {
  132. background-color: #fff;
  133. margin: -20px auto 20px;
  134. width: 80%;
  135. border-radius: 0 0 8px 8px;
  136. }
  137. .overlay-disable-message-focused {
  138. padding: 0.5em;
  139. }
  140. .overlay-disable-message-focused a {
  141. display: block;
  142. float: left;
  143. }
  144. .overlay-disable-message-focused #overlay-dismiss-message {
  145. float: right;
  146. }