MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-26 18:23:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

clean up element plus css

Browse Source
This commit is contained in:
pa
2026-01-16 20:50:41 +09:00
committed by Natsumi
parent 78f3bc512d
commit 093fe082f2
29 changed files with 108 additions and 1268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Tools/Gallery.vue
View File

@@ -1198,13 +1198,11 @@
}
.gallery-tab-count {
color: var(--el-text-color-secondary);
font-size: 12px;
margin-left: 5px;
}
.gallery-meta {
color: var(--el-text-color-secondary);
font-family: monospace;
display: block;
}

5
src/views/Tools/ScreenshotMetadata.vue
View File

@@ -7,7 +7,7 @@
<span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
</div>
<div v-loading="screenshotMetadataDialog.loading" @dragover.prevent @dragenter.prevent @drop="handleDrop">
<span style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace">{{
<span>{{
t('dialog.screenshot_metadata.drag')
}}</span>
<br />
@@ -101,7 +101,7 @@
v-if="screenshotMetadataDialog.metadata.author"
:userid="screenshotMetadataDialog.metadata.author.id"
:hint="screenshotMetadataDialog.metadata.author.displayName"
style="color: var(--el-text-color-secondary); font-family: monospace" />
/>
<br />
<div class="my-2 w-[90%] ml-17">
<Carousel :opts="{ loop: false }" @init-api="handleScreenshotMetadataCarouselInit">
@@ -146,7 +146,6 @@
<span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
<span
v-if="user.pos"
style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace"
v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
<br />
</span>

8
src/views/Tools/Tools.vue
View File

@@ -323,14 +323,12 @@
transition: all 0.2s ease;
&:hover {
background-color: var(--el-color-primary-light-9);
}
.rotation-transition {
font-size: 14px;
margin-right: 8px;
transition: transform 0.3s;
color: var(--el-color-primary);
}
.category-title {
@@ -358,7 +356,6 @@
&:hover {
transform: translateY(-2px);
box-shadow: var(--el-box-shadow-light);
}
.tool-content {
@@ -372,14 +369,11 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--el-color-primary-light-9);
border-radius: 12px;
margin-right: 20px;
box-shadow: var(--el-box-shadow-lighter);
i {
font-size: 28px;
color: var(--el-color-primary);
}
}
@@ -389,13 +383,11 @@
.tool-name {
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary);
margin-bottom: 4px;
}
.tool-description {
font-size: 14px;
color: var(--el-text-color-secondary);
opacity: 0.8;
}
}

23
src/views/Tools/components/GroupCalendarEventCard.vue
View File

