diff --git a/css/artalk.css b/css/artalk.css index b395201..f45e150 100644 --- a/css/artalk.css +++ b/css/artalk.css @@ -44,28 +44,28 @@ /* Light theme styles */ .atk-main-editor { - background: rgba(255, 255, 255, 0.75) !important; - backdrop-filter: blur(28px) saturate(130%) !important; - -webkit-backdrop-filter: blur(28px) saturate(130%) !important; - border: 1px solid rgba(255, 255, 255, 0.9) !important; - box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important; + background: rgba(255, 255, 255, 0.85) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + border: 1px solid rgba(108, 92, 231, 0.2) !important; + box-shadow: 0 12px 40px rgba(108, 92, 231, 0.15) !important; border-radius: 24px !important; transition: all 0.3s ease !important; } .atk-editor, .atk-editor textarea, .atk-editor input { - background: rgba(255, 255, 255, 0.75); + background: rgba(255, 255, 255, 0.9); color: #1f2937; } .atk-main-editor:focus-within { border-color: #6c5ce7 !important; - box-shadow: 0 12px 36px rgba(108, 92, 231, 0.25) !important; + box-shadow: 0 12px 40px rgba(108, 92, 231, 0.3) !important; } .atk-header { padding: 20px !important; - border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; + border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important; } .atk-header-item { @@ -83,16 +83,18 @@ } .atk-editor-textarea { - background: transparent !important; + background: rgba(245, 245, 250, 0.7) !important; color: #1f2937 !important; - border: none !important; + border: 1px solid rgba(108, 92, 231, 0.1) !important; border-radius: 12px !important; padding: 15px !important; min-height: 120px !important; + transition: border-color 0.3s ease; } .atk-editor-textarea:focus { - box-shadow: none !important; + border-color: #6c5ce7 !important; + box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1) !important; } .atk-editor-bottom { @@ -104,29 +106,19 @@ } .atk-send-btn { - background: #6c5ce7 !important; + background: linear-gradient(135deg, #6c5ce7, #5d4de0) !important; border: none !important; border-radius: 20px !important; padding: 8px 20px !important; font-weight: 500 !important; transition: all 0.3s ease !important; - box-shadow: 0 4px 10px rgba(108, 92, 231, 0.25); + box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); } .atk-send-btn:hover { - background: #5d4de0 !important; + background: linear-gradient(135deg, #5d4de0, #4b3bc4) !important; transform: translateY(-2px) !important; - box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important; -} - -.atk-send-btn:active { - transform: translateY(0) !important; -} - -.atk-send-btn:hover { - background: #5d4de0 !important; - transform: translateY(-2px) !important; - box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important; + box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4) !important; } .atk-send-btn:active { @@ -135,7 +127,7 @@ .atk-list-header { padding: 20px !important; - border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; + border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important; } .atk-list-header .atk-comment-count { @@ -144,27 +136,40 @@ } .atk-sort-select { - background: rgba(128, 128, 128, 0.05) !important; - border: 1px solid rgba(128, 128, 128, 0.1) !important; + background: rgba(128, 128, 128, 0.08) !important; + border: 1px solid rgba(108, 92, 231, 0.15) !important; border-radius: 20px !important; padding: 6px 12px !important; color: #4b5563 !important; + transition: all 0.3s ease; +} + +.atk-sort-select:hover { + background: rgba(108, 92, 231, 0.1) !important; + border-color: rgba(108, 92, 231, 0.25) !important; } .atk-comment-wrap { padding: 20px !important; - border-bottom: 1px solid rgba(128, 128, 128, 0.05) !important; + border-bottom: 1px solid rgba(128, 128, 128, 0.08) !important; + background: rgba(255, 255, 255, 0.5) !important; + border-radius: 12px !important; + margin: 0 5px 10px !important; + transition: all 0.3s ease; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); } .atk-comment-wrap:hover { - background: rgba(128, 128, 128, 0.03) !important; - border-radius: 12px !important; - margin: 0 10px !important; + background: rgba(255, 255, 255, 0.8) !important; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + border-bottom: 1px solid rgba(108, 92, 231, 0.2) !important; } .atk-avatar { border-radius: 50% !important; border: 2px solid #6c5ce7 !important; + box-shadow: 0 0 10px rgba(108, 92, 231, 0.2) !important; + transition: all 0.3s ease; } .atk-comment .atk-header { @@ -211,27 +216,27 @@ /* Night theme styles */ [data-theme="night"] .atk-main-editor { - background: rgba(30, 30, 35, 0.55) !important; - backdrop-filter: blur(28px) saturate(130%) !important; - -webkit-backdrop-filter: blur(28px) saturate(130%) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; - box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65) !important; + background: rgba(30, 30, 35, 0.75) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8) !important; } [data-theme="night"] .atk-send-btn { - background: #00cec9 !important; + background: linear-gradient(135deg, #00cec9, #00b3ae) !important; border: none !important; border-radius: 20px !important; padding: 8px 20px !important; font-weight: 500 !important; transition: all 0.3s ease !important; - box-shadow: 0 4px 10px rgba(0, 206, 201, 0.25); + box-shadow: 0 4px 15px rgba(0, 206, 201, 0.4); } [data-theme="night"] .atk-send-btn:hover { - background: #00b3ae !important; + background: linear-gradient(135deg, #00b3ae, #009690) !important; transform: translateY(-2px) !important; - box-shadow: 0 4px 12px rgba(0, 206, 201, 0.3) !important; + box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important; } [data-theme="night"] .atk-send-btn:active { @@ -241,22 +246,29 @@ [data-theme="night"] .atk-editor, [data-theme="night"] .atk-editor textarea, [data-theme="night"] .atk-editor input { - background: rgba(30, 30, 35, 0.55); + background: rgba(30, 30, 35, 0.75); color: #dfe6e9; } [data-theme="night"] .atk-comment-wrap { - background: rgba(30, 30, 35, 0.3); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); + background: rgba(30, 30, 35, 0.5); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + transition: all 0.3s ease; +} + +[data-theme="night"] .atk-comment-wrap:hover { + background: rgba(35, 35, 40, 0.7); + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); } [data-theme="night"] .atk-dialog, [data-theme="night"] .atk-layer .atk-dialog { - background: rgba(30, 30, 35, 0.55); + background: rgba(30, 30, 35, 0.85); color: #dfe6e9; - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8); } [data-theme="night"] .atk-header-item { @@ -265,6 +277,8 @@ [data-theme="night"] .atk-editor-textarea { color: #dfe6e9 !important; + background: rgba(40, 40, 45, 0.5) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; } [data-theme="night"] .atk-editor-bottom .atk-item { @@ -276,34 +290,33 @@ } [data-theme="night"] .atk-sort-select { - background: rgba(255, 255, 255, 0.05) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + background: rgba(255, 255, 255, 0.08) !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #b2bec3 !important; } -[data-theme="night"] .atk-comment-wrap:hover { - background: rgba(255, 255, 255, 0.03) !important; -} - [data-theme="night"] .atk-comment .atk-nick { - color: #dfe6e9 !important; + color: #ffffff !important; + font-weight: 600 !important; } [data-theme="night"] .atk-comment .atk-date { - color: #636e72 !important; + color: #a0aec0 !important; } [data-theme="night"] .atk-comment .atk-content { - color: #dfe6e9 !important; + color: #e2e8f0 !important; } [data-theme="night"] .atk-comment .atk-content a { color: #00cec9 !important; + text-decoration: underline !important; } [data-theme="night"] .atk-comment .atk-content pre { - background: rgba(255, 255, 255, 0.05) !important; + background: rgba(20, 20, 25, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; + color: #e2e8f0 !important; } [data-theme="night"] .atk-actions .atk-action { @@ -314,6 +327,11 @@ color: #00cec9 !important; } +[data-theme="night"] .atk-avatar { + border: 2px solid #00cec9 !important; + box-shadow: 0 0 10px rgba(0, 206, 201, 0.3) !important; +} + /* Mobile specific styles */ .atk-mobile .atk-main-editor { border-radius: 16px !important; @@ -408,42 +426,53 @@ margin: 0 5px !important; padding: 8px 15px !important; border-radius: 20px !important; - background: rgba(128, 128, 128, 0.05) !important; + background: rgba(128, 128, 128, 0.08) !important; color: #4b5563 !important; transition: all 0.3s ease !important; - border: var(--glass-border) !important; - box-shadow: var(--glass-shadow) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important; + border: 1px solid rgba(108, 92, 231, 0.15) !important; + box-shadow: 0 4px 12px rgba(108, 92, 231, 0.1) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + -webkit-backdrop-filter: blur(20px) saturate(180%) !important; } .atk-pagination .atk-page-item:hover { - background: #6c5ce7 !important; + background: linear-gradient(135deg, #6c5ce7, #5d4de0) !important; color: white !important; + border: 1px solid rgba(108, 92, 231, 0.3) !important; + box-shadow: 0 6px 15px rgba(108, 92, 231, 0.2) !important; + transform: translateY(-2px); } .atk-pagination .atk-page-item.atk-active { - background: #6c5ce7 !important; + background: linear-gradient(135deg, #6c5ce7, #5d4de0) !important; color: white !important; + border: 1px solid rgba(108, 92, 231, 0.3) !important; + box-shadow: 0 6px 15px rgba(108, 92, 231, 0.25) !important; } [data-theme="night"] .atk-pagination .atk-page-item { - background: rgba(255, 255, 255, 0.05) !important; + background: rgba(255, 255, 255, 0.08) !important; color: #b2bec3 !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; - box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65) !important; - backdrop-filter: blur(28px) saturate(130%) !important; - -webkit-backdrop-filter: blur(28px) saturate(130%) !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + transition: all 0.3s ease; } [data-theme="night"] .atk-pagination .atk-page-item:hover { - background: #00cec9 !important; + background: linear-gradient(135deg, #00cec9, #00b3ae) !important; color: white !important; + border: 1px solid rgba(0, 206, 201, 0.3) !important; + box-shadow: 0 8px 25px rgba(0, 206, 201, 0.3) !important; + transform: translateY(-2px); } [data-theme="night"] .atk-pagination .atk-page-item.atk-active { - background: #00cec9 !important; + background: linear-gradient(135deg, #00cec9, #00b3ae) !important; color: white !important; + border: 1px solid rgba(0, 206, 201, 0.4) !important; + box-shadow: 0 8px 25px rgba(0, 206, 201, 0.4) !important; } /* Loading spinner */