jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: centralize frontend Vuetify styling
All checks were successful
deploy-socialize / image (push) Successful in 50s
Details
deploy-socialize / deploy (push) Successful in 19s
Details

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-08 13:45:42 -04:00
parent e81c9f42c9
commit 1ca6ab7117
54 changed files with 1461 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/features/content/components/ContentCommentFeed.vue
View File

@@ -85,28 +85,28 @@
</div>
<div class="comment-actions">
<button
<v-btn variant="text" :ripple="false"
class="comment-action-button"
type="button"
title="Add reaction"
>
<v-icon :icon="mdiEmoticonPlusOutline" />
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="comment-action-button"
type="button"
title="Resolve"
>
<v-icon :icon="mdiCheckCircleOutline" />
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="comment-action-button"
type="button"
title="Reply"
@click="activeReplyCommentId = thread.comment.id"
>
<v-icon :icon="mdiReplyOutline" />
</button>
</v-btn>
<details class="comment-more-menu">
<summary
class="comment-action-button"
@@ -115,20 +115,20 @@
<v-icon :icon="mdiDotsVertical" />
</summary>
<div class="comment-action-menu">
<button
<v-btn variant="text" :ripple="false"
class="comment-menu-item"
type="button"
>
<v-icon :icon="mdiPencilOutline" />
Edit
</button>
<button
</v-btn>
<v-btn variant="text" :ripple="false"
class="comment-menu-item danger"
type="button"
>
<v-icon :icon="mdiDeleteOutline" />
Delete
</button>
</v-btn>
</div>
</details>
</div>
@@ -219,22 +219,22 @@
.empty-note {
@apply text-sm leading-6;
color: #526178;
color: var(--app-text-muted);
}
.comment-row {
@apply relative flex flex-col gap-3 rounded-[1rem] border p-4 transition;
background: #f8fafc;
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
outline: none;
}
.comment-row:hover,
.comment-row:focus-within,
.comment-row:focus {
background: #fffdf8;
background: var(--app-color-surface);
border-color: rgba(15, 118, 110, 0.24);
box-shadow: 0 16px 34px rgba(23, 32, 51, 0.08);
box-shadow: 0 16px 34px var(--app-border-subtle);
}
.comment-row-header {
@@ -251,7 +251,7 @@
.comment-author strong {
@apply truncate text-sm;
color: #172033;
color: var(--app-color-on-surface);
}
.comment-author small {
@@ -262,7 +262,7 @@
.comment-actions {
@apply absolute right-3 top-3 z-20 flex items-center gap-1 rounded-full border px-1 py-1 opacity-0 shadow-lg transition;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(23, 32, 51, 0.08);
border-color: var(--app-border-subtle);
pointer-events: none;
backdrop-filter: blur(10px);
}
@@ -276,13 +276,13 @@
.comment-action-button {
@apply inline-flex h-8 w-8 items-center justify-center rounded-full transition;
color: #526178;
color: var(--app-text-muted);
}
.comment-action-button:hover,
.comment-action-button:focus-visible {
background: rgba(15, 118, 110, 0.12);
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.comment-more-menu {
@@ -299,7 +299,7 @@
.comment-more-menu[open] .comment-action-button {
background: rgba(15, 118, 110, 0.12);
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.comment-more-menu[open] .comment-action-menu,
@@ -311,38 +311,38 @@
.comment-action-menu {
@apply absolute right-0 top-[calc(100%+0.375rem)] z-20 hidden min-w-36 flex-col gap-1 rounded-[0.875rem] border p-1 shadow-xl;
background: #ffffff;
border-color: rgba(23, 32, 51, 0.1);
border-color: var(--app-control-active);
}
.comment-menu-item {
@apply flex items-center gap-2 rounded-[0.625rem] px-3 py-2 text-sm font-semibold transition;
color: #172033;
color: var(--app-color-on-surface);
}
.comment-menu-item:hover,
.comment-menu-item:focus-visible {
background: rgba(15, 118, 110, 0.1);
color: #0f766e;
color: var(--app-color-on-tertiary);
}
.comment-menu-item.danger {
color: #b91c1c;
color: var(--app-danger-muted);
}
.comment-menu-item.danger:hover,
.comment-menu-item.danger:focus-visible {
background: rgba(185, 28, 28, 0.1);
color: #b91c1c;
color: var(--app-danger-muted);
}
.comment-body {
@apply whitespace-pre-line text-sm leading-6;
color: #172033;
color: var(--app-color-on-surface);
}
.comment-attachment {
@apply block w-fit max-w-full overflow-hidden rounded-[0.875rem] border;
border-color: rgba(23, 32, 51, 0.1);
border-color: var(--app-control-active);
background: #ffffff;
}
@@ -372,7 +372,7 @@
.reply-meta strong {
@apply truncate text-sm;
color: #172033;
color: var(--app-color-on-surface);
}
.reply-meta small {
@@ -382,6 +382,6 @@
.reply-row p {
@apply whitespace-pre-line text-sm leading-6;
color: #172033;
color: var(--app-color-on-surface);
}
</style>