views-admin.theme.css

/**
 * The .theme.css file is intended to contain presentation declarations including
 * images, borders, colors, and fonts.
 */

/* @group Reset */

.views-admin .links {
  list-style: none outside none;
  margin: 0;
}

.views-admin a:hover {
  text-decoration: none;
}

/* @end */

/* @group Layout */

.box-padding {
  padding-left: 12px;
  padding-right: 12px;
}

.box-margin {
  margin: 12px 12px 0 12px;
}

/* @end */

/* @group Icons */

.views-admin .icon {
  height: 16px;
  width: 16px;
}

.views-admin .icon,
.views-admin .icon-text {
  background-attachment: scroll;
  background-image: url('../images/sprites.png');
  background-position: left top; /* LTR */
  background-repeat: no-repeat;
}

.views-admin a.icon {
  background-image: url('../images/sprites.png'),
  -moz-linear-gradient(
  -90deg,
  #fff 0px,
  #e8e8e8 100%
  );
  background-image: url('../images/sprites.png'),
  -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0.0, rgba(255, 255, 255, 1.0)),
  color-stop(1.0, rgba(232, 232, 232, 1.0))
  );
  background-image: url('../images/sprites.png'),
  -webkit-linear-gradient(
  -90deg,
  #fff 0px,
  #e8e8e8 100%
  );
  background-repeat: no-repeat, repeat-y;
  border: 1px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
}

.views-admin a.icon:hover {
  border-color: #d0d0d0;
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
}

.views-admin a.icon:active {
  border-color: #c0c0c0;
}

/**
 * Targets a <span> element inside an <a> element.
 * This assumes no visible text from the span.
 */
.views-admin span.icon {
  display: inline-block;
  float: left;
  position: relative;
}

.views-admin .icon.compact {
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

/* Targets any element with an icon -> text combo */
.views-admin .icon-text {
  padding-left: 19px; /* LTR */
}

.views-admin .icon.linked {
  background-position: center -153px;
}

.views-admin .icon.unlinked {
  background-position: center -195px;
}

.views-admin .icon.add {
  background-position: center 3px;
}

.views-admin a.icon.add {
  background-position: center 3px, left top;
}

.views-admin .icon.delete {
  background-position: center -52px;
}

.views-admin a.icon.delete {
  background-position: center -52px, left top;
}

.views-admin .icon.rearrange {
  background-position: center -111px;
}

.views-admin a.icon.rearrange {
  background-position: center -111px, left top;
}

.views-displays .secondary a:hover > .icon.add {
  background-position: center -25px;
}

.views-displays .secondary .open a:hover > .icon.add {
  background-position: center 3px;
}

/* @end */

/* @group Forms */

fieldset.box-padding {
  border: none;
}

.views-admin fieldset fieldset {
  margin-bottom: 0;
}

.form-item {
  margin-top: 9px;
  padding-bottom: 0;
  padding-top: 0;
}

.form-type-checkbox {
  margin-top: 6px;
}

input.form-checkbox,
input.form-radio {
  vertical-align: baseline;
}

.form-submit:not(.js-hide) + .form-submit,
.views-admin a.button:not(.js-hide) + a.button {
  margin-left: 1em; /* LTR */
}

.container-inline {
  padding-top: 15px;
}

.container-inline > * + *,
.container-inline .fieldset-wrapper > * + * {
  padding-left: 4pt; /* LTR */
}

.views-admin fieldset fieldset.container-inline {
  margin-bottom: 1em;
  margin-top: 1em;
  padding-top: 0;
}

.views-admin fieldset fieldset.container-inline > .fieldset-wrapper {
  padding-bottom: 0;
}

/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
.views-admin .form-type-checkbox + .form-wrapper {
  margin-left: 16px; /* LTR */
}

/* Hide 'remove' checkboxes. */
.views-remove-checkbox {
  display: none;
}

/* sizes the labels of checkboxes and radio button to the height of the text */
.views-admin .form-type-checkbox label,
.views-admin .form-type-radio label {
  line-height: 2;
}

/* @group Dependent options */

.views-admin-dependent .form-item {
  margin-bottom: 6px;
  margin-top: 6px;
}

/* @end */

/* @end */

/* @group Lists */

.horizontal > * + * {
  margin-left: 9px; /* LTR */
  padding-left: 9px; /* LTR */
}

.views-ui-view-title {
  font-weight: bold;
}

/* @end */

/* @group Messages */

.view-changed {
  margin-bottom: 21px;
}

/* @end */

/* @group Headings */

/* Intentionally targeting h1 */
.views-admin h1.unit-title {
  font-size: 15px;
  line-height: 1.6154;
  margin-bottom: 0;
  margin-top: 18px;
}

/* @end */

/* @group Tables */

table td,
table th {
  vertical-align: top;
}

/* @end */

/* @group List views */

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

th.views-ui-name {
  width: 18%;
}

th.views-ui-description {
  width: 26%;
}

th.views-ui-tag {
  width: 8%;
}

th.views-ui-path {
  width: auto;
}

th.views-ui-operations {
  width: 24%;
}

/* @end */

/* @group Add view */

/**
 * Drupal core forces AJAX triggering elements to float left when they are
 * disabled due to AJAX processing. On the add view page, we have inline
 * containers where we don't want that behavior; it causes the select dropdown
 * which is triggered to jump to the left while the AJAX throbber is active.
 *
 * See also http://drupal.org/node/769936 (Drupal core issue); when that is
 * fixed it may no longer be necessary to do this.
 */
.views-admin .container-inline .progress-disabled {
  float: none;
}

/**
 * I wish this didn't have to be so specific
 */
.form-item-description-enable + .form-item-description {
  margin-top: 0;
}

.form-item-description-enable label {
  font-weight: bold;
}

.form-item-page-create,
.form-item-block-create {
  margin-top: 13px;
}

.form-item-page-create label,
.form-item-block-create label {
  font-weight: bold;
}

/* This makes the form elements after the "Display Format" label flow underneath the label */
.form-item-page-style-style-plugin > label,
.form-item-block-style-style-plugin > label {
  display: block;
}

.views-attachment .options-set label {
  font-weight: normal;
}

/* @end */

/* @group Rearrange filters
 *
 * Styling for the form that allows views filters to be rearranged.
 */

.group-populated {
  display: none;
}

td.group-title {
  font-weight: bold;
}

.views-ui-dialog td.group-title {
  margin: 0;
  padding: 0;
}

.views-ui-dialog td.group-title span {
  display: block;
  height: 1px;
  overflow: hidden;
}

.group-message .form-submit,
.views-remove-group-link,
#views-add-group {
  float: right;
  clear: both;
}

