system.theme.css

Basic styling for common markup.

File

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

  2.  * @file

  3.  * Basic styling for common markup.

  4.  */

  5. 

  6. /**

  7.  * HTML elements.

  8.  */

  9. fieldset {

  10.   border: 1px solid #ccc;

  11.   margin: 1em 0;

  12.   padding: 0.5em;

  13. }

  14. form {

  15.   margin: 0;

  16.   padding: 0;

  17. }

  18. button {

  19.   font-size: 1em;

  20. }

  21. hr {

  22.   border: 1px solid gray;

  23.   height: 1px;

  24. }

  25. img {

  26.   border: 0;

  27. }

  28. table {

  29.   border-collapse: collapse;

  30.   width: 100%;

  31. }

  32. th {

  33.   padding-right: 1em; /* LTR */

  34.   text-align: left; /* LTR */

  35. }

  36. thead > tr {

  37.   border-bottom: 1px solid #000;

  38. }

  39. tr {

  40.   border-bottom: 1px solid #ccc;

  41.   padding: 0.1em 0.6em;

  42. }

  43. caption {

  44.   text-align: left; /* LTR */

  45. }

  46. 

  47. /**

  48.  * Publishing status.

  49.  */

  50. .unpublished {

  51.   background-color: #fff4f4;

  52. }

  53. .preview {

  54.   background-color: #ffffea;

  55. }

  56. 

  57. /**

  58.  * Markup generated by theme_tablesort_indicator().

  59.  */

  60. th.active img {

  61.   display: inline;

  62. }

  63. td.active {

  64.   background-color: #ddd;

  65. }

  66. 

  67. /**

  68.  * Markup generated by theme_item_list().

  69.  */

  70. .item-list .title {

  71.   font-weight: bold;

  72. }

  73. .item-list ul {

  74.   margin: 0 0 0.75em 0;

  75.   padding: 0;

  76. }

  77. .item-list ul li {

  78.   margin: 0 0 0.25em 1.5em; /* LTR */

  79.   padding: 0;

  80. }

  81. 

  82. /**

  83.  * Markup generated by Form API.

  84.  */

  85. .form-item,

  86. .form-actions {

  87.   margin-top: 1em;

  88.   margin-bottom: 1em;

  89. }

  90. tr.odd .form-item,

  91. tr.even .form-item {

  92.   margin-top: 0;

  93.   margin-bottom: 0;

  94.   white-space: nowrap;

  95. }

  96. .form-item .description {

  97.   font-size: 0.85em;

  98. }

  99. label {

  100.   display: block;

  101.   font-weight: bold;

  102. }

  103. label.option {

  104.   display: inline;

  105.   font-weight: normal;

  106. }

  107. h4.label {

  108.   font-size: inherit;

  109.   font-weight: bold;

  110.   margin: 0;

  111.   padding: 0;

  112. }

  113. .form-checkboxes .form-item,

  114. .form-radios .form-item {

  115.   margin-top: 0.4em;

  116.   margin-bottom: 0.4em;

  117. }

  118. .form-type-radio .description,

  119. .form-type-checkbox .description {

  120.   margin-left: 2.4em;

  121. }

  122. input.form-checkbox,

  123. input.form-radio {

  124.   vertical-align: middle;

  125. }

  126. .marker,

  127. .form-required {

  128.   color: #e00;

  129. }

  130. abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {

  131.   border-bottom: none;

  132. }

  133. .form-item input.error,

  134. .form-item textarea.error,

  135. .form-item select.error {

  136.   border: 2px solid red;

  137. }

  138. .button,

  139. .image-button {

  140.   margin-left: 1em;

  141.   margin-right: 1em;

  142. }

  143. .button:first-child,

  144. .image-button:first-child {

  145.   margin-left: 0;

  146.   margin-right: 0;

  147. }

  148. 

  149. /**

  150.  * Inline items.

  151.  */

  152. .container-inline label:after {

  153.   content: ':';

  154. }

  155. .container-inline .form-actions,

  156. .container-inline.form-actions {

  157.   margin-top: 0;

  158.   margin-bottom: 0;

  159. }

  160. 

  161. /**

  162.  * Markup generated by theme_more_link().

  163.  */

  164. .more-link {

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

  166. }

  167. 

  168. /**

  169.  * Markup generated by theme_more_help_link().

  170.  */

  171. .more-help-link {

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

  173. }

  174. .more-help-link a {

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

  176.   padding: 1px 0 1px 20px; /* LTR */

  177. }

  178. 

  179. /**

  180.  * Markup generated by theme_pager().

  181.  */

  182. .item-list .pager {

  183.   clear: both;

  184.   text-align: center;

  185. }

  186. .item-list .pager li {

  187.   background-image: none;

  188.   display: inline;

  189.   list-style-type: none;

  190.   padding: 0.5em;

  191. }

  192. .pager-current {

  193.   font-weight: bold;

  194. }

  195. 

  196. /**

  197.  * Show buttons as links.

  198.  */

  199. button.link {

  200.   background: transparent;

  201.   border: 0;

  202.   cursor: pointer;

  203.   margin: 0;

  204.   padding: 0;

  205. }

  206. 

  207. label button.link {

  208.   font-weight: bold;

  209. }

  210. 

  211. /*

  212.  * Autocomplete.

  213.  *

  214.  * @see autocomplete.js

  215.  */

  216. /* Suggestion list */

  217. #autocomplete li.selected {

  218.   background: #0072b9;

  219.   color: #fff;

  220. }

  221. 

  222. /**

  223.  * Collapsible details.

  224.  *

  225.  * @see collapse.js

  226.  * @thanks http://nicolasgallagher.com/css-background-image-hacks/

  227.  */

  228. details {

  229.   border: 1px solid #ccc;

  230.   margin-top: 1em;

  231.   margin-bottom: 1em;

  232. }

  233. details > .details-wrapper {

  234.   padding: 0.5em 1.5em;

  235. }

  236. /* @todo Regression: The summary of uncollapsible details are no longer

  237.      vertically aligned with the .details-wrapper in browsers without native

  238.      details support. */

  239. summary {

  240.   cursor: pointer;

  241.   padding: 0.2em 0.5em;

  242. }

  243. .collapse-processed > summary {

  244.   padding-left: 0.5em;

  245.   padding-right: 0.5em;

  246. }

  247. .collapse-processed > summary:before {

  248.   background: url(../../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */

  249.   content: "";

  250.   float: left;

  251.   height: 1em;

  252.   width: 1em;

  253. }

  254. .collapse-processed:not([open]) > summary:before {

  255.   background-position: 25% 35%; /* LTR */

  256.   -moz-transform: rotate(-90deg);

  257.   -ms-transform: rotate(-90deg);

  258.   -o-transform: rotate(-90deg);

  259.   -webkit-transform: rotate(-90deg);

  260.   transform: rotate(-90deg);

  261. }

  262. 

  263. /**

  264.  * TableDrag behavior.

  265.  *

  266.  * @see tabledrag.js

  267.  */

  268. tr.drag {

  269.   background-color: #fffff0;

  270. }

  271. tr.drag-previous {

  272.   background-color: #ffd;

  273. }

  274. body div.tabledrag-changed-warning {

  275.   margin-bottom: 0.5em;

  276. }

  277. 

  278. /**

  279.  * TableSelect behavior.

  280.  *

  281.  * @see tableselect.js

  282. */

  283. tr.selected td {

  284.   background: #ffc;

  285. }

  286. td.checkbox,

  287. th.checkbox {

  288.   text-align: center;

  289. }

  290. 

  291. /**

  292.  * Progress bar.

  293.  *

  294.  * @see progress.js

  295.  */

  296. .progress {

  297.   font-weight: bold;

  298. }

  299. .progress .bar {

  300.   background: #ccc;

  301.   border-color: #666;

  302.   margin: 0 0.2em;

  303.   border-radius: 3px;

  304. }

  305. .progress .filled {

  306.   background: #0072b9 url(../../../misc/progress.gif);

  307. }

  308. 

  309. /**

  310.  * Markup generated by theme_menu_tree().

  311.  */

  312. ul.menu {

  313.   list-style: none outside;

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

  315.   padding: 0;

  316.   text-align: left; /* LTR */

  317. }

  318. .menu .expanded {

  319.   list-style-image: url(../../../misc/menu-expanded.png);

  320.   list-style-type: circle;

  321. }

  322. .menu .collapsed {

  323.   list-style-image: url(../../../misc/menu-collapsed.png); /* LTR */

  324.   list-style-type: disc;

  325. }

  326. ul.menu li {

  327.   padding-top: 0.2em;

  328.   margin: 0;

  329. }

  330. ul.menu a.active {

  331.   color: #000;

  332. }

  333. 

  334. /**

  335.  * Markup generated by theme_links().

  336.  */

  337. ul.inline,

  338. ul.links.inline {

  339.   display: inline;

  340.   padding-left: 0;

  341. }

  342. ul.inline li {

  343.   display: inline;

  344.   list-style-type: none;

  345.   padding: 0 0.5em;

  346. }

  347. 

  348. /**

  349.  * Markup generated by theme_breadcrumb().

  350.  */

  351. .breadcrumb {

  352.   padding-bottom: 0.5em;

  353. }

  354. .breadcrumb ol {

  355.   margin: 0;

  356.   padding: 0;

  357. }

  358. .breadcrumb li {

  359.   display: inline;

  360.   list-style-type: none;

  361.   margin: 0;

  362.   padding: 0;

  363. }

  364. /* IE8 does not support :not() and :last-child. */

  365. .breadcrumb li:before {

  366.   content: ' » ';

  367. }

  368. .breadcrumb li:first-child:before {

  369.   content: none;

  370. }

  371. 

  372. /**

  373.  * Markup generated by theme_menu_local_tasks().

  374.  */

  375. div.tabs {

  376.   margin: 1em 0;

  377. }

  378. ul.tabs {

  379.   list-style: none;

  380.   margin: 0 0 0.5em;

  381.   padding: 0;

  382. }

  383. .tabs > li {

  384.   display: inline-block;

  385.   margin-right: 0.3em; /* LTR */

  386. }

  387. .tabs a {

  388.   display: block;

  389.   padding: 0.2em 1em;

  390.   text-decoration: none;

  391. }

  392. .tabs a.active {

  393.   background-color: #eee;

  394. }

  395. .tabs a:focus,

  396. .tabs a:hover {

  397.   background-color: #f5f5f5;

  398. }

  399. 

  400. /**

  401.  * Styles for link buttons and action links.

  402.  */

  403. .action-links {

  404.   list-style: none;

  405.   padding: 0;

  406.   margin: 1em 0;

  407. }

  408. .action-links li {

  409.   display: inline-block;

  410.   margin: 0 0.3em;

  411. }

  412. .action-links li:first-child {

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

  414. }

  415. .button-action {

  416.   display: inline-block;

  417.   line-height: 160%;

  418.   padding: 0.2em 0.5em 0.3em;

  419.   text-decoration: none;

  420. }

  421. .button-action:before {

  422.   content: '+';

  423.   font-weight: 900;

  424.   margin-left: -0.1em; /* LTR */

  425.   padding-right: 0.2em; /* LTR */

  426. }

  427. 

  428. /**

  429.  * Styles for system messages.

  430.  */

  431. .messages {

  432.   background: no-repeat 10px 18px;  /* LTR */

  433.   border: 1px solid;

  434.   border-width: 1px 1px 1px 8px;  /* LTR */

  435.   border-radius: 2px;

  436.   padding: 15px 20px 15px 35px; /* LTR */

  437.   word-wrap: break-word;

  438.   overflow-wrap: break-word;

  439. }

  440. .messages + .messages {

  441.   margin-top: 1.538em;

  442. }

  443. .messages__list {

  444.   list-style: none;

  445.   padding: 0;

  446.   margin: 0;

  447. }

  448. .messages__item + .messages__item {

  449.   margin-top: 0.769em;

  450. }

  451. 

  452. /* @TODO Separate tables and messages styling */

  453. .messages--status {

  454.   border-color: #c9e1bd #c9e1bd #c9e1bd #77b259;  /* LTR */

  455.   background-image: url(../../../misc/message-16-ok.png);

  456.   background-position: 12px 19px;  /* LTR */

  457. }

  458. .messages--status,

  459. .ok {

  460.   color: #325e1c;

  461. }

  462. .messages--status,

  463. table tr.ok {

  464.   background-color: #f3faef;

  465. }

  466. 

  467. .messages--warning {

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

  469.   border-color: #f4daa6 #f4daa6 #f4daa6 #e09600;  /* LTR */

  470. }

  471. .messages--warning,

  472. .warning {

  473.   color: #734c00;

  474. }

  475. .messages--warning,

  476. table tr.warning {

  477.   background-color: #fdf8ed;

  478. }

  479. 

  480. .messages--error {

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

  482.   border-color: #f9c9bf #f9c9bf #f9c9bf #e62600;  /* LTR */

  483. }

  484. .messages--error,

  485. .error {

  486.   color: #a51b00;

  487. }

  488. .messages--error,

  489. table tr.error {

  490.   background-color: #fcf4f2;

  491. }

  492. .messages--error p.error {

  493.   color: #a51b00;

  494. }