You are here

Home » API reference » Drupal 9

system.admin.css in Drupal 9

Same filename in this branch
  1. 9 core/modules/system/css/system.admin.css
  2. 9 core/themes/stable9/css/system/system.admin.css
  3. 9 core/themes/stable/css/system/system.admin.css
Same filename and directory in other branches
  1. 8 core/modules/system/css/system.admin.css
  2. 10 core/modules/system/css/system.admin.css

Styles for administration pages.

File

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

  2.  * @file

  3.  * Styles for administration pages.

  4.  */

  5. 

  6. /**

  7.  * Reusable layout styles.

  8.  */

  9. .layout-container {

  10.   margin: 0 1.5em;

  11. }

  12. .layout-container:after {

  13.   display: table;

  14.   clear: both;

  15.   content: "";

  16. }

  17. 

  18. @media screen and (min-width: 38em) {

  19.   .layout-container {

  20.     margin: 0 2.5em;

  21.   }

  22.   .layout-column {

  23.     float: left;  /* LTR */

  24.     box-sizing: border-box;

  25.   }

  26.   [dir="rtl"] .layout-column {

  27.     float: right;

  28.   }

  29.   .layout-column + .layout-column {

  30.     padding-left: 10px; /* LTR */

  31.   }

  32.   [dir="rtl"] .layout-column + .layout-column {

  33.     padding-right: 10px;

  34.     padding-left: 0;

  35.   }

  36.   .layout-column--half {

  37.     width: 50%;

  38.   }

  39.   .layout-column--quarter {

  40.     width: 25%;

  41.   }

  42.   .layout-column--three-quarter {

  43.     width: 75%;

  44.   }

  45. }

  46. 

  47. /**

  48.  * Panel.

  49.  * Used to visually group items together.

  50.  */

  51. .panel {

  52.   padding: 5px 5px 15px;

  53. }

  54. .panel__description {

  55.   margin: 0 0 3px;

  56.   padding: 2px 0 3px 0;

  57. }

  58. 

  59. /**

  60.  * System compact link: to toggle the display of description text.

  61.  */

  62. .compact-link {

  63.   margin: 0 0 0.5em 0;

  64. }

  65. 

  66. /**

  67.  * Quick inline admin links.

  68.  */

  69. small .admin-link:before {

  70.   content: " [";

  71. }

  72. small .admin-link:after {

  73.   content: "]";

  74. }

  75. 

  76. /**

  77.  * Modules page.

  78.  */

  79. .system-modules thead > tr {

  80.   border: 0;

  81. }

  82. .system-modules div.incompatible {

  83.   font-weight: bold;

  84. }

  85. .system-modules td.checkbox {

  86.   width: 4%;

  87.   min-width: 25px;

  88. }

  89. .system-modules td.module {

  90.   width: 25%;

  91. }

  92. .system-modules td {

  93.   vertical-align: top;

  94. }

  95. .system-modules label,

  96. .system-modules-uninstall label {

  97.   color: #1d1d1d;

  98.   font-size: 1.15em;

  99. }

  100. .system-modules details {

  101.   color: #5c5c5b;

  102.   line-height: 20px;

  103. }

  104. .system-modules details[open] {

  105.   overflow: visible;

  106.   height: auto;

  107.   white-space: normal;

  108. }

  109. .system-modules details[open] summary .text {

  110.   text-transform: none;

  111.   -webkit-hyphens: auto;

  112.   -moz-hyphens: auto;

  113.   -ms-hyphens: auto;

  114.   hyphens: auto;

  115. }

  116. .system-modules td details a {

  117.   color: #5c5c5b;

  118.   border: 0;

  119. }

  120. .system-modules td details {

  121.   margin: 0;

  122.   border: 0;

  123. }

  124. .system-modules td details summary {

  125.   padding: 0;

  126.   cursor: default;

  127.   text-transform: none;

  128.   font-weight: normal;

  129. }

  130. .system-modules td {

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

  132. }

  133. [dir="rtl"] .system-modules td {

  134.   padding-right: 0;

  135.   padding-left: 12px;

  136. }

  137. 

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

  139.   .system-modules td.name {

  140.     width: 20%;

  141.   }

  142.   .system-modules td.description {

  143.     width: 40%;

  144.   }

  145. }

  146. .system-modules .requirements {

  147.   max-width: 490px;

  148.   padding: 5px 0;

  149. }

  150. .system-modules .links {

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

  152. }

  153. .system-modules .checkbox {

  154.   margin: 0 5px;

  155. }

  156. .system-modules .checkbox .form-item {

  157.   margin-bottom: 0;

  158. }

  159. .admin-requirements,

  160. .admin-required {

  161.   color: #666;

  162.   font-size: 0.9em;

  163. }

  164. .admin-enabled {

  165.   color: #080;

  166. }

  167. .admin-missing {

  168.   color: #f00;

  169. }

  170. .module-link {

  171.   display: block;

  172.   float: left; /* LTR */

  173.   margin-top: 2px;

  174.   padding: 2px 20px;

  175.   white-space: nowrap;

  176. }

  177. [dir="rtl"] .module-link {

  178.   float: right;

  179. }

  180. .module-link-help {

  181.   background: url(../../../misc/icons/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */

  182. }

  183. [dir="rtl"] .module-link-help {

  184.   background-position: top 50% right 0;

  185. }

  186. .module-link-permissions {

  187.   background: url(../../../misc/icons/787878/key.svg) 0 50% no-repeat; /* LTR */

  188. }

  189. [dir="rtl"] .module-link-permissions {

  190.   background-position: top 50% right 0;

  191. }

  192. .module-link-configure {

  193.   background: url(../../../misc/icons/787878/cog.svg) 0 50% no-repeat; /* LTR */

  194. }

  195. [dir="rtl"] .module-link-configure {

  196.   background-position: top 50% right 0;

  197. }

  198. 

  199. /* Status report. */

  200. .system-status-report__status-title {

  201.   position: relative;

  202.   box-sizing: border-box;

  203.   width: 100%;

  204.   padding: 10px 6px 10px 40px; /* LTR */

  205.   vertical-align: top;

  206.   background-color: transparent;

  207.   font-weight: normal;

  208. }

  209. [dir="rtl"] .system-status-report__status-title {

  210.   padding: 10px 40px 10px 6px;

  211. }

  212. .system-status-report__status-icon:before {

  213.   position: absolute;

  214.   top: 12px;

  215.   left: 12px; /* LTR */

  216.   display: block;

  217.   width: 16px;

  218.   height: 16px;

  219.   content: "";

  220.   background-repeat: no-repeat;

  221. }

  222. [dir="rtl"] .system-status-report__status-icon:before {

  223.   right: 12px;

  224.   left: auto;

  225. }

  226. .system-status-report__status-icon--error:before {

  227.   background-image: url(../../../misc/icons/e32700/error.svg);

  228. }

  229. .system-status-report__status-icon--warning:before {

  230.   background-image: url(../../../misc/icons/e29700/warning.svg);

  231. }

  232. .system-status-report__entry__value {

  233.   padding: 1em 0.5em;

  234. }

  235. 

  236. /**

  237.  * Appearance page.

  238.  */

  239. .theme-info__header {

  240.   margin-bottom: 0;

  241.   font-weight: normal;

  242. }

  243. .theme-default .theme-info__header {

  244.   font-weight: bold;

  245. }

  246. .theme-info__description {

  247.   margin-top: 0;

  248. }

  249. .system-themes-list {

  250.   margin-bottom: 20px;

  251. }

  252. .system-themes-list-uninstalled {

  253.   padding-top: 20px;

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

  255. }

  256. .system-themes-list__header {

  257.   margin: 0;

  258. }

  259. 

  260. .theme-selector {

  261.   padding-top: 20px;

  262. }

  263. .theme-selector .screenshot,

  264. .theme-selector .no-screenshot {

  265.   max-width: 100%;

  266.   height: auto;

  267.   padding: 2px;

  268.   text-align: center;

  269.   vertical-align: bottom;

  270.   border: 1px solid #e0e0d8;

  271. }

  272. .theme-default .screenshot {

  273.   border: 1px solid #aaa;

  274. }

  275. .system-themes-list-uninstalled .screenshot,

  276. .system-themes-list-uninstalled .no-screenshot {

  277.   max-width: 194px;

  278.   height: auto;

  279. }

  280. 

  281. /**

  282.  * Theme display without vertical toolbar.

  283.  */

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

  285.   body:not(.toolbar-vertical) .system-themes-list-installed .screenshot,

  286.   body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot {

  287.     float: left; /* LTR */

  288.     width: 294px;

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

  290.   }

  291.   [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .screenshot,

  292.   [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot {

  293.     float: right;

  294.     margin: 0 0 0 20px;

  295.   }

  296.   body:not(.toolbar-vertical) .system-themes-list-installed .system-themes-list__header {

  297.     margin-top: 0;

  298.   }

  299.   body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector {

  300.     float: left; /* LTR */

  301.     box-sizing: border-box;

  302.     width: 31.25%;

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

  304.   }

  305.   [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector {

  306.     float: right;

  307.     padding: 20px 0 20px 20px;

  308.   }

  309.   body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-info {

  310.     min-height: 170px;

  311.   }

  312. }

  313. 

  314. /**

  315.  * Theme display with vertical toolbar.

  316.  */

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

  318.   .toolbar-vertical .system-themes-list-installed .screenshot,

  319.   .toolbar-vertical .system-themes-list-installed .no-screenshot {

  320.     float: left; /* LTR */

  321.     width: 294px;

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

  323.   }

  324.   [dir="rtl"] .toolbar-vertical .system-themes-list-installed .screenshot,

  325.   [dir="rtl"] .toolbar-vertical .system-themes-list-installed .no-screenshot {

  326.     float: right;

  327.     margin: 0 0 0 20px;

  328.   }

  329.   .toolbar-vertical .system-themes-list-installed .theme-info__header {

  330.     margin-top: 0;

  331.   }

  332.   .toolbar-vertical .system-themes-list-uninstalled .theme-selector {

  333.     float: left; /* LTR */

  334.     box-sizing: border-box;

  335.     width: 31.25%;

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

  337.   }

  338.   [dir="rtl"] .toolbar-vertical .system-themes-list-uninstalled .theme-selector {

  339.     float: right;

  340.     padding: 20px 0 20px 20px;

  341.   }

  342.   .toolbar-vertical .system-themes-list-uninstalled .theme-info {

  343.     min-height: 170px;

  344.   }

  345. }

  346. .system-themes-list-installed .theme-info {

  347.   max-width: 940px;

  348. }

  349. 

  350. .theme-selector .incompatible {

  351.   margin-top: 10px;

  352.   font-weight: bold;

  353. }

  354. .theme-selector .operations {

  355.   margin: 10px 0 0 0;

  356.   padding: 0;

  357. }

  358. .theme-selector .operations li {

  359.   float: left; /* LTR */

  360.   margin: 0;

  361.   padding: 0 0.7em;

  362.   list-style-type: none;

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

  364. }

  365. [dir="rtl"] .theme-selector .operations li {

  366.   float: right;

  367.   border-right: none;

  368.   border-left: 1px solid #cdcdcd;

  369. }

  370. .theme-selector .operations li:last-child {

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

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

  373. }

  374. [dir="rtl"] .theme-selector .operations li:last-child {

  375.   padding: 0 0.7em 0 0;

  376.   border-left: none;

  377. }

  378. .theme-selector .operations li:first-child {

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

  380. }

  381. [dir="rtl"] .theme-selector .operations li:first-child {

  382.   padding: 0 0 0 0.7em;

  383. }

  384. .system-themes-admin-form {

  385.   clear: left; /* LTR */

  386. }

  387. [dir="rtl"] .system-themes-admin-form {

  388.   clear: right;

  389. }

  390. .cron-description__run-cron {

  391.   display: block;

  392. }

  393. 

  394. .system-cron-settings__link {

  395.   overflow-wrap: break-word;

  396.   word-wrap: break-word;

  397. }