.views-operator-label {
  font-style: italic;
  font-weight: bold;
  padding-left: 0.5em; /* LTR */
  text-transform: uppercase;
}

.grouped-description,
.exposed-description {
  float: left;
  padding-top: 3px;
  padding-right: 10px;
}

/* This keeps the collapsible fieldsets of options from crashing into the bottom
 * of the edit option columns. Because the edit option columns are floated, the collapsible
 * fieldsets need to be floated as well so that the margin above the fieldset interacts with
 * the float edit option columns.
 */
#edit-options .collapsible {
  float: left;
  width: 100%;
}

#edit-options-more {
  clear: both;
}

/* @end */

/* @group Attachments */

.views-displays {
  border: 1px solid #ccc;
  padding-bottom: 36px;
}

.views-display-top {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
  padding: 8px 8px 8px; /* LTR */
  position: relative;
}

.views-display-top .secondary {
  margin-right: 18em;
}

.views-display-top .secondary > li {
  margin-right: 6px;
  padding-left: 0;
}

.views-display-top .secondary > li:last-child {
  margin-right: 0;
}

#views-display-extra-actions li {
  padding: 3px 9px;
}

.views-display-top #views-display-top {
  max-width: 180px;
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 */

ul#views-display-menu-tabs {
  margin-right: 200px;
}

ul#views-display-menu-tabs li {
  margin-bottom: 5px;
}

ul#views-display-menu-tabs li.add ul.action-list li {
  margin: 0;
}

.views-displays .secondary a {
  border: 1px solid #cbcbcb;
  display: inline-block;
  font-size: small;
  line-height: 1.3333;
  padding: 3px 7px;
}

/**
 * Display a red border if the display doesn't validate.
 */
.views-displays ul.secondary li.active a.active.error,
.views-displays .secondary a.error {
  border: 2px solid #ed541d;
  padding: 1px 6px;
}

.views-displays .secondary a:focus {
  outline: none;
}

.views-displays .secondary a:hover,
.views-displays .secondary .active a {
  background-color: #666;
  color: #fff;
  border-bottom-width: 1px;
}

.views-displays .secondary .open > a {
  background-color: #f1f1f1;
  border-bottom: 1px solid transparent;
  position: relative;
}

.views-displays .secondary .open > a:hover {
  background-color: #f1f1f1;
}

.views-displays .secondary .action-list  li {
  background-color: #f1f1f1;
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 0 1px;
  padding: 2px 9px;
}

.views-displays .secondary .action-list  li:first-child {
  border-width: 1px 1px 0;
}

.views-displays .secondary .action-list  li.last {
  border-width: 0 1px 1px;
}

.views-displays .secondary .action-list  li:last-child {
  border-width: 0 1px 1px;
}

.views-displays .secondary .action-list input.form-submit {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  margin: 0;
  padding: 0;
}

.views-displays .secondary .action-list li:hover {
  background-color: #ddd;
}

/* @end */

/* @group Attachment details */

#edit-display-settings-title {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

#edit-display-settings-top {
  padding-bottom: 4px;
}

#edit-display-settings-content {
  margin-top: 12px;
}

#edit-display-settings-main {
  margin-top: 15px;
}

/* @end */

/* @group Attachment columns
 *
 * The columns that contain the option buckets e.g. Format and Basic Settings
 */

.views-display-column + .views-display-column {
  margin-top: 0;
}

/* @end */

/* @group Auto preview
 *
 * The auto-preview checkbox line.
 */

#views-ui-preview-form > div > div,
#views-ui-preview-form > div > input {
  float: left;
}

#views-ui-preview-form .form-type-checkbox {
  margin-top: 2px;
  margin-left: 2px;
}

#views-ui-preview-form .form-type-textfield {
  margin-top: 5px;
}

#views-ui-preview-form .arguments-preview {
  font-size: 1em;
}

#views-ui-preview-form .arguments-preview,
#views-ui-preview-form .form-type-textfield {
  margin-left: 14px;
}

#views-ui-preview-form .form-type-textfield label {
  display: inline-block;
  float: left;
  font-weight: normal;
  height: 6ex;
  margin-right: 0.75em;
}

#views-ui-preview-form .form-type-textfield .description {
  white-space: nowrap;
}

/* @end */

/* @group Attachment buckets
 *
 * These are the individual "buckets," or boxes, inside the display settings area
 */

.views-ui-display-tab-bucket {
  border: 1px solid #f3f3f3;
  line-height: 20px;
  margin: 0;
  padding-top: 4px;
}

.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
  border-top: medium none;
}

.views-ui-display-tab-bucket > h3,
.views-ui-display-tab-bucket > .views-display-setting {
  padding: 2px 6px 4px;
}

.views-ui-display-tab-bucket h3 {
  font-size: small;
  margin: 0;
}

.views-ui-display-tab-bucket .horizontal.actions {
  margin-right: 6px;
}

.views-ui-display-tab-bucket .actions.horizontal li + li {
  margin-left: 3px;
  padding-left: 3px;
}

.views-ui-display-tab-bucket.access {
  padding-top: 0;
}

.views-ui-display-tab-bucket.page-settings {
  border-bottom: medium none;
}

.views-display-setting .views-ajax-link {
  margin-left: 0.2083em;
  margin-right: 0.2083em;
}

