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. 10 core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
  3. 8.9.x core/themes/claro/css/theme/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 on git.drupalcode.org
View source 
  1. /**

  2.  * @file

  3.  * View UI admin theme.

  4.  *

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

  6.  */

  7. 

  8. @import "../base/variables.pcss.css";

  9. 

  10. .views-admin .links {

  11.   margin: 0;

  12.   list-style: none outside none;

  13. }

  14. .views-admin a:hover {

  15.   text-decoration: none;

  16. }

  17. .views-admin .icon {

  18.   width: 16px;

  19.   height: 16px;

  20. }

  21. .views-admin .icon,

  22. .views-admin .icon-text {

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

  24.   background-repeat: no-repeat;

  25.   background-attachment: scroll;

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

  27. }

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

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

  30.   background-position: right top;

  31. }

  32. .views-admin a.icon {

  33.   border: 1px solid #ddd;

  34.   border-radius: 4px;

  35.   background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, 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: center -52px, left top; /* LTR */

  78. }

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

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

  81. }

  82. .views-admin .icon.rearrange {

  83.   background-position: center -111px;

  84. }

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

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

  87. }

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

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

  90. }

  91. details.box-padding {

  92.   border: none;

  93. }

  94. .views-admin details details {

  95.   margin-bottom: 0;

  96. }

  97. .form-item {

  98.   margin-top: 9px;

  99.   padding-top: 0;

  100.   padding-bottom: 0;

  101. }

  102. .form-type-checkbox {

  103.   margin-top: 6px;

  104. }

  105. .form-checkbox,

  106. .form-radio {

  107.   vertical-align: baseline;

  108. }

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

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

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

  112. }

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

  114.   margin-right: 16px;

  115.   margin-left: 0;

  116. }

  117. 

  118. /* Hide 'remove' checkboxes. */

  119. .views-remove-checkbox {

  120.   display: none;

  121. }

  122. 

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

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

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

  126.   line-height: 2;

  127. }

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

  129.   margin-top: 6px;

  130.   margin-bottom: 6px;

  131. }

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

  133.   margin: 0.25em 0;

  134.   font-weight: bold;

  135. }

  136. .view-changed {

  137.   margin-bottom: 21px;

  138. }

  139. .views-admin .unit-title {

  140.   margin-top: 18px;

  141.   margin-bottom: 0;

  142.   font-size: 15px;

  143.   line-height: 1.6154;

  144. }

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

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

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

  148.   list-style: none;

  149. }

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

  151.   margin-right: 0;

  152.   margin-left: inherit;

  153.   padding-right: 0;

  154.   padding-left: inherit;

  155. }

  156. 

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

  158. .views-ui-name {

  159.   width: 20%;

  160. }

  161. .views-ui-description {

  162.   width: 30%;

  163. }

  164. .views-ui-machine-name {

  165.   width: 15%;

  166. }

  167. .views-ui-displays {

  168.   width: 25%;

  169. }

  170. .views-ui-operations {

  171.   width: 10%;

  172. }

  173. 

  174. /**

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

  176.  */

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

  178.   margin-top: 0;

  179. }

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

  181.   font-weight: bold;

  182. }

  183. .form-item-page-create,

  184. .form-item-block-create {

  185.   margin-top: 13px;

  186. }

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

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

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

  190.   font-weight: bold;

  191. }

  192. 

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

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

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

  196.   display: block;

  197. }

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

  199.   font-weight: normal;

  200. }

  201. 

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

  203. .group-populated {

  204.   display: none;

  205. }

  206. td.group-title {

  207.   font-weight: bold;

  208. }

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

  210.   height: 1px;

  211.   margin: 0;

  212.   padding: 0;

  213. }

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

  215.   display: block;

  216.   overflow: hidden;

  217.   height: 1px;

  218. }

  219. .group-message .form-submit,

  220. .views-remove-group-link,

  221. .views-add-group {

  222.   float: right; /* LTR */

  223.   clear: both;

  224. }

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

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

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

  228.   float: left;

  229. }

  230. .views-operator-label {

  231.   position: absolute;

  232.   z-index: 1;

  233.   bottom: -13px;

  234.   padding: 0.5px 6px;

  235.   text-transform: uppercase;

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

  237.   background: #fff;

  238.   font-weight: bold;

  239.   font-style: italic;

  240. }

  241. .grouped-description,

  242. .exposed-description {

  243.   float: left; /* LTR */

  244.   padding-top: 3px;

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

  246. }

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

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

  249.   float: right;

  250.   padding-right: 0;

  251.   padding-left: 10px;

  252. }

  253. .views-displays {

  254.   padding-bottom: 36px;

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

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

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

  258. }

  259. .views-display-top {

  260.   position: relative;

  261.   display: flex;

  262.   flex-wrap: wrap;

  263.   justify-content: space-between;

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

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

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

  267. }

  268. .form-edit .form-actions {

  269.   margin-top: 0;

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

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

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

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

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

  275. }

  276. .edit-display-settings {

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

  278. }

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

  280.   position: relative;

  281.   display: flex;

  282.   flex-wrap: wrap;

  283.   justify-content: space-between;

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

  285.   padding: 0;

  286.   border-bottom: none;

  287.   line-height: 20px;

  288. }

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

  290.   padding: 0.125rem 0 0;

  291. }

  292. .views-display-column {

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

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

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

  296. }

  297. .views-display-column + .views-display-column {

  298.   margin-top: 0;

  299. }

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

  301. .view-preview-form .form-actions {

  302.   margin-top: 5px;

  303. }

  304. .view-preview-form .arguments-preview {

  305.   font-size: 1em;

  306. }

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

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

  309. }

  310. .view-preview-form .arguments-preview,

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

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

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

  314. }

  315. .preview-submit-wrapper {

  316.   display: inline-block;

  317. }

  318. .form-item--live-preview,

  319. .view-preview-form .form-actions {

  320.   vertical-align: top;

  321. }

  322. 

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

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

  325.     white-space: nowrap;

  326.   }

  327. }

  328. 

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

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

  331.   position: relative;

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

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

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

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

  336.   line-height: 20px;

  337. }

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

  339.   margin-bottom: 0;

  340.   border-bottom: none;

  341. }

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

  343.   border-top: medium none;

  344. }

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

  346.   display: inline-flex;

  347.   justify-content: space-between;

  348.   box-sizing: border-box;

  349.   width: 100%;

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

  351. }

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

  353.   margin: 0;

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

  355. }

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

  357.   padding-top: 0;

  358. }

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

  360.   border-bottom: medium none;

  361. }

  362. 

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

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

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

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

  367.  * header specifically with the overridden font style.

  368.  */

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

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

  371.   font-style: italic;

  372. }

  373. 

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

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

  376.   display: flex;

  377.   flex-wrap: wrap;

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

  379.   color: #666;

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

  381. }

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

  383.   background-color: transparent;

  384. }

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

  386.   margin-top: 6px;

  387.   margin-bottom: 6px;

  388. }

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

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

  391. }

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

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

  394.   margin-left: 0;

  395. }

  396. .views-display-setting .label {

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

  398.   white-space: nowrap;

  399. }

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

  401.   margin-right: 0;

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

  403. }

  404. .label--separator.label--separator {

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

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

  407. }

  408. .views-edit-view {

  409.   margin-bottom: 15px;

  410. }

  411. 

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

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

  414.   padding: 5px 8px;

  415.   border-top: none;

  416. }

  417. .filterable-option .form-item {

  418.   margin-top: 0;

  419.   margin-bottom: 0;

  420. }

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

  422.   margin-top: 0;

  423.   margin-bottom: 0;

  424. }

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

  426.   width: 30%;

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

  428. }

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

  430.   margin: 0 2% 0 0;

  431. }

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

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

  434.   width: 100%;

  435. }

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

  437.   padding: 0;

  438. }

  439. 

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

  441.   margin-bottom: 10px;

  442. }

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

  444.   padding-top: 0;

  445.   padding-bottom: 0;

  446. }

  447. 

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

  449.   padding: 0 1rem;

  450. }

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

  452.   display: block;

  453.   margin: 0;

  454.   padding: 0.3rem 0.8rem;

  455.   border: 1px solid #dedfe4;

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

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

  458. }

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

  460.   margin: 0;

  461.   padding: 6px 16px;

  462. }

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

  464.   display: inline;

  465. }

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

  467.   border: none;

  468. }

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

  470.   position: relative;

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

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

  473. }

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

  475.   position: absolute;

  476.   bottom: 0;

  477.   left: 0;

  478.   width: 100%;

  479.   height: 3px;

  480.   content: "";

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

  482. }

  483. 

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

  485.   margin: 0;

  486. }

  487. 

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

  489.   max-width: 40%;

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

  491. }

  492. 

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

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

  495. }

  496. 

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

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

  499. }

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

  501.   padding-right: 2em;

  502.   padding-left: 0;

  503. }

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

  505.   margin: 0;

  506. }

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

  508.   border-collapse: collapse;

  509. }

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

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

  512. }

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

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

  515. }

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

  517.   border-right: 0;

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

  519. }

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

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

  522. }

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

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

  525. }

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

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

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

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

  530.   margin-top: 6px;

  531.   margin-bottom: 6px;

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

  533. }

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

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

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

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

  538.   margin-right: 18px;

  539.   margin-left: 0;

  540. }

  541. .views-preview-wrapper {

  542.   border: 1px solid #ccc;

  543. }

  544. .view-preview-form {

  545.   position: relative;

  546. }

  547. .view-preview-form__title {

  548.   margin-top: 0;

  549.   padding: 8px 12px;

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

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

  552. }

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

  554.   position: absolute;

  555.   top: 0.6875rem;

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

  557.   margin-top: 2px;

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

  559. }

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

  561.   right: auto;

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

  563.   margin-right: 2px;

  564.   margin-left: 0;

  565. }

  566. .views-live-preview {

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

  568. }

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

  570.   overflow: auto;

  571. }

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

  573.   display: inline-block;

  574.   margin-top: 0;

  575.   margin-bottom: 0;

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

  577.   font-size: 13px;

  578.   font-weight: normal;

  579.   line-height: 1.6154;

  580. }

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

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

  583. }

  584. .views-live-preview .preview-section {

  585.   margin: 0 -5px;

  586.   padding: 3px 5px;

  587.   border: 1px dashed #dedede;

  588. }

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

  590.   margin-top: 18px;

  591. }

  592. 

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

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

  595.   margin-top: 36px;

  596. }

  597. .views-query-info table {

  598.   margin: 10px 0;

  599.   border-spacing: 0;

  600.   border-collapse: separate;

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

  602. }

  603. .views-query-info table tr {

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

  605. }

  606. .views-query-info table th,

  607. .views-query-info table td {

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

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

  610. }

  611. .messages {

  612.   margin-bottom: 18px;

  613.   line-height: 1.4555;

  614. }

  615. 

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

  617.   position: absolute;

  618.   z-index: 2;

  619.   top: -1px;

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

  621. }

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

  623.   right: auto;

  624.   left: -5px;

  625. }

  626. 

  627. /**

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

  629.  * converted to splitbuttons.

  630.  *

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

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

  633.  */

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

  635.   top: 0.8125rem;

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

  637. }

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

  639.   right: auto;

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

  641. }

  642. 

  643. .views-list-section {

  644.   margin-bottom: 2em;

  645. }

  646. .form-textarea-wrapper,

  647. .form-item-options-content {

  648.   width: 100%;

  649. }

  650. 

  651. .views-messages .messages-list,

  652. .views-messages .messages-list__item {

  653.   margin-top: 0;

  654.   margin-bottom: 0;

  655. }

  656. 

  657. /**

  658.  * Styles on devices with touchevents.

  659.  */

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

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

  662. }

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

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

  665. }

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