You are here

Home » API reference » Drupal 9

views_ui.admin.theme.css in Drupal 9

Same filename in this branch
  1. 9 core/modules/views_ui/css/views_ui.admin.theme.css
  2. 9 core/themes/claro/css/theme/views_ui.admin.theme.css
  3. 9 core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  4. 9 core/themes/stable/css/views_ui/views_ui.admin.theme.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/theme/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.   text-decoration: none;

  22. }

  23. 

  24. .views-admin .icon {

  25.   width: 1rem;

  26.   height: 1rem;

  27. }

  28. 

  29. .views-admin .icon,

  30. .views-admin .icon-text {

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

  32.   background-repeat: no-repeat;

  33.   background-attachment: scroll;

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

  35. }

  36. 

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

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

  39.   background-position: right top;

  40. }

  41. 

  42. .views-admin a.icon {

  43.   border: 1px solid #ddd;

  44.   border-radius: 0.25rem;

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

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

  47. }

  48. 

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

  50.   border-color: #d0d0d0;

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

  52. }

  53. 

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

  55.   border-color: #c0c0c0;

  56. }

  57. 

  58. .views-admin span.icon {

  59.   position: relative;

  60.   float: left; /* LTR */

  61. }

  62. 

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

  64.   float: right;

  65. }

  66. 

  67. .views-admin .icon.compact {

  68.   display: block;

  69.   overflow: hidden;

  70.   text-indent: -624.9375rem;

  71.   direction: ltr;

  72. }

  73. 

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

  75. 

  76. .views-admin .icon-text {

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

  78. }

  79. 

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

  81.   padding-right: 1.1875rem;

  82.   padding-left: 0;

  83. }

  84. 

  85. .views-admin .icon.linked {

  86.   background-position: center -153px;

  87. }

  88. 

  89. .views-admin .icon.unlinked {

  90.   background-position: center -195px;

  91. }

  92. 

  93. .views-admin .icon.delete {

  94.   background-position: center -52px;

  95. }

  96. 

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

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

  99. }

  100. 

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

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

  103. }

  104. 

  105. .views-admin .icon.rearrange {

  106.   background-position: center -111px;

  107. }

  108. 

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

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

  111. }

  112. 

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

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

  115. }

  116. 

  117. details.box-padding {

  118.   border: none;

  119. }

  120. 

  121. .views-admin details details {

  122.   margin-bottom: 0;

  123. }

  124. 

  125. .form-item {

  126.   margin-top: 0.5625rem;

  127.   padding-top: 0;

  128.   padding-bottom: 0;

  129. }

  130. 

  131. .form-type-checkbox {

  132.   margin-top: 0.375rem;

  133. }

  134. 

  135. .form-checkbox,

  136. .form-radio {

  137.   vertical-align: baseline;

  138. }

  139. 

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

  141. 

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

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

  144. }

  145. 

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

  147.   margin-right: 1rem;

  148.   margin-left: 0;

  149. }

  150. 

  151. /* Hide 'remove' checkboxes. */

  152. 

  153. .views-remove-checkbox {

  154.   display: none;

  155. }

  156. 

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

  158. 

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

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

  161.   line-height: 2;

  162. }

  163. 

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

  165.   margin-top: 0.375rem;

  166.   margin-bottom: 0.375rem;

  167. }

  168. 

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

  170.   margin: 0.25em 0;

  171.   font-weight: bold;

  172. }

  173. 

  174. .view-changed {

  175.   margin-bottom: 1.3125rem;

  176. }

  177. 

  178. .views-admin .unit-title {

  179.   margin-top: 1.125rem;

  180.   margin-bottom: 0;

  181.   font-size: 0.9375rem;

  182.   line-height: 1.6154;

  183. }

  184. 

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

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

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

  188.   list-style: none;

  189. }

  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. 

  200. .views-ui-name {

  201.   width: 20%;

  202. }

  203. 

  204. .views-ui-description {

  205.   width: 30%;

  206. }

  207. 

  208. .views-ui-machine-name {

  209.   width: 15%;

  210. }

  211. 

  212. .views-ui-displays {

  213.   width: 25%;

  214. }

  215. 

  216. .views-ui-operations {

  217.   width: 10%;

  218. }

  219. 

  220. /**

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

  222.  */

  223. 

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

  225.   margin-top: 0;

  226. }

  227. 

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

  229.   font-weight: bold;

  230. }

  231. 

  232. .form-item-page-create,

  233. .form-item-block-create {

  234.   margin-top: 0.8125rem;

  235. }

  236. 

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

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

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

  240.   font-weight: bold;

  241. }

  242. 

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

  244. 

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

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

  247.   display: block;

  248. }

  249. 

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

  251.   font-weight: normal;

  252. }

  253. 

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

  255. 

  256. .group-populated {

  257.   display: none;

  258. }

  259. 

  260. td.group-title {

  261.   font-weight: bold;

  262. }

  263. 

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

  265.   height: 1px;

  266.   margin: 0;

  267.   padding: 0;

  268. }

  269. 

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

  271.   display: block;

  272.   overflow: hidden;

  273.   height: 1px;

  274. }

  275. 

  276. .group-message .form-submit,

  277. .views-remove-group-link,

  278. .views-add-group {

  279.   float: right; /* LTR */

  280.   clear: both;

  281. }

  282. 

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

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

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

  286.   float: left;

  287. }

  288. 

  289. .views-operator-label {

  290.   position: absolute;

  291.   z-index: 1;

  292.   bottom: -0.8125rem;

  293.   padding: 0.5px 0.375rem;

  294.   text-transform: uppercase;

  295.   border: 1px solid #d4d4d8;

  296.   background: #fff;

  297.   font-weight: bold;

  298.   font-style: italic;

  299. }

  300. 

  301. .grouped-description,

  302. .exposed-description {

  303.   float: left; /* LTR */

  304.   padding-top: 0.1875rem;

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

  306. }

  307. 

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

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

  310.   float: right;

  311.   padding-right: 0;

  312.   padding-left: 0.625rem;

  313. }

  314. 

  315. .views-displays {

  316.   padding-bottom: 2.25rem;

  317.   border-top: 1px solid rgba(212, 212, 218, 0.8);

  318.   border-right: 1px solid rgba(212, 212, 218, 0.8);

  319.   border-left: 1px solid rgba(212, 212, 218, 0.8);

  320. }

  321. 

  322. .views-display-top {

  323.   position: relative;

  324.   display: flex;

  325.   flex-wrap: wrap;

  326.   justify-content: space-between;

  327.   padding: 0.75rem 0.75rem calc(0.75rem - 0.3125rem);

  328.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  329.   background-color: #f3f4f9;

  330. }

  331. 

  332. .form-edit .form-actions {

  333.   margin-top: 0;

  334.   padding: 0.75rem 1rem;

  335.   border-right: 1px solid rgba(212, 212, 218, 0.8);

  336.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  337.   border-left: 1px solid rgba(212, 212, 218, 0.8);

  338.   background-color: #f3f4f9;

  339. }

  340. 

  341. .edit-display-settings {

  342.   margin: 1.5rem 1.5rem 0 1.5rem;

  343. }

  344. 

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

  346.   position: relative;

  347.   display: flex;

  348.   flex-wrap: wrap;

  349.   justify-content: space-between;

  350.   margin: 0 0 1.5rem;

  351.   padding: 0;

  352.   border-bottom: none;

  353.   line-height: 1.25rem;

  354. }

  355. 

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

  357.   padding: 0.125rem 0 0;

  358. }

  359. 

  360. .views-display-column {

  361.   border: 1px solid rgba(212, 212, 218, 0.8);

  362.   border-radius: 2px;

  363.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  364. }

  365. 

  366. .views-display-column + .views-display-column {

  367.   margin-top: 0;

  368. }

  369. 

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

  371. .view-preview-form .form-actions {

  372.   margin-top: 0.3125rem;

  373. }

  374. 

  375. .view-preview-form .arguments-preview {

  376.   font-size: 1em;

  377. }

  378. 

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

  380.   margin-top: 1rem;

  381. }

  382. 

  383. .view-preview-form .arguments-preview,

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

  385.   margin-right: 1rem;

  386.   margin-left: 1rem;

  387. }

  388. 

  389. .preview-submit-wrapper {

  390.   display: inline-block;

  391. }

  392. 

  393. .form-item--live-preview,

  394. .view-preview-form .form-actions {

  395.   vertical-align: top;

  396. }

  397. 

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

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

  400.     white-space: nowrap;

  401.   }

  402. }

  403. 

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

  405. 

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

  407.   position: relative;

  408.   margin: 0 0 0.5rem;

  409.   padding-top: 0.5rem;

  410.   padding-bottom: 0.5rem;

  411.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  412.   line-height: 1.25rem;

  413. }

  414. 

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

  416.   margin-bottom: 0;

  417.   border-bottom: none;

  418. }

  419. 

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

  421.   border-top: medium none;

  422. }

  423. 

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

  425.   display: inline-flex;

  426.   justify-content: space-between;

  427.   box-sizing: border-box;

  428.   width: 100%;

  429.   padding: 0.75rem 1rem calc(0.75rem + 2px);

  430. }

  431. 

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

  433.   margin: 0;

  434.   font-size: 1rem;

  435. }

  436. 

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

  438.   padding-top: 0;

  439. }

  440. 

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

  442.   border-bottom: medium none;

  443. }

  444. 

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

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

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

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

  449.  * header specifically with the overridden font style.

  450.  */

  451. 

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

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

  454.   font-style: italic;

  455. }

  456. 

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

  458. 

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

  460.   display: flex;

  461.   flex-wrap: wrap;

  462.   padding: 0.5rem 1rem;

  463.   color: #666;

  464.   font-size: 0.889rem;

  465. }

  466. 

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

  468.   background-color: transparent;

  469. }

  470. 

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

  472.   margin-top: 0.375rem;

  473.   margin-bottom: 0.375rem;

  474. }

  475. 

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

  477.   margin-left: 0.5rem; /* LTR */

  478. }

  479. 

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

  481.   margin-right: 0.5rem;

  482.   margin-left: 0;

  483. }

  484. 

  485. .views-display-setting .label {

  486.   margin-right: 0.5rem; /* LTR */

  487.   white-space: nowrap;

  488. }

  489. 

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

  491.   margin-right: 0;

  492.   margin-left: 0.5rem;

  493. }

  494. 

  495. .label--separator.label--separator {

  496.   margin-right: 0.5rem;

  497.   margin-left: 0.5rem;

  498. }

  499. 

  500. .views-edit-view {

  501.   margin-bottom: 0.9375rem;

  502. }

  503. 

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

  505. 

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

  507.   padding: 0.3125rem 0.5rem;

  508.   border-top: none;

  509. }

  510. 

  511. .filterable-option .form-item {

  512.   margin-top: 0;

  513.   margin-bottom: 0;

  514. }

  515. 

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

  517.   margin-top: 0;

  518.   margin-bottom: 0;

  519. }

  520. 

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

  522.   width: 30%;

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

  524. }

  525. 

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

  527.   margin: 0 2% 0 0;

  528. }

  529. 

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

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

  532.   width: 100%;

  533. }

  534. 

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

  536.   padding: 0;

  537. }

  538. 

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

  540.   margin-bottom: 0.625rem;

  541. }

  542. 

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

  544.   padding-top: 0;

  545.   padding-bottom: 0;

  546. }

  547. 

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

  549.   padding: 0 1rem;

  550. }

  551. 

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

  553.   display: block;

  554.   margin: 0;

  555.   padding: 0.3rem 0.8rem;

  556.   border: 1px solid #dedfe4;

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

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

  559. }

  560. 

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

  562.   margin: 0;

  563.   padding: 0.375rem 1rem;

  564. }

  565. 

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

  567.   display: inline;

  568. }

  569. 

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

  571.   border: none;

  572. }

  573. 

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

  575.   position: relative;

  576.   padding: 0.75rem 1rem 0.5rem;

  577.   background-color: #f3f4f9;

  578. }

  579. 

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

  581.   position: absolute;

  582.   bottom: 0;

  583.   left: 0;

  584.   width: 100%;

  585.   height: 0.1875rem;

  586.   content: "";

  587.   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%);

  588. }

  589. 

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

  591.   margin: 0;

  592. }

  593. 

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

  595.   max-width: 40%;

  596.   margin: 0 0.75rem 0.75rem 0;

  597. }

  598. 

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

  600.   position: absolute;

  601.   z-index: 1;

  602.   top: 0;

  603.   right: 4rem; /* LTR */

  604.   color: #fff;

  605.   font-size: 0.702rem;

  606.   line-height: 4rem;

  607. }

  608. 

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

  610.   right: auto;

  611.   left: 4rem;

  612. }

  613. 

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

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

  616. }

  617. 

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

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

  620. }

  621. 

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

  623.   margin: 0 0 1rem 0;

  624. }

  625. 

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

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

  628. }

  629. 

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

  631.   padding-right: 2em;

  632.   padding-left: 0;

  633. }

  634. 

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

  636.   margin: 0;

  637. }

  638. 

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

  640.   border-collapse: collapse;

  641. }

  642. 

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

  644.   border: 1px solid #d4d4d8;

  645. }

  646. 

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

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

  649. }

  650. 

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

  652.   border-right: 0;

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

  654. }

  655. 

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

  657.   border-bottom: 0.0625rem solid #d4d4d8;

  658. }

  659. 

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

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

  662. }

  663. 

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

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

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

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

  668.   margin-top: 0.375rem;

  669.   margin-bottom: 0.375rem;

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

  671. }

  672. 

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

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

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

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

  677.   margin-right: 1.125rem;

  678.   margin-left: 0;

  679. }

  680. 

  681. .views-preview-wrapper {

  682.   border: 1px solid #ccc;

  683. }

  684. 

  685. .view-preview-form {

  686.   position: relative;

  687. }

  688. 

  689. .view-preview-form__title {

  690.   margin-top: 0;

  691.   padding: 0.5rem 0.75rem;

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

  693.   background-color: #f3f4f9;

  694. }

  695. 

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

  697.   position: absolute;

  698.   top: 0.6875rem;

  699.   right: 0.75rem;

  700.   margin-top: 2px;

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

  702. }

  703. 

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

  705.   right: auto;

  706.   left: 0.75rem;

  707.   margin-right: 2px;

  708.   margin-left: 0;

  709. }

  710. 

  711. .views-live-preview {

  712.   padding: 1rem;

  713. }

  714. 

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

  716.   overflow: auto;

  717. }

  718. 

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

  720.   display: inline-block;

  721.   margin-top: 0;

  722.   margin-bottom: 0;

  723.   color: #818181;

  724.   font-size: 0.8125rem;

  725.   font-weight: normal;

  726.   line-height: 1.6154;

  727. }

  728. 

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

  730.   margin-top: 1rem;

  731. }

  732. 

  733. .views-live-preview .preview-section {

  734.   margin: 0 -0.3125rem;

  735.   padding: 0.1875rem 0.3125rem;

  736.   border: 1px dashed #dedede;

  737. }

  738. 

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

  740.   margin-top: 1.125rem;

  741. }

  742. 

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

  744. 

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

  746.   margin-top: 2.25rem;

  747. }

  748. 

  749. .views-query-info table {

  750.   margin: 0.625rem 0;

  751.   border-spacing: 0;

  752.   border-collapse: separate;

  753.   border-color: #fff;

  754. }

  755. 

  756. .views-query-info table tr {

  757.   background-color: #f3f4f9;

  758. }

  759. 

  760. .views-query-info table th,

  761. .views-query-info table td {

  762.   padding: 0.5rem 1.5rem;

  763.   font-size: 0.889rem;

  764. }

  765. 

  766. .messages {

  767.   margin-bottom: 1.125rem;

  768.   line-height: 1.4555;

  769. }

  770. 

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

  772.   position: absolute;

  773.   z-index: 2;

  774.   top: -1px;

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

  776. }

  777. 

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

  779.   right: auto;

  780.   left: -0.3125rem;

  781. }

  782. 

  783. /**

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

  785.  * converted to splitbuttons.

  786.  *

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

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

  789.  */

  790. 

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

  792.   top: 0.8125rem;

  793.   right: 0.75rem; /* LTR */

  794. }

  795. 

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

  797.   right: auto;

  798.   left: 0.75rem;

  799. }

  800. 

  801. .views-list-section {

  802.   margin-bottom: 2em;

  803. }

  804. 

  805. .form-textarea-wrapper,

  806. .form-item-options-content {

  807.   width: 100%;

  808. }

  809. 

  810. .views-messages .messages-list,

  811. .views-messages .messages-list__item {

  812.   margin-top: 0;

  813.   margin-bottom: 0;

  814. }

  815. 

  816. /**

  817.  * Styles on devices with touchevents.

  818.  */

  819. 

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

  821.   padding: 1.5rem 0.5rem;

  822. }

  823. 

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

  825.   padding: 1rem 0.5rem;

  826. }