app.scss

---
---

$background-color: #eef9ff;
$border-color: #ccdce6;
$breakpoint-medium: 768px;
$breakpoint-small: 425px;
$breakpoint-footer: 920px;
$button-active-color: #e6475a;
$button-color: #ff4f64;
$graph-color: rgba(191, 237, 245, 0.5);
$loading-color-light: rgba(191, 237, 245, 0.5);
$loading-color-dark: rgb(191, 237, 245);
$alert-color: rgb(221, 17, 68);
$success-color: rgb(15, 142, 15);
$icon-color: #9aa7b4;
$link-active-color: #00b1ce;
$link-color: #00c5e5;
$primary-color: #ff4f64;
$secondary-color: #00c5e5;
$text-color: #415659;
$text-muted: #777;
$icon-fill-color: "#9AA7B4";

@import "code.scss";
@import "dashboard.scss";
@import "form.scss";
@import "helpers.scss";
@import "homepage.scss";
@import "layouts.scss";
@import "header.scss";
@import "footer.scss";
@import "signup.scss";
@import "stats.scss";
@import "typography.scss";
@import "highlighting.scss";
@import "checkbox.scss";
@import "posts.scss";

.text-light {
  font-weight: 100;
}

blockquote {
  border-left: 5px solid #00c5e5;
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  background-color: #eef9ff;
  border-radius: 3px;
  padding: 0.5rem 1rem;

  > p:first-of-type {
    margin-top: 0;
  }
  > p:last-of-type {
    margin-bottom: 0;
  }
}

.text-light {
  font-weight: 100;
}

ul.related-posts {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    margin: 0;
  }

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

.tweet img {
  max-width: 100%;
  width: 400px;
}

.page img.avatar {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
  border-radius: 50%;
  margin: 0 5px 0 0;
  display: inline-block;
}

.mini-avatar {
  width: 30px;
  height: 30px;
  vertical-align: bottom;
  border-radius: 50%;
  margin: 0 5px;
}

.page {
  img {
    max-width: 100%;
    display: block;

    &.limit-height {
      max-height: 300px;
    }

    &.mini-avatar {
      display: unset;
      margin: unset;
    }
  }

  video {
    max-width: 100%;
  }

  li img,
  iframe.border,
  video.border,
  img.border {
    border: 1px solid #00c5e5;
    border-radius: 10px;
  }

  img.painting {
    border-radius: 10px;
    width: 100%;
  }

  .border-radius {
    border-radius: 10px;
  }

  .canvas {
    position: relative;
    box-shadow: inset 0 0 20px #404040;
    margin: 75px 50px;

    @media (max-width: $breakpoint-medium) {
      margin: 55px 30px;
    }

    &::before {
      content: " ";
      position: absolute;
      top: -50px;
      right: -50px;
      bottom: -50px;
      left: -50px;
      border-radius: 3px;
      border: #d5d5d5 1px solid;
      box-shadow: 2px 2px 8px 7px #f4f4f4;

      @media (max-width: $breakpoint-medium) {
        top: -30px;
        right: -30px;
        bottom: -30px;
        left: -30px;
      }
    }

    img {
      position: relative;
      z-index: -2;
    }
  }

  .canvas + .caption,
  .border-radius + .caption,
  .border + .caption,
  .video-container + .caption {
    font-size: 14px;
    color: #6f6f6f;
    margin-top: 3px;
    text-align: center;
    margin-bottom: 1rem;
  }

  .canvas + .caption {
    margin-top: -8px;
  }

  li p:first-of-type {
    margin-top: 0;
  }

  .highlighter-rouge + .caption {
    margin-top: -0.5rem;
  }
}

ol.thank-you-steps {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;

  li {
    margin-top: 1rem;
  }

  li::first-line {
    font-weight: bold;
    color: #415659;
  }
}

.table-wrapper {
  overflow-x: auto;

  th,
  td {
    white-space: nowrap;
  }
}
table {
  border-collapse: collapse;
}

tbody tr td:first-child {
  border-left: 2px solid #eef9ff;
}
tbody tr td:last-child {
  border-right: 2px solid #eef9ff;
}
tbody tr:last-child td {
  border-bottom: 2px solid #eef9ff;
}
tr:nth-child(2n + 1) {
  background: #eef9ff;
}
td,
th {
  padding: 0.3rem 0.6rem;
  vertical-align: top;
}
th {
  text-align: left;
  background-color: #65aed7;
  border: 2px solid #65aed7;
  color: white;
  font-weight: normal;
}

