matrix-spec-proposals/assets/scss/custom.scss

/*
Custom SCSS for the Matrix spec
*/

@import "variables_project";
@import "variables";

/* Overrides for the navbar */
.td-navbar {
  box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);
  min-height: 5rem;

  .navbar-brand {
    font-size: 1.1rem;

    .navbar-version {
      color: $secondary;
    }

  }

  a {
    color: $black;
  }
}

/* Styles for the sidebar nav */
.td-sidebar-nav {
  scroll-behavior: smooth;

  /* This overrides calc(100vh - 10rem);, which gives us a blank space at the bottom of the sidebar */
  max-height: calc(100vh - 6rem);

  &>.td-sidebar-nav__section {
    margin-top: 1rem;
  }

  &>.td-sidebar-nav__section > li > a.td-sidebar-link {
      font-weight: $font-weight-bold;
      font-size: 1.3rem;
  }

  /* This is to make the width of the items that have sub-items (like room versions)
  the same as the width of items that don't (like changelog) */
  .pr-md-3, .px-md-3 {
    padding-right: 0 !important;
  }

  a.indent-1 {
    padding-left: 1rem !important;
  }

  a.indent-2 {
    padding-left: 2rem;
  }

  a, a.td-sidebar-link {
    color: $gray-800;
    font-weight: $font-weight-normal;
    padding-top: .2rem;
    padding-bottom: .2rem;

    display: block;
    transition: all 100ms ease-in-out;

    &:hover {
      background-color: $secondary-lighter-background;
      color: $gray-800;
    }

    &.active, &active:hover {
      background-color: $secondary-background;
      font-weight: $font-weight-normal;
    }
  }
}

/* Customise footer */
footer {
  box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);
}

/* Auto numbering for headings */
.td-content {

  counter-reset: h2;

  &> h2 {
    counter-reset: h3
  }

  &> h3 {
    counter-reset: h4
  }

  &> h4 {
    counter-reset: h5
  }

  &> h5 {
    counter-reset: h6
  }

  &> h2:not(.no-numbers):before {
    display: inline; visibility: visible; counter-increment: h2; content: counter(h2) ". "
  }

  &> h3:not(.no-numbers):before {
    display: inline; visibility: visible; counter-increment: h3; content: counter(h2) "." counter(h3) ". "
  }

  &> h4:not(.no-numbers):before {
    display: inline; visibility: visible; counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "
  }

  &> h5:not(.no-numbers):before {
    display: inline; visibility: visible; counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
  }

  &> h6:not(.no-numbers):before {
    display: inline; visibility: visible; counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
  }

}

/* Adjust heading anchors for site header */
.td-content {
  &> h2,
  &> h3,
  &> h4,
  &> h5,
  &> h6,
  .rendered-data h1 {
    scroll-margin-top: 5rem;
  }
}

/* Styles for the table of contents */
#toc {
  padding-top: .5rem;
  padding-left: 1.5rem;

  ol {
    padding-left: 1rem;
    counter-reset: section;
    list-style-type: none;
  }

  #TableOfContents {
    &>ol>li {
      margin-bottom: .5rem;

      &>a {
        font-weight: $font-weight-bold;
      }
    }

    ol {
      padding-left: 0;
    }

    &>ol>li>a {
      padding-left: 1rem;
    }

    &>ol>li>ol>li>a {
      padding-left: 2rem;
    }

    &>ol>li>ol>li>ol>li>a {
      padding-left: 3rem;
    }

    &>ol>li>ol>li>ol>li>ol>li>a {
      padding-left: 4rem;
    }

    &>ol>li>ol>li>ol>li>ol>li>ol>li>a {
      padding-left: 5rem;
    }

  }

  li a:before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }

  #toc-title {
    font-weight: $font-weight-bold;
    font-size: 1.3rem;
  }

}

/* Miscellaneous custom bits */

/* Update link colours for MAtrix style */
a, a:hover {
  color: $secondary;
}

/* This is needed to stop the bottom of the Matrix icon from getting snipped off. */
.td-navbar .navbar-brand svg {
  height: 32px;
}

/* Give code samples and pre elements full-width */
.td-content > .highlight, .td-content > pre {
  max-width: 100%;
}

/*
Make padding symmetrical (this selector is used to apply padding-left: 3rem)
*/
.pl-md-5, .px-md-5 {
  padding-right: 3rem;
}

/* Adjust default styles for info banner */
.pageinfo-primary {
  max-width: 80%;
  margin-left: 0;
  border: 0;
  border-left: solid 5px $secondary;
  background-color: $gray-100;
}

.pageinfo-unstable {
  background-image: url('/icons/unstable.png');
  background-position: left 1rem center;
  background-repeat: no-repeat;
  padding-left: 100px;
}