views-admin.css 

/**
 * The .css file is intended to only contain positioning and size declarations
 * For example: display, position, float, clear, and overflow.
 */

/* @group Resets */

.views-admin ul,
.views-admin menu,
.views-admin dir {
  padding-left: 0; /* LTR for IE */
  /* padding-start is used so that RTL works out of the box */
  -moz-padding-start: 0;
  -webkit-padding-start: 0;
  padding-start: 0;
}

.views-admin pre {
  margin-bottom: 0;
  margin-top: 0;
  white-space: pre-wrap;
}

/* @end */

/* @group Inline lists */

.horizontal > * {
  clear: none;
  float: left; /* LTR */
}

.horizontal.right {
  float: right;
}

.horizontal label {
  position: absolute;
}

.horizontal .form-item > [class] {
  margin-top: 25px;
}

.horizontal .form-item > [class] + [class] {
  margin-top: 0;
}

/* @end */

/* @group Columns */

.views-left-25 {
  float: left;
  width: 25%;
}

.views-left-30 {
  float: left;
  width: 30%;
}

.views-left-40 {
  float: left;
  width: 40%;
}

.views-left-50 {
  float: left;
  width: 50%;
}

.views-left-75 {
  float: left;
  width: 75%;
}

.views-right-50 {
  float: right;
  width: 50%;
}

.views-right-60 {
  float: right;
  width: 60%;
}

.views-right-70 {
  float: right;
  width: 70%;
}

.views-group-box .form-item {
  margin-left: 3px;
  margin-right: 3px;
}

/* @end */

/* @group Attachment details
 *
 * The attachment details section, its tabs for each section and the buttons
 * to add a new section
 */

.form-edit .form-actions {
  float: right; /* LTR */
}

.views-displays {
  clear: both;
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 */
 .views-displays .secondary {
   border-bottom: 0 none;
   margin: 0;
   overflow: visible;
   padding: 0;
 }

.views-displays .secondary > li {
  border-right: 0 none;
  display: inline-block;
  float: left; /* LTR */
  padding: 0;
}

.views-displays .secondary .open > a {
  position: relative;
  z-index: 51;
}

.views-displays .views-display-deleted-link {
  text-decoration: line-through;
}

.views-display-deleted > details > summary,
.views-display-deleted .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-deleted .views-display-columns {
  opacity: 0.25;
}

.views-display-disabled > details > summary,
.views-display-disabled .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-disabled .views-display-columns {
  opacity: 0.5;
}

.views-display-tab .details-wrapper > .views-ui-display-tab-bucket .actions {
  opacity: 1.0;
}

.js .views-ui-display-tab-bucket:first-of-type {
  border-top: none;
}

/* @end */

/* @group Attachment details new section button */

.views-displays .secondary li.add {
  position: relative;
}

.views-displays .secondary .action-list {
  left: 0; /* LTR */
  margin: 0;
  position: absolute;
  top: 23px;
  z-index: 50;
}

.views-displays .secondary .action-list  li {
  display: block;
}

/* @end */

/* @group Attachment collapsible details */

.views-display-columns details {
  border: none;
  margin: 0;
  padding: 0;
}

.views-display-columns .details-wrapper {
  padding: 0;
}

.views-display-column {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.js .views-display-column details.collapsed {
  height: auto;
}

/* @end */

/* @group Attachment configuration columns */

.views-display-columns > * {
  margin-bottom: 2em;
}

@media screen and (min-width:45em) { /* 720px */
  .views-display-columns > * {
    float: left; /* LTR */
    margin-left: 2%; /* LTR */
    margin-bottom: 0;
    width: 32%;
  }

  .views-display-columns > *:first-child {
    margin-left: 0; /* LTR */
  }
}

/* @end */

/* @group Modal dialog box */

.views-ui-dialog {
  /* We need this so the button is visible. */
  overflow: visible;
  position: fixed;
}

.views-ui-dialog .ui-dialog-titlebar-close {
  border: 1px solid transparent;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 2px;
  /* Make sure this is in front of the modal backdrop. */
  z-index: 1002;
}

.views-ui-dialog .ui-dialog-titlebar {
  padding: 0;
  margin: 0;
}

.views-ui-dialog .ui-dialog-title {
  display: none;
}

.views-ui-dialog #views-ajax-popup {
  padding: 0;
  overflow: hidden;
}

.views-ui-dialog #views-ajax-title,
.views-ui-dialog #views-ajax-body {
  margin: 0;
  padding: 0;
}

