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",
"private": true,
"version": "1.0.3",
"version": "1.0.5",
"type": "module",
"scripts": {
"dev": "vite",

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

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

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

@@ -70,7 +70,7 @@ onBeforeUnmount(() => {
.bb-modalBackdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.38);
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
}
@@ -80,9 +80,9 @@ onBeforeUnmount(() => {
max-height: min(84vh, 860px);
overflow: auto;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.22);
border: 1px solid var(--bb-border);
background: var(--bb-panel);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
color: var(--bb-text);
}
@@ -92,7 +92,7 @@ onBeforeUnmount(() => {
justify-content: space-between;
gap: 10px;
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 {
@@ -103,28 +103,21 @@ onBeforeUnmount(() => {
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--bb-border);
background: var(--bb-panel-hover);
cursor: pointer;
font-size: 20px;
line-height: 1;
color: rgba(15, 23, 42, 0.75);
color: var(--bb-text);
}
.bb-modalClose:hover {
background: rgba(255, 255, 255, 0.78);
}
.bb-modalClose:hover { background: var(--bb-panel); }
.bb-modalBody {
padding: 14px;
}
.bb-modalMessage {
color: rgba(15, 23, 42, 0.78);
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
.bb-modalMessage { color: var(--bb-muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.bb-modalActions {
margin-top: 14px;
@@ -143,7 +136,7 @@ onBeforeUnmount(() => {
}
.bb-btn--secondary {
background: rgba(255, 255, 255, 0.55);
background: var(--bb-panel-hover);
color: var(--bb-text);
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");
style.id = "bb-cred-style";
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:hover{background:rgba(13,148,136,0.08);}
.bb-cred-site{font-size:12px;color:#64748b;}
.bb-cred-user{font-weight:700;color:#0f172a;}
.bb-cred-item:hover{background:rgba(34,197,94,0.16);}
.bb-cred-site{font-size:12px;color:rgba(226,232,240,0.72);}
.bb-cred-user{font-weight:700;color:#e2e8f0;}
`;
document.head.appendChild(style);
}

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

@@ -21,16 +21,17 @@ body { margin: 0; }
.nav {
position: sticky;
top: 0;
background: rgba(248, 250, 252, 0.82);
background: var(--bb-panel);
border-bottom: 1px solid var(--bb-border);
backdrop-filter: blur(10px);
display: flex;
justify-content: flex-start;
padding: 10px 14px;
gap: 10px;
color: var(--bb-text);
}
.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,
button:focus-visible,

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

@@ -128,8 +128,8 @@ async function exportLocal() {
</template>
<style scoped>
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; margin: 12px 0; }
.btn { margin-top: 10px; padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
.ok { color: #065f46; }
.error { color: #b91c1c; }
.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 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: #d1fae5; }
.error { color: #fecaca; }
</style>

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

@@ -66,12 +66,12 @@ async function submit() {
<style scoped>
.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.active { border-color: #111827; background: #111827; color: white; }
.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: transparent; background: var(--bb-primary); color: white; }
.form { display: grid; gap: 10px; max-width: 560px; }
.input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
.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 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; }
.error { color: #b91c1c; }
.muted { color: #475569; font-size: 12px; margin-top: 10px; }
.error { color: #fecaca; }
.muted { color: var(--bb-muted); font-size: 12px; margin-top: 10px; }
</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; }
.card {
max-width: 560px;
border: 1px solid rgba(255,255,255,0.65);
background: var(--bb-card);
border: 1px solid var(--bb-border);
background: var(--bb-panel);
border-radius: 18px;
padding: 12px;
display: grid;
@@ -95,10 +95,10 @@ onMounted(refresh);
cursor: pointer;
}
.btn--secondary {
background: rgba(255,255,255,0.55);
background: var(--bb-panel-hover);
color: var(--bb-text);
border-color: var(--bb-border);
}
.muted { color: rgba(19, 78, 74, 0.72); font-size: 12px; }
.hint { color: rgba(19, 78, 74, 0.72); font-size: 12px; margin: 0; }
.muted { color: var(--bb-muted); font-size: 12px; }
.hint { color: var(--bb-muted); font-size: 12px; margin: 0; }
</style>

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

@@ -111,15 +111,15 @@ onMounted(load);
<style scoped>
.form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 12px 0; }
@media (min-width: 900px) { .form { grid-template-columns: 2fr 3fr auto; } }
.input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
.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 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; }
.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; }
@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 {
color: #111827;
color: var(--bb-text);
font-weight: 700;
text-decoration: none;
flex: 1;
@@ -128,7 +128,7 @@ onMounted(load);
overflow: hidden;
text-overflow: ellipsis;
}
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; }
.muted { color: #475569; font-size: 12px; }
.muted { color: var(--bb-muted); font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #fecaca; }
.muted { color: var(--bb-muted); font-size: 12px; }
</style>

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

@@ -59,7 +59,7 @@ onMounted(load);
<style scoped>
.row { display: flex; gap: 8px; margin: 12px 0; }
.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; }
.clearBtn {
position: absolute;
@@ -69,17 +69,17 @@ onMounted(load);
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: white;
border: 1px solid var(--bb-border);
background: var(--bb-panel);
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; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@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 {
color: #111827;
color: var(--bb-text);
font-weight: 700;
text-decoration: none;
display: block;
@@ -87,6 +87,6 @@ onMounted(load);
overflow: hidden;
text-overflow: ellipsis;
}
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; }
.muted { color: var(--bb-muted); font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #fecaca; }
</style>

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

@@ -404,10 +404,11 @@ watch(
<style scoped>
.wrap{
width: 380px;
min-height: 120vh;
min-height: 620px;
padding: 12px;
font-family: ui-sans-serif, system-ui;
color: var(--bb-text);
background: var(--bb-bg);
}
.top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
@@ -417,7 +418,7 @@ watch(
.segBtn{
flex:1;
border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.85);
background: var(--bb-panel);
padding: 8px 10px;
border-radius: 14px;
cursor:pointer;
@@ -438,7 +439,7 @@ watch(
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.btn--secondary{
background: rgba(255,255,255,0.92);
background: var(--bb-panel-hover);
color: var(--bb-text);
border-color: var(--bb-border);
box-shadow: none;
@@ -446,28 +447,28 @@ watch(
button:disabled{ opacity: 0.6; cursor: not-allowed; }
.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; }
.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; }
.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.12); color: #d1fae5; font-size: 12px; }
.card{
margin-top: 10px;
border: 1px solid rgba(255,255,255,0.65);
border: 1px solid var(--bb-border);
background: var(--bb-card);
border-radius: 18px;
padding: 12px;
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; }
.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{
width: 100%;
margin-top: 6px;
padding: 8px 10px;
border-radius: 14px;
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; }
@@ -481,19 +482,19 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
height: 26px;
border-radius: 999px;
border: 1px solid var(--bb-border);
background: rgba(255,255,255,0.92);
background: var(--bb-panel);
cursor: pointer;
display: grid;
place-items: center;
color: rgba(15, 23, 42, 0.7);
color: rgba(226, 232, 240, 0.75);
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 .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; }
.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;
border-radius: 12px;
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;
font-size: 12px;
font-weight: 700;
@@ -512,7 +514,7 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
.modal{
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
@@ -524,9 +526,9 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
width: 100%;
max-width: 340px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.65);
border: 1px solid var(--bb-border);
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;
}
@@ -534,7 +536,7 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
.dialogActions{ display:flex; justify-content:flex-end; gap: 8px; margin-top: 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{
width: 100%;
text-align: left;
@@ -548,12 +550,12 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
gap: 10px;
}
.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; }
.bm{
border: 1px solid rgba(255,255,255,0.65);
background: rgba(255,255,255,0.92);
border: 1px solid var(--bb-border);
background: var(--bb-panel);
border-radius: 14px;
padding: 8px 10px;
cursor: pointer;
@@ -564,5 +566,5 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
overflow: hidden;
}
.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>

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

@@ -1,13 +1,16 @@
:root {
--bb-bg: #f8fafc;
--bb-text: #0f172a;
--bb-muted: rgba(15, 23, 42, 0.70);
--bb-primary: #2563eb;
--bb-primary-weak: rgba(37, 99, 235, 0.12);
--bb-cta: #f97316;
--bb-border: rgba(15, 23, 42, 0.14);
--bb-card: rgba(255, 255, 255, 0.88);
--bb-card-solid: #ffffff;
--bb-bg: #000000;
--bb-text: #e2e8f0;
--bb-muted: rgba(226, 232, 240, 0.82);
--bb-primary: #22c55e;
--bb-primary-weak: rgba(34, 197, 94, 0.25);
--bb-cta: #38bdf8;
--bb-border: rgba(148, 163, 184, 0.28);
--bb-panel: #2E2E2E;
--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;
line-height: 1.5;
@@ -27,34 +30,27 @@ html, body {
}
body {
background:
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);
background: linear-gradient(180deg, #000000 0%, #050910 55%, #000000 100%);
color: var(--bb-text);
}
a { color: var(--bb-primary); text-decoration: none; }
a:hover { color: #1d4ed8; }
a { color: var(--bb-cta); text-decoration: none; }
a:hover { color: var(--bb-primary); }
button, input, select, textarea {
font: inherit;
color: inherit;
}
select, input, textarea {
background: rgba(255,255,255,0.92);
}
select, input, textarea { background: var(--bb-panel); border: 1px solid var(--bb-border); color: var(--bb-text); }
::placeholder {
color: rgba(15, 23, 42, 0.45);
}
::placeholder { color: rgba(226, 232, 240, 0.55); }
a:focus-visible,
button:focus-visible,
input: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;
}