views_ui.admin.theme.css

Same filename in this branch
  1. 11.1.x core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  2. 11.1.x core/themes/claro/css/theme/views_ui.admin.theme.css

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

File

core/modules/views_ui/css/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/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:

  40.     linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,

  41.     repeat-y;

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

  43. }

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

  45.   border-color: #d0d0d0;

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

  47. }

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

  49.   border-color: #c0c0c0;

  50. }

  51. .views-admin span.icon {

  52.   position: relative;

  53.   float: left; /* LTR */

  54. }

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

  56.   float: right;

  57. }

  58. .views-admin .icon.compact {

  59.   display: block;

  60.   overflow: hidden;

  61.   text-indent: -9999px;

  62.   direction: ltr;

  63. }

  64. 

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

  66. .views-admin .icon-text {

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

  68. }

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

  70.   padding-right: 19px;

  71.   padding-left: 0;

  72. }

  73. .views-admin .icon.linked {

  74.   background-position: center -153px;

  75. }

  76. .views-admin .icon.unlinked {

  77.   background-position: center -195px;

  78. }

  79. .views-admin .icon.add {

  80.   background-position: center 3px;

  81. }

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

  83.   background-position:

  84.     center 3px,

  85.     left top; /* LTR */

  86. }

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

  88.   background-position:

  89.     center 3px,

  90.     right top;

  91. }

  92. .views-admin .icon.delete {

  93.   background-position: center -52px;

  94. }

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

  96.   background-position:

  97.     center -52px,

  98.     left top; /* LTR */

  99. }

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

  101.   background-position:

  102.     center -52px,

  103.     right top;

  104. }

  105. .views-admin .icon.rearrange {

  106.   background-position: center -111px;

  107. }

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

  109.   background-position:

  110.     center -111px,

  111.     left top; /* LTR */

  112. }

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

  114.   background-position:

  115.     center -111px,

  116.     right top;

  117. }

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

  119.   background-position: center -25px;

  120. }

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

  122.   background-position: center 3px;

  123. }

  124. details.box-padding {

  125.   border: none;

  126. }

  127. .views-admin details details {

  128.   margin-bottom: 0;

  129. }

  130. .form-item {

  131.   margin-top: 9px;

  132.   padding-top: 0;

  133.   padding-bottom: 0;

  134. }

  135. .form-type-checkbox {

  136.   margin-top: 6px;

  137. }

  138. .form-checkbox,

  139. .form-radio {

  140.   vertical-align: baseline;

  141. }

  142. 

  143. .container-inline {

  144.   padding-top: 15px;

  145.   padding-bottom: 15px;

  146. }

  147. .container-inline > * + *,

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

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

  150. }

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

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

  153.   padding-right: 4px;

  154.   padding-left: 0;

  155. }

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

  157.   margin-top: 1em;

  158.   margin-bottom: 1em;

  159.   padding-top: 0;

  160. }

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

  162.   padding-bottom: 0;

  163. }

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

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

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

  167. }

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

  169.   margin-right: 16px;

  170.   margin-left: 0;

  171. }

  172. 

  173. /* Hide 'remove' checkboxes. */

  174. .views-remove-checkbox {

  175.   display: none;

  176. }

  177. 

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

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

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

  181.   line-height: 2;

  182. }

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

  184.   margin-top: 6px;

  185.   margin-bottom: 6px;

  186. }

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

  188.   margin: 0.25em 0;

  189.   font-weight: bold;

  190. }

  191. .view-changed {

  192.   margin-bottom: 21px;

  193. }

  194. .views-admin .unit-title {

  195.   margin-top: 18px;

  196.   margin-bottom: 0;

  197.   font-size: 15px;

  198.   line-height: 1.6154;

  199. }

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

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

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

  203.   list-style: none;

  204. }

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

  206.   margin-right: 0;

  207.   margin-left: inherit;

  208.   padding-right: 0;

  209.   padding-left: inherit;

  210. }

  211. 

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

  213. .views-ui-name {

  214.   width: 20%;

  215. }

  216. .views-ui-description {

  217.   width: 30%;

  218. }

  219. .views-ui-machine-name {

  220.   width: 15%;

  221. }

  222. .views-ui-displays {

  223.   width: 25%;

  224. }

  225. .views-ui-operations {

  226.   width: 10%;

  227. }

  228. 

  229. /**

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

  231.  */

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

  233.   margin-top: 0;

  234. }

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

  236.   font-weight: bold;

  237. }

  238. .form-item-page-create,

  239. .form-item-block-create {

  240.   margin-top: 13px;

  241. }

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

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

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

  245.   font-weight: bold;

  246. }

  247. 

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

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

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

  251.   display: block;

  252. }

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

  254.   font-weight: normal;

  255. }

  256. 

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

  258. .group-populated {

  259.   display: none;

  260. }

  261. td.group-title {

  262.   font-weight: bold;

  263. }

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

  265.   margin: 0;

  266.   padding: 0;

  267. }

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

  269.   display: block;

  270.   overflow: hidden;

  271.   height: 1px;

  272. }

  273. .group-message .form-submit,

  274. .views-remove-group-link,

  275. .views-add-group {

  276.   float: right; /* LTR */

  277.   clear: both;

  278. }

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

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

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

  282.   float: left;

  283. }

  284. .views-operator-label {

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

  286.   text-transform: uppercase;

  287.   font-weight: bold;

  288.   font-style: italic;

  289. }

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

  291.   padding-right: 0.5em;

  292.   padding-left: 0;

  293. }

  294. .grouped-description,

  295. .exposed-description {

  296.   float: left; /* LTR */

  297.   padding-top: 3px;

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

  299. }

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

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

  302.   float: right;

  303.   padding-right: 0;

  304.   padding-left: 10px;

  305. }

  306. .views-displays {

  307.   padding-bottom: 36px;

  308.   border: 1px solid #ccc;

  309. }

  310. .views-display-top {

  311.   position: relative;

  312.   padding: 8px 8px 3px;

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

  314.   background-color: #e1e2dc;

  315. }

  316. .views-display-top .tabs {

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

  318. }

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

  320.   margin-right: 0;

  321.   margin-left: 18em;

  322. }

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

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

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

  326. }

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

  328.   margin-right: 0.3em;

  329.   margin-left: 6px;

  330.   padding-right: 0;

  331. }

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

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

  334. }

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

  336.   margin-right: 0.3em;

  337.   margin-left: 0;

  338. }

  339. .form-edit .form-actions {

  340.   margin-top: 0;

  341.   padding: 8px 12px;

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

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

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

  345.   background-color: #e1e2dc;

  346. }

  347. .views-displays .tabs.secondary {

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

  349.   border: 0;

  350. }

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

  352.   margin-right: 0;

  353.   margin-left: 200px;

  354. }

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

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

  357.   width: auto;

  358.   padding: 0;

  359.   border: 0;

  360.   background: transparent;

  361. }

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

  363.   margin: 0;

  364. }

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

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

  367. }

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

  369.   margin-right: 6px;

  370.   margin-left: 5px;

  371. }

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

  373.   border-top: 0;

  374. }

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

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

  377.   border: 0;

  378. }

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

  380.   padding-right: 0;

  381. }

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

  383.   display: inline-block;

  384.   padding: 3px 7px;

  385.   border: 1px solid #cbcbcb;

  386.   border-radius: 7px;

  387.   font-size: small;

  388.   line-height: 1.3333;

  389. }

  390. 

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

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

  393. .views-displays .tabs .error {

  394.   padding: 1px 6px;

  395.   border: 2px solid #ed541d;

  396. }

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

  398.   text-decoration: underline;

  399.   outline: none;

  400. }

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

  402.   background-color: #fff;

  403. }

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

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

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

  407.   color: #fff;

  408.   background-color: #555;

  409. }

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

  411.   position: relative;

  412.   border-bottom: 1px solid transparent;

  413.   background-color: #f1f1f1;

  414. }

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

  416.   color: #0074bd;

  417.   background-color: #f1f1f1;

  418. }

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

  420.   padding: 2px 9px;

  421.   border-width: 0 1px;

  422.   border-style: solid;

  423.   border-color: #cbcbcb;

  424.   background-color: #f1f1f1;

  425. }

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

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

  428. }

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

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

  431. }

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

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

  434. }

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

  436.   margin: 0;

  437.   padding: 0;

  438.   border: medium none;

  439.   background: none repeat scroll 0 0 transparent;

  440. }

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

  442.   box-shadow: none;

  443. }

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

  445.   background-color: #ddd;

  446. }

  447. .edit-display-settings {

  448.   margin: 12px 12px 0 12px;

  449. }

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

  451.   position: relative;

  452.   margin: 0 0 15px 0;

  453.   padding-top: 4px;

  454.   padding-bottom: 4px;

  455.   border: 1px solid #f3f3f3;

  456.   line-height: 20px;

  457. }

  458. .views-display-column {

  459.   border: 1px solid #f3f3f3;

  460. }

  461. .views-display-column + .views-display-column {

  462.   margin-top: 0;

  463. }

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

  465. .view-preview-form .form-actions {

  466.   margin-top: 5px;

  467. }

  468. .view-preview-form .arguments-preview {

  469.   font-size: 1em;

  470. }

  471. .view-preview-form .arguments-preview,

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

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

  474. }

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

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

  477.   margin-right: 10px;

  478.   margin-left: 0;

  479. }

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

  481.   float: left; /* LTR */

  482.   height: 6ex;

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

  484.   font-weight: normal;

  485. }

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

  487.   float: right;

  488.   margin-right: 0.2em;

  489.   margin-left: 0.75em;

  490. }

  491. .form-item-live-preview,

  492. .form-item-view-args,

  493. .preview-submit-wrapper {

  494.   display: inline-block;

  495. }

  496. .form-item-live-preview,

  497. .view-preview-form .form-actions {

  498.   vertical-align: top;

  499. }

  500. 

  501. @media screen and (min-width: 45em) {

  502.   /* 720px */

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

  504.     white-space: nowrap;

  505.   }

  506. }

  507. 

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

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

  510.   position: relative;

  511.   margin: 0;

  512.   padding-top: 4px;

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

  514.   line-height: 20px;

  515. }

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

  517.   border-bottom: none;

  518. }

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

  520.   border-top: medium none;

  521. }

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

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

  524.   padding: 2px 6px 4px;

  525. }

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

  527.   margin: 0;

  528.   font-size: small;

  529. }

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

  531.   padding-top: 0;

  532. }

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

  534.   border-bottom: medium none;

  535. }

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

  537.   margin-right: 0.2083em;

  538.   margin-left: 0.2083em;

  539. }

  540. 

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

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

  543. }

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

  545.   margin-right: 0.5em;

  546.   margin-left: 0;

  547. }

  548. 

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

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

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

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

  553.  * header specifically with the overridden font style.

  554.  */

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

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

  557.   font-style: italic;

  558. }

  559. 

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

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

  562.   padding-bottom: 2px;

  563.   color: #666;

  564.   font-size: 12px;

  565. }

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

  567.   background-color: #f3f5ee;

  568. }

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

  570.   background-color: transparent;

  571. }

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

  573.   margin-top: 6px;

  574.   margin-bottom: 6px;

  575. }

  576. .views-display-setting .label {

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

  578. }

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

  580.   margin-right: 0;

  581.   margin-left: 3px;

  582. }

  583. .views-edit-view {

  584.   margin-bottom: 15px;

  585. }

  586. .views-edit-view.disabled .views-displays {

  587.   background-color: #fff4f4;

  588. }

  589. .views-edit-view.disabled .views-display-column {

  590.   background: white;

  591. }

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

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

  594.   padding: 5px 8px;

  595.   border-top: none;

  596. }

  597. .views-filterable-options {

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

  599. }

  600. .filterable-option .form-item {

  601.   margin-top: 0;

  602.   margin-bottom: 0;

  603. }

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

  605.   cursor: pointer;

  606.   font-weight: bold;

  607. }

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

  609.   margin-top: 0;

  610.   margin-bottom: 0;

  611. }

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

  613.   width: 30%;

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

  615. }

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

  617.   margin: 0 2% 0 0;

  618. }

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

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

  621.   width: 100%;

  622. }

  623. .views-ui-dialog .ui-dialog-content {

  624.   padding: 0;

  625. }

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

  627.   margin-bottom: 10px;

  628. }

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

  630.   padding: 0;

  631. }

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

  633.   display: block;

  634. }

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

  636.   margin: 0;

  637.   padding: 6px 16px;

  638. }

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

  640.   padding: 8px 13px;

  641.   background-color: #f3f4ee;

  642. }

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

  644.   border: none;

  645. }

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

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

  648. }

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

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

  651. }

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

  653.   margin: 0;

  654. }

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

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

  657. }

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

  659.   padding-right: 2em;

  660.   padding-left: 0;

  661. }

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

  663.   border-collapse: collapse;

  664. }

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

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

  667.   border-style: solid;

  668.   border-color: #cdcdcd;

  669. }

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

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

  672. }

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

  674.   border-right: 0;

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

  676. }

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

  678.   background-color: #f3f4ed;

  679. }

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

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

  682. }

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

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

  685. }

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

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

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

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

  690.   margin-top: 6px;

  691.   margin-bottom: 6px;

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

  693. }

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

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

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

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

  698.   margin-right: 18px;

  699.   margin-left: 0;

  700. }

  701. .views-preview-wrapper {

  702.   border: 1px solid #ccc;

  703. }

  704. .view-preview-form {

  705.   position: relative;

  706. }

  707. .view-preview-form__title {

  708.   margin-top: 0;

  709.   padding: 8px 12px;

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

  711.   background-color: #e1e2dc;

  712. }

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

  714.   position: absolute;

  715.   top: 3px;

  716.   right: 12px;

  717.   margin-top: 2px;

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

  719. }

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

  721.   right: auto;

  722.   left: 12px;

  723.   margin-right: 2px;

  724.   margin-left: 0;

  725. }

  726. .views-live-preview {

  727.   padding: 12px;

  728. }

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

  730.   overflow: auto;

  731. }

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

  733.   display: inline-block;

  734.   margin-top: 0;

  735.   margin-bottom: 0;

  736.   color: #818181;

  737.   font-size: 13px;

  738.   font-weight: normal;

  739.   line-height: 1.6154;

  740. }

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

  742.   margin-top: 18px;

  743. }

  744. .views-live-preview .preview-section {

  745.   margin: 0 -5px;

  746.   padding: 3px 5px;

  747.   border: 1px dashed #dedede;

  748. }

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

  750.   margin-top: 18px;

  751. }

  752. 

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

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

  755.   margin-top: 36px;

  756. }

  757. .views-query-info table {

  758.   margin: 10px 0;

  759.   border-spacing: 0;

  760.   border-collapse: separate;

  761.   border-color: #ddd;

  762. }

  763. .views-query-info table tr {

  764.   background-color: #f9f9f9;

  765. }

  766. .views-query-info table th,

  767. .views-query-info table td {

  768.   padding: 4px 10px;

  769.   color: #666;

  770. }

  771. .messages {

  772.   margin-bottom: 18px;

  773.   line-height: 1.4555;

  774. }

  775. .dropbutton-multiple {

  776.   position: absolute;

  777. }

  778. .dropbutton-widget {

  779.   position: relative;

  780. }

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

  782.   font-size: 10px;

  783. }

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

  785.   position: absolute;

  786.   z-index: 2;

  787.   top: -1px;

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

  789. }

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

  791.   right: auto;

  792.   left: -5px;

  793. }

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

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

  796. }

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

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

  799. }

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

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

  802. }

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

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

  805. }

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

  807.   position: absolute;

  808.   top: 7px;

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

  810. }

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

  812.   right: auto;

  813.   left: 12px;

  814. }

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

  816.   width: auto;

  817. }

  818. 

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

  820.   position: absolute;

  821.   top: 4px;

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

  823. }

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

  825.   right: auto;

  826.   left: 5px;

  827. }

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

  829.   width: auto;

  830. }

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

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

  833.   margin-bottom: 0;

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

  835.   border: medium;

  836.   background: none;

  837.   font-family: inherit;

  838.   font-size: 12px;

  839. }

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

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

  842.   padding-right: 12px;

  843.   padding-left: 0.5em;

  844. }

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

  846.   border: none;

  847.   background: none;

  848. }

  849. .views-list-section {

  850.   margin-bottom: 2em;

  851. }

  852. .form-textarea-wrapper,

  853. .form-item-options-content {

  854.   width: 100%;

  855. }