diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index b4ff5a9..301bada 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -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; }