Spaces:
Sleeping
Sleeping
File size: 2,699 Bytes
e45d058 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
/* body[data-theme] { */
:root {
--tabs--label-text: #4b5563;
--tabs--label-text--hover: #4b5563;
--tabs--label-text--active: #0ea5e9;
--tabs--label-text--active--hover: #0ea5e9;
--tabs--label-background: transparent;
--tabs--label-background--hover: transparent;
--tabs--label-background--active: transparent;
--tabs--label-background--active--hover: transparent;
--tabs--label-border: transparent;
--tabs--label-border--hover: #d1d5db;
--tabs--label-border--active: #0ea5e9;
--tabs--label-border--active--hover: #0ea5e9;
--tabs--padding-x: 1.25em;
--tabs--margin-x: 0;
--tabs--border: #e6e6e6;
}
/* Hide radio buttons */
.tab-set > input {
position: absolute;
opacity: 0;
}
/* Tab set container */
.tab-set {
border-radius: 2px;
display: flex;
flex-wrap: wrap;
margin: 0.75em 0;
position: relative;
}
/* Tab label */
.tab-set > label {
z-index: 1;
width: auto;
border-bottom: 2px solid var(--tabs--label-border);
padding: 1em var(--tabs--padding-x) 0.5em;
margin-left: var(--tabs--margin-x);
color: var(--tabs--label-text);
background: var(--tabs--label-background);
transition: color 250ms;
cursor: pointer;
font-size: 0.875em;
font-weight: 700;
}
.tab-set > label:nth-child(2) {
margin-left: 0;
}
/* Hovered label */
.tab-set > label:hover {
color: var(--tabs--label-text--hover);
background: var(--tabs--label-background--hover);
border-color: var(--tabs--label-border--hover);
}
/* Active tab label */
.tab-set > input:checked + label {
color: var(--tabs--label-text--active);
background: var(--tabs--label-background--active);
border-color: var(--tabs--label-border--active);
}
.tab-set > input:checked + label:hover {
color: var(--tabs--label-text--active--hover);
background: var(--tabs--label-background--active--hover);
border-color: var(--tabs--label-border--active--hover);
}
/* Tab content */
.tab-content {
order: 99;
display: none;
width: 100%;
box-shadow: 0 -0.0625rem var(--tabs--border);
}
/* Show content, when input is checked. */
.tab-set > input:checked + label + .tab-content {
display: block;
}
.tab-content > p:first-child {
margin-top: 0.75rem;
}
/* Remove the top border on first code block */
.tab-content > [class^="highlight-"]:first-child .highlight {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Remove margins on children */
.tab-content > *:first-child {
margin-top: 0;
}
.tab-content > *:last-child {
margin-bottom: 0;
}
/* Remove margins on nested tabs */
.tab-content > .tab-set {
margin: 0;
}
|