chromium/components/about_ui/resources/about_credits.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. */

html {
  --google-blue-50: rgb(232, 240, 254);
  --google-blue-300: rgb(138, 180, 248);
  --google-blue-700: rgb(25, 103, 210);
  --google-grey-200: rgb(232, 234, 237);
  --google-grey-800: rgb(60, 64, 67);
  --google-grey-900: rgb(32, 33, 36);

  --interactive-color: var(--google-blue-700);
  --primary-color: var(--google-grey-900);

  --product-background: var(--google-blue-50);

  background: white;
}

@media (prefers-color-scheme: dark) {
  html {
    --interactive-color: var(--google-blue-300);
    --primary-color: var(--google-grey-200);

    --product-background: var(--google-grey-800);

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

body {
  color: var(--primary-color);
  font-size: 84%;
  max-width: 1020px;
}
a {
  color: var(--interactive-color);
}
.open-sourced {
  clear: both;
  padding-top: 10px;
  font-size: 110%;
}
.page-title {
  float: left;
  font-size: 164%;
  font-weight: bold;
}
.product {
  background-color: var(--product-background);
  border-radius: 5px;
  margin-top: 16px;
  overflow: auto;
  padding: 2px;
}
.product .title {
  float: left;
  font-size: 110%;
  font-weight: bold;
  margin: 3px;
}
.product .homepage {
  color: var(--interactive-color);
  float: right;
  margin: 3px;
  text-align: end;
}
.product .homepage::before {
  content: ' - ';
}
.show-all,
.product .show {
  color: var(--interactive-color);
  float: right;
  margin: 3px;
  text-align: end;
  text-decoration: underline;
}
.license {
  border-radius: 3px;
  clear: both;
  display: none;
  padding: 16px;
}
.license h3 {
  margin-top: 0;
}
.license pre {
  white-space: pre-wrap;
}
#print-link {
  float: right;
  margin: 3px;
}
.dialog #print-link,
.dialog .homepage {
  display: none;
}
label.show + div.license {
  display: none;
}
label.show::after {
  content: 'show license';
  cursor: pointer;
}
label.show-all::after {
  content: 'show all licenses';
}
label.show-all:has(input:checked) ~ * label.show + div.license,
label.show:has(input:checked) + div {
  display: block;
}
label.show:has(input:checked)::after {
  content: 'hide license';
  cursor: pointer;
}
label.show-all:has(input:checked)::after {
  content: 'hide all licenses';
}

/* Strip out color and style when printing. We want dense B&W text. */
@media print {
  .license {
    /* The licensing content is very verbose. Make it dense. */
    display: block;
    font-size: smaller;
    padding: 0;
  }
  .product,
  a,
  body {
    color: black;
  }
  .product {
    background-color: white;
  }
  a {
    text-decoration: none;
  }
  .show,
  .product .homepage::before,
  #print-link {
    display: none;
  }
}

/* Style the show/hide license button to look like a link in Forced Colors
 * Mode. */
@media (forced-colors: active) {
  .product .show {
    color: LinkText;
  }
}