You are here

Home » API reference » Drupal 10

views_ui.admin.theme.pcss.css in Drupal 10

Same filename and directory in other branches
  1. 8 core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
  2. 9 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 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: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;

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

  35. }

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

  37.   border-color: #d0d0d0;

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

  39. }

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

  41.   border-color: #c0c0c0;

  42. }

  43. .views-admin span.icon {

  44.   position: relative;

  45.   float: left; /* LTR */

  46. }

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

  48.   float: right;

  49. }

  50. .views-admin .icon.compact {

  51.   display: block;

  52.   overflow: hidden;

  53.   text-indent: -9999px;

  54.   direction: ltr;

  55. }

  56. 

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

  58. .views-admin .icon-text {

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

  60. }

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

  62.   padding-right: 19px;

  63.   padding-left: 0;

  64. }

  65. .views-admin .icon.linked {

  66.   background-position: center -153px;

  67. }

  68. .views-admin .icon.unlinked {

  69.   background-position: center -195px;

  70. }

  71. .views-admin .icon.delete {

  72.   background-position: center -52px;

  73. }

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

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

  76. }

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

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

  79. }

  80. .views-admin .icon.rearrange {

  81.   background-position: center -111px;

  82. }

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

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

  85. }

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

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

  88. }

  89. details.box-padding {

  90.   border: none;

  91. }

  92. .views-admin details details {

  93.   margin-bottom: 0;

  94. }

  95. .form-item {

  96.   margin-top: 9px;

  97.   padding-top: 0;

  98.   padding-bottom: 0;

  99. }

  100. .form-type-checkbox {

  101.   margin-top: 6px;

  102. }

  103. .form-checkbox,

  104. .form-radio {

  105.   vertical-align: baseline;

  106. }

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

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

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

  110. }

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

  112.   margin-right: 16px;

  113.   margin-left: 0;

  114. }

  115. 

  116. /* Hide 'remove' checkboxes. */

  117. .views-remove-checkbox {

  118.   display: none;

  119. }

  120. 

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

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

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

  124.   line-height: 2;

  125. }

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

  127.   margin-top: 6px;

  128.   margin-bottom: 6px;

  129. }

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

  131.   margin: 0.25em 0;

  132.   font-weight: bold;

  133. }

  134. .view-changed {

  135.   margin-bottom: 21px;

  136. }

  137. .views-admin .unit-title {

  138.   margin-top: 18px;

  139.   margin-bottom: 0;

  140.   font-size: 15px;

  141.   line-height: 1.6154;

  142. }

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

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

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

  146.   list-style: none;

  147. }

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

  149.   margin-right: 0;

  150.   margin-left: inherit;

  151.   padding-right: 0;

  152.   padding-left: inherit;

  153. }

  154. 

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

  156. .views-ui-name {

  157.   width: 20%;

  158. }

  159. .views-ui-description {

  160.   width: 30%;

  161. }

  162. .views-ui-machine-name {

  163.   width: 15%;

  164. }

  165. .views-ui-displays {

  166.   width: 25%;

  167. }

  168. .views-ui-operations {

  169.   width: 10%;

  170. }

  171. 

  172. /**

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

  174.  */

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

  176.   margin-top: 0;

  177. }

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

  179.   font-weight: bold;

  180. }

  181. .form-item-page-create,

  182. .form-item-block-create {

  183.   margin-top: 13px;

  184. }

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

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

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

  188.   font-weight: bold;

  189. }

  190. 

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

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

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

  194.   display: block;

  195. }

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

  197.   font-weight: normal;

  198. }

  199. 

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

  201. .group-populated {

  202.   display: none;

  203. }

  204. td.group-title {

  205.   font-weight: bold;

  206. }

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

  208.   height: 1px;

  209.   margin: 0;

  210.   padding: 0;

  211. }

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

  213.   display: block;

  214.   overflow: hidden;

  215.   height: 1px;

  216. }

  217. .group-message .form-submit,

  218. .views-remove-group-link,

  219. .views-add-group {

  220.   float: right; /* LTR */

  221.   clear: both;

  222. }

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

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

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

  226.   float: left;

  227. }

  228. .views-operator-label {

  229.   position: absolute;

  230.   z-index: 1;

  231.   bottom: -13px;

  232.   padding: 0.5px 6px;

  233.   text-transform: uppercase;

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

  235.   background: #fff;

  236.   font-weight: bold;

  237.   font-style: italic;

  238. }

  239. .grouped-description,

  240. .exposed-description {

  241.   float: left; /* LTR */

  242.   padding-top: 3px;

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

  244. }

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

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

  247.   float: right;

  248.   padding-right: 0;

  249.   padding-left: 10px;

  250. }

  251. .views-displays {

  252.   padding-bottom: 36px;

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

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

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

  256. }

  257. .views-display-top {

  258.   position: relative;

  259.   display: flex;

  260.   flex-wrap: wrap;

  261.   justify-content: space-between;

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

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

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

  265. }

  266. .form-edit .form-actions {

  267.   margin-top: 0;

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

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

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

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

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

  273. }

  274. .edit-display-settings {

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

  276. }

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

  278.   position: relative;

  279.   display: flex;

  280.   flex-wrap: wrap;

  281.   justify-content: space-between;

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

  283.   padding: 0;

  284.   border-bottom: none;

  285.   line-height: 20px;

  286. }

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

  288.   padding: 0.125rem 0 0;

  289. }

  290. .views-display-column {

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

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

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

  294. }

  295. .views-display-column + .views-display-column {

  296.   margin-top: 0;

  297. }

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

  299. .view-preview-form .form-actions {

  300.   margin-top: 5px;

  301. }

  302. .view-preview-form .arguments-preview {

  303.   font-size: 1em;

  304. }

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

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

  307. }

  308. .view-preview-form .arguments-preview,

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

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

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

  312. }

  313. .preview-submit-wrapper {

  314.   display: inline-block;

  315. }

  316. .form-item--live-preview,

  317. .view-preview-form .form-actions {

  318.   vertical-align: top;

  319. }

  320. 

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

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

  323.     white-space: nowrap;

  324.   }

  325. }

  326. 

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

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

  329.   position: relative;

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

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

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

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

  334.   line-height: 20px;

  335. }

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

  337.   margin-bottom: 0;

  338.   border-bottom: none;

  339. }

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

  341.   border-top: medium none;

  342. }

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

  344.   display: inline-flex;

  345.   justify-content: space-between;

  346.   box-sizing: border-box;

  347.   width: 100%;

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

  349. }

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

  351.   margin: 0;

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

  353. }

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

  355.   padding-top: 0;

  356. }

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

  358.   border-bottom: medium none;

  359. }

  360. 

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

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

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

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

  365.  * header specifically with the overridden font style.

  366.  */

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

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

  369.   font-style: italic;

  370. }

  371. 

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

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

  374.   display: flex;

  375.   flex-wrap: wrap;

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

  377.   color: #666;

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

  379. }

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

  381.   background-color: transparent;

  382. }

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

  384.   margin-top: 6px;

  385.   margin-bottom: 6px;

  386. }

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

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

  389. }

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

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

  392.   margin-left: 0;

  393. }

  394. .views-display-setting .label {

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

  396.   white-space: nowrap;

  397. }

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

  399.   margin-right: 0;

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

  401. }

  402. .label--separator.label--separator {

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

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

  405. }

  406. .views-edit-view {

  407.   margin-bottom: 15px;

  408. }

  409. 

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

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

  412.   padding: 5px 8px;

  413.   border-top: none;

  414. }

  415. .filterable-option .form-item {

  416.   margin-top: 0;

  417.   margin-bottom: 0;

  418. }

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

  420.   margin-top: 0;

  421.   margin-bottom: 0;

  422. }

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

  424.   width: 30%;

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

  426. }

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

  428.   margin: 0 2% 0 0;

  429. }

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

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

  432.   width: 100%;

  433. }

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

  435.   padding: 0;

  436. }

  437. 

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

  439.   margin-bottom: 10px;

  440. }

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

  442.   padding-top: 0;

  443.   padding-bottom: 0;

  444. }

  445. 

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

  447.   padding: 0 1rem;

  448. }

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

  450.   display: block;

  451.   margin: 0;

  452.   padding: 0.3rem 0.8rem;

  453.   border: 1px solid #dedfe4;

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

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

  456. }

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

  458.   margin: 0;

  459.   padding: 6px 16px;

  460. }

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

  462.   display: inline;

  463. }

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

  465.   border: none;

  466. }

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

  468.   position: relative;

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

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

  471. }

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

  473.   position: absolute;

  474.   bottom: 0;

  475.   left: 0;

  476.   width: 100%;

  477.   height: 3px;

  478.   content: "";

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

  480. }

  481. 

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

  483.   margin: 0;

  484. }

  485. 

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

  487.   max-width: 40%;

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

  489. }

  490. 

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

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

  493. }

  494. 

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

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

  497. }

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

  499.   padding-right: 2em;

  500.   padding-left: 0;

  501. }

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

  503.   margin: 0;

  504. }

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

  506.   border-collapse: collapse;

  507. }

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

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

  510. }

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

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

  513. }

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

  515.   border-right: 0;

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

  517. }

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

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

  520. }

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

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

  523. }

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

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

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

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

  528.   margin-top: 6px;

  529.   margin-bottom: 6px;

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

  531. }

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

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

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

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

  536.   margin-right: 18px;

  537.   margin-left: 0;

  538. }

  539. .views-preview-wrapper {

  540.   border: 1px solid #ccc;

  541. }

  542. .view-preview-form {

  543.   position: relative;

  544. }

  545. .view-preview-form__title {

  546.   margin-top: 0;

  547.   padding: 8px 12px;

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

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

  550. }

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

  552.   position: absolute;

  553.   top: 0.6875rem;

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

  555.   margin-top: 2px;

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

  557. }

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

  559.   right: auto;

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

  561.   margin-right: 2px;

  562.   margin-left: 0;

  563. }

  564. .views-live-preview {

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

  566. }

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

  568.   overflow: auto;

  569. }

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

  571.   display: inline-block;

  572.   margin-top: 0;

  573.   margin-bottom: 0;

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

  575.   font-size: 13px;

  576.   font-weight: normal;

  577.   line-height: 1.6154;

  578. }

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

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

  581. }

  582. .views-live-preview .preview-section {

  583.   margin: 0 -5px;

  584.   padding: 3px 5px;

  585.   border: 1px dashed #dedede;

  586. }

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

  588.   margin-top: 18px;

  589. }

  590. 

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

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

  593.   margin-top: 36px;

  594. }

  595. .views-query-info table {

  596.   margin: 10px 0;

  597.   border-spacing: 0;

  598.   border-collapse: separate;

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

  600. }

  601. .views-query-info table tr {

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

  603. }

  604. .views-query-info table th,

  605. .views-query-info table td {

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

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

  608. }

  609. .messages {

  610.   margin-bottom: 18px;

  611.   line-height: 1.4555;

  612. }

  613. 

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

  615.   position: absolute;

  616.   z-index: 2;

  617.   top: -1px;

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

  619. }

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

  621.   right: auto;

  622.   left: -5px;

  623. }

  624. 

  625. /**

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

  627.  * converted to splitbuttons.

  628.  *

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

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

  631.  */

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

  633.   top: 0.8125rem;

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

  635. }

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

  637.   right: auto;

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

  639. }

  640. 

  641. .views-list-section {

  642.   margin-bottom: 2em;

  643. }

  644. .form-textarea-wrapper,

  645. .form-item-options-content {

  646.   width: 100%;

  647. }

  648. 

  649. .views-messages .messages-list,

  650. .views-messages .messages-list__item {

  651.   margin-top: 0;

  652.   margin-bottom: 0;

  653. }

  654. 

  655. /**

  656.  * Styles on devices with touchevents.

  657.  */

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

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

  660. }

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

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

  663. }