feat(api): implement rate limiting and SSRF protection across endpoints
- Added rate limiting to `reaction-users`, `search`, and `image-proxy` APIs to prevent abuse. - Introduced SSRF protection in `image-proxy` to block requests to private IP ranges. - Enhanced `link-preview` to use `linkedom` for HTML parsing and improved meta tag extraction. - Refactored authentication checks in various pages to utilize middleware for cleaner code. - Improved JWT key loading with error handling and security warnings for production. - Updated `authFetch` utility to handle token refresh more efficiently with deduplication. - Enhanced rate limiting utility to trust proxy headers from known sources. - Numerous layout / design changes
This commit is contained in:
@@ -1,3 +1,199 @@
|
||||
/* Constrained poll result container */
|
||||
.discord-poll-result-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
background: #f6f6fa;
|
||||
border: 1px solid #e3e5e8;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
box-shadow: 0 1px 4px rgba(88,101,242,0.04);
|
||||
max-width: 520px; /* wider container so bar and meta fit comfortably */
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative; /* for timestamp */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-result-message {
|
||||
background: #232428;
|
||||
border-color: #36393f;
|
||||
}
|
||||
|
||||
|
||||
[data-theme="dark"] .discord-poll-result-message {
|
||||
background: #232428;
|
||||
border-color: #36393f;
|
||||
}
|
||||
|
||||
.discord-poll-result-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.discord-poll-result-header {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #5865f2;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
[data-theme="dark"] .discord-poll-result-header {
|
||||
color: #8ea1e1;
|
||||
}
|
||||
|
||||
/* Winner Row */
|
||||
.discord-poll-result-winner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-start;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #23272a;
|
||||
/* allow the bar/meta to wrap when space is tight */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-result-winner {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.discord-poll-result-emoji {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.discord-poll-result-check {
|
||||
color: #43b581;
|
||||
}
|
||||
|
||||
/* Poll Bar */
|
||||
.discord-poll-result-bar {
|
||||
/* make the bar flexible so it can shrink/grow depending on container */
|
||||
flex: 1 1 260px; /* preferred 260px but allow shrinking */
|
||||
min-width: 0; /* allow shrink on very small screens */
|
||||
height: 34px; /* slightly taller to match Discord feel */
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-result-bar {
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.discord-poll-result-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(88,101,242,1) 0%, rgba(99,114,255,1) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.85rem;
|
||||
font-size: 0.95rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
|
||||
.discord-poll-result-fill-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
/* allow answer text to ellipsize when space is limited */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.discord-poll-result-answer {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Votes */
|
||||
.discord-poll-result-meta {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
font-size: 0.88rem;
|
||||
color: #8b8f99;
|
||||
margin-left: 0.5rem;
|
||||
/* allow meta to shrink so it doesn't force the bar to overflow */
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* On narrow containers allow meta to sit below the bar to avoid overflow */
|
||||
@media (max-width: 440px) {
|
||||
.discord-poll-result-winner {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.discord-poll-result-bar {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.discord-poll-result-meta {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.discord-poll-result-percent {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] .discord-poll-result-meta {
|
||||
color: #b5bac1;
|
||||
}
|
||||
.discord-poll-result-votes {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.discord-poll-result-percent,
|
||||
.discord-poll-result-votes {
|
||||
white-space: nowrap; /* keep percent and votes compact */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* When the timestamp appears in the poll result, ensure it doesn't overlap the content */
|
||||
.discord-poll-result-message > .discord-timestamp {
|
||||
margin-left: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
/* Move timestamp to its own row on very small screens */
|
||||
.discord-poll-result-message > .discord-timestamp {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 0.25rem;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* View Poll Button */
|
||||
.discord-poll-result-view-btn {
|
||||
align-self: flex-start;
|
||||
margin: 0.25rem 0.5rem 0;
|
||||
background: #5865f2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.discord-poll-result-view-btn:hover {
|
||||
background: #4752c4;
|
||||
}
|
||||
|
||||
|
||||
/* Discord Logs Archive Styles */
|
||||
|
||||
.discord-logs-container {
|
||||
@@ -10,6 +206,7 @@
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
min-height: 500px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Content area (messages) */
|
||||
@@ -66,15 +263,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.9rem;
|
||||
color: #5c5f66;
|
||||
font-size: 1rem; /* slightly larger */
|
||||
color: var(--text-color, #2e3338);
|
||||
margin-top: 0.15rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-weight: 700; /* stronger, similar to Discord header */
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-channel-name {
|
||||
color: #b5bac1;
|
||||
color: #f2f3f5;
|
||||
}
|
||||
|
||||
.discord-channel-name svg {
|
||||
@@ -474,6 +673,43 @@
|
||||
color: #949ba4;
|
||||
}
|
||||
|
||||
/* Jump to message button (shown in search results) */
|
||||
.discord-jump-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: #5865f2;
|
||||
background: rgba(88, 101, 242, 0.1);
|
||||
border: 1px solid rgba(88, 101, 242, 0.3);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.discord-jump-btn:hover {
|
||||
background: rgba(88, 101, 242, 0.2);
|
||||
border-color: rgba(88, 101, 242, 0.5);
|
||||
}
|
||||
|
||||
.discord-jump-btn svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-jump-btn {
|
||||
background: rgba(88, 101, 242, 0.15);
|
||||
border-color: rgba(88, 101, 242, 0.4);
|
||||
color: #8b9dff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-jump-btn:hover {
|
||||
background: rgba(88, 101, 242, 0.25);
|
||||
border-color: rgba(88, 101, 242, 0.6);
|
||||
}
|
||||
|
||||
.discord-text {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.375;
|
||||
@@ -659,6 +895,208 @@
|
||||
color: #b9bbbe;
|
||||
}
|
||||
|
||||
/* Polls */
|
||||
.discord-poll {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.discord-poll.finalized {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.discord-poll-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.discord-poll-emoji {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.discord-poll-question {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-color, #2e3338);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-question {
|
||||
color: #f2f3f5;
|
||||
}
|
||||
|
||||
.discord-poll-multiselect {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted, #72767d);
|
||||
background: rgba(88, 101, 242, 0.1);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.discord-poll-answers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.discord-poll-answer {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-answer {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.discord-poll-answer-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: rgba(88, 101, 242, 0.25);
|
||||
border-radius: 6px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-answer-bar {
|
||||
background: rgba(88, 101, 242, 0.35);
|
||||
}
|
||||
|
||||
.discord-poll-answer-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.discord-poll-answer-emoji {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.discord-poll-answer-text {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-color, #2e3338);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-answer-text {
|
||||
color: #dcddde;
|
||||
}
|
||||
|
||||
.discord-poll-answer-votes {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #72767d);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.discord-poll-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #72767d);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-poll-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.discord-poll-status {
|
||||
color: #ed4245;
|
||||
}
|
||||
|
||||
.discord-poll-expiry {
|
||||
color: #5865f2;
|
||||
}
|
||||
|
||||
/* Poll voters */
|
||||
.discord-poll-voters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.discord-poll-voter {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: rgba(88, 101, 242, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6rem;
|
||||
color: #5865f2;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.discord-poll-voter img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Improved voter visuals */
|
||||
.discord-poll-voters { padding: 0.25rem 0.5rem 0.5rem 0.5rem; gap: 0.35rem }
|
||||
.discord-poll-voter { width: 26px; height: 26px; font-size:0.75rem; border-radius:50%; border:1px solid rgba(0,0,0,0.08); box-shadow:0 1px 0 rgba(255,255,255,0.03) inset; transition: transform 0.12s ease, box-shadow 0.12s ease; }
|
||||
.discord-poll-voter:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(3,8,23,0.2); z-index: 4 }
|
||||
.discord-poll-voter span { display:flex; align-items:center; justify-content:center }
|
||||
.discord-poll-voters-more { margin-left: 0.5rem; font-size:0.8rem }
|
||||
|
||||
/* Modal styling for voters */
|
||||
.discord-modal-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.55); display:flex; align-items:center; justify-content:center; z-index:1005; padding:1.25rem }
|
||||
.discord-modal { width: min(680px, 95%); background: var(--card-bg, #ffffff); border-radius: 12px; box-shadow: 0 20px 60px rgba(2,6,23,0.6); overflow: hidden; color: var(--text-color, #222); }
|
||||
.discord-modal-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.06) }
|
||||
.discord-modal-title { font-weight:600; font-size:1rem }
|
||||
.discord-modal-close { background:none; border: none; font-size:1.05rem; cursor:pointer; padding:0.35rem 0.5rem }
|
||||
.discord-modal-body { padding:0.5rem 0.75rem 1rem; max-height: 56vh; overflow:auto }
|
||||
.discord-modal-voters-list { display:flex; flex-direction:column; gap:0.5rem; padding:0.25rem }
|
||||
.discord-modal-voter { display:flex; gap:0.75rem; align-items:center; padding:0.5rem;border-radius:8px; transition: background 0.12s }
|
||||
.discord-modal-voter:hover { background: rgba(88,101,242,0.04) }
|
||||
.discord-modal-voter-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; display:flex;align-items:center;justify-content:center;background: rgba(88,101,242,0.08); color: #5865f2; border:1px solid rgba(0,0,0,0.06)}
|
||||
.discord-modal-voter-avatar img{width:100%;height:100%;object-fit:cover}
|
||||
.discord-modal-voter-info { display:flex; flex-direction:column }
|
||||
.discord-modal-voter-name { font-weight:600 }
|
||||
.discord-modal-voter-username { font-size:0.85rem;color:var(--text-muted,#777) }
|
||||
.discord-modal-empty { padding:1rem; color:var(--text-muted,#777); text-align:center }
|
||||
|
||||
[data-theme="dark"] .discord-modal { background: #17181a; color:#fff }
|
||||
[data-theme="dark"] .discord-modal-header { border-bottom-color: rgba(255,255,255,0.04) }
|
||||
[data-theme="dark"] .discord-modal-voter:hover { background: rgba(255,255,255,0.02) }
|
||||
[data-theme="dark"] .discord-modal-voter-username { color: #b5bac1 }
|
||||
|
||||
.discord-poll-voters-more {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted, #72767d);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* Attachments */
|
||||
.discord-attachments {
|
||||
display: flex;
|
||||
@@ -971,6 +1409,14 @@ a.discord-embed-title:hover {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.discord-embed-video-iframe {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
height: 225px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Reactions */
|
||||
.discord-reactions {
|
||||
display: flex;
|
||||
@@ -1271,16 +1717,29 @@ a.discord-embed-title:hover {
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
overscroll-behavior: contain;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
/* prefer modern developer-friendly monospace fonts, avoid ligatures for ASCII art */
|
||||
font-family: ui-monospace, "JetBrains Mono", "Fira Code", "Roboto Mono", "Consolas", "Monaco", "Courier New", monospace;
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings: "liga" 0, "calt" 0;
|
||||
font-size: 0.92rem; /* readable size for ASCII art */
|
||||
line-height: 1.04; /* tighter line height to preserve vertical alignment */
|
||||
white-space: pre;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.discord-code-block code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: #b5bac1;
|
||||
white-space: pre;
|
||||
white-space: pre; /* keep exact spacing */
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
tab-size: 4; /* consistent tab rendering */
|
||||
-moz-tab-size: 4;
|
||||
}
|
||||
|
||||
[data-theme="light"] .discord-code-block {
|
||||
@@ -1423,14 +1882,22 @@ a.discord-embed-title:hover {
|
||||
|
||||
.discord-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 220px;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
align-self: stretch;
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.discord-sidebar-channels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@@ -1439,45 +1906,48 @@ a.discord-embed-title:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
/* Guild List (server icons) */
|
||||
/* Guild List (server icons) - compact vertical strip */
|
||||
.discord-guild-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-guild-list {
|
||||
border-right-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.discord-guild-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-guild-btn {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.discord-guild-btn:hover {
|
||||
border-radius: 16px;
|
||||
background: rgba(88, 101, 242, 0.2);
|
||||
border-radius: 35%;
|
||||
background: rgba(88, 101, 242, 0.25);
|
||||
}
|
||||
|
||||
.discord-guild-btn.active {
|
||||
border-radius: 16px;
|
||||
border-radius: 35%;
|
||||
background: #5865f2;
|
||||
}
|
||||
|
||||
@@ -1488,7 +1958,7 @@ a.discord-embed-title:hover {
|
||||
}
|
||||
|
||||
.discord-guild-initial {
|
||||
font-size: 1.25rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #4f545c;
|
||||
}
|
||||
@@ -1534,11 +2004,14 @@ a.discord-embed-title:hover {
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 0.4rem 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
color: #6d6f78;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-category-header {
|
||||
@@ -1593,6 +2066,18 @@ a.discord-embed-title:hover {
|
||||
color: #8b9dff;
|
||||
}
|
||||
|
||||
/* Thread button styling - indented under parent channel */
|
||||
.discord-sidebar .discord-thread-btn {
|
||||
padding-left: 2rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.discord-sidebar .discord-thread-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Load More Button
|
||||
============================================================================ */
|
||||
@@ -1649,22 +2134,26 @@ a.discord-embed-title:hover {
|
||||
.discord-sidebar {
|
||||
width: 100%;
|
||||
max-height: 250px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.discord-guild-list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: none;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding-bottom: 0;
|
||||
padding-right: 0.75rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-right: none;
|
||||
padding: 0.35rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .discord-guild-list {
|
||||
border-right-color: rgba(255, 255, 255, 0.08);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.discord-sidebar-channels {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.discord-sidebar .discord-channel-list {
|
||||
|
||||
@@ -101,3 +101,51 @@
|
||||
.meme-dialog-nav-next {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Skeleton loader for images */
|
||||
.meme-skeleton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(128, 128, 128, 0.1) 0%,
|
||||
rgba(128, 128, 128, 0.2) 50%,
|
||||
rgba(128, 128, 128, 0.1) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.meme-img-loading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.meme-img {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Mobile swipe hint */
|
||||
@media (max-width: 768px) {
|
||||
.meme-dialog-nav {
|
||||
opacity: 0.5;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.meme-dialog-body {
|
||||
touch-action: pan-y pinch-zoom;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,22 +4,23 @@
|
||||
|
||||
@theme {
|
||||
/* Font families */
|
||||
--font-sans: "Geist Sans", system-ui, sans-serif;
|
||||
--font-sans: "IBM Plex Sans", "Geist Sans", system-ui, sans-serif;
|
||||
--font-mono: "Geist Mono", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #47a3f3;
|
||||
color: #fefefe;
|
||||
background-color: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dark theme colors */
|
||||
[data-theme="dark"] {
|
||||
background-color: #121212;
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
html {
|
||||
min-width: 360px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.prose {
|
||||
@@ -200,9 +201,24 @@ Custom
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
/* Page section - consistent spacing for all page content */
|
||||
.page-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
align-items: end;
|
||||
padding: 2.5rem 0 2rem 0;
|
||||
margin-top: auto;
|
||||
padding-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.header-text, .footer-text {
|
||||
@@ -235,8 +251,103 @@ Custom
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
#exclude-checkboxes {
|
||||
margin-left: 5.5%;
|
||||
/* Search button */
|
||||
.search-btn {
|
||||
padding: 0.625rem 1.5rem;
|
||||
background: linear-gradient(135deg, #171717 0%, #262626 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.search-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .search-btn {
|
||||
background: linear-gradient(135deg, #fafafa 0%, #e5e5e5 100%);
|
||||
color: #171717;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .search-btn:hover {
|
||||
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Exclude sources - toggle chips */
|
||||
.exclude-sources {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.exclude-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #737373;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .exclude-label {
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.exclude-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
color: #525252;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .exclude-chip {
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.exclude-chip:hover {
|
||||
border-color: rgba(239, 68, 68, 0.4);
|
||||
color: #dc2626;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .exclude-chip:hover {
|
||||
border-color: rgba(248, 113, 113, 0.4);
|
||||
color: #f87171;
|
||||
background: rgba(248, 113, 113, 0.08);
|
||||
}
|
||||
|
||||
/* Active/excluded state */
|
||||
.exclude-chip--active {
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #dc2626;
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: 1.5px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .exclude-chip--active {
|
||||
border-color: rgba(248, 113, 113, 0.5);
|
||||
background: rgba(248, 113, 113, 0.12);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
#lyric-search-input {
|
||||
@@ -247,7 +358,7 @@ Custom
|
||||
.lyric-search-input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.lyric-search-input-wrapper .p-autocomplete {
|
||||
@@ -255,19 +366,46 @@ Custom
|
||||
}
|
||||
|
||||
.lyric-search-input-wrapper .p-autocomplete-input {
|
||||
padding-right: 2.5rem;
|
||||
width: 100%;
|
||||
padding: 0.875rem 2.75rem 0.875rem 1.125rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.lyric-search-input-wrapper .p-autocomplete-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .lyric-search-input-wrapper .p-autocomplete-input {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .lyric-search-input-wrapper .p-autocomplete-input:focus {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .lyric-search-input-wrapper .p-autocomplete-input::placeholder {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.input-status-icon {
|
||||
position: absolute;
|
||||
right: 0.85rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: none;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
transition: opacity 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -282,10 +420,29 @@ Custom
|
||||
}
|
||||
|
||||
.lyrics-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
|
||||
padding: 1.5rem;
|
||||
transition: background 0.3s;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .lyrics-card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.lyrics-card-animate {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
|
||||
}
|
||||
|
||||
.lyrics-card-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.lyrics-toolbar {
|
||||
@@ -294,11 +451,18 @@ Custom
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .lyrics-toolbar {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.lyrics-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -306,22 +470,27 @@ Custom
|
||||
.lyrics-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.text-size-buttons {
|
||||
display: flex;
|
||||
border: 1px solid rgba(79, 70, 229, 0.25);
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(79, 70, 229, 0.06);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-size-buttons {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.text-size-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0.15rem 0.5rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
@@ -332,13 +501,17 @@ Custom
|
||||
}
|
||||
|
||||
.text-size-btn.active {
|
||||
background: rgba(79, 70, 229, 0.15);
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-size-btn.active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.lyrics-content {
|
||||
line-height: 2.0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: 'IBM Plex Sans', 'Inter', sans-serif;
|
||||
font-size: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -348,6 +521,32 @@ Custom
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.lyrics-verse {
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.25rem -0.75rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.lyrics-verse:hover {
|
||||
background-color: rgba(79, 70, 229, 0.06);
|
||||
}
|
||||
|
||||
.lyrics-verse-highlighted {
|
||||
background-color: rgba(79, 70, 229, 0.15);
|
||||
box-shadow: inset 3px 0 0 rgba(79, 70, 229, 0.6);
|
||||
}
|
||||
|
||||
.lyrics-card-dark .lyrics-verse:hover {
|
||||
background-color: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.lyrics-card-dark .lyrics-verse-highlighted {
|
||||
background-color: rgba(139, 92, 246, 0.2);
|
||||
box-shadow: inset 3px 0 0 rgba(139, 92, 246, 0.7);
|
||||
}
|
||||
|
||||
.lyrics-action-button {
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
@@ -384,10 +583,52 @@ Custom
|
||||
padding-bottom: 3%;
|
||||
}
|
||||
|
||||
/* PrimeReact AutoComplete Panel - Global Styling */
|
||||
.p-autocomplete-panel {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-autocomplete-panel {
|
||||
background: #1a1a1a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.p-autocomplete-items {
|
||||
max-height: 200px !important;
|
||||
overflow-y: auto !important;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-autocomplete-item {
|
||||
padding: 0.625rem 0.875rem;
|
||||
border-radius: 8px;
|
||||
margin: 0.125rem 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.p-autocomplete-item:hover,
|
||||
.p-autocomplete-item.p-highlight {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-autocomplete-item {
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-autocomplete-item:hover,
|
||||
[data-theme="dark"] .p-autocomplete-item.p-highlight {
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.p-autocomplete-input {
|
||||
@@ -396,6 +637,7 @@ Custom
|
||||
border: 1px solid #ccc;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.p-autocomplete-input:focus {
|
||||
border-color: #4f46e5;
|
||||
outline: none;
|
||||
@@ -510,18 +752,52 @@ Custom
|
||||
/*
|
||||
Toastify customizations
|
||||
*/
|
||||
.Toastify__toast--error {
|
||||
background-color: rgba(255, 0, 0, 0.5) !important;
|
||||
color: inherit !important;
|
||||
.Toastify__toast {
|
||||
border-radius: 12px !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
|
||||
font-family: 'IBM Plex Sans', sans-serif !important;
|
||||
font-size: 0.9rem !important;
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--error {
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-left: 4px solid #ef4444 !important;
|
||||
color: #fca5a5 !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--info {
|
||||
background-color: rgba(217, 242, 255, 0.8) !important;
|
||||
color: #000 !important;
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-left: 4px solid #3b82f6 !important;
|
||||
color: #93c5fd !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--success {
|
||||
background-color: rgba(46, 186, 106, 0.8) !important;
|
||||
color: inherit !important;
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-left: 4px solid #22c55e !important;
|
||||
color: #86efac !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--warning {
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-left: 4px solid #f59e0b !important;
|
||||
color: #fcd34d !important;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
color: #a3a3a3 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
.Toastify__close-button:hover {
|
||||
opacity: 1 !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--success > .Toastify__toast-icon svg {
|
||||
@@ -531,3 +807,8 @@ Toastify customizations
|
||||
.Toastify__toast--success > .Toastify__toast-icon::after {
|
||||
content: "🦄" !important;
|
||||
}
|
||||
|
||||
/* Light mode - keep dark toasts */
|
||||
[data-theme="light"] .Toastify__toast {
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
@@ -79,22 +79,34 @@ nav {
|
||||
.nav-user-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.85rem;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.4);
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.85));
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: #374151;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-user-inline:hover {
|
||||
border-color: rgba(148, 163, 184, 0.5);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-user-inline {
|
||||
color: #f1f5f9;
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
background: linear-gradient(120deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.7));
|
||||
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
|
||||
color: #e2e8f0;
|
||||
border-color: rgba(71, 85, 105, 0.4);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.85));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-user-inline:hover {
|
||||
border-color: rgba(100, 116, 139, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-user-inline__icon {
|
||||
|
||||
Reference in New Issue
Block a user