fix(theseus/light): sweep hardcoded acid → var(--acid), Theseus button uses BCH dark
Two follow-ups on the light-mode acid work: 1) Every hardcoded #d6ff3d and rgba(214,255,61,X) in the browser chrome and every addon panel now goes through var(--acid), so the light-mode BCH-teal (#0AC18E) takes effect everywhere — not just where var(--acid) was already used. Hex-with-alpha (#d6ff3d55 etc.) converts to color-mix(); rgba() converts to rgb(from var(--acid)…) for the same alpha with the current --acid hue. Chromium 128+ supports both. Files touched: chrome / settings / error / home / approval / bchwallet / siawallet / screenshot (html + css). Screenshot editor.js's #d6ff3d stays — that's the drawing colour swatch, not UI chrome. 2) The Theseus button (.logo) and update chip (.upchip) become dark BCH-navy chips (#253A49 background, #F8FDFF text) in light mode. Previously the .logo hardcoded #d6ff3d text on a bright-acid tint — invisible on a light toolbar. The dark chip stands out and gives the light theme a distinct accent using the BCH secondary from whybitcoincash.com's palette.
This commit is contained in:
Local Dev
parent
f8c58538d0
commit
7806e3f31c
9 changed files with 3878 additions and 3869 deletions
|
|
@ -26,7 +26,7 @@
|
|||
.who .addon { color: var(--mut); }
|
||||
.title { font-size: 15px; font-weight: 650; letter-spacing: .1px; margin: 0 0 10px; }
|
||||
.origin { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
|
||||
background: var(--surface2); border: 1px solid rgba(214,255,61,.35); color: var(--acid);
|
||||
background: var(--surface2); border: 1px solid rgb(from var(--acid) r g b / .35); color: var(--acid);
|
||||
border-radius: 8px; padding: 6px 10px; margin-bottom: 12px;
|
||||
font: 13px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.origin .lbl { color: var(--dim); font: 11px system-ui, sans-serif; white-space: nowrap; }
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
.pact { display: flex; gap: 6px; justify-content: flex-end; }
|
||||
.pbtn { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface2);
|
||||
color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.pbtn:hover { border-color: rgba(214,255,61,.35); }
|
||||
.pbtn:hover { border-color: rgb(from var(--acid) r g b / .35); }
|
||||
.pbtn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn.danger { background: var(--danger); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn:focus-visible { outline: 2px solid rgba(214,255,61,.6); outline-offset: 1px; }
|
||||
.pbtn:focus-visible { outline: 2px solid rgb(from var(--acid) r g b / .6); outline-offset: 1px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
#drop .row .m .l, #drop .coinrow .m .l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .m .s, #drop .coinrow .m .s { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .v { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
|
||||
#drop .row.on { background: rgba(214,255,61,.10); }
|
||||
#drop .row.on { background: rgb(from var(--acid) r g b / .10); }
|
||||
#drop .coinrow .caret { color: var(--dim); font-size: 11px; }
|
||||
#drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
|
||||
#drop .addhdr { padding: 5px 8px 3px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgba(214,255,61,.4); }
|
||||
.btn:hover { border-color: rgb(from var(--acid) r g b / .4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], input[type=number], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgba(214,255,61,.5); }
|
||||
input:focus, textarea:focus { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
textarea { resize: vertical; min-height: 96px; font: 12px/1.45 ui-monospace, Consolas, monospace; }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
.amt input { flex: 1; }
|
||||
.unit { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
|
||||
.unit button { border: 0; background: var(--panel); color: var(--mut); padding: 0 10px; cursor: pointer; font: inherit; font-size: 12px; }
|
||||
.unit button.on { background: rgba(214,255,61,.14); color: var(--acid); }
|
||||
.unit button.on { background: rgb(from var(--acid) r g b / .14); color: var(--acid); }
|
||||
.fee { display: flex; align-items: center; gap: 10px; }
|
||||
.fee input[type=range] { flex: 1; accent-color: var(--acid); }
|
||||
.fee .v { color: var(--mut); font-size: 12px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ body { background: var(--bg); color: var(--ink);
|
|||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font: inherit; padding: 0; transition: background .1s, border-color .1s; }
|
||||
.tool:hover { border-color: rgba(214,255,61,.5); }
|
||||
.tool.active { background: rgba(214,255,61,.15); border-color: rgba(214,255,61,.7); color: var(--acid); }
|
||||
.tool:hover { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
.tool.active { background: rgb(from var(--acid) r g b / .15); border-color: rgb(from var(--acid) r g b / .7); color: var(--acid); }
|
||||
.tool:disabled { opacity: .4; cursor: default; }
|
||||
.tool svg { width: 16px; height: 16px; display: block; }
|
||||
.tool.wide { width: auto; padding: 0 10px; gap: 6px; }
|
||||
|
|
@ -38,13 +38,13 @@ body { background: var(--bg); color: var(--ink);
|
|||
|
||||
.swatch { width: 22px; height: 22px; border-radius: 50%; padding: 0;
|
||||
border: 2px solid var(--line); cursor: pointer; }
|
||||
.swatch.active { border-color: var(--acid); outline: 1px solid rgba(214,255,61,.35); outline-offset: 1px; }
|
||||
.swatch.active { border-color: var(--acid); outline: 1px solid rgb(from var(--acid) r g b / .35); outline-offset: 1px; }
|
||||
|
||||
.width { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 0; }
|
||||
.width.active { border-color: rgba(214,255,61,.7); background: rgba(214,255,61,.15); }
|
||||
.width.active { border-color: rgb(from var(--acid) r g b / .7); background: rgb(from var(--acid) r g b / .15); }
|
||||
.width .dot { border-radius: 50%; background: currentColor; color: var(--ink); }
|
||||
.width.active .dot { color: var(--acid); }
|
||||
|
||||
|
|
@ -81,8 +81,8 @@ body { background: var(--bg); color: var(--ink);
|
|||
.hint.on { opacity: 1; }
|
||||
|
||||
.toast { position: fixed; right: 16px; bottom: 16px;
|
||||
background: rgba(214,255,61,.15); color: var(--acid);
|
||||
border: 1px solid rgba(214,255,61,.5);
|
||||
background: rgb(from var(--acid) r g b / .15); color: var(--acid);
|
||||
border: 1px solid rgb(from var(--acid) r g b / .5);
|
||||
padding: 8px 12px; border-radius: 6px; font-size: 12.5px;
|
||||
opacity: 0; transform: translateY(6px);
|
||||
transition: opacity .2s, transform .2s; pointer-events: none; }
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<span class="sep"></span>
|
||||
|
||||
<!-- Palette -->
|
||||
<button class="swatch active" data-color="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
||||
<button class="swatch active" data-color="var(--acid)" style="background:var(--acid)" title="Acid"></button>
|
||||
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
||||
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
||||
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgba(214,255,61,.4); }
|
||||
.btn:hover { border-color: rgb(from var(--acid) r g b / .4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgba(214,255,61,.5); }
|
||||
input:focus, textarea:focus { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
.amt { display: flex; gap: 6px; }
|
||||
|
|
|
|||
65
chrome.html
65
chrome.html
|
|
@ -18,7 +18,7 @@
|
|||
--line:rgba(0,0,0,.18); --line2:rgba(0,0,0,.11); --hover:rgba(0,0,0,.06);
|
||||
/* Darker acid for light backgrounds — same hue family, ~5.5:1
|
||||
contrast on #ffffff so text and single-pixel accents stay
|
||||
readable. Tint fills (rgba(214,255,61,.08) etc.) stay as-is:
|
||||
readable. Tint fills (rgb(from var(--acid) r g b / .08) etc.) stay as-is:
|
||||
at low alpha the specific hue barely matters. */
|
||||
--acid: #0AC18E;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.tab.active { background: var(--active); color: var(--ink); }
|
||||
.tab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
||||
.tab .fav { width: 14px; height: 14px; flex: none; border-radius: 2px; object-fit: contain; }
|
||||
.tab .spin { width: 10px; height: 10px; flex: none; border: 1.5px solid #ffffff2e; border-top-color: #d6ff3d; border-radius: 50%; animation: spin .7s linear infinite; }
|
||||
.tab .spin { width: 10px; height: 10px; flex: none; border: 1.5px solid #ffffff2e; border-top-color: var(--acid); border-radius: 50%; animation: spin .7s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.tab .x { opacity: .5; cursor: pointer; padding: 0 2px; border-radius: 4px; }
|
||||
.tab .mute { font-size: 10px; opacity: .8; margin-right: 2px; }
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
.gchip .gccnt { color: var(--ink); font-weight: 600; }
|
||||
.gchip.collapsed { padding: 4px 10px; }
|
||||
/* Drag hover state — a tab being dragged onto a group chip. */
|
||||
.gchip.droptarget { background: rgba(214,255,61,.15); border-color: var(--acid); }
|
||||
.gchip.droptarget { background: rgb(from var(--acid) r g b / .15); border-color: var(--acid); }
|
||||
/* Vertical popover: click a collapsed chip → list its member tabs. */
|
||||
.grouppop { position: fixed; z-index: 9999; background: var(--surface, #1c222c); border: 1px solid var(--line2);
|
||||
border-radius: 10px; box-shadow: 0 12px 34px #000c; padding: 4px; min-width: 220px; max-width: 360px;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
.grouppop .gpit { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
|
||||
white-space: nowrap; overflow: hidden; }
|
||||
.grouppop .gpit:hover { background: var(--hover, #ffffff10); }
|
||||
.grouppop .gpit.active { background: rgba(214,255,61,.08); color: var(--acid); }
|
||||
.grouppop .gpit.active { background: rgb(from var(--acid) r g b / .08); color: var(--acid); }
|
||||
.grouppop .gpit .gfav { width: 14px; height: 14px; flex: none; object-fit: contain; border-radius: 2px; }
|
||||
.grouppop .gpit .gt { overflow: hidden; text-overflow: ellipsis; flex: 1; }
|
||||
.grouppop .gpit .gx { opacity: .5; padding: 0 4px; font-size: 12px; }
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
color: var(--mut); background: transparent; border: none; padding: 0; }
|
||||
.ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.ic:hover { background: var(--line2); color: var(--ink); }
|
||||
.ic.active { background: rgba(214,255,61,.12); color: var(--acid); }
|
||||
.ic.active { background: rgb(from var(--acid) r g b / .12); color: var(--acid); }
|
||||
.ic:active { background: var(--line); }
|
||||
.ic:disabled { opacity: .28; cursor: default; background: transparent; }
|
||||
/* One toolbar button per registered addon sidebar-panel, plus a static
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
cursor: pointer; border: none; background: transparent; padding: 0;
|
||||
font-size: 15px; line-height: 1; color: var(--mut); }
|
||||
.extbtn:hover { background: var(--line2); color: var(--ink); }
|
||||
.extbtn.active { background: rgba(214,255,61,.12); color: var(--acid); box-shadow: inset 0 -2px 0 var(--acid); }
|
||||
.extbtn.active { background: rgb(from var(--acid) r g b / .12); color: var(--acid); box-shadow: inset 0 -2px 0 var(--acid); }
|
||||
.extbtn.soon { opacity: .45; cursor: help; }
|
||||
.extbtn.soon:hover { opacity: .7; background: var(--line2); }
|
||||
/* downloads button — a small badge sits over the icon when there's activity */
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
.loadbar { height: 0; overflow: hidden; background: transparent; transition: height .12s linear; }
|
||||
.loadbar.on { height: 2px; }
|
||||
.loadbar.on::after { content: ""; display: block; height: 100%; width: 35%; border-radius: 2px;
|
||||
background: linear-gradient(90deg, transparent, #4b7bec, #d6ff3d, transparent); animation: loadslide 1.1s infinite linear; }
|
||||
background: linear-gradient(90deg, transparent, #4b7bec, var(--acid), transparent); animation: loadslide 1.1s infinite linear; }
|
||||
@keyframes loadslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
|
||||
/* address bar. flex:1 by default consumes remaining space; user can cap
|
||||
it via Settings > Appearance > Address bar size so the extension dock
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
.urldrag { right: -3px; }
|
||||
.searchdrag { left: -3px; }
|
||||
.urldrag:hover, .searchdrag:hover,
|
||||
.urldrag.dragging, .searchdrag.dragging { background: rgba(214,255,61,.35); }
|
||||
.urldrag.dragging, .searchdrag.dragging { background: rgb(from var(--acid) r g b / .35); }
|
||||
/* Adaptive toolbar. A ResizeObserver on .bar sets data-responsive:
|
||||
"0" wide — everything visible (default)
|
||||
"1" tight — auto-hide the search box, min-width for URL bar drops
|
||||
|
|
@ -210,14 +210,14 @@
|
|||
cursor: pointer; border: none; background: transparent; padding: 0;
|
||||
font-size: 15px; line-height: 1; color: var(--mut); }
|
||||
.extmore:hover { background: var(--line2); color: var(--ink); }
|
||||
.extmore.active { background: rgba(214,255,61,.12); color: var(--acid); }
|
||||
.extmore.active { background: rgb(from var(--acid) r g b / .12); color: var(--acid); }
|
||||
.extpop { position: fixed; z-index: 9999; background: var(--surface, #1c222c);
|
||||
border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 34px #000c;
|
||||
padding: 4px; min-width: 180px; }
|
||||
.extpop .epit { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
|
||||
border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
|
||||
.extpop .epit:hover { background: var(--hover, #ffffff10); }
|
||||
.extpop .epit.active { background: rgba(214,255,61,.10); color: var(--acid); }
|
||||
.extpop .epit.active { background: rgb(from var(--acid) r g b / .10); color: var(--acid); }
|
||||
.extpop .epit .ic { width: 16px; text-align: center; font-size: 15px; line-height: 1; }
|
||||
.extpop .epit .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.urlwrap:focus-within { border-color: #4b7bec; }
|
||||
|
|
@ -245,13 +245,13 @@
|
|||
cursor: default; user-select: none; transition: background .12s, color .12s, border-color .12s; }
|
||||
/* Single-chip form (non-collision hosts) */
|
||||
.reg.single { border-radius: 999px; border: 1px solid; }
|
||||
.reg.single.bcdn.active { background: rgba(214,255,61,.15); color: #d6ff3d; border-color: #d6ff3d55; }
|
||||
.reg.single.bcdn.active { background: rgb(from var(--acid) r g b / .15); color: var(--acid); border-color: color-mix(in srgb, var(--acid) 33%, transparent); }
|
||||
.reg.single.icann.active { background: rgba(76,158,255,.15); color: #4c9eff; border-color: #4c9eff55; }
|
||||
/* Toggle (segmented control) form for collision candidates */
|
||||
.tog { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid #ffffff26; }
|
||||
.tog .reg { border: 0; }
|
||||
.tog .reg + .reg { border-left: 1px solid #ffffff26; }
|
||||
.tog .reg.active.bcdn { background: rgba(214,255,61,.18); color: #d6ff3d; }
|
||||
.tog .reg.active.bcdn { background: rgb(from var(--acid) r g b / .18); color: var(--acid); }
|
||||
.tog .reg.active.icann { background: rgba(76,158,255,.18); color: #4c9eff; }
|
||||
.tog .reg.switch { background: transparent; color: #7b8494; cursor: pointer; }
|
||||
.tog .reg.switch:hover { color: #e5e7eb; background: rgba(255,255,255,.05); }
|
||||
|
|
@ -260,13 +260,13 @@
|
|||
/* Update-available chip — shows when the releases manifest names a newer
|
||||
version than this build. Two buttons: main body opens the download URL
|
||||
in the system browser; ✕ dismisses for the session. */
|
||||
.upchip { display: inline-flex; align-items: center; gap: 0; background: rgba(214,255,61,.14);
|
||||
border: 1px solid #d6ff3d55; border-radius: 999px; color: #eaffb0; font-size: 12px;
|
||||
.upchip { display: inline-flex; align-items: center; gap: 0; background: rgb(from var(--acid) r g b / .14);
|
||||
border: 1px solid color-mix(in srgb, var(--acid) 33%, transparent); border-radius: 999px; color: #eaffb0; font-size: 12px;
|
||||
font-weight: 600; padding: 0; overflow: hidden; }
|
||||
.upchip .upcore { background: transparent; border: none; color: inherit; font: inherit;
|
||||
padding: 5px 10px 5px 12px; cursor: pointer; white-space: nowrap; }
|
||||
.upchip .upcore:hover { background: rgba(214,255,61,.10); }
|
||||
.upchip .updismiss { background: transparent; border: none; border-left: 1px solid #d6ff3d33;
|
||||
.upchip .upcore:hover { background: rgb(from var(--acid) r g b / .10); }
|
||||
.upchip .updismiss { background: transparent; border: none; border-left: 1px solid color-mix(in srgb, var(--acid) 20%, transparent);
|
||||
color: inherit; opacity: .55; padding: 5px 8px; cursor: pointer; font-size: 11px; }
|
||||
.upchip .updismiss:hover { opacity: 1; }
|
||||
/* Password-fill chip — only visible when the vault is unlocked AND the
|
||||
|
|
@ -289,9 +289,9 @@
|
|||
#search { flex: 1; padding: 7px 4px; }
|
||||
.tor { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #2b2f3a; color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 12.5px; }
|
||||
.tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; }
|
||||
.logo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #d6ff3d; white-space: nowrap;
|
||||
padding: 6px 12px; border: 1px solid #d6ff3d33; border-radius: 8px; cursor: pointer; background: rgba(214,255,61,.08); font-size: 13px; }
|
||||
.logo:hover { background: rgba(214,255,61,.16); }
|
||||
.logo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--acid); white-space: nowrap;
|
||||
padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--acid) 20%, transparent); border-radius: 8px; cursor: pointer; background: rgb(from var(--acid) r g b / .08); font-size: 13px; }
|
||||
.logo:hover { background: rgb(from var(--acid) r g b / .16); }
|
||||
.logo .gear { font-size: 12px; opacity: .8; }
|
||||
/* favorites bar — new-tab page only, single compact row */
|
||||
.bookmarks { display: flex; align-items: center; gap: 4px; padding: 3px 10px 5px; height: 26px; overflow: hidden; }
|
||||
|
|
@ -311,13 +311,13 @@
|
|||
.promptbox input { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 6px;
|
||||
background: var(--surface2, #0f1621); border: 1px solid var(--line);
|
||||
color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
.promptbox input:focus { border-color: rgba(214,255,61,.55); }
|
||||
.promptbox input:focus { border-color: rgb(from var(--acid) r g b / .55); }
|
||||
.promptbox .pact { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
|
||||
.promptbox .pbtn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line);
|
||||
background: var(--surface2, #0f1621); color: var(--ink); cursor: pointer;
|
||||
font: inherit; font-size: 12.5px; }
|
||||
.promptbox .pbtn:hover { border-color: rgba(214,255,61,.35); }
|
||||
.promptbox .pbtn.primary { background: var(--acid, #d6ff3d); color: #0b0e14; border-color: transparent; font-weight: 600; }
|
||||
.promptbox .pbtn:hover { border-color: rgb(from var(--acid) r g b / .35); }
|
||||
.promptbox .pbtn.primary { background: var(--acid, var(--acid)); color: #0b0e14; border-color: transparent; font-weight: 600; }
|
||||
.bm .bx { opacity: 0; cursor: pointer; font-size: 11px; } .bm:hover .bx { opacity: .55; }
|
||||
.bm .bx:hover { opacity: 1; color: #f6768a; }
|
||||
.bm-empty { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
|
||||
|
|
@ -332,17 +332,26 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
.ctxmenu { background: #ffffff; border-color: rgba(0,0,0,.15); }
|
||||
.ctxmenu .mi:hover { background: rgba(0,0,0,.05); }
|
||||
/* BCH dark #253A49 as a light-mode accent so the toolbar isn't
|
||||
all-white-on-white. .logo (⛓ Theseus) becomes a dark chip; the
|
||||
download / update pill picks it up so both stand out. */
|
||||
.logo { background: #253A49; color: #F8FDFF; border-color: #253A49; }
|
||||
.logo:hover { background: #1a2c39; }
|
||||
.logo .gear { color: #F8FDFF; opacity: .85; }
|
||||
.upchip { background: #253A49; color: #F8FDFF; border-color: #253A49; }
|
||||
.upchip .upcore:hover { background: #1a2c39; }
|
||||
.upchip .updismiss { border-left-color: rgba(255,255,255,.20); color: #F8FDFF; }
|
||||
}
|
||||
.tordisc { font-size: 11.5px; color: #d9c7f2; background: #2a1c40; border-top: 1px solid #6b3fa055; padding: 5px 14px; }
|
||||
.tordisc a { color: #d6ff3d; }
|
||||
.tordisc a { color: var(--acid); }
|
||||
.bcnrbar { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--mut);
|
||||
background: #1a2417; border-top: 1px solid #d6ff3d33; padding: 6px 14px; }
|
||||
background: #1a2417; border-top: 1px solid color-mix(in srgb, var(--acid) 20%, transparent); padding: 6px 14px; }
|
||||
.bcnrbar .breg { font-size: 10px; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px;
|
||||
background: rgba(214,255,61,.14); color: #d6ff3d; border: 1px solid #d6ff3d33; }
|
||||
background: rgb(from var(--acid) r g b / .14); color: var(--acid); border: 1px solid color-mix(in srgb, var(--acid) 20%, transparent); }
|
||||
.bcnrbar b { color: var(--ink); }
|
||||
.bcnrbar .bopen { margin-left: auto; padding: 4px 11px; border-radius: 7px; border: 1px solid #d6ff3d55;
|
||||
background: rgba(214,255,61,.12); color: #eaffb0; cursor: pointer; font-size: 11.5px; }
|
||||
.bcnrbar .bopen:hover { background: rgba(214,255,61,.22); }
|
||||
.bcnrbar .bopen { margin-left: auto; padding: 4px 11px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--acid) 33%, transparent);
|
||||
background: rgb(from var(--acid) r g b / .12); color: #eaffb0; cursor: pointer; font-size: 11.5px; }
|
||||
.bcnrbar .bopen:hover { background: rgb(from var(--acid) r g b / .22); }
|
||||
.bcnrbar .bdismiss { color: var(--dim); text-decoration: none; } .bcnrbar .bdismiss:hover { color: var(--ink); }
|
||||
</style></head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -40,18 +40,18 @@
|
|||
.tried .t .m { width: 12px; text-align: center; color: var(--err); }
|
||||
.tried .t .m.ok { color: var(--acid) }
|
||||
.suggest { margin: 1rem 0 0; padding: 12px 14px; background: var(--panel2);
|
||||
border: 1px solid rgba(214,255,61,.25); border-radius: 10px; font-size: 13px; color: var(--ink); }
|
||||
border: 1px solid rgb(from var(--acid) r g b / .25); border-radius: 10px; font-size: 13px; color: var(--ink); }
|
||||
.suggest .lbl { color: var(--mut); font-size: 12px; margin-bottom: 6px; }
|
||||
.suggest .row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
|
||||
.suggest a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
|
||||
background: var(--panel); border: 1px solid var(--line); color: var(--acid);
|
||||
font-family: ui-monospace, monospace; font-size: 12.5px; text-decoration: none; cursor: pointer; }
|
||||
.suggest a:hover { border-color: rgba(214,255,61,.55); filter: brightness(1.05); }
|
||||
.suggest a:hover { border-color: rgb(from var(--acid) r g b / .55); filter: brightness(1.05); }
|
||||
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.3rem; }
|
||||
.btn { font-family: inherit; font-size: 13.5px; padding: 9px 16px; border-radius: 9px;
|
||||
border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
cursor: pointer; transition: filter .1s, background .1s, border-color .1s; }
|
||||
.btn:hover { background: var(--panel); border-color: rgba(214,255,61,.35); filter: brightness(1.05); }
|
||||
.btn:hover { background: var(--panel); border-color: rgb(from var(--acid) r g b / .35); filter: brightness(1.05); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 600; }
|
||||
.btn.primary:hover { background: var(--acid); filter: brightness(1.08); }
|
||||
.details { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
|
||||
|
|
|
|||
12
home.html
12
home.html
|
|
@ -31,7 +31,7 @@
|
|||
.cards-hdr .tools button { background: transparent; border: 1px solid var(--line2); color: var(--mut);
|
||||
border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; margin-left: 6px; }
|
||||
.cards-hdr .tools button:hover { background: var(--card-hi); color: var(--ink); }
|
||||
.cards-hdr .tools button.on { border-color: var(--acid); color: var(--acid); background: rgba(214,255,61,.08); }
|
||||
.cards-hdr .tools button.on { border-color: var(--acid); color: var(--acid); background: rgb(from var(--acid) r g b / .08); }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
|
||||
@media (min-width: 900px) { .grid { gap: 18px; } }
|
||||
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } }
|
||||
|
|
@ -44,21 +44,21 @@
|
|||
/* TLD suffix (.x, .bch, ...) rendered in the Silent Mode acid so the brand
|
||||
accent reads instantly across the grid. Subtle glow reinforces it. */
|
||||
.card .n .tld { color: var(--acid); font-weight: 700; letter-spacing: .3px;
|
||||
text-shadow: 0 0 8px rgba(214,255,61,.35); }
|
||||
text-shadow: 0 0 8px rgb(from var(--acid) r g b / .35); }
|
||||
.card .d { color: var(--mut); font-size: 13px; margin-top: 6px; line-height: 1.4; overflow: hidden;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
.card:hover .d { color: var(--ink); }
|
||||
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
|
||||
.badge { display: inline-block; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
|
||||
/* Provenance-typed badges (which chain/storage backed the site). */
|
||||
.b-on-chain { background: rgba(214,255,61,.14); color: var(--acid); }
|
||||
.b-on-chain { background: rgb(from var(--acid) r g b / .14); color: var(--acid); }
|
||||
.b-sia { background: rgba(179,157,219,.14); color: var(--sia); }
|
||||
.b-server { background: rgba(79,209,165,.14); color: var(--srv); }
|
||||
/* Product-role badges — same acid family with per-role hue shifts.
|
||||
Kept muted so the badge is legible but doesn't compete with the title. */
|
||||
.b-infrastructure { background: rgba(214,255,61,.10); color: var(--acid); }
|
||||
.b-infrastructure { background: rgb(from var(--acid) r g b / .10); color: var(--acid); }
|
||||
.b-navigator { background: rgba(75,123,236,.14); color: #7ea3ff; }
|
||||
.b-registrar { background: rgba(214,255,61,.10); color: var(--acid); }
|
||||
.b-registrar { background: rgb(from var(--acid) r g b / .10); color: var(--acid); }
|
||||
.b-code-host { background: rgba(179,157,219,.14); color: var(--sia); }
|
||||
.b-app-store { background: rgba(79,209,165,.14); color: var(--srv); }
|
||||
.b-search { background: rgba(255,199,95,.14); color: #ffc75f; }
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
.add-card { display: none; align-items: center; justify-content: center;
|
||||
background: transparent; border: 2px dashed var(--line2); border-radius: 14px;
|
||||
color: var(--mut); font-size: 14px; cursor: pointer; padding: 20px; min-height: 100px; }
|
||||
.add-card:hover { border-color: var(--acid); color: var(--acid); background: rgba(214,255,61,.04); }
|
||||
.add-card:hover { border-color: var(--acid); color: var(--acid); background: rgb(from var(--acid) r g b / .04); }
|
||||
body.editing .add-card { display: flex; }
|
||||
|
||||
/* Modal for add/edit */
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
.brand{font-weight:700;color:var(--acid);font-size:15px;padding:4px 12px 16px}
|
||||
.side a{display:block;padding:9px 12px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:14px;cursor:pointer}
|
||||
.side a:hover{background:#ffffff0a;color:var(--ink)}
|
||||
.side a.active{background:rgba(214,255,61,.12);color:var(--acid)}
|
||||
.side a.active{background:rgb(from var(--acid) r g b / .12);color:var(--acid)}
|
||||
/* content */
|
||||
.content{flex:1;overflow-y:auto;padding:2.4rem 2.4rem 4rem}
|
||||
section{max-width:640px}
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
code{font-family:ui-monospace,monospace;font-size:12px;background:#0e131b;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#bfeae4}
|
||||
.addeng{display:flex;gap:6px} .addeng input{flex:1;background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;outline:none}
|
||||
.addeng input:focus{border-color:#4b7bec}
|
||||
.btn{border:1px solid #d6ff3d55;background:rgba(214,255,61,.12);color:#eaffb0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
|
||||
.btn:hover{background:rgba(214,255,61,.22)}
|
||||
.btn{border:1px solid color-mix(in srgb, var(--acid) 33%, transparent);background:rgb(from var(--acid) r g b / .12);color:#eaffb0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
|
||||
.btn:hover{background:rgb(from var(--acid) r g b / .22)}
|
||||
/* segmented control — small toggle used elsewhere (kept for reuse) */
|
||||
.segseg{display:inline-flex;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
|
||||
.segseg .seg{background:transparent;color:var(--mut);border:none;border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;font:inherit;line-height:1.2}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
.themeCards .tc-label{font-weight:500;color:var(--ink)}
|
||||
.polrow{display:flex;align-items:center;gap:10px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
|
||||
.polrow:hover{background:#141c28}
|
||||
.polrow input{accent-color:#d6ff3d}
|
||||
.polrow input{accent-color:var(--acid)}
|
||||
.pmuted{color:var(--mut)}
|
||||
.ceng{display:flex;align-items:center;gap:8px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
|
||||
.ceng .cs{font-size:14px;flex:none}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
.engcat .cat .enm{flex:1}
|
||||
.engcat .cat .kind{font-size:10.5px;letter-spacing:.05em;color:var(--dim);padding:1px 6px;border:1px solid var(--line);border-radius:999px}
|
||||
.engcat .cat .add{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
|
||||
.engcat .cat .add:hover{background:rgba(214,255,61,.14);border-color:#d6ff3d55;color:#eaffb0}
|
||||
.engcat .cat .add:hover{background:rgb(from var(--acid) r g b / .14);border-color:color-mix(in srgb, var(--acid) 33%, transparent);color:#eaffb0}
|
||||
.engcat .cempty2{color:var(--dim);font-size:12.5px;padding:6px 8px}
|
||||
.sw.sm{width:38px;height:22px} .sw.sm .knob{width:15px;height:15px} .sw.sm input:checked + .track .knob{transform:translateX(16px)}
|
||||
.ceng .cn{font-weight:600} .ceng .cu{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
.sw input{opacity:0;width:0;height:0}
|
||||
.track{position:absolute;inset:0;background:#2b3444;border:1px solid var(--line);border-radius:999px;transition:.15s}
|
||||
.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8b98a9;transition:.15s}
|
||||
.sw input:checked + .track{background:rgba(214,255,61,.25);border-color:#d6ff3d55}
|
||||
.sw input:checked + .track{background:rgb(from var(--acid) r g b / .25);border-color:color-mix(in srgb, var(--acid) 33%, transparent)}
|
||||
.sw input:checked + .track .knob{transform:translateX(20px);background:var(--acid)}
|
||||
.note{color:var(--dim);font-size:12.5px;margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
|
||||
/* light theme (placed last so these win over the dark base rules) */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue