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

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;