esphome-docs/_static/custom.css
Sebastian Lövdahl a2067b5286
Make Table of Contents scrollable (#1696)
Inspired by https://stackoverflow.com/a/57040610/1283519, this change makes the Table of Contents scrollable (the menu as seen on on the left side in a non-mobile browser).

Fixes https://github.com/esphome/issues/issues/2088.
2021-12-06 12:29:41 +01:00

190 lines
2.9 KiB
CSS

.row-odd {
background-color: #f3f6f6;
}
.table-center tr.row-even > td {
text-align: center;
}
div.document {
margin-bottom: 50px;
}
div.body {
min-width: initial;
}
div.sphinxsidebar {
max-height: 100%;
overflow-y: auto;
}
img.component-image {
border: none;
vertical-align: middle;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 85px;
object-fit: contain;
}
table.docutils {
width: 100%;
}
.blink-tag {
-webkit-animation: 2s linear infinite blink_effect;
animation: 2s linear infinite blink_effect;
}
@-webkit-keyframes blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#upgrade-footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
width: 100%;
background-color: rgba(20, 20, 20, 0.8);
min-height: 26px;
font-size: 14px;
color: #ccc;
line-height: 26px;
padding: 8px 0 8px 30px;
z-index: 9999;
display: none;
}
.footer-button-container {
margin: 0 60px 0 10px;
float: right;
}
.footer-button {
background-color: #b3b3b3;
color: #4e4e4e;
display: inline-block;
border-radius: 5px;
padding: 0 20px;
margin-left: 10px;
cursor: pointer;
text-decoration: none;
}
.not-hidden {
display: block !important;
}
img.index-shield {
max-width: 100%;
height: 26px;
margin-top: 10px;
}
div.index-shields {
display: flex;
justify-content: space-around;
margin: 0 64px;
}
.supporters-row {
display: flex;
}
.supporters-column {
flex: 50%;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
.supporters-row .supporters-column:first-child {
border-right: 1px solid #a0a0a0;
}
.supporters-column img {
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
}
.guide-container {
margin: 32px 0;
display: flex;
justify-content: space-evenly;
}
.guide-card {
color: #004b6b;
display: block;
height: auto;
width: 300px;
background-color: #f3f6f6;
border-radius: 8px;
box-shadow: 4px 4px 8px -4px #00000075;
padding-bottom: 8px;
box-sizing: border-box;
}
.guide-card-title {
font-weight: 300;
margin: 16px !important;
}
.guide-code {
padding: 8px 16px;
margin: 8px;
color: black;
white-space: pre-line;
}
@media screen and (min-width: 870px) {
.guide-card:first-child {
z-index: 100;
}
.guide-card:nth-child(2) {
z-index: 50;
}
.guide-card:not(:first-child) {
margin-left: -40px;
padding-left: 40px;
}
}
@media screen and (max-width: 870px) {
.guide-container {
flex-direction: column;
}
.guide-card {
width: 100%;
margin: 8px 0;
padding: 0px;
}
.guide-card:not(:first-child) {
margin-left: 0;
}
.guide-card ul {
margin-left: 32px;
}
}