XuJiacheng/Xu_BrowserBookmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 更新了应用的样式和主题，调整了颜色变量以支持深色模式

Browse Source
This commit is contained in:
徐
2026-01-24 01:34:24 +08:00
parent a8c96d84f0
commit 9abcab2c6a
21 changed files with 312 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/extension/extension-dist.zip
View File

Binary file not shown.

2
apps/extension/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "extension", "name": "extension",
"private": true, "private": true,
"version": "1.0.3", "version": "1.0.5",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

2
apps/extension/public/manifest.json
View File

@@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "BrowserBookmark", "name": "BrowserBookmark",
"version": "1.0.3", "version": "1.0.5",
"action": { "action": {
"default_title": "Bookmarks", "default_title": "Bookmarks",
"default_popup": "popup.html" "default_popup": "popup.html"

29
apps/extension/src/components/BbConfirmModal.vue
View File

@@ -70,7 +70,7 @@ onBeforeUnmount(() => {
.bb-modalBackdrop { .bb-modalBackdrop {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.38); background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
@@ -80,9 +80,9 @@ onBeforeUnmount(() => {
max-height: min(84vh, 860px); max-height: min(84vh, 860px);
overflow: auto; overflow: auto;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.7); border: 1px solid var(--bb-border);
background: rgba(255, 255, 255, 0.82); background: var(--bb-panel);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.22); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
color: var(--bb-text); color: var(--bb-text);
} }
@@ -92,7 +92,7 @@ onBeforeUnmount(() => {
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding: 12px 14px; padding: 12px 14px;
border-bottom: 1px solid rgba(15, 23, 42, 0.1); border-bottom: 1px solid rgba(148,163,184,0.18);
} }
.bb-modalTitle { .bb-modalTitle {
@@ -103,28 +103,21 @@ onBeforeUnmount(() => {
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid var(--bb-border);
background: rgba(255, 255, 255, 0.5); background: var(--bb-panel-hover);
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
color: rgba(15, 23, 42, 0.75); color: var(--bb-text);
} }
.bb-modalClose:hover { .bb-modalClose:hover { background: var(--bb-panel); }
background: rgba(255, 255, 255, 0.78);
}
.bb-modalBody { .bb-modalBody {
padding: 14px; padding: 14px;
} }
.bb-modalMessage { .bb-modalMessage { color: var(--bb-muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
color: rgba(15, 23, 42, 0.78);
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
.bb-modalActions { .bb-modalActions {
margin-top: 14px; margin-top: 14px;
@@ -143,7 +136,7 @@ onBeforeUnmount(() => {
} }
.bb-btn--secondary { .bb-btn--secondary {
background: rgba(255, 255, 255, 0.55); background: var(--bb-panel-hover);
color: var(--bb-text); color: var(--bb-text);
border-color: var(--bb-border); border-color: var(--bb-border);
} }

8
apps/extension/src/content/main.js
View File

@@ -55,11 +55,11 @@ function ensureStyles() {
const style = document.createElement("style"); const style = document.createElement("style");
style.id = "bb-cred-style"; style.id = "bb-cred-style";
style.textContent = ` style.textContent = `
.bb-cred-selector{position:fixed;z-index:2147483646;background:#fff;border:1px solid rgba(0,0,0,0.12);box-shadow:0 10px 24px rgba(0,0,0,0.15);border-radius:10px;padding:6px;min-width:240px;max-width:320px;} .bb-cred-selector{position:fixed;z-index:2147483646;background:#2E2E2E;border:1px solid rgba(148,163,184,0.32);box-shadow:0 10px 28px rgba(0,0,0,0.55);border-radius:10px;padding:6px;min-width:240px;max-width:320px;color:#e2e8f0;}
.bb-cred-item{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;cursor:pointer;} .bb-cred-item{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;cursor:pointer;}
.bb-cred-item:hover{background:rgba(13,148,136,0.08);} .bb-cred-item:hover{background:rgba(34,197,94,0.16);}
.bb-cred-site{font-size:12px;color:#64748b;} .bb-cred-site{font-size:12px;color:rgba(226,232,240,0.72);}
.bb-cred-user{font-weight:700;color:#0f172a;} .bb-cred-user{font-weight:700;color:#e2e8f0;}
`; `;
document.head.appendChild(style); document.head.appendChild(style);
} }

5
apps/extension/src/options/OptionsApp.vue
View File

@@ -21,16 +21,17 @@ body { margin: 0; }
.nav { .nav {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(248, 250, 252, 0.82); background: var(--bb-panel);
border-bottom: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
padding: 10px 14px; padding: 10px 14px;
gap: 10px; gap: 10px;
color: var(--bb-text);
} }
.brand { font-weight: 800; } .brand { font-weight: 800; }
.content { max-width: 1100px; margin: 0 auto; padding: 14px; } .content { max-width: 1100px; margin: 0 auto; padding: 14px; color: var(--bb-text); }
a:focus-visible, a:focus-visible,
button:focus-visible, button:focus-visible,

8
apps/extension/src/options/pages/ImportExportPage.vue
View File

@@ -128,8 +128,8 @@ async function exportLocal() {
</template> </template>
<style scoped> <style scoped>
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; margin: 12px 0; } .card { border: 1px solid var(--bb-border); border-radius: 14px; padding: 12px; background: var(--bb-panel); margin: 12px 0; }
.btn { margin-top: 10px; padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; } .btn { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta)); color: white; cursor: pointer; }
.ok { color: #065f46; } .ok { color: #d1fae5; }
.error { color: #b91c1c; } .error { color: #fecaca; }
</style> </style>

12
apps/extension/src/options/pages/LoginPage.vue
View File

@@ -66,12 +66,12 @@ async function submit() {
<style scoped> <style scoped>
.row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.tab { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; cursor: pointer; } .tab { padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-panel); cursor: pointer; color: var(--bb-text); }
.tab.active { border-color: #111827; background: #111827; color: white; } .tab.active { border-color: transparent; background: var(--bb-primary); color: white; }
.form { display: grid; gap: 10px; max-width: 560px; } .form { display: grid; gap: 10px; max-width: 560px; }
.input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; } .input { padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-panel); color: var(--bb-text); }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; } .btn { padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta)); color: white; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.error { color: #b91c1c; } .error { color: #fecaca; }
.muted { color: #475569; font-size: 12px; margin-top: 10px; } .muted { color: var(--bb-muted); font-size: 12px; margin-top: 10px; }
</style> </style>

10
apps/extension/src/options/pages/MorePage.vue
View File

@@ -79,8 +79,8 @@ onMounted(refresh);
.h1 { margin: 0 0 10px; font-size: 18px; } .h1 { margin: 0 0 10px; font-size: 18px; }
.card { .card {
max-width: 560px; max-width: 560px;
border: 1px solid rgba(255,255,255,0.65); border: 1px solid var(--bb-border);
background: var(--bb-card); background: var(--bb-panel);
border-radius: 18px; border-radius: 18px;
padding: 12px; padding: 12px;
display: grid; display: grid;
@@ -95,10 +95,10 @@ onMounted(refresh);
cursor: pointer; cursor: pointer;
} }
.btn--secondary { .btn--secondary {
background: rgba(255,255,255,0.55); background: var(--bb-panel-hover);
color: var(--bb-text); color: var(--bb-text);
border-color: var(--bb-border); border-color: var(--bb-border);
} }
.muted { color: rgba(19, 78, 74, 0.72); font-size: 12px; } .muted { color: var(--bb-muted); font-size: 12px; }
.hint { color: rgba(19, 78, 74, 0.72); font-size: 12px; margin: 0; } .hint { color: var(--bb-muted); font-size: 12px; margin: 0; }
</style> </style>

16
apps/extension/src/options/pages/MyPage.vue
View File

@@ -111,15 +111,15 @@ onMounted(load);
<style scoped> <style scoped>
.form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 12px 0; } .form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 12px 0; }
@media (min-width: 900px) { .form { grid-template-columns: 2fr 3fr auto; } } @media (min-width: 900px) { .form { grid-template-columns: 2fr 3fr auto; } }
.input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; } .input { padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-panel); color: var(--bb-text); }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; } .btn { padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta)); color: white; cursor: pointer; }
.row { display: flex; justify-content: space-between; align-items: start; gap: 10px; } .row { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.ghost { border: 1px solid #e5e7eb; background: #f8fafc; border-radius: 10px; padding: 6px 10px; cursor: pointer; } .ghost { border: 1px solid var(--bb-border); background: var(--bb-panel-hover); border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--bb-text); }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; } .card { border: 1px solid var(--bb-border); border-radius: 14px; padding: 12px; background: var(--bb-panel); }
.title { .title {
color: #111827; color: var(--bb-text);
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
flex: 1; flex: 1;
@@ -128,7 +128,7 @@ onMounted(load);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; } .muted { color: var(--bb-muted); font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; } .error { color: #fecaca; }
.muted { color: #475569; font-size: 12px; } .muted { color: var(--bb-muted); font-size: 12px; }
</style> </style>

16
apps/extension/src/options/pages/PublicPage.vue
View File

@@ -59,7 +59,7 @@ onMounted(load);
<style scoped> <style scoped>
.row { display: flex; gap: 8px; margin: 12px 0; } .row { display: flex; gap: 8px; margin: 12px 0; }
.searchWrap { flex: 1; position: relative; } .searchWrap { flex: 1; position: relative; }
.input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; } .input { width: 100%; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-panel); color: var(--bb-text); }
.input.input--withClear { padding-right: 40px; } .input.input--withClear { padding-right: 40px; }
.clearBtn { .clearBtn {
position: absolute; position: absolute;
@@ -69,17 +69,17 @@ onMounted(load);
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 999px; border-radius: 999px;
border: 1px solid #e5e7eb; border: 1px solid var(--bb-border);
background: white; background: var(--bb-panel);
cursor: pointer; cursor: pointer;
} }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; } .btn { padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta)); color: white; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; } .card { border: 1px solid var(--bb-border); border-radius: 14px; padding: 12px; background: var(--bb-panel); }
.title { .title {
color: #111827; color: var(--bb-text);
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
display: block; display: block;
@@ -87,6 +87,6 @@ onMounted(load);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; } .muted { color: var(--bb-muted); font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; } .error { color: #fecaca; }
</style> </style>

46
apps/extension/src/popup/PopupApp.vue
View File

@@ -404,10 +404,11 @@ watch(
<style scoped> <style scoped>
.wrap{ .wrap{
width: 380px; width: 380px;
min-height: 120vh; min-height: 620px;
padding: 12px; padding: 12px;
font-family: ui-sans-serif, system-ui; font-family: ui-sans-serif, system-ui;
color: var(--bb-text); color: var(--bb-text);
background: var(--bb-bg);
} }
.top{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
@@ -417,7 +418,7 @@ watch(
.segBtn{ .segBtn{
flex:1; flex:1;
border: 1px solid var(--bb-border); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.85); background: var(--bb-panel);
padding: 8px 10px; padding: 8px 10px;
border-radius: 14px; border-radius: 14px;
cursor:pointer; cursor:pointer;
@@ -438,7 +439,7 @@ watch(
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
} }
.btn--secondary{ .btn--secondary{
background: rgba(255,255,255,0.92); background: var(--bb-panel-hover);
color: var(--bb-text); color: var(--bb-text);
border-color: var(--bb-border); border-color: var(--bb-border);
box-shadow: none; box-shadow: none;
@@ -446,28 +447,28 @@ watch(
button:disabled{ opacity: 0.6; cursor: not-allowed; } button:disabled{ opacity: 0.6; cursor: not-allowed; }
.hint{ margin: 10px 0 0; color: var(--bb-muted); font-size: 12px; } .hint{ margin: 10px 0 0; color: var(--bb-muted); font-size: 12px; }
.alert{ margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); color: #7f1d1d; font-size: 12px; } .alert{ margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(239,68,68,0.35); background: rgba(239,68,68,0.12); color: #fecaca; font-size: 12px; }
.ok{ margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); color: #14532d; font-size: 12px; } .ok{ margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.12); color: #d1fae5; font-size: 12px; }
.card{ .card{
margin-top: 10px; margin-top: 10px;
border: 1px solid rgba(255,255,255,0.65); border: 1px solid var(--bb-border);
background: var(--bb-card); background: var(--bb-card);
border-radius: 18px; border-radius: 18px;
padding: 12px; padding: 12px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
} }
.cardTitle{ font-weight: 900; } .cardTitle{ font-weight: 900; }
.muted{ color: var(--bb-muted); font-size: 12px; margin-top: 4px; } .muted{ color: var(--bb-muted); font-size: 12px; margin-top: 4px; }
.label{ display:block; margin-top: 10px; font-size: 12px; color: rgba(19, 78, 74, 0.72); } .label{ display:block; margin-top: 10px; font-size: 12px; color: var(--bb-muted); }
.input{ .input{
width: 100%; width: 100%;
margin-top: 6px; margin-top: 6px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 14px; border-radius: 14px;
border: 1px solid var(--bb-border); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.92); background: var(--bb-panel);
} }
.searchWrap{ position: relative; flex: 1; min-width: 0; } .searchWrap{ position: relative; flex: 1; min-width: 0; }
@@ -481,19 +482,19 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
height: 26px; height: 26px;
border-radius: 999px; border-radius: 999px;
border: 1px solid var(--bb-border); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.92); background: var(--bb-panel);
cursor: pointer; cursor: pointer;
display: grid; display: grid;
place-items: center; place-items: center;
color: rgba(15, 23, 42, 0.7); color: rgba(226, 232, 240, 0.75);
padding: 0; padding: 0;
} }
.clearBtn:hover{ background: rgba(255,255,255,1); } .clearBtn:hover{ background: var(--bb-panel-hover); }
.row{ display:flex; gap: 8px; align-items:center; margin-top: 10px; } .row{ display:flex; gap: 8px; align-items:center; margin-top: 10px; }
.row .input{ margin-top: 0; } .row .input{ margin-top: 0; }
.subCard{ margin-top: 10px; padding: 10px; border-radius: 16px; border: 1px dashed rgba(19,78,74,0.22); background: rgba(255,255,255,0.55); } .subCard{ margin-top: 10px; padding: 10px; border-radius: 16px; border: 1px dashed rgba(148,163,184,0.24); background: var(--bb-panel); }
.subTitle{ font-weight: 800; } .subTitle{ font-weight: 800; }
.titleRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .titleRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
@@ -501,7 +502,8 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
padding: 6px 10px; padding: 6px 10px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--bb-border); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.92); background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
color: white;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
@@ -512,7 +514,7 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
.modal{ .modal{
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.35); background: rgba(0, 0, 0, 0.75);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -524,9 +526,9 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
width: 100%; width: 100%;
max-width: 340px; max-width: 340px;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(255,255,255,0.65); border: 1px solid var(--bb-border);
background: var(--bb-card-solid); background: var(--bb-card-solid);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
padding: 12px; padding: 12px;
} }
@@ -534,7 +536,7 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
.dialogActions{ display:flex; justify-content:flex-end; gap: 8px; margin-top: 10px; } .dialogActions{ display:flex; justify-content:flex-end; gap: 8px; margin-top: 10px; }
.tree{ margin-top: 10px; display: grid; gap: 10px; } .tree{ margin-top: 10px; display: grid; gap: 10px; }
.folder{ border: 1px solid rgba(255,255,255,0.55); border-radius: 16px; background: rgba(255,255,255,0.55); } .folder{ border: 1px solid var(--bb-border); border-radius: 16px; background: var(--bb-panel); }
.folderHeader{ .folderHeader{
width: 100%; width: 100%;
text-align: left; text-align: left;
@@ -548,12 +550,12 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
gap: 10px; gap: 10px;
} }
.folderName{ font-weight: 900; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folderName{ font-weight: 900; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folderMeta{ font-size: 12px; color: rgba(19, 78, 74, 0.72); } .folderMeta{ font-size: 12px; color: var(--bb-muted); }
.folderBody{ padding: 8px 10px 10px; display: grid; gap: 8px; } .folderBody{ padding: 8px 10px 10px; display: grid; gap: 8px; }
.bm{ .bm{
border: 1px solid rgba(255,255,255,0.65); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.92); background: var(--bb-panel);
border-radius: 14px; border-radius: 14px;
padding: 8px 10px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
@@ -564,5 +566,5 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
overflow: hidden; overflow: hidden;
} }
.bmTitle{ font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; } .bmTitle{ font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }
.bmUrl{ font-size: 12px; color: rgba(19, 78, 74, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; min-width: 0; display: block; } .bmUrl{ font-size: 12px; color: var(--bb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; min-width: 0; display: block; }
</style> </style>

40
apps/extension/src/style.css
View File

@@ -1,13 +1,16 @@
:root { :root {
--bb-bg: #f8fafc; --bb-bg: #000000;
--bb-text: #0f172a; --bb-text: #e2e8f0;
--bb-muted: rgba(15, 23, 42, 0.70); --bb-muted: rgba(226, 232, 240, 0.82);
--bb-primary: #2563eb; --bb-primary: #22c55e;
--bb-primary-weak: rgba(37, 99, 235, 0.12); --bb-primary-weak: rgba(34, 197, 94, 0.25);
--bb-cta: #f97316; --bb-cta: #38bdf8;
--bb-border: rgba(15, 23, 42, 0.14); --bb-border: rgba(148, 163, 184, 0.28);
--bb-card: rgba(255, 255, 255, 0.88); --bb-panel: #2E2E2E;
--bb-card-solid: #ffffff; --bb-panel-strong: #2E2E2E;
--bb-panel-hover: #3a3a3a;
--bb-card: #2E2E2E;
--bb-card-solid: #2E2E2E;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
line-height: 1.5; line-height: 1.5;
@@ -27,34 +30,27 @@ html, body {
} }
body { body {
background: background: linear-gradient(180deg, #000000 0%, #050910 55%, #000000 100%);
radial-gradient(900px 520px at 10% 0%, rgba(37, 99, 235, 0.12), rgba(0,0,0,0) 60%),
radial-gradient(900px 520px at 90% 0%, rgba(249, 115, 22, 0.12), rgba(0,0,0,0) 60%),
var(--bb-bg);
color: var(--bb-text); color: var(--bb-text);
} }
a { color: var(--bb-primary); text-decoration: none; } a { color: var(--bb-cta); text-decoration: none; }
a:hover { color: #1d4ed8; } a:hover { color: var(--bb-primary); }
button, input, select, textarea { button, input, select, textarea {
font: inherit; font: inherit;
color: inherit; color: inherit;
} }
select, input, textarea { select, input, textarea { background: var(--bb-panel); border: 1px solid var(--bb-border); color: var(--bb-text); }
background: rgba(255,255,255,0.92);
}
::placeholder { ::placeholder { color: rgba(226, 232, 240, 0.55); }
color: rgba(15, 23, 42, 0.45);
}
a:focus-visible, a:focus-visible,
button:focus-visible, button:focus-visible,
input:focus-visible, input:focus-visible,
select:focus-visible { select:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.55); outline: 2px solid rgba(34, 197, 94, 0.55);
outline-offset: 2px; outline-offset: 2px;
} }

2
apps/web/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "web", "name": "web",
"private": true, "private": true,
"version": "0.0.0", "version": "1.0.4",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

47
apps/web/src/App.vue
View File

@@ -10,6 +10,24 @@ const isAdmin = computed(() => userRef.value?.role === "admin");
const menuOpen = ref(false); const menuOpen = ref(false);
// theme: light | dark
const theme = ref(
(typeof localStorage !== "undefined" && localStorage.getItem("bb_theme")) ||
(typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light")
);
function applyTheme(next) {
const isDark = (next || theme.value) === "dark";
const root = document.documentElement;
root.classList.toggle("theme-dark", isDark);
}
function toggleTheme() {
theme.value = theme.value === "dark" ? "light" : "dark";
}
function toggleMenu() { function toggleMenu() {
menuOpen.value = !menuOpen.value; menuOpen.value = !menuOpen.value;
} }
@@ -62,6 +80,7 @@ function onDocPointerDown(e) {
onMounted(() => { onMounted(() => {
document.addEventListener("pointerdown", onDocPointerDown); document.addEventListener("pointerdown", onDocPointerDown);
applyTheme();
}); });
watch( watch(
@@ -77,6 +96,15 @@ onMounted(() => {
if (loggedIn.value) ensureMe(); if (loggedIn.value) ensureMe();
}); });
watch(
() => theme.value,
(next) => {
try { localStorage.setItem("bb_theme", next); } catch {}
applyTheme(next);
},
{ immediate: false }
);
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener("pointerdown", onDocPointerDown); document.removeEventListener("pointerdown", onDocPointerDown);
}); });
@@ -107,12 +135,15 @@ router.afterEach(() => {
</button> </button>
<div v-if="menuOpen" class="menu" role="menu"> <div v-if="menuOpen" class="menu" role="menu">
<RouterLink class="menuItem menuItem--import" to="/import" role="menuitem">导入 / 导出</RouterLink> <button class="menuItem" type="button" role="menuitem" @click="toggleTheme">
切换{{ theme === 'dark' ? '浅色' : '深色' }}
</button>
<a class="menuItem" href="http://mark.cloud-xl.top:9527/extension-dist.zip" role="menuitem" download> <a class="menuItem" href="http://mark.cloud-xl.top:9527/extension-dist.zip" role="menuitem" download>
下载插件 下载插件
</a> </a>
<RouterLink class="menuItem menuItem--password" to="/passwords" role="menuitem">密码管理</RouterLink> <RouterLink class="menuItem menuItem--password" to="/passwords" role="menuitem">管理密码</RouterLink>
<RouterLink v-if="isAdmin" class="menuItem" to="/admin" role="menuitem">管理用户</RouterLink> <RouterLink v-if="isAdmin" class="menuItem" to="/admin" role="menuitem">管理用户</RouterLink>
<RouterLink class="menuItem menuItem--import" to="/import" role="menuitem">导入导出</RouterLink>
<button class="menuItem danger" type="button" role="menuitem" @click="logout">退出登录</button> <button class="menuItem danger" type="button" role="menuitem" @click="logout">退出登录</button>
</div> </div>
</div> </div>
@@ -138,13 +169,13 @@ router.afterEach(() => {
</template> </template>
<style scoped> <style scoped>
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.55); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.35); } .nav { position: sticky; top: 0; z-index: 10; background: var(--bb-nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.35); }
.navInner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .navInner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; color: var(--bb-text); text-decoration: none; letter-spacing: -0.02em; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; color: var(--bb-text); text-decoration: none; letter-spacing: -0.02em; }
.brandMark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-clay); box-shadow: var(--bb-shadow-clay); border: 1px solid rgba(255,255,255,0.7); } .brandMark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-clay); box-shadow: var(--bb-shadow-clay); border: 1px solid rgba(255,255,255,0.7); }
.brandText { font-size: 14px; } .brandText { font-size: 14px; }
.links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.link { color: var(--bb-text); text-decoration: none; padding: 9px 12px; border-radius: 14px; transition: transform 120ms ease, box-shadow 120ms ease, background 150ms, color 150ms; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); } .link { color: var(--bb-text); text-decoration: none; padding: 9px 12px; border-radius: 14px; transition: transform 120ms ease, box-shadow 120ms ease, background 150ms, color 150ms; background: var(--bb-panel); border: 1px solid rgba(255,255,255,0.45); }
.link:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10); transform: translateY(-1px); } .link:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10); transform: translateY(-1px); }
.link.router-link-active { .link.router-link-active {
background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta)); background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
@@ -165,7 +196,7 @@ router.afterEach(() => {
width: 220px; width: 220px;
padding: 8px; padding: 8px;
border-radius: 16px; border-radius: 16px;
background: rgba(255,255,255,0.72); background: var(--bb-menu-bg);
border: 1px solid rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
box-shadow: 0 20px 70px rgba(15, 23, 42, 0.16); box-shadow: 0 20px 70px rgba(15, 23, 42, 0.16);
@@ -179,15 +210,17 @@ router.afterEach(() => {
padding: 10px 12px; padding: 10px 12px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.35); background: var(--bb-menu-item-bg);
color: var(--bb-text); color: var(--bb-text);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 15px;
} }
.menuItem + .menuItem { margin-top: 8px; } .menuItem + .menuItem { margin-top: 8px; }
.menuItem:hover { background: rgba(255,255,255,0.6); } .menuItem:hover { background: var(--bb-menu-item-hover); }
.menuItem.danger { color: #991b1b; background: rgba(254, 202, 202, 0.35); border-color: rgba(254, 202, 202, 0.6); } .menuItem.danger { color: #991b1b; background: rgba(254, 202, 202, 0.35); border-color: rgba(254, 202, 202, 0.6); }
@media (max-width: 640px) { @media (max-width: 640px) {
.menuItem--import { display: none; } .menuItem--import { display: none; }
.menuItem--password { display: none; } .menuItem--password { display: none; }

28
apps/web/src/components/BbModal.vue
View File

@@ -66,8 +66,8 @@ onBeforeUnmount(() => {
max-height: min(84vh, 860px); max-height: min(84vh, 860px);
overflow: auto; overflow: auto;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(255,255,255,0.65); border: 1px solid var(--bb-modal-border);
background: rgba(255,255,255,0.82); background: var(--bb-modal-bg);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18); box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
} }
@@ -105,4 +105,28 @@ onBeforeUnmount(() => {
.bb-modalBody { .bb-modalBody {
padding: 14px; padding: 14px;
} }
:global(.theme-dark) .bb-modalBackdrop {
background: rgba(0, 0, 0, 0.75);
}
:global(.theme-dark) .bb-modalPanel {
background: var(--bb-modal-bg);
border-color: var(--bb-modal-border);
box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
:global(.theme-dark) .bb-modalHeader {
border-bottom: 1px solid rgba(148,163,184,0.18);
}
:global(.theme-dark) .bb-modalClose {
background: #3a3a3a;
border-color: rgba(148,163,184,0.32);
color: #ffffff;
}
:global(.theme-dark) .bb-modalClose:hover {
background: #444444;
}
</style> </style>

9
apps/web/src/pages/AdminPage.vue
View File

@@ -418,18 +418,19 @@ onMounted(async () => {
text-align: left; text-align: left;
padding: 10px 12px; padding: 10px 12px;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(255,255,255,0.45); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.35); background: var(--bb-folder-bg);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
} }
.bb-adminFolderHeader:hover { background: rgba(255,255,255,0.6); } .bb-adminFolderHeader:hover { background: var(--bb-folder-hover); }
.bb-adminFolderHeader .name { font-weight: 900; color: var(--bb-text); } .bb-adminFolderHeader .name { font-weight: 900; color: var(--bb-text); }
.bb-adminFolderHeader .meta { font-size: 12px; color: rgba(19, 78, 74, 0.72); } .bb-adminFolderHeader .meta { font-size: 12px; color: var(--bb-muted); }
.bb-adminFolderBody { margin-top: 10px; } .bb-adminFolderBody { margin-top: 10px; }
.bb-adminFolderDel { white-space: nowrap; } .bb-adminFolderDel { white-space: nowrap; }
.bb-adminActions { display: flex; gap: 8px; flex-wrap: wrap; } .bb-adminActions { display: flex; gap: 8px; flex-wrap: wrap; }
</style> </style>

22
apps/web/src/pages/MyPage.vue
View File

@@ -859,17 +859,17 @@ onBeforeUnmount(() => {
text-align: left; text-align: left;
padding: 8px 10px; padding: 8px 10px;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(255,255,255,0.45); border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.35); background: var(--bb-folder-bg);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
} }
.bb-myFolderHeader:hover { background: rgba(255,255,255,0.6); } .bb-myFolderHeader:hover { background: var(--bb-folder-hover); }
.bb-myFolderHeader .name { font-weight: 900; color: var(--bb-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-myFolderHeader .name { font-weight: 900; color: var(--bb-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-myFolderHeader .meta { font-size: 12px; color: rgba(19, 78, 74, 0.72); } .bb-myFolderHeader .meta { font-size: 12px; color: var(--bb-muted); }
.bb-myFolderBody { margin-top: 10px; } .bb-myFolderBody { margin-top: 10px; }
/* Sticky open folder header (keeps the row visible while scrolling long lists) */ /* Sticky open folder header (keeps the row visible while scrolling long lists) */
@@ -879,9 +879,9 @@ onBeforeUnmount(() => {
z-index: 30; z-index: 30;
padding: 4px; padding: 4px;
border-radius: 18px; border-radius: 18px;
background: rgba(255,255,255,0.72); background: var(--bb-folder-bg);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.55); border: 1px solid var(--bb-border);
} }
.bb-folderDelete{ .bb-folderDelete{
@@ -910,4 +910,14 @@ onBeforeUnmount(() => {
.bb-dragHint:active { cursor: grabbing; } .bb-dragHint:active { cursor: grabbing; }
.bb-modalForm { display: grid; gap: 10px; } .bb-modalForm { display: grid; gap: 10px; }
:global(.theme-dark) .bb-myFolder.is-open > .bb-myFolderHeaderRow {
background: var(--bb-dark-panel);
border-color: rgba(148,163,184,0.32);
}
:global(.theme-dark) .bb-dragHint {
background: #3a3a3a;
border-color: rgba(148,163,184,0.32);
color: #ffffff;
}
</style> </style>

3
apps/web/src/router.js
View File

@@ -22,9 +22,6 @@ export const router = createRouter({
router.beforeEach(async (to) => { router.beforeEach(async (to) => {
const loggedIn = Boolean(tokenRef.value); const loggedIn = Boolean(tokenRef.value);
// 已登录访问首页时，跳转到个人页
if (to.path === "/" && loggedIn) return { path: "/my" };
// 已登录访问登录页：直接去“我的” // 已登录访问登录页：直接去“我的”
if (to.path === "/login" && loggedIn) return { path: "/my" }; if (to.path === "/login" && loggedIn) return { path: "/my" };

130
apps/web/src/style.css
View File

@@ -4,11 +4,23 @@
/* Educational-platform claymorphism palette (vibrant + friendly) */ /* Educational-platform claymorphism palette (vibrant + friendly) */
--bb-bg: #f0fdfa; --bb-bg: #f0fdfa;
--bb-text: #134e4a; --bb-text: #134e4a;
--bb-muted: rgba(19, 78, 74, 0.72);
--bb-primary: #0d9488; --bb-primary: #0d9488;
--bb-primary-weak: #2dd4bf; --bb-primary-weak: #2dd4bf;
--bb-cta: #ea580c; --bb-cta: #ea580c;
--bb-border: rgba(19, 78, 74, 0.12); --bb-border: rgba(19, 78, 74, 0.12);
--bb-border-strong: rgba(19, 78, 74, 0.20); --bb-border-strong: rgba(19, 78, 74, 0.20);
--bb-panel: rgba(255,255,255,0.55);
--bb-panel-strong: rgba(255,255,255,0.82);
--bb-panel-hover: rgba(255,255,255,0.75);
--bb-menu-bg: rgba(255,255,255,0.72);
--bb-menu-item-bg: rgba(255,255,255,0.35);
--bb-menu-item-hover: rgba(255,255,255,0.6);
--bb-nav-bg: rgba(255,255,255,0.55);
--bb-modal-bg: rgba(255,255,255,0.82);
--bb-modal-border: rgba(255,255,255,0.65);
--bb-folder-bg: rgba(255,255,255,0.35);
--bb-folder-hover: rgba(255,255,255,0.6);
--bb-font-heading: "Baloo 2", Inter, ui-sans-serif, system-ui; --bb-font-heading: "Baloo 2", Inter, ui-sans-serif, system-ui;
@@ -105,7 +117,7 @@ input:focus-visible {
} }
.bb-muted { .bb-muted {
color: rgba(19, 78, 74, 0.72); color: var(--bb-muted);
font-size: 12px; font-size: 12px;
} }
@@ -983,3 +995,119 @@ input:focus-visible {
.bb-card--interactive:hover { .bb-card--interactive:hover {
animation: bb-float 2.8s ease-in-out infinite; animation: bb-float 2.8s ease-in-out infinite;
} }
/* --- Dark theme overrides --- */
.theme-dark {
--bb-text: #e2e8f0;
--bb-muted: rgba(226,232,240,0.82);
--bb-border: rgba(148, 163, 184, 0.28);
--bb-border-strong: rgba(148, 163, 184, 0.45);
--bb-primary: #22c55e;
--bb-primary-weak: rgba(34, 197, 94, 0.25);
--bb-cta: #38bdf8;
--bb-dark-panel: #2E2E2E;
--bb-panel: #2E2E2E;
--bb-panel-strong: #2E2E2E;
--bb-panel-hover: #3a3a3a;
--bb-menu-bg: #2E2E2E;
--bb-menu-item-bg: #3a3a3a;
--bb-menu-item-hover: #444444;
--bb-nav-bg: #2E2E2E;
--bb-modal-bg: #2E2E2E;
--bb-modal-border: rgba(148,163,184,0.32);
--bb-folder-bg: #2E2E2E;
--bb-folder-hover: #3a3a3a;
--bb-gradient: linear-gradient(180deg, #000000 0%, #050910 55%, #000000 100%);
--bb-clay: linear-gradient(145deg, rgba(46, 46, 46, 0.95), rgba(36, 36, 36, 0.92));
--bb-shadow-clay: 0 22px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255,255,255,0.06) inset, 0 -2px 0 rgba(0,0,0,0.35) inset;
}
.theme-dark body {
background: var(--bb-gradient);
color: var(--bb-text);
}
.theme-dark a { color: #38bdf8; }
.theme-dark a:hover { color: #22c55e; }
/* Navigation */
.theme-dark .nav { background: var(--bb-nav-bg); border-bottom: 1px solid rgba(148,163,184,0.35); }
.theme-dark .link { background: var(--bb-dark-panel); border: 1px solid rgba(148,163,184,0.28); color: var(--bb-text); }
.theme-dark .link.router-link-active { box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.theme-dark .brandMark { background: var(--bb-dark-panel); border-color: rgba(148,163,184,0.35); }
/* Menu */
.theme-dark .menu { background: var(--bb-menu-bg); border: 1px solid rgba(148,163,184,0.28); box-shadow: 0 24px 80px rgba(0,0,0,0.65); }
.theme-dark .menuItem { background: var(--bb-menu-item-bg); border: 1px solid rgba(148,163,184,0.28); color: var(--bb-text); }
.theme-dark .menuItem:hover { background: var(--bb-menu-item-hover); }
.theme-dark .menuItem.danger { color: #fecaca; background: rgba(185, 28, 28, 0.35); border-color: rgba(248, 113, 113, 0.45); }
/* Inputs / selects */
.theme-dark .bb-input,
.theme-dark .bb-select,
.theme-dark .bb-fileName,
.theme-dark .bb-selectTrigger { background: var(--bb-dark-panel); border-color: rgba(148,163,184,0.32); color: var(--bb-text); }
.theme-dark .bb-selectMenu { background: var(--bb-dark-panel); border-color: rgba(148,163,184,0.32); box-shadow: 0 22px 60px rgba(0,0,0,0.65); }
.theme-dark .bb-selectOption { color: var(--bb-text); }
.theme-dark .bb-selectOption:hover { background: rgba(34, 197, 94, 0.16); }
.theme-dark .bb-selectPlaceholder { color: rgba(226,232,240,0.72); }
/* Buttons */
.theme-dark .bb-btn--secondary { background: #3a3a3a; color: #ffffff; border-color: rgba(148,163,184,0.32); }
.theme-dark .bb-btn--danger { background: #3b0a0a; color: #ffffff; border-color: rgba(248,113,113,0.55); }
/* Cards / panels */
.theme-dark .bb-card,
.theme-dark .bb-pill,
.theme-dark .bb-miniStat,
.theme-dark .bb-iconBubble,
.theme-dark .bb-footerInner,
.theme-dark .bb-ctaGhost,
.theme-dark .bb-stat,
.theme-dark .bb-empty {
background: var(--bb-dark-panel);
border-color: rgba(148,163,184,0.32);
color: var(--bb-text);
}
.theme-dark .bb-alert { background: rgba(56,189,248,0.16); border-color: rgba(56,189,248,0.45); color: #e0f2fe; }
.theme-dark .bb-alert--ok { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.45); color: #d1fae5; }
.theme-dark .bb-alert--error { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.45); color: #fecaca; }
.theme-dark .bb-muted,
.theme-dark .bb-label,
.theme-dark .bb-footerCol a,
.theme-dark .bb-heroSub { color: rgba(226,232,240,0.82); }
.theme-dark ::placeholder { color: rgba(226,232,240,0.55); }
.theme-dark .bb-searchClear { background: #3a3a3a; border-color: rgba(148,163,184,0.32); color: rgba(226,232,240,0.82); }
.theme-dark .bb-searchClear:hover { background: #444444; }
/* Folder headers + drag hints */
.theme-dark .bb-myFolderHeader { background: var(--bb-folder-bg); border-color: rgba(148,163,184,0.32); color: var(--bb-text); }
.theme-dark .bb-myFolderHeader:hover { background: var(--bb-folder-hover); }
.theme-dark .bb-myFolderHeader .meta { color: var(--bb-muted); }
.theme-dark .bb-myFolder.is-open > .bb-myFolderHeaderRow {
background: var(--bb-dark-panel);
border-color: rgba(148,163,184,0.32);
}
.theme-dark .bb-dragHint {
background: #3a3a3a;
border-color: rgba(148,163,184,0.32);
color: #ffffff;
}
/* Modal dark */
.theme-dark .bb-modalBackdrop { background: rgba(0, 0, 0, 0.75); }
.theme-dark .bb-modalPanel {
background: var(--bb-modal-bg);
border-color: var(--bb-modal-border);
box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.theme-dark .bb-modalHeader { border-bottom: 1px solid rgba(148,163,184,0.18); }
.theme-dark .bb-modalClose {
background: #3a3a3a;
border-color: rgba(148,163,184,0.32);
color: #ffffff;
}
.theme-dark .bb-modalClose:hover { background: #444444; }

4
package-lock.json generated
View File

@@ -17,7 +17,7 @@
} }
}, },
"apps/extension": { "apps/extension": {
"version": "1.0.3", "version": "1.0.5",
"dependencies": { "dependencies": {
"@browser-bookmark/shared": "file:../../packages/shared", "@browser-bookmark/shared": "file:../../packages/shared",
"vue": "^3.5.24", "vue": "^3.5.24",
@@ -52,7 +52,7 @@
} }
}, },
"apps/web": { "apps/web": {
"version": "0.0.0", "version": "1.0.4",
"dependencies": { "dependencies": {
"@browser-bookmark/shared": "file:../../packages/shared", "@browser-bookmark/shared": "file:../../packages/shared",
"sortablejs": "^1.15.6", "sortablejs": "^1.15.6",