diff --git a/style.css b/style.css
index 57a4242..2a15006 100644
--- a/style.css
+++ b/style.css
@@ -12,15 +12,15 @@ body {
transition: background-color 0.3s ease, color 0.3s ease;
}
-.pear-ctrl {
+pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; }
+
+pear-ctrl {
margin-top: 9px;
- margin-right: 15px; /* Ensure this is as desired */
- position: fixed; /* Ensures it stays relative to the viewport */
- right: 13px; /* Ensures it stays 13px from the right edge */
- top: 0; /* Keeps it at the top of the viewport */
+ margin-left: 9px;
+ position: absolute;
}
-.pear-ctrl:after {
+pear-ctrl:after {
content: '';
display: block;
height: 1.8rem;
@@ -32,10 +32,12 @@ body {
background-color: #B0D94413;
filter: drop-shadow(2px 10px 6px #888);
}
+
main {
display: flex;
flex: 1;
- overflow: hidden; /* Ensure no overflow in main */
+ overflow: hidden;
+ /* Ensure no overflow in main */
}
#sidebar {
@@ -55,7 +57,9 @@ main {
padding: 10px;
}
-#register, #setup, #chat {
+#register,
+#setup,
+#chat {
flex: 1;
display: flex;
flex-direction: column;
@@ -81,22 +85,28 @@ main {
#messages-container {
flex: 1;
- overflow-y: auto; /* Allow vertical scrolling */
- overflow-x: hidden; /* Hide horizontal scrolling */
+ 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 */
+ width: 8px;
+ /* Set the width of the scrollbar */
}
#messages-container::-webkit-scrollbar-thumb {
- background-color: #b0d944; /* Set the color of the scrollbar thumb */
- border-radius: 10px; /* Round the corners of the scrollbar thumb */
+ background-color: #b0d944;
+ /* Set the color of the scrollbar thumb */
+ border-radius: 10px;
+ /* Round the corners of the scrollbar thumb */
}
#messages-container::-webkit-scrollbar-track {
- background: #2e2e2e; /* Set the color of the scrollbar track */
+ background: #2e2e2e;
+ /* Set the color of the scrollbar track */
}
#message-form {
@@ -110,16 +120,20 @@ main {
flex: 1;
margin-right: 0.5rem;
padding-right: 0.5rem;
- height: 1.5rem; /* Initial single line height */
- overflow-y: hidden; /* Hide scrollbar */
+ height: 1.5rem;
+ /* Initial single line height */
+ overflow-y: hidden;
+ /* Hide scrollbar */
}
#message:focus {
- height: auto; /* Allow the textarea to grow dynamically when focused */
+ height: auto;
+ /* Allow the textarea to grow dynamically when focused */
}
#message:empty {
- height: 1.5rem; /* Ensure single line height when empty */
+ height: 1.5rem;
+ /* Ensure single line height when empty */
}
#sidebar button {
@@ -160,7 +174,6 @@ main {
header {
display: flex;
justify-content: space-between;
- align-items: center;
padding: 1rem;
background-color: #1f1f1f;
color: #fff;
@@ -169,9 +182,12 @@ header {
-webkit-app-region: drag;
}
+#linkup-text {
+ margin-left: auto;
+}
+
.window-controls {
display: flex;
- align-items: center;
-webkit-app-region: no-drag;
}
@@ -198,22 +214,28 @@ textarea {
border: 1px solid #b0d944;
background-color: #333;
color: #b0d944;
- padding: 0.5rem; /* Reduced padding */
+ padding: 0.5rem;
+ /* Reduced padding */
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
- line-height: 1.25rem; /* Adjusted line height */
+ 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;
- resize: none; /* Prevent resizing */
- overflow-y: hidden; /* Hide scrollbar */
+ resize: none;
+ /* Prevent resizing */
+ overflow-y: hidden;
+ /* Hide scrollbar */
}
textarea {
- height: auto; /* Allow the textarea to grow dynamically */
+ height: auto;
+ /* Allow the textarea to grow dynamically */
}
textarea:focus {
- outline: none; /* Remove focus outline */
+ outline: none;
+ /* Remove focus outline */
}
textarea::placeholder {
@@ -303,12 +325,14 @@ main {
background-color: #2b2b2b;
border-radius: 4px;
width: 100%;
- box-sizing: border-box; /* Added to ensure box model includes padding */
+ box-sizing: border-box;
+ /* Added to ensure box model includes padding */
}
-#details > div {
+#details>div {
display: flex;
- flex-direction: column; /* Allow peers count to stack */
+ flex-direction: column;
+ /* Allow peers count to stack */
}
#submit-button {
@@ -319,7 +343,8 @@ main {
flex: 1;
min-height: 200px;
overflow-y: auto;
- padding: 0.5rem; /* Reduced padding */
+ padding: 0.5rem;
+ /* Reduced padding */
background-color: #262626;
border-radius: 4px;
display: flex;
@@ -361,29 +386,36 @@ main {
.message {
display: flex;
align-items: center;
- margin-bottom: 0.5rem; /* Reduced margin */
+ margin-bottom: 0.5rem;
+ /* Reduced margin */
}
.message img {
- width: 32px; /* Reduced size */
- height: 32px; /* Reduced size */
+ width: 32px;
+ /* Reduced size */
+ height: 32px;
+ /* Reduced size */
border-radius: 50%;
- margin-right: 0.5rem; /* Reduced margin */
+ margin-right: 0.5rem;
+ /* Reduced margin */
border: 2px solid #b0d944;
}
.message-content {
max-width: 70%;
background-color: #2e2e2e;
- padding: 0.5rem; /* Reduced padding */
- border-radius: 8px; /* Reduced border radius */
+ 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;
- font-size: 0.9rem; /* Reduced font size */
+ font-size: 0.9rem;
+ /* Reduced font size */
}
.message-time {