From ac34561ca83b148522e79d94e72d778f14ff01b2 Mon Sep 17 00:00:00 2001 From: Radon Date: Tue, 21 Jan 2025 13:30:44 -0600 Subject: [PATCH] changes --- content/root.css | 134 ++++++++++++++++++++++++++++++++++++++++++++-- content/root.html | 2 +- 2 files changed, 130 insertions(+), 6 deletions(-) diff --git a/content/root.css b/content/root.css index 59e0667..894c77d 100644 --- a/content/root.css +++ b/content/root.css @@ -81,11 +81,6 @@ body { [data-theme="light"] .theme-icon .sun { display: none; } [data-theme="dark"] .theme-icon .moon { display: none; } -@media (max-width: 100px) { - .header-controls { - gap: 10px; - } -} .settings-button, .users-button, .theme-button { top: 20px; @@ -348,3 +343,132 @@ button.scroll:hover { #status, #username-status { margin-top: 10px; } + + + +/* Normal mobile devices */ +@media screen and (max-width: 768px) { + .container { + padding: 10px; + padding-bottom: 70px; + height: 100vh; + width: 100%; + max-width: 100%; + } + + .radchat { + display: none; + } + + .current-user { + display: none; + } + + .header-controls { + top: 10px; + gap: 15px; + width: 100%; + justify-content: center; + } + + .settings-button, .users-button, .theme-button { + width: 36px; + height: 36px; + } + + .settings-icon, .users-icon, .theme-icon { + width: 20px; + height: 20px; + } + + .username-section, .users-section { + top: 60px; + width: 90%; + max-width: 300px; + left: 50%; + right: auto; + transform: translateX(-50%); + } + + .messages-section { + margin-top: 50px; + margin-bottom: 70px; + } + + .message { + padding: 8px 0; + } + + .message .content { + font-size: 0.95em; + } + + .message-section { + padding: 10px; + } + + .message-container { + gap: 8px; + } + + textarea { + font-size: 16px; + padding: 8px; + } + + button { + padding: 8px 15px; + } + + .video-embed, .image-embed { + max-width: 100%; + } + + .radchat { + font-size: 1.5em; + position: relative; + text-align: center; + margin-bottom: 10px; + } + + /* Improve touch targets */ + .delete-button { + padding: 8px 12px; + opacity: 1; /* Always visible on mobile */ + } + + @media (orientation: landscape) { + .messages-section { + margin-top: 45px; + margin-bottom: 60px; + } + + .message-section { + padding: 8px; + } + } +} + +/* Small mobile devices */ +@media screen and (max-width: 380px) { + .radchat { + display: none; + } + + .current-user { + display: none; + } + + .header-controls { + gap: 10px; + } + + .settings-button, .users-button, .theme-button { + width: 32px; + height: 32px; + } + + .message .content { + font-size: 0.9em; + } +} diff --git a/content/root.html b/content/root.html index 8d6e529..bb720a1 100644 --- a/content/root.html +++ b/content/root.html @@ -14,7 +14,7 @@
- RadChat + RadChat