snxraven/LinkUp-P2P-Chat
1
1
Fork 2
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

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

104
style.css
View File

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