system.admin.css

Styles for administration pages.

File

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

  2.  * @file

  3.  * Styles for administration pages.

  4.  */

  5. 

  6. /**

  7.  * Administration blocks.

  8.  */

  9. div.admin-panel {

  10.   margin: 0;

  11.   padding: 5px 5px 15px 5px;

  12. }

  13. div.admin-panel .description {

  14.   margin: 0 0 3px;

  15.   padding: 2px 0 3px 0;

  16. }

  17. div.admin-panel .body {

  18.   padding: 0 4px 2px 8px; /* LTR */

  19. }

  20. div.admin {

  21.   padding-top: 15px;

  22. }

  23. @media screen and (min-width: 40em) {

  24.   div.admin .left {

  25.     float: left; /* LTR */

  26.     width: 47%;

  27.     margin-left: 1em; /* LTR */

  28.   }

  29.   div.admin .right {

  30.     float: right; /* LTR */

  31.     width: 47%;

  32.     margin-right: 1em; /* LTR */

  33.   }

  34. }

  35. div.admin .expert-link {

  36.   text-align: right; /* LTR */

  37.   margin-right: 1em; /* LTR */

  38.   padding-right: 4px; /* LTR */

  39. }

  40. 

  41. /**

  42.  * Markup generated by theme_system_compact_link().

  43.  */

  44. .compact-link {

  45.   margin: 0 0 0.5em 0;

  46. }

  47. 

  48. /**

  49.  * Quick inline admin links.

  50.  */

  51. small .admin-link:before {

  52.   content: '[';

  53. }

  54. small .admin-link:after {

  55.   content: ']';

  56. }

  57. 

  58. /**

  59.  * Modules page.

  60.  */

  61. #system-modules table {

  62.   table-layout: fixed;

  63. }

  64. #system-modules div.incompatible {

  65.   font-weight: bold;

  66. }

  67. #system-modules th.checkbox {

  68.   width: 4%;

  69. }

  70. #system-modules th.name {

  71.   width: 25%;

  72. }

  73. #system-modules td {

  74.   vertical-align: top;

  75. }

  76. #system-modules .expand .inner {

  77.   background: transparent url(../../../misc/menu-collapsed.png) left .6em no-repeat;

  78.   margin-left: -12px;

  79.   padding-left: 12px;

  80. }

  81. #system-modules .expanded .expand .inner {

  82.   background: transparent url(../../../misc/menu-expanded.png) left .6em no-repeat;

  83. }

  84. #system-modules label {

  85.   color: #1d1d1d;

  86.   font-size: 1.15em;

  87. }

  88. #system-modules .description {

  89.   cursor: pointer;

  90. }

  91. #system-modules .description .inner {

  92.   color: #5c5c5b;

  93.   height: 20px;

  94.   line-height: 20px;

  95.   overflow: hidden; /* truncates descriptions if too long */

  96.   text-overflow: ellipsis;

  97.   white-space: nowrap;

  98. }

  99. #system-modules .expanded .description .inner {

  100.   height: auto;

  101.   overflow: visible;

  102.   white-space: normal;

  103. }

  104. #system-modules .expanded .description .text {

  105.   -webkit-hyphens: auto;

  106.   -moz-hyphens: auto;

  107.   hyphens: auto;

  108. }

  109. 

  110. @media screen and (max-width: 40em) {

  111.   #system-modules th.name {

  112.     width: 20%;

  113.   }

  114.   #system-modules th.description {

  115.     width: 40%;

  116.   }

  117. }

  118. #system-modules .requirements {

  119.   padding: 5px 0;

  120.   max-width: 490px;

  121. }

  122. #system-modules .links {

  123.   overflow: hidden; /* prevents collapse */

  124. }

  125. #system-modules .checkbox {

  126.   margin: 0 5px;

  127. }

  128. #system-modules .checkbox .form-item {

  129.   margin-bottom: 0;

  130. }

  131. div.admin-requirements,

  132. div.admin-required {

  133.   font-size: 0.9em;

  134.   color: #666;

  135. }

  136. span.admin-disabled {

  137.   color: #800;

  138. }

  139. span.admin-enabled {

  140.   color: #080;

  141. }

  142. span.admin-missing {

  143.   color: #f00;

  144. }

  145. a.module-link {

  146.   display: block;

  147.   padding: 2px 20px;

  148.   white-space: nowrap;

  149.   margin-top: 2px;

  150.   float: left; /* LTR */

  151. }

  152. a.module-link-help {

  153.   background: url(../../../misc/help.png) 0 50% no-repeat; /* LTR */

  154. }

  155. a.module-link-permissions {

  156.   background: url(../../../misc/permissions.png) 0 50% no-repeat; /* LTR */

  157. }

  158. a.module-link-configure {

  159.   background: url(../../../misc/configure.png) 0 50% no-repeat; /* LTR */

  160. }

  161. .module-help {

  162.   margin-left: 1em; /* LTR */

  163.   float: right; /* LTR */

  164. }

  165. 

  166. /**

  167.  * Status report.

  168.  */

  169. table.system-status-report td {

  170.   padding: 6px;

  171.   vertical-align: top;

  172. }

  173. table.system-status-report td:nth-child(-n+2) {

  174.   background-color: rgba(0, 0, 0, 0.04);

  175. }

  176. table.system-status-report td.status-icon {

  177.   width: 16px;

  178.   padding-right: 0; /* LTR */

  179. }

  180. table.system-status-report td.status-icon div {

  181.   background-repeat: no-repeat;

  182.   height: 16px;

  183.   width: 16px;

  184. }

  185. table.system-status-report tr.error td.status-icon div {

  186.   background-image: url(../../../misc/message-16-error.png);

  187. }

  188. table.system-status-report tr.warning td.status-icon div {

  189.   background-image: url(../../../misc/message-16-warning.png);

  190. }

  191. table.system-status-report .status-title {

  192.   width: 25%;

  193. }

  194. 

  195. /**

  196.  * Theme settings.

  197.  */

  198. .theme-settings-left {

  199.   float: left;

  200.   width: 49%;

  201. }

  202. .theme-settings-right {

  203.   float: right;

  204.   width: 49%;

  205. }

  206. .theme-settings-bottom {

  207.   clear: both;

  208. }

  209. 

  210. /**

  211.  * Appearance page.

  212.  */

  213. .theme-info h2 {

  214.   margin-bottom: 0;

  215. }

  216. .theme-info p {

  217.   margin-top: 0;

  218. }

  219. .system-themes-list {

  220.   margin-bottom: 20px;

  221. }

  222. .system-themes-list-disabled {

  223.   border-top: 1px solid #cdcdcd;

  224.   padding-top: 20px;

  225. }

  226. .system-themes-list h2 {

  227.   margin: 0;

  228. }

  229. .theme-selector {

  230.   padding-top: 20px;

  231. }

  232. .theme-selector .screenshot,

  233. .theme-selector .no-screenshot {

  234.   border: 1px solid #e0e0d8;

  235.   padding: 2px;

  236.   vertical-align: bottom;

  237.   max-width: 100%;

  238.   height: auto;

  239.   text-align: center;

  240. }

  241. .theme-selector .no-screenshot {

  242.   display: none;

  243. }

  244. .theme-default .screenshot {

  245.   border: 1px solid #aaa;

  246. }

  247. .system-themes-list-disabled .screenshot,

  248. .system-themes-list-disabled .no-screenshot {

  249.   max-width: 194px;

  250.   height: auto;

  251. }

  252. .theme-selector h3 {

  253.   font-weight: normal;

  254. }

  255. .theme-default h3 {

  256.   font-weight: bold;

  257. }

  258. 

  259. /**

  260. * Theme display without vertical toolbar.

  261. */

  262. @media screen and (min-width: 45em) {

  263.   body:not(.toolbar-vertical) .system-themes-list-enabled .screenshot,

  264.   body:not(.toolbar-vertical) .system-themes-list-enabled .no-screenshot {

  265.     float: left; /* LTR */

  266.     margin: 0 20px 0 0; /* LTR */

  267.     width: 294px;

  268.   }

  269.   body:not(.toolbar-vertical) .system-themes-list-enabled h3 {

  270.     margin-top: 0;

  271.   }

  272.   body:not(.toolbar-vertical) .system-themes-list-disabled .theme-selector {

  273.     -webkit-box-sizing: border-box;

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

  275.     box-sizing: border-box;

  276.     width: 31.25%;

  277.     float: left; /* LTR */

  278.     padding: 20px 20px 20px 0; /* LTR */

  279.   }

  280.   body:not(.toolbar-vertical) .system-themes-list-disabled .theme-info {

  281.     min-height: 170px;

  282.   }

  283.   body:not(.toolbar-vertical) .no-screenshot {

  284.     display: block;

  285.     padding-bottom: 57%;

  286.     position: relative;

  287.   }

  288.   body:not(.toolbar-vertical) .no-screenshot__text {

  289.     margin-top: -0.76em;

  290.     position: absolute;

  291.     top: 50%;

  292.     width: 100%;

  293.   }

  294. }

  295. 

  296. /**

  297. * Theme display with vertical toolbar.

  298. */

  299. @media screen and (min-width: 60em) {

  300.   .toolbar-vertical .system-themes-list-enabled .screenshot,

  301.   .toolbar-vertical .system-themes-list-enabled .no-screenshot {

  302.     float: left; /* LTR */

  303.     margin: 0 20px 0 0; /* LTR */

  304.     width: 294px;

  305.   }

  306.   .toolbar-vertical .system-themes-list-enabled h3 {

  307.     margin-top: 0;

  308.   }

  309.   .toolbar-vertical .system-themes-list-disabled .theme-selector {

  310.     -webkit-box-sizing: border-box;

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

  312.     box-sizing: border-box;

  313.     width: 31.25%;

  314.     float: left; /* LTR */

  315.     padding: 20px 20px 20px 0; /* LTR */

  316.   }

  317.   .toolbar-vertical .system-themes-list-disabled .theme-info {

  318.     min-height: 170px;

  319.   }

  320.   .toolbar-vertical .no-screenshot {

  321.     display: block;

  322.     padding-bottom: 57%;

  323.     position: relative;

  324.   }

  325.   .toolbar-vertical .no-screenshot__text {

  326.     margin-top: -0.76em;

  327.     position: absolute;

  328.     top: 50%;

  329.     width: 100%;

  330.   }

  331. }

  332. .system-themes-list-enabled .theme-info {

  333.   max-width: 940px;

  334. }

  335. 

  336. .theme-selector .incompatible {

  337.   margin-top: 10px;

  338.   font-weight: bold;

  339. }

  340. .theme-selector .operations {

  341.   margin: 10px 0 0 0;

  342.   padding: 0;

  343. }

  344. .theme-selector .operations li {

  345.   float: left; /* LTR */

  346.   margin: 0;

  347.   padding: 0 0.7em;

  348.   list-style-type: none;

  349.   border-right: 1px solid #cdcdcd;  /* LTR */

  350. }

  351. .theme-selector .operations li.last {

  352.   padding: 0 0 0 0.7em; /* LTR */

  353.   border-right: none; /* LTR */

  354. }

  355. .theme-selector .operations li.first {

  356.   padding: 0 0.7em 0 0; /* LTR */

  357. }

  358. #system-themes-admin-form {

  359.   clear: left;

  360. }

  361. 

  362. /**

  363.  * Exposed filters.

  364.  */

  365. .exposed-filters .filters {

  366.   float: left; /* LTR */

  367.   margin-right: 1em; /* LTR */

  368. }

  369. .exposed-filters .form-item {

  370.   margin: 0 0 0.1em 0;

  371.   padding: 0;

  372. }

  373. .exposed-filters .form-item label {

  374.   float: left; /* LTR */

  375.   font-weight: normal;

  376.   width: 10em;

  377. }

  378. .exposed-filters .form-select {

  379.   width: 14em;

  380. }

  381. /* Current filters */

  382. .exposed-filters .current-filters {

  383.   margin-bottom: 1em;

  384. }

  385. .exposed-filters .current-filters .placeholder {

  386.   font-style: normal;

  387.   font-weight: bold;

  388. }

  389. .exposed-filters .additional-filters {

  390.   float: left; /* LTR */

  391.   margin-right: 1em; /* LTR */

  392. }