Fix env config tabs with CSS radio labels, no JS required

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-08 21:19:23 +08:00
parent 4b3373a68d
commit 12e44ab26d
5 changed files with 73 additions and 47 deletions
+46 -1
View File
@@ -2225,6 +2225,19 @@ html[data-theme="light"] .journal-detail-img-thumb {
.env-config-body {
padding: 0;
overflow: hidden;
position: relative;
}
.env-tab-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.env-config-tabs {
@@ -2239,6 +2252,7 @@ html[data-theme="light"] .journal-detail-img-thumb {
.env-tab-btn {
flex: 0 0 auto;
display: inline-block;
border: none;
background: transparent;
color: var(--muted, #8892b0);
@@ -2249,18 +2263,49 @@ html[data-theme="light"] .journal-detail-img-thumb {
margin-bottom: -1px;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
user-select: none;
}
.env-tab-btn:hover {
color: #c5cae0;
}
.env-tab-btn.is-active {
.env-config-panels .env-panel {
display: none;
}
#env-sec-0:checked ~ .env-config-tabs label[for="env-sec-0"],
#env-sec-1:checked ~ .env-config-tabs label[for="env-sec-1"],
#env-sec-2:checked ~ .env-config-tabs label[for="env-sec-2"],
#env-sec-3:checked ~ .env-config-tabs label[for="env-sec-3"],
#env-sec-4:checked ~ .env-config-tabs label[for="env-sec-4"],
#env-sec-5:checked ~ .env-config-tabs label[for="env-sec-5"],
#env-sec-6:checked ~ .env-config-tabs label[for="env-sec-6"],
#env-sec-7:checked ~ .env-config-tabs label[for="env-sec-7"],
#env-sec-8:checked ~ .env-config-tabs label[for="env-sec-8"],
#env-sec-9:checked ~ .env-config-tabs label[for="env-sec-9"],
#env-sec-10:checked ~ .env-config-tabs label[for="env-sec-10"],
#env-sec-11:checked ~ .env-config-tabs label[for="env-sec-11"] {
color: #e8ecff;
border-bottom-color: var(--accent, #7c6cf0);
font-weight: 600;
}
#env-sec-0:checked ~ .env-config-panels .env-panel--0,
#env-sec-1:checked ~ .env-config-panels .env-panel--1,
#env-sec-2:checked ~ .env-config-panels .env-panel--2,
#env-sec-3:checked ~ .env-config-panels .env-panel--3,
#env-sec-4:checked ~ .env-config-panels .env-panel--4,
#env-sec-5:checked ~ .env-config-panels .env-panel--5,
#env-sec-6:checked ~ .env-config-panels .env-panel--6,
#env-sec-7:checked ~ .env-config-panels .env-panel--7,
#env-sec-8:checked ~ .env-config-panels .env-panel--8,
#env-sec-9:checked ~ .env-config-panels .env-panel--9,
#env-sec-10:checked ~ .env-config-panels .env-panel--10,
#env-sec-11:checked ~ .env-config-panels .env-panel--11 {
display: block;
}
.env-config-panels {
padding: 14px 16px 16px;
}