system.theme.css

Basic styling for common markup.

File

drupal/core/modules/system/system.theme.css
View source
  1. /**
  2. * @file
  3. * Basic styling for common markup.
  4. */
  5. /**
  6. * HTML elements.
  7. */
  8. fieldset {
  9. border: 1px solid #ccc;
  10. margin: 1em 0;
  11. padding: 0.5em;
  12. }
  13. form {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. hr {
  18. border: 1px solid gray;
  19. height: 1px;
  20. }
  21. img {
  22. border: 0;
  23. }
  24. table {
  25. border-collapse: collapse;
  26. width: 100%;
  27. }
  28. th {
  29. padding-right: 1em; /* LTR */
  30. text-align: left; /* LTR */
  31. }
  32. thead > tr {
  33. border-bottom: 1px solid #000;
  34. }
  35. tr {
  36. border-bottom: 1px solid #ccc;
  37. padding: 0.1em 0.6em;
  38. }
  39. caption {
  40. text-align: left; /* LTR */
  41. }
  42. /**
  43. * Publishing status.
  44. */
  45. .unpublished {
  46. background-color: #fff4f4;
  47. }
  48. .preview {
  49. background-color: #ffffea;
  50. }
  51. /**
  52. * Markup generated by theme_tablesort_indicator().
  53. */
  54. th.active img {
  55. display: inline;
  56. }
  57. td.active {
  58. background-color: #ddd;
  59. }
  60. /**
  61. * Markup generated by theme_item_list().
  62. */
  63. .item-list .title {
  64. font-weight: bold;
  65. }
  66. .item-list ul {
  67. margin: 0 0 0.75em 0;
  68. padding: 0;
  69. }
  70. .item-list ul li {
  71. margin: 0 0 0.25em 1.5em; /* LTR */
  72. padding: 0;
  73. }
  74. /**
  75. * Markup generated by Form API.
  76. */
  77. .form-item,
  78. .form-actions {
  79. margin-top: 1em;
  80. margin-bottom: 1em;
  81. }
  82. tr.odd .form-item,
  83. tr.even .form-item {
  84. margin-top: 0;
  85. margin-bottom: 0;
  86. white-space: nowrap;
  87. }
  88. .form-item .description {
  89. font-size: 0.85em;
  90. }
  91. label {
  92. display: block;
  93. font-weight: bold;
  94. }
  95. label.option {
  96. display: inline;
  97. font-weight: normal;
  98. }
  99. h4.label {
  100. font-size: inherit;
  101. font-weight: bold;
  102. margin: 0;
  103. padding: 0;
  104. }
  105. .form-checkboxes .form-item,
  106. .form-radios .form-item {
  107. margin-top: 0.4em;
  108. margin-bottom: 0.4em;
  109. }
  110. .form-type-radio .description,
  111. .form-type-checkbox .description {
  112. margin-left: 2.4em;
  113. }
  114. input.form-checkbox,
  115. input.form-radio {
  116. vertical-align: middle;
  117. }
  118. .marker,
  119. .form-required {
  120. color: #f00;
  121. }
  122. abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {
  123. border-bottom: none;
  124. }
  125. .form-item input.error,
  126. .form-item textarea.error,
  127. .form-item select.error {
  128. border: 2px solid red;
  129. }
  130. /**
  131. * Inline items.
  132. */
  133. .container-inline .form-actions,
  134. .container-inline.form-actions {
  135. margin-top: 0;
  136. margin-bottom: 0;
  137. }
  138. /**
  139. * Markup generated by theme_more_link().
  140. */
  141. .more-link {
  142. text-align: right; /* LTR */
  143. }
  144. /**
  145. * Markup generated by theme_more_help_link().
  146. */
  147. .more-help-link {
  148. text-align: right; /* LTR */
  149. }
  150. .more-help-link a {
  151. background: url(../../misc/help.png) 0 50% no-repeat; /* LTR */
  152. padding: 1px 0 1px 20px; /* LTR */
  153. }
  154. /**
  155. * Markup generated by theme_pager().
  156. */
  157. .item-list .pager {
  158. clear: both;
  159. text-align: center;
  160. }
  161. .item-list .pager li {
  162. background-image: none;
  163. display: inline;
  164. list-style-type: none;
  165. padding: 0.5em;
  166. }
  167. .pager-current {
  168. font-weight: bold;
  169. }
  170. /**
  171. * Autocomplete.
  172. *
  173. * @see autocomplete.js
  174. */
  175. /* Suggestion list */
  176. #autocomplete li.selected {
  177. background: #0072b9;
  178. color: #fff;
  179. }
  180. /**
  181. * Collapsible details.
  182. *
  183. * @see collapse.js
  184. * @thanks http://nicolasgallagher.com/css-background-image-hacks/
  185. */
  186. details {
  187. border: 1px solid #ccc;
  188. margin-top: 1em;
  189. margin-bottom: 1em;
  190. }
  191. details > .details-wrapper {
  192. padding: 0.5em 1.5em;
  193. }
  194. /* @todo Regression: The summary of uncollapsible details are no longer
  195. vertically aligned with the .details-wrapper in browsers without native
  196. details support. */
  197. summary {
  198. padding: 0.2em 0.5em;
  199. }
  200. .collapse-processed > summary {
  201. padding-left: 0.5em;
  202. padding-right: 0.5em;
  203. }
  204. .collapse-processed > summary:before {
  205. background: url(../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */
  206. content: "";
  207. float: left;
  208. height: 1em;
  209. width: 1em;
  210. }
  211. .collapse-processed:not([open]) > summary:before {
  212. background-position: 25% 35%; /* LTR */
  213. -moz-transform: rotate(-90deg);
  214. -ms-transform: rotate(-90deg);
  215. -o-transform: rotate(-90deg);
  216. -webkit-transform: rotate(-90deg);
  217. transform: rotate(-90deg);
  218. }
  219. /**
  220. * TableDrag behavior.
  221. *
  222. * @see tabledrag.js
  223. */
  224. tr.drag {
  225. background-color: #fffff0;
  226. }
  227. tr.drag-previous {
  228. background-color: #ffd;
  229. }
  230. .tabledrag-toggle-weight {
  231. font-size: 0.9em;
  232. }
  233. body div.tabledrag-changed-warning {
  234. margin-bottom: 0.5em;
  235. }
  236. /**
  237. * TableSelect behavior.
  238. *
  239. * @see tableselect.js
  240. */
  241. tr.selected td {
  242. background: #ffc;
  243. }
  244. td.checkbox,
  245. th.checkbox {
  246. text-align: center;
  247. }
  248. /**
  249. * Progress bar.
  250. *
  251. * @see progress.js
  252. */
  253. .progress {
  254. font-weight: bold;
  255. }
  256. .progress .bar {
  257. background: #ccc;
  258. border-color: #666;
  259. margin: 0 0.2em;
  260. border-radius: 3px;
  261. }
  262. .progress .filled {
  263. background: #0072b9 url(../../misc/progress.gif);
  264. }
  265. /**
  266. * Markup generated by theme_menu_tree().
  267. */
  268. ul.menu {
  269. list-style: none outside;
  270. margin-left: 1em; /* LTR */
  271. padding: 0;
  272. text-align: left; /* LTR */
  273. }
  274. .menu .expanded {
  275. list-style-image: url(../../misc/menu-expanded.png);
  276. list-style-type: circle;
  277. }
  278. .menu .collapsed {
  279. list-style-image: url(../../misc/menu-collapsed.png); /* LTR */
  280. list-style-type: disc;
  281. }
  282. ul.menu li {
  283. padding-top: 0.2em;
  284. margin: 0;
  285. }
  286. ul.menu a.active {
  287. color: #000;
  288. }
  289. /**
  290. * Markup generated by theme_links().
  291. */
  292. ul.inline,
  293. ul.links.inline {
  294. display: inline;
  295. padding-left: 0;
  296. }
  297. ul.inline li {
  298. display: inline;
  299. list-style-type: none;
  300. padding: 0 0.5em;
  301. }
  302. /**
  303. * Markup generated by theme_breadcrumb().
  304. */
  305. .breadcrumb {
  306. padding-bottom: 0.5em;
  307. }
  308. .breadcrumb ol {
  309. margin: 0;
  310. padding: 0;
  311. }
  312. .breadcrumb li {
  313. display: inline;
  314. list-style-type: none;
  315. margin: 0;
  316. padding: 0;
  317. }
  318. /* IE8 does not support :not() and :last-child. */
  319. .breadcrumb li:before {
  320. content: ' » ';
  321. }
  322. .breadcrumb li:first-child:before {
  323. content: none;
  324. }
  325. /**
  326. * Markup generated by theme_menu_local_tasks().
  327. */
  328. div.tabs {
  329. margin: 1em 0;
  330. }
  331. ul.tabs {
  332. list-style: none;
  333. margin: 0 0 0.5em;
  334. padding: 0;
  335. }
  336. .tabs > li {
  337. display: inline-block;
  338. margin-right: 0.3em; /* LTR */
  339. }
  340. .tabs a {
  341. display: block;
  342. padding: 0.2em 1em;
  343. text-decoration: none;
  344. }
  345. .tabs a.active {
  346. background-color: #eee;
  347. }
  348. .tabs a:focus,
  349. .tabs a:hover {
  350. background-color: #f5f5f5;
  351. }
  352. /**
  353. * Styles for link buttons and action links.
  354. */
  355. .action-links {
  356. list-style: none;
  357. padding: 0;
  358. margin: 1em 0;
  359. }
  360. .action-links li {
  361. display: inline-block;
  362. margin: 0 0.3em;
  363. }
  364. .action-links li:first-child {
  365. margin-left: 0; /* LTR */
  366. }
  367. a.button {
  368. display: inline-block;
  369. line-height: 160%;
  370. padding: 0.2em 0.5em 0.3em;
  371. text-decoration: none;
  372. }
  373. a.button.add:before {
  374. content: '+';
  375. font-weight: 900;
  376. margin-left: -0.1em; /* LTR */
  377. padding-right: 0.2em; /* LTR */
  378. }
  379. /**
  380. * Styles for system messages.
  381. */
  382. div.messages {
  383. background-position: 8px 8px; /* LTR */
  384. background-repeat: no-repeat;
  385. border: 1px solid;
  386. margin: 6px 0;
  387. padding: 10px 10px 10px 50px; /* LTR */
  388. }
  389. div.status {
  390. background-image: url(../../misc/message-24-ok.png);
  391. border-color: #be7;
  392. }
  393. div.status,
  394. .ok {
  395. color: #234600;
  396. }
  397. div.status,
  398. table tr.ok {
  399. background-color: #f8fff0;
  400. }
  401. div.warning {
  402. background-image: url(../../misc/message-24-warning.png);
  403. border-color: #ed5;
  404. }
  405. div.warning,
  406. .warning {
  407. color: #840;
  408. }
  409. div.warning,
  410. table tr.warning {
  411. background-color: #fffce5;
  412. }
  413. div.error {
  414. background-image: url(../../misc/message-24-error.png);
  415. border-color: #ed541d;
  416. }
  417. div.error,
  418. .error {
  419. color: #8c2e0b;
  420. }
  421. div.error,
  422. table tr.error {
  423. background-color: #fef5f1;
  424. }
  425. div.error p.error {
  426. color: #333;
  427. }
  428. div.messages ul {
  429. margin: 0 0 0 1em; /* LTR */
  430. padding: 0;
  431. }
  432. div.messages ul li {
  433. list-style-image: none;
  434. }