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 > fieldset > legend,
.views-display-deleted .fieldset-wrapper > .views-ui-display-tab-bucket > *,
.views-display-deleted .views-display-columns {
  opacity: 0.25;
}

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

.views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions {
  opacity: 1.0;
}
/* @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 details collapsible fieldset */

.views-display-tab .fieldset-legend {
  left: -5px; /* LTR */
  position: relative;
}

.views-display-tab .fieldset-wrapper {
  position: relative;
}

/* @end */

/* @group Attachment details actions
 *
 * Display the "Delete" and "Duplicate" buttons to the right.
 */
.views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions {
  position: absolute;
  right: 0; /* LTR */
  top: -5px;
}

/* @end */

/* @group Attachment configuration columns */

.views-display-columns > * {
  float: left; /* LTR */
  margin-left: 1%; /* LTR */
  padding-left: 1%; /* LTR */
  width: 32%;
}

.views-display-columns > *:first-child {
  margin-left: 0; /* LTR */
  padding-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 */

File

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 > fieldset > legend,

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

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

  146.   opacity: 0.25;

  147. }

  148. 

  149. .views-display-disabled > fieldset > legend,

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

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

  152.   opacity: 0.5;

  153. }

  154. 

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

  156.   opacity: 1.0;

  157. }

  158. /* @end */

  159. 

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

  161. 

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

  163.   position: relative;

  164. }

  165. 

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

  167.   left: 0; /* LTR */

  168.   margin: 0;

  169.   position: absolute;

  170.   top: 23px;

  171.   z-index: 50;

  172. }

  173. 

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

  175.   display: block;

  176. }

  177. 

  178. /* @end */

  179. 

  180. /* @group Attachment details collapsible fieldset */

  181. 

  182. .views-display-tab .fieldset-legend {

  183.   left: -5px; /* LTR */

  184.   position: relative;

  185. }

  186. 

  187. .views-display-tab .fieldset-wrapper {

  188.   position: relative;

  189. }

  190. 

  191. /* @end */

  192. 

  193. /* @group Attachment details actions

  194.  *

  195.  * Display the "Delete" and "Duplicate" buttons to the right.

  196.  */

  197. .views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions {

  198.   position: absolute;

  199.   right: 0; /* LTR */

  200.   top: -5px;

  201. }

  202. 

  203. /* @end */

  204. 

  205. /* @group Attachment configuration columns */

  206. 

  207. .views-display-columns > * {

  208.   float: left; /* LTR */

  209.   margin-left: 1%; /* LTR */

  210.   padding-left: 1%; /* LTR */

  211.   width: 32%;

  212. }

  213. 

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

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

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

  217. }

  218. 

  219. /* @end */

  220. 

  221. /* @group Modal dialog box */

  222. 

  223. .views-ui-dialog {

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

  225.   overflow: visible;

  226.   position: fixed;

  227. }

  228. 

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

  230.   border: 1px solid transparent;

  231.   display: block;

  232.   margin: 0;

  233.   padding: 0;

  234.   position: absolute;

  235.   right: 0;

  236.   top: 2px;

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

  238.   z-index: 1002;

  239. }

  240. 

  241. .views-ui-dialog .ui-dialog-titlebar {

  242.   padding: 0;

  243.   margin: 0;

  244. }

  245. 

  246. .views-ui-dialog .ui-dialog-title {

  247.   display: none;

  248. }

  249. 

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

  251.   padding: 0;

  252.   overflow: hidden;

  253. }

  254. 

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

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

  257.   margin: 0;

  258.   padding: 0;

  259. }

  260. 

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

  262.   overflow: hidden;

  263. }

  264. 

  265. .views-ui-dialog .scroll {

  266.   max-height: 400px;

  267.   overflow: auto;

  268. }

  269. 

  270. #views-filterable-options-controls {

  271.   display: none;

  272. }

  273. 

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

  275.   display: block;

  276. }

  277. 

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

  279. .views-ui-dialog .views-messages {

  280.   max-height: 200px;

  281.   overflow: auto;

  282. }

  283. 

  284. /* @end */

  285. 

  286. /* @group Settings forms */

  287. 

  288. .views-display-setting .label,

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

  290.   display: inline-block;

  291.   float: left; /* LTR */

  292. }

  293. 

  294. /* @end */

  295. 

  296. /* @group Filter Settings form */

  297. 

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

  299.   display: none;

  300. }

  301. /* @end */

  302. 

  303. /* @group Drupal overrides */

  304. 

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

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

  307.  * width to 100% prevents this.

  308.  */

  309. #views-ajax-body form {

  310.   width: 100%;

  311. }

  312. 

  313. /* @end */

  314. 

  315. /* @group JavaScript dependent styling */

  316. 

  317. .js-only {

  318.   display: none;

  319. }

  320. 

  321. html.js .js-only {

  322.   display: inherit;

  323. }

  324. 

  325. html.js span.js-only {

  326.   display: inline;

  327. }

  328. 

  329. /* @end */

  330. 

  331. /* @group AJAX throbber */

  332. 

  333. /* Base Page */

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

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

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

  337.   left: 49%;

  338.   position: fixed;

  339.   top: 48.5%;

  340.   z-index: 1000;

  341. }

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

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

  344.   display: none;

  345. }

  346. 

  347. /* Modal */

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

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

  350.   left: 49%;

  351.   position: fixed;

  352.   top: 48.5%;

  353.   z-index: 1000;

  354. }

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

  356.   display: none;

  357. }

  358. 

  359. /* @end */