usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
syuilo 2024-08-19 13:13:32 +09:00
parent 6c5593d456
commit e78110a5cd
4 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/themes/_dark.json5
View File

@ -89,7 +89,6 @@
X11: 'rgba(0, 0, 0, 0.3)', X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)', X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)', X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel', X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg', X17: ':alpha<0.8<@bg',

1
packages/frontend/src/themes/_light.json5
View File

@ -89,7 +89,6 @@
X11: 'rgba(0, 0, 0, 0.1)', X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)', X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)', X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel', X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg', X17: ':alpha<0.8<@bg',

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

@ -82,6 +82,8 @@ function more() {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -91,7 +93,7 @@ function more() {
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 20px 0; padding: 20px 0;
background: var(--X14); background: var(--nav-bg-transparent);
-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));
} }
@ -125,7 +127,7 @@ function more() {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding: 20px 0; padding: 20px 0;
background: var(--X14); background: var(--nav-bg-transparent);
-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));
} }

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

@ -111,6 +111,7 @@ function more(ev: MouseEvent) {
.root { .root {
--nav-width: 250px; --nav-width: 250px;
--nav-icon-only-width: 80px; --nav-icon-only-width: 80px;
--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
flex: 0 0 var(--nav-width); flex: 0 0 var(--nav-width);
width: var(--nav-width); width: var(--nav-width);
@ -144,7 +145,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(--nav-bg-transparent);
-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));
} }
@ -187,7 +188,7 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding-top: 20px; padding-top: 20px;
background: var(--X14); background: var(--nav-bg-transparent);
-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));
} }
@ -378,7 +379,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(--nav-bg-transparent);
-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));
} }
@ -408,7 +409,7 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding-top: 20px; padding-top: 20px;
background: var(--X14); background: var(--nav-bg-transparent);
-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));
} }