TxT360 / style.css
omkarenator's picture
initial commit
e137e27
raw
history blame
5.45 kB
/* style.css */
/* Define colors */
:root {
--distill-gray: rgb(107, 114, 128);
--distill-gray-light: rgb(185, 185, 185);
--distill-gray-lighter: rgb(228, 228, 228);
--distill-gray-lightest: rgb(245, 245, 245);
--distill-blue: #007BFF;
}
/* Container for the controls */
[id^="plot-"] {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px; /* Adjust the gap between controls as needed */
}
[id^="plot-"] figure {
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
}
.plotly_caption {
font-style: italic;
margin-top: 10px;
}
.plotly_controls {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 30px;
}
.plotly_input_container {
display: flex;
align-items: left;
flex-direction: column;
gap: 10px;
}
/* Style for the select dropdown */
.plotly_input_container select {
padding: 2px 4px;
/* border: 1px solid #ccc; */
line-height: 1.5em;
text-align: center;
border-radius: 4px;
font-size: 12px;
background-color: var(--distill-gray-lightest);
outline: none;
}
/* Style for the range input */
.plotly_slider {
display: flex;
align-items: center;
gap: 10px;
}
.plotly_slider > input[type="range"] {
-webkit-appearance: none;
height: 2px;
background: var(--distill-gray-light);
border-radius: 5px;
outline: none;
}
.plotly_slider > span {
font-size: 14px;
line-height: 1.6em;
min-width: 16px;
}
.plotly_slider > input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--distill-blue);
cursor: pointer;
}
.plotly_slider > input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--distill-blue);
cursor: pointer;
}
/* Style for the labels */
.plotly_input_container > label {
font-size: 14px;
font-weight: bold;
}
.main-plot-container {
margin-top: 21px;
margin-bottom: 35px;
}
.main-plot-container > figure {
display: block !important;
/* Let this be handled by graph-container */
margin-bottom: 0px;
margin-top: 0px;
}
.main-plot-container > div {
display: none !important;
}
.main-plot-container img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
.main-plot-container > figure {
display: none !important;
}
.main-plot-container > div {
display: flex !important;
}
}
d-byline .byline {
grid-template-columns: 1fr;
grid-column: text;
font-size: 0.9rem;
line-height: 1.8em;
}
@media (min-width: 768px) {
d-byline .byline {
grid-template-columns: 5fr 1fr 1fr;
}
}
#title-plot {
margin-top: 0px;
margin-bottom: 0px;
}
d-contents > nav a.active {
text-decoration: underline;
}
@media (max-width: 1199px) {
d-contents {
display: none;
justify-self: start;
align-self: start;
padding-bottom: 0.5em;
margin-bottom: 1em;
padding-left: 0.25em;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(0, 0, 0, 0.1);
}
}
d-contents a:hover {
border-bottom: none;
}
@media (min-width: 1100px) {
d-article {
/* Ensure d-article does not prevent sticky positioning */
overflow-x: visible;
grid-template-columns: [page-start] 1fr [page-start kicker-start] 1fr [middle-start] 1fr [text-start kicker-end] 8fr [text-end gutter-start] 1fr [middle-end] 0fr [page-end gutter-end] 1fr [screen-end];
}
d-contents {
align-self: start;
grid-column-start: 1 !important;
grid-column-end: 4 !important;
grid-row: auto / span 6;
justify-self: end;
margin-top: 0em;
padding-right: 3em;
padding-left: 2em;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-right-width: 1px;
border-right-style: solid;
border-right-color: rgba(0, 0, 0, 0.1);
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 10px; /* Adjust this value if needed */
}
}
d-contents nav h3 {
margin-top: 0;
margin-bottom: 1em;
}
d-contents nav div {
color: rgba(0, 0, 0, 0.8);
font-weight: bold;
}
d-contents nav a {
color: rgba(0, 0, 0, 0.8);
border-bottom: none;
text-decoration: none;
}
d-contents li {
list-style-type: none;
}
d-contents ul, d-article d-contents ul {
padding-left: 1em;
}
d-contents nav ul li {
margin-bottom: .25em;
}
d-contents nav a:hover {
text-decoration: underline solid rgba(0, 0, 0, 0.6);
}
d-contents nav ul {
margin-top: 0;
margin-bottom: 6px;
}
d-contents nav > div {
display: block;
outline: none;
margin-bottom: 0.5em;
}
d-contents nav > div > a {
font-size: 13px;
font-weight: 600;
}
d-article aside {
margin-bottom: 1em;
}
@media (min-width: 768px) {
d-article aside {
margin-bottom: 0;
}
}
d-contents nav > div > a:hover,
d-contents nav > ul > li > a:hover {
text-decoration: none;
}
.hljs {
background: rgb(255, 255, 255) !important;
}
code {
overflow: auto;
clear: both;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
}