views_ui.admin.theme.pcss.css

View UI admin theme.

Replaces the styles provided by the views_ui module.

File

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

View source 
  1. /**

  2.  * @file

  3.  * View UI admin theme.

  4.  *

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

  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. .views-admin .icon {

  16.   width: 16px;

  17.   height: 16px;

  18. }

  19. .views-admin .icon,

  20. .views-admin .icon-text {

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

  22.   background-repeat: no-repeat;

  23.   background-attachment: scroll;

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

  25. }

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

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

  28.   background-position: right top;

  29. }

  30. .views-admin a.icon {

  31.   border: 1px solid #ddd;

  32.   border-radius: 4px;

  33.   background:

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

  35.     repeat-y;

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

  37. }

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

  39.   border-color: #d0d0d0;

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

  41. }

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

  43.   border-color: #c0c0c0;

  44. }

  45. .views-admin span.icon {

  46.   position: relative;

  47.   float: left; /* LTR */

  48. }

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

  50.   float: right;

  51. }

  52. .views-admin .icon.compact {

  53.   display: block;

  54.   overflow: hidden;

  55.   text-indent: -9999px;

  56.   direction: ltr;

  57. }

  58. 

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

  60. .views-admin .icon-text {

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

  62. }

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

  64.   padding-right: 19px;

  65.   padding-left: 0;

  66. }

  67. .views-admin .icon.linked {

  68.   background-position: center -153px;

  69. }

  70. .views-admin .icon.unlinked {

  71.   background-position: center -195px;

  72. }

  73. .views-admin .icon.delete {

  74.   background-position: center -52px;

  75. }

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

  77.   background-position:

  78.     center -52px,

  79.     left top; /* LTR */

  80. }

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

  82.   background-position:

  83.     center -52px,

  84.     right top;

  85. }

  86. .views-admin .icon.rearrange {

  87.   background-position: center -111px;

  88. }

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

  90.   background-position:

  91.     center -111px,

  92.     left top; /* LTR */

  93. }

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

  95.   background-position:

  96.     center -111px,

  97.     right top;

  98. }

  99. details.box-padding {

  100.   border: none;

  101. }

  102. .views-admin details details {

  103.   margin-bottom: 0;

  104. }

  105. .form-item {

  106.   margin-top: 9px;

  107.   padding-top: 0;

  108.   padding-bottom: 0;

  109. }

  110. .form-type-checkbox {

  111.   margin-top: 6px;

  112. }

  113. .form-checkbox,

  114. .form-radio {

  115.   vertical-align: baseline;

  116. }

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

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

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

  120. }

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

  122.   margin-right: 16px;

  123.   margin-left: 0;

  124. }

  125. 

  126. /* Hide 'remove' checkboxes. */

  127. .views-remove-checkbox {

  128.   display: none;

  129. }

  130. 

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

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

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

  134.   line-height: 2;

  135. }

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

  137.   margin-top: 6px;

  138.   margin-bottom: 6px;

  139. }

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

  141.   margin: 0.25em 0;

  142.   font-weight: bold;

  143. }

  144. .view-changed {

  145.   margin-bottom: 21px;

  146. }

  147. .views-admin .unit-title {

  148.   margin-top: 18px;

  149.   margin-bottom: 0;

  150.   font-size: 15px;

  151.   line-height: 1.6154;

  152. }

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

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

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

  156.   list-style: none;

  157. }

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

  159.   margin-right: 0;

  160.   margin-left: inherit;

  161.   padding-right: 0;

  162.   padding-left: inherit;

  163. }

  164. 

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

  166. .views-ui-name {

  167.   width: 20%;

  168. }

  169. .views-ui-description {

  170.   width: 30%;

  171. }

  172. .views-ui-machine-name {

  173.   width: 15%;

  174. }

  175. .views-ui-displays {

  176.   width: 25%;

  177. }

  178. .views-ui-operations {

  179.   width: 10%;

  180. }

  181. 

  182. /**

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

  184.  */

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

  186.   margin-top: 0;

  187. }

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

  189.   font-weight: bold;

  190. }

  191. .form-item-page-create,

  192. .form-item-block-create {

  193.   margin-top: 13px;

  194. }

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

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

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

  198.   font-weight: bold;

  199. }

  200. 

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

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

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

  204.   display: block;

  205. }

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

  207.   font-weight: normal;

  208. }

  209. 

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

  211. .group-populated {

  212.   display: none;

  213. }

  214. td.group-title {

  215.   font-weight: bold;

  216. }

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

  218.   height: 1px;

  219.   margin: 0;

  220.   padding: 0;

  221. }

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

  223.   display: block;

  224.   overflow: hidden;

  225.   height: 1px;

  226. }

  227. .group-message .form-submit,

  228. .views-remove-group-link,

  229. .views-add-group {

  230.   float: right; /* LTR */

  231.   clear: both;

  232. }

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

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

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

  236.   float: left;

  237. }

  238. .views-operator-label {

  239.   position: absolute;

  240.   z-index: 1;

  241.   bottom: -13px;

  242.   padding: 0.5px 6px;

  243.   text-transform: uppercase;

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

  245.   background: #fff;

  246.   font-weight: bold;

  247.   font-style: italic;

  248. }

  249. .grouped-description,

  250. .exposed-description {

  251.   float: left; /* LTR */

  252.   padding-top: 3px;

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

  254. }

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

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

  257.   float: right;

  258.   padding-right: 0;

  259.   padding-left: 10px;

  260. }

  261. .views-displays {

  262.   padding-bottom: 36px;

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

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

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

  266. }

  267. .views-display-top {

  268.   position: relative;

  269.   display: flex;

  270.   flex-wrap: wrap;

  271.   justify-content: space-between;

  272.   padding: var(--space-s) var(--space-s) calc(var(--space-s) - 5px);

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

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

  275. }

  276. .form-edit .form-actions,

  277. .form-edit .field-actions {

  278.   margin-top: 0;

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

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

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

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

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

  284. }

  285. .edit-display-settings {

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

  287. }

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

  289.   position: relative;

  290.   display: flex;

  291.   flex-wrap: wrap;

  292.   justify-content: space-between;

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

  294.   padding: 0;

  295.   border-bottom: none;

  296.   line-height: 20px;

  297. }

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

  299.   padding: 0.125rem 0 0;

  300. }

  301. .views-display-column {

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

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

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

  305. }

  306. .views-display-column + .views-display-column {

  307.   margin-top: 0;

  308. }

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

  310. .view-preview-form .form-actions,

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

  312.   margin-top: 5px;

  313. }

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

  315.   margin-block-start: 0;

  316. }

  317. .view-preview-form .arguments-preview {

  318.   font-size: 1em;

  319. }

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

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

  322. }

  323. .view-preview-form .arguments-preview,

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

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

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

  327. }

  328. .preview-submit-wrapper {

  329.   display: inline-block;

  330. }

  331. .form-item--live-preview,

  332. .view-preview-form .form-actions,

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

  334.   vertical-align: top;

  335. }

  336. 

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

  338.   /* 720px */

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

  340.     white-space: nowrap;

  341.   }

  342. }

  343. 

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

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

  346.   position: relative;

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

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

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

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

  351.   line-height: 20px;

  352. }

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

  354.   margin-bottom: 0;

  355.   border-bottom: none;

  356. }

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

  358.   border-top: medium none;

  359. }

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

  361.   display: inline-flex;

  362.   justify-content: space-between;

  363.   box-sizing: border-box;

  364.   width: 100%;

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

  366. }

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

  368.   margin: 0;

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

  370. }

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

  372.   padding-top: 0;

  373. }

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

  375.   border-bottom: medium none;

  376. }

  377. 

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

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

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

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

  382.  * header specifically with the overridden font style.

  383.  */

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

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

  386.   font-style: italic;

  387. }

  388. 

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

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

  391.   display: flex;

  392.   flex-wrap: wrap;

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

  394.   color: #666;

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

  396. }

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

  398.   background-color: transparent;

  399. }

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

  401.   margin-top: 6px;

  402.   margin-bottom: 6px;

  403. }

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

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

  406. }

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

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

  409.   margin-left: 0;

  410. }

  411. .views-display-setting .label {

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

  413.   white-space: nowrap;

  414. }

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

  416.   margin-right: 0;

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

  418. }

  419. .label--separator.label--separator {

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

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

  422. }

  423. .views-edit-view {

  424.   margin-bottom: 15px;

  425. }

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

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

  428. }

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

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

  431. }

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

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

  434.   padding: 5px 8px;

  435.   border-top: none;

  436. }

  437. .filterable-option .form-item {

  438.   margin-top: 0;

  439.   margin-bottom: 0;

  440. }

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

  442.   margin-top: 0;

  443.   margin-bottom: 0;

  444. }

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

  446.   width: 30%;

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

  448. }

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

  450.   margin: 0 2% 0 0;

  451. }

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

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

  454.   width: 100%;

  455. }

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

  457.   padding: 0;

  458. }

  459. 

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

  461.   margin-bottom: 10px;

  462. }

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

  464.   padding-top: 0;

  465.   padding-bottom: 0;

  466. }

  467. 

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

  469.   padding: 0 1rem;

  470. }

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

  472.   display: block;

  473.   margin: 0;

  474.   padding: 0.3rem 0.8rem;

  475.   border: 1px solid #dedfe4;

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

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

  478. }

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

  480.   margin: 0;

  481.   padding: 6px 16px;

  482. }

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

  484.   display: inline;

  485. }

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

  487.   border: none;

  488. }

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

  490.   position: relative;

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

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

  493. }

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

  495.   position: absolute;

  496.   bottom: 0;

  497.   left: 0;

  498.   width: 100%;

  499.   height: 3px;

  500.   content: "";

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

  502. }

  503. 

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

  505.   margin: 0;

  506. }

  507. 

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

  509.   max-width: 40%;

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

  511. }

  512. 

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

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

  515. }

  516. 

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

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

  519. }

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

  521.   padding-right: 2em;

  522.   padding-left: 0;

  523. }

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

  525.   margin: 0;

  526. }

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

  528.   border-collapse: collapse;

  529. }

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

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

  532. }

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

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

  535. }

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

  537.   border-right: 0;

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

  539. }

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

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

  542. }

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

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

  545. }

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

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

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

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

  550.   margin-top: 6px;

  551.   margin-bottom: 6px;

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

  553. }

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

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

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

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

  558.   margin-right: 18px;

  559.   margin-left: 0;

  560. }

  561. .views-preview-wrapper {

  562.   border: 1px solid #ccc;

  563. }

  564. .view-preview-form {

  565.   position: relative;

  566. }

  567. .view-preview-form__title {

  568.   margin-top: 0;

  569.   padding: 8px 12px;

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

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

  572. }

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

  574.   position: absolute;

  575.   top: 0.6875rem;

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

  577.   margin-top: 2px;

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

  579. }

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

  581.   right: auto;

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

  583.   margin-right: 2px;

  584.   margin-left: 0;

  585. }

  586. .views-live-preview {

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

  588. }

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

  590.   overflow: auto;

  591. }

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

  593.   display: inline-block;

  594.   margin-top: 0;

  595.   margin-bottom: 0;

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

  597.   font-size: 13px;

  598.   font-weight: normal;

  599.   line-height: 1.6154;

  600. }

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

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

  603. }

  604. .views-live-preview .preview-section {

  605.   margin: 0 -5px;

  606.   padding: 3px 5px;

  607.   border: 1px dashed #dedede;

  608. }

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

  610.   margin-top: 18px;

  611. }

  612. 

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

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

  615.   margin-top: 36px;

  616. }

  617. .views-query-info table {

  618.   margin: 10px 0;

  619.   border-spacing: 0;

  620.   border-collapse: separate;

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

  622. }

  623. .views-query-info table tr {

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

  625. }

  626. .views-query-info table th,

  627. .views-query-info table td {

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

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

  630. }

  631. .messages {

  632.   margin-bottom: 18px;

  633.   line-height: 1.4555;

  634. }

  635. 

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

  637.   position: absolute;

  638.   z-index: 2;

  639.   top: -1px;

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

  641. }

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

  643.   right: auto;

  644.   left: -5px;

  645. }

  646. 

  647. /**

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

  649.  * converted to splitbuttons.

  650.  *

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

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

  653.  */

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

  655.   top: 0.8125rem;

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

  657. }

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

  659.   right: auto;

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

  661. }

  662. 

  663. .views-list-section {

  664.   margin-bottom: 2em;

  665. }

  666. .form-textarea-wrapper,

  667. .form-item-options-content {

  668.   width: 100%;

  669. }

  670. 

  671. .views-messages .messages-list,

  672. .views-messages .messages-list__item {

  673.   margin-top: 0;

  674.   margin-bottom: 0;

  675. }

  676. 

  677. /**

  678.  * Styles on devices with touchevents.

  679.  */

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

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

  682. }

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

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

  685. }