From 145b5b728b0d884cabb316802677fb330cb756bc Mon Sep 17 00:00:00 2001 From: Raven Scott Date: Thu, 13 Jun 2024 05:24:44 -0400 Subject: [PATCH] Better style for the side bar + removing alert on copy --- index.html | 2 +- style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 83 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 2a8d905..d918404 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,7 @@ if (chatRoomTopic) { const topic = chatRoomTopic.innerText; navigator.clipboard.writeText(topic).then(() => { - alert('Topic copied to clipboard!'); + console.log('Topic copied to clipboard:', topic); }).catch(err => { console.error('Failed to copy topic:', err); }); diff --git a/style.css b/style.css index 22f2c79..d7ac757 100644 --- a/style.css +++ b/style.css @@ -23,15 +23,15 @@ body { border-radius: 3px; text-decoration: none; cursor: pointer; - } +} - .mini-button:hover { +.mini-button:hover { background-color: #0056b3; - } +} .bold { font-weight: bold; - } +} pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; } @@ -167,10 +167,12 @@ main { color: white; font-size: 14px; border-radius: 5px; + transition: background-color 0.3s ease, transform 0.3s ease; } #sidebar button:hover { background-color: #5b6eae; + transform: scale(1.05); } #remove-room-btn { @@ -469,3 +471,79 @@ main { /* Removed circular border */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + +/* Updated Room List Styles */ +#room-list { + list-style: none; + padding: 0; + margin: 0; +} + +#room-list li { + padding: 10px; + margin-bottom: 10px; + background-color: #3a3f44; + border-radius: 5px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color 0.3s ease; +} + +#room-list li:hover { + background-color: #4a5258; +} + +#room-list li span { + flex: 1; +} + +#room-list li .edit-icon, +#room-list li .delete-icon { + margin-left: 10px; + color: #b0d944; + cursor: pointer; + transition: color 0.3s ease; +} + +#room-list li .edit-icon:hover, +#room-list li .delete-icon:hover { + color: #9ac831; +} + +/* Style for Edit Mode Input Box */ +#room-list li input[type="text"] { + background-color: #2e2e2e; + border: 1px solid #b0d944; + border-radius: 5px; + color: #b0d944; + padding: 5px; + width: calc(100% - 40px); /* Adjusted width to fit inside the list item */ + margin-right: 10px; /* Added margin to separate from icons */ + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} + +#room-list li input[type="text"]:focus { + outline: none; + background-color: #3a3a3a; +} + +/* Sidebar Button Style */ +#sidebar button { + width: 100%; + padding: 10px; + margin-bottom: 10px; + cursor: pointer; + background-color: #7289da; + border: none; + color: white; + font-size: 14px; + border-radius: 5px; + transition: background-color 0.3s ease, transform 0.3s ease; +} + +#sidebar button:hover { + background-color: #5b6eae; + transform: scale(1.05); +}