You are here

Home » API reference » Drupal 10

views_ui.admin.theme.css in Drupal 10

Same filename in this branch
  1. 10 core/modules/views_ui/css/views_ui.admin.theme.css
  2. 10 core/themes/claro/css/theme/views_ui.admin.theme.css
  3. 10 core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  4. 10 core/themes/stable/css/views_ui/views_ui.admin.theme.css
Same filename and directory in other branches
  1. 8 core/themes/stable/css/views_ui/views_ui.admin.theme.css
  2. 9 core/themes/stable/css/views_ui/views_ui.admin.theme.css

The .admin.theme.css file is intended to contain presentation declarations including images, borders, colors, and fonts.

File

core/themes/stable/css/views_ui/views_ui.admin.theme.css
View source 
  1. /**

  2.  * @file

  3.  * The .admin.theme.css file is intended to contain presentation declarations

  4.  * including images, borders, colors, and fonts.

  5.  */

  6. 

  7. .views-admin .links {

  8.   margin: 0;

  9.   list-style: none outside none;

  10. }

  11. .views-admin a:hover {

  12.   text-decoration: none;

  13. }

  14. .box-padding {

  15.   padding-right: 12px;

  16.   padding-left: 12px;

  17. }

  18. .box-margin {

  19.   margin: 12px 12px 0 12px;

  20. }

  21. .views-admin .icon {

  22.   width: 16px;

  23.   height: 16px;

  24. }

  25. .views-admin .icon,

  26. .views-admin .icon-text {

  27.   background-image: url(../../images/views_ui/sprites.png);

  28.   background-repeat: no-repeat;

  29.   background-attachment: scroll;

  30.   background-position: left top; /* LTR */

  31. }

  32. [dir="rtl"] .views-admin .icon,

  33. [dir="rtl"] .views-admin .icon-text {

  34.   background-position: right top;

  35. }

  36. .views-admin a.icon {

  37.   border: 1px solid #ddd;

  38.   border-radius: 4px;

  39.   background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;

  40.   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;

  41. }

  42. .views-admin a.icon:hover {

  43.   border-color: #d0d0d0;

  44.   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;

  45. }

  46. .views-admin a.icon:active {

  47.   border-color: #c0c0c0;

  48. }

  49. .views-admin span.icon {

  50.   position: relative;

  51.   float: left; /* LTR */

  52. }

  53. [dir="rtl"] .views-admin span.icon {

  54.   float: right;

  55. }

  56. .views-admin .icon.compact {

  57.   display: block;

  58.   overflow: hidden;

  59.   text-indent: -9999px;

  60.   direction: ltr;

  61. }

  62. 

  63. /* Targets any element with an icon -> text combo */

  64. .views-admin .icon-text {

  65.   padding-left: 19px; /* LTR */

  66. }

  67. [dir="rtl"] .views-admin .icon-text {

  68.   padding-right: 19px;

  69.   padding-left: 0;

  70. }

  71. .views-admin .icon.linked {

  72.   background-position: center -153px;

  73. }

  74. .views-admin .icon.unlinked {

  75.   background-position: center -195px;

  76. }

  77. .views-admin .icon.add {

  78.   background-position: center 3px;

  79. }

  80. .views-admin a.icon.add {

  81.   background-position: center 3px, left top; /* LTR */

  82. }

  83. [dir="rtl"] .views-admin a.icon.add {

  84.   background-position: center 3px, right top;

  85. }

  86. .views-admin .icon.delete {

  87.   background-position: center -52px;

  88. }

  89. .views-admin a.icon.delete {

  90.   background-position: center -52px, left top; /* LTR */

  91. }

  92. [dir="rtl"] .views-admin a.icon.delete {

  93.   background-position: center -52px, right top;

  94. }

  95. .views-admin .icon.rearrange {

  96.   background-position: center -111px;

  97. }

  98. .views-admin a.icon.rearrange {

  99.   background-position: center -111px, left top; /* LTR */

  100. }

  101. [dir="rtl"] .views-admin a.icon.rearrange {

  102.   background-position: center -111px, right top;

  103. }

  104. .views-displays .tabs a:hover > .icon.add {

  105.   background-position: center -25px;

  106. }

  107. .views-displays .tabs .open a:hover > .icon.add {

  108.   background-position: center 3px;

  109. }

  110. details.box-padding {

  111.   border: none;

  112. }

  113. .views-admin details details {

  114.   margin-bottom: 0;

  115. }

  116. .form-item {

  117.   margin-top: 9px;

  118.   padding-top: 0;

  119.   padding-bottom: 0;

  120. }

  121. .form-type-checkbox {

  122.   margin-top: 6px;

  123. }

  124. .form-checkbox,

  125. .form-radio {

  126.   vertical-align: baseline;

  127. }

  128. 

  129. .container-inline {

  130.   padding-top: 15px;

  131.   padding-bottom: 15px;

  132. }

  133. .container-inline > * + *,

  134. .container-inline .details-wrapper > * + * {

  135.   padding-left: 4px; /* LTR */

  136. }

  137. [dir="rtl"] .container-inline > * + *,

  138. [dir="rtl"] .container-inline .details-wrapper > * + * {

  139.   padding-right: 4px;

  140.   padding-left: 0;

  141. }

  142. .views-admin details details.container-inline {

  143.   margin-top: 1em;

  144.   margin-bottom: 1em;

  145.   padding-top: 0;

  146. }

  147. .views-admin details details.container-inline > .details-wrapper {

  148.   padding-bottom: 0;

  149. }

  150. /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */

  151. .views-admin .form-type-checkbox + .form-wrapper {

  152.   margin-left: 16px; /* LTR */

  153. }

  154. [dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {

  155.   margin-right: 16px;

  156.   margin-left: 0;

  157. }

  158. 

  159. /* Hide 'remove' checkboxes. */

  160. .views-remove-checkbox {

  161.   display: none;

  162. }

  163. 

  164. /* sizes the labels of checkboxes and radio button to the height of the text */

  165. .views-admin .form-type-checkbox label,

  166. .views-admin .form-type-radio label {

  167.   line-height: 2;

  168. }

  169. .views-admin-dependent .form-item {

  170.   margin-top: 6px;

  171.   margin-bottom: 6px;

  172. }

  173. .views-ui-view-name h3 {

  174.   margin: 0.25em 0;

  175.   font-weight: bold;

  176. }

  177. .view-changed {

  178.   margin-bottom: 21px;

  179. }

  180. .views-admin .unit-title {

  181.   margin-top: 18px;

  182.   margin-bottom: 0;

  183.   font-size: 15px;

  184.   line-height: 1.6154;

  185. }

  186. .views-ui-view-displays ul {

  187.   margin-left: 0; /* LTR */

  188.   padding-left: 0; /* LTR */

  189.   list-style: none;

  190. }

  191. [dir="rtl"] .views-ui-view-displays ul {

  192.   margin-right: 0;

  193.   margin-left: inherit;

  194.   padding-right: 0;

  195.   padding-left: inherit;

  196. }

  197. 

  198. /* These header classes are ambiguous and should be scoped to th elements */

  199. .views-ui-name {

  200.   width: 20%;

  201. }

  202. .views-ui-description {

  203.   width: 30%;

  204. }

  205. .views-ui-machine-name {

  206.   width: 15%;

  207. }

  208. .views-ui-displays {

  209.   width: 25%;

  210. }

  211. .views-ui-operations {

  212.   width: 10%;

  213. }

  214. 

  215. /**

  216.  * I wish this didn't have to be so specific

  217.  */

  218. .form-item-description-enable + .form-item-description {

  219.   margin-top: 0;

  220. }

  221. .form-item-description-enable label {

  222.   font-weight: bold;

  223. }

  224. .form-item-page-create,

  225. .form-item-block-create {

  226.   margin-top: 13px;

  227. }

  228. .form-item-page-create label,

  229. .form-item-block-create label,

  230. .form-item-rest-export-create label {

  231.   font-weight: bold;

  232. }

  233. 

  234. /* This makes the form elements after the "Display Format" label flow underneath the label */

  235. .form-item-page-style-style-plugin > label,

  236. .form-item-block-style-style-plugin > label {

  237.   display: block;

  238. }

  239. .views-attachment .options-set label {

  240.   font-weight: normal;

  241. }

  242. 

  243. /* Styling for the form that allows views filters to be rearranged. */

  244. .group-populated {

  245.   display: none;

  246. }

  247. td.group-title {

  248.   font-weight: bold;

  249. }

  250. .views-ui-dialog td.group-title {

  251.   margin: 0;

  252.   padding: 0;

  253. }

  254. .views-ui-dialog td.group-title span {

  255.   display: block;

  256.   overflow: hidden;

  257.   height: 1px;

  258. }

  259. .group-message .form-submit,

  260. .views-remove-group-link,

  261. .views-add-group {

  262.   float: right; /* LTR */

  263.   clear: both;

  264. }

  265. [dir="rtl"] .group-message .form-submit,

  266. [dir="rtl"] .views-remove-group-link,

  267. [dir="rtl"] .views-add-group {

  268.   float: left;

  269. }

  270. .views-operator-label {

  271.   padding-left: 0.5em; /* LTR */

  272.   text-transform: uppercase;

  273.   font-weight: bold;

  274.   font-style: italic;

  275. }

  276. [dir="rtl"] .views-operator-label {

  277.   padding-right: 0.5em;

  278.   padding-left: 0;

  279. }

  280. .grouped-description,

  281. .exposed-description {

  282.   float: left; /* LTR */

  283.   padding-top: 3px;

  284.   padding-right: 10px; /* LTR */

  285. }

  286. [dir="rtl"] .grouped-description,

  287. [dir="rtl"] .exposed-description {

  288.   float: right;

  289.   padding-right: 0;

  290.   padding-left: 10px;

  291. }

  292. .views-displays {

  293.   padding-bottom: 36px;

  294.   border: 1px solid #ccc;

  295. }

  296. .views-display-top {

  297.   position: relative;

  298.   padding: 8px 8px 3px;

  299.   border-bottom: 1px solid #ccc;

  300.   background-color: #e1e2dc;

  301. }

  302. .views-display-top .tabs {

  303.   margin-right: 18em; /* LTR */

  304. }

  305. [dir="rtl"] .views-display-top .tabs {

  306.   margin-right: 0;

  307.   margin-left: 18em;

  308. }

  309. .views-display-top .tabs > li {

  310.   margin-right: 6px; /* LTR */

  311.   padding-left: 0; /* LTR */

  312. }

  313. [dir="rtl"] .views-display-top .tabs > li {

  314.   margin-right: 0.3em;

  315.   margin-left: 6px;

  316.   padding-right: 0;

  317. }

  318. .views-display-top .tabs > li:last-child {

  319.   margin-right: 0; /* LTR */

  320. }

  321. [dir="rtl"] .views-display-top .tabs > li:last-child {

  322.   margin-right: 0.3em;

  323.   margin-left: 0;

  324. }

  325. .form-edit .form-actions {

  326.   margin-top: 0;

  327.   padding: 8px 12px;

  328.   border-right: 1px solid #ccc;

  329.   border-bottom: 1px solid #ccc;

  330.   border-left: 1px solid #ccc;

  331.   background-color: #e1e2dc;

  332. }

  333. .views-displays .tabs.secondary {

  334.   margin-right: 200px; /* LTR */

  335.   border: 0;

  336. }

  337. [dir="rtl"] .views-displays .tabs.secondary {

  338.   margin-right: 0;

  339.   margin-left: 200px;

  340. }

  341. .views-displays .tabs.secondary li,

  342. .views-displays .tabs.secondary li.is-active {

  343.   width: auto;

  344.   padding: 0;

  345.   border: 0;

  346.   background: transparent;

  347. }

  348. .views-displays .tabs li.add ul.action-list li {

  349.   margin: 0;

  350. }

  351. .views-displays .tabs.secondary li {

  352.   margin: 0 5px 5px 6px; /* LTR */

  353. }

  354. [dir="rtl"] .views-displays .tabs.secondary li {

  355.   margin-right: 6px;

  356.   margin-left: 5px;

  357. }

  358. .views-displays .tabs.secondary .tabs__tab + .tabs__tab {

  359.   border-top: 0;

  360. }

  361. .views-displays .tabs li.tabs__tab:hover {

  362.   padding-left: 0; /* LTR */

  363.   border: 0;

  364. }

  365. [dir="rtl"] .views-displays .tabs li.tabs__tab:hover {

  366.   padding-right: 0;

  367. }

  368. .views-displays .tabs.secondary a {

  369.   display: inline-block;

  370.   padding: 3px 7px;

  371.   border: 1px solid #cbcbcb;

  372.   border-radius: 7px;

  373.   font-size: small;

  374.   line-height: 1.3333;

  375. }

  376. 

  377. /* Display a red border if the display doesn't validate. */

  378. .views-displays .tabs li.is-active a.is-active.error,

  379. .views-displays .tabs .error {

  380.   padding: 1px 6px;

  381.   border: 2px solid #ed541d;

  382. }

  383. .views-displays .tabs a:focus {

  384.   text-decoration: underline;

  385.   outline: none;

  386. }

  387. .views-displays .tabs.secondary li a {

  388.   background-color: #fff;

  389. }

  390. .views-displays .tabs li a:hover,

  391. .views-displays .tabs li.is-active a,

  392. .views-displays .tabs li.is-active a.is-active {

  393.   color: #fff;

  394.   background-color: #555;

  395. }

  396. .views-displays .tabs .open > a {

  397.   position: relative;

  398.   border-bottom: 1px solid transparent;

  399.   background-color: #f1f1f1;

  400. }

  401. .views-displays .tabs .open > a:hover {

  402.   color: #0074bd;

  403.   background-color: #f1f1f1;

  404. }

  405. .views-displays .tabs .action-list li {

  406.   padding: 2px 9px;

  407.   border-width: 0 1px;

  408.   border-style: solid;

  409.   border-color: #cbcbcb;

  410.   background-color: #f1f1f1;

  411. }

  412. .views-displays .tabs .action-list li:first-child {

  413.   border-width: 1px 1px 0;

  414. }

  415. .views-displays .action-list li:last-child {

  416.   border-width: 0 1px 1px;

  417. }

  418. .views-displays .tabs .action-list li:last-child {

  419.   border-width: 0 1px 1px;

  420. }

  421. .views-displays .tabs .action-list input.form-submit {

  422.   margin: 0;

  423.   padding: 0;

  424.   border: medium none;

  425.   background: none repeat scroll 0 0 transparent;

  426. }

  427. .views-displays .tabs .action-list input.form-submit:hover {

  428.   box-shadow: none;

  429. }

  430. .views-displays .tabs .action-list li:hover {

  431.   background-color: #ddd;

  432. }

  433. .edit-display-settings {

  434.   margin: 12px 12px 0 12px;

  435. }

  436. .edit-display-settings-top.views-ui-display-tab-bucket {

  437.   position: relative;

  438.   margin: 0 0 15px 0;

  439.   padding-top: 4px;

  440.   padding-bottom: 4px;

  441.   border: 1px solid #f3f3f3;

  442.   line-height: 20px;

  443. }

  444. .views-display-column {

  445.   border: 1px solid #f3f3f3;

  446. }

  447. .views-display-column + .views-display-column {

  448.   margin-top: 0;

  449. }

  450. .view-preview-form .form-item-view-args,

  451. .view-preview-form .form-actions {

  452.   margin-top: 5px;

  453. }

  454. .view-preview-form .arguments-preview {

  455.   font-size: 1em;

  456. }

  457. .view-preview-form .arguments-preview,

  458. .view-preview-form .form-item-view-args {

  459.   margin-left: 10px; /* LTR */

  460. }

  461. [dir="rtl"] .view-preview-form .arguments-preview,

  462. [dir="rtl"] .view-preview-form .form-item-view-args {

  463.   margin-right: 10px;

  464.   margin-left: 0;

  465. }

  466. .view-preview-form .form-item-view-args label {

  467.   float: left; /* LTR */

  468.   height: 6ex;

  469.   margin-right: 0.75em; /* LTR */

  470.   font-weight: normal;

  471. }

  472. [dir="rtl"] .view-preview-form .form-item-view-args label {

  473.   float: right;

  474.   margin-right: 0.2em;

  475.   margin-left: 0.75em;

  476. }

  477. .form-item-live-preview,

  478. .form-item-view-args,

  479. .preview-submit-wrapper {

  480.   display: inline-block;

  481. }

  482. .form-item-live-preview,

  483. .view-preview-form .form-actions {

  484.   vertical-align: top;

  485. }

  486. 

  487. @media screen and (min-width: 45em) { /* 720px */

  488.   .view-preview-form .form-type-textfield .description {

  489.     white-space: nowrap;

  490.   }

  491. }

  492. 

  493. /* These are the individual "buckets," or boxes, inside the display settings area */

  494. .views-ui-display-tab-bucket {

  495.   position: relative;

  496.   margin: 0;

  497.   padding-top: 4px;

  498.   border-bottom: 1px solid #f3f3f3;

  499.   line-height: 20px;

  500. }

  501. .views-ui-display-tab-bucket:last-of-type {

  502.   border-bottom: none;

  503. }

  504. .views-ui-display-tab-bucket + .views-ui-display-tab-bucket {

  505.   border-top: medium none;

  506. }

  507. .views-ui-display-tab-bucket__title,

  508. .views-ui-display-tab-bucket > .views-display-setting {

  509.   padding: 2px 6px 4px;

  510. }

  511. .views-ui-display-tab-bucket__title {

  512.   margin: 0;

  513.   font-size: small;

  514. }

  515. .views-ui-display-tab-bucket.access {

  516.   padding-top: 0;

  517. }

  518. .views-ui-display-tab-bucket.page-settings {

  519.   border-bottom: medium none;

  520. }

  521. .views-display-setting .views-ajax-link {

  522.   margin-right: 0.2083em;

  523.   margin-left: 0.2083em;

  524. }

  525. 

  526. .views-ui-display-tab-setting > span {

  527.   margin-left: 0.5em; /* LTR */

  528. }

  529. [dir="rtl"] .views-ui-display-tab-setting > span {

  530.   margin-right: 0.5em;

  531.   margin-left: 0;

  532. }

  533. 

  534. /** Applies an overridden(italics) font style to overridden buckets.

  535.  * The better way to implement this would be to add the overridden class

  536.  * to the bucket header when the bucket is overridden and style it as a

  537.  * generic icon classed element. For the moment, we'll style the bucket

  538.  * header specifically with the overridden font style.

  539.  */

  540. .views-ui-display-tab-setting.overridden,

  541. .views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {

  542.   font-style: italic;

  543. }

  544. 

  545. /* This is each row within one of the "boxes." */

  546. .views-ui-display-tab-bucket .views-display-setting {

  547.   padding-bottom: 2px;

  548.   color: #666;

  549.   font-size: 12px;

  550. }

  551. .views-ui-display-tab-bucket .views-display-setting:nth-of-type(even) {

  552.   background-color: #f3f5ee;

  553. }

  554. .views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {

  555.   background-color: transparent;

  556. }

  557. .views-ui-display-tab-bucket .views-group-text {

  558.   margin-top: 6px;

  559.   margin-bottom: 6px;

  560. }

  561. .views-display-setting .label {

  562.   margin-right: 3px; /* LTR */

  563. }

  564. [dir="rtl"] .views-display-setting .label {

  565.   margin-right: 0;

  566.   margin-left: 3px;

  567. }

  568. .views-edit-view {

  569.   margin-bottom: 15px;

  570. }

  571. 

  572. /* The contents of the popup dialog on the views edit form. */

  573. .views-filterable-options .form-type-checkbox {

  574.   padding: 5px 8px;

  575.   border-top: none;

  576. }

  577. .views-filterable-options {

  578.   border-top: 1px solid #ccc;

  579. }

  580. .filterable-option .form-item {

  581.   margin-top: 0;

  582.   margin-bottom: 0;

  583. }

  584. .views-filterable-options .filterable-option .title {

  585.   cursor: pointer;

  586.   font-weight: bold;

  587. }

  588. .views-filterable-options .form-type-checkbox .description {

  589.   margin-top: 0;

  590.   margin-bottom: 0;

  591. }

  592. .views-filterable-options-controls .form-item {

  593.   width: 30%;

  594.   margin: 0 0 0 2%; /* LTR */

  595. }

  596. [dir="rtl"] .views-filterable-options-controls .form-item {

  597.   margin: 0 2% 0 0;

  598. }

  599. .views-filterable-options-controls input,

  600. .views-filterable-options-controls select {

  601.   width: 100%;

  602. }

  603. .views-ui-dialog .ui-dialog-content {

  604.   padding: 0;

  605. }

  606. .views-ui-dialog .views-filterable-options {

  607.   margin-bottom: 10px;

  608. }

  609. .views-ui-dialog .views-add-form-selected.container-inline {

  610.   padding: 0;

  611. }

  612. .views-ui-dialog .views-add-form-selected.container-inline > div {

  613.   display: block;

  614. }

  615. .views-ui-dialog .form-item-selected {

  616.   margin: 0;

  617.   padding: 6px 16px;

  618. }

  619. .views-ui-dialog .views-override:not(:empty) {

  620.   padding: 8px 13px;

  621.   background-color: #f3f4ee;

  622. }

  623. .views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {

  624.   border: none;

  625. }

  626. .views-ui-dialog .views-offset-top {

  627.   border-bottom: 1px solid #ccc;

  628. }

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

  630.   border-top: 1px solid #ccc;

  631. }

  632. .views-ui-dialog .views-override > * {

  633.   margin: 0;

  634. }

  635. .views-ui-dialog details .item-list {

  636.   padding-left: 2em; /* LTR */

  637. }

  638. [dir="rtl"] .views-ui-dialog details .item-list {

  639.   padding-right: 2em;

  640.   padding-left: 0;

  641. }

  642. .views-ui-rearrange-filter-form table {

  643.   border-collapse: collapse;

  644. }

  645. .views-ui-rearrange-filter-form tr td[rowspan] {

  646.   border-width: 0 1px 1px 1px;

  647.   border-style: solid;

  648.   border-color: #cdcdcd;

  649. }

  650. .views-ui-rearrange-filter-form tr[id^="views-row"] {

  651.   border-right: 1px solid #cdcdcd; /* LTR */

  652. }

  653. [dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {

  654.   border-right: 0;

  655.   border-left: 1px solid #cdcdcd;

  656. }

  657. .views-ui-rearrange-filter-form .even td {

  658.   background-color: #f3f4ed;

  659. }

  660. .views-ui-rearrange-filter-form .views-group-title {

  661.   border-top: 1px solid #cdcdcd;

  662. }

  663. .views-ui-rearrange-filter-form .group-empty {

  664.   border-bottom: 1px solid #cdcdcd;

  665. }

  666. .form-item-options-expose-required,

  667. .form-item-options-expose-label,

  668. .form-item-options-expose-field-identifier,

  669. .form-item-options-expose-description {

  670.   margin-top: 6px;

  671.   margin-bottom: 6px;

  672.   margin-left: 18px; /* LTR */

  673. }

  674. [dir="rtl"] .form-item-options-expose-required,

  675. [dir="rtl"] .form-item-options-expose-label,

  676. [dir="rtl"] .form-item-options-expose-field-identifier,

  677. [dir="rtl"] .form-item-options-expose-description {

  678.   margin-right: 18px;

  679.   margin-left: 0;

  680. }

  681. .views-preview-wrapper {

  682.   border: 1px solid #ccc;

  683. }

  684. .view-preview-form {

  685.   position: relative;

  686. }

  687. .view-preview-form__title {

  688.   margin-top: 0;

  689.   padding: 8px 12px;

  690.   border-bottom: 1px solid #ccc;

  691.   background-color: #e1e2dc;

  692. }

  693. .view-preview-form .form-item-live-preview {

  694.   position: absolute;

  695.   top: 3px;

  696.   right: 12px;

  697.   margin-top: 2px;

  698.   margin-left: 2px; /* LTR */

  699. }

  700. [dir="rtl"] .view-preview-form .form-item-live-preview {

  701.   right: auto;

  702.   left: 12px;

  703.   margin-right: 2px;

  704.   margin-left: 0;

  705. }

  706. .views-live-preview {

  707.   padding: 12px;

  708. }

  709. .views-live-preview .views-query-info {

  710.   overflow: auto;

  711. }

  712. .views-live-preview .section-title {

  713.   display: inline-block;

  714.   margin-top: 0;

  715.   margin-bottom: 0;

  716.   color: #818181;

  717.   font-size: 13px;

  718.   font-weight: normal;

  719.   line-height: 1.6154;

  720. }

  721. .views-live-preview .view > * {

  722.   margin-top: 18px;

  723. }

  724. .views-live-preview .preview-section {

  725.   margin: 0 -5px;

  726.   padding: 3px 5px;

  727.   border: 1px dashed #dedede;

  728. }

  729. .views-live-preview li.views-row + li.views-row {

  730.   margin-top: 18px;

  731. }

  732. 

  733. /* The div.views-row is intentional and excludes li.views-row, for example */

  734. .views-live-preview div.views-row + div.views-row {

  735.   margin-top: 36px;

  736. }

  737. .views-query-info table {

  738.   margin: 10px 0;

  739.   border-spacing: 0;

  740.   border-collapse: separate;

  741.   border-color: #ddd;

  742. }

  743. .views-query-info table tr {

  744.   background-color: #f9f9f9;

  745. }

  746. .views-query-info table th,

  747. .views-query-info table td {

  748.   padding: 4px 10px;

  749.   color: #666;

  750. }

  751. .messages {

  752.   margin-bottom: 18px;

  753.   line-height: 1.4555;

  754. }

  755. .dropbutton-multiple {

  756.   position: absolute;

  757. }

  758. .dropbutton-widget {

  759.   position: relative;

  760. }

  761. .js .views-edit-view .dropbutton-wrapper .dropbutton .dropbutton-action > * {

  762.   font-size: 10px;

  763. }

  764. .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {

  765.   position: absolute;

  766.   z-index: 2;

  767.   top: -1px;

  768.   right: -5px; /* LTR */

  769. }

  770. [dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {

  771.   right: auto;

  772.   left: -5px;

  773. }

  774. .js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {

  775.   border-radius: 1.1em 0 0 0; /* LTR */

  776. }

  777. [dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {

  778.   border-radius: 0 1.1em 0 0;

  779. }

  780. .js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {

  781.   border-radius: 0 0 0 1.1em; /* LTR */

  782. }

  783. [dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {

  784.   border-radius: 0 0 1.1em 0;

  785. }

  786. .views-display-top .dropbutton-wrapper {

  787.   position: absolute;

  788.   top: 7px;

  789.   right: 12px; /* LTR */

  790. }

  791. [dir="rtl"] .views-display-top .dropbutton-wrapper {

  792.   right: auto;

  793.   left: 12px;

  794. }

  795. .views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {

  796.   width: auto;

  797. }

  798. 

  799. .views-ui-display-tab-bucket .dropbutton-wrapper {

  800.   position: absolute;

  801.   top: 4px;

  802.   right: 5px; /* LTR */

  803. }

  804. [dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {

  805.   right: auto;

  806.   left: 5px;

  807. }

  808. .views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {

  809.   width: auto;

  810. }

  811. .views-ui-display-tab-actions .dropbutton-wrapper li a,

  812. .views-ui-display-tab-actions .dropbutton-wrapper input {

  813.   margin-bottom: 0;

  814.   padding-left: 12px; /* LTR */

  815.   border: medium;

  816.   background: none;

  817.   font-family: inherit;

  818.   font-size: 12px;

  819. }

  820. [dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper li a,

  821. [dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper input {

  822.   padding-right: 12px;

  823.   padding-left: 0.5em;

  824. }

  825. .views-ui-display-tab-actions .dropbutton-wrapper input:hover {

  826.   border: none;

  827.   background: none;

  828. }

  829. .views-list-section {

  830.   margin-bottom: 2em;

  831. }

  832. .form-textarea-wrapper,

  833. .form-item-options-content {

  834.   width: 100%;

  835. }