oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 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
No known key found for this signature in database
GPG key ID: 139D6573F92DA9F7
7 changed files with 21 additions and 21 deletions
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> <template>
<div ref="rootEl" :class="$style.root"> <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.title"><div><slot name="header"></slot></div></div>
<div :class="$style.divider"></div> <div :class="$style.divider"></div>
<button class="_button" :class="$style.button"> <button class="_button" :class="$style.button">
@ -119,8 +119,8 @@ onMounted(() => {
z-index: 10; z-index: 10;
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
-webkit-backdrop-filter: var(--blur, blur(8px)); // -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px)); // backdrop-filter: var(--blur, blur(20px));
} }
.title { .title {

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

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

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

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

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

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

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

@ -288,11 +288,11 @@ export const defaultStore = markRaw(new Storage('base', {
}, },
useBlurEffectForModal: { useBlurEffectForModal: {
where: 'device', where: 'device',
default: false, default: true,
}, },
useBlurEffect: { useBlurEffect: {
where: 'device', where: 'device',
default: false, default: true,
}, },
showFixedPostForm: { showFixedPostForm: {
where: 'device', 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> <template>
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.top"> <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"> <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-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"/> <img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
@ -92,7 +92,7 @@ function more() {
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 20px 0; padding: 20px 0;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
} }
@ -131,7 +131,7 @@ function more() {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding: 20px 0; padding: 20px 0;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
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.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body"> <div :class="$style.body">
<div :class="$style.top"> <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"> <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-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"/> <img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
@ -159,7 +159,7 @@ function more(ev: MouseEvent) {
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 20px 0; padding: 20px 0;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
} }
@ -198,7 +198,7 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding-top: 20px; padding-top: 20px;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
} }
@ -363,7 +363,7 @@ function more(ev: MouseEvent) {
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 20px 0; padding: 20px 0;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
} }
@ -389,7 +389,7 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding-top: 20px; padding-top: 20px;
background: var(--X14); // background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
} }