fix uneven buttons
This commit is contained in:
+187
-81
@@ -3386,28 +3386,27 @@ body.layout-legacy .comment-input {
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.submit-comment {
|
||||
background: var(--accent);
|
||||
color: var(--black);
|
||||
border: none;
|
||||
padding: 5px 15px;
|
||||
border: 1px solid var(--accent);
|
||||
padding: 0 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
/* No rounded corners */
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -3443,18 +3442,17 @@ body.layout-legacy .comment-input {
|
||||
}
|
||||
|
||||
.cancel-reply {
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
margin-left: 10px;
|
||||
padding: 5px 10px;
|
||||
background: #555;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
@@ -3481,16 +3479,8 @@ body.layout-legacy .comment-input {
|
||||
/* ─── Comment File Upload ─────────────────────────────────────────────────── */
|
||||
|
||||
.comment-attach-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cf-spoiler-btn {
|
||||
@@ -3637,23 +3627,8 @@ body.layout-legacy .comment-input {
|
||||
/* ─── Poll Button ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.comment-poll-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.comment-poll-btn:hover,
|
||||
.comment-poll-btn.active {
|
||||
opacity: 1;
|
||||
color: var(--accent);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ─── Poll Builder ────────────────────────────────────────────────────────── */
|
||||
@@ -7397,36 +7372,15 @@ video.emoji {
|
||||
}
|
||||
|
||||
.emoji-trigger {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
padding: 0 5px;
|
||||
vertical-align: middle;
|
||||
transition: text-shadow 0.2s;
|
||||
}
|
||||
|
||||
button.emoji-trigger:hover i,
|
||||
button.emoji-trigger.is-active i {
|
||||
color: var(--accent);
|
||||
transition: color .2s ease;
|
||||
}
|
||||
|
||||
.spoiler-trigger {
|
||||
background: black;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spoiler-trigger:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* visualizer */
|
||||
canvas {
|
||||
@@ -9812,36 +9766,189 @@ video.autoplay-gif {
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submit-comment,
|
||||
.cancel-reply {
|
||||
background: var(--accent);
|
||||
color: var(--black);
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
opacity: 0.8;
|
||||
.input-actions button {
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 30px;
|
||||
gap: 5px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
|
||||
color: var(--white, #fff);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.submit-comment:hover,
|
||||
.cancel-reply:hover {
|
||||
opacity: 1;
|
||||
.input-actions button i {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cancel-reply {
|
||||
.input-actions button:hover,
|
||||
.input-actions button.active,
|
||||
.input-actions button.is-active {
|
||||
background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.15));
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.input-actions button:hover i,
|
||||
.input-actions button.active i,
|
||||
.input-actions button.is-active i {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.input-actions button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Primary actions: Submit, Save, DM send */
|
||||
.input-actions .submit-comment,
|
||||
.input-actions .save-edit-btn,
|
||||
.input-actions .dm-send-btn {
|
||||
background: var(--accent);
|
||||
color: var(--black);
|
||||
border: 1px solid var(--accent);
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.input-actions .submit-comment:hover,
|
||||
.input-actions .save-edit-btn:hover,
|
||||
.input-actions .dm-send-btn:hover {
|
||||
background: var(--accent);
|
||||
color: var(--black);
|
||||
border-color: var(--accent);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Cancel buttons */
|
||||
.input-actions .cancel-reply,
|
||||
.input-actions .cancel-edit-btn {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.input-actions .cancel-reply:hover,
|
||||
.input-actions .cancel-edit-btn:hover {
|
||||
background: #666;
|
||||
color: white;
|
||||
margin-left: 5px;
|
||||
border-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Light / Paper Theme */
|
||||
html[theme='light'] .input-actions button,
|
||||
html[theme='paper'] .input-actions button,
|
||||
[theme='light'] .input-actions button,
|
||||
[theme='paper'] .input-actions button {
|
||||
background: #ffffff;
|
||||
border: 1px solid #cbd5e1;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
html[theme='light'] .input-actions button:hover,
|
||||
html[theme='paper'] .input-actions button:hover,
|
||||
[theme='light'] .input-actions button:hover,
|
||||
[theme='paper'] .input-actions button:hover,
|
||||
html[theme='light'] .input-actions button.active,
|
||||
html[theme='paper'] .input-actions button.active,
|
||||
[theme='light'] .input-actions button.active,
|
||||
[theme='paper'] .input-actions button.active,
|
||||
html[theme='light'] .input-actions button.is-active,
|
||||
html[theme='paper'] .input-actions button.is-active,
|
||||
[theme='light'] .input-actions button.is-active,
|
||||
[theme='paper'] .input-actions button.is-active {
|
||||
background: #f1f5f9;
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[theme='light'] .input-actions button:hover i,
|
||||
html[theme='paper'] .input-actions button:hover i,
|
||||
[theme='light'] .input-actions button:hover i,
|
||||
[theme='paper'] .input-actions button:hover i,
|
||||
html[theme='light'] .input-actions button.active i,
|
||||
html[theme='paper'] .input-actions button.active i,
|
||||
[theme='light'] .input-actions button.active i,
|
||||
[theme='paper'] .input-actions button.active i,
|
||||
html[theme='light'] .input-actions button.is-active i,
|
||||
html[theme='paper'] .input-actions button.is-active i,
|
||||
[theme='light'] .input-actions button.is-active i,
|
||||
[theme='paper'] .input-actions button.is-active i {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[theme='light'] .input-actions .submit-comment,
|
||||
html[theme='light'] .input-actions .save-edit-btn,
|
||||
html[theme='light'] .input-actions .dm-send-btn,
|
||||
html[theme='paper'] .input-actions .submit-comment,
|
||||
html[theme='paper'] .input-actions .save-edit-btn,
|
||||
html[theme='paper'] .input-actions .dm-send-btn,
|
||||
[theme='light'] .input-actions .submit-comment,
|
||||
[theme='light'] .input-actions .save-edit-btn,
|
||||
[theme='light'] .input-actions .dm-send-btn,
|
||||
[theme='paper'] .input-actions .submit-comment,
|
||||
[theme='paper'] .input-actions .save-edit-btn,
|
||||
[theme='paper'] .input-actions .dm-send-btn {
|
||||
background: var(--accent);
|
||||
color: var(--black);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
html[theme='light'] .input-actions .cancel-reply,
|
||||
html[theme='light'] .input-actions .cancel-edit-btn,
|
||||
html[theme='paper'] .input-actions .cancel-reply,
|
||||
html[theme='paper'] .input-actions .cancel-edit-btn,
|
||||
[theme='light'] .input-actions .cancel-reply,
|
||||
[theme='light'] .input-actions .cancel-edit-btn,
|
||||
[theme='paper'] .input-actions .cancel-reply,
|
||||
[theme='paper'] .input-actions .cancel-edit-btn {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
html[theme='light'] .input-actions .cancel-reply:hover,
|
||||
html[theme='light'] .input-actions .cancel-edit-btn:hover,
|
||||
html[theme='paper'] .input-actions .cancel-reply:hover,
|
||||
html[theme='paper'] .input-actions .cancel-edit-btn:hover,
|
||||
[theme='light'] .input-actions .cancel-reply:hover,
|
||||
[theme='light'] .input-actions .cancel-edit-btn:hover,
|
||||
[theme='paper'] .input-actions .cancel-reply:hover,
|
||||
[theme='paper'] .input-actions .cancel-edit-btn:hover {
|
||||
background: #cbd5e1;
|
||||
border-color: #94a3b8;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
html[theme='light'] .char-counter,
|
||||
html[theme='paper'] .char-counter,
|
||||
[theme='light'] .char-counter,
|
||||
[theme='paper'] .char-counter {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.comment-input.reply-input {
|
||||
@@ -10037,8 +10144,7 @@ video.autoplay-gif {
|
||||
}
|
||||
}
|
||||
|
||||
#comment-sor,
|
||||
#lock-thread-btn {
|
||||
#comment-sor {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user