esphome-docs/_static/custom.css

417 lines
6.6 KiB
CSS
Raw Normal View History

/* provide this to be queried in JS. Sadly can't be used in media-queries just yet*/
:root {
--mobile-width-stop: 875;
}
2018-05-13 11:37:02 +02:00
.row-odd {
background-color: #f3f6f6;
}
2023-07-09 23:49:12 +02:00
.table-center tr.row-even > td {
2018-05-13 11:37:02 +02:00
text-align: center;
2023-07-09 23:49:12 +02:00
vertical-align: top;
2018-05-13 11:37:02 +02:00
}
div.document {
margin-bottom: 50px;
}
div.body {
min-width: initial;
}
div.sphinxsidebar {
max-height: 100%;
overflow-y: auto;
}
2018-05-13 11:37:02 +02:00
img.component-image {
border: none;
display: block;
margin-left: auto;
margin-right: auto;
height: 85px;
object-fit: contain;
border-radius: 10px;
2023-07-09 23:49:12 +02:00
max-width: 190px;
2018-05-13 11:37:02 +02:00
}
table.docutils {
width: 100%;
}
2018-06-13 22:38:49 +02:00
.blink-tag {
-webkit-animation: 2s linear infinite blink_effect;
animation: 2s linear infinite blink_effect;
}
2023-07-09 23:49:12 +02:00
2018-06-13 22:38:49 +02:00
@-webkit-keyframes blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
2021-06-16 12:51:32 +02:00
}
2018-06-13 22:38:49 +02:00
}
2023-07-09 23:49:12 +02:00
2018-06-13 22:38:49 +02:00
@keyframes blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
2019-01-02 14:49:02 +01:00
}
#upgrade-footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
width: 100%;
2021-06-16 12:51:32 +02:00
background-color: rgba(20, 20, 20, 0.8);
2019-01-02 14:49:02 +01:00
min-height: 26px;
font-size: 14px;
color: #ccc;
line-height: 26px;
padding: 8px 0 8px 30px;
z-index: 9999;
2021-06-16 12:51:32 +02:00
display: none;
2019-01-02 14:49:02 +01:00
}
2023-07-09 23:49:12 +02:00
.footer-button-container {
margin: 0 60px 0 10px;
float: right;
}
2023-07-09 23:49:12 +02:00
.footer-button {
2019-01-02 14:49:02 +01:00
background-color: #b3b3b3;
color: #4e4e4e;
display: inline-block;
border-radius: 5px;
padding: 0 20px;
margin-left: 10px;
2019-01-02 14:49:02 +01:00
cursor: pointer;
text-decoration: none;
}
2023-07-09 23:49:12 +02:00
2019-01-02 14:49:02 +01:00
.not-hidden {
display: block !important;
}
img.index-shield {
max-width: 100%;
height: 26px;
margin-top: 10px;
}
2019-03-11 19:59:52 +01:00
div.index-shields {
display: flex;
justify-content: space-around;
margin: 0 64px;
}
2019-03-11 19:59:52 +01:00
.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 {
display: block;
height: auto;
width: 300px;
background-color: #f3f6f6;
border-radius: 8px;
2021-06-16 12:51:32 +02:00
box-shadow: 4px 4px 8px -4px #00000075;
padding-bottom: 8px;
2021-06-16 12:51:32 +02:00
box-sizing: border-box;
}
.guide-card-title {
font-weight: 300;
margin: 16px !important;
}
2023-07-09 23:49:12 +02:00
.guide-card .example {
margin: 10px;
}
.guide-card pre {
white-space: pre-line;
2023-07-09 23:49:12 +02:00
padding: 15px;
}
2023-07-09 23:49:12 +02:00
@media screen and (min-width: 875px) {
2021-06-16 12:51:32 +02:00
.guide-card:first-child {
z-index: 100;
}
2023-07-09 23:49:12 +02:00
2021-06-16 12:51:32 +02:00
.guide-card:nth-child(2) {
z-index: 50;
}
.guide-card:not(:first-child) {
margin-left: -40px;
padding-left: 40px;
}
}
2023-07-09 23:49:12 +02:00
@media screen and (max-width: 875px) {
div.sphinxsidebar {
width: 100%;
background: #fff;
color: #000;
border-bottom: 1px solid #444;
}
div.sphinxsidebar p.logo {
display: initial;
}
div.sphinxsidebar a, div.sphinxsidebar h3, div.sphinxsidebar h3 a {
color: #444;
}
2021-06-16 12:51:32 +02:00
.guide-container {
flex-direction: column;
}
2023-07-09 23:49:12 +02:00
.guide-card {
width: 100%;
margin: 8px 0;
2021-06-16 12:51:32 +02:00
padding: 0px;
}
2023-07-09 23:49:12 +02:00
.guide-card:not(:first-child) {
margin-left: 0;
}
2023-07-09 23:49:12 +02:00
.guide-card ul {
margin-left: 32px;
}
2023-07-09 23:49:12 +02:00
img.component-image {
max-width: 80px;
}
2021-06-16 12:51:32 +02:00
}
.breadcrumbs li {
display: inline;
}
2023-07-09 23:49:12 +02:00
a {
color: #004B6B;
text-decoration: none;
border-bottom: 1px dotted #004B6B;
}
a:hover {
color: #999999;
text-decoration: none;
border-bottom: 1px dotted #999999;
}
a:hover code {
background: none;
}
/* don't underline links that contain an image and nothing else */
a:has(> img:only-child) {
border-bottom: none;
}
2023-07-09 23:49:12 +02:00
div.body p, div.body dd, div.body li, div.body blockquote {
hyphens: none;
}
.pagefind-ui__form {
width: 100%;
max-width: 300px;
left: auto;
right: auto;
position: relative;
}
.pagefind-modular-list-excerpt, .pagefind-modular-list-title {
color: #111111 !important;
}
.search-results {
background-color: #f8f8f8;
box-shadow: 0 6px 10px rgb(0 0 0 / 0.2);
position: fixed;
z-index: 1500;
padding-right: 6px;
padding-left: 6px;
border-radius: 12px;
overflow: auto;
width: 0;
height: fit-content;
max-width: 650px;
transition: height, width 0.1s ease-in-out;
display: none;
}
2023-07-09 23:49:12 +02:00
@media screen and (max-width: 875px) {
/* hide search result thumbnails on mobile */
.pagefind-modular-list-thumb {
width: 0;
}
/* reduce height of search box */
.pagefind-modular-input-wrapper {
scale: 90%;
}
.logo {
scale: 60%;
}
}
2023-07-09 23:49:12 +02:00
/* dark theme */
@media (prefers-color-scheme: dark) {
@media screen and (max-width: 875px) {
div.documentwrapper {
background-color: #212121;
}
div.sphinxsidebar {
background: #212121;
color: #ececec;
}
2023-07-09 23:49:12 +02:00
}
body, div.body {
color: #ececec;
background-color: #212121;
}
img.dark-invert, img.logo {
filter: invert(1);
}
.row-odd {
background-color: #282828;
}
table.docutils {
-webkit-box-shadow: 2px 2px 4px #3b3838;
box-shadow: 2px 2px 4px #3b3838;
}
div.body {
color: #ececec;
background-color: #212121;
}
2023-07-09 23:49:12 +02:00
a, a.reference, a:visited {
color: #00bfff;
border-bottom: 1px dotted #00bfff;
}
a:hover {
color: #87ceeb;
border-bottom: 1px solid #87ceeb;
}
.toctree-wrapper a code {
color: #00bfff;
}
div.sphinxsidebar h3, div.sphinxsidebar h3 a {
color: #ececec;
}
div.sphinxsidebar ul {
color: #ececec;
}
div.sphinxsidebar a, .breadcrumbs a {
color: #ececec;
border-bottom: 1px dotted #ececec;
}
div.sphinxsidebar a:hover, .breadcrumbs a:hover {
border-bottom: 1px solid #ececec;
}
.guide-card {
background-color: #393939;
}
pre {
background-color: #0d1117;
}
code {
background-color: #424242;
color: #e2e2e2;
}
div.note, div.tip, div.important {
2023-07-09 23:49:12 +02:00
background-color: #2d2c2c;
border: 1px solid #808080;
}
div.warning, div.caution {
2023-07-09 23:49:12 +02:00
background-color: #5d1616;
}
dt:target, span.highlighted {
background-color: #8e8129;
}
.search-results {
background-color: #313131;
box-shadow: 0 6px 10px rgb(0 0 0 / 0.8);
}
.pagefind-modular-list-excerpt, .pagefind-modular-list-title {
color: #eeeeee !important;
}
.pagefind-ui__form, .pagefind-modular-input, .search-results {
color: #ececec !important;
}
:root {
--pagefind-ui-primary: #eeeeee;
--pagefind-ui-text: #eeeeee;
--pagefind-ui-background: #152028;
--pagefind-ui-border: #152028;
--pagefind-ui-tag: #152028;
}
}