FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

client: remove _acrylic

Browse source 
Acrylic is defined as having a background
similar to panel + transparency and backdrop.
Simply change everything that is _acrylic to be _panel instead.
This commit is contained in:
Chloe Kudryavtsev 2022-08-11 06:18:14 -04:00 committed by Gitea
parent 7abad139f8
commit 8d99f69c90
14 changed files with 11 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/emoji-picker.section.vue
View file

@ -1,6 +1,6 @@
<template>
<section>
<header class="_acrylic" @click="shown = !shown">
<header class="_panel" @click="shown = !shown">
<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
</header>
<div v-if="shown">

6
packages/client/src/components/emoji-picker.vue
View file

@ -46,7 +46,7 @@
</section>
<section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
<header class="_panel"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
<div>
<button
v-for="emoji in recentlyUsedEmojis"
@ -60,11 +60,11 @@
</section>
</div>
<div>
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<header class="_panel">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
<div>
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
<header class="_panel">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
</div>

2
packages/client/src/components/notification-toast.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mk-notification-toast" :style="{ zIndex }">
<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="emit('closed')">
<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
<XNotification v-if="showing" :notification="notification" class="notification _panel"/>
</transition>
</div>
</template>

2
packages/client/src/components/ui/tooltip.vue
View file

@ -1,6 +1,6 @@
<template>
<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<div v-show="showing" ref="el" class="buebdbiu _panel _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot>
<Mfm v-if="asMfm" :text="text"/>
<span v-else>{{ text }}</span>

2
packages/client/src/pages/settings/profile.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="_formRoot">
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div class="avatar _acrylic">
<div class="avatar _panel">
<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>

6
packages/client/src/pages/welcome.entrance.a.vue
View file

@ -15,7 +15,7 @@
</div>
<div class="main">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
<button class="_button _panel menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
<div class="fg">
<h1>
<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
@ -272,9 +272,7 @@ function showMenu(ev) {
left: 0;
right: 0;
margin: auto;
background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--panel);
border-radius: 999px;
overflow: clip;
width: 800px;

6
packages/client/src/style.scss
View file

@ -367,12 +367,6 @@ hr {
}
}
._acrylic {
background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
._formBlock {
margin: 1.5em 0;
}

2
packages/client/src/themes/_dark.json5
View file

@ -15,7 +15,6 @@
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent',
bg: '#000',
acrylicBg: ':alpha<0.5<@bg',
fg: '#dadada',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
@ -29,7 +28,6 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
acrylicPanel: ':alpha<0.5<@panel',
popup: ':lighten<3<@panel',
shadow: 'rgba(0, 0, 0, 0.3)',
header: ':alpha<0.7<@panel',

2
packages/client/src/themes/_light.json5
View file

@ -15,7 +15,6 @@
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent',
bg: '#fff',
acrylicBg: ':alpha<0.5<@bg',
fg: '#5f5f5f',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
@ -29,7 +28,6 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
acrylicPanel: ':alpha<0.5<@panel',
popup: ':lighten<3<@panel',
shadow: 'rgba(0, 0, 0, 0.1)',
header: ':alpha<0.7<@panel',

2
packages/client/src/themes/d-astro.json5
View file

@ -28,7 +28,6 @@
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#86b300',
buttonBg: 'rgba(255, 255, 255, 0.05)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#707b97',
indicator: '@accent',
mentionMe: '#fb5d38',
@ -42,7 +41,6 @@
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',

2
packages/client/src/themes/d-pumpkin.json5
View file

@ -49,7 +49,6 @@
success: '#86b300',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#707b97',
indicator: '@accent',
mentionMe: '@accent',
@ -64,7 +63,6 @@
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',

2
packages/client/src/themes/l-vivid.json5
View file

@ -31,7 +31,6 @@
modalBg: 'rgba(0, 0, 0, 0.3)',
success: '#86b300',
buttonBg: 'rgba(0, 0, 0, 0.05)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#bbc4ce',
indicator: '@accent',
mentionMe: '@mention',
@ -45,7 +44,6 @@
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',

2
packages/client/src/ui/_common_/upload.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="mk-uploader _acrylic" :style="{ zIndex }">
<div class="mk-uploader _panel" :style="{ zIndex }">
<ol v-if="uploads.length > 0">
<li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>

2
packages/client/src/ui/deck/column.vue
View file

@ -283,7 +283,7 @@ function onDrop(ev) {
}
&.naked {
background: var(--acrylicBg) !important;
background: var(--bg) !important;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));