services-panel/assets/sass/main.scss

@import './colors.scss';
@import './fonts.scss';

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'FantasqueNF', monospace;
}

header {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  
  h1.cli {
    font-size: calc(min(6vw, 2.5rem));
    .decoration {
      font-variant-ligatures: none;
    }
    .hint {
      font-style: italic;
    }
  }

  .subtitle {
    font-size: 1.15rem;
    margin-top: 1rem;
  }
}

.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

main {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem)  ;
  gap: 2.5rem;
  justify-content: center;
  font-size: 1.15rem;
  max-width: 90vw;
  margin-right: auto;
  margin-left: auto;

  fieldset {
    border: solid 3px;
    padding: 1rem;
    border-radius: 5px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;

      img {
        width: 64px;
        height: auto;
      }
    }

    a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  legend {
    padding-left: 1rem;
    padding-right: 1rem;
    margin: auto;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: $base_latte;
    color: $text_latte;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_latte;
      }
      .yellow {
        color: $yellow_latte;
      }
      .cyan {
        color: $sky_latte;
      }
      .hint {
        color: $subtext0_latte;
      }
    }
  }

  main {
    fieldset {
      border-color: $text_latte;

      a {
        color: $mauve_latte;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: $base_macchiato;
    color: $text_macchiato;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_macchiato;
      }
      .yellow {
        color: $yellow_macchiato;
      }
      .cyan {
        color: $sky_macchiato;
      }
      .hint {
        color: $subtext0_macchiato;
      }
    }
  }

  main {
    fieldset {
      border-color: $text_macchiato;

      a {
        color: $mauve_macchiato;
      }
    }
  }

}