@@ -24,7 +24,7 @@
@mouseleave="scheduleCloseEventPopover">
<div class="flex items-baseline justify-between gap-3 text-xs">
<div class="text-[13px] font-semibold">{{ event.title }}</div>
<div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
<div class="whitespace-nowrap">
{{ formatTimeRange(event.startsAt, event.endsAt) }}
</div>
</div>
@@ -42,19 +42,19 @@
</Button>
</div>
<div class="flex min-w-0 flex-col gap-1">
<div class="text-[var(--el-text-color-regular)]">
<div>
{{ t('dialog.group_calendar.event_card.category') }}
</div>
<div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
</div>
<div class="flex min-w-0 flex-col gap-1">
<div class="text-[var(--el-text-color-regular)]">
<div>
{{ t('dialog.group_calendar.event_card.interested_user') }}
</div>
<div class="font-medium">{{ event.interestedUserCount }}</div>
</div>
<div class="flex min-w-0 flex-col gap-1">
<div class="text-[var(--el-text-color-regular)]">
<div>
{{ t('dialog.group_calendar.event_card.close_time') }}
</div>
<div class="font-medium">
@@ -62,7 +62,7 @@
</div>
</div>
<div class="flex min-w-0 flex-col gap-1">
<div class="text-[var(--el-text-color-regular)]">
<div>
{{ t('dialog.group_calendar.event_card.created') }}
</div>
<div class="font-medium">
@@ -70,7 +70,7 @@
</div>
</div>
<div class="col-span-2 flex min-w-0 flex-col gap-1">
<div class="text-[var(--el-text-color-regular)]">
<div>
{{ t('dialog.group_calendar.event_card.description') }}
</div>
<div class="whitespace-pre-wrap break-words font-normal leading-snug">
@@ -263,7 +263,6 @@
.event-card:hover {
transform: translateY(-2px);
box-shadow: var(--el-box-shadow-light);
}
.event-card.grouped-card {
@@ -312,14 +311,10 @@
height: 24px;
gap: 4px;
border-radius: 50%;
background-color: var(--el-text-color-regular);
color: var(--el-bg-color);
box-shadow: var(--el-box-shadow-lighter);
cursor: pointer;
}
.event-card .badges .following-badge.is-following {
background-color: var(--group-calendar-badge-following, var(--el-color-success));
}
.event-card .badges .share-badge {
@@ -330,9 +325,6 @@
height: 24px;
gap: 4px;
border-radius: 50%;
background-color: var(--el-text-color-regular);
color: var(--el-bg-color);
box-shadow: var(--el-box-shadow-lighter);
cursor: pointer;
margin-right: 5px;
}
@@ -378,7 +370,6 @@
}
.event-card .event-title-content:hover {
color: var(--el-color-primary);
}
.event-card .event-info {
@@ -393,11 +384,9 @@
.grid-view .event-card .event-info {
font-size: 11px;
color: var(--el-text-color-regular);
}
.event-card .event-time {
font-weight: 500;
color: var(--el-color-primary);
}
</style>

6
src/views/Tools/components/GroupCalendarMonth.vue
View File

@@ -187,7 +187,6 @@
}
.calendar-date-content.has-events {
background-color: var(--group-calendar-event-bg, color-mix(in oklch, var(--el-color-primary) 10%, transparent));
}
.calendar-event-badge {
@@ -197,23 +196,19 @@
min-width: 14px;
height: 14px;
border-radius: 9px;
color: var(--el-color-white, #fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
box-shadow: var(--el-box-shadow-lighter);
z-index: 10;
padding: 0 5px;
line-height: 14px;
}
.calendar-event-badge.has-following {
background-color: var(--group-calendar-badge-following, var(--el-color-success));
}
.calendar-event-badge.no-following {
background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
}
.calendar-event-dot {
@@ -225,7 +220,6 @@
height: 6px;
border-radius: 9999px;
background-color: var(--group-calendar-event-dot, #ef4444);
box-shadow: var(--el-box-shadow-lighter);
z-index: 5;
pointer-events: none;
}

17
src/views/Tools/dialogs/GroupCalendarDialog.vue
View File

@@ -446,12 +446,6 @@
<style scoped>
.x-dialog {
:deep(.el-dialog) {
max-height: 750px;
.el-dialog__body {
height: 680px;
}
}
.top-content {
height: 640px;
position: relative;
@@ -478,7 +472,6 @@
.timeline-timestamp {
font-size: 13px;
font-weight: 600;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
}
@@ -487,7 +480,6 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--el-text-color-secondary);
}
.time-group-container {
display: flex;
@@ -516,7 +508,6 @@
&.has-events {
background-color: var(
--group-calendar-event-bg,
color-mix(in oklch, var(--el-color-primary) 10%, transparent)
);
}
.calendar-event-badge {
@@ -526,21 +517,17 @@
min-width: 16px;
height: 16px;
border-radius: 8px;
color: var(--el-color-white, #fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
box-shadow: var(--el-box-shadow-lighter);
z-index: 10;
padding: 0 4px;
line-height: 16px;
&.has-following {
background-color: var(--group-calendar-badge-following, var(--el-color-success));
}
&.no-following {
background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
}
}
}
@@ -603,7 +590,6 @@
flex-direction: column;
.search-container {
padding: 2px 20px 12px 20px;
border-bottom: 1px solid var(--el-border-color-lighter);
display: flex;
justify-content: flex-end;
.search-input {
@@ -623,7 +609,6 @@
.group-header {
font-size: 16px;
font-weight: bold;
color: var(--el-text-color-primary);
padding: 4px 12px 10px 12px;
cursor: pointer;
border-radius: 4px;
@@ -635,7 +620,6 @@
font-size: 14px;
margin-right: 8px;
transition: transform 0.3s;
color: var(--el-color-primary);
}
}
.events-row {
@@ -652,7 +636,6 @@
align-items: center;
height: 200px;
font-size: 16px;
color: var(--el-text-color-secondary);
}
}
}