:root {
--main-bg-color: #fff;
--main-text-color: #555;
--dark-text-color: #222;
--light-text-color: #c7c7c7;
--brand-primary-color: #063ca9;
--light-bg-color: #ededee;
--dark-bg-color: #404040;
--timeline-color: #711c1c;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #100f0f;
--main-text-color: #efe8e8;
--dark-text-color: #8b8787;
--light-text-color: #c7c7c7;
--brand-primary-color: #063ca9;
--light-bg-color: #ededee;
--dark-bg-color: #404040;
--timeline-color: #d0abab;
}
}
body {
height: 100%;
background: var(--main-bg-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--main-text-color);
font-weight: 300;
margin: 0;
padding: 0;
}
h1 {
font-weight: lighter;
letter-spacing: 0.8;
font-size: 3rem;
color: var(--dark-text-color);
margin: 0;
}
h1.headline {
margin-top: 20%;
font-size: 5rem;
}
#e_all h1{
margin-top: 5%;
}
.text-center {
text-align: center;
}
.text-timeline{
color: var(--timeline-color);
}
p.entry {
font-size: 1.6rem;
}
.container {
max-width: 75rem;
margin: 0 auto;
padding: 1rem;
}
.main-container{
min-height: calc(100vh - 210px);
}
.mt-4{
margin-top: 4rem;
}
.mt-2{
margin-top: 2rem !important;
}
.header {
background: var(--main-bg-color);
color: var(--dark-text-color);
}
.header .container {
padding: 1rem 1.75rem 1.75rem 1.75rem;
}
.header h1 {
font-size: 2.5rem;
font-weight: 500;
}
.header p {
font-size: 1.2rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.header a {
color: var(--brand-primary-color);
display: inline;
text-decoration: none;
}
.footer {
background: var(--dark-bg-color);
color: var(--light-text-color);
}
.footer .container {
margin-top: 1rem;
text-align: center;
}
.source {
background: #343434;
color: var(--light-text-color);
padding: 0.5em 1em;
border-radius: 5px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 0.85rem;
margin: 0;
overflow-x: scroll;
}
.source span.line {
line-height: 1.4;
}
.source span.line .number {
color: #666;
}
.source .line.highlight,
.source .line .highlight {
display: block;
background: #9b7c7c;
color: #370303;
}
.source span.highlight .number {
color: #fff;
}
.tracer-container {
text-align: left !important;
}
.trace{
padding-left: 0px;
}
.trace-tab-buttons ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.trace-tab-buttons li {
flex: 1;
padding: .5rem .9rem;
text-align: center;
background-color: #d7c3c6;
margin: 5px;
border-radius: 8px;
cursor: pointer;
color: #000109;
font-weight: bold;
}
.trace-tab-buttons li.active {
color: #dcdeec;
background-color: #370303;
}
.trace-tab-contents .content{
display: none;;
}
.trace-tab-contents .content.active{
display: block;
}
.tabs {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
margin-bottom: -1px;
}
.tabs li {
display: inline;
}
.tabs a:link,
.tabs a:visited {
padding: 0rem 1rem;
line-height: 2.7;
text-decoration: none;
color: var(--dark-text-color);
background: var(--light-bg-color);
border: 1px solid rgba(0,0,0,0.15);
border-bottom: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: inline-block;
}
.tabs a:hover {
background: var(--light-bg-color);
border-color: rgba(0,0,0,0.15);
}
.tabs a.active {
background: var(--main-bg-color);
color: var(--main-text-color);
}
.tab-content {
background: var(--main-bg-color);
border: 1px solid rgba(0,0,0,0.15);
}
.content {
padding: 1rem;
}
.hide {
display: none;
}
.button{
display: inline-block !important;
padding: .95rem 2rem;
font-weight: bold;
background-color: #370303;
color: #b0abab !important;
border: 0px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
margin: 5px;
}
.text-danger {
color:#b10606;
}
.text-warning{
color:#dab409;
}
.alert {
margin-top: 2rem;
display: block;
text-align: center;
line-height: 3.0;
background: #d9edf7;
border: 1px solid #bcdff1;
border-radius: 5px;
color: #31708f;
}
ul, ol {
line-height: 1.8;
}
table {
width: 100%;
overflow: hidden;
}
th {
text-align: left;
border-bottom: 1px solid #e7e7e7;
padding-bottom: 0.5rem;
}
td {
padding: 0.2rem 0.5rem 0.2rem 0;
}
td pre {
white-space: pre-wrap;
}
.trace a {
color: #0967df;
}
.trace table {
width: 100%;
}
.trace tr td:first-child {
min-width: 5em;
font-weight: bold;
}
.trace td {
background: #343434;
padding: 0 1rem;
}
.trace td pre {
margin: 0;
}
|