You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
8.3 KiB
SCSS
441 lines
8.3 KiB
SCSS
/*
|
|
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
/*
|
|
Custom SCSS for the Matrix spec
|
|
*/
|
|
|
|
@import "variables_project";
|
|
@import "variables";
|
|
|
|
/* Import the CSS classes for the syntax highlighter.
|
|
*
|
|
* This is generated with:
|
|
*
|
|
* hugo gen chromastyles --style=tango > assets/scss/syntax.scss
|
|
*/
|
|
@import "syntax.scss";
|
|
|
|
/* 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 {
|
|
/* don't attempt to use the sidebar (or things in it) as a scroll anchor. */
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
.td-sidebar-nav {
|
|
scroll-behavior: smooth;
|
|
overscroll-behavior: contain;
|
|
|
|
&>.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
@supports (position: sticky) {
|
|
.td-sidebar-nav {
|
|
/* This overrides calc(100vh - 10rem);, which gives us a blank space at the bottom of the sidebar */
|
|
max-height: calc(100vh - 6rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
}
|
|
|
|
/* Styles for alert boxes */
|
|
.alert {
|
|
&.note {
|
|
&:not(.omit-title):before {
|
|
content: "INFO: ";
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
border: 2px solid $note;
|
|
border-left-width: 5px;
|
|
background: $note-background;
|
|
}
|
|
|
|
&.rationale {
|
|
&:not(.omit-title):before {
|
|
content: "RATIONALE: ";
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
border: 2px solid $note;
|
|
border-left-width: 5px;
|
|
background: $note-background;
|
|
}
|
|
|
|
&.warning {
|
|
&:not(.omit-title):before {
|
|
content: "WARNING: ";
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
border: 2px solid $warning;
|
|
border-left-width: 5px;
|
|
background: $warning-background;
|
|
}
|
|
}
|
|
|
|
/* Styles for sections that are rendered from data, such as HTTP APIs and event schemas */
|
|
.rendered-data {
|
|
margin: 1rem 0 3rem 0;
|
|
|
|
details {
|
|
summary {
|
|
padding: .5rem 0;
|
|
list-style-position: outside;
|
|
|
|
p {
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deprecated-inline {
|
|
|
|
&:after {
|
|
content: " — DEPRECATED";
|
|
color: $warning;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
display: inline-block;
|
|
font-size: 1.3rem;
|
|
|
|
.endpoint {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-weight: $font-weight-bold;
|
|
font-size: 1.3rem;
|
|
margin: 3rem 0 .5rem 0;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: $font-weight-bold;
|
|
font-size: 1.1rem;
|
|
margin: 1.5rem 0 .75rem 0;
|
|
}
|
|
|
|
h2 + table, h3 + table, h3 + div.highlight {
|
|
margin-top: 0;
|
|
}
|
|
|
|
hr {
|
|
border-bottom: 2px solid $dark;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
p code, table code {
|
|
background-color: $white;
|
|
}
|
|
|
|
table {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
margin: 4rem 0;
|
|
|
|
caption {
|
|
caption-side: top;
|
|
color: $dark;
|
|
font-size: 1rem;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
th, td, caption {
|
|
padding: 1rem;
|
|
}
|
|
|
|
th {
|
|
background-color: $white;
|
|
}
|
|
|
|
caption, tr {
|
|
background-color: $table-row-default;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: $table-row-alternate;
|
|
}
|
|
|
|
&.basic-info, &.basic-info th, &.basic-info td {
|
|
table-layout: fixed;
|
|
margin: 1rem 0 .5rem 0;
|
|
background-color: $white;
|
|
}
|
|
|
|
&.basic-info th {
|
|
width: 15rem;
|
|
}
|
|
|
|
.col-name, .col-type, .col-status {
|
|
width: 25%;
|
|
}
|
|
|
|
.col-description {
|
|
width: 50%;
|
|
}
|
|
|
|
.col-status-description {
|
|
width: 75%;
|
|
}
|
|
|
|
}
|
|
|
|
pre {
|
|
border: 0;
|
|
border-left: solid 5px $secondary;
|
|
}
|
|
|
|
.http-api-method {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
|
|
/* The default CSS applies a style for blockquotes but only to immediate children
|
|
of .td-content. This applies the same style to any blockquotes that descend from
|
|
.td-content. */
|
|
.td-content blockquote {
|
|
padding: 0 0 0 1rem;
|
|
margin-bottom: $spacer;
|
|
color: $gray-600;
|
|
border-left: 6px solid $secondary;
|
|
}
|
|
|
|
/*
|
|
Make padding symmetrical (this selector is used in the default styles 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;
|
|
}
|
|
|
|
/* Full-width tables */
|
|
.td-content > table {
|
|
width: 100%;
|
|
display: table;
|
|
}
|