mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Scale desktop layout down via root font sizing
This commit is contained in:
thePR0M3TH3AN committed
1 parent
dd60ff07e9
commit
8d2f32c62b
1 file changed
+47
-63
+47
-63
@@ -6,16 +6,26 @@
|
||||
--color-card-critical: #3f0b13;
|
||||
--color-text: #f8fafc;
|
||||
--color-muted: #94a3b8;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1);
|
||||
--modal-motion-duration: 160ms;
|
||||
--scrollbar-width: 8px;
|
||||
--scrollbar-width: 0.5rem;
|
||||
--scrollbar-track: rgba(255, 255, 255, 0.1);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
html {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global scrollbar styling */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
@@ -33,7 +43,7 @@
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
@@ -64,14 +74,8 @@ header img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header img {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1480px;
|
||||
max-width: 92.5rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
@@ -79,7 +83,7 @@ header img {
|
||||
/* Video Grids */
|
||||
#videoList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
@@ -87,7 +91,7 @@ header img {
|
||||
/* Subscriptions grid: same pattern as #videoList */
|
||||
#subscriptionsVideoList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
@@ -95,20 +99,11 @@ header img {
|
||||
/* Now also match for channelVideoList (channel profile) */
|
||||
#channelVideoList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#videoList,
|
||||
#subscriptionsVideoList,
|
||||
#channelVideoList {
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Cards */
|
||||
.video-card {
|
||||
background-color: var(--color-card);
|
||||
@@ -124,11 +119,11 @@ header img {
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
background-color: var(--color-card-critical);
|
||||
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), var(--shadow-md);
|
||||
box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.35), var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
|
||||
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), var(--shadow-lg);
|
||||
box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.45), var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card--enter {
|
||||
@@ -139,7 +134,7 @@ header img {
|
||||
@keyframes video-card-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transform: translateY(0.5rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -218,7 +213,7 @@ header img {
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
@@ -248,17 +243,6 @@ header img {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.video-card .details {
|
||||
padding: 1rem 1rem 1.125rem;
|
||||
}
|
||||
|
||||
.video-card h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Player */
|
||||
#playerModal {
|
||||
position: fixed;
|
||||
@@ -269,15 +253,15 @@ header img {
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px); /* For Safari support */
|
||||
backdrop-filter: blur(0.625rem);
|
||||
-webkit-backdrop-filter: blur(0.625rem); /* For Safari support */
|
||||
}
|
||||
|
||||
#nostrFormModal,
|
||||
#profileModal,
|
||||
#uploadModal {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px); /* For Safari */
|
||||
backdrop-filter: blur(0.625rem);
|
||||
-webkit-backdrop-filter: blur(0.625rem); /* For Safari */
|
||||
}
|
||||
|
||||
/* If you ever want to show it, add ".flex" class dynamically */
|
||||
@@ -298,7 +282,7 @@ header img {
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(1.25rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -411,7 +395,7 @@ textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid rgb(255 255 255 / 0.1);
|
||||
border: 0.0625rem solid rgb(255 255 255 / 0.1);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--color-text);
|
||||
transition: border-color 0.2s;
|
||||
@@ -421,7 +405,7 @@ input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
ring: 2px var(--color-primary);
|
||||
ring: 0.125rem var(--color-primary);
|
||||
}
|
||||
|
||||
/* -------------------------------------------
|
||||
@@ -440,12 +424,12 @@ button:not(.icon-button) {
|
||||
|
||||
button:not(.icon-button):hover {
|
||||
background-color: var(--color-secondary);
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-0.0625rem);
|
||||
}
|
||||
|
||||
button:not(.icon-button):focus {
|
||||
outline: none;
|
||||
ring: 2px var(--color-primary);
|
||||
ring: 0.125rem var(--color-primary);
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -490,7 +474,7 @@ button:not(.icon-button):focus {
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
@@ -521,12 +505,12 @@ footer a:hover {
|
||||
}
|
||||
|
||||
#disclaimerModal .modal-content {
|
||||
width: min(960px, calc(100% - 2rem));
|
||||
max-height: min(90vh, 820px);
|
||||
width: min(60rem, calc(100% - 2rem));
|
||||
max-height: min(90vh, 51.25rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
|
||||
box-shadow: 0 1.5625rem 3.125rem -0.75rem rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
#disclaimerModal .modal-header {
|
||||
@@ -542,7 +526,7 @@ footer a:hover {
|
||||
#disclaimerModal .modal-footer {
|
||||
padding: 1.25rem 1.5rem 1.75rem;
|
||||
background-color: #1a2234;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments for Disclaimer Modal */
|
||||
@@ -613,7 +597,7 @@ footer a:hover {
|
||||
/* Video info cards */
|
||||
.video-info .bg-gray-800\/50 {
|
||||
background-color: rgb(31 41 55 / 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
/* Circular Icon Buttons */
|
||||
@@ -639,7 +623,7 @@ footer a:hover {
|
||||
.icon-button:focus,
|
||||
.icon-button:active {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.6);
|
||||
box-shadow: 0 0 0 0.1875rem rgba(220, 38, 38, 0.6);
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
@@ -726,14 +710,14 @@ footer a:hover {
|
||||
|
||||
.sidebar-dropup-panel {
|
||||
background-color: #1f2937; /* gray-800 */
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
border: 0.0625rem solid rgba(148, 163, 184, 0.25);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.45);
|
||||
box-shadow: 0 1.125rem 2.1875rem rgba(15, 23, 42, 0.45);
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(16px);
|
||||
transform: translateY(1rem);
|
||||
transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
|
||||
}
|
||||
|
||||
@@ -742,7 +726,7 @@ footer a:hover {
|
||||
}
|
||||
|
||||
.sidebar-dropup-panel--expanded {
|
||||
max-height: 640px;
|
||||
max-height: 40rem;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
@@ -751,7 +735,7 @@ footer a:hover {
|
||||
.sidebar-dropup-trigger {
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35));
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border: 0.0625rem solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 9999px;
|
||||
color: #f8fafc;
|
||||
display: flex;
|
||||
@@ -764,9 +748,9 @@ footer a:hover {
|
||||
.sidebar-dropup-trigger:hover,
|
||||
.sidebar-dropup-trigger:focus {
|
||||
border-color: rgba(148, 163, 184, 0.6);
|
||||
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
|
||||
box-shadow: 0 0.75rem 1.875rem rgba(37, 99, 235, 0.25);
|
||||
outline: none;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-0.0625rem);
|
||||
}
|
||||
|
||||
.sidebar-dropup-trigger__content {
|
||||
@@ -790,7 +774,7 @@ footer a:hover {
|
||||
.edit-field-button:focus {
|
||||
background-color: #334155;
|
||||
color: #f8fafc;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-0.0625rem);
|
||||
}
|
||||
|
||||
.locked-input {
|
||||
|
||||
Reference in new issue
Block a user