make window controls look better, move app name to the right side

This commit is contained in:
Raven Scott 2024-06-09 01:55:39 -04:00
parent 27f555d267
commit 2fa431886c
2 changed files with 71 additions and 41 deletions

View File

@ -10,10 +10,8 @@
</head>
<body>
<header>
<div>LinkUp</div>
<div class="window-controls">
<pear-ctrl></pear-ctrl>
</div>
<div id="linkup-text">LinkUp</div>
</header>
<main>
<div id="sidebar">

106
style.css
View File

@ -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 {