.video-container {
  line-height: 0;
  font-size: 0;
  width: 100%;
  position: relative;
}

.video-container.paused::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
  background-color: rgba(191, 237, 245, 0.5);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-4 -4 32 32'%3e%3cpath fill='%2300c5e5' stroke='%23ffffff' d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z'/%3e%3c/svg%3e");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100px 100px;
  pointer-events: none;
  border-radius: 10px;
}

@media (max-width: $breakpoint-medium) {
  .video-container.paused::before {
    background-size: 60px 60px;
  }
}

.video-container.scaled {
  height: 0px;
}

.video-container > video {
  width: 100%;
}

.video-container.scaled > video {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page table img {
  margin: 0 auto;
}

table tbody td {
  vertical-align: middle;
}

.gif {
  --text-color: #eef9ff;
  --background-color: var(--background-color, #415659);

  margin: 1rem auto;
  max-width: 500px;
  max-height: 300px;
  position: relative;
  border-radius: 10px;
  box-shadow: 2px 2px 5px 2px #ececec, 0px 0px 10px 5px #f8f8f8;
  background-color: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;

  &.align-left {
    margin: 1rem 0;
  }

  .loading {
    position: absolute;
    color: var(--text-color);
    z-index: 0;
  }

  & > img,
  details img {
    border-radius: 10px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  & > img,
  details img {
    z-index: 1;
  }

  img,
  details,
  summary {
    border-radius: 10px;
    color: var(--text-color);
    background-color: var(--background-color);
  }

  summary {
    color: var(--text-color);
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    border-radius: 50%;
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23415659' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 13.5v-7c0-.4.5-.7.8-.4l4.7 3.5c.2.2.2.6 0 .8l-4.7 3.5c-.3.2-.8 0-.8-.4Z'/%3E%3C/svg%3E");
  }

  [open] summary {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23415659' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 14a1 1 0 0 1-1-1V9c0-.6.4-1 1-1s1 .4 1 1v6c0 .6-.4 1-1 1Zm4 0a1 1 0 0 1-1-1V9c0-.6.4-1 1-1s1 .4 1 1v6c0 .6-.4 1-1 1Z'/%3E%3C/svg%3E");
  }

  /* for blink/webkit */
  details summary::-webkit-details-marker {
    display: none;
  }
  /* for firefox */
  details > summary:first-of-type {
    list-style: none;
  }

  summary:focus {
    box-shadow: 0 0 0 0.25rem #ff4f64;
    outline: transparent;
  }

  @media (hover: hover) {
    [open] summary,
    summary {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23415659' fill-rule='evenodd' d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-4.1-6.36c-.5 0-.95-.1-1.34-.32-.4-.22-.7-.54-.93-.96a3.2 3.2 0 0 1-.34-1.54v-1.64c0-.91.25-1.61.75-2.09.5-.49 1.18-.73 2.03-.73.84 0 1.49.23 1.94.69.45.45.68 1.06.68 1.83v.05H9.62v-.08c0-.29-.06-.54-.17-.77a1.27 1.27 0 0 0-.51-.55 1.7 1.7 0 0 0-.87-.2c-.53 0-.95.16-1.25.49-.3.32-.45.77-.45 1.34v1.68c0 .57.15 1.02.45 1.35.3.33.72.49 1.26.49.53 0 .92-.15 1.17-.44.25-.3.37-.67.37-1.14v-.13H7.74v-.93h2.95v3.46h-1v-.71h-.16c-.06.13-.15.26-.27.39-.11.13-.28.24-.5.33-.21.09-.5.13-.86.13Zm5.26-.14h-1.08v-7h1.08v7Zm5.78-7h-4.32v7h1.08v-3.02h2.98v-.98H15.7V9.48h3.24V8.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    }
  }
}

.inline-flag {
  all: unset !important;
  height: 20px !important;
  vertical-align: text-top !important;
  margin: 0 7px !important;
}

.flag-text {
  a {
    text-decoration: none;

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

.flag-text.location-homepage {
  margin: 5px 0 5px -7px !important;

  color: #777;
  a {
    color: #777;
  }
}

.macro-avatar {
  width: 22px;
  height: 22px;
  border-radius: 100px;
  display: inline !important;
  vertical-align: text-bottom;
  margin-left: 3px;
  margin-right: 3px;
}

.post-date {
  font-size: 14px;
  text-align: center;
  margin: 2rem 0;
}

.post-title {
  text-align: center;
}

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