oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

style(ui): transparent theme support

Browse Source
This commit is contained in:
オスカー、 2024-07-25 19:58:09 +09:00
parent e760b78963
commit 3286a35480
Signed by: SWREI
GPG Key ID: 139D6573F92DA9F7
7 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/MkFoldableSection.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl" :class="$style.root">
<header :class="$style.header" class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<header :class="$style.header" class="_button" @click="showBody = !showBody">
<div :class="$style.title"><div><slot name="header"></slot></div></div>
<div :class="$style.divider"></div>
<button class="_button" :class="$style.button">
@ -119,8 +119,8 @@ onMounted(() => {
z-index: 10;
position: sticky;
top: var(--stickyTop, 0px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px));
// -webkit-backdrop-filter: var(--blur, blur(8px));
// backdrop-filter: var(--blur, blur(20px));
}
.title {

4
packages/frontend/src/components/MkInfo.vue
View File

@ -44,8 +44,8 @@ function close() {
white-space: pre-wrap;
&.warn {
background: var(--infoWarnBg);
color: var(--infoWarnFg);
background: var(--infoBg);
color: var(--infoFg);
}
&.rounded {

6
packages/frontend/src/components/global/MkPageHeader.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
<div v-if="show" ref="el" :class="[$style.root]">
<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar :class="$style.avatar" :user="$i"/>
@ -130,8 +130,8 @@ onUnmounted(() => {
<style lang="scss" module>
.root {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
// -webkit-backdrop-filter: var(--blur, blur(15px));
// backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 0.5px var(--divider);
width: 100%;
}

6
packages/frontend/src/pages/admin/_header_.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
<div ref="el" class="fdidabkc" @click="onClick">
<template v-if="pageMetadata">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="pageMetadata.icon" class="icon" :class="pageMetadata.icon"></i>
@ -155,8 +155,8 @@ onUnmounted(() => {
--height: 60px;
display: flex;
width: 100%;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
// -webkit-backdrop-filter: var(--blur, blur(15px));
// backdrop-filter: var(--blur, blur(15px));
> .buttons {
--margin: 8px;

4
packages/frontend/src/store.ts
View File

@ -288,11 +288,11 @@ export const defaultStore = markRaw(new Storage('base', {
},
useBlurEffectForModal: {
where: 'device',
default: false,
default: true,
},
useBlurEffect: {
where: 'device',
default: false,
default: true,
},
showFixedPostForm: {
where: 'device',

6
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
<div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<div v-if="instance.bannerUrl != null" :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button class="_button" :class="$style.instance" @click="openInstanceMenu">
<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/about-icon.png" alt="" :class="$style.instanceIconAlt"/>
<img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
@ -92,7 +92,7 @@ function more() {
top: 0;
z-index: 1;
padding: 20px 0;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}
@ -131,7 +131,7 @@ function more() {
position: sticky;
bottom: 0;
padding: 20px 0;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}

10
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body">
<div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<div v-if="instance.bannerUrl != null" :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/about-icon.png" alt="" :class="$style.instanceIconAlt"/>
<img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
@ -159,7 +159,7 @@ function more(ev: MouseEvent) {
top: 0;
z-index: 1;
padding: 20px 0;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}
@ -198,7 +198,7 @@ function more(ev: MouseEvent) {
position: sticky;
bottom: 0;
padding-top: 20px;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}
@ -363,7 +363,7 @@ function more(ev: MouseEvent) {
top: 0;
z-index: 1;
padding: 20px 0;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}
@ -389,7 +389,7 @@ function more(ev: MouseEvent) {
position: sticky;
bottom: 0;
padding-top: 20px;
background: var(--X14);
// background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}