/* @end */

/* @group Attachment bucket overridden
 *
 * Applies a overriden(italics) font style to overridden buckets.
 * The better way to implement this would be to add the overridden class
 * to the bucket header when the bucket is overridden and style it as a
 * generic icon classed element. For the moment, we'll style the bucket
 * header specifically with the overriden font style.
 */

.views-ui-display-tab-setting.overridden,
.views-ui-display-tab-bucket.overridden > h3 {
  font-style: italic;
}

/* @end */

/* @group Attachment bucket drop button */

.views-ui-display-tab-bucket {
  position: relative;
}

/* @end */

/* @group Attachment bucket rows
 *
 * This is each row within one of the "boxes."
 */

.views-ui-display-tab-bucket .views-display-setting {
  color: #666;
  font-size: 12px;
  padding-bottom: 2px;
}

.views-ui-display-tab-bucket .even {
  background-color: #f9f9f9;
}

.views-ui-display-tab-bucket .views-group-text {
  margin-top: 6px;
  margin-bottom: 6px;
}

.views-display-setting .label {
  margin-right: 3pt; /* LTR */
}

/* @end */

/* @group Preview
 *
 * The preview controls and the preview pane
 */

#edit-displays-preview-controls .fieldset-wrapper > * {
  float: left;
}

#edit-displays-preview-controls .fieldset-wrapper > .form-item {
  margin-top: 0.3333em;
}

#edit-displays-preview-controls .form-submit {
  display: inline-block;
  margin-right: 1em;
}

#edit-displays-preview-controls .form-type-textfield {
  margin-left: 1em;
  position: relative;
}

#edit-displays-preview-controls .form-type-textfield label {
  border-left: 1px solid #999;
  padding-left: 1em;
  position: absolute;
}

#edit-displays-preview-controls .form-type-textfield label:after {
  content: ":";
}

#edit-displays-preview-controls .form-type-textfield label ~ * {
  margin-left: 105px;
}

/* @end */

/* @group Modal dialog box
 *
 * The contents of the popup dialog on the views edit form.
 */

.views-ui-dialog {
  font-size: small;
  padding: 0;
}

.views-ui-dialog .ui-dialog-titlebar-close {
  background: url('../images/close.png') no-repeat scroll 6px 3px #f3f4ee;
  border-color: #aaa;
  -moz-border-radius: 0 10px 12px 0;
  -webkit-border-radius: 0 10px 12px 0;
  border-radius: 0 10px 12px 0;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  height: 22px;
  right: -28px;
  top: 0;
  width: 26px;
}

.views-ui-dialog .ui-dialog-titlebar-close span {
  display: none;
}

.views-filterable-options .form-type-checkbox {
  border: 1px solid #ccc;
  padding: 5px 8px;
  border-top: none;
}

.views-filterable-options {
  border-top: 1px solid #ccc;
}

.views-filterable-options .even .form-type-checkbox {
  background-color: #f3f4ee;
}

.filterable-option .form-item {
  margin-bottom: 0;
  margin-top: 0;
}

.views-filterable-options .form-type-checkbox .description {
  margin-top: 0;
  margin-bottom: 0;
}

#views-filterable-options-controls {
  margin: 1em 0;
}

#views-filterable-options-controls .form-item {
  width: 45%;
  margin-right: 2%; /* LTR */
}

#views-filterable-options-controls input,
#views-filterable-options-controls select {
  width: 200px;
}

.views-ui-dialog .views-filterable-options {
  margin-bottom: 10px;
}

.views-ui-dialog .views-add-form-selected.container-inline {
  padding-top: 0;
}

.views-ui-dialog .views-add-form-selected.container-inline > div {
  display: block;
}

.views-ui-dialog #edit-selected {
  margin: 0;
  padding: 6px 16px;
}

.views-ui-dialog #views-ajax-title,
.views-ui-dialog .views-override {
  background-color: #f3f4ee;
}

.views-ui-dialog .views-override {
  padding: 0 13px 8px;
}

.views-ui-dialog .views-override > * {
  margin: 0;
}

.views-ui-dialog #views-ajax-title {
  font-size: 15px;
  padding: 8px 13px;
}

.views-ui-dialog #views-progress-indicator {
  font-size: 11px;
  position: absolute;
  right: 10px; /* LTR */
  top: 8px;
}

.views-ui-dialog #views-progress-indicator:before {
  content: "\003C\00A0";
}

.views-ui-dialog #views-progress-indicator:after {
  content: "\00A0\003E";
}

.views-ui-dialog .scroll {
  border: 1px solid #ccc;
  border-width: 1px 0;
  padding: 8px 13px;
}

.views-ui-dialog fieldset .item-list {
  padding-left: 2em;
}

.views-ui-dialog .form-buttons {
  background-color: #f3f4ee;
  padding: 8px 13px;
}
.views-ui-dialog .form-buttons input {
  margin-bottom: 0;
  margin-right: 0;
}

/* @end */

/* @group Configure filter criteria */

/* @todo The width and border info could be moved into a more generic class. */
/* @todo Make this a class to be used anywhere there's node types? */
.form-type-checkboxes #edit-options-value,
.form-type-checkboxes #edit-options-validate-options-node-types {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  max-height: 210px;
  overflow: auto;
  margin-top: 5px;
  padding: 0 5px;
  width: 190px;
}

/* @end */

/* @group Rearrange filter criteria */

#views-ui-rearrange-filter-form table {
  border-collapse: collapse;
}

#views-ui-rearrange-filter-form tr td[rowspan] {
  border-color: #cdcdcd;
  border-style: solid;
  border-width: 0 1px 1px 1px;
}

#views-ui-rearrange-filter-form tr[id^="views-row"] {
  border-right: 1px solid #cdcdcd;
}

#views-ui-rearrange-filter-form tr[id^="views-row"].even td {
  background-color: #f3f4ed;
}

#views-ui-rearrange-filter-form .views-group-title {
  border-top: 1px solid #cdcdcd;
}

