install-page.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/theme/install-page.pcss.css
  2. 8.9.x core/themes/claro/css/theme/install-page.pcss.css
  3. 10 core/themes/claro/css/theme/install-page.pcss.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.pcss.css

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

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