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/modules/views_ui/css/views_ui.admin.theme.css

View UI admin theme.

Replaces the styles provided by the views_ui module.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * View UI admin theme.

  11.  *

  12.  * Replaces the styles provided by the views_ui module.

  13.  */

  14. 

  15. .views-admin .links {

  16.   margin: 0;

  17.   list-style: none outside none;

  18. }

  19. 

  20. .views-admin a:hover {

  21.   -webkit-text-decoration: none;

  22.   text-decoration: none;

  23. }

  24. 

  25. .views-admin .icon {

  26.   width: 1rem;

  27.   height: 1rem;

  28. }

  29. 

  30. .views-admin .icon,

  31. .views-admin .icon-text {

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

  33.   background-repeat: no-repeat;

  34.   background-attachment: scroll;

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

  36. }

  37. 

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

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

  40.   background-position: right top;

  41. }

  42. 

  43. .views-admin a.icon {

  44.   border: 1px solid #ddd;

  45.   border-radius: 0.25rem;

  46.   background:

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

  48.     repeat-y;

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

  50. }

  51. 

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

  53.   border-color: #d0d0d0;

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

  55. }

  56. 

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

  58.   border-color: #c0c0c0;

  59. }

  60. 

  61. .views-admin span.icon {

  62.   position: relative;

  63.   float: left; /* LTR */

  64. }

  65. 

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

  67.   float: right;

  68. }

  69. 

  70. .views-admin .icon.compact {

  71.   display: block;

  72.   overflow: hidden;

  73.   text-indent: -624.9375rem;

  74.   direction: ltr;

  75. }

  76. 

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

  78. 

  79. .views-admin .icon-text {

  80.   padding-left: 1.1875rem; /* LTR */

  81. }

  82. 

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

  84.   padding-right: 1.1875rem;

  85.   padding-left: 0;

  86. }

  87. 

  88. .views-admin .icon.linked {

  89.   background-position: center -153px;

  90. }

  91. 

  92. .views-admin .icon.unlinked {

  93.   background-position: center -195px;

  94. }

  95. 

  96. .views-admin .icon.delete {

  97.   background-position: center -52px;

  98. }

  99. 

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

  101.   background-position:

  102.     center -52px,

  103.     left top; /* LTR */

  104. }

  105. 

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

  107.   background-position:

  108.     center -52px,

  109.     right top;

  110. }

  111. 

  112. .views-admin .icon.rearrange {

  113.   background-position: center -111px;

  114. }

  115. 

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

  117.   background-position:

  118.     center -111px,

  119.     left top; /* LTR */

  120. }

  121. 

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

  123.   background-position:

  124.     center -111px,

  125.     right top;

  126. }

  127. 

  128. details.box-padding {

  129.   border: none;

  130. }

  131. 

  132. .views-admin details details {

  133.   margin-bottom: 0;

  134. }

  135. 

  136. .form-item {

  137.   margin-top: 0.5625rem;

  138.   padding-top: 0;

  139.   padding-bottom: 0;

  140. }

  141. 

  142. .form-type-checkbox {

  143.   margin-top: 0.375rem;

  144. }

  145. 

  146. .form-checkbox,

  147. .form-radio {

  148.   vertical-align: baseline;

  149. }

  150. 

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

  152. 

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

  154.   margin-left: 1rem; /* LTR */

  155. }

  156. 

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

  158.   margin-right: 1rem;

  159.   margin-left: 0;

  160. }

  161. 

  162. /* Hide 'remove' checkboxes. */

  163. 

  164. .views-remove-checkbox {

  165.   display: none;

  166. }

  167. 

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

  169. 

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

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

  172.   line-height: 2;

  173. }

  174. 

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

  176.   margin-top: 0.375rem;

  177.   margin-bottom: 0.375rem;

  178. }

  179. 

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

  181.   margin: 0.25em 0;

  182.   font-weight: bold;

  183. }

  184. 

  185. .view-changed {

  186.   margin-bottom: 1.3125rem;

  187. }

  188. 

  189. .views-admin .unit-title {

  190.   margin-top: 1.125rem;

  191.   margin-bottom: 0;

  192.   font-size: 0.9375rem;

  193.   line-height: 1.6154;

  194. }

  195. 

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

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

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

  199.   list-style: none;

  200. }

  201. 

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

  203.   margin-right: 0;

  204.   margin-left: inherit;

  205.   padding-right: 0;

  206.   padding-left: inherit;

  207. }

  208. 

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

  210. 

  211. .views-ui-name {

  212.   width: 20%;

  213. }

  214. 

  215. .views-ui-description {

  216.   width: 30%;

  217. }

  218. 

  219. .views-ui-machine-name {

  220.   width: 15%;

  221. }

  222. 

  223. .views-ui-displays {

  224.   width: 25%;

  225. }

  226. 

  227. .views-ui-operations {

  228.   width: 10%;

  229. }

  230. 

  231. /**

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

  233.  */

  234. 

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

  236.   margin-top: 0;

  237. }

  238. 

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

  240.   font-weight: bold;

  241. }

  242. 

  243. .form-item-page-create,

  244. .form-item-block-create {

  245.   margin-top: 0.8125rem;

  246. }

  247. 

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

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

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

  251.   font-weight: bold;

  252. }

  253. 

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

  255. 

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

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

  258.   display: block;

  259. }

  260. 

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

  262.   font-weight: normal;

  263. }

  264. 

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

  266. 

  267. .group-populated {

  268.   display: none;

  269. }

  270. 

  271. td.group-title {

  272.   font-weight: bold;

  273. }

  274. 

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

  276.   height: 1px;

  277.   margin: 0;

  278.   padding: 0;

  279. }

  280. 

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

  282.   display: block;

  283.   overflow: hidden;

  284.   height: 1px;

  285. }

  286. 

  287. .group-message .form-submit,

  288. .views-remove-group-link,

  289. .views-add-group {

  290.   float: right; /* LTR */

  291.   clear: both;

  292. }

  293. 

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

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

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

  297.   float: left;

  298. }

  299. 

  300. .views-operator-label {

  301.   position: absolute;

  302.   z-index: 1;

  303.   bottom: -0.8125rem;

  304.   padding: 0.5px 0.375rem;

  305.   text-transform: uppercase;

  306.   border: 1px solid var(--color-gray-200);

  307.   background: #fff;

  308.   font-weight: bold;

  309.   font-style: italic;

  310. }

  311. 

  312. .grouped-description,

  313. .exposed-description {

  314.   float: left; /* LTR */

  315.   padding-top: 0.1875rem;

  316.   padding-right: 0.625rem; /* LTR */

  317. }

  318. 

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

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

  321.   float: right;

  322.   padding-right: 0;

  323.   padding-left: 0.625rem;

  324. }

  325. 

  326. .views-displays {

  327.   padding-bottom: 2.25rem;

  328.   border-top: 1px solid var(--color-gray-200-o-80);

  329.   border-right: 1px solid var(--color-gray-200-o-80);

  330.   border-left: 1px solid var(--color-gray-200-o-80);

  331. }

  332. 

  333. .views-display-top {

  334.   position: relative;

  335.   display: flex;

  336.   flex-wrap: wrap;

  337.   justify-content: space-between;

  338.   padding: var(--space-s) var(--space-s) calc(var(--space-s) - 0.3125rem);

  339.   border-bottom: 1px solid var(--color-gray-200-o-80);

  340.   background-color: var(--color-gray-050);

  341. }

  342. 

  343. .form-edit .form-actions,

  344. .form-edit .field-actions {

  345.   margin-top: 0;

  346.   padding: var(--space-s) var(--space-m);

  347.   border-right: 1px solid var(--color-gray-200-o-80);

  348.   border-bottom: 1px solid var(--color-gray-200-o-80);

  349.   border-left: 1px solid var(--color-gray-200-o-80);

  350.   background-color: var(--color-gray-050);

  351. }

  352. 

  353. .edit-display-settings {

  354.   margin: var(--space-l) var(--space-l) 0 var(--space-l);

  355. }

  356. 

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

  358.   position: relative;

  359.   display: flex;

  360.   flex-wrap: wrap;

  361.   justify-content: space-between;

  362.   margin: 0 0 var(--space-l);

  363.   padding: 0;

  364.   border-bottom: none;

  365.   line-height: 1.25rem;

  366. }

  367. 

  368. .edit-display-settings-top.views-ui-display-tab-bucket .views-display-setting {

  369.   padding: 0.125rem 0 0;

  370. }

  371. 

  372. .views-display-column {

  373.   border: 1px solid var(--color-gray-200-o-80);

  374.   border-radius: var(--base-border-radius);

  375.   box-shadow: var(--details-box-shadow);

  376. }

  377. 

  378. .views-display-column + .views-display-column {

  379.   margin-top: 0;

  380. }

  381. 

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

  383. .view-preview-form .form-actions,

  384. .view-preview-form .field-actions {

  385.   margin-top: 0.3125rem;

  386. }

  387. 

  388. .view-preview-form .views-bulk-actions__item {

  389.   margin-block-start: 0;

  390. }

  391. 

  392. .view-preview-form .arguments-preview {

  393.   font-size: 1em;

  394. }

  395. 

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

  397.   margin-top: var(--space-m);

  398. }

  399. 

  400. .view-preview-form .arguments-preview,

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

  402.   margin-right: var(--space-m);

  403.   margin-left: var(--space-m);

  404. }

  405. 

  406. .preview-submit-wrapper {

  407.   display: inline-block;

  408. }

  409. 

  410. .form-item--live-preview,

  411. .view-preview-form .form-actions,

  412. .view-preview-form .field-actions {

  413.   vertical-align: top;

  414. }

  415. 

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

  417.   /* 720px */

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

  419.     white-space: nowrap;

  420.   }

  421. }

  422. 

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

  424. 

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

  426.   position: relative;

  427.   margin: 0 0 var(--space-xs);

  428.   padding-top: var(--space-xs);

  429.   padding-bottom: var(--space-xs);

  430.   border-bottom: 1px solid var(--color-gray-200-o-80);

  431.   line-height: 1.25rem;

  432. }

  433. 

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

  435.   margin-bottom: 0;

  436.   border-bottom: none;

  437. }

  438. 

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

  440.   border-top: medium none;

  441. }

  442. 

  443. .views-ui-display-tab-bucket__header {

  444.   display: inline-flex;

  445.   justify-content: space-between;

  446.   box-sizing: border-box;

  447.   width: 100%;

  448.   padding: var(--space-s) var(--space-m) calc(var(--space-s) + 2px);

  449. }

  450. 

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

  452.   margin: 0;

  453.   font-size: var(--font-size-base);

  454. }

  455. 

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

  457.   padding-top: 0;

  458. }

  459. 

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

  461.   border-bottom: medium none;

  462. }

  463. 

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

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

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

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

  468.  * header specifically with the overridden font style.

  469.  */

  470. 

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

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

  473.   font-style: italic;

  474. }

  475. 

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

  477. 

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

  479.   display: flex;

  480.   flex-wrap: wrap;

  481.   padding: var(--space-xs) var(--space-m);

  482.   color: #666;

  483.   font-size: var(--font-size-s);

  484. }

  485. 

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

  487.   background-color: transparent;

  488. }

  489. 

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

  491.   margin-top: 0.375rem;

  492.   margin-bottom: 0.375rem;

  493. }

  494. 

  495. .views-ui-display-tab-bucket__actions {

  496.   margin-left: var(--space-xs); /* LTR */

  497. }

  498. 

  499. [dir="rtl"] .views-ui-display-tab-bucket__actions {

  500.   margin-right: var(--space-xs);

  501.   margin-left: 0;

  502. }

  503. 

  504. .views-display-setting .label {

  505.   margin-right: var(--space-xs); /* LTR */

  506.   white-space: nowrap;

  507. }

  508. 

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

  510.   margin-right: 0;

  511.   margin-left: var(--space-xs);

  512. }

  513. 

  514. .label--separator.label--separator {

  515.   margin-right: var(--space-xs);

  516.   margin-left: var(--space-xs);

  517. }

  518. 

  519. .views-edit-view {

  520.   margin-bottom: 0.9375rem;

  521. }

  522. 

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

  524.   background-color: var(--color-red-020);

  525. }

  526. 

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

  528.   background: var(--color-white);

  529. }

  530. 

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

  532. 

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

  534.   padding: 0.3125rem 0.5rem;

  535.   border-top: none;

  536. }

  537. 

  538. .filterable-option .form-item {

  539.   margin-top: 0;

  540.   margin-bottom: 0;

  541. }

  542. 

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

  544.   margin-top: 0;

  545.   margin-bottom: 0;

  546. }

  547. 

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

  549.   width: 30%;

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

  551. }

  552. 

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

  554.   margin: 0 2% 0 0;

  555. }

  556. 

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

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

  559.   width: 100%;

  560. }

  561. 

  562. .views-ui-dialog.views-ui-dialog > .ui-dialog-content {

  563.   padding: 0;

  564. }

  565. 

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

  567.   margin-bottom: 0.625rem;

  568. }

  569. 

  570. [id^="views-ui-add-handler-form"] .scroll {

  571.   padding-top: 0;

  572.   padding-bottom: 0;

  573. }

  574. 

  575. .views-ui-dialog .views-add-form-selected {

  576.   padding: 0 1rem;

  577. }

  578. 

  579. .views-ui-dialog .views-add-form-selected > div {

  580.   display: block;

  581.   margin: 0;

  582.   padding: 0.3rem 0.8rem;

  583.   border: 1px solid #dedfe4;

  584.   border-radius: 2px 2px 0 0;

  585.   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  586. }

  587. 

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

  589.   margin: 0;

  590.   padding: 0.375rem 1rem;

  591. }

  592. 

  593. .views-ui-dialog .views-add-form-selected .views-selected-options {

  594.   display: inline;

  595. }

  596. 

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

  598.   border: none;

  599. }

  600. 

  601. .views-ui-dialog .views-offset-top:not(:empty) {

  602.   position: relative;

  603.   padding: var(--space-s) var(--space-m) var(--space-xs);

  604.   background-color: var(--color-gray-050);

  605. }

  606. 

  607. .views-ui-dialog .views-offset-top:not(:empty)::after {

  608.   position: absolute;

  609.   bottom: 0;

  610.   left: 0;

  611.   width: 100%;

  612.   height: 0.1875rem;

  613.   content: "";

  614.   background: linear-gradient(to bottom, rgba(80, 81, 86, 0.11) 0%, rgba(18, 19, 20, 0.02) 49%, rgba(18, 19, 20, 0) 100%);

  615. }

  616. 

  617. .views-ui-dialog .views-offset-top > * {

  618.   margin: 0;

  619. }

  620. 

  621. .views-ui-dialog .views-offset-top .form-item {

  622.   max-width: 40%;

  623.   margin: 0 var(--space-s) var(--space-s) 0;

  624. }

  625. 

  626. .views-ui-dialog .tabledrag-toggle-weight-wrapper {

  627.   margin: 0 0 var(--space-m) 0;

  628. }

  629. 

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

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

  632. }

  633. 

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

  635.   padding-right: 2em;

  636.   padding-left: 0;

  637. }

  638. 

  639. .views-display-columns .details-wrapper {

  640.   margin: 0;

  641. }

  642. 

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

  644.   border-collapse: collapse;

  645. }

  646. 

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

  648.   border: 1px solid var(--color-gray-200);

  649. }

  650. 

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

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

  653. }

  654. 

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

  656.   border-right: 0;

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

  658. }

  659. 

  660. .views-ui-rearrange-filter-form .draggable td {

  661.   border-bottom: 0.0625rem solid var(--color-gray-200);

  662. }

  663. 

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

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

  666. }

  667. 

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

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

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

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

  672.   margin-top: 0.375rem;

  673.   margin-bottom: 0.375rem;

  674.   margin-left: 1.125rem; /* LTR */

  675. }

  676. 

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

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

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

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

  681.   margin-right: 1.125rem;

  682.   margin-left: 0;

  683. }

  684. 

  685. .views-preview-wrapper {

  686.   border: 1px solid #ccc;

  687. }

  688. 

  689. .view-preview-form {

  690.   position: relative;

  691. }

  692. 

  693. .view-preview-form__title {

  694.   margin-top: 0;

  695.   padding: 0.5rem 0.75rem;

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

  697.   background-color: var(--color-gray-050);

  698. }

  699. 

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

  701.   position: absolute;

  702.   top: 0.6875rem;

  703.   right: var(--space-s);

  704.   margin-top: 2px;

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

  706. }

  707. 

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

  709.   right: auto;

  710.   left: var(--space-s);

  711.   margin-right: 2px;

  712.   margin-left: 0;

  713. }

  714. 

  715. .views-live-preview {

  716.   padding: var(--space-m);

  717. }

  718. 

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

  720.   overflow: auto;

  721. }

  722. 

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

  724.   display: inline-block;

  725.   margin-top: 0;

  726.   margin-bottom: 0;

  727.   color: var(--color-gray-800);

  728.   font-size: 0.8125rem;

  729.   font-weight: normal;

  730.   line-height: 1.6154;

  731. }

  732. 

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

  734.   margin-top: var(--space-m);

  735. }

  736. 

  737. .views-live-preview .preview-section {

  738.   margin: 0 -0.3125rem;

  739.   padding: 0.1875rem 0.3125rem;

  740.   border: 1px dashed #dedede;

  741. }

  742. 

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

  744.   margin-top: 1.125rem;

  745. }

  746. 

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

  748. 

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

  750.   margin-top: 2.25rem;

  751. }

  752. 

  753. .views-query-info table {

  754.   margin: 0.625rem 0;

  755.   border-spacing: 0;

  756.   border-collapse: separate;

  757.   border-color: var(--color-bg);

  758. }

  759. 

  760. .views-query-info table tr {

  761.   background-color: var(--color-gray-050);

  762. }

  763. 

  764. .views-query-info table th,

  765. .views-query-info table td {

  766.   padding: var(--space-xs) var(--space-l);

  767.   font-size: var(--font-size-s);

  768. }

  769. 

  770. .messages {

  771.   margin-bottom: 1.125rem;

  772.   line-height: 1.4555;

  773. }

  774. 

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

  776.   position: absolute;

  777.   z-index: 2;

  778.   top: -1px;

  779.   right: -0.3125rem; /* LTR */

  780. }

  781. 

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

  783.   right: auto;

  784.   left: -0.3125rem;

  785. }

  786. 

  787. /**

  788.  * Position dropbuttons with flexbox instead after the dropbuttons have been

  789.  * converted to splitbuttons.

  790.  *

  791.  * @see https://www.drupal.org/project/drupal/issues/3134107

  792.  * @see https://www.drupal.org/project/drupal/issues/1899236

  793.  */

  794. 

  795. .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {

  796.   top: 0.8125rem;

  797.   right: var(--space-s); /* LTR */

  798. }

  799. 

  800. [dir="rtl"] .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {

  801.   right: auto;

  802.   left: var(--space-s);

  803. }

  804. 

  805. .views-list-section {

  806.   margin-bottom: 2em;

  807. }

  808. 

  809. .form-textarea-wrapper,

  810. .form-item-options-content {

  811.   width: 100%;

  812. }

  813. 

  814. .views-messages .messages-list,

  815. .views-messages .messages-list__item {

  816.   margin-top: 0;

  817.   margin-bottom: 0;

  818. }

  819. 

  820. /**

  821.  * Styles on devices with touchevents.

  822.  */

  823. 

  824. html:not(.no-touchevents) .views-ui-display-tab-bucket__header--actions {

  825.   padding: var(--space-l) var(--space-xs);

  826. }

  827. 

  828. html:not(.no-touchevents) .edit-display-settings-top.views-ui-display-tab-bucket {

  829.   padding: var(--space-m) var(--space-xs);

  830. }