style.scss

/*
 * mdn-bcd-collector: style.scss
 * Styling for the web app
 *
 * © Gooborg Studios, Google LLC
 * See the LICENSE file for copyright details
 */

@use "sass:map";
@use "sass:list";

// Variables, Functions, Mixins

$colors: (
  background: (
    dark: #111,
    light: white,
  ),
  background-2: (
    dark: #100216,
    light: #faf2ff,
  ),
  background-3: (
    dark: #260037,
    light: #ead4ff,
  ),
  paper-bg: (
    dark: #191919,
    light: #eee,
  ),
  main: (
    dark: #8c42e9,
    light: #490877,
  ),
  main-2: (
    dark: #bd88f6,
    light: #500977,
  ),
  text: (
    dark: white,
    light: black,
  ),
  link: (
    dark: #99f,
    light: #00f,
  ),
  link-hover: (
    dark: #bbf,
    light: #44f,
  ),
  input-fg: (
    dark: white,
    light: white,
  ),
  input-bg: (
    dark: #462d67,
    light: #462d67,
  ),
  input-hover-bg: (
    dark: #5e3d8a,
    light: #5e3d8a,
  ),
  input-focus-bg: (
    dark: #523579,
    light: #523579,
  ),
  input-disabled-bg: (
    dark: #636363,
    light: #636363,
  ),
  input-placeholder: (
    dark: #ccc,
    light: #ccc,
  ),
  error: (
    dark: #faa,
    light: #700,
  ),
  error-bg: (
    dark: rgba(51, 0, 0, 0.3),
    light: rgba(255, 170, 170, 0.3),
  ),
  warning: (
    dark: #ffa,
    light: #770,
  ),
  warning-bg: (
    dark: rgba(51, 51, 0, 0.3),
    light: rgba(255, 255, 170, 0.3),
  ),
  success: (
    dark: #afa,
    light: #070,
  ),
  success-bg: (
    dark: rgba(0, 51, 0, 0.3),
    light: rgba(170, 255, 170, 0.3),
  ),
  note: (
    dark: #aaf,
    light: #007,
  ),
  note-bg: (
    dark: rgba(0, 0, 51, 0.3),
    light: rgba(170, 170, 255, 0.3),
  ),
  important: (
    dark: #faf,
    light: #707,
  ),
  important-bg: (
    dark: rgba(51, 0, 51, 0.3),
    light: rgba(255, 170, 255, 0.3),
  ),
);

@function getKeyInMap($map, $nth) {
  @return list.nth((list.nth($map, $nth)), 1);
}

@function getValueInMap($map, $nth) {
  @return list.nth((list.nth($map, $nth)), 2);
}

@mixin themedProperty($property, $color, $opacity: 1) {
  #{$property}: rgba(map.get($colors, $color, "dark"), $opacity);

  @media (prefers-color-scheme: light) {
    #{$property}: rgba(map.get($colors, $color, "light"), $opacity);
  }
}

@mixin themedTextGlow($color, $size: 10px, $opacity: 0.75) {
  text-shadow: 0 0 $size rgba(map.get($colors, $color, "dark"), $opacity);

  @media (prefers-color-scheme: light) {
    text-shadow: 0 0 $size rgba(map.get($colors, $color, "light"), $opacity);
  }
}

@mixin themedBoxShadow($color, $size: 10px, $opacity: 0.75) {
  box-shadow: 0 0 $size rgba(map.get($colors, $color, "dark"), $opacity);

  @media (prefers-color-scheme: light) {
    box-shadow: 0 0 $size rgba(map.get($colors, $color, "light"), $opacity);
  }
}

