url/SkillOpt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align method comparison chart with page theme

Browse Source
This commit is contained in:
Lliar-liar
2026-05-24 18:05:23 +00:00
parent bf2106808e
commit 88a99048a4
2 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+22 -22
View File
@@ -461,9 +461,9 @@
.comparison-frame { .comparison-frame {
margin-top: 18px; margin-top: 18px;
padding: 18px; padding: 18px;
color: #f8faf7; color: var(--ink);
background: #0b1018; background: var(--panel);
border: 1px solid var(--line-strong); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@@ -477,7 +477,7 @@
} }
.comparison-heading span { .comparison-heading span {
color: #f4c542; color: var(--red);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
@@ -506,9 +506,9 @@
gap: 7px; gap: 7px;
min-height: 26px; min-height: 26px;
padding: 5px 8px; padding: 5px 8px;
color: rgba(248, 250, 247, 0.82); color: var(--muted);
background: rgba(248, 250, 247, 0.06); background: rgba(235, 238, 240, 0.66);
border: 1px solid rgba(248, 250, 247, 0.14); border: 1px solid var(--line);
border-radius: 6px; border-radius: 6px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.67rem; font-size: 0.67rem;
@@ -532,9 +532,9 @@
min-width: 0; min-width: 0;
padding: 14px; padding: 14px;
background: background:
linear-gradient(180deg, rgba(248, 250, 247, 0.055), rgba(248, 250, 247, 0.02)), linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 247, 0.64)),
rgba(13, 17, 23, 0.72); var(--paper);
border: 1px solid rgba(248, 250, 247, 0.13); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
} }
@@ -557,9 +557,9 @@
.delta-pill { .delta-pill {
flex: none; flex: none;
padding: 5px 8px; padding: 5px 8px;
color: #87d996; color: var(--green);
background: rgba(46, 123, 63, 0.2); background: rgba(46, 123, 63, 0.12);
border: 1px solid rgba(135, 217, 150, 0.5); border: 1px solid rgba(46, 123, 63, 0.32);
border-radius: 6px; border-radius: 6px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.67rem; font-size: 0.67rem;
@@ -575,10 +575,10 @@
height: 170px; height: 170px;
padding: 24px 8px 22px 34px; padding: 24px 8px 22px 34px;
background: background:
linear-gradient(rgba(248, 250, 247, 0.08) 1px, transparent 1px) 0 24px / 100% 42px, linear-gradient(rgba(21, 25, 31, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
rgba(0, 0, 0, 0.16); rgba(235, 238, 240, 0.38);
border-left: 1px solid rgba(248, 250, 247, 0.24); border-left: 1px solid rgba(21, 25, 31, 0.25);
border-bottom: 1px solid rgba(248, 250, 247, 0.24); border-bottom: 1px solid rgba(21, 25, 31, 0.25);
border-radius: 6px; border-radius: 6px;
} }
@@ -586,7 +586,7 @@
position: absolute; position: absolute;
left: 7px; left: 7px;
bottom: 6px; bottom: 6px;
color: rgba(248, 250, 247, 0.46); color: var(--quiet);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.58rem; font-size: 0.58rem;
writing-mode: vertical-rl; writing-mode: vertical-rl;
@@ -605,8 +605,8 @@
} }
.method-bar.skillopt { .method-bar.skillopt {
border: 2px solid rgba(248, 250, 247, 0.82); border: 2px solid rgba(21, 25, 31, 0.62);
box-shadow: 0 0 16px rgba(135, 217, 150, 0.62); box-shadow: 0 0 0 3px rgba(46, 123, 63, 0.16), 0 10px 18px rgba(46, 123, 63, 0.22);
opacity: 1; opacity: 1;
} }
@@ -616,8 +616,8 @@
bottom: calc(100% + 6px); bottom: calc(100% + 6px);
transform: translateX(-50%); transform: translateX(-50%);
padding: 2px 5px; padding: 2px 5px;
color: #0b1018; color: #f8faf7;
background: #87d996; background: var(--green);
border-radius: 5px; border-radius: 5px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.62rem; font-size: 0.62rem;
skillopt.html
+22 -22
View File
@@ -461,9 +461,9 @@
.comparison-frame { .comparison-frame {
margin-top: 18px; margin-top: 18px;
padding: 18px; padding: 18px;
color: #f8faf7; color: var(--ink);
background: #0b1018; background: var(--panel);
border: 1px solid var(--line-strong); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@@ -477,7 +477,7 @@
} }
.comparison-heading span { .comparison-heading span {
color: #f4c542; color: var(--red);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
@@ -506,9 +506,9 @@
gap: 7px; gap: 7px;
min-height: 26px; min-height: 26px;
padding: 5px 8px; padding: 5px 8px;
color: rgba(248, 250, 247, 0.82); color: var(--muted);
background: rgba(248, 250, 247, 0.06); background: rgba(235, 238, 240, 0.66);
border: 1px solid rgba(248, 250, 247, 0.14); border: 1px solid var(--line);
border-radius: 6px; border-radius: 6px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.67rem; font-size: 0.67rem;
@@ -532,9 +532,9 @@
min-width: 0; min-width: 0;
padding: 14px; padding: 14px;
background: background:
linear-gradient(180deg, rgba(248, 250, 247, 0.055), rgba(248, 250, 247, 0.02)), linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 247, 0.64)),
rgba(13, 17, 23, 0.72); var(--paper);
border: 1px solid rgba(248, 250, 247, 0.13); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
} }
@@ -557,9 +557,9 @@
.delta-pill { .delta-pill {
flex: none; flex: none;
padding: 5px 8px; padding: 5px 8px;
color: #87d996; color: var(--green);
background: rgba(46, 123, 63, 0.2); background: rgba(46, 123, 63, 0.12);
border: 1px solid rgba(135, 217, 150, 0.5); border: 1px solid rgba(46, 123, 63, 0.32);
border-radius: 6px; border-radius: 6px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.67rem; font-size: 0.67rem;
@@ -575,10 +575,10 @@
height: 170px; height: 170px;
padding: 24px 8px 22px 34px; padding: 24px 8px 22px 34px;
background: background:
linear-gradient(rgba(248, 250, 247, 0.08) 1px, transparent 1px) 0 24px / 100% 42px, linear-gradient(rgba(21, 25, 31, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
rgba(0, 0, 0, 0.16); rgba(235, 238, 240, 0.38);
border-left: 1px solid rgba(248, 250, 247, 0.24); border-left: 1px solid rgba(21, 25, 31, 0.25);
border-bottom: 1px solid rgba(248, 250, 247, 0.24); border-bottom: 1px solid rgba(21, 25, 31, 0.25);
border-radius: 6px; border-radius: 6px;
} }
@@ -586,7 +586,7 @@
position: absolute; position: absolute;
left: 7px; left: 7px;
bottom: 6px; bottom: 6px;
color: rgba(248, 250, 247, 0.46); color: var(--quiet);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.58rem; font-size: 0.58rem;
writing-mode: vertical-rl; writing-mode: vertical-rl;
@@ -605,8 +605,8 @@
} }
.method-bar.skillopt { .method-bar.skillopt {
border: 2px solid rgba(248, 250, 247, 0.82); border: 2px solid rgba(21, 25, 31, 0.62);
box-shadow: 0 0 16px rgba(135, 217, 150, 0.62); box-shadow: 0 0 0 3px rgba(46, 123, 63, 0.16), 0 10px 18px rgba(46, 123, 63, 0.22);
opacity: 1; opacity: 1;
} }
@@ -616,8 +616,8 @@
bottom: calc(100% + 6px); bottom: calc(100% + 6px);
transform: translateX(-50%); transform: translateX(-50%);
padding: 2px 5px; padding: 2px 5px;
color: #0b1018; color: #f8faf7;
background: #87d996; background: var(--green);
border-radius: 5px; border-radius: 5px;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.62rem; font-size: 0.62rem;