.views-ui-dialog #views-ajax-popup {
  overflow: hidden;
}

.views-ui-dialog .scroll {
  max-height: 400px;
  overflow: auto;
}

#views-filterable-options-controls {
  display: none;
}

.views-ui-dialog #views-filterable-options-controls {
  display: block;
}

/* Don't let the messages overwhelm the modal */
.views-ui-dialog .views-messages {
  max-height: 200px;
  overflow: auto;
}

/* @end */

/* @group Settings forms */

.views-display-setting .label,
.views-display-setting .views-ajax-link {
  display: inline-block;
  float: left; /* LTR */
}

/* @end */

/* @group Filter Settings form */

div.form-item-options-value-all {
  display: none;
}
/* @end */

/* @group Drupal overrides */

/* The .progress-disabled class added to the form on submit floats the element
 * left and causes the form width to shrink-wrap to the content. Setting the
 * width to 100% prevents this.
 */
#views-ajax-body form {
  width: 100%;
}

/* @end */

/* @group Javascript dependent styling */

.js-only {
  display: none;
}

html.js .js-only {
  display: inherit;
}

html.js span.js-only {
  display: inline;
}

/* @end */

/* @group AJAX throbber */

/* Base Page */
#views-ui-list-page .ajax-progress-throbber,
.views-admin .ajax-progress-throbber {
  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  left: 49%;
  position: fixed;
  top: 48.5%;
  z-index: 1000;
}
#views-ui-list-page .ajax-progress-throbber .message,
.views-admin .ajax-progress-throbber .message {
  display: none;
}

/* Modal */
#views-ajax-popup .ajax-progress-throbber {
  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  left: 49%;
  position: fixed;
  top: 48.5%;
  z-index: 1000;
}
#views-ajax-popup .ajax-progress-throbber .message {
  display: none;
}

/* @end */

.js .views-edit-view .dropbutton-widget {
  position: static;
}

File

