rating and comment system complete

This commit is contained in:
2026-08-05 12:25:59 -05:00
parent 26e9179be4
commit aed6a7c24d
9 changed files with 407 additions and 1 deletions
+46 -1
View File
@@ -692,7 +692,7 @@ cursor: default;
/* ========== Forms & Buttons ========== */
button,
.btn {
.btn {
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
border: none;
@@ -701,6 +701,7 @@ button,
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none;
}
button:hover,
.btn:hover {
@@ -3639,3 +3640,47 @@ a.deletelink {
cursor: pointer;
}
.gate-error { color: #f38ba8 !important; font-weight: 600; margin-top: 0.5rem; }
/* Rating tab */
.rating-summary { margin-bottom: 1rem; }
.rating-percent { font-size: 1.6rem; font-weight: 700; color: var(--md-sys-color-on-surface, #cdd6f4); }
.rating-count { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.8rem; margin-left: 0.5rem; }
.rating-bar {
display: flex; height: 10px; border-radius: 999px; overflow: hidden;
background: var(--md-sys-color-surface, #1e1e2e); margin-top: 0.5rem; max-width: 420px;
}
.rating-bar-up { background: #40a02b; }
.rating-bar-down { background: #d20f39; }
.rating-vote { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.rating-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.45rem 0.9rem; border-radius: 8px;
border: 1px solid var(--md-sys-color-outline-variant, #45475a);
background: var(--md-sys-color-surface, #1e1e2e);
color: var(--md-sys-color-on-surface-variant, #a6adc8);
cursor: pointer; font-size: 0.85rem;
}
.rating-btn.active { background: var(--md-sys-color-primary, #89b4fa); color: #111; border-color: var(--md-sys-color-primary, #89b4fa); }
/* Forum tab */
.comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.comment-form textarea, .comment-edit-form textarea {
width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px;
border: 1px solid var(--md-sys-color-outline-variant, #45475a);
background: var(--md-sys-color-surface, #1e1e2e);
color: var(--md-sys-color-on-surface, #cdd6f4);
font-family: inherit;
}
.comment-form button { align-self: flex-start; }
.comment-list { display: flex; flex-direction: column; gap: 0.9rem; }
.comment { padding: 0.8rem; border-radius: 10px; background: var(--md-sys-color-surface-variant, #45475a); }
.comment-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.comment-time, .comment-edited { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.75rem; }
.comment-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.comment-body { margin-top: 0.4rem; }
.comment-edit-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.comment-edit-form[hidden] { display: none; }
.comment-edit-actions { display: flex; gap: 0.4rem; }
.link-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
.inline { display: inline; }
.pack-card-rating { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.75rem; }