codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

misc

Browse Source
This commit is contained in:
codey
2025-12-17 13:33:31 -05:00
parent e18aa3f42c
commit c49bfe5a3d
38 changed files with 2436 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/assets/styles/DiscordLogs.css
View File

@@ -272,6 +272,38 @@
letter-spacing: -0.01em;
}
/* Mobile: wrap channel name and topic */
@media (max-width: 768px) {
.discord-header {
overflow: hidden;
}
.discord-header-info {
overflow: hidden;
max-width: calc(100% - 60px);
}
.discord-channel-name {
flex-wrap: wrap;
overflow: hidden;
max-width: 100%;
}
.discord-topic-divider {
display: none;
}
.discord-channel-topic {
flex-basis: 100%;
font-size: 0.75rem;
margin-top: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
}
[data-theme="dark"] .discord-channel-name {
color: #f2f3f5;
}
@@ -1417,6 +1449,57 @@ a.discord-embed-title:hover {
border-radius: 4px;
}
/* YouTube thumbnail click-to-play */
.discord-embed-video-thumbnail-link {
display: block;
text-decoration: none;
margin-top: 0.75rem;
}
.discord-embed-video-thumbnail {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
border-radius: 4px;
overflow: hidden;
background: #000;
cursor: pointer;
transition: opacity 0.2s ease;
}
.discord-embed-video-thumbnail:hover {
opacity: 0.9;
}
.discord-embed-video-thumbnail-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.discord-embed-video-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
transition: transform 0.2s ease;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.discord-embed-video-thumbnail:hover .discord-embed-video-play-overlay {
transform: translate(-50%, -50%) scale(1.1);
}
.discord-embed-video-play-icon {
width: 100%;
height: 100%;
}
/* Reactions */
.discord-reactions {
display: flex;
@@ -1470,6 +1553,17 @@ a.discord-embed-title:hover {
color: #80848e;
position: relative;
margin-left: 0.5rem;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.1s ease;
}
.discord-reply-context:hover {
background-color: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .discord-reply-context:hover {
background-color: rgba(255, 255, 255, 0.04);
}
.discord-reply-context::before {
@@ -1716,24 +1810,65 @@ a.discord-embed-title:hover {
margin: 0.25rem 0;
overflow: auto;
max-height: 400px;
max-width: 100%;
overscroll-behavior: contain;
/* 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;
line-height: 1.125;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
tab-size: 4;
-moz-tab-size: 4;
letter-spacing: 0;
}
/* Scrollbar styling for code blocks */
.discord-code-block::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.discord-code-block::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.discord-code-block::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.discord-code-block::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.discord-code-block::-webkit-scrollbar-corner {
background: transparent;
}
[data-theme="light"] .discord-code-block::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .discord-code-block::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .discord-code-block::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.discord-code-block code {
background: none;
padding: 0;
color: #b5bac1;
white-space: pre; /* keep exact spacing */
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
font-family: inherit;
font-size: inherit;
line-height: inherit;
@@ -2351,6 +2486,7 @@ a.discord-embed-title:hover {
}
.discord-copy-link-btn,
.discord-jump-first-btn,
.discord-member-toggle-btn {
display: flex;
align-items: center;
@@ -2365,17 +2501,24 @@ a.discord-embed-title:hover {
}
[data-theme="dark"] .discord-copy-link-btn,
[data-theme="dark"] .discord-jump-first-btn,
[data-theme="dark"] .discord-member-toggle-btn {
background: rgba(255, 255, 255, 0.08);
color: #b5bac1;
}
.discord-copy-link-btn:hover,
.discord-jump-first-btn:hover,
.discord-member-toggle-btn:hover {
background: rgba(88, 101, 242, 0.15);
color: #5865f2;
}
.discord-jump-first-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.discord-copy-link-btn.copied {
background: rgba(35, 165, 90, 0.2);
color: #23a55a;

95
src/assets/styles/global.css
View File

@@ -465,6 +465,16 @@ Custom
font-size: 1.1rem;
flex: 1;
text-align: left;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 480px) {
.lyrics-title {
font-size: 0.95rem;
}
}
.lyrics-actions {
@@ -647,6 +657,91 @@ Custom
border-color: #f87171;
}
/* ===================================================
PrimeReact Dialog + DataTable dark theme fixes (global)
These ensure dialogs rendered via portal (class .p-dialog) pick up
site dark theme when the document has [data-theme="dark"].
=================================================== */
/* Paginator specifics used by the player queue (global variant) */
.queue-paginator .p-paginator-current {
background: transparent !important;
color: inherit !important;
border: none !important;
}
[data-theme="dark"] .queue-paginator .p-paginator-current {
color: rgb(212 212 212) !important;
background: transparent !important;
}
.queue-paginator .p-paginator-bottom {
padding: 16px !important;
border-top: 1px solid rgb(229 229 229) !important;
}
[data-theme="dark"] .queue-paginator .p-paginator-bottom {
border-top-color: rgb(82 82 82) !important;
}
/* DataTable + Dialog - make table dark in any portal dialog */
/* Improved global dark mode for PrimeReact DataTable in dialogs (matches RequestManagement look) */
[data-theme="dark"] .p-dialog .p-datatable {
color: #e5e7eb !important;
}
[data-theme="dark"] .p-dialog .p-datatable-thead > tr > th {
background-color: #1f1f1f !important;
color: #e5e7eb !important;
border-bottom: 1px solid #374151 !important;
}
[data-theme="dark"] .p-dialog .p-datatable-tbody > tr {
background-color: #1a1a1a !important;
border-bottom: 1px solid #374151 !important;
color: #e5e7eb !important;
}
[data-theme="dark"] .p-dialog .p-datatable-tbody > tr:nth-child(odd) {
background-color: #222 !important;
}
[data-theme="dark"] .p-dialog .p-datatable-tbody > tr:hover {
background-color: #333 !important;
color: #fff !important;
}
[data-theme="dark"] .p-dialog .p-datatable .p-datatable-header,
[data-theme="dark"] .p-dialog .p-datatable .p-datatable-footer {
background: #1f1f1f !important;
color: #e5e7eb !important;
border-color: #374151 !important;
}
/* Paginator Dark Mode for dialogs */
[data-theme="dark"] .p-dialog .p-paginator {
background-color: #121212 !important;
color: #e5e7eb !important;
border-top: 1px solid #374151 !important;
}
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-page,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-next,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-prev,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-first,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-last {
color: #e5e7eb !important;
background: transparent !important;
border: none !important;
}
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-page:hover,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-next:hover,
[data-theme="dark"] .p-dialog .p-paginator .p-paginator-prev:hover {
background-color: #374151 !important;
color: #fff !important;
border-radius: 0.25rem;
}
[data-theme="dark"] .p-dialog .p-paginator .p-highlight {
background-color: #6b7280 !important;
color: #fff !important;
border-radius: 0.25rem !important;
}
.trip-checkbox {
appearance: none;
width: 2.1rem;