install-page.css

Same filename in this branch
  1. 8.9.x core/themes/claro/css/theme/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. 10 core/themes/claro/css/theme/install-page.css
  4. 11.x 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/seven/css/theme/install-page.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: #1275b2;
  11. background-image:
  12. url(../../images/noise-low.png),
  13. -webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
  14. background-image:
  15. url(../../images/noise-low.png),
  16. radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
  17. background-repeat: repeat;
  18. background-position: left top, 50% 50%; /* LTR */
  19. }
  20. [dir="rtl"] .install-page {
  21. background-position: right top, 50% 50%;
  22. }
  23. /**
  24. * Password widget
  25. */
  26. .install-page .password-parent,
  27. .install-page .confirm-parent {
  28. width: auto;
  29. }
  30. .install-page .form-item .password-suggestions {
  31. float: none;
  32. width: auto;
  33. }
  34. .install-page table td {
  35. word-break: break-all;
  36. }
  37. .install-page .site-version {
  38. vertical-align: super;
  39. color: #595959;
  40. font-size: 0.5em;
  41. }
  42. @media all and (max-width: 1010px) and (min-width: 48em) {
  43. .install-page .password-strength,
  44. .install-page .confirm-parent {
  45. width: 100%;
  46. }
  47. .install-configure-form .form-type-password {
  48. width: 100%;
  49. }
  50. .password-confirm,
  51. .password-field {
  52. float: none;
  53. }
  54. .password-confirm-match {
  55. float: none;
  56. width: auto;
  57. max-width: 100%;
  58. }
  59. }

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