styles.less

@import (reference) "fontawesome";
@nav-height: 66px;
@nav-offset: 6rem;
@thumbnail-width: 140px;

@min-width-sm: 576px;
@min-width-md: 768px;
@min-width-lg: 992px;
@min-width-xl: 1200px;
@min-width-xxl: 1400px;

@color-primary: #37beff;
@color-background-alt: rgba(0, 0, 0, 0.05);
@color-header-background: #212529;
@color-banner-background: fadeout(mix(@color-primary, #fff, 33%), 50%);
@color-thumbnail-background: @color-background-alt;
@color-footer: #495057;

@color-dark-primary: darken(@color-primary, 30%);
@color-dark-background-alt: rgba(255, 255, 255, 0.05);
@color-dark-header-background: #000;
@color-dark-banner-background: fadeout(mix(@color-dark-primary, #000, 33%), 50%);
@color-dark-thumbnail-background: @color-dark-background-alt;
@color-dark-footer: lighten(@color-footer, 30%);

:root {
  --bs-font-sans-serif: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --rc-color-primary: @color-primary;
  --rc-color-header-background: @color-header-background;
  --rc-color-banner-background: @color-banner-background;
  --rc-color-background-alt: @color-background-alt;
  --rc-color-download-bg: darken(@color-primary, 5%);
  --rc-color-download-border: darken(@color-primary, 7%);
  --rc-color-thumbnail-background: @color-thumbnail-background;
  --rc-color-footer: @color-footer;
  --rc-color-footer-hover: darken(@color-footer, 15%);
}

html[data-bs-theme="dark"] {
  --rc-color-primary: @color-dark-primary;
  --rc-color-header-background: @color-dark-header-background;
  --rc-color-banner-background: @color-dark-banner-background;
  --rc-color-background-alt: @color-dark-background-alt;
  --rc-color-download-bg: darken(@color-dark-primary, 5%);
  --rc-color-download-border: darken(@color-dark-primary, 7%);
  --rc-color-thumbnail-background: @color-dark-thumbnail-background;
  --rc-color-footer: @color-dark-footer;
  --rc-color-footer-hover: lighten(@color-dark-footer, 15%);
}

.navbar {
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-padding-x: 0;
}

.bg-quote,
.bg-badge {
  background-color: var(--rc-color-background-alt) !important;
}

.bg-navbar,
.bg-header,
.modal-footer.bg-footer {
  background-color: var(--rc-color-header-background) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item),
.btn-link {
  text-decoration: none;

  &.anchor {
    top: @nav-offset * -1;
  }

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

.card-header {
  padding: .75rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.list-group-item {
  padding: .75rem 1.25rem;
}

#banner {
  margin-top: @nav-height;
  background-color: var(--rc-color-banner-background);

  > .container > .grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

    > .logo {
      grid-column: 1;
      grid-row: 1;
    }

    > .image {
      grid-column: 1;
      grid-row: 2;
    }

    > .download {
      grid-column: 1;
      grid-row: 3;
    }

    @media (min-width: @min-width-md) {
      grid-template-columns: 1fr 1.5fr;

      > .logo {
        grid-column: 1 / 3;
        grid-row: 1;
      }

      > .image {
        grid-column: 2;
        grid-row: 2;
      }

      > .download {
        grid-column: 1;
        grid-row: 2;
      }
    }

    @media (min-width: @min-width-lg) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;

      > .logo {
        grid-column: 1;
        grid-row: 1;
      }

      > .image {
        grid-column: 2;
        grid-row: 1 / 3;
      }

      > .download {
        grid-column: 1;
        grid-row: 2;
      }
    }
  }
}

main {
  padding-top: @nav-offset;

  h1, .h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  h2, .h2 {
    font-size: 1.8rem;
    margin-top: 1.5rem;
    font-weight: bold;
  }

  h3, .h3 {
    font-size: 1.4rem;
    margin-top: 1rem;
  }
}

blockquote {
  padding: 0.6rem 1rem;
  background-color: var(--rc-color-background-alt);

  > p {
    margin: 0;
  }
}

code.block {
  white-space: pre;
}

a.anchor {
  color: var(--bs-secondary-color);
  font-size: .75rem;
  vertical-align: middle;
  opacity: 0;

  &:hover {
    text-decoration: none !important;
  }

  &:after {
    font: var(--fa-font-solid);
    content: @fa-var-link;
  }

  :hover > & {
    opacity: 1;
  }
}

a.copy-link {
  color: var(--bs-secondary-color);
  font-size: .75rem;
  display: inline-block;
  width: 1.25em;
  text-align: center;
  margin-left: .5rem;

  &:hover {
    text-decoration: none !important;
  }

  &:after {
    font: var(--fa-font-regular);
    content: @fa-var-clipboard;
  }

  &.complete:after {
    font: var(--fa-font-solid);
    content: @fa-var-check;
  }

  &.error:after {
    font: var(--fa-font-solid);
    content: @fa-var-triangle-exclamation;
  }
}

a.copy-popover-link {
  color: var(--bs-body-color);
  text-decoration: none !important;

  &.checksum:after {
    font: var(--fa-font-solid);
    content: @fa-var-file-shield;
  }
}

div.popover.copy-popover > div.popover-body {
  padding: 0 var(--bs-popover-body-padding-x);
  display: flex;
}

h1, h2, h3, p {
  scroll-margin-top: 80px;
}

.artical-list > .artical:nth-of-type(2n+1),
ul.ul-striped li:nth-of-type(2n+1) {
  background-color: var(--rc-color-background-alt);
}

.artical-list + nav {
  margin-top: 2rem;
}

ul.screens,
footer ul {
  list-style: none;
}

.artical > div.snippet > p {
  display: inline;
}

footer {
  a {
    font-weight: 500;
    color: var(--rc-color-footer);

    &:focus,
    &:hover {
      color: var(--rc-color-footer-hover);
    }
  }
}

.rc-icon::before,
.rc-icon::after {
  font: var(--fa-font-solid);
}

.rc-icon::before {
  margin-right: .25rem;
}

.rc-icon::after {
  margin-left: .25rem;
}

a.back-link::before {
  content: @fa-var-angles-left;
}

a.read-link::after {
  content: @fa-var-angles-right;
}

a.external-link::after {
  content: @fa-var-up-right-from-square;
}

a.rss-link::after {
  content: @fa-var-rss;
}

a.mail-list-link::before {
  font: var(--fa-font-regular);
  content: @fa-var-envelope;
}
/*
a.asc-link::after {
  content: @fa-var-key;
}
*/
a.irc-link::after {
  content: @fa-var-comments;
}

a.dark-mode::before {
  content: @fa-var-moon;
}

a.light-mode::before {
  content: @fa-var-sun;
}

a.auto-mode::before {
  content: @fa-var-wand-sparkles;
}

a.current-theme::after {
  content: @fa-var-check;
}

.btn-rc-download {
  color: var(--bs-white) !important;
  background-color: var(--rc-color-primary);
  border-color: var(--rc-color-primary);

  &:hover {
    color: var(--bs-white);
    background-color: var(--rc-color-download-bg);
    border-color: var(--rc-color-download-border);
  }

  &::before {
    content: @fa-var-download;
  }
}

div.color-modes > ul.dropdown-menu {
  min-width: auto;

  > li > a {
    font-size: 0.8rem;

    &::before {
      text-align: center;
      width: 1.25em;
      margin-right: 0.5em;
      display: inline-block;
    }

    &::after {
      margin-left: 0.75em;
    }
  }
}

.img-thumbnail > a {
  width: @thumbnail-width;
  background-color: var(--rc-color-thumbnail-background);
}

#viewer {
  .modal-body {
    user-select: none;

    > img {
      position: relative;
    }

    .modal-loading span {
      font-size: 10em;
      opacity: 0.5;
    }

    .modal-arrow {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 30%;

      &.right-arrow {
        right: 0;
      }
    }

    &.loading {
      > img {
        display: none;
      }
    }

    &:not(.loading) {
      > .modal-loading {
        display: none;
      }
    }
  }

  .modal-footer {
    color: var(--bs-white);

    .nav {
      user-select: none;

      > .nav-link:not(.disabled) {
        color: var(--bs-white);
      }
    }
  }
}

div.download-grid {
  display: grid;
  grid-template-columns: 57% 13% 21% 9%;

  div.item-header,
  div.item-content {
    display: contents;

    > div {
      padding: .5rem;
      border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    }
  }

  &.grid-striped > div:nth-of-type(even) > div {
    background-color: var(--rc-color-background-alt);
  }

  @media (min-width: @min-width-sm) {
    grid-template-columns: 50% 25% 15% 10%;
  }

  @media (min-width: @min-width-lg) {
    grid-template-columns: 30% 15% 10% 43%;

    div.col-checksum span.copy-target {
      max-width: 90%;
    }
  }

  @media (min-width: @min-width-xxl) {
    grid-template-columns: 30% 12% 10% 48%;

    div.col-checksum span.copy-target {
      max-width: none;
    }
  }
}