diff --git a/src/pages/options.ts b/src/pages/options.ts index b5fd744..cda080e 100644 --- a/src/pages/options.ts +++ b/src/pages/options.ts @@ -190,6 +190,10 @@ void (async function init() { { const $contentTags = $('[data-content-key="tags"]') + const renderEmptyTagsContent = () => { + $contentTags.append($('#tags-empty').html()) + } + const renderTagsContent = async () => { const storage = await getStorage(false) const tagData = storage[StorageKey.MemberTag] @@ -361,9 +365,11 @@ void (async function init() { $contentTags.append($tagList) loadIcons() + } else { + renderEmptyTagsContent() } } else { - $contentTags.append($('#tags-empty').html()) + renderEmptyTagsContent() } } diff --git a/src/pages/popup.ts b/src/pages/popup.ts index 14d7611..af4046f 100644 --- a/src/pages/popup.ts +++ b/src/pages/popup.ts @@ -109,7 +109,6 @@ const $tabMsg = $('.tabs > li[data-target="tab-message"]') function loadSettings() { const storage = getStorageSync() const api = storage[StorageKey.API] - const options = storage[StorageKey.Options] const $patInput = $('#pat') diff --git a/src/styles/options.scss b/src/styles/options.scss index 73c5715..053afac 100644 --- a/src/styles/options.scss +++ b/src/styles/options.scss @@ -88,7 +88,8 @@ body { .backup-tip { margin-bottom: 20px; padding: 10px; - background-color: var(--v2p-color-button-background); + font-size: 14px; + background-color: var(--v2p-color-bg-block); border-radius: 5px; } @@ -393,7 +394,7 @@ fieldset { > img { width: 30px; height: 30px; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-block); border-radius: 5px; } } @@ -414,7 +415,7 @@ fieldset { align-items: center; justify-content: center; padding: 2px 6px; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-block); border-radius: 4px; &.tag-item-tag-add { @@ -476,7 +477,7 @@ fieldset { gap: 10px; justify-content: center; padding: 20px; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-block); border-radius: 8px; } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index 41b2274..e618b48 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -82,12 +82,12 @@ button { padding: 5px 8px; color: var(--v2p-color-foreground); text-decoration: none; - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-button-background); border-radius: 5px; &:hover { text-decoration: none; - background-color: var(--v2p-color-main-300); + background-color: var(--v2p-color-button-background-hover); } .action-icon { @@ -104,10 +104,10 @@ button { width: 100%; padding: 4px 6px; font-size: 14px; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-tabs); border-radius: 5px; - > li[data-target] { + li[data-target] { cursor: pointer; user-select: none; display: flex; @@ -119,11 +119,11 @@ button { border-radius: 3px; &:hover { - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-button-background-hover); } &.active { - color: var(--v2p-color-main-100); + color: var(--v2p-color-background); background-color: var(--v2p-color-foreground); } } @@ -180,7 +180,7 @@ button { text-decoration: none; &:hover { - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-link); } .title { @@ -332,8 +332,8 @@ button { gap: 0 10px; align-items: center; padding: 0 5px 0 0; - background-color: var(--v2p-color-main-100); - border: 1px solid var(--v2p-color-main-300); + background-color: var(--v2p-color-bg-block); + border: 1px solid var(--v2p-color-border); border-radius: 6px; &:has(.has-value) { @@ -421,14 +421,14 @@ hr { margin-top: 10px; padding: 5px 8px; color: var(--v2p-color-foreground); - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-block); border-radius: 5px; @at-root { #clear-storage, #sync-settings { padding: 0 5px; - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-button-background-hover); border-radius: 3px; transition: background-color 0.2s, @@ -503,7 +503,7 @@ a { &:hover { text-decoration: underline; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-link-hover); } } } diff --git a/src/styles/v2ex-effect.scss b/src/styles/v2ex-effect.scss index 007a22b..b007463 100644 --- a/src/styles/v2ex-effect.scss +++ b/src/styles/v2ex-effect.scss @@ -412,7 +412,7 @@ a.v2p-topic-preview-title-link { border-radius: 4px; &:hover { - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-button-background-hover); } &.v2p-tab-active { @@ -425,7 +425,7 @@ a.v2p-topic-preview-title-link { } .v2p-no-pat { - padding: 30px 10px; + padding: 30px 20px; font-size: 15px; text-align: center; @@ -446,7 +446,7 @@ a.v2p-topic-preview-title-link { align-items: center; margin: 0 5px; padding: 2px 10px; - background-color: var(--v2p-color-button-background); + background-color: var(--v2p-color-bg-block); border-radius: 2px; } @@ -457,7 +457,7 @@ a.v2p-topic-preview-title-link { max-width: 800px; margin-top: 20px; padding: 20px; - background-color: var(--v2p-color-button-background); + background-color: var(--v2p-color-bg-block); border-radius: 10px; } diff --git a/src/styles/v2ex-theme-dark.scss b/src/styles/v2ex-theme-dark.scss index 0cd4ab3..537452c 100644 --- a/src/styles/v2ex-theme-dark.scss +++ b/src/styles/v2ex-theme-dark.scss @@ -46,6 +46,7 @@ --v2p-color-bg-reply: var(--v2p-color-main-100); --v2p-color-bg-tooltip: var(--v2p-color-main-100); --v2p-color-bg-avatar: var(--v2p-color-main-300); + --v2p-color-bg-block: #373e47; // ---- 背景 ---- --v2p-color-heart: #ef4444; diff --git a/src/styles/v2ex-theme-dawn.scss b/src/styles/v2ex-theme-dawn.scss index cfa02fa..7e1b92f 100644 --- a/src/styles/v2ex-theme-dawn.scss +++ b/src/styles/v2ex-theme-dawn.scss @@ -22,6 +22,9 @@ body.v2p-theme-dawn, --v2p-color-accent-400: hsl(var(--v2p-color-foam) / 50%); --v2p-color-accent-500: hsl(var(--v2p-color-foam) / 65%); --v2p-color-accent-600: hsl(var(--v2p-color-foam) / 80%); + --v2p-color-orange-50: hsl(var(--v2p-color-gold) / 10%); + --v2p-color-orange-100: hsl(var(--v2p-color-gold) / 20%); + --v2p-color-orange-400: hsl(var(--v2p-color-gold)); // ==== --v2p-color-background: hsl(var(--v2p-color-base)); @@ -52,6 +55,9 @@ body.v2p-theme-dawn, --v2p-color-bg-tabs: hsl(var(--v2p-color-pine) / 10%); --v2p-color-bg-tpr: hsl(var(--v2p-color-text) / 10%); --v2p-color-bg-avatar: hsl(var(--v2p-color-overlay)); + --v2p-color-bg-block: hsl(var(--v2p-color-text) / 10%); + --v2p-color-bg-link: hsl(var(--v2p-color-text) / 10%); + --v2p-color-bg-link-hover: hsl(var(--v2p-color-text) / 15%); // ---- 背景 ---- --v2p-color-tabs: hsl(var(--v2p-color-pine)); @@ -74,6 +80,14 @@ body.v2p-theme-dawn, 0 9px 28px 8px rgb(0 0 0 / 5%); // ---- 阴影 ---- + // V2EX 原有的 CSS 变量: + --link-color: var(--v2p-color-foreground); + --box-background-alt-color: var(--v2p-color-bg-block); + --box-background-hover-color: var(--v2p-color-bg-link-hover); + --button-hover-color: var(--v2p-color-button-background-hover); + --button-border-color: var(--v2p-color-border); + --button-border-hover-color: var(--v2p-color-border-darker); + visibility: visible; .button { diff --git a/src/styles/v2ex-theme-default.scss b/src/styles/v2ex-theme-default.scss index d302dcc..ea86caf 100644 --- a/src/styles/v2ex-theme-default.scss +++ b/src/styles/v2ex-theme-default.scss @@ -274,7 +274,7 @@ body { padding: 5px 6px; font-size: 13px; color: var(--v2p-color-font-secondary); - background-color: var(--v2p-color-button-background); + background-color: var(--v2p-color-bg-block); border-radius: 4px; &:hover { @@ -323,7 +323,7 @@ body { .dock_area { margin: 12px 0; - background: var(--v2p-color-main-100); + background: var(--v2p-color-bg-block); } .member-activity-bar { @@ -474,10 +474,10 @@ body { @include share.link; color: currentColor; - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-bg-link); &:hover { - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-bg-link-hover); } &:has(> .embedded_image) { @@ -625,12 +625,12 @@ body { // 个人页的链接。 .social_label:is(:link, :visited, :active) { - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-button-background); border-radius: var(--box-border-radius); box-shadow: none; &:hover { - background-color: var(--v2p-color-main-200); + background-color: var(--v2p-color-button-background-hover); } } @@ -676,8 +676,8 @@ body { } .onoffswitch label .frame::after { - color: var(--v2p-color-main-100); - background-color: var(--v2p-color-main-400); + color: var(--v2p-color-font-secondary); + background-color: var(--v2p-color-bg-search); } select { @@ -692,7 +692,7 @@ body { .box { .tag { &::before { - color: var(--v2p-color-main-500); + color: var(--v2p-color-font-secondary); } &:link, @@ -742,7 +742,7 @@ body { } &:not(.v2p-hover-btn):hover { - background-color: var(--v2p-color-main-100); + background-color: var(--v2p-color-button-background-hover); } } @@ -913,7 +913,7 @@ body { @include count; color: var(--v2p-color-button-foreground); - background-color: var(--v2p-color-button-background-hover); + background-color: var(--v2p-color-bg-block); } .count_orange { @@ -1280,7 +1280,19 @@ body { } } +// 广告: .wwads-cn { border: none !important; box-shadow: none !important; } + +// 广告: +.box:has(a[href^='/advertise']) { + overflow: hidden; + border: none !important; + box-shadow: none !important; + + .sidebar_compliance { + background-color: var(--v2p-color-bg-block); + } +} diff --git a/src/styles/v2ex-theme-var.scss b/src/styles/v2ex-theme-var.scss index 54a9fe1..096da74 100644 --- a/src/styles/v2ex-theme-var.scss +++ b/src/styles/v2ex-theme-var.scss @@ -70,8 +70,10 @@ --v2p-color-bg-tooltip: var(--v2p-color-bg-content); --v2p-color-bg-tabs: var(--v2p-color-main-100); --v2p-color-bg-tpr: var(--v2p-color-main-100); - --v2p-color-bg-block: var(--v2p-color-main-100); --v2p-color-bg-avatar: var(--v2p-color-main-300); + --v2p-color-bg-block: var(--v2p-color-main-100); + --v2p-color-bg-link: var(--v2p-color-main-100); + --v2p-color-bg-link-hover: var(--v2p-color-main-200); // ---- 背景 ---- --v2p-color-tabs: var(--v2p-color-foreground);