drupal/core/modules/views/views_ui/css/views-admin.css
View source
  1. /**

  2.  * The .css file is intended to only contain positioning and size declarations

  3.  * For example: display, position, float, clear, and overflow.

  4.  */

  5. 

  6. /* @group Resets */

  7. 

  8. .views-admin ul,

  9. .views-admin menu,

  10. .views-admin dir {

  11.   padding-left: 0; /* LTR for IE */

  12.   /* padding-start is used so that RTL works out of the box */

  13.   -moz-padding-start: 0;

  14.   -webkit-padding-start: 0;

  15.   padding-start: 0;

  16. }

  17. 

  18. .views-admin pre {

  19.   margin-bottom: 0;

  20.   margin-top: 0;

  21.   white-space: pre-wrap;

  22. }

  23. 

  24. /* @end */

  25. 

  26. /* @group Inline lists */

  27. 

  28. .horizontal > * {

  29.   clear: none;

  30.   float: left; /* LTR */

  31. }

  32. 

  33. .horizontal.right {

  34.   float: right;

  35. }

  36. 

  37. .horizontal label {

  38.   position: absolute;

  39. }

  40. 

  41. .horizontal .form-item > [class] {

  42.   margin-top: 25px;

  43. }

  44. 

  45. .horizontal .form-item > [class] + [class] {

  46.   margin-top: 0;

  47. }

  48. 

  49. /* @end */

  50. 

  51. /* @group Columns */

  52. 

  53. .views-left-25 {

  54.   float: left;

  55.   width: 25%;

  56. }

  57. 

  58. .views-left-30 {

  59.   float: left;

  60.   width: 30%;

  61. }

  62. 

  63. .views-left-40 {

  64.   float: left;

  65.   width: 40%;

  66. }

  67. 

  68. .views-left-50 {

  69.   float: left;

  70.   width: 50%;

  71. }

  72. 

  73. .views-left-75 {

  74.   float: left;

  75.   width: 75%;

  76. }

  77. 

  78. .views-right-50 {

  79.   float: right;

  80.   width: 50%;

  81. }

  82. 

  83. .views-right-60 {

  84.   float: right;

  85.   width: 60%;

  86. }

  87. 

  88. .views-right-70 {

  89.   float: right;

  90.   width: 70%;

  91. }

  92. 

  93. .views-group-box .form-item {

  94.   margin-left: 3px;

  95.   margin-right: 3px;

  96. }

  97. 

  98. /* @end */

  99. 

  100. /* @group Attachment details

  101.  *

  102.  * The attachment details section, its tabs for each section and the buttons

  103.  * to add a new section

  104.  */

  105. 

  106. .form-edit .form-actions {

  107.   float: right; /* LTR */

  108. }

  109. 

  110. .views-displays {

  111.   clear: both;

  112. }

  113. 

  114. /* @end */

  115. 

  116. /* @group Attachment details tabs

  117.  *

  118.  * The tabs that switch between sections

  119.  */

  120.  .views-displays .secondary {

  121.    border-bottom: 0 none;

  122.    margin: 0;

  123.    overflow: visible;

  124.    padding: 0;

  125.  }

  126. 

  127. .views-displays .secondary > li {

  128.   border-right: 0 none;

  129.   display: inline-block;

  130.   float: left; /* LTR */

  131.   padding: 0;

  132. }

  133. 

  134. .views-displays .secondary .open > a {

  135.   position: relative;

  136.   z-index: 51;

  137. }

  138. 

  139. .views-displays .views-display-deleted-link {

  140.   text-decoration: line-through;

  141. }

  142. 

  143. .views-display-deleted > details > summary,

  144. .views-display-deleted .details-wrapper > .views-ui-display-tab-bucket > *,

  145. .views-display-deleted .views-display-columns {

  146.   opacity: 0.25;

  147. }

  148. 

  149. .views-display-disabled > details > summary,

  150. .views-display-disabled .details-wrapper > .views-ui-display-tab-bucket > *,

  151. .views-display-disabled .views-display-columns {

  152.   opacity: 0.5;

  153. }

  154. 

  155. .views-display-tab .details-wrapper > .views-ui-display-tab-bucket .actions {

  156.   opacity: 1.0;

  157. }

  158. 

  159. .js .views-ui-display-tab-bucket:first-of-type {

  160.   border-top: none;

  161. }

  162. 

  163. /* @end */

  164. 

  165. /* @group Attachment details new section button */

  166. 

  167. .views-displays .secondary li.add {

  168.   position: relative;

  169. }

  170. 

  171. .views-displays .secondary .action-list {

  172.   left: 0; /* LTR */

  173.   margin: 0;

  174.   position: absolute;

  175.   top: 23px;

  176.   z-index: 50;

  177. }

  178. 

  179. .views-displays .secondary .action-list  li {

  180.   display: block;

  181. }

  182. 

  183. /* @end */

  184. 

  185. /* @group Attachment collapsible details */

  186. 

  187. .views-display-columns details {

  188.   border: none;

  189.   margin: 0;

  190.   padding: 0;

  191. }

  192. 

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

  194.   padding: 0;

  195. }

  196. 

  197. .views-display-column {

  198.   -moz-box-sizing: border-box;

  199.   box-sizing: border-box;

  200. }

  201. 

  202. .js .views-display-column details.collapsed {

  203.   height: auto;

  204. }

  205. 

  206. /* @end */

  207. 

  208. /* @group Attachment configuration columns */

  209. 

  210. .views-display-columns > * {

  211.   margin-bottom: 2em;

  212. }

  213. 

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

  215.   .views-display-columns > * {

  216.     float: left; /* LTR */

  217.     margin-left: 2%; /* LTR */

  218.     margin-bottom: 0;

  219.     width: 32%;

  220.   }

  221. 

  222.   .views-display-columns > *:first-child {

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

  224.   }

  225. }

  226. 

  227. /* @end */

  228. 

  229. /* @group Modal dialog box */

  230. 

  231. .views-ui-dialog {

  232.   /* We need this so the button is visible. */

  233.   overflow: visible;

  234.   position: fixed;

  235. }

  236. 

  237. .views-ui-dialog .ui-dialog-titlebar-close {

  238.   border: 1px solid transparent;

  239.   display: block;

  240.   margin: 0;

  241.   padding: 0;

  242.   position: absolute;

  243.   right: 0;

  244.   top: 2px;

  245.   /* Make sure this is in front of the modal backdrop. */

  246.   z-index: 1002;

  247. }

  248. 

  249. .views-ui-dialog .ui-dialog-titlebar {

  250.   padding: 0;

  251.   margin: 0;

  252. }

  253. 

  254. .views-ui-dialog .ui-dialog-title {

  255.   display: none;

  256. }

  257. 

  258. .views-ui-dialog #views-ajax-popup {

  259.   padding: 0;

  260.   overflow: hidden;

  261. }

  262. 

  263. .views-ui-dialog #views-ajax-title,

  264. .views-ui-dialog #views-ajax-body {

  265.   margin: 0;

  266.   padding: 0;

  267. }

  268. 

  269. .views-ui-dialog #views-ajax-popup {

  270.   overflow: hidden;

  271. }

  272. 

  273. .views-ui-dialog .scroll {

  274.   max-height: 400px;

  275.   overflow: auto;

  276. }

  277. 

  278. #views-filterable-options-controls {

  279.   display: none;

  280. }

  281. 

  282. .views-ui-dialog #views-filterable-options-controls {

  283.   display: block;

  284. }

  285. 

  286. /* Don't let the messages overwhelm the modal */

  287. .views-ui-dialog .views-messages {

  288.   max-height: 200px;

  289.   overflow: auto;

  290. }

  291. 

  292. /* @end */

  293. 

  294. /* @group Settings forms */

  295. 

  296. .views-display-setting .label,

  297. .views-display-setting .views-ajax-link {

  298.   display: inline-block;

  299.   float: left; /* LTR */

  300. }

  301. 

  302. /* @end */

  303. 

  304. /* @group Filter Settings form */

  305. 

  306. div.form-item-options-value-all {

  307.   display: none;

  308. }

  309. /* @end */

  310. 

  311. /* @group Drupal overrides */

  312. 

  313. /* The .progress-disabled class added to the form on submit floats the element

  314.  * left and causes the form width to shrink-wrap to the content. Setting the

  315.  * width to 100% prevents this.

  316.  */

  317. #views-ajax-body form {

  318.   width: 100%;

  319. }

  320. 

  321. /* @end */

  322. 

  323. /* @group Javascript dependent styling */

  324. 

  325. .js-only {

  326.   display: none;

  327. }

  328. 

  329. html.js .js-only {

  330.   display: inherit;

  331. }

  332. 

  333. html.js span.js-only {

  334.   display: inline;

  335. }

  336. 

  337. /* @end */

  338. 

  339. /* @group AJAX throbber */

  340. 

  341. /* Base Page */

  342. #views-ui-list-page .ajax-progress-throbber,

  343. .views-admin .ajax-progress-throbber {

  344.   /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */

  345.   left: 49%;

  346.   position: fixed;

  347.   top: 48.5%;

  348.   z-index: 1000;

  349. }

  350. #views-ui-list-page .ajax-progress-throbber .message,

  351. .views-admin .ajax-progress-throbber .message {

  352.   display: none;

  353. }

  354. 

  355. /* Modal */

  356. #views-ajax-popup .ajax-progress-throbber {

  357.   /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */

  358.   left: 49%;

  359.   position: fixed;

  360.   top: 48.5%;

  361.   z-index: 1000;

  362. }

  363. #views-ajax-popup .ajax-progress-throbber .message {

  364.   display: none;

  365. }

  366. 

  367. /* @end */

  368. 

  369. .js .views-edit-view .dropbutton-widget {

  370.   position: static;

  371. }