3 * The .admin.theme.css file is intended to contain presentation declarations
4 * including images, borders, colors, and fonts.
8 list-style: none outside none;
11 .views-admin a:hover {
12 text-decoration: none;
19 margin: 12px 12px 0 12px;
26 .views-admin .icon-text {
27 background-attachment: scroll;
28 background-image: url(../images/sprites.png);
29 background-position: left top; /* LTR */
30 background-repeat: no-repeat;
32 [dir="rtl"] .views-admin .icon,
33 [dir="rtl"] .views-admin .icon-text {
34 background-position: right top;
37 background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
38 border: 1px solid #ddd;
40 box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
42 .views-admin a.icon:hover {
43 border-color: #d0d0d0;
44 box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
46 .views-admin a.icon:active {
47 border-color: #c0c0c0;
49 .views-admin span.icon {
50 float: left; /* LTR */
53 [dir="rtl"] .views-admin span.icon {
56 .views-admin .icon.compact {
63 /* Targets any element with an icon -> text combo */
64 .views-admin .icon-text {
65 padding-left: 19px; /* LTR */
67 [dir="rtl"] .views-admin .icon-text {
71 .views-admin .icon.linked {
72 background-position: center -153px;
74 .views-admin .icon.unlinked {
75 background-position: center -195px;
77 .views-admin .icon.add {
78 background-position: center 3px;
80 .views-admin a.icon.add {
81 background-position: center 3px, left top; /* LTR */
83 [dir="rtl"] .views-admin a.icon.add {
84 background-position: center 3px, right top;
86 .views-admin .icon.delete {
87 background-position: center -52px;
89 .views-admin a.icon.delete {
90 background-position: center -52px, left top; /* LTR */
92 [dir="rtl"] .views-admin a.icon.delete {
93 background-position: center -52px, right top;
95 .views-admin .icon.rearrange {
96 background-position: center -111px;
98 .views-admin a.icon.rearrange {
99 background-position: center -111px, left top; /* LTR */
101 [dir="rtl"] .views-admin a.icon.rearrange {
102 background-position: center -111px, right top;
104 .views-displays .tabs a:hover > .icon.add {
105 background-position: center -25px;
107 .views-displays .tabs .open a:hover > .icon.add {
108 background-position: center 3px;
110 details.box-padding {
113 .views-admin details details {
121 .form-type-checkbox {
126 vertical-align: baseline;
131 padding-bottom: 15px;
133 .container-inline > * + *,
134 .container-inline .details-wrapper > * + * {
135 padding-left: 4px; /* LTR */
137 [dir="rtl"] .container-inline > * + *,
138 [dir="rtl"] .container-inline .details-wrapper > * + * {
142 .views-admin details details.container-inline {
147 .views-admin details details.container-inline > .details-wrapper {
150 /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
151 .views-admin .form-type-checkbox + .form-wrapper {
152 margin-left: 16px; /* LTR */
154 [dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
159 /* Hide 'remove' checkboxes. */
160 .views-remove-checkbox {
164 /* sizes the labels of checkboxes and radio button to the height of the text */
165 .views-admin .form-type-checkbox label,
166 .views-admin .form-type-radio label {
169 .views-admin-dependent .form-item {
173 .views-ui-view-name h3 {
180 .views-admin .unit-title {
186 .views-ui-view-displays ul {
187 margin-left: 0; /* LTR */
188 padding-left: 0; /* LTR */
191 [dir="rtl"] .views-ui-view-displays ul {
194 margin-left: inherit;
195 padding-left: inherit;
198 /* These header classes are ambiguous and should be scoped to th elements */
202 .views-ui-description {
205 .views-ui-machine-name {
211 .views-ui-operations {
216 * I wish this didn't have to be so specific
218 .form-item-description-enable + .form-item-description {
221 .form-item-description-enable label {
224 .form-item-page-create,
225 .form-item-block-create {
228 .form-item-page-create label,
229 .form-item-block-create label,
230 .form-item-rest-export-create label {
234 /* This makes the form elements after the "Display Format" label flow underneath the label */
235 .form-item-page-style-style-plugin > label,
236 .form-item-block-style-style-plugin > label {
239 .views-attachment .options-set label {
243 /* Styling for the form that allows views filters to be rearranged. */
250 .views-ui-dialog td.group-title {
254 .views-ui-dialog td.group-title span {
259 .group-message .form-submit,
260 .views-remove-group-link,
262 float: right; /* LTR */
265 [dir="rtl"] .group-message .form-submit,
266 [dir="rtl"] .views-remove-group-link,
267 [dir="rtl"] .views-add-group {
270 .views-operator-label {
273 padding-left: 0.5em; /* LTR */
274 text-transform: uppercase;
276 [dir="rtl"] .views-operator-label {
278 padding-right: 0.5em;
280 .grouped-description,
281 .exposed-description {
282 float: left; /* LTR */
284 padding-right: 10px; /* LTR */
286 [dir="rtl"] .grouped-description,
287 [dir="rtl"] .exposed-description {
293 border: 1px solid #ccc;
294 padding-bottom: 36px;
297 background-color: #e1e2dc;
298 border-bottom: 1px solid #ccc;
299 padding: 8px 8px 3px;
302 .views-display-top .tabs {
303 margin-right: 18em; /* LTR */
305 [dir="rtl"] .views-display-top .tabs {
309 .views-display-top .tabs > li {
310 margin-right: 6px; /* LTR */
311 padding-left: 0; /* LTR */
313 [dir="rtl"] .views-display-top .tabs > li {
318 .views-display-top .tabs > li:last-child {
319 margin-right: 0; /* LTR */
321 [dir="rtl"] .views-display-top .tabs > li:last-child {
325 .form-edit .form-actions {
326 background-color: #e1e2dc;
327 border-right: 1px solid #ccc;
328 border-bottom: 1px solid #ccc;
329 border-left: 1px solid #ccc;
333 .views-displays .tabs.secondary {
334 margin-right: 200px; /* LTR */
337 [dir="rtl"] .views-displays .tabs.secondary {
341 .views-displays .tabs.secondary li,
342 .views-displays .tabs.secondary li.is-active {
343 background: transparent;
348 .views-displays .tabs li.add ul.action-list li {
351 .views-displays .tabs.secondary li {
352 margin: 0 5px 5px 6px; /* LTR */
354 [dir="rtl"] .views-displays .tabs.secondary li {
358 .views-displays .tabs.secondary .tabs__tab + .tabs__tab {
361 .views-displays .tabs li.tabs__tab:hover {
363 padding-left: 0; /* LTR */
365 [dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
368 .views-displays .tabs.secondary a {
369 border: 1px solid #cbcbcb;
371 display: inline-block;
377 /* Display a red border if the display doesn't validate. */
378 .views-displays .tabs li.is-active a.is-active.error,
379 .views-displays .tabs .error {
380 border: 2px solid #ed541d;
383 .views-displays .tabs a:focus {
385 text-decoration: underline;
387 .views-displays .tabs.secondary li a {
388 background-color: #fff;
390 .views-displays .tabs li a:hover,
391 .views-displays .tabs li.is-active a,
392 .views-displays .tabs li.is-active a.is-active {
393 background-color: #555;
396 .views-displays .tabs .open > a {
397 background-color: #f1f1f1;
398 border-bottom: 1px solid transparent;
401 .views-displays .tabs .open > a:hover {
403 background-color: #f1f1f1;
405 .views-displays .tabs .action-list li {
406 background-color: #f1f1f1;
407 border-color: #cbcbcb;
412 .views-displays .tabs .action-list li:first-child {
413 border-width: 1px 1px 0;
415 .views-displays .action-list li:last-child {
416 border-width: 0 1px 1px;
418 .views-displays .tabs .action-list li:last-child {
419 border-width: 0 1px 1px;
421 .views-displays .tabs .action-list input.form-submit {
422 background: none repeat scroll 0 0 transparent;
427 .views-displays .tabs .action-list input.form-submit:hover {
430 .views-displays .tabs .action-list li:hover {
431 background-color: #ddd;
433 .edit-display-settings {
434 margin: 12px 12px 0 12px
436 .edit-display-settings-top.views-ui-display-tab-bucket {
437 border: 1px solid #f3f3f3;
444 .views-display-column {
445 border: 1px solid #f3f3f3;
447 .views-display-column + .views-display-column {
450 .view-preview-form .form-item-view-args,
451 .view-preview-form .form-actions {
454 .view-preview-form .arguments-preview {
457 .view-preview-form .arguments-preview,
458 .view-preview-form .form-item-view-args {
459 margin-left: 10px; /* LTR */
461 [dir="rtl"] .view-preview-form .arguments-preview,
462 [dir="rtl"] .view-preview-form .form-item-view-args {
466 .view-preview-form .form-item-view-args label {
467 float: left; /* LTR */
470 margin-right: 0.75em; /* LTR */
472 [dir="rtl"] .view-preview-form .form-item-view-args label {
477 .form-item-live-preview,
478 .form-item-view-args,
479 .preview-submit-wrapper {
480 display: inline-block;
482 .form-item-live-preview,
483 .view-preview-form .form-actions {
486 @media screen and (min-width: 45em) { /* 720px */
487 .view-preview-form .form-type-textfield .description {
492 /* These are the individual "buckets," or boxes, inside the display settings area */
493 .views-ui-display-tab-bucket {
494 border-bottom: 1px solid #f3f3f3;
500 .views-ui-display-tab-bucket:last-of-type {
503 .views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
504 border-top: medium none;
506 .views-ui-display-tab-bucket__title,
507 .views-ui-display-tab-bucket > .views-display-setting {
508 padding: 2px 6px 4px;
510 .views-ui-display-tab-bucket__title {
514 .views-ui-display-tab-bucket.access {
517 .views-ui-display-tab-bucket.page-settings {
518 border-bottom: medium none;
520 .views-display-setting .views-ajax-link {
521 margin-left: 0.2083em;
522 margin-right: 0.2083em;
525 .views-ui-display-tab-setting > span {
526 margin-left: 0.5em; /* LTR */
528 [dir="rtl"] .views-ui-display-tab-setting > span {
533 /** Applies an overridden(italics) font style to overridden buckets.
534 * The better way to implement this would be to add the overridden class
535 * to the bucket header when the bucket is overridden and style it as a
536 * generic icon classed element. For the moment, we'll style the bucket
537 * header specifically with the overridden font style.
539 .views-ui-display-tab-setting.overridden,
540 .views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
544 /* This is each row within one of the "boxes." */
545 .views-ui-display-tab-bucket .views-display-setting {
550 .views-ui-display-tab-bucket .views-display-setting:nth-of-type(even) {
551 background-color: #f3f5ee;
553 .views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
554 background-color: transparent;
556 .views-ui-display-tab-bucket .views-group-text {
560 .views-display-setting .label {
561 margin-right: 3px; /* LTR */
563 [dir="rtl"] .views-display-setting .label {
571 /* The contents of the popup dialog on the views edit form. */
572 .views-filterable-options .form-type-checkbox {
576 .views-filterable-options {
577 border-top: 1px solid #ccc;
579 .filterable-option .form-item {
583 .views-filterable-options .filterable-option .title {
587 .views-filterable-options .form-type-checkbox .description {
591 .views-filterable-options-controls .form-item {
593 margin: 0 0 0 2%; /* LTR */
595 [dir="rtl"] .views-filterable-options-controls .form-item {
598 .views-filterable-options-controls input,
599 .views-filterable-options-controls select {
602 .views-ui-dialog .ui-dialog-content {
605 .views-ui-dialog .views-filterable-options {
608 .views-ui-dialog .views-add-form-selected.container-inline {
611 .views-ui-dialog .views-add-form-selected.container-inline > div {
614 .views-ui-dialog .form-item-selected {
618 .views-ui-dialog .views-override {
619 background-color: #f3f4ee;
622 .views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
625 .views-ui-dialog .views-offset-top {
626 border-bottom: 1px solid #CCC;
628 .views-ui-dialog .views-offset-bottom {
629 border-top: 1px solid #CCC;
631 .views-ui-dialog .views-override > * {
634 .views-ui-dialog .views-progress-indicator {
638 right: 10px; /* LTR */
641 [dir="rtl"] .views-ui-dialog .views-progress-indicator {
645 .views-ui-dialog .views-progress-indicator:before {
646 content: "\003C\00A0";
648 .views-ui-dialog .views-progress-indicator:after {
649 content: "\00A0\003E";
651 .views-ui-dialog details .item-list {
652 padding-left: 2em; /* LTR */
654 [dir="rtl"] .views-ui-dialog details .item-list {
658 .views-ui-rearrange-filter-form table {
659 border-collapse: collapse;
661 .views-ui-rearrange-filter-form tr td[rowspan] {
662 border-color: #cdcdcd;
664 border-width: 0 1px 1px 1px;
666 .views-ui-rearrange-filter-form tr[id^="views-row"] {
667 border-right: 1px solid #cdcdcd; /* LTR */
669 [dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {
670 border-left: 1px solid #cdcdcd;
673 .views-ui-rearrange-filter-form .even td {
674 background-color: #f3f4ed;
676 .views-ui-rearrange-filter-form .views-group-title {
677 border-top: 1px solid #cdcdcd;
679 .views-ui-rearrange-filter-form .group-empty {
680 border-bottom: 1px solid #cdcdcd;
682 .form-item-options-expose-required,
683 .form-item-options-expose-label,
684 .form-item-options-expose-description {
686 margin-left: 18px; /* LTR */
689 [dir="rtl"] .form-item-options-expose-required,
690 [dir="rtl"] .form-item-options-expose-label,
691 [dir="rtl"] .form-item-options-expose-description {
695 .views-preview-wrapper {
696 border: 1px solid #ccc;
701 .view-preview-form__title {
702 background-color: #e1e2dc;
703 border-bottom: 1px solid #ccc;
707 .view-preview-form .form-item-live-preview {
712 margin-left: 2px; /* LTR */
714 [dir="rtl"] .view-preview-form .form-item-live-preview {
720 .views-live-preview {
723 .views-live-preview .views-query-info {
726 .views-live-preview .section-title {
728 display: inline-block;
735 .views-live-preview .view > * {
738 .views-live-preview .preview-section {
739 border: 1px dashed #dedede;
743 .views-live-preview li.views-row + li.views-row {
747 /* The div.views-row is intentional and excludes li.views-row, for example */
748 .views-live-preview div.views-row + div.views-row {
751 .views-query-info table {
752 border-collapse: separate;
757 .views-query-info table tr {
758 background-color: #f9f9f9;
760 .views-query-info table th,
761 .views-query-info table td {
769 .dropbutton-multiple {
775 .js .views-edit-view .dropbutton-wrapper .dropbutton .dropbutton-action > * {
778 .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
780 right: -5px; /* LTR */
784 [dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
788 .js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
789 border-radius: 1.1em 0 0 0; /* LTR */
791 [dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
792 border-radius: 0 1.1em 0 0;
794 .js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
795 border-radius: 0 0 0 1.1em; /* LTR */
797 [dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
798 border-radius: 0 0 1.1em 0;
800 .views-display-top .dropbutton-wrapper {
802 right: 12px; /* LTR */
805 [dir="rtl"] .views-display-top .dropbutton-wrapper {
809 .views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
813 .views-ui-display-tab-bucket .dropbutton-wrapper {
815 right: 5px; /* LTR */
818 [dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {
822 .views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
825 .views-ui-display-tab-actions .dropbutton-wrapper li a,
826 .views-ui-display-tab-actions .dropbutton-wrapper input {
829 font-family: inherit;
831 padding-left: 12px; /* LTR */
834 [dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper li a,
835 [dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper input {
839 .views-ui-display-tab-actions .dropbutton-wrapper input:hover {
843 .views-list-section {
846 .form-textarea-wrapper,
847 .form-item-options-content {