602 lines
10 KiB
CSS
602 lines
10 KiB
CSS
[data-theme="dark"] {
|
|
--radchat-color: #40a02b;
|
|
--main-bg-color: #11111b;
|
|
--pum-button-inactive-fg: #cdd6f4;
|
|
--pum-button-inactive-bg: #11111b;
|
|
--pum-button-active-fg: #89b4fa;
|
|
--pum-button-active-bg: #1e1e2e;
|
|
--pum-title-color: #cdd6f4;
|
|
--pum-bg-color: #1e1e2e;
|
|
--user-color: #89b4fa;
|
|
--timestamp-color: #313244;
|
|
--separator-color: #181825;
|
|
--message-color: #cdd6f4;
|
|
--message-bg-color: #1e1e2e;
|
|
--input-bg-color: #181825;
|
|
--input-text-color: #cdd6f4;
|
|
--input-button-inactive-bg: #b4befe;
|
|
--input-button-inactive-fg: #11111b;
|
|
--input-button-active-bg: #89b4fa;
|
|
--input-button-active-fg: #11111b;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--radchat-color: #40a02b;
|
|
--main-bg-color: #dce0e8;
|
|
--pum-button-inactive-fg: #4c4f69;
|
|
--pum-button-inactive-bg: #dce0e8;
|
|
--pum-button-active-fg: #1e66f5;
|
|
--pum-button-active-bg: #eff1f5;
|
|
--pum-title-color: #4c4f69;
|
|
--pum-bg-color: #eff1f5;
|
|
--user-color: #1e66f5;
|
|
--timestamp-color: #8c8fa1;
|
|
--separator-color: #e6e9ef;
|
|
--message-color: #4c4f69;
|
|
--message-bg-color: #eff1f5;
|
|
--input-bg-color: #e6e9ef;
|
|
--input-text-color: #4c4f69;
|
|
--input-button-inactive-bg: #7287fd;
|
|
--input-button-inactive-fg: #dce0e8;
|
|
--input-button-active-bg: #1e66f5;
|
|
--input-button-active-fg: #dce0e8;
|
|
}
|
|
|
|
.search-trigger {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.search-container {
|
|
position: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--pum-button-active-bg);
|
|
border-radius: 24px;
|
|
transition: width 0.2s ease;
|
|
overflow: hidden;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.search-container.expanded {
|
|
width: 300px;
|
|
}
|
|
|
|
.search-button {
|
|
background: none;
|
|
border: none;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--pum-button-active-bg);
|
|
color: var(--pum-button-inactive-fg);
|
|
}
|
|
|
|
.search-button:hover {
|
|
background: var(--pum-button-active-bg);
|
|
color: var(--pum-button-active-fg);
|
|
}
|
|
|
|
.search-input {
|
|
display: none;
|
|
flex: 2;
|
|
border: none;
|
|
padding: 8px;
|
|
margin-left: 4px;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-container.expanded .search-input {
|
|
display: block;
|
|
}
|
|
|
|
.search-highlight {
|
|
background-color: yellow;
|
|
color: gray;
|
|
}
|
|
|
|
.search-highlight.current {
|
|
background-color: darkorange;
|
|
color: black;
|
|
}
|
|
|
|
/* Search icon using CSS */
|
|
.search-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 2px solid var(--pum-button-inactive-fg);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.search-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 10px;
|
|
background: var(--pum-button-inactive-fg);
|
|
bottom: -8px;
|
|
right: -3px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.search-count {
|
|
display: none;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
color: var(--pum-title-color);
|
|
}
|
|
|
|
.search-container.expanded .search-count {
|
|
display: block;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0; /* Remove padding from body */
|
|
background-color: var(--main-bg-color);
|
|
color: var(--pum-title-color);
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden; /* Prevent body scroll */
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
position: relative;
|
|
height: 100vh;
|
|
padding: 20px; /* Move padding here */
|
|
padding-bottom: 80px; /* Space for message input */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-controls {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 20px; /* Space between buttons */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
/* Show/hide appropriate icon based on theme */
|
|
[data-theme="light"] .theme-icon .sun { display: none; }
|
|
[data-theme="dark"] .theme-icon .moon { display: none; }
|
|
|
|
|
|
.settings-button, .users-button, .theme-button {
|
|
top: 20px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--pum-button-inactive-bg);
|
|
}
|
|
|
|
.settings-button {
|
|
right: calc(50%);
|
|
}
|
|
|
|
.users-button {
|
|
right: calc(60%);
|
|
}
|
|
|
|
.theme-button {
|
|
right: calc(30%);
|
|
}
|
|
|
|
.message-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.delete-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--timestamp-color);
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.edit-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--timestamp-color);
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.message:hover .edit-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.message:hover .delete-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.delete-button:hover {
|
|
background: var(--timestamp-color);
|
|
}
|
|
|
|
.edit-button:hover {
|
|
background: var(--timestamp-color);
|
|
}
|
|
|
|
.settings-icon, .users-icon, .theme-icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--pum-button-inactive-fg);
|
|
}
|
|
|
|
.settings-button:hover, .users-button:hover, .theme-button:hover {
|
|
background-color: var(--pum-button-active-bg);
|
|
}
|
|
|
|
.settings-button:hover .settings-icon,
|
|
.users-button:hover .users-icon,
|
|
.theme-button:hover .theme-icon {
|
|
fill: var(--pum-button-active-fg);
|
|
}
|
|
|
|
#users-list {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.current-user {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 28px;
|
|
color: var(--user-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.username-section, .users-section {
|
|
position: fixed;
|
|
transform: translateX(-50%);
|
|
top: 70px;
|
|
padding: 15px;
|
|
background-color: var(--pum-bg-color);
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
z-index: 100;
|
|
display: none;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.username-section {
|
|
right: 50%;
|
|
transform: translateX(10%);
|
|
}
|
|
|
|
.username-section h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.users-section {
|
|
right: 50%;
|
|
transform: translateX(-10%);
|
|
}
|
|
|
|
.users-section h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.user-item {
|
|
padding: 8px 0;
|
|
color: var(--user-color);
|
|
border-bottom: 1px solid var(--separator-color);
|
|
}
|
|
|
|
.user-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.messages-section {
|
|
flex-grow: 1;
|
|
margin-top: 60px; /* Space for gear icon */
|
|
margin-bottom: 60px;
|
|
overflow-y: auto;
|
|
height: 0; /* Allow flex-grow to work */
|
|
}
|
|
.message {
|
|
padding: 10px 0;
|
|
}
|
|
.message .username {
|
|
color: var(--user-color);
|
|
font-weight: bold;
|
|
}
|
|
.message .timestamp {
|
|
color: var(--timestamp-color);
|
|
font-weight: thin;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.message .content {
|
|
margin-top: 5px;
|
|
color: var(--message-color);
|
|
word-wrap: break-word; /* Handle long words */
|
|
word-break: break-word; /* Break words at arbitrary points if needed */
|
|
white-space: pre-wrap; /* Preserve whitespace and wraps */
|
|
max-width: 100%; /* Ensure it doesn't exceed container width */
|
|
}
|
|
.message-section {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
background-color: var(--message-bg-color);
|
|
z-index: 100; /* Ensure it stays on top */
|
|
}
|
|
|
|
.message-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.video-embed {
|
|
position: inline;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
max-width: 560px; /* Standard YouTube width */
|
|
}
|
|
|
|
.video-embed iframe {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.image-embed {
|
|
padding-top: 10px;
|
|
max-width: 560px; /* Match YouTube width */
|
|
}
|
|
|
|
.image-embed img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
display: block;
|
|
}
|
|
|
|
input {
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg-color);
|
|
color: var(--input-text-color);
|
|
flex-grow: 1;
|
|
}
|
|
textarea {
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg-color);
|
|
color: var(--input-text-color);
|
|
flex-grow: 1;
|
|
resize: none; /* Prevents manual resizing */
|
|
min-height: 38px; /* Match your previous input height */
|
|
line-height: 1.4;
|
|
font-family: Arial, sans-serif; /* Match your body font */
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: var(--input-button-inactive-bg);
|
|
color: var(--input-button-inactive-fg);
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: var(--input-button-active-bg);
|
|
color: var(--input-button-active-fg)
|
|
}
|
|
|
|
button.scroll {
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background-color: var(--input-button-inactive-bg);
|
|
fill: var(--input-button-inactive-fg);
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.scroll:hover {
|
|
background-color: var(--input-button-active-bg);
|
|
}
|
|
|
|
.scroll-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: var(--var-input-button-inactive-fg);
|
|
color: var(--var-input-button-inactive-fg);
|
|
}
|
|
|
|
.scroll-icon:hover {
|
|
fill: var(--var-input-button-active-fg);
|
|
color: var(--var-input-button-active-fg);
|
|
}
|
|
|
|
.radchat {
|
|
position: absolute;
|
|
left: 0;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: var(--radchat-color);
|
|
}
|
|
#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%;
|
|
}
|
|
|
|
.search-container {
|
|
display: none;
|
|
}
|
|
.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 */
|
|
}
|
|
|
|
.edit-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) {
|
|
.search-container {
|
|
display: none;
|
|
}
|
|
.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;
|
|
}
|
|
}
|