From 83121f7fa99df690a3b9029556aa023226cf22ef Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Sun, 9 Feb 2025 13:19:54 +0100
Subject: [PATCH] Updated style.

---
 src/snek/static/base.css | 464 +++++++++++++++++----------------------
 1 file changed, 198 insertions(+), 266 deletions(-)

diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index 46517cf..9cbd146 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -1,6 +1,5 @@
 * {
   margin: 0;
-  /*padding: 0;*/
   box-sizing: border-box;
 }
 
@@ -9,23 +8,14 @@
   height: auto;
   overflow: auto;
   flex: 1;
-  &.tile {
+}
+
+.gallery.tile, .tile {
   width: 100px;
   height: 100px;
   object-fit: cover;
-  margin-right: 10px;
+  margin: 20px 10px 20px 0;
   border-radius: 5px;
-  margin: 20px;
-  }
-}
-.tile {
-  
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
-    margin-right: 10px;
-    border-radius: 5px;
-    margin: 20px;
 }
 
 body {
@@ -38,8 +28,11 @@ body {
   height: 100vh;
   min-width: 100%;
 }
+
 main {
-  min-width: 100%;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
 }
 
 header {
@@ -63,12 +56,13 @@ header nav a {
   font-size: 1em;
   transition: color 0.3s;
 }
+
 .no-select {
-      -webkit-user-select: none;  /* Chrome, Safari, Opera */
-      -moz-user-select: none;     /* Firefox */
-      -ms-user-select: none;      /* Internet Explorer/Edge */
-      user-select: none;          /* Standard syntax */
-    }
+  -webkit-user-select: none;  
+  -moz-user-select: none;     
+  -ms-user-select: none;      
+  user-select: none;          
+}
 
 header nav a:hover {
   color: #fff;
@@ -80,29 +74,195 @@ a {
   margin-bottom: 3px;
 }
 
-.chat-area ul {
-    margin: 0px;
-    padding: 0px;
-li {
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #1a1a1a;
+}
+
+.chat-header {
+  padding: 10px 20px;
+  background-color: #0f0f0f;
+  border-bottom: 1px solid #333;
+}
+
+.chat-header h2 {
+  font-size: 1.2em;
+  color: #fff;
+}
+
+.message-list {
+  flex: 1;
+  height: 200px;
+  padding-bottom: 40px;
+  overflow-y: auto;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  height: 200px;
+  background: #1a1a1a;
+}
+
+.chat-messages .message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0;
+  padding: 5px;
+  border-radius: 8px;
+}
+
+.chat-messages .message .avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f05a28;
+  color: #fff;
+  font-size: 1em;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 15px;
+}
+
+.chat-messages .message .message-content {
+  flex: 1;
+}
+
+.chat-messages .message .message-content .author {
   font-weight: bold;
   color: #f05a28;
   margin-bottom: 3px;
-    list-style: none;
-      padding: 0;
-      margin: 0; 
-      font-size: 1.5em;
-    a {
-        text-decoration: none;
-    }
-  
-}
-}
-main {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
 }
 
