chromium/components/supervised_user/core/browser/resources/supervised_user_block_interstitial_v2.css

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

.banner {
  align-items: center;
  box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  padding: 12px 20px;
  margin-bottom: 24px;
  width: 100%;
  justify-content: start;
 }

body {
  --avatar-stroke-color: var(--google-gray-50);
  --custodian-name-color: #333333;
  --custodian-email-color: #5f6368;
  --focused-details-button-border: rgba(26, 115, 232, 0.4);
  --header-color: var(--google-gray-900);
  --paragraph-color: var(--google-gray-700);
  --callout-text-color: var(--google-gray-900);
  --callout-bg-color: var(--google-gray-100);
  font-family: 'Roboto', sans-serif;
  padding: 24px 24px 20px 24px;
}

button {
  background: var(--primary-button-fill-color);
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--primary-button-text-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  line-height: normal;
  margin: 0;
  padding: 6px 16px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

button:active {
  background: var(--primary-button-fill-color-active);
}

[dir='rtl'] button {
  float: left;
}

#details {
  margin-top: 32px;
}

#details-header {
  font-weight: bold;
}

.details-button {
  background: var(--quiet-background-color);
  border: 1px solid var(--google-gray-500);
  color: var(--google-gray-700);
  float: none;
}

.details-button:hover {
  background: var(--google-gray-50);
  border-color: var(--google-gray-600);
}

.details-button:active {
  background: var(--google-gray-50);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 2px 6px 2px rgba(60, 64, 67, 0.15);
}

.details-button:focus {
  background: var(--google-gray-50);
  border-color: var(--focused-details-button-border);
}

#family-link-kite-icon {
  height: 20px;
  width: 20px;
  margin-right: 16px;
  overflow: visible;
}

.banner-header {
  color: var(--header-color);
  line-height: 24px;
  margin-top: 0;
  font-size: 13px;
}

.banner-content {
  line-height: 20px;
  margin-top: 0;
  font-size: 13px;
}

h1,
p,
.custodian-contact {
  letter-spacing: -0.35px;
}

h1 {
  color: var(--header-color);
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 16px;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 125%;
}

p {
  color: var(--paragraph-color);
  font-size: 14px;
  margin-bottom: 0;
}

.message-container {
  display: flex;
  flex-direction: column;
}

.illustration {
  display: inline;
  width: 120px;
}

.frame-blocked {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 50px auto 0;
  max-width: 432px;
  overflow: visible;
  width: 100%;
}

#main-message {
  margin-top: 24px;
}

.button-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin: 40px -12px;
}

.go-back-button {
  float: right;
  margin-left: 24px;
}

#custodians-information {
  margin-top: 0;
}

.custodian-information {
  clear: both;
  display: flex;
  margin-top: 24px;
}

.avatar-img {
  border: none;
  border-radius: 50%;
  content: image-set(url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
      url(default_200_percent/logo_avatar_circle_blue_color.png) 2x);
  float: left;
  height: 40px;
  margin-inline-end: 12px;
  user-select: none;
  width: 40px;
}

.custodian-contact {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.custodian-name {
  color: var(--custodian-name-color);
  font-size: 14px;
  margin-bottom: 4px;
}

.custodian-email {
  color: var(--custodian-email-color);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 100%;
  justify-content: center;
}

#details {
  margin-top: 32px;
}

#details-header {
  font-weight: bold;
}

#block-reason-show-details-link,
#block-reason-hide-details-link {
  display: none;
}

#block-reason-container {
  margin-top: 16px;
}

#block-reason {
  align-items: center;
  background-color: var(--callout-bg-color);
  border-radius: 8px;
  color: var(--header-color);
  display: flex;
  justify-content: flex-start;
  padding: 16px;
  width: max-content;
}

#block-reason-header {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
}

#block-reason-message {
  color: var(--callout-text-color);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
}

.secondary-button {
  background: var(--background-color);
  border: 1px solid var(--google-gray-300);
  color: var(--google-blue-600);
  order: 2
}

.secondary-button:active {
  background: var(--secondary-button-hover-fill-color);
}

.primary-button {
  margin-inline-start: 8px;
}

/* Remove focus-visible outline styles, because forced focus is used for
screen reader and chrome vox provides its own focus style. */
.frame-blocked:focus-visible,
button:focus-visible {
  outline: none;
}

@media (prefers-color-scheme: dark) {
  body.supervised-user-block {
    --avatar-stroke-color: var(--google-blue-100);
    --callout-bg-color: var(--google-gray-800);
    --callout-text-color: var(--google-gray-200);
    --custodian-email-color: var(--google-gray-500);
    --custodian-name-color: var(--google-gray-500);
    --header-color: #e9eaed;
    --paragraph-color: var(--google-gray-500);
  }

  /* To be kept in sync with dark theme style of cr_dialog component in
   * ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html.  */
  .banner {
    --scroll-border-color: var(--google-gray-700);
    background-color: var(--cr-dialog-background-color, var(--google-grey-900));
    /* Note: the colors in linear-gradient() are intentionally the same to
     * add a 4% white layer on top of the fully opaque background-color. */
    background-image: linear-gradient(rgba(255, 255, 255, .04),
                                      rgba(255, 255, 255, .04));
  }

    #family-link-kite-icon {
    fill: #F1F3F4;
  }

  .secondary-button {
    color: var(--google-blue-300);
    border-color: var(--secondary-button-border-color);
  }
}

/* Narrow breakpoint, primarily targeting phones in portrait mode, and
iframes. */
@media (max-width: 480px) {
  html,
  body,
  .frame-blocked {
    height: 100%;
  }

  body {
    padding: 0;
    margin: auto;
  }

  button,
  [dir='rtl'] button {
    height: 40px;
    width: 100%;
    padding: 10px;
  }

  .primary-button {
    margin: 0 0 8px 0;
  }

  .secondary-button {
    border: none;
    margin: 0;
  }

  .frame-blocked {
    margin-top: 0;
    padding: 0 32px;
  }

  .message-container {
    margin-top: 50px;
  }

  #block-reason-show-details-link {
    color: var(--primary-button-fill-color);
    display: block;
    margin-top: 0;
  }

  #block-reason-hide-details-link {
    color: var(--primary-button-fill-color);
    display: none;
    margin-top: 0;
    margin-bottom: 14px;
  }

  #block-reason {
    display: none;
  }

  #custodians-information {
    margin-top: 8px;
  }

  .custodian-information {
    margin-top: 8px;
  }

  .avatar-img {
    height: 32px;
    width: 32px;
  }

  .button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0 28px;
  }

  .go-back-button {
    margin-left: 4px;
  }
}

/* Short version, primarily targeting iframes. */
@media (max-height: 300px) {
  #error-page-illustration,
  #custodians-information,
  #block-reason-container {
    display: none;
  }

  .message-container {
    margin-top: 0;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 480px) {
  .frame-blocked {
    background-color: initial;
  }
}