@mixin gradient-base($direction, $gradient-colors) {
  background: getKeyInMap($gradient-colors, 1); /* Old browsers */
  background: -moz-linear-gradient(
    $direction,
    list.zip($gradient-colors)
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    $direction,
    list.zip($gradient-colors)
  ); /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(
    $direction,
    list.zip($gradient-colors)
  ); /* Opera 11.10-11.50 */
  background: linear-gradient(
    $direction,
    list.zip($gradient-colors)
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@function map-gradient-colors($gradient-colors) {
  $dark-colors: ();
  $light-colors: ();

  @each $key, $value in $gradient-colors {
    $color: map.get($colors, $key) or
      (
        dark: $key,
        light: $key,
      );

    @if $value {
      $dark-colors: list.append($dark-colors, map.get($color, "dark") $value);
      $light-colors: list.append(
        $light-colors,
        map.get($color, "light") $value
      );
    } @else {
      $dark-colors: list.append($dark-colors, map.get($color, "dark"));
      $light-colors: list.append($light-colors, map.get($color, "light"));
    }
  }

  $generated-colors: (
    dark: $dark-colors,
    light: $light-colors,
  );

  @return $generated-colors;
}

@mixin gradient($direction, $gradient-colors...) {
  $generated-colors: map-gradient-colors($gradient-colors);
  @include gradient-base(
    $direction,
    list.zip(map.get($generated-colors, "dark"))
  );

  @media (prefers-color-scheme: light) {
    @include gradient-base(
      $direction,
      list.zip(map.get($generated-colors, "light"))
    );
  }
}

// End Variables, Functions, Mixins

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@500&display=swap");

:root {
  color-scheme: light dark;
}

html {
  @include themedProperty(background, "background");
}

body {
  font-family: "Roboto", Arial, sans-serif;
  @include themedProperty(color, "text");
  @include gradient(
    15deg,
    "background" 0%,
    "background-2" 90%,
    "background-3" 100%
  );
  min-height: 100vh;
  margin: 0;
  padding: 8px;
  padding-top: 2.5em;

  // Handle notch / dynamic island
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

h1,
h2,
h3 {
  margin-top: 0;

  & code {
    font-size: inherit;
  }
}

a {
  @include themedProperty(color, "link");
  @include themedTextGlow("link", 0px);
  transition:
    color 0.2s,
    text-shadow 0.2s;

  &:hover {
    @include themedProperty(color, "link-hover");
    @include themedTextGlow("link");
  }
}

code {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

button,
select,
input {
  @include themedProperty(background, "input-bg");
  @include themedProperty(color, "input-fg");
  @include themedBoxShadow("input-bg", 0px);
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  padding: 8px;
  outline-color: rgba(0, 0, 0, 0);
  outline-style: none;
  outline-width: 0;

  &:hover,
  &:hover:focus {
    cursor: pointer;
    @include themedProperty(background, "input-hover-bg");
    @include themedBoxShadow("input-bg", 15px);
  }

  &:focus {
    @include themedProperty(background, "input-focus-bg");
    @include themedBoxShadow("input-bg", 15px);
    @include themedProperty(outline-color, "main");
  }

  &:focus-visible {
    outline-style: auto;
    outline-width: 1px;
  }

  &:disabled,
  &:disabled:hover {
    cursor: not-allowed;
    @include themedProperty(background, "input-disabled-bg");
    @include themedProperty(color, "input-placeholder");
  }
}

input {
  text-align: left;
  margin-left: -2px;

  &::placeholder {
    @include themedProperty(color, "input-placeholder");
  }
}

nav#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  @include gradient(
    180deg,
    "background-3" 0%,
    "background-3" 75%,
    transparent 100%
  );
  margin-bottom: 1em;
  padding: 0.5em;
  padding-bottom: 0.75em;

  @media (prefers-color-scheme: light) {
    // Mitigate Safari bug
    @include gradient(
      180deg,
      "background-3" 0%,
      "background-3" 75%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  a {
    text-decoration: none;
    margin: 0 0.1em;
  }

  a:first-child {
    margin-left: 0;
  }

  a:last-child {
    float: right;
    margin-right: 0;
  }
}

footer {
  display: block;
  text-align: center;
  opacity: 0.75;
  background-color: rgb(0, 0, 0, 0.25);
  width: 100vw;
  margin-top: 1em;
  margin-left: min(-8px, calc(env(safe-area-inset-left) * -1));

  & > * {
    display: inline-block;
    margin-left: 4px;
  }

  .browserinfo {
    display: block;
    margin: 0;
    padding-bottom: 1em;
  }
}

hr {
  width: calc(
    100% - max(0px, env(safe-area-inset-left)) - max(
        0px,
        env(safe-area-inset-right)
      )
  );
  margin-left: min(0px, calc(env(safe-area-inset-left) * -1));
}

blockquote {
  @include themedProperty(background, "paper-bg");
  padding: 0.25em 1em;
  box-shadow: 0 0 10px black;
  border-radius: 8px;
  margin: 1em;

  &.cautionblock {
    @include themedProperty(background, "error-bg");

    .blockquote-header {
      @include themedProperty(color, "error");
      @include themedTextGlow("error");
    }
  }

  &.warningblock {
    @include themedProperty(background, "warning-bg");

    .blockquote-header {
      @include themedProperty(color, "warning");
      @include themedTextGlow("warning");
    }
  }

  &.tipblock {
    @include themedProperty(background, "success-bg");

    .blockquote-header {
      @include themedProperty(color, "success");
      @include themedTextGlow("success");
    }
  }

  &.noteblock {
    @include themedProperty(background, "note-bg");

    .blockquote-header {
      @include themedProperty(color, "note");
      @include themedTextGlow("note");
    }
  }

  &.importantblock {
    @include themedProperty(background, "important-bg");

    .blockquote-header {
      @include themedProperty(color, "important");
      @include themedTextGlow("important");
    }
  }
}

.paper {
  @include themedProperty(background, "paper-bg");
  padding: 1em 8px;
  box-shadow: 0 0 10px black;
  border-radius: 8px;
  margin: 1em auto;
}

.error-notice {
  @include themedProperty(color, "error");
  @include themedTextGlow("error");
}

.warning-notice {
  @include themedProperty(color, "warning");
  @include themedTextGlow("warning");
}

.success-notice {
  @include themedProperty(color, "success");
  @include themedTextGlow("success");
}

.hidden {
  display: none;
}

.mdi:before {
  /* Ensure that *something* shows up on older browsers */
  content: "\FFFD";
}

/* Homepage */

#title {
  @include themedProperty(color, "main");
  @include themedTextGlow("main", 20px);
  font-family: Montserrat, sans-serif;
  font-size: 36pt;
  font-weight: 500;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.1em;

  img {
    width: 48px;
    height: 48px;
  }

  span {
    display: block;
    font-size: 30pt;

    a {
      display: inline-block;

      &:not(:hover) {
        color: inherit;
        text-shadow: inherit;
      }
    }
  }

  @media screen and (max-width: 600px), screen and (max-device-width: 600px) {
    font-size: 30pt;

    span {
      font-size: 26pt;
    }
  }
}

#subtitle {
  width: 90%;
  margin: auto;
  font-size: 16pt;
  text-align: center;
}

#run-tests {
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: auto;
  margin-top: 2em;
  padding: 2em;
  text-align: center;

  @media screen and (max-width: 600px), screen and (max-device-width: 600px) {
    padding: 1em;
  }

  #test-entry {
    display: block;
  }

  .browserinfo {
    margin-bottom: 0;
  }

  #unsecure-warning {
    font-size: 125%;
  }
}