#views-ui-rearrange-filter-form .group-empty {
  border-bottom: 1px solid #cdcdcd;
}

/* @end */

/* @group Expose filter form items */

.form-item-options-expose-required,
.form-item-options-expose-label,
.form-item-options-expose-description {
  margin-bottom: 6px;
  margin-left: 18px;
  margin-top: 6px;
}

/* @end */

/* @group Live preview elements */

#views-preview-wrapper {
  border: 1px solid #ccc;
  border-top: 2px solid #ccc;
  padding-bottom: 12px;
  padding-top: 12px;
}

#views-ui-preview-form {
  margin: 12px;
}

#views-live-preview {
  margin: 0 12px;
}

#views-live-preview .views-query-info {
  overflow: auto;
}

/* Intentionally targeting h1 */
#views-live-preview h1.section-title {
  color: #818181;
  display: inline-block;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.6154;
  margin-bottom: 0;
  margin-top: 0;
}

#views-live-preview .view > * {
  margin-top: 18px;
}

#views-live-preview .preview-section {
  border: 1px dashed #dedede;
  margin: 0 -5px;
  padding: 3px 5px;
}

#views-live-preview li.views-row + li.views-row {
  margin-top: 18px;
}

/* The div.views-row is intentional and excludes li.views-row, for example */
#views-live-preview div.views-row + div.views-row {
  margin-top: 36px;
}

/* @group Query info table */

.views-query-info table {
  border-collapse: separate;
  border-color: #ddd;
  border-spacing: 0;
  margin: 10px 0;
}

.views-query-info table tr {
  background-color: #f9f9f9;
}

.views-query-info table th,
.views-query-info table td {
  color: #666;
  padding: 4px 10px;
}

/* @end */

/* @group Grid */

#views-live-preview .views-view-grid th,
#views-live-preview .views-view-grid td {
  vertical-align: top;
}

/* @end */

/* @group HTML list */

#views-live-preview .view-content > .item-list > ul {
  list-style-position: outside;
  padding-left: 21px; /* LTR */
}

/* @end */

/* @end */

/* @group Add/edit argument form */

#edit-options-default-action {
  width: 300px;
  float: left;
}

#edit-options-exception.collapsible {
  float: right;
  width: 250px;
  margin-top: -2px;
}

/* @end */

/* @group AJAX */

/* Hide the drupal system throbber image */
.ajax-progress .throbber {
  display: none;
}

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url('../images/loading-small.gif');
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

/* @end */

/* @group Drupal
 *
 * Overrides to Drupal system CSS
 */
div.messages {
  margin-bottom: 18px;
}

/* @end */

File

css/views-admin.theme.css

