management.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /* Copyright 2020 The Chromium Authors. All rights reserved.
  2. * Use of this source code is governed by a BSD-style license that can be
  3. * found in the LICENSE file.
  4. */
  5. html {
  6. --google-blue-300: rgb(138, 180, 248);
  7. --google-blue-700: rgb(25, 103, 210);
  8. --google-grey-200: rgb(232, 234, 237);
  9. --google-gray-500: rgb(154, 160, 166);
  10. --google-gray-700: rgb(95, 99, 104);
  11. --google-grey-900: rgb(32, 33, 36);
  12. --heading-color: var(--google-gray-900);
  13. --link-color: var(--google-blue-700);
  14. --text-color: var(--google-gray-700);
  15. -webkit-text-size-adjust: 100%;
  16. background: white;
  17. font-family: 'Roboto-Regular', sans-serif;
  18. font-size: 125%;
  19. }
  20. @media (prefers-color-scheme: dark) {
  21. html {
  22. --heading-color: var(--google-grey-200);
  23. --text-color: var(--google-gray-500);
  24. --link-color: var(--google-blue-300);
  25. background: var(--google-grey-900);
  26. }
  27. }
  28. a {
  29. color: var(--link-color);
  30. text-decoration: none;
  31. }
  32. .content-wrapper {
  33. box-sizing: border-box;
  34. font-size: 1em;
  35. line-height: 1.6em;
  36. margin: 14vh auto 0;
  37. max-width: 600px;
  38. width: 100%;
  39. }
  40. .hidden {
  41. display: none;
  42. }
  43. #icon {
  44. background-repeat: no-repeat;
  45. background-size: 100%;
  46. height: 72px;
  47. margin: 0 0 40px;
  48. width: 72px;
  49. }
  50. #main-message,
  51. #unmanaged-info {
  52. color: var(--heading-color);
  53. font-size: 1.6em;
  54. font-weight: normal;
  55. line-height: 1.25em;
  56. margin-bottom: 16px;
  57. }
  58. #secondary-message {
  59. color: var(--text-color);
  60. font-size: 1.2em;
  61. font-weight: normal;
  62. }
  63. @media (max-width: 700px) {
  64. .content-wrapper {
  65. padding: 0 10%;
  66. }
  67. }
  68. @media (max-width: 420px) {
  69. .content-wrapper {
  70. padding: 0 5%;
  71. }
  72. }
  73. @media (min-width: 240px) and (max-width: 420px) and
  74. (min-height: 401px),
  75. (min-width: 421px) and (min-height: 240px) and
  76. (max-height: 560px) {
  77. .content-wrapper {
  78. max-width: 736px;
  79. }
  80. }
  81. @media (max-width: 420px) and (orientation: portrait),
  82. (max-height: 560px) {
  83. body {
  84. margin: 0 auto;
  85. }
  86. .content-wrapper {
  87. box-sizing: border-box;
  88. margin: 7vh auto 12px;
  89. padding: 0 24px;
  90. position: relative;
  91. }
  92. #icon {
  93. margin-bottom: 5.69vh;
  94. }
  95. #main-message,
  96. #unmanaged-info {
  97. font-size: 1.5em;
  98. margin-bottom: 8px;
  99. }
  100. #secondary-message {
  101. font-size: .95em;
  102. line-height: 1.61em;
  103. margin-top: 8px;
  104. }
  105. }
  106. @media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
  107. .content-wrapper {
  108. margin-top: 10vh;
  109. }
  110. }
  111. @media (min-height: 400px) and (orientation:portrait) {
  112. .content-wrapper {
  113. margin-bottom: 145px;
  114. }
  115. }
  116. @media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and
  117. (orientation: portrait) {
  118. .content-wrapper {
  119. margin-top: 7vh;
  120. }
  121. }
  122. @media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
  123. .content-wrapper {
  124. margin-top: 10vh;
  125. }
  126. }
  127. /* Small mobile screens. No fixed nav. */
  128. @media (max-height: 400px) and (orientation: portrait),
  129. (max-height: 239px) and (orientation: landscape),
  130. (max-width: 419px) and (max-height: 399px) {
  131. .content-wrapper {
  132. display: flex;
  133. flex-direction: column;
  134. margin-bottom: 0;
  135. }
  136. }