#test-selection {
  padding-left: 16px;
  width: 240px;
  max-width: 70%;
}

#supported-browsers {
  text-align: center;
  margin-top: 2em;
  padding-top: 0.5em;
  padding-bottom: 1em;
}

.compat-table {
  margin: auto;
  text-align: center;

  .compat-table-entry {
    display: inline-block;
    margin-right: 16px;

    img {
      display: inline-block;
      width: 32px;
      height: 32px;
      vertical-align: middle;
    }

    p {
      display: inline-block;
      margin: 0;
      margin-left: 8px;
    }
  }

  .compat-table-separator {
    display: none;

    @media screen and (max-width: 900px), screen and (max-device-width: 900px) {
      display: block;
    }
  }
}

#extension-warnings {
  @include themedProperty(background, "error-bg");
  @include themedBoxShadow("error-bg", 40px);

  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 4em - 24px);
  margin: 1em auto;
  text-align: center;

  h2,
  #extension-warnings-disable-or-switch {
    @include themedTextGlow("error", 20px);
  }

  h2,
  h3,
  #extension-warnings-disable-or-switch {
    @include themedProperty(color, "error");
  }

  h3 {
    margin-bottom: 0;
  }

  p {
    margin-top: 0;
  }
}

#known-caveats {
  text-align: center;
  list-style-position: inside;

  #known-caveats-file-issue {
    @include themedProperty(color, "error");
    font-weight: bold;
  }
}

#privacy-notice {
  text-align: center;
}

/* End: Homepage */

#status {
  font-weight: bold;
}

.result {
  margin-bottom: 0.5em;

  summary {
    word-break: break-all;
  }

  .result-value {
    font-weight: bold;
  }

  .result-info {
    display: block;
    margin-left: 1.5em;
    margin-bottom: 1em;
  }

  .result-message {
    font-style: italic;
    margin-top: 0.2em;
  }

  &.result-true {
    @include gradient(
      to right,
      "success-bg" 0%,
      "success-bg" 75%,
      transparent 100%
    );

    .result-value {
      @include themedProperty(color, "success");
      @include themedTextGlow("success", 10px, 0.5);
    }
  }

  &.result-false {
    @include gradient(
      to right,
      "error-bg" 0%,
      "error-bg" 75%,
      transparent 100%
    );

    .result-value {
      @include themedProperty(color, "error");
      @include themedTextGlow("error", 10px, 0.5);
    }
  }

  &.result-null {
    .result-value {
      @include themedProperty(color, "input-placeholder");
      @include themedTextGlow("input-placeholder", 10px, 0.5);
    }
  }
}