View source
  1. /**
  2. * The .theme.css file is intended to contain presentation declarations including
  3. * images, borders, colors, and fonts.
  4. */
  5. /* @group Reset */
  6. .views-admin .links {
  7. list-style: none outside none;
  8. margin: 0;
  9. }
  10. .views-admin a:hover {
  11. text-decoration: none;
  12. }
  13. /* @end */
  14. /* @group Layout */
  15. .box-padding {
  16. padding-left: 12px;
  17. padding-right: 12px;
  18. }
  19. .box-margin {
  20. margin: 12px 12px 0 12px;
  21. }
  22. /* @end */
  23. /* @group Icons */
  24. .views-admin .icon {
  25. height: 16px;
  26. width: 16px;
  27. }
  28. .views-admin .icon,
  29. .views-admin .icon-text {
  30. background-attachment: scroll;
  31. background-image: url('../images/sprites.png');
  32. background-position: left top; /* LTR */
  33. background-repeat: no-repeat;
  34. }
  35. .views-admin a.icon {
  36. background-image: url('../images/sprites.png'),
  37. -moz-linear-gradient(
  38. -90deg,
  39. #fff 0px,
  40. #e8e8e8 100%
  41. );
  42. background-image: url('../images/sprites.png'),
  43. -webkit-gradient(
  44. linear,
  45. left top,
  46. left bottom,
  47. color-stop(0.0, rgba(255, 255, 255, 1.0)),
  48. color-stop(1.0, rgba(232, 232, 232, 1.0))
  49. );
  50. background-image: url('../images/sprites.png'),
  51. -webkit-linear-gradient(
  52. -90deg,
  53. #fff 0px,
  54. #e8e8e8 100%
  55. );
  56. background-repeat: no-repeat, repeat-y;
  57. border: 1px solid #ddd;
  58. -moz-border-radius: 4px;
  59. -webkit-border-radius: 4px;
  60. border-radius: 4px;
  61. -moz-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  62. -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  63. box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  64. }
  65. .views-admin a.icon:hover {
  66. border-color: #d0d0d0;
  67. -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  68. -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  69. box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  70. }
  71. .views-admin a.icon:active {
  72. border-color: #c0c0c0;
  73. }
  74. /**
  75. * Targets a element inside an element.
  76. * This assumes no visible text from the span.
  77. */
  78. .views-admin span.icon {
  79. display: inline-block;
  80. float: left;
  81. position: relative;
  82. }
  83. .views-admin .icon.compact {
  84. display: block;
  85. overflow: hidden;
  86. text-indent: -9999px;
  87. }
  88. /* Targets any element with an icon -> text combo */
  89. .views-admin .icon-text {
  90. padding-left: 19px; /* LTR */
  91. }
  92. .views-admin .icon.linked {
  93. background-position: center -153px;
  94. }
  95. .views-admin .icon.unlinked {
  96. background-position: center -195px;
  97. }
  98. .views-admin .icon.add {
  99. background-position: center 3px;
  100. }
  101. .views-admin a.icon.add {
  102. background-position: center 3px, left top;
  103. }
  104. .views-admin .icon.delete {
  105. background-position: center -52px;
  106. }
  107. .views-admin a.icon.delete {
  108. background-position: center -52px, left top;
  109. }
  110. .views-admin .icon.rearrange {
  111. background-position: center -111px;
  112. }
  113. .views-admin a.icon.rearrange {
  114. background-position: center -111px, left top;
  115. }
  116. .views-displays .secondary a:hover > .icon.add {
  117. background-position: center -25px;
  118. }
  119. .views-displays .secondary .open a:hover > .icon.add {
  120. background-position: center 3px;
  121. }
  122. /* @end */
  123. /* @group Forms */
  124. fieldset.box-padding {
  125. border: none;
  126. }
  127. .views-admin fieldset fieldset {
  128. margin-bottom: 0;
  129. }
  130. .form-item {
  131. margin-top: 9px;
  132. padding-bottom: 0;
  133. padding-top: 0;
  134. }
  135. .form-type-checkbox {
  136. margin-top: 6px;
  137. }
  138. input.form-checkbox,
  139. input.form-radio {
  140. vertical-align: baseline;
  141. }
  142. .form-submit:not(.js-hide) + .form-submit,
  143. .views-admin a.button:not(.js-hide) + a.button {
  144. margin-left: 1em; /* LTR */
  145. }
  146. .container-inline {
  147. padding-top: 15px;
  148. }
  149. .container-inline > * + *,
  150. .container-inline .fieldset-wrapper > * + * {
  151. padding-left: 4pt; /* LTR */
  152. }
  153. .views-admin fieldset fieldset.container-inline {
  154. margin-bottom: 1em;
  155. margin-top: 1em;
  156. padding-top: 0;
  157. }
  158. .views-admin fieldset fieldset.container-inline > .fieldset-wrapper {
  159. padding-bottom: 0;
  160. }
  161. /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
  162. .views-admin .form-type-checkbox + .form-wrapper {
  163. margin-left: 16px; /* LTR */
  164. }
  165. /* Hide 'remove' checkboxes. */
  166. .views-remove-checkbox {
  167. display: none;
  168. }
  169. /* sizes the labels of checkboxes and radio button to the height of the text */
  170. .views-admin .form-type-checkbox label,
  171. .views-admin .form-type-radio label {
  172. line-height: 2;
  173. }
  174. /* @group Dependent options */
  175. .views-admin-dependent .form-item {
  176. margin-bottom: 6px;
  177. margin-top: 6px;
  178. }
  179. /* @end */
  180. /* @end */
  181. /* @group Lists */
  182. .horizontal > * + * {
  183. margin-left: 9px; /* LTR */
  184. padding-left: 9px; /* LTR */
  185. }
  186. .views-ui-view-title {
  187. font-weight: bold;
  188. }
  189. /* @end */
  190. /* @group Messages */
  191. .view-changed {
  192. margin-bottom: 21px;
  193. }
  194. /* @end */
  195. /* @group Headings */
  196. /* Intentionally targeting h1 */
  197. .views-admin h1.unit-title {
  198. font-size: 15px;
  199. line-height: 1.6154;
  200. margin-bottom: 0;
  201. margin-top: 18px;
  202. }
  203. /* @end */
  204. /* @group Tables */
  205. table td,
  206. table th {
  207. vertical-align: top;
  208. }
  209. /* @end */
  210. /* @group List views */
  211. /* These header classes are ambiguous and should be scoped to th elements */
  212. th.views-ui-name {
  213. width: 18%;
  214. }
  215. th.views-ui-description {
  216. width: 26%;
  217. }
  218. th.views-ui-tag {
  219. width: 8%;
  220. }
  221. th.views-ui-path {
  222. width: auto;
  223. }
  224. th.views-ui-operations {
  225. width: 24%;
  226. }
  227. /* @end */
  228. /* @group Add view */
  229. /**
  230. * Drupal core forces AJAX triggering elements to float left when they are
  231. * disabled due to AJAX processing. On the add view page, we have inline
  232. * containers where we don't want that behavior; it causes the select dropdown
  233. * which is triggered to jump to the left while the AJAX throbber is active.
  234. *
  235. * See also http://drupal.org/node/769936 (Drupal core issue); when that is
  236. * fixed it may no longer be necessary to do this.
  237. */
  238. .views-admin .container-inline .progress-disabled {
  239. float: none;
  240. }
  241. /**
  242. * I wish this didn't have to be so specific
  243. */
  244. .form-item-description-enable + .form-item-description {
  245. margin-top: 0;
  246. }
  247. .form-item-description-enable label {
  248. font-weight: bold;
  249. }
  250. .form-item-page-create,
  251. .form-item-block-create {
  252. margin-top: 13px;
  253. }
  254. .form-item-page-create label,
  255. .form-item-block-create label {
  256. font-weight: bold;
  257. }
  258. /* This makes the form elements after the "Display Format" label flow underneath the label */
  259. .form-item-page-style-style-plugin > label,
  260. .form-item-block-style-style-plugin > label {
  261. display: block;
  262. }
  263. .views-attachment .options-set label {
  264. font-weight: normal;
  265. }
  266. /* @end */
  267. /* @group Rearrange filters
  268. *
  269. * Styling for the form that allows views filters to be rearranged.
  270. */
  271. .group-populated {
  272. display: none;
  273. }
  274. td.group-title {
  275. font-weight: bold;
  276. }
  277. .views-ui-dialog td.group-title {
  278. margin: 0;
  279. padding: 0;
  280. }
  281. .views-ui-dialog td.group-title span {
  282. display: block;
  283. height: 1px;
  284. overflow: hidden;
  285. }
  286. .group-message .form-submit,
  287. .views-remove-group-link,
  288. #views-add-group {
  289. float: right;
  290. clear: both;
  291. }
  292. .views-operator-label {
  293. font-style: italic;
  294. font-weight: bold;
  295. padding-left: 0.5em; /* LTR */
  296. text-transform: uppercase;
  297. }
  298. .grouped-description,
  299. .exposed-description {
  300. float: left;
  301. padding-top: 3px;
  302. padding-right: 10px;
  303. }
  304. /* This keeps the collapsible fieldsets of options from crashing into the bottom
  305. * of the edit option columns. Because the edit option columns are floated, the collapsible
  306. * fieldsets need to be floated as well so that the margin above the fieldset interacts with
  307. * the float edit option columns.
  308. */
  309. #edit-options .collapsible {
  310. float: left;
  311. width: 100%;
  312. }
  313. #edit-options-more {
  314. clear: both;
  315. }
  316. /* @end */
  317. /* @group Attachments */
  318. .views-displays {
  319. border: 1px solid #ccc;
  320. padding-bottom: 36px;
  321. }
  322. .views-display-top {
  323. background-color: #f9f9f9;
  324. border-bottom: 1px solid #ccc;
  325. padding: 8px 8px 8px; /* LTR */
  326. position: relative;
  327. }
  328. .views-display-top .secondary {
  329. margin-right: 18em;
  330. }
  331. .views-display-top .secondary > li {
  332. margin-right: 6px;
  333. padding-left: 0;
  334. }
  335. .views-display-top .secondary > li:last-child {
  336. margin-right: 0;
  337. }
  338. #views-display-extra-actions li {
  339. padding: 3px 9px;
  340. }
  341. .views-display-top #views-display-top {
  342. max-width: 180px;
  343. }
  344. /* @end */
  345. /* @group Attachment details tabs
  346. *
  347. * The tabs that switch between sections
  348. */
  349. ul#views-display-menu-tabs {
  350. margin-right: 200px;
  351. }
  352. ul#views-display-menu-tabs li {
  353. margin-bottom: 5px;
  354. }
  355. ul#views-display-menu-tabs li.add ul.action-list li {
  356. margin: 0;
  357. }
  358. .views-displays .secondary a {
  359. border: 1px solid #cbcbcb;
  360. display: inline-block;
  361. font-size: small;
  362. line-height: 1.3333;
  363. padding: 3px 7px;
  364. }
  365. /**
  366. * Display a red border if the display doesn't validate.
  367. */
  368. .views-displays ul.secondary li.active a.active.error,
  369. .views-displays .secondary a.error {
  370. border: 2px solid #ed541d;
  371. padding: 1px 6px;
  372. }
  373. .views-displays .secondary a:focus {
  374. outline: none;
  375. }
  376. .views-displays .secondary a:hover,
  377. .views-displays .secondary .active a {
  378. background-color: #666;
  379. color: #fff;
  380. border-bottom-width: 1px;
  381. }
  382. .views-displays .secondary .open > a {
  383. background-color: #f1f1f1;
  384. border-bottom: 1px solid transparent;
  385. position: relative;
  386. }
  387. .views-displays .secondary .open > a:hover {
  388. background-color: #f1f1f1;
  389. }
  390. .views-displays .secondary .action-list li {
  391. background-color: #f1f1f1;
  392. border-color: #cbcbcb;
  393. border-style: solid;
  394. border-width: 0 1px;
  395. padding: 2px 9px;
  396. }
  397. .views-displays .secondary .action-list li:first-child {
  398. border-width: 1px 1px 0;
  399. }
  400. .views-displays .secondary .action-list li.last {
  401. border-width: 0 1px 1px;
  402. }
  403. .views-displays .secondary .action-list li:last-child {
  404. border-width: 0 1px 1px;
  405. }
  406. .views-displays .secondary .action-list input.form-submit {
  407. background: none repeat scroll 0 0 transparent;
  408. border: medium none;
  409. margin: 0;
  410. padding: 0;
  411. }
  412. .views-displays .secondary .action-list li:hover {
  413. background-color: #ddd;
  414. }
  415. /* @end */
  416. /* @group Attachment details */
  417. #edit-display-settings-title {
  418. font-size: 14px;
  419. line-height: 1.5;
  420. margin: 0;
  421. }
  422. #edit-display-settings-top {
  423. padding-bottom: 4px;
  424. }
  425. #edit-display-settings-content {
  426. margin-top: 12px;
  427. }
  428. #edit-display-settings-main {
  429. margin-top: 15px;
  430. }
  431. /* @end */
  432. /* @group Attachment columns
  433. *
  434. * The columns that contain the option buckets e.g. Format and Basic Settings
  435. */
  436. .views-display-column + .views-display-column {
  437. margin-top: 0;
  438. }
  439. /* @end */
  440. /* @group Auto preview
  441. *
  442. * The auto-preview checkbox line.
  443. */
  444. #views-ui-preview-form > div > div,
  445. #views-ui-preview-form > div > input {
  446. float: left;
  447. }
  448. #views-ui-preview-form .form-type-checkbox {
  449. margin-top: 2px;
  450. margin-left: 2px;
  451. }
  452. #views-ui-preview-form .form-type-textfield {
  453. margin-top: 5px;
  454. }
  455. #views-ui-preview-form .arguments-preview {
  456. font-size: 1em;
  457. }
  458. #views-ui-preview-form .arguments-preview,
  459. #views-ui-preview-form .form-type-textfield {
  460. margin-left: 14px;
  461. }
  462. #views-ui-preview-form .form-type-textfield label {
  463. display: inline-block;
  464. float: left;
  465. font-weight: normal;
  466. height: 6ex;
  467. margin-right: 0.75em;
  468. }
  469. #views-ui-preview-form .form-type-textfield .description {
  470. white-space: nowrap;
  471. }
  472. /* @end */
  473. /* @group Attachment buckets
  474. *
  475. * These are the individual "buckets," or boxes, inside the display settings area
  476. */
  477. .views-ui-display-tab-bucket {
  478. border: 1px solid #f3f3f3;
  479. line-height: 20px;
  480. margin: 0;
  481. padding-top: 4px;
  482. }
  483. .views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
  484. border-top: medium none;
  485. }
  486. .views-ui-display-tab-bucket > h3,
  487. .views-ui-display-tab-bucket > .views-display-setting {
  488. padding: 2px 6px 4px;
  489. }
  490. .views-ui-display-tab-bucket h3 {
  491. font-size: small;
  492. margin: 0;
  493. }
  494. .views-ui-display-tab-bucket .horizontal.actions {
  495. margin-right: 6px;
  496. }
  497. .views-ui-display-tab-bucket .actions.horizontal li + li {
  498. margin-left: 3px;
  499. padding-left: 3px;
  500. }
  501. .views-ui-display-tab-bucket.access {
  502. padding-top: 0;
  503. }
  504. .views-ui-display-tab-bucket.page-settings {
  505. border-bottom: medium none;
  506. }
  507. .views-display-setting .views-ajax-link {
  508. margin-left: 0.2083em;
  509. margin-right: 0.2083em;
  510. }
  511. /* @end */
  512. /* @group Attachment bucket overridden
  513. *
  514. * Applies a overriden(italics) font style to overridden buckets.
  515. * The better way to implement this would be to add the overridden class
  516. * to the bucket header when the bucket is overridden and style it as a
  517. * generic icon classed element. For the moment, we'll style the bucket
  518. * header specifically with the overriden font style.
  519. */
  520. .views-ui-display-tab-setting.overridden,
  521. .views-ui-display-tab-bucket.overridden > h3 {
  522. font-style: italic;
  523. }
  524. /* @end */
  525. /* @group Attachment bucket drop button */
  526. .views-ui-display-tab-bucket {
  527. position: relative;
  528. }
  529. /* @end */
  530. /* @group Attachment bucket rows
  531. *
  532. * This is each row within one of the "boxes."
  533. */
  534. .views-ui-display-tab-bucket .views-display-setting {
  535. color: #666;
  536. font-size: 12px;
  537. padding-bottom: 2px;
  538. }
  539. .views-ui-display-tab-bucket .even {
  540. background-color: #f9f9f9;
  541. }
  542. .views-ui-display-tab-bucket .views-group-text {
  543. margin-top: 6px;
  544. margin-bottom: 6px;
  545. }
  546. .views-display-setting .label {
  547. margin-right: 3pt; /* LTR */
  548. }
  549. /* @end */
  550. /* @group Preview
  551. *
  552. * The preview controls and the preview pane
  553. */
  554. #edit-displays-preview-controls .fieldset-wrapper > * {
  555. float: left;
  556. }
  557. #edit-displays-preview-controls .fieldset-wrapper > .form-item {
  558. margin-top: 0.3333em;
  559. }
  560. #edit-displays-preview-controls .form-submit {
  561. display: inline-block;
  562. margin-right: 1em;
  563. }
  564. #edit-displays-preview-controls .form-type-textfield {
  565. margin-left: 1em;
  566. position: relative;
  567. }
  568. #edit-displays-preview-controls .form-type-textfield label {
  569. border-left: 1px solid #999;
  570. padding-left: 1em;
  571. position: absolute;
  572. }
  573. #edit-displays-preview-controls .form-type-textfield label:after {
  574. content: ":";
  575. }
  576. #edit-displays-preview-controls .form-type-textfield label ~ * {
  577. margin-left: 105px;
  578. }
  579. /* @end */
  580. /* @group Modal dialog box
  581. *
  582. * The contents of the popup dialog on the views edit form.
  583. */
  584. .views-ui-dialog {
  585. font-size: small;
  586. padding: 0;
  587. }
  588. .views-ui-dialog .ui-dialog-titlebar-close {
  589. background: url('../images/close.png') no-repeat scroll 6px 3px #f3f4ee;
  590. border-color: #aaa;
  591. -moz-border-radius: 0 10px 12px 0;
  592. -webkit-border-radius: 0 10px 12px 0;
  593. border-radius: 0 10px 12px 0;
  594. border-style: solid;
  595. border-width: 1px 1px 1px 0;
  596. -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  597. -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  598. box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  599. height: 22px;
  600. right: -28px;
  601. top: 0;
  602. width: 26px;
  603. }
  604. .views-ui-dialog .ui-dialog-titlebar-close span {
  605. display: none;
  606. }
  607. .views-filterable-options .form-type-checkbox {
  608. border: 1px solid #ccc;
  609. padding: 5px 8px;
  610. border-top: none;
  611. }
  612. .views-filterable-options {
  613. border-top: 1px solid #ccc;
  614. }
  615. .views-filterable-options .even .form-type-checkbox {
  616. background-color: #f3f4ee;
  617. }
  618. .filterable-option .form-item {
  619. margin-bottom: 0;
  620. margin-top: 0;
  621. }
  622. .views-filterable-options .form-type-checkbox .description {
  623. margin-top: 0;
  624. margin-bottom: 0;
  625. }
  626. #views-filterable-options-controls {
  627. margin: 1em 0;
  628. }
  629. #views-filterable-options-controls .form-item {
  630. width: 45%;
  631. margin-right: 2%; /* LTR */
  632. }
  633. #views-filterable-options-controls input,
  634. #views-filterable-options-controls select {
  635. width: 200px;
  636. }
  637. .views-ui-dialog .views-filterable-options {
  638. margin-bottom: 10px;
  639. }
  640. .views-ui-dialog .views-add-form-selected.container-inline {
  641. padding-top: 0;
  642. }
  643. .views-ui-dialog .views-add-form-selected.container-inline > div {
  644. display: block;
  645. }
  646. .views-ui-dialog #edit-selected {
  647. margin: 0;
  648. padding: 6px 16px;
  649. }
  650. .views-ui-dialog #views-ajax-title,
  651. .views-ui-dialog .views-override {
  652. background-color: #f3f4ee;
  653. }
  654. .views-ui-dialog .views-override {
  655. padding: 0 13px 8px;
  656. }
  657. .views-ui-dialog .views-override > * {
  658. margin: 0;
  659. }
  660. .views-ui-dialog #views-ajax-title {
  661. font-size: 15px;
  662. padding: 8px 13px;
  663. }
  664. .views-ui-dialog #views-progress-indicator {
  665. font-size: 11px;
  666. position: absolute;
  667. right: 10px; /* LTR */
  668. top: 8px;
  669. }
  670. .views-ui-dialog #views-progress-indicator:before {
  671. content: "\003C\00A0";
  672. }
  673. .views-ui-dialog #views-progress-indicator:after {
  674. content: "\00A0\003E";
  675. }
  676. .views-ui-dialog .scroll {
  677. border: 1px solid #ccc;
  678. border-width: 1px 0;
  679. padding: 8px 13px;
  680. }
  681. .views-ui-dialog fieldset .item-list {
  682. padding-left: 2em;
  683. }
  684. .views-ui-dialog .form-buttons {
  685. background-color: #f3f4ee;
  686. padding: 8px 13px;
  687. }
  688. .views-ui-dialog .form-buttons input {
  689. margin-bottom: 0;
  690. margin-right: 0;
  691. }
  692. /* @end */
  693. /* @group Configure filter criteria */
  694. /* @todo The width and border info could be moved into a more generic class. */
  695. /* @todo Make this a class to be used anywhere there's node types? */
  696. .form-type-checkboxes #edit-options-value,
  697. .form-type-checkboxes #edit-options-validate-options-node-types {
  698. border-color: #ccc;
  699. border-style: solid;
  700. border-width: 1px;
  701. max-height: 210px;
  702. overflow: auto;
  703. margin-top: 5px;
  704. padding: 0 5px;
  705. width: 190px;
  706. }
  707. /* @end */
  708. /* @group Rearrange filter criteria */
  709. #views-ui-rearrange-filter-form table {
  710. border-collapse: collapse;
  711. }
  712. #views-ui-rearrange-filter-form tr td[rowspan] {
  713. border-color: #cdcdcd;
  714. border-style: solid;
  715. border-width: 0 1px 1px 1px;
  716. }
  717. #views-ui-rearrange-filter-form tr[id^="views-row"] {
  718. border-right: 1px solid #cdcdcd;
  719. }
  720. #views-ui-rearrange-filter-form tr[id^="views-row"].even td {
  721. background-color: #f3f4ed;
  722. }
  723. #views-ui-rearrange-filter-form .views-group-title {
  724. border-top: 1px solid #cdcdcd;
  725. }
  726. #views-ui-rearrange-filter-form .group-empty {
  727. border-bottom: 1px solid #cdcdcd;
  728. }
  729. /* @end */
  730. /* @group Expose filter form items */
  731. .form-item-options-expose-required,
  732. .form-item-options-expose-label,
  733. .form-item-options-expose-description {
  734. margin-bottom: 6px;
  735. margin-left: 18px;
  736. margin-top: 6px;
  737. }
  738. /* @end */
  739. /* @group Live preview elements */
  740. #views-preview-wrapper {
  741. border: 1px solid #ccc;
  742. border-top: 2px solid #ccc;
  743. padding-bottom: 12px;
  744. padding-top: 12px;
  745. }
  746. #views-ui-preview-form {
  747. margin: 12px;
  748. }
  749. #views-live-preview {
  750. margin: 0 12px;
  751. }
  752. #views-live-preview .views-query-info {
  753. overflow: auto;
  754. }
  755. /* Intentionally targeting h1 */
  756. #views-live-preview h1.section-title {
  757. color: #818181;
  758. display: inline-block;
  759. font-size: 13px;
  760. font-weight: normal;
  761. line-height: 1.6154;
  762. margin-bottom: 0;
  763. margin-top: 0;
  764. }
  765. #views-live-preview .view > * {
  766. margin-top: 18px;
  767. }
  768. #views-live-preview .preview-section {
  769. border: 1px dashed #dedede;
  770. margin: 0 -5px;
  771. padding: 3px 5px;
  772. }
  773. #views-live-preview li.views-row + li.views-row {
  774. margin-top: 18px;
  775. }
  776. /* The div.views-row is intentional and excludes li.views-row, for example */
  777. #views-live-preview div.views-row + div.views-row {
  778. margin-top: 36px;
  779. }
  780. /* @group Query info table */
  781. .views-query-info table {
  782. border-collapse: separate;
  783. border-color: #ddd;
  784. border-spacing: 0;
  785. margin: 10px 0;
  786. }
  787. .views-query-info table tr {
  788. background-color: #f9f9f9;
  789. }
  790. .views-query-info table th,
  791. .views-query-info table td {
  792. color: #666;
  793. padding: 4px 10px;
  794. }
  795. /* @end */
  796. /* @group Grid */
  797. #views-live-preview .views-view-grid th,
  798. #views-live-preview .views-view-grid td {
  799. vertical-align: top;
  800. }
  801. /* @end */
  802. /* @group HTML list */
  803. #views-live-preview .view-content > .item-list > ul {
  804. list-style-position: outside;
  805. padding-left: 21px; /* LTR */
  806. }
  807. /* @end */
  808. /* @end */
  809. /* @group Add/edit argument form */
  810. #edit-options-default-action {
  811. width: 300px;
  812. float: left;
  813. }
  814. #edit-options-exception.collapsible {
  815. float: right;
  816. width: 250px;
  817. margin-top: -2px;
  818. }
  819. /* @end */
  820. /* @group AJAX */
  821. /* Hide the drupal system throbber image */
  822. .ajax-progress .throbber {
  823. display: none;
  824. }
  825. .ajax-progress-throbber {
  826. background-color: #232323;
  827. background-image: url('../images/loading-small.gif');
  828. background-position: center center;
  829. background-repeat: no-repeat;
  830. -moz-border-radius: 7px;
  831. -webkit-border-radius: 7px;
  832. border-radius: 7px;
  833. height: 24px;
  834. opacity: .9;
  835. padding: 4px;
  836. width: 24px;
  837. }
  838. /* @end */
  839. /* @group Drupal
  840. *
  841. * Overrides to Drupal system CSS
  842. */
  843. div.messages {
  844. margin-bottom: 18px;
  845. }
  846. /* @end */