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

refactor(frontend): refactor styles

This commit is contained in:
syuilo 2025-04-17 20:23:27 +09:00
parent 96de18b096
commit fd61ac5221
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/components/MkMenu.vue
View File

@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-for="item in (items2 ?? [])"> <template v-for="item in (items2 ?? [])">
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div> <div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]"> <div v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label]">
<span style="opacity: 0.7;">{{ item.text }}</span> <span>{{ item.text }}</span>
</span> </div>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]"> <span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span> <span><MkEllipsis/></span>
@ -619,12 +619,6 @@ onBeforeUnmount(() => {
--menuActiveBg: var(--MI_THEME-accentedBg); --menuActiveBg: var(--MI_THEME-accentedBg);
} }
&.label {
pointer-events: none;
font-size: 0.7em;
padding-bottom: 4px;
}
&.pending { &.pending {
pointer-events: none; pointer-events: none;
opacity: 0.7; opacity: 0.7;
@ -694,6 +688,19 @@ onBeforeUnmount(() => {
font-size: 12px; font-size: 12px;
} }
.label {
position: relative;
padding: 6px 16px;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.7em;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.7;
pointer-events: none;
}
.divider { .divider {
margin: 8px 0; margin: 8px 0;
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);

13
packages/frontend/src/components/MkNotification.vue
View File

@ -296,6 +296,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
right: -2px; right: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
line-height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 100%; border-radius: 100%;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
@ -310,73 +311,61 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
} }
.t_follow, .t_followRequestAccepted, .t_receiveFollowRequest { .t_follow, .t_followRequestAccepted, .t_receiveFollowRequest {
padding: 3px;
background: var(--eventFollow); background: var(--eventFollow);
pointer-events: none; pointer-events: none;
} }
.t_renote { .t_renote {
padding: 3px;
background: var(--eventRenote); background: var(--eventRenote);
pointer-events: none; pointer-events: none;
} }
.t_quote { .t_quote {
padding: 3px;
background: var(--eventRenote); background: var(--eventRenote);
pointer-events: none; pointer-events: none;
} }
.t_reply { .t_reply {
padding: 3px;
background: var(--eventReply); background: var(--eventReply);
pointer-events: none; pointer-events: none;
} }
.t_mention { .t_mention {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }
.t_pollEnded { .t_pollEnded {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }
.t_achievementEarned { .t_achievementEarned {
padding: 3px;
background: var(--eventAchievement); background: var(--eventAchievement);
pointer-events: none; pointer-events: none;
} }
.t_exportCompleted { .t_exportCompleted {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }
.t_roleAssigned { .t_roleAssigned {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }
.t_login { .t_login {
padding: 3px;
background: var(--eventLogin); background: var(--eventLogin);
pointer-events: none; pointer-events: none;
} }
.t_createToken { .t_createToken {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }
.t_chatRoomInvitationReceived { .t_chatRoomInvitationReceived {
padding: 3px;
background: var(--eventOther); background: var(--eventOther);
pointer-events: none; pointer-events: none;
} }