mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add dark mode adaptations
This commit is contained in:
parent
94fdf85395
commit
6879a1a5a2
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -102,6 +102,7 @@
|
|||||||
"tagid",
|
"tagid",
|
||||||
"Tampermonkey",
|
"Tampermonkey",
|
||||||
"Touhou",
|
"Touhou",
|
||||||
|
"trendings",
|
||||||
"truetype",
|
"truetype",
|
||||||
"uname",
|
"uname",
|
||||||
"usercard",
|
"usercard",
|
||||||
|
|||||||
@ -239,8 +239,8 @@ onBeforeUnmount(() => {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
body.dark & {
|
body.dark & {
|
||||||
background-color: #444;
|
color: var(--be-text-title-color, #eee);
|
||||||
color: #eee;
|
background-color: var(--be-card-background-color, #444);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
@ -327,7 +327,7 @@ onBeforeUnmount(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
border: 1px solid #8884;
|
border: 1px solid var(--be-avatar-border-color, #8884);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-info {
|
&-info {
|
||||||
|
|||||||
@ -276,8 +276,8 @@ body.disable-feeds-filter {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
body.dark & {
|
body.dark & {
|
||||||
color: #eee;
|
color: var(--be-text-title-color, #eee);
|
||||||
background-color: #444;
|
background-color: var(--be-card-background-color, #444);
|
||||||
}
|
}
|
||||||
.feeds-filter-header {
|
.feeds-filter-header {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -9,59 +9,56 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, onMounted, computed } from 'vue'
|
||||||
import { getComponentSettings } from '@/core/settings'
|
import { getComponentSettings } from '@/core/settings'
|
||||||
import { VIcon } from '@/ui'
|
import { VIcon } from '@/ui'
|
||||||
import { FeedsFilterOptions } from './options'
|
import { FeedsFilterOptions } from './options'
|
||||||
|
|
||||||
const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter')
|
interface Props {
|
||||||
export default Vue.extend({
|
name: string
|
||||||
components: {
|
|
||||||
VIcon,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
type: {
|
type: {
|
||||||
type: Object,
|
id: number
|
||||||
required: true,
|
name: string
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const optionKey = this.type.id >= 0 ? 'types' : 'specialTypes'
|
|
||||||
const disabled = options[optionKey].includes(this.type.id)
|
|
||||||
return {
|
|
||||||
disabled,
|
|
||||||
optionKey,
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
watch: {
|
|
||||||
disabled(newValue: boolean) {
|
const props = defineProps<Props>()
|
||||||
this.setFilter(newValue)
|
|
||||||
},
|
const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter')
|
||||||
},
|
|
||||||
created() {
|
const optionKey = computed(() => (props.type.id >= 0 ? 'types' : 'specialTypes'))
|
||||||
this.setFilter(this.disabled, false)
|
|
||||||
},
|
const disabled = ref(options[optionKey.value].includes(props.type.id))
|
||||||
methods: {
|
|
||||||
setFilter(disabled: boolean, updateSettings = true) {
|
const setFilter = (isDisabled: boolean, updateSettings = true) => {
|
||||||
document.body.classList[disabled ? 'add' : 'remove'](`feeds-filter-block-${this.name}`)
|
if (isDisabled) {
|
||||||
|
document.body.classList.add(`feeds-filter-block-${props.name}`)
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove(`feeds-filter-block-${props.name}`)
|
||||||
|
}
|
||||||
|
|
||||||
if (!updateSettings) {
|
if (!updateSettings) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const optionKey = this.optionKey as 'types' | 'specialTypes'
|
|
||||||
if (disabled) {
|
const key = optionKey.value as 'types' | 'specialTypes'
|
||||||
options[optionKey].push(this.type.id)
|
if (isDisabled) {
|
||||||
|
options[key].push(props.type.id)
|
||||||
} else {
|
} else {
|
||||||
const index = options[optionKey].indexOf(this.type.id)
|
const index = options[key].indexOf(props.type.id)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
options[optionKey].splice(index, 1)
|
options[key].splice(index, 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
|
||||||
|
watch(disabled, (newValue: boolean) => {
|
||||||
|
setFilter(newValue)
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setFilter(disabled.value, false)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -77,7 +74,7 @@ export default Vue.extend({
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border: 1px solid #8884;
|
border: 1px solid var(--be-card-border-color, #8884);
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -86,7 +83,7 @@ export default Vue.extend({
|
|||||||
color: var(--theme-color) !important;
|
color: var(--theme-color) !important;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #8882;
|
background-color: var(--be-hover-highlight-background-color, #8882);
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -19,8 +19,8 @@
|
|||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
body.dark & {
|
body.dark & {
|
||||||
background-color: #444;
|
color: var(--be-text-title-color, #eee);
|
||||||
color: #eee;
|
background-color: var(--be-card-background-color, #444);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
--Ga0: #0d0d0e;
|
--Ga0: #0d0d0e;
|
||||||
--Ga0_s: #1e2022;
|
--Ga0_s: #1e2022;
|
||||||
--Ga0_t: #1e2022;
|
--Ga0_t: #1e2022;
|
||||||
--Ga1: #000000;
|
--Ga1: #000;
|
||||||
--Ga1_s: #232527;
|
--Ga1_s: #232527;
|
||||||
--Ga1_t: #232527;
|
--Ga1_t: #232527;
|
||||||
--Ga1_e: #232527;
|
--Ga1_e: #232527;
|
||||||
@ -29,9 +29,9 @@
|
|||||||
--Ga12: #1f2022;
|
--Ga12: #1f2022;
|
||||||
--Wh0: #17181a;
|
--Wh0: #17181a;
|
||||||
--Wh0_t: #17181a;
|
--Wh0_t: #17181a;
|
||||||
--Ba0: #000000;
|
--Ba0: #000;
|
||||||
--Ba0_s: #ffffff;
|
--Ba0_s: #fff;
|
||||||
--Ba0_t: #000000;
|
--Ba0_t: #000;
|
||||||
--Pi0: #26161c;
|
--Pi0: #26161c;
|
||||||
--Pi1: #2f1a22;
|
--Pi1: #2f1a22;
|
||||||
--Pi2: #472030;
|
--Pi2: #472030;
|
||||||
@ -187,6 +187,34 @@
|
|||||||
--Si8: #c8ced6;
|
--Si8: #c8ced6;
|
||||||
--Si9: #dce0e5;
|
--Si9: #dce0e5;
|
||||||
--Si10: #f0f2f4;
|
--Si10: #f0f2f4;
|
||||||
|
--Pi5_rgb: 212, 78, 125;
|
||||||
|
--Pi1_rgb: 47, 26, 34;
|
||||||
|
--Lb5_rgb: 0, 135, 189;
|
||||||
|
--Lb1_rgb: 11, 32, 42;
|
||||||
|
--Re5_rgb: 209, 64, 62;
|
||||||
|
--Re1_rgb: 46, 22, 23;
|
||||||
|
--Gr5_rgb: 31, 162, 81;
|
||||||
|
--Gr1_rgb: 17, 39, 27;
|
||||||
|
--Or5_rgb: 214, 96, 17;
|
||||||
|
--Or1_rgb: 48, 27, 16;
|
||||||
|
--Ye5_rgb: 219, 135, 0;
|
||||||
|
--Ye1_rgb: 52, 36, 16;
|
||||||
|
--Wh0_rgb: 23, 24, 26;
|
||||||
|
--Ga0_rgb: 13, 13, 14;
|
||||||
|
--Ga1_rgb: 0, 0, 0;
|
||||||
|
--Ga11_rgb: 36, 38, 40;
|
||||||
|
--Ga12_rgb: 31, 32, 34;
|
||||||
|
--Wh0_u_rgb: 255, 255, 255;
|
||||||
|
--Ga10_rgb: 231, 233, 235;
|
||||||
|
--Ga7_rgb: 162, 167, 174;
|
||||||
|
--Ga5_rgb: 117, 122, 129;
|
||||||
|
--Ga3_rgb: 70, 73, 77;
|
||||||
|
--Lb6_rgb: 44, 156, 200;
|
||||||
|
--Ye6_rgb: 225, 156, 44;
|
||||||
|
--Ga1_s_rgb: 35, 37, 39;
|
||||||
|
--Ga2_rgb: 47, 49, 52;
|
||||||
|
--Ga0_s_rgb: 30, 32, 34;
|
||||||
|
--Ba0_rgb: 0, 0, 0;
|
||||||
}
|
}
|
||||||
html:root {
|
html:root {
|
||||||
--brand_blue: var(--theme-color);
|
--brand_blue: var(--theme-color);
|
||||||
|
|||||||
@ -29,66 +29,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
import { VIcon, ProgressRing } from '@/ui'
|
import { VIcon, ProgressRing } from '@/ui'
|
||||||
import type { Toast } from '.'
|
import type { Toast } from '.'
|
||||||
|
|
||||||
export default Vue.extend({
|
interface Props {
|
||||||
components: {
|
card: Toast
|
||||||
VIcon,
|
}
|
||||||
ProgressRing,
|
|
||||||
},
|
const props = defineProps<Props>()
|
||||||
props: {
|
|
||||||
card: {
|
const progressMax = ref(0)
|
||||||
type: Object,
|
const remainingTime = ref(0)
|
||||||
required: true,
|
|
||||||
},
|
const durationTick = () => {
|
||||||
},
|
const { closeTime } = props.card
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
progressMax: 0,
|
|
||||||
remainingTime: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.readDuration()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
durationTick() {
|
|
||||||
const { closeTime } = this.card as Toast
|
|
||||||
if (!closeTime) {
|
if (!closeTime) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.remainingTime = closeTime - Number(new Date())
|
remainingTime.value = closeTime - Number(new Date())
|
||||||
if (this.remainingTime > 0) {
|
if (remainingTime.value > 0) {
|
||||||
requestAnimationFrame(() => this.durationTick())
|
requestAnimationFrame(() => durationTick())
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
readDuration() {
|
|
||||||
const { duration, closeTime } = this.card as Toast
|
const readDuration = () => {
|
||||||
|
const { duration, closeTime } = props.card
|
||||||
if (duration) {
|
if (duration) {
|
||||||
this.progressMax = closeTime - Number(new Date())
|
progressMax.value = closeTime - Number(new Date())
|
||||||
this.remainingTime = this.progressMax
|
remainingTime.value = progressMax.value
|
||||||
requestAnimationFrame(() => this.durationTick())
|
requestAnimationFrame(() => durationTick())
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
stopTimer() {
|
|
||||||
;(this.card as Toast).clearDuration()
|
const stopTimer = () => {
|
||||||
this.progressMax = 0
|
props.card.clearDuration()
|
||||||
this.remainingTime = 0
|
progressMax.value = 0
|
||||||
},
|
remainingTime.value = 0
|
||||||
startTimer() {
|
}
|
||||||
;(this.card as Toast).setDuration()
|
|
||||||
this.readDuration()
|
const startTimer = () => {
|
||||||
},
|
props.card.setDuration()
|
||||||
},
|
readDuration()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
readDuration()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'common';
|
@import 'common';
|
||||||
.toast-card {
|
.toast-card {
|
||||||
background: #fff;
|
background: var(--be-card-background-color, #fff);
|
||||||
min-width: var(--card-min-width);
|
min-width: var(--card-min-width);
|
||||||
max-width: 60vw;
|
max-width: 60vw;
|
||||||
min-height: 87px;
|
min-height: 87px;
|
||||||
@ -119,14 +113,11 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
&-title {
|
&-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #444;
|
color: var(--be-text-title-color, #444);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
@include semi-bold();
|
@include semi-bold();
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
body.dark & {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&-close {
|
&-close {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -166,7 +157,7 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-message {
|
&-message {
|
||||||
color: #000;
|
color: var(--be-text-content-color, #000);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 0 16px 12px 12px;
|
margin: 0 16px 12px 12px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
@ -196,19 +187,19 @@ export default Vue.extend({
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
background-color: #8882;
|
background-color: var(--be-tag-background-color, #8882);
|
||||||
|
color: var(--be-text-content-color, #000);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #000;
|
|
||||||
transition: all 0.2s ease-out;
|
transition: all 0.2s ease-out;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
.link {
|
.link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #8883;
|
background-color: var(--be-tag-hover-background-color, #8883);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: #8884;
|
background-color: var(--be-tag-active-background-color, #8884);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.download-link,
|
.download-link,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user