+.chat-messages .message .message-content .text {
+  margin-bottom: 5px;
+  color: #e6e6e6;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.message-content {
+  width: 100%;
+  display: block;
+}
+
+.message-content img {
+  max-width: 100%; 
+}
+
+.chat-messages .message .message-content .time {
+  font-size: 0.8em;
+  color: #aaa;
+}
+
+.chat-input {
+  padding: 15px;
+  background-color: #121212;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #333;
+}
+
+input[type="text"], .chat-input textarea {
+  flex: 1;
+  background-color: #1a1a1a;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  resize: none;
+}
+
+.chat-input upload-button {
+  background-color: #f05a28;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  margin-left: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background-color 0.3s;
+}
+
+.chat-input button:hover {
+  background-color: #e04924;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.message {
+  .text {
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+
+  .avatar {
+    opacity: 0;
+  }
+
+  .author, .time {
+    display: none;
+  }
+}
+
+.message.switch-user {
+  .text img {
+    max-width: 90%;
+    border-radius: 20px;
+  }
+  
+  .avatar {
+    opacity: 1;
+  }
+
+  .author {
+    display: block;
+  }
+}
+
+.message:has(+ .message.switch-user), .message:last-child .time {
+  display: block;
+}
+
+/* The entire scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 3px;
+  border: 1px solid #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
+.chat-messages {
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+}
+
+a {
+    text-decoration:none
+}
 .sidebar {
   width: 250px;
   background-color: #121212;
@@ -136,231 +296,3 @@ main {
   color: #fff;
 }
 
-.chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: #1a1a1a;
-}
-
-.chat-header {
-  padding: 10px 20px;
-  background-color: #0f0f0f;
-  border-bottom: 1px solid #333;
-}
-
-.chat-header h2 {
-  font-size: 1.2em;
-  color: #fff;
-}
-message-list {
-  flex: 1;;
-   height: 200px;
-   padding-bottom: 40px;
-  overflow-y: auto;
-}
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-  height: 200px;
-  background: #1a1a1a;
-}
-
-.message-list-manager {
-  flex: 1;
-  overflow-y: auto;
-  background: #1a1a1a;
-}
-
-.chat-messages .message {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0px;
-  padding: 5px;
-  
-  border-radius: 8px;
- /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
-}
-
-.chat-messages .message .avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #f05a28;
-  color: #fff;
-  font-size: 1em;
-  font-weight: bold;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 15px;
-}
-.chat-messages .message .message-content {
-  flex: 1;
-}
-
-.chat-messages .message .message-content .author {
-  font-weight: bold;
-  color: #f05a28;
-  margin-bottom: 3px;
-}
-
-.chat-messages .message .message-content .text {
-  margin-bottom: 5px;
-  color: #e6e6e6;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  display: block;
-
-}
-.message-content {
-  width: 100%;
-    display:block;
-    p {
-        display: block;
-        width:100%;
-    }
-}
-.message-content img {
-   max-width: 100%; 
-}
-.chat-messages .message .message-content .time {
-  font-size: 0.8em;
-  color: #aaa;
-}
-
-.chat-input {
-  padding: 15px;
-  background-color: #121212;
-  display: flex;
-  align-items: center;
-  border-top: 1px solid #333;
-}
-
-input[type="text"] {
-  flex: 1;
-  background-color: #1a1a1a;
-  color: white;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  resize: none;
-}
-
-.chat-input textarea {
-  flex: 1;
-  background-color: #1a1a1a;
-  color: white;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  resize: none;
-}
-
-.chat-input upload-button {
-  background-color: #f05a28;
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  margin-left: 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 1em;
-  transition: background-color 0.3s;
-}
-
-.chat-input button:hover {
-  background-color: #e04924;
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    display: none;
-  }
-
-  .chat-area {
-    flex: 1;
-  }
-}
-
-.message {
-  .text {
-  max-width: 100%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-    img {
-      max-width: 90%;
-      border-radius: 20px;
-    }
-    {
-        padding: 0;
-        margin: 0;
-    }
-  }
-  .avatar {
-      opacity: 0;
-  }
-
-  .author {
-      display: none;
-  }
-
-  .time {
-      display: none;
-  }
-}
-.message.switch-user {
-  .text {
-  max-width: 100%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-    img{
-      max-width: 90%;
-      border-radius: 20px;
-    }
-  }
-  .avatar {
-      opacity: 1;
-  }
-  .author {
-      display: block;
-  }
-}
-
-.message:has(+ .message.switch-user), .message:last-child
- {
-    .time {
-        display: block;
-    }
-}
-
-/* The entire scrollbar */
-::-webkit-scrollbar {
-  width: 6px; /* Adjust this value for minimal width */
-}
-
-/* The track (background) of the scrollbar */
-::-webkit-scrollbar-track {
-  background: #f1f1f1; /* Change this to your desired track color */
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #888; /* Change this to your desired thumb color */
-  border-radius: 3px;     /* Rounded corners for a minimal look */
-  border: 1px solid #f1f1f1; /* Optional: creates a small padding effect */
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: #555;
-}
-
-/* Apply to the element that has the scrollbar */
-.chat-messages{
-  /* Makes the scrollbar thinner */
-  scrollbar-width: thin;
-  /* Sets the thumb and track colors (thumb first, track second) */
-  scrollbar-color: #888 #f1f1f1;
-}