views_ui.admin.css 

/**
 * The .admin.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 {
}

.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: inline;
}

/* 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;
}
.js .views-edit-view .dropbutton-wrapper {
  width: auto;
}

File

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

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

  3.  * declarations. 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. }

  108. 

  109. .views-displays {

  110.   clear: both;

  111. }

  112. 

  113. /* @end */

  114. 

  115. /* @group Attachment details tabs

  116.  *

  117.  * The tabs that switch between sections

  118.  */

  119.  .views-displays .secondary {

  120.    border-bottom: 0 none;

  121.    margin: 0;

  122.    overflow: visible;

  123.    padding: 0;

  124.  }

  125. 

  126. .views-displays .secondary > li {

  127.   border-right: 0 none;

  128.   display: inline-block;

  129.   float: left; /* LTR */

  130.   padding: 0;

  131. }

  132. 

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

  134.   position: relative;

  135.   z-index: 51;

  136. }

  137. 

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

  139.   text-decoration: line-through;

  140. }

  141. 

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

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

  144. .views-display-deleted .views-display-columns {

  145.   opacity: 0.25;

  146. }

  147. 

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

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

  150. .views-display-disabled .views-display-columns {

  151.   opacity: 0.5;

  152. }

  153. 

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

  155.   opacity: 1.0;

  156. }

  157. 

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

  159.   border-top: none;

  160. }

  161. 

  162. /* @end */

  163. 

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

  165. 

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

  167.   position: relative;

  168. }

  169. 

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

  171.   left: 0; /* LTR */

  172.   margin: 0;

  173.   position: absolute;

  174.   top: 23px;

  175.   z-index: 50;

  176. }

  177. 

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

  179.   display: block;

  180. }

  181. 

  182. /* @end */

  183. 

  184. /* @group Attachment collapsible details */

  185. 

  186. .views-display-columns details {

  187.   border: none;

  188.   margin: 0;

  189.   padding: 0;

  190. }

  191. 

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

  193.   padding: 0;

  194. }

  195. 

  196. .views-display-column {

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

  198.   box-sizing: border-box;

  199. }

  200. 

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

  202.   height: auto;

  203. }

  204. 

  205. /* @end */

  206. 

  207. /* @group Attachment configuration columns */

  208. 

  209. .views-display-columns > * {

  210.   margin-bottom: 2em;

  211. }

  212. 

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

  214.   .views-display-columns > * {

  215.     float: left; /* LTR */

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

  217.     margin-bottom: 0;

  218.     width: 32%;

  219.   }

  220. 

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

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

  223.   }

  224. }

  225. 

  226. /* @end */

  227. 

  228. /* @group Modal dialog box */

  229. 

  230. .views-ui-dialog {

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

  232.   overflow: visible;

  233.   position: fixed;

  234. }

  235. 

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

  237.   border: 1px solid transparent;

  238.   display: block;

  239.   margin: 0;

  240.   padding: 0;

  241.   position: absolute;

  242.   right: 0;

  243.   top: 2px;

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

  245.   z-index: 1002;

  246. }

  247. 

  248. .views-ui-dialog .ui-dialog-titlebar {

  249.   padding: 0;

  250.   margin: 0;

  251. }

  252. 

  253. .views-ui-dialog .ui-dialog-title {

  254.   display: none;

  255. }

  256. 

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

  258.   padding: 0;

  259.   overflow: hidden;

  260. }

  261. 

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

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

  264.   margin: 0;

  265.   padding: 0;

  266. }

  267. 

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

  269.   overflow: hidden;

  270. }

  271. 

  272. .views-ui-dialog .scroll {

  273.   max-height: 400px;

  274.   overflow: auto;

  275. }

  276. 

  277. #views-filterable-options-controls {

  278.   display: none;

  279. }

  280. 

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

  282.   display: inline;

  283. }

  284. 

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

  286. .views-ui-dialog .views-messages {

  287.   max-height: 200px;

  288.   overflow: auto;

  289. }

  290. 

  291. /* @end */

  292. 

  293. /* @group Settings forms */

  294. 

  295. .views-display-setting .label,

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

  297.   display: inline-block;

  298.   float: left; /* LTR */

  299. }

  300. 

  301. /* @end */

  302. 

  303. /* @group Filter Settings form */

  304. 

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

  306.   display: none;

  307. }

  308. /* @end */

  309. 

  310. /* @group Drupal overrides */

  311. 

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

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

  314.  * width to 100% prevents this.

  315.  */

  316. #views-ajax-body form {

  317.   width: 100%;

  318. }

  319. 

  320. /* @end */

  321. 

  322. /* @group Javascript dependent styling */

  323. 

  324. .js-only {

  325.   display: none;

  326. }

  327. 

  328. html.js .js-only {

  329.   display: inherit;

  330. }

  331. 

  332. html.js span.js-only {

  333.   display: inline;

  334. }

  335. 

  336. /* @end */

  337. 

  338. /* @group AJAX throbber */

  339. 

  340. /* Base Page */

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

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

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

  344.   left: 49%;

  345.   position: fixed;

  346.   top: 48.5%;

  347.   z-index: 1000;

  348. }

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

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

  351.   display: none;

  352. }

  353. 

  354. /* Modal */

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

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

  357.   left: 49%;

  358.   position: fixed;

  359.   top: 48.5%;

  360.   z-index: 1000;

  361. }

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

  363.   display: none;

  364. }

  365. 

  366. /* @end */

  367. 

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

  369.   position: static;

  370. }

  371. .js .views-edit-view .dropbutton-wrapper {

  372.   width: auto;

  373. }