fix uneven buttons
This commit is contained in:
+187
-81
@@ -3386,28 +3386,27 @@ body.layout-legacy .comment-input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-actions {
|
.input-actions {
|
||||||
margin-top: 10px;
|
margin-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 6px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit-comment {
|
.submit-comment {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
border: none;
|
border: 1px solid var(--accent);
|
||||||
padding: 5px 15px;
|
padding: 0 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0;
|
border-radius: 3px;
|
||||||
/* No rounded corners */
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 28px;
|
height: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3443,18 +3442,17 @@ body.layout-legacy .comment-input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cancel-reply {
|
.cancel-reply {
|
||||||
background: transparent;
|
background: #555;
|
||||||
color: var(--white);
|
color: #fff;
|
||||||
border: 1px solid var(--nav-border-color);
|
border: 1px solid #555;
|
||||||
margin-left: 10px;
|
padding: 0 10px;
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0;
|
border-radius: 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 28px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.char-counter {
|
.char-counter {
|
||||||
@@ -3481,16 +3479,8 @@ body.layout-legacy .comment-input {
|
|||||||
/* ─── Comment File Upload ─────────────────────────────────────────────────── */
|
/* ─── Comment File Upload ─────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.comment-attach-btn {
|
.comment-attach-btn {
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--white);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px 8px;
|
font-size: 13px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: color 0.15s, border-color 0.15s;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cf-spoiler-btn {
|
.cf-spoiler-btn {
|
||||||
@@ -3637,23 +3627,8 @@ body.layout-legacy .comment-input {
|
|||||||
/* ─── Poll Button ─────────────────────────────────────────────────────────── */
|
/* ─── Poll Button ─────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.comment-poll-btn {
|
.comment-poll-btn {
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--white);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px 8px;
|
font-size: 13px;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Poll Builder ────────────────────────────────────────────────────────── */
|
/* ─── Poll Builder ────────────────────────────────────────────────────────── */
|
||||||
@@ -7397,36 +7372,15 @@ video.emoji {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.emoji-trigger {
|
.emoji-trigger {
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--white);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 5px;
|
|
||||||
padding: 0 5px;
|
|
||||||
vertical-align: middle;
|
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 {
|
.spoiler-trigger {
|
||||||
background: black;
|
|
||||||
border: none;
|
|
||||||
color: var(--white);
|
|
||||||
font-size: 0.85em;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spoiler-trigger:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* visualizer */
|
/* visualizer */
|
||||||
canvas {
|
canvas {
|
||||||
@@ -9812,36 +9766,189 @@ video.autoplay-gif {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-actions {
|
.input-actions {
|
||||||
margin-top: 5px;
|
margin-top: 8px;
|
||||||
text-align: right;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit-comment,
|
.input-actions button {
|
||||||
.cancel-reply {
|
height: 30px;
|
||||||
background: var(--accent);
|
min-width: 30px;
|
||||||
color: var(--black);
|
padding: 0 10px;
|
||||||
border: none;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
opacity: 0.8;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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,
|
.input-actions button i {
|
||||||
.cancel-reply:hover {
|
font-size: 13px;
|
||||||
opacity: 1;
|
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;
|
background: #666;
|
||||||
color: white;
|
border-color: #666;
|
||||||
margin-left: 5px;
|
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 {
|
.comment-input.reply-input {
|
||||||
@@ -10037,8 +10144,7 @@ video.autoplay-gif {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#comment-sor,
|
#comment-sor {
|
||||||
#lock-thread-btn {
|
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user