views_ui.admin.theme.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
  2. 9 core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
  3. 10 core/themes/claro/css/theme/views_ui.admin.theme.pcss.css

View UI admin theme.

Replaces the inherited styles provided by Stable.

File

core/themes/claro/css/theme/views_ui.admin.theme.pcss.css

View on git.drupalcode.org
View source 
  1. /**

  2.  * @file

  3.  * View UI admin theme.

  4.  *

  5.  * Replaces the inherited styles provided by Stable.

  6.  */

  7. 

  8. .views-admin .links {

  9.   margin: 0;

  10.   list-style: none outside none;

  11. }

  12. .views-admin a:hover {

  13.   text-decoration: none;

  14. }

  15. .box-padding {

  16.   padding-right: 12px;

  17.   padding-left: 12px;

  18. }

  19. .box-margin {

  20.   margin: 12px 12px 0 12px;

  21. }

  22. .views-admin .icon {

  23.   width: 16px;

  24.   height: 16px;

  25. }

  26. .views-admin .icon,

  27. .views-admin .icon-text {

  28.   background-image: url(../../images/core/stable/views_ui/sprites.png);

  29.   background-repeat: no-repeat;

  30.   background-attachment: scroll;

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

  32. }

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

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

  35.   background-position: right top;

  36. }

  37. .views-admin a.icon {

  38.   border: 1px solid #ddd;

  39.   border-radius: 4px;

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

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

  42. }

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

  44.   border-color: #d0d0d0;

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

  46. }

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

  48.   border-color: #c0c0c0;

  49. }

  50. .views-admin span.icon {

  51.   position: relative;

  52.   float: left; /* LTR */

  53. }

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

  55.   float: right;

  56. }

  57. .views-admin .icon.compact {

  58.   display: block;

  59.   overflow: hidden;

  60.   text-indent: -9999px;

  61.   direction: ltr;

  62. }

  63. 

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

  65. .views-admin .icon-text {

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

  67. }

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

  69.   padding-right: 19px;

  70.   padding-left: 0;

  71. }

  72. .views-admin .icon.linked {

  73.   background-position: center -153px;

  74. }

  75. .views-admin .icon.unlinked {

  76.   background-position: center -195px;

  77. }

  78. .views-admin .icon.add {

  79.   background-position: center 3px;

  80. }

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

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

  83. }

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

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

  86. }

  87. .views-admin .icon.delete {

  88.   background-position: center -52px;

  89. }

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

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

  92. }

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

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

  95. }

  96. .views-admin .icon.rearrange {

  97.   background-position: center -111px;

  98. }

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

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

  101. }

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

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

  104. }

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

  106.   background-position: center -25px;

  107. }

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

  109.   background-position: center 3px;

  110. }

  111. details.box-padding {

  112.   border: none;

  113. }

  114. .views-admin details details {

  115.   margin-bottom: 0;

  116. }

  117. .form-item {

  118.   margin-top: 9px;

  119.   padding-top: 0;

  120.   padding-bottom: 0;

  121. }

  122. .form-type-checkbox {

  123.   margin-top: 6px;

  124. }

  125. .form-checkbox,

  126. .form-radio {

  127.   vertical-align: baseline;

  128. }

  129. 

  130. .container-inline {

  131.   padding-top: 15px;

  132.   padding-bottom: 15px;

  133. }

  134. .container-inline > * + *,

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

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

  137. }

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

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

  140.   padding-right: 4px;

  141.   padding-left: 0;

  142. }

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

  144.   margin-top: 1em;

  145.   margin-bottom: 1em;

  146.   padding-top: 0;

  147. }

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

  149.   padding-bottom: 0;

  150. }

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

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

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

  154. }

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

  156.   margin-right: 16px;

  157.   margin-left: 0;

  158. }

  159. 

  160. /* Hide 'remove' checkboxes. */

  161. .views-remove-checkbox {

  162.   display: none;

  163. }

  164. 

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

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

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

  168.   line-height: 2;

  169. }

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

  171.   margin-top: 6px;

  172.   margin-bottom: 6px;

  173. }

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

  175.   margin: 0.25em 0;

  176.   font-weight: bold;

  177. }

  178. .view-changed {

  179.   margin-bottom: 21px;

  180. }

  181. .views-admin .unit-title {

  182.   margin-top: 18px;

  183.   margin-bottom: 0;

  184.   font-size: 15px;

  185.   line-height: 1.6154;

  186. }

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

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

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

  190.   list-style: none;

  191. }

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

  193.   margin-right: 0;

  194.   margin-left: inherit;

  195.   padding-right: 0;

  196.   padding-left: inherit;

  197. }

  198. 

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

  200. .views-ui-name {

  201.   width: 20%;

  202. }

  203. .views-ui-description {

  204.   width: 30%;

  205. }

  206. .views-ui-machine-name {

  207.   width: 15%;

  208. }

  209. .views-ui-displays {

  210.   width: 25%;

  211. }

  212. .views-ui-operations {

  213.   width: 10%;

  214. }

  215. 

  216. /**

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

  218.  */

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

  220.   margin-top: 0;

  221. }

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

  223.   font-weight: bold;

  224. }

  225. .form-item-page-create,

  226. .form-item-block-create {

  227.   margin-top: 13px;

  228. }

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

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

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

  232.   font-weight: bold;

  233. }

  234. 

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

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

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

  238.   display: block;

  239. }

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

  241.   font-weight: normal;

  242. }

  243. 

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

  245. .group-populated {

  246.   display: none;

  247. }

  248. td.group-title {

  249.   font-weight: bold;

  250. }

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

  252.   margin: 0;

  253.   padding: 0;

  254. }

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

  256.   display: block;

  257.   overflow: hidden;

  258.   height: 1px;

  259. }

  260. .group-message .form-submit,

  261. .views-remove-group-link,

  262. .views-add-group {

  263.   float: right; /* LTR */

  264.   clear: both;

  265. }

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

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

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

  269.   float: left;

  270. }

  271. .views-operator-label {

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

  273.   text-transform: uppercase;

  274.   font-weight: bold;

  275.   font-style: italic;

  276. }

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

  278.   padding-right: 0.5em;

  279.   padding-left: 0;

  280. }

  281. .grouped-description,

  282. .exposed-description {

  283.   float: left; /* LTR */

  284.   padding-top: 3px;

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

  286. }

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

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

  289.   float: right;

  290.   padding-right: 0;

  291.   padding-left: 10px;

  292. }

  293. .views-displays {

  294.   padding-bottom: 36px;

  295.   border: 1px solid #ccc;

  296. }

  297. .views-display-top {

  298.   position: relative;

  299.   padding: 8px 8px 3px;

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

  301.   background-color: #e1e2dc;

  302. }

  303. .views-display-top .tabs {

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

  305. }

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

  307.   margin-right: 0;

  308.   margin-left: 18em;

  309. }

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

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

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

  313. }

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

  315.   margin-right: 0.3em;

  316.   margin-left: 6px;

  317.   padding-right: 0;

  318. }

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

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

  321. }

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

  323.   margin-right: 0.3em;

  324.   margin-left: 0;

  325. }

  326. .form-edit .form-actions {

  327.   margin-top: 0;

  328.   padding: 8px 12px;

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

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

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

  332.   background-color: #e1e2dc;

  333. }

  334. .views-displays .tabs.secondary {

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

  336.   border: 0;

  337. }

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

  339.   margin-right: 0;

  340.   margin-left: 200px;

  341. }

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

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

  344.   width: auto;

  345.   padding: 0;

  346.   border: 0;

  347.   background: transparent;

  348. }

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

  350.   margin: 0;

  351. }

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

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

  354. }

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

  356.   margin-right: 6px;

  357.   margin-left: 5px;

  358. }

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

  360.   border-top: 0;

  361. }

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

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

  364.   border: 0;

  365. }

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

  367.   padding-right: 0;

  368. }

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

  370.   display: inline-block;

  371.   padding: 3px 7px;

  372.   border: 1px solid #cbcbcb;

  373.   border-radius: 7px;

  374.   font-size: small;

  375.   line-height: 1.3333;

  376. }

  377. 

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

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

  380. .views-displays .tabs .error {

  381.   padding: 1px 6px;

  382.   border: 2px solid #ed541d;

  383. }

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

  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: 3px 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.   text-decoration: none;

  525. }

  526. 

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

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

  529. }

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

  531.   margin-right: 0.5em;

  532.   margin-left: 0;

  533. }

  534. 

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

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

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

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

  539.  * header specifically with the overridden font style.

  540.  */

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

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

  543.   font-style: italic;

  544. }

  545. 

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

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

  548.   padding-bottom: 2px;

  549.   color: #666;

  550.   font-size: 12px;

  551. }

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

  553.   background-color: #f3f5ee;

  554. }

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

  556.   background-color: transparent;

  557. }

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

  559.   margin-top: 6px;

  560.   margin-bottom: 6px;

  561. }

  562. .views-display-setting .label {

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

  564. }

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

  566.   margin-right: 0;

  567.   margin-left: 3px;

  568. }

  569. .views-edit-view {

  570.   margin-bottom: 15px;

  571. }

  572. 

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

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

  575.   padding: 5px 8px;

  576.   border-top: none;

  577. }

  578. .views-filterable-options {

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

  580. }

  581. .filterable-option .form-item {

  582.   margin-top: 0;

  583.   margin-bottom: 0;

  584. }

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

  586.   cursor: pointer;

  587.   font-weight: bold;

  588. }

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

  590.   margin-top: 0;

  591.   margin-bottom: 0;

  592. }

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

  594.   width: 30%;

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

  596. }

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

  598.   margin: 0 2% 0 0;

  599. }

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

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

  602.   width: 100%;

  603. }

  604. .views-ui-dialog .ui-dialog-content {

  605.   padding: 0;

  606. }

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

  608.   margin-bottom: 10px;

  609. }

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

  611.   padding: 0;

  612. }

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

  614.   display: block;

  615. }

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

  617.   margin: 0;

  618.   padding: 6px 16px;

  619. }

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

  621.   padding: 8px 13px;

  622.   background-color: #f3f4ee;

  623. }

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

  625.   border: none;

  626. }

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

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

  629. }

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

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

  632. }

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

  634.   margin: 0;

  635. }

  636. .views-ui-dialog .views-progress-indicator {

  637.   position: absolute;

  638.   top: 32px;

  639.   right: 10px; /* LTR */

  640.   color: #fff;

  641.   font-size: 11px;

  642. }

  643. [dir="rtl"] .views-ui-dialog .views-progress-indicator {

  644.   right: auto;

  645.   left: 10px;

  646. }

  647. .views-ui-dialog .views-progress-indicator:before {

  648.   content: "\003C\00A0";

  649. }

  650. .views-ui-dialog .views-progress-indicator:after {

  651.   content: "\00A0\003E";

  652. }

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

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

  655. }

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

  657.   padding-right: 2em;

  658.   padding-left: 0;

  659. }

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

  661.   border-collapse: collapse;

  662. }

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

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

  665.   border-style: solid;

  666.   border-color: #cdcdcd;

  667. }

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

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

  670. }

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

  672.   border-right: 0;

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

  674. }

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

  676.   background-color: #f3f4ed;

  677. }

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

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

  680. }

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

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

  683. }

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

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

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

  687.   margin-top: 6px;

  688.   margin-bottom: 6px;

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

  690. }

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

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

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

  694.   margin-right: 18px;

  695.   margin-left: 0;

  696. }

  697. .views-preview-wrapper {

  698.   border: 1px solid #ccc;

  699. }

  700. .view-preview-form {

  701.   position: relative;

  702. }

  703. .view-preview-form__title {

  704.   margin-top: 0;

  705.   padding: 8px 12px;

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

  707.   background-color: #e1e2dc;

  708. }

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

  710.   position: absolute;

  711.   top: 3px;

  712.   right: 12px;

  713.   margin-top: 2px;

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

  715. }

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

  717.   right: auto;

  718.   left: 12px;

  719.   margin-right: 2px;

  720.   margin-left: 0;

  721. }

  722. .views-live-preview {

  723.   padding: 12px;

  724. }

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

  726.   overflow: auto;

  727. }

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

  729.   display: inline-block;

  730.   margin-top: 0;

  731.   margin-bottom: 0;

  732.   color: #818181;

  733.   font-size: 13px;

  734.   font-weight: normal;

  735.   line-height: 1.6154;

  736. }

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

  738.   margin-top: 18px;

  739. }

  740. .views-live-preview .preview-section {

  741.   margin: 0 -5px;

  742.   padding: 3px 5px;

  743.   border: 1px dashed #dedede;

  744. }

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

  746.   margin-top: 18px;

  747. }

  748. 

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

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

  751.   margin-top: 36px;

  752. }

  753. .views-query-info table {

  754.   margin: 10px 0;

  755.   border-spacing: 0;

  756.   border-collapse: separate;

  757.   border-color: #ddd;

  758. }

  759. .views-query-info table tr {

  760.   background-color: #f9f9f9;

  761. }

  762. .views-query-info table th,

  763. .views-query-info table td {

  764.   padding: 4px 10px;

  765.   color: #666;

  766. }

  767. .messages {

  768.   margin-bottom: 18px;

  769.   line-height: 1.4555;

  770. }

  771. 

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

  773.   position: absolute;

  774.   z-index: 2;

  775.   top: -1px;

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

  777. }

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

  779.   right: auto;

  780.   left: -5px;

  781. }

  782. 

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

  784.   position: absolute;

  785.   top: 5px;

  786.   right: 4px; /* LTR */

  787. }

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

  789.   right: auto;

  790.   left: 4px;

  791. }

  792. 

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

  794.   position: absolute;

  795.   top: 3px;

  796.   right: 3px; /* LTR */

  797. }

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

  799.   right: auto;

  800.   left: 3px;

  801. }

  802. 

  803. .views-list-section {

  804.   margin-bottom: 2em;

  805. }

  806. .form-textarea-wrapper,

  807. .form-item-options-content {

  808.   width: 100%;

  809. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.