views-ui.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. /**
  2. * Views styling
  3. */
  4. /* @group Forms */
  5. /**
  6. * Seven positions the summary absolutely, but does not have a way to ignore
  7. * details without a summary so we make one up.
  8. *
  9. * @todo Neither a fieldset without legend nor a details without summary is
  10. * valid HTML markup in any way. Refactor Views UI to not produce such invalid
  11. * markup.
  12. */
  13. details.fieldset-no-legend {
  14. padding-top: 0;
  15. }
  16. /**
  17. * Being extra safe here and scoping this to the add view wizard form (where
  18. * a layout problem occurs for the Display format details if we don't fix its
  19. * padding), but it's probably safe to just let it apply everywhere.
  20. */
  21. #views-ui-add-form details details .seven-details__wrapper {
  22. padding-left: 0;
  23. padding-right: 0;
  24. }
  25. .views-display-tab details.box-padding .seven-details__wrapper {
  26. padding: 0;
  27. }
  28. .views-admin input.form-submit,
  29. .views-ui-dialog input.form-submit,
  30. .views-admin a.button,
  31. .views-ui-dialog a.button {
  32. margin-bottom: 0;
  33. margin-right: 0; /* LTR */
  34. margin-top: 0;
  35. }
  36. [dir="rtl"] .views-admin input.form-submit,
  37. [dir="rtl"] .views-ui-dialog input.form-submit,
  38. [dir="rtl"] .views-admin a.button,
  39. [dir="rtl"] .views-ui-dialog a.button {
  40. margin-left: 0;
  41. margin-right: 1em;
  42. }
  43. [dir="rtl"] .views-admin input.form-submit:first-child,
  44. [dir="rtl"] .views-ui-dialog input.form-submit:first-child,
  45. [dir="rtl"] .views-admin a.button:first-child,
  46. [dir="rtl"] .views-ui-dialog a.button:first-child {
  47. margin-right: 0;
  48. }
  49. .form-radios > .form-item {
  50. margin-top: 3px;
  51. }
  52. /* @group Dependent options
  53. */
  54. /* This is necessary to supersede the Seven .form-item
  55. * reset declaration that sets the margin to zero.
  56. */
  57. .form-item-options-expose-required,
  58. .form-item-options-expose-label,
  59. .form-item-options-expose-description {
  60. margin-left: 1.5em; /* LTR */
  61. }
  62. [dir="rtl"] .form-item-options-expose-required,
  63. [dir="rtl"] .form-item-options-expose-label,
  64. [dir="rtl"] .form-item-options-expose-description {
  65. margin-left: 0;
  66. margin-right: 1.5em;
  67. }
  68. .views-admin-dependent .form-item .form-item,
  69. .views-admin-dependent .form-type-checkboxes,
  70. .views-admin-dependent .form-type-radios,
  71. .views-admin-dependent .form-item .form-item,
  72. .form-item-options-expose-required,
  73. .form-item-options-expose-label,
  74. .form-item-options-expose-description {
  75. margin-bottom: 6px;
  76. margin-top: 6px;
  77. }
  78. .views-admin-dependent .form-type-radio,
  79. .views-admin-dependent .form-radios .form-item {
  80. margin-bottom: 2px;
  81. margin-top: 2px;
  82. }
  83. /* @end */
  84. /* @group Lists */
  85. .views-admin ul.secondary,
  86. .views-admin .item-list ul {
  87. margin: 0;
  88. padding: 0;
  89. }
  90. .views-displays ul.secondary li a,
  91. .views-displays ul.secondary li.is-active a,
  92. .views-displays ul.secondary li.is-active a.is-active {
  93. padding: 2px 7px 3px;
  94. }
  95. .views-displays ul.secondary li a {
  96. color: #0074bd;
  97. }
  98. .views-displays ul.secondary li.is-active a,
  99. .views-displays ul.secondary li.is-active a.is-active {
  100. border: 1px solid transparent;
  101. }
  102. .views-admin .links li {
  103. padding-right: 0; /* LTR */
  104. }
  105. [dir="rtl"] .views-admin .links li {
  106. padding-left: 0;
  107. }
  108. .views-admin .button .links li {
  109. padding-right: 12px; /* LTR */
  110. }
  111. [dir="rtl"] .views-admin .button .links li {
  112. padding-left: 12px;
  113. }
  114. .views-display-top ul.secondary {
  115. background-color: transparent;
  116. float: left; /* LTR */
  117. }
  118. [dir="rtl"] .views-display-top ul.secondary {
  119. float: right;
  120. }
  121. .views-display-top .secondary .action-list li {
  122. float: none;
  123. margin: 0;
  124. }
  125. /* @end */
  126. /* @group Tables */
  127. .views-ui-rearrange-filter-form table td,
  128. .views-ui-rearrange-filter-form table th {
  129. vertical-align: top;
  130. }
  131. /* @end */
  132. /* @group Attachment details */
  133. #edit-display-settings-title {
  134. color: #008bcb;
  135. }
  136. /* @end */
  137. /* @group Attachment details tabs
  138. *
  139. * The tabs that switch between sections
  140. */
  141. .views-displays .secondary {
  142. text-align: left; /* LTR */
  143. }
  144. [dir="rtl"] .views-displays .secondary {
  145. text-align: right;
  146. }
  147. .views-admin .icon.add {
  148. background-position: center 3px;
  149. }
  150. .views-displays .secondary a:hover > .icon.add {
  151. background-position: center -25px;
  152. }
  153. .views-displays .secondary .open > a {
  154. border-radius: 7px 7px 0 0;
  155. }
  156. .views-displays .secondary .open > a:hover,
  157. .views-displays .secondary .open > a:focus {
  158. background-color: #f1f1f1;
  159. color: #008bcb;
  160. }
  161. .views-displays .secondary .action-list li:first-child {
  162. border-radius: 0 7px 0 0; /* LTR */
  163. }
  164. [dir="rtl"] .views-displays .secondary .action-list li:first-child {
  165. border-radius: 7px 0 0 0;
  166. }
  167. .views-displays .secondary .action-list li:last-child {
  168. border-radius: 0 0 7px 7px;
  169. }
  170. .views-displays .secondary .action-list input.form-submit {
  171. color: #008bcb;
  172. }
  173. /* @end */
  174. /* @group Attachment buckets
  175. *
  176. * These are the individual "buckets," or boxes, inside the display settings area
  177. */
  178. .views-ui-display-tab-bucket h3 {
  179. text-transform: uppercase;
  180. }
  181. .views-ui-display-tab-bucket .links {
  182. padding: 2px 6px 4px;
  183. }
  184. .views-ui-display-tab-bucket .links li + li {
  185. margin-left: 3px; /* LTR */
  186. }
  187. [dir="rtl"] .views-ui-display-tab-bucket .links li + li {
  188. margin-left: 0;
  189. margin-right: 3px;
  190. }
  191. /* @end */
  192. /* @group Rearrange filter criteria */
  193. .views-ui-rearrange-filter-form .action-links {
  194. float: left;
  195. margin: 0 0 1em;
  196. padding: 0;
  197. }
  198. .views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {
  199. float: right;
  200. margin-bottom: 1em;
  201. }
  202. .views-ui-rearrange-filter-form table {
  203. border: medium none;
  204. }
  205. .views-ui-rearrange-filter-form [id^="views-row"] {
  206. border: medium none;
  207. }
  208. .views-ui-rearrange-filter-form tr td:last-child {
  209. border-right: medium none; /* LTR */
  210. }
  211. [dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {
  212. border-left: medium none;
  213. border-right: initial;
  214. }
  215. .views-ui-rearrange-filter-form .filter-group-operator-row {
  216. border-left: 1px solid transparent !important;
  217. border-right: 1px solid transparent !important;
  218. }
  219. .views-ui-rearrange-filter-form tr.drag td {
  220. background-color: #fe7 !important;
  221. }
  222. .views-ui-rearrange-filter-form tr.drag-previous td {
  223. background-color: #ffb !important;
  224. }
  225. /* @end */
  226. /* @group Live preview elements */
  227. .views-query-info pre {
  228. margin-bottom: 0;
  229. margin-top: 0;
  230. }
  231. /* @group Query info table */
  232. .views-query-info table {
  233. border-radius: 7px;
  234. -webkit-border-horizontal-spacing: 1px;
  235. -webkit-border-vertical-spacing: 1px;
  236. }
  237. .views-query-info table tr td:last-child {
  238. /* Fixes a Seven style that bleeds down into this table unnecessarily */
  239. border-right: 0 none; /* LTR */
  240. }
  241. [dir="rtl"] .views-query-info table tr td:last-child {
  242. border-left: 0 none;
  243. border-right: initial;
  244. }
  245. /* @end */
  246. /* @end */
  247. /* @group Add view */
  248. .form-item-page-create,
  249. .form-item-block-create {
  250. margin-top: 13px;
  251. }
  252. /* @end */
  253. /* @group Modal dialog box
  254. *
  255. * The contents of the popup dialog on the views edit form.
  256. */
  257. .filterable-option .form-item.form-type-checkbox {
  258. /* This selector is aggressive because Seven's reset for .form-items is aggressive. */
  259. padding-bottom: 4px;
  260. padding-left: 4px; /* LTR */
  261. padding-top: 4px;
  262. }
  263. [dir="rtl"] .filterable-option .form-item.form-type-checkbox {
  264. padding-left: 8px;
  265. padding-right: 4px;
  266. }
  267. /* @end */