search_api.admin.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. /**
  2. * @file
  3. * Styles for Search API admin pages.
  4. */
  5. /*
  6. * OVERVIEW
  7. */
  8. .search-api-overview td.search-api-status {
  9. text-align: center;
  10. }
  11. .search-api-overview td {
  12. vertical-align: top;
  13. }
  14. /*
  15. * VIEW SERVER
  16. */
  17. .search-api-server-summary ul.inline {
  18. margin: 0;
  19. }
  20. .search-api-server-summary ul.inline li {
  21. padding-left: 0;
  22. }
  23. /*
  24. * VIEW INDEX
  25. */
  26. .search-api-limit,
  27. .search-api-batch-size {
  28. text-align: center;
  29. }
  30. .search-api-index-status .progress .filled {
  31. background: #0074BD none;
  32. }
  33. /*
  34. * DROPBUTTONS
  35. *
  36. * (Largely copied from D8's dropbutton.css.)
  37. */
  38. /**
  39. * When a dropbutton has only one option, it is simply a button.
  40. */
  41. .dropbutton-wrapper,
  42. .dropbutton-wrapper div {
  43. -moz-box-sizing: border-box;
  44. -webkit-box-sizing: border-box;
  45. box-sizing: border-box;
  46. }
  47. .js .dropbutton-wrapper {
  48. display: block;
  49. min-height: 2em;
  50. position: relative;
  51. }
  52. .js .dropbutton-wrapper,
  53. .js .dropbutton-widget {
  54. max-width: 100%;
  55. }
  56. @media screen and (max-width: 600px) {
  57. .js .dropbutton-wrapper {
  58. width: 100%;
  59. }
  60. }
  61. .js .dropbutton-widget {
  62. position: absolute;
  63. }
  64. /* UL styles are over-scoped in core, so this selector needs weight parity. */
  65. .js .dropbutton-widget .dropbutton {
  66. list-style-image: none;
  67. list-style-type: none;
  68. margin: 0;
  69. overflow: hidden;
  70. padding: 0;
  71. }
  72. .js .dropbutton li,
  73. .js .dropbutton a {
  74. display: block;
  75. }
  76. /**
  77. * The dropbutton styling.
  78. *
  79. * A dropbutton is a widget that displays a list of action links as a button
  80. * with a primary action. Secondary actions are hidden behind a click on a
  81. * twisty arrow.
  82. *
  83. * The arrow is created using border on a zero-width, zero-height span.
  84. * The arrow inherits the link color, but can be overridden with border colors.
  85. */
  86. .js .dropbutton-multiple .dropbutton-widget {
  87. padding-right: 2em; /* LTR */
  88. }
  89. .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
  90. padding-left: 2em;
  91. padding-right: 0;
  92. }
  93. .dropbutton-multiple.open,
  94. .dropbutton-multiple.open .dropbutton-widget {
  95. max-width: none;
  96. }
  97. .dropbutton-multiple.open {
  98. z-index: 100;
  99. }
  100. .dropbutton-multiple .dropbutton .secondary-action {
  101. display: none;
  102. }
  103. .dropbutton-multiple.open .dropbutton .secondary-action {
  104. display: block;
  105. }
  106. .dropbutton-toggle {
  107. bottom: 0;
  108. display: block;
  109. position: absolute;
  110. right: 0; /* LTR */
  111. text-indent: 110%;
  112. top: 0;
  113. white-space: nowrap;
  114. width: 2em;
  115. }
  116. [dir="rtl"] .dropbutton-toggle {
  117. left: 0;
  118. right: auto;
  119. }
  120. .dropbutton-toggle button {
  121. background: none;
  122. border: 0;
  123. cursor: pointer;
  124. display: block;
  125. height: 100%;
  126. margin: 0;
  127. padding: 0;
  128. width: 100%;
  129. }
  130. .dropbutton-arrow {
  131. border-bottom-color: transparent;
  132. border-left-color: transparent;
  133. border-right-color: transparent;
  134. border-style: solid;
  135. border-width: 0.3333em 0.3333em 0;
  136. display: block;
  137. height: 0;
  138. line-height: 0;
  139. position: absolute;
  140. right: 40%; /* 0.6667em; */
  141. /* LTR */
  142. top: 50%;
  143. margin-top: -0.1666em;
  144. width: 0;
  145. overflow: hidden;
  146. }
  147. [dir="rtl"] .dropbutton-arrow {
  148. left: 0.6667em;
  149. right: auto;
  150. }
  151. .dropbutton-multiple.open .dropbutton-arrow {
  152. border-bottom: 0.3333em solid;
  153. border-top-color: transparent;
  154. top: 0.6667em;
  155. }
  156. .js .dropbutton-widget {
  157. background-color: white;
  158. border: 1px solid #CCC;
  159. }
  160. .js .dropbutton-widget:hover {
  161. border-color: #B8B8B8;
  162. }
  163. .dropbutton .dropbutton-action > * {
  164. padding: 0.1em 0.5em;
  165. white-space: nowrap;
  166. }
  167. .dropbutton .secondary-action {
  168. border-top: 1px solid #E8E8E8;
  169. }
  170. .dropbutton-multiple .dropbutton {
  171. border-right: 1px solid #E8E8E8; /* LTR */
  172. }
  173. [dir="rtl"] .dropbutton-multiple .dropbutton {
  174. border-left: 1px solid #E8E8E8;
  175. border-right: 0 none;
  176. }
  177. .dropbutton-multiple .dropbutton .dropbutton-action > * {
  178. margin-right: 0.25em; /* LTR */
  179. }
  180. [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
  181. margin-left: 0.25em;
  182. margin-right: 0;
  183. }
  184. /*
  185. * MISC
  186. */
  187. .search-api-alter-add-aggregation-fields,
  188. .search-api-checkboxes-list {
  189. max-height: 12em;
  190. overflow: auto;
  191. }