install-page.css

Same filename in other branches
  1. 9 core/themes/seven/css/theme/install-page.css
  2. 9 core/themes/claro/css/theme/install-page.css
  3. 8.9.x core/themes/seven/css/theme/install-page.css
  4. 8.9.x core/themes/claro/css/theme/install-page.css
  5. 10 core/themes/claro/css/theme/install-page.css

Installation styling.

Unfortunately we have to make our styling quite strong, to override the .maintenance-page styling.

File

core/themes/claro/css/theme/install-page.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Installation styling.
  10. *
  11. * Unfortunately we have to make our styling quite strong, to override the
  12. * .maintenance-page styling.
  13. */
  14. .install-page {
  15. min-height: 100%;
  16. background-color: var(--color-gray-100);
  17. }
  18. .install-page h1,
  19. .install-page h2 {
  20. font-size: var(--font-size-h3);
  21. }
  22. .install-page h3 {
  23. font-size: var(--font-size-h4);
  24. }
  25. .install-page .site-name {
  26. margin-top: var(--space-s);
  27. color: var(--color-gray);
  28. font-size: var(--font-size-xl);
  29. }
  30. .install-page .title {
  31. margin-top: 0;
  32. font-size: var(--font-size-h3);
  33. }
  34. .install-page .content {
  35. color: var(--color-gray);
  36. }
  37. .install-page .site-name,
  38. .install-page .title,
  39. .install-page .content {
  40. max-width: 34rem;
  41. }
  42. /**
  43. * Password widget
  44. */
  45. .install-page .password-parent,
  46. .install-page .confirm-parent {
  47. width: auto;
  48. }
  49. .install-page .form-item .password-suggestions {
  50. float: none;
  51. width: auto;
  52. }
  53. .install-page table td {
  54. word-break: break-all;
  55. }
  56. .install-page .site-version {
  57. vertical-align: super;
  58. color: var(--color-gray-500);
  59. font-size: 0.5em;
  60. font-weight: 500;
  61. }
  62. @media all and (max-width: 63.125rem) and (min-width: 48em) {
  63. .install-page .password-strength,
  64. .install-page .confirm-parent {
  65. width: 100%;
  66. }
  67. .install-configure-form .form-type-password {
  68. width: 100%;
  69. }
  70. .password-confirm,
  71. .password-field {
  72. float: none;
  73. }
  74. .password-confirm-match {
  75. float: none;
  76. width: auto;
  77. max-width: 100%;
  78. }
  79. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.