File size: 2,576 Bytes
d031df4 d9fff05 d031df4 d9fff05 d031df4 d9fff05 d031df4 3155170 d031df4 d9fff05 d031df4 d9fff05 4396926 0b2ea27 4396926 0022e88 4396926 0b2ea27 4396926 0022e88 4396926 0022e88 4396926 d031df4 |
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 |
body>gradio-app {
background: var(--primary-950);
background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important;
padding-top: 120px;
}
div.tabs>div.tab-nav {
border-bottom: none !important;
padding: 0 0.25rem 0 0.25rem !important;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
div.tabs>div.tab-nav>button.selected {
border-width: 0 !important;
background: var(--primary-600) !important;
color: var(--neutral-950);
font-weight: 600;
}
div.tabs>div.tab-nav>button {
min-width: 145px !important;
}
div.tabs div.tabitem {
background-color: var(--neutral-900) !important;
border-top: 8px solid var(--primary-600) !important;
border-radius: var(--container-radius) !important;
}
.top-description h1 {
color: var(--neutral-400);
font-size: 2rem;
}
/* MARK: Toggle Button Checkbox */
/* INFO: gr.Checkbox elem_classes".toggle-btn" */
.toggle-btn {
display: flex;
flex-direction: column-reverse;
&>div.wrap {
display: none;
}
&>div:not(.wrap) {
margin-top: var(--spacing-lg);
margin-bottom: 0;
}
&>label {
position: relative;
width: 57px;
height: 27px;
display: inline-block;
border-radius: 13px;
background: var(--neutral-700);
box-shadow: var(--shadow-inset);
transition: background-color .3s, cursor .3s;
border: solid .4px var(--border-color-primary);
cursor: pointer;
&>input[type="checkbox"] {
width: 0;
height: 0;
opacity: 0;
}
&>span {
position: absolute;
left: 60px;
height: 27px;
min-width: 140px;
line-height: 27px;
}
}
&>label:has(input[type="checkbox"])::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--neutral-900);
box-shadow: var(--shadow-inset);
transition: left .2s ease-in-out, background .2s ease-in-out;
}
&>label:has(input[type="checkbox"]:checked)::after {
content: "";
position: absolute;
background: var(--neutral-50);
left: 32px;
}
&>label:has(input[type="checkbox"]:checked) {
background: var(--primary-600);
}
} |