components/management/resources/management.css

/* Copyright 2020 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

html {
  --google-blue-300: rgb(138, 180, 248);
  --google-blue-700: rgb(25, 103, 210);
  --google-gray-300: rgb(218, 220, 224);
  --google-gray-700: rgb(95, 99, 104);
  --google-grey-900: rgb(32, 33, 36);

  /* Text/Primary in Chrome iOS Design System. */
  --heading-color: rgb(0, 0, 0);
  --link-color: var(--google-blue-700);
  /* Text/Primary Low in Chrome iOS Design System. */
  --text-color: var(--google-gray-700);

  -webkit-text-size-adjust: 100%;

  background: white;
  font-family: 'Roboto-Regular', sans-serif;
  font-size: 125%;
}

@media (prefers-color-scheme: dark) {
  html {
    --heading-color: rgb(255, 255, 255);
    --text-color: var(--google-gray-300);
    --link-color: var(--google-blue-300);

    background: var(--google-grey-900);
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
}

.content-wrapper {
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.6em;
  margin: 14vh auto 0;
  max-width: 600px;
  width: 100%;
}

.hidden {
  display: none;
}

#icon {
  background-repeat: no-repeat;
  background-size: 100%;
  height: 72px;
  margin: 0 0 40px;
  width: 72px;
}

#main-message,
#unmanaged-info {
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.25em;
  margin-bottom: 16px;
}

.description-text {
  color: var(--text-color);
  font-size: 1.2em;
  line-height: 1.6em;
  font-weight: normal;
}

.heading {
  color: var(--heading-color);
}

#connectors-section-title,
#browser-reporting-title,
#profile-reporting-title {
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1.25em;
  margin-top: 32px;
  margin-bottom: 16px;
}

#connectors-section-description {
  margin-bottom: 28px;
}

.event-section {
  margin-bottom: 24px;
  margin-top: 24px;
}

.event-title {
  font-size: 1.3em;
  font-weight: 590;
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .content-wrapper {
    padding: 0 10%;
  }
}

@media (max-width: 420px) {
  .content-wrapper {
    padding: 0 5%;
  }
}

@media (min-width: 240px) and (max-width: 420px) and
       (min-height: 401px),
       (min-width: 421px) and (min-height: 240px) and
       (max-height: 560px) {
  .content-wrapper {
    max-width: 736px;
  }
}

@media (max-width: 420px) and (orientation: portrait),
       (max-height: 560px) {

  body {
    margin: 0 auto;
  }

  .content-wrapper {
    box-sizing: border-box;
    margin: 7vh auto 12px;
    padding: 0 24px;
    position: relative;
  }

  #icon {
    margin-bottom: 5.69vh;
  }

  #main-message,
  #unmanaged-info {
    font-size: 1.54em;
    margin-bottom: 8px;
  }

  .description-text {
    font-size: .95em;
    line-height: 1.57em;
  }

  #connectors-section-title {
    font-size: 1.33em;
  }

  .event-title {
    font-size: 1em;
  }
}

@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
  .content-wrapper {
    margin-top: 10vh;
  }
}

@media (min-height: 400px) and (orientation:portrait) {
  .content-wrapper {
    margin-bottom: 145px;
  }
}

@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and
       (orientation: portrait) {
  .content-wrapper {
    margin-top: 7vh;
  }
}

@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
  .content-wrapper {
    margin-top: 10vh;
  }
}

/* Small mobile screens. No fixed nav. */
@media (max-height: 400px) and (orientation: portrait),
       (max-height: 239px) and (orientation: landscape),
       (max-width: 419px) and (max-height: 399px) {
  .content-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
}