diff --git a/style.css b/style.css index d7ac757..fceb187 100644 --- a/style.css +++ b/style.css @@ -17,23 +17,28 @@ body { padding: 3px 7px; font-size: 14px; font-weight: bold; - color: #fff; - background-color: #7289da; + color: #ffffff; + background-color: #464343; border: none; border-radius: 3px; text-decoration: none; cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; } .mini-button:hover { - background-color: #0056b3; + background-color: #181717; + transform: scale(1.05); } .bold { font-weight: bold; } -pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; } +pear-ctrl[data-platform="darwin"] { + float: right; + margin-top: 4px; +} pear-ctrl { margin-top: 9px; @@ -50,7 +55,7 @@ pear-ctrl:after { left: 0; top: 0; width: 100%; - background-color: #B0D94413; + background-color: #1f1f1f; filter: drop-shadow(2px 10px 6px #888); } @@ -58,7 +63,6 @@ main { display: flex; flex: 1; overflow: hidden; - /* Ensure no overflow in main */ } #sidebar { @@ -107,27 +111,21 @@ main { #messages-container { flex: 1; overflow-y: auto; - /* Allow vertical scrolling */ overflow-x: hidden; - /* Hide horizontal scrolling */ width: 100%; } #messages-container::-webkit-scrollbar { width: 8px; - /* Set the width of the scrollbar */ } #messages-container::-webkit-scrollbar-thumb { - background-color: #b0d944; - /* Set the color of the scrollbar thumb */ + background-color: #464343; border-radius: 10px; - /* Round the corners of the scrollbar thumb */ } #messages-container::-webkit-scrollbar-track { background: #2e2e2e; - /* Set the color of the scrollbar track */ } #message-form { @@ -142,19 +140,15 @@ main { margin-right: 0.5rem; padding-right: 0.5rem; height: 1.5rem; - /* Initial single line height */ overflow-y: hidden; - /* Hide scrollbar */ } #message:focus { height: auto; - /* Allow the textarea to grow dynamically when focused */ } #message:empty { height: 1.5rem; - /* Ensure single line height when empty */ } #sidebar button { @@ -162,7 +156,7 @@ main { padding: 10px; margin-bottom: 10px; cursor: pointer; - background-color: #7289da; + background-color: #3e3c3c; border: none; color: white; font-size: 14px; @@ -171,7 +165,7 @@ main { } #sidebar button:hover { - background-color: #5b6eae; + background-color: #191919; transform: scale(1.05); } @@ -183,10 +177,12 @@ main { color: white; cursor: pointer; border-radius: 5px; + transition: background-color 0.3s ease, transform 0.3s ease; } #remove-room-btn:hover { background-color: #c03535; + transform: scale(1.05); } .hidden { @@ -223,67 +219,71 @@ header { padding: 0.5rem; border-radius: 4px; cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color 0.3s ease, transform 0.3s ease; } .window-controls button:hover { background-color: #3e3e3e; + transform: scale(1.05); } /* Button and input styles */ button, input, textarea { - border: 1px solid #b0d944; + border: 1px solid #464343; background-color: #333; - color: #b0d944; + color: #e0e0e0; padding: 0.5rem; - /* Reduced padding */ font-family: 'Roboto Mono', monospace; font-size: 1rem; line-height: 1.25rem; - /* Adjusted line height */ border-radius: 4px; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; resize: none; - /* Prevent resizing */ overflow-y: hidden; - /* Hide scrollbar */ +} + +button:hover, +input[type="submit"]:hover { + background-color: #191919; + transform: scale(1.05); } textarea { height: auto; - /* Allow the textarea to grow dynamically */ } textarea:focus { outline: none; - /* Remove focus outline */ } textarea::placeholder { color: #a0a0a0; } -#attach-file, #message-form input[type="submit"] { - padding: 0.5rem 1rem; /* Add padding to buttons */ - margin-left: 0.5rem; /* Add margin between buttons */ +#attach-file, +#message-form input[type="submit"] { + padding: 0.5rem 1rem; + margin-left: 0.5rem; } #talk-btn { - padding: 0.5rem 1rem; /* Add padding to the button */ - margin-left: 0.5rem; /* Add margin between buttons */ + padding: 0.5rem 1rem; + margin-left: 0.5rem; font-size: 14px; border-radius: 5px; cursor: pointer; } #talk-btn:active { - color : #fff; /* White text when clicked */ - background-color: #f04747; /* Red color when clicked */ + color: #fff; + background-color: #f04747; } #talk-btn:hover { + background-color: #191919; + transform: scale(1.05); } /* Main container styles */ @@ -315,7 +315,7 @@ main { #or { margin: 1.5rem 0; - color: #b0d944; + color: #e0e0e0; } #loading { @@ -359,6 +359,12 @@ main { #join-chat-room-container button { margin-left: 0.5rem; + transition: background-color 0.3s ease, transform 0.3s ease; +} + +#join-chat-room-container button:hover { + background-color: #191919; + transform: scale(1.05); } #details { @@ -370,17 +376,21 @@ main { border-radius: 4px; width: 100%; box-sizing: border-box; - /* Added to ensure box model includes padding */ } #details>div { display: flex; flex-direction: column; - /* Allow peers count to stack */ } #submit-button { margin-left: 1rem; + transition: background-color 0.3s ease, transform 0.3s ease; +} + +#submit-button:hover { + background-color: #191919; + transform: scale(1.05); } #messages { @@ -388,7 +398,6 @@ main { min-height: 200px; overflow-y: auto; padding: 0.5rem; - /* Reduced padding */ background-color: #262626; border-radius: 4px; display: flex; @@ -431,7 +440,6 @@ main { display: flex; align-items: flex-start; margin-bottom: 0.5rem; - /* Reduced margin */ } .message img.avatar { @@ -439,24 +447,21 @@ main { height: 32px; border-radius: 50%; margin-right: 0.5rem; - border: 2px solid #b0d944; + border: 2px solid #464343; } .message-content { max-width: 70%; background-color: #2e2e2e; padding: 0.5rem; - /* Reduced padding */ border-radius: 8px; - /* Reduced border radius */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .message-header { font-weight: bold; - color: #b0d944; + color: #e0e0e0; font-size: 0.9rem; - /* Reduced font size */ } .message-text { @@ -468,7 +473,6 @@ main { height: auto; margin-top: 0.5rem; border-radius: 4px; - /* Removed circular border */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } @@ -502,25 +506,25 @@ main { #room-list li .edit-icon, #room-list li .delete-icon { margin-left: 10px; - color: #b0d944; + color: #e0e0e0; cursor: pointer; transition: color 0.3s ease; } #room-list li .edit-icon:hover, #room-list li .delete-icon:hover { - color: #9ac831; + color: #a0a0a0; } /* Style for Edit Mode Input Box */ #room-list li input[type="text"] { background-color: #2e2e2e; - border: 1px solid #b0d944; + border: 1px solid #464343; border-radius: 5px; - color: #b0d944; + color: #e0e0e0; padding: 5px; - width: calc(100% - 40px); /* Adjusted width to fit inside the list item */ - margin-right: 10px; /* Added margin to separate from icons */ + width: calc(100% - 40px); + margin-right: 10px; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @@ -529,21 +533,22 @@ main { 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; +/* Link styles */ +a { + color: #e0e0e0; /* Base color for links matching the text color */ + text-decoration: none; /* Remove underline */ + transition: color 0.3s ease, text-decoration 0.3s ease; } -#sidebar button:hover { - background-color: #5b6eae; - transform: scale(1.05); +a:hover { + color: #b0b0b0; /* Lighter color on hover */ + text-decoration: underline; /* Underline on hover */ } + +a:active { + color: #a0a0a0; /* Slightly darker color on active */ +} + +a:visited { + color: #b0b0b0; /* Different color for visited links */ +} \ No newline at end of file