esphome-docs/_static/custom.css
Alex Boyd 051ed8736d
Redo the homeassistant service call API setup instructions (#3631)
Co-authored-by: Jesse Hills <3060199+jesserockz@users.noreply.github.com>
2024-04-26 21:52:15 +10:00

348 lines
5.2 KiB
CSS

.row-odd {
background-color: #f3f6f6;
}
.table-center tr.row-even > td {
text-align: center;
vertical-align: top;
}
div.document {
margin-bottom: 50px;
}
div.body {
min-width: initial;
}
div.sphinxsidebar {
max-height: 100%;
overflow-y: auto;
}
img.component-image {
border: none;
display: block;
margin-left: auto;
margin-right: auto;
height: 85px;
object-fit: contain;
border-radius: 10px;
max-width: 190px;
}
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 {
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-card .example {
margin: 10px;
}
.guide-card pre {
white-space: pre-line;
padding: 15px;
}
@media screen and (min-width: 875px) {
.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: 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;
}
.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;
}
img.component-image {
max-width: 80px;
}
}
.breadcrumbs li {
display: inline;
}
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;
}
div.body p, div.body dd, div.body li, div.body blockquote {
hyphens: none;
}
/* dark theme */
@media (prefers-color-scheme: dark) {
@media screen and (max-width: 875px) {
div.documentwrapper {
background-color: #212121;
}
div.sphinxsidebar {
background: #212121;
color: #ececec;
}
}
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;
}
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 {
background-color: #2d2c2c;
border: 1px solid #808080;
}
div.warning, div.caution {
background-color: #5d1616;
}
dt:target, span.highlighted {
background-color: #8e8129;
}
}