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",
|
||||
"Tampermonkey",
|
||||
"Touhou",
|
||||
"trendings",
|
||||
"truetype",
|
||||
"uname",
|
||||
"usercard",
|
||||
|
||||
@ -239,8 +239,8 @@ onBeforeUnmount(() => {
|
||||
background-color: #fff;
|
||||
|
||||
body.dark & {
|
||||
background-color: #444;
|
||||
color: #eee;
|
||||
color: var(--be-text-title-color, #eee);
|
||||
background-color: var(--be-card-background-color, #444);
|
||||
}
|
||||
|
||||
&-header {
|
||||
@ -327,7 +327,7 @@ onBeforeUnmount(() => {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
border: 1px solid #8884;
|
||||
border: 1px solid var(--be-avatar-border-color, #8884);
|
||||
}
|
||||
|
||||
&-info {
|
||||
|
||||
@ -276,8 +276,8 @@ body.disable-feeds-filter {
|
||||
}
|
||||
}
|
||||
body.dark & {
|
||||
color: #eee;
|
||||
background-color: #444;
|
||||
color: var(--be-text-title-color, #eee);
|
||||
background-color: var(--be-card-background-color, #444);
|
||||
}
|
||||
.feeds-filter-header {
|
||||
cursor: pointer;
|
||||
|
||||
@ -9,59 +9,56 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, computed } from 'vue'
|
||||
import { getComponentSettings } from '@/core/settings'
|
||||
import { VIcon } from '@/ui'
|
||||
import { FeedsFilterOptions } from './options'
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
type: {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter')
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
VIcon,
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const optionKey = this.type.id >= 0 ? 'types' : 'specialTypes'
|
||||
const disabled = options[optionKey].includes(this.type.id)
|
||||
return {
|
||||
disabled,
|
||||
optionKey,
|
||||
|
||||
const optionKey = computed(() => (props.type.id >= 0 ? 'types' : 'specialTypes'))
|
||||
|
||||
const disabled = ref(options[optionKey.value].includes(props.type.id))
|
||||
|
||||
const setFilter = (isDisabled: boolean, updateSettings = true) => {
|
||||
if (isDisabled) {
|
||||
document.body.classList.add(`feeds-filter-block-${props.name}`)
|
||||
} else {
|
||||
document.body.classList.remove(`feeds-filter-block-${props.name}`)
|
||||
}
|
||||
|
||||
if (!updateSettings) {
|
||||
return
|
||||
}
|
||||
|
||||
const key = optionKey.value as 'types' | 'specialTypes'
|
||||
if (isDisabled) {
|
||||
options[key].push(props.type.id)
|
||||
} else {
|
||||
const index = options[key].indexOf(props.type.id)
|
||||
if (index !== -1) {
|
||||
options[key].splice(index, 1)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled(newValue: boolean) {
|
||||
this.setFilter(newValue)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setFilter(this.disabled, false)
|
||||
},
|
||||
methods: {
|
||||
setFilter(disabled: boolean, updateSettings = true) {
|
||||
document.body.classList[disabled ? 'add' : 'remove'](`feeds-filter-block-${this.name}`)
|
||||
if (!updateSettings) {
|
||||
return
|
||||
}
|
||||
const optionKey = this.optionKey as 'types' | 'specialTypes'
|
||||
if (disabled) {
|
||||
options[optionKey].push(this.type.id)
|
||||
} else {
|
||||
const index = options[optionKey].indexOf(this.type.id)
|
||||
if (index !== -1) {
|
||||
options[optionKey].splice(index, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
watch(disabled, (newValue: boolean) => {
|
||||
setFilter(newValue)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setFilter(disabled.value, false)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@ -77,7 +74,7 @@ export default Vue.extend({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #8884;
|
||||
border: 1px solid var(--be-card-border-color, #8884);
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
@ -86,7 +83,7 @@ export default Vue.extend({
|
||||
color: var(--theme-color) !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #8882;
|
||||
background-color: var(--be-hover-highlight-background-color, #8882);
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
color: black;
|
||||
}
|
||||
body.dark & {
|
||||
background-color: #444;
|
||||
color: #eee;
|
||||
color: var(--be-text-title-color, #eee);
|
||||
background-color: var(--be-card-background-color, #444);
|
||||
&:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
--Ga0: #0d0d0e;
|
||||
--Ga0_s: #1e2022;
|
||||
--Ga0_t: #1e2022;
|
||||
--Ga1: #000000;
|
||||
--Ga1: #000;
|
||||
--Ga1_s: #232527;
|
||||
--Ga1_t: #232527;
|
||||
--Ga1_e: #232527;
|
||||
@ -29,9 +29,9 @@
|
||||
--Ga12: #1f2022;
|
||||
--Wh0: #17181a;
|
||||
--Wh0_t: #17181a;
|
||||
--Ba0: #000000;
|
||||
--Ba0_s: #ffffff;
|
||||
--Ba0_t: #000000;
|
||||
--Ba0: #000;
|
||||
--Ba0_s: #fff;
|
||||
--Ba0_t: #000;
|
||||
--Pi0: #26161c;
|
||||
--Pi1: #2f1a22;
|
||||
--Pi2: #472030;
|
||||
@ -187,6 +187,34 @@
|
||||
--Si8: #c8ced6;
|
||||
--Si9: #dce0e5;
|
||||
--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 {
|
||||
--brand_blue: var(--theme-color);
|
||||
|
||||
@ -29,66 +29,60 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { VIcon, ProgressRing } from '@/ui'
|
||||
import type { Toast } from '.'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
VIcon,
|
||||
ProgressRing,
|
||||
},
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
progressMax: 0,
|
||||
remainingTime: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.readDuration()
|
||||
},
|
||||
methods: {
|
||||
durationTick() {
|
||||
const { closeTime } = this.card as Toast
|
||||
if (!closeTime) {
|
||||
return
|
||||
}
|
||||
this.remainingTime = closeTime - Number(new Date())
|
||||
if (this.remainingTime > 0) {
|
||||
requestAnimationFrame(() => this.durationTick())
|
||||
}
|
||||
},
|
||||
readDuration() {
|
||||
const { duration, closeTime } = this.card as Toast
|
||||
if (duration) {
|
||||
this.progressMax = closeTime - Number(new Date())
|
||||
this.remainingTime = this.progressMax
|
||||
requestAnimationFrame(() => this.durationTick())
|
||||
}
|
||||
},
|
||||
stopTimer() {
|
||||
;(this.card as Toast).clearDuration()
|
||||
this.progressMax = 0
|
||||
this.remainingTime = 0
|
||||
},
|
||||
startTimer() {
|
||||
;(this.card as Toast).setDuration()
|
||||
this.readDuration()
|
||||
},
|
||||
},
|
||||
interface Props {
|
||||
card: Toast
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const progressMax = ref(0)
|
||||
const remainingTime = ref(0)
|
||||
|
||||
const durationTick = () => {
|
||||
const { closeTime } = props.card
|
||||
if (!closeTime) {
|
||||
return
|
||||
}
|
||||
remainingTime.value = closeTime - Number(new Date())
|
||||
if (remainingTime.value > 0) {
|
||||
requestAnimationFrame(() => durationTick())
|
||||
}
|
||||
}
|
||||
|
||||
const readDuration = () => {
|
||||
const { duration, closeTime } = props.card
|
||||
if (duration) {
|
||||
progressMax.value = closeTime - Number(new Date())
|
||||
remainingTime.value = progressMax.value
|
||||
requestAnimationFrame(() => durationTick())
|
||||
}
|
||||
}
|
||||
|
||||
const stopTimer = () => {
|
||||
props.card.clearDuration()
|
||||
progressMax.value = 0
|
||||
remainingTime.value = 0
|
||||
}
|
||||
|
||||
const startTimer = () => {
|
||||
props.card.setDuration()
|
||||
readDuration()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
readDuration()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'common';
|
||||
.toast-card {
|
||||
background: #fff;
|
||||
background: var(--be-card-background-color, #fff);
|
||||
min-width: var(--card-min-width);
|
||||
max-width: 60vw;
|
||||
min-height: 87px;
|
||||
@ -119,14 +113,11 @@ export default Vue.extend({
|
||||
}
|
||||
&-title {
|
||||
font-size: 18px;
|
||||
color: #444;
|
||||
color: var(--be-text-title-color, #444);
|
||||
opacity: 0.5;
|
||||
margin: 12px;
|
||||
@include semi-bold();
|
||||
flex: 1 1 auto;
|
||||
body.dark & {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&-close {
|
||||
height: 24px;
|
||||
@ -166,7 +157,7 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
&-message {
|
||||
color: #000;
|
||||
color: var(--be-text-content-color, #000);
|
||||
font-size: 14px;
|
||||
margin: 0 16px 12px 12px;
|
||||
white-space: pre-wrap;
|
||||
@ -196,19 +187,19 @@ export default Vue.extend({
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
margin: 2px;
|
||||
background-color: #8882;
|
||||
background-color: var(--be-tag-background-color, #8882);
|
||||
color: var(--be-text-content-color, #000);
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
transition: all 0.2s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.link {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #8883;
|
||||
background-color: var(--be-tag-hover-background-color, #8883);
|
||||
}
|
||||
&:active {
|
||||
background-color: #8884;
|
||||
background-color: var(--be-tag-active-background-color, #8884);
|
||||
}
|
||||
}
|
||||
.download-link,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user