janw/tapedrive

$font-family-sans-serif: 'Fira Sans Condensed', 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol';
$font-family-base: $font-family-sans-serif;
$headings-font-family: 'PT Sans Narrow', sans-serif;
$font-size-base: 1.15rem;
$font-weight-normal: 300;
$font-weight-bold: 700;
 
$gray-100: #f8f9fa !default;
$lighter: #dddddd;
 
$theme-colors: (
  'lighter': $lighter,
);
 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 890px,
  xl: 992px,
);
 
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 840px,
  xl: 960px,
);
 
$wrapper-max-width: 1050px;
 
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
@import 'borders-responsive';
@import 'dark-mode';
 
//
//  Elements in the top navbar
//
 
#navbar {
  a.site-title {
    color: $headings-color;
 
    & h1 {
      margin-bottom: -5px;
      font-size: $font-size-base * 1.2;
 
      @include media-breakpoint-only(md) {
        font-size: $font-size-base * 1.3;
      }
 
      @include media-breakpoint-up(lg) {
        font-size: $font-size-base * 1.5;
      }
    }
 
    & h1 small {
      font-size: 75%;
    }
 
    &:hover {
      color: #000;
      text-decoration: none;
    }
  }
 
  .img-logo {
    width: 42px;
  }
 
  ul.nav {
    & .nav-item a {
      color: $secondary;
    }
    & .nav-item.active a {
      color: $black !important;
    }
 
    & .nav-item:first-of-type() .nav-link {
      padding-left: 0;
    }
    & .nav-item:last-of-type() .nav-link {
      padding-right: 0;
    }
  }
}
 
.bg-white-transparent {
  background-color: rgba($white, 0.9);
}
 
#accordionHelp .card-body {
  font-size: 85%;
  padding: 1rem;
 
  & ul {
    padding-left: 1.5rem;
    margin-left: 0;
  }
}
 
b,
strong {
  font-weight: $font-weight-bold;
}
 
.naming-scheme-segments > code {
  background-color: $gray-100;
  @extend .border;
  @extend .rounded;
  border-color: $gray-300;
  padding: 1px;
  margin: 0.1rem;
 
  &:hover {
    color: darken($code-color, 10%) !important;
    border-color: lighten($code-color, 30%) !important;
    background-color: lighten($code-color, 40%) !important;
  }
}
 
#id_app-naming_scheme,
#id_app-inpath_dateformat {
  @extend .text-monospace;
}
 
.card-img-container {
  border-radius: 0 3px 3px 0;
  width: 250px;
  min-height: 250px;
 
  & div {
    width: 250px;
  }
}
 
.card-img-right {
  border-radius: 0 3px 3px 0;
  min-width: 250px;
  height: 250px;
}
 
#summary p.collapse:not(.show) {
  height: 69px !important;
  overflow: hidden;
  opacity: 0.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
 
#summary p.collapsing {
  min-height: 69px !important;
}
 
.list-group-item,
.list-group-item:hover {
  z-index: auto;
}
 
@include list-group-item-variant('lighter', #fefefe, #acacac);
@include list-group-item-variant('lightest', #ffffff, #dddddd);
 
.card-full-link {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
 
#podcast-summary {
  & > p:first-of-type() {
    font-size: $lead-font-size;
    font-weight: $lead-font-weight;
  }
}
 
.text-smaller {
  @include media-breakpoint-down(md) {
    font-size: 0.95rem;
    letter-spacing: 0.95;
  }
}
 
#id_listener-subscribed_podcasts {
  padding-top: 0.15rem;
 
  & .checkbox:not(:last-of-type()) {
    margin-bottom: 1rem;
  }
 
  & .checkbox {
    @extend .form-control;
    @extend .text-dark;
  }
}
 
input[name='listener-subscribed_podcasts'] {
  margin-right: calc(0.375rem + 1px);
}
 
label[for^='id_listener-subscribed_podcasts'] {
  @extend .text-dark;
  display: block;
  margin-bottom: 0rem;
}
 
.col-form-label {
  font-family: $headings-font-family;
}
 
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
footer.footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
 
  @include media-breakpoint-up(sm) {
    height: 60px;
    line-height: 57px;
  }
 
  .text-muted a {
    color: $gray-900;
  }
}
 
@include media-breakpoint-down(md) {
  #fullscreen_background,
  #credit_badge {
    display: none !important;
  }
}
 
input[type='file'] {
  @extend .form-control;
}
 
.img-logo {
  margin-right: 0.25rem;
  width: 42px;
}
 
.filter-fade {
  filter: grayscale(1) brightness(60%) contrast(150%);
  opacity: 0.5;
}
 
@keyframes filter-animation {
  0%,
  25% {
    opacity: 0;
  }
 
  0%,
  75% {
    filter: grayscale(1);
  }
 
  100% {
    filter: grayscale(0);
    opacity: 0.5;
  }
}
 
#credit_badge {
  position: fixed;
  background: rgba(white, 0.8);
  color: #333;
  text-decoration: none;
  left: 4px;
  bottom: 4px;
  padding: 2px 3px;
  font-size: 10px;
  display: inline-block;
  border-radius: 3px;
}
 
.delay-visibility {
  animation: delayed-opacity-animation 4s;
}
 
@keyframes delayed-opacity-animation {
  0%,
  65% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
$grid-columns: 10;
$grid-gutter-width: 10px;
 
.discovery-cover {
  padding-bottom: calc($grid-gutter-width / 2);
  padding-top: calc($grid-gutter-width / 2);
  @include make-col-ready();
  @include make-col(5);
 
  @include media-breakpoint-up(sm) {
    @include make-col(2);
  }
 
  & img {
    @extend .border;
    @extend .rounded;
    @extend .shadow-sm;
  }
}
 
.img-has-src {
  @extend .border;
  @extend .rounded;
  display: inline-block;
  padding: 0.5rem;
  margin: 0.1rem;
  font-size: 0.8rem;
  text-align: center;
}
 
.spinner-border-sm {
  margin-bottom: 4px;
}