radon/radchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Radon 2025-01-21 13:30:44 -06:00
parent 88b749f25f
commit ac34561ca8
2 changed files with 130 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
content/root.css
View File

@ -81,11 +81,6 @@ body {
[data-theme="light"] .theme-icon .sun { display: none; } [data-theme="light"] .theme-icon .sun { display: none; }
[data-theme="dark"] .theme-icon .moon { display: none; } [data-theme="dark"] .theme-icon .moon { display: none; }
@media (max-width: 100px) {
.header-controls {
gap: 10px;
}
}
.settings-button, .users-button, .theme-button { .settings-button, .users-button, .theme-button {
top: 20px; top: 20px;
@ -348,3 +343,132 @@ button.scroll:hover {
#status, #username-status { #status, #username-status {
margin-top: 10px; 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;
}
}

2
content/root.html
View File

@ -14,7 +14,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="radchat"> <div class="radchat">
RadChat RadChat
</div> </div>
<div class="header-controls"> <div class="header-controls">
<button class="users-button" onclick="toggleUsers()"> <button class="users-button" onclick="toggleUsers()">