visually enhancing the comment container

This commit is contained in:
x
2026-01-25 16:03:09 +01:00
parent 61614c7d2f
commit 311d5efdb0
2 changed files with 7 additions and 10 deletions

View File

@@ -909,7 +909,7 @@ html[theme="f0ck95"] #next {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid var(--nav-border-color); border-bottom: 1px solid var(--nav-border-color);
padding-bottom: 10px; padding-bottom: 10px;
} }
@@ -931,10 +931,10 @@ html[theme="f0ck95"] #next {
} }
.comment-input { .comment-input {
margin-bottom: 20px; margin-bottom: 5px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
/* Light seethrough */ /* Light seethrough */
padding: 10px; padding: 5px;
border: 1px solid var(--nav-border-color); border: 1px solid var(--nav-border-color);
border-radius: 0; border-radius: 0;
/* No rounded corners */ /* No rounded corners */
@@ -983,7 +983,7 @@ html[theme="f0ck95"] #next {
.comments-list { .comments-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 5px;
} }
.comment { .comment {
@@ -3850,9 +3850,8 @@ input#s_avatar {
/* Comments System */ /* Comments System */
#comments-container { #comments-container {
padding: 15px; padding: 0px 5px 5px 5px;
background: var(--metadata-bg); background: var(--metadata-bg);
border-radius: 5px;
color: var(--white); color: var(--white);
font-family: var(--font); font-family: var(--font);
} }
@@ -3861,9 +3860,8 @@ input#s_avatar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid var(--gray); border-bottom: 1px solid var(--gray);
padding-bottom: 10px; padding-bottom: 5px;
} }
.comments-controls button, .comments-controls button,
@@ -3877,7 +3875,6 @@ input#s_avatar {
} }
.comment { .comment {
margin-bottom: 15px;
padding: 10px; padding: 10px;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;

View File

@@ -237,7 +237,7 @@ class CommentSystem {
let html = ` let html = `
<div class="comments-header"> <div class="comments-header">
<h3>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</h3> <span>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</span>
<div class="comments-controls"> <div class="comments-controls">
<select id="comment-sort"> <select id="comment-sort">
<option value="old" ${this.sort === 'old' ? 'selected' : ''}>Oldest</option> <option value="old" ${this.sort === 'old' ? 'selected' : ''}>Oldest</option>