added to navbar

This commit is contained in:
tamaina 2025-08-25 09:50:47 +09:00
parent 18bc7f6124
commit 75ab688a36
2 changed files with 10 additions and 15 deletions

View File

@ -2,14 +2,14 @@ import type { Directive } from 'vue';
let initialized = false; let initialized = false;
let styleEl: HTMLStyleElement | null = null; let styleEl: HTMLStyleElement | null = null;
const canUseDeviceOrientation = !window.DeviceOrientationEvent; const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
const className = '_flipOnDeviceOrientation'; const className = '_flipOnDeviceOrientation';
const variableName = `--MI-flip_on_device_orientation_transform`; const variableName = `--MI-flip_on_device_orientation_transform`;
function handleOrientationChange(event: DeviceOrientationEvent) { function handleOrientationChange(event: DeviceOrientationEvent) {
const isUpsideDown = event.beta ? event.beta < -15 : false; const isUpsideDown = event.beta ? event.beta < 5 : false;
const transform = isUpsideDown ? 'scale(-1, -1)' : ''; const transform = isUpsideDown ? 'scale(-1, -1)' : '';
window.document.body.style.setProperty(variableName, transform); window.document.documentElement.style.setProperty(variableName, transform);
} }
function registerListener() { function registerListener() {

View File

@ -170,7 +170,6 @@ $avatarSize: 58px;
.avatar { .avatar {
width: $avatarSize; width: $avatarSize;
height: $avatarSize; height: $avatarSize;
margin-right: 8px;
} }
.names { .names {
@ -179,10 +178,12 @@ $avatarSize: 58px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: start; align-items: start;
margin-top: -4px; margin: -4px -2px 0 8px;
padding-right: 16px;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: visible; overflow-y: visible;
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
} }
.name { .name {
@ -191,11 +192,8 @@ $avatarSize: 58px;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
width: fit-content; width: fit-content;
max-width: calc(100% - 16px); max-width: 100%;
overflow-x: hidden; overflow: visible;
overflow-y: visible;
padding-right: 16px;
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
} }
.username { .username {
@ -204,11 +202,8 @@ $avatarSize: 58px;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
width: fit-content; width: fit-content;
max-width: calc(100% - 16px); max-width: 100%;
overflow-x: hidden; overflow: visible;
overflow-y: visible;
padding-right: 16px;
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
} }
.logo { .logo {