install-page.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/theme/install-page.pcss.css
  2. 10 core/themes/claro/css/theme/install-page.pcss.css
  3. 11.x 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. @import "../base/variables.pcss.css";
  9. .install-page {
  10. min-height: 100%;
  11. background-color: var(--color-gray-100);
  12. }
  13. /**
  14. * Password widget
  15. */
  16. .install-page .password-parent,
  17. .install-page .confirm-parent {
  18. width: auto;
  19. }
  20. .install-page .form-item .password-suggestions {
  21. float: none;
  22. width: auto;
  23. }
  24. .install-page table td {
  25. word-break: break-all;
  26. }
  27. .install-page .site-version {
  28. vertical-align: super;
  29. color: var(--color-gray-500);
  30. font-size: 0.5em;
  31. font-weight: 500;
  32. }
  33. @media all and (max-width: 1010px) and (min-width: 48em) {
  34. .install-page .password-strength,
  35. .install-page .confirm-parent {
  36. width: 100%;
  37. }
  38. .install-configure-form .form-type-password {
  39. width: 100%;
  40. }
  41. .password-confirm,
  42. .password-field {
  43. float: none;
  44. }
  45. .password-confirm-match {
  46. float: none;
  47. width: auto;
  48. max-width: 100%;
  49. }
  50. }

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