working on replies

static/main.css

@@ -4,7 +4,7 @@
 
 :root {
     --main-bg-color: white;
-    --border-color: rgb(132, 136, 138);
+    --main-hover-color: rgb(64, 64, 64) --border-color: rgb(132, 136, 138);
     --edge-color: rgb(60, 60, 60);
     --main-fg-color: black;
     --highlight-fg-color: rgb(255, 255, 255);
@@ -14,6 +14,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --main-bg-color: black;
+        --main-hover-color: rgb(64, 64, 64);
         --border-color: rgb(132, 136, 138);
         --edge-color: rgb(60, 60, 60);
         --main-fg-color: rgb(202, 208, 211);
@@ -22,6 +23,10 @@
     }
 }
 
+/* html, body {
+    overscroll-behavior-y: none; 
+} */
+
 body {
     font-family: sans-serif;
     color: var(--main-fg-color);
@@ -52,14 +57,21 @@ hr {
     font-family: sans-serif;
     background-color: var(--main-bg-color);
     color: var(--main-fg-color);
-    width: 100%;
     box-sizing: border-box;
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
     padding-top: 10px;
     border: 1px solid var(--border-color);
     resize: vertical;
     border-radius: 40px;
+
+    width: 98%;
+    margin: 1%;
+    height: 270px;
+
+    resize: vertical; 
+
+    max-height: 60vh;
 }
 
 .flex-container {
@@ -72,17 +84,35 @@ hr {
 
 .content {
     max-width: 600px;
-    /* Your preferred max width for the content */
     flex: 1;
-    /* Shorthand for flex-grow, flex-shrink and flex-basis */
+    box-sizing: border-box;
     min-width: 300px;
-    /* Minimum width the content can shrink to */
     padding: 20px;
     box-shadow: 0 0 5px var(--edge-color);
     text-align: left;
     overflow-x: hidden;
-    /* Hide horizontal overflow inside the flex container */
     line-height: 1.3;
+    z-index: 0;
+}
+
+.compose-dimmer-normal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 30;
+    background-color: black;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+}
+
+.compose-dimmer-dimmed {
+    background-color: black;
+    opacity: 0.7;
+    visibility: visible;
 }
 
 .embed {
@@ -104,16 +134,43 @@ hr {
     width: 100%;
 }
 
-.right {
-    text-align: right;
+/* .compose-footer {
+    display: flex;
+    justify-content: space-between; 
+    align-items: center; 
+    width: 100%;
+    margin-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box; 
+} */
+
+.compose-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    flex-shrink: 0;
+    margin-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box; 
 }
 
-#buttons {
-    margin-left: 40px;
+.compose-left-buttons,
+.compose-right-buttons {
+    display: flex;
+    gap: 10px; /* Puts exactly 10px of space between buttons in the same group */
+    align-items: center;
 }
 
-#button_post {
-    margin-right: 40px;
+.link {
+    user-select: none;
+    display:inline-block;
+}
+.link:hover {
+    cursor: pointer;
+    color: var(--border-color);
 }
 
 a {
@@ -160,6 +217,7 @@ a {
 
 button,
 .button {
+    user-select: none;
     font-size: 12px;
     background-color: var(--main-bg-color);
     border-radius: 10px;
@@ -175,6 +233,15 @@ button,
     cursor: pointer;
 }
 
+button:hover,
+.button:hover {
+    background-color: var(--main-hover-color);
+}
+
+#deleteButton {
+    float: right;
+}
+
 .button-big {
     font-size: large;
 }
@@ -202,8 +269,39 @@ iframe {
     height: 300px;
 }
 
+/* #compose {
+    display: none;
+    position: fixed;
+    z-index: 100;
+} */
+
 #compose {
     display: none;
+    position: fixed;
+    top: 5%;
+    left: 50%;
+    width: 88%;
+    transform: translateX(-50%);
+
+    max-height: 85vh;
+    max-width: 600px;
+    overflow-y: auto; 
+
+    background-color: var(--main-bg-color);
+    z-index: 100;
+
+    padding: 5px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+
+#compose-reply-area {
+    display:none;
+}
+
+.show {
+    display:block;
 }
 
 .username {
@@ -260,6 +358,7 @@ iframe {
 }
 
 .burger-menu {
+    user-select: none;
     text-align: center;
     width: 46px;
     border-radius: 10px;
@@ -269,7 +368,7 @@ iframe {
     top: 0px;
     font-size: 24px;
     cursor: pointer;
-    z-index: 1000;
+    z-index: 20;
     background: none;
     border: none;
     color: var(--main-fg-color);
@@ -280,14 +379,14 @@ iframe {
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 900;
 }
 
 @media (max-width: 700px) {
     .nav-container {
         display: none;
         /* transform: translateX(-100%); */
-        /* z-index: 1000; */
+        z-index:10;
+        user-select: none;
     }
 
     .nav-container.active {
@@ -328,7 +427,7 @@ iframe {
 
 .small {
     width: 24px;
-    height: 24px; 
+    height: 24px;
 }
 
 .profile-pic-container img {
@@ -343,6 +442,7 @@ iframe {
 }
 
 .compose-button {
+    user-select: none;
     font-size: 42px;
     position: fixed;
     bottom: 24px;
@@ -366,11 +466,11 @@ iframe {
     align-content: center;
     padding-left: 55px;
     font-size: 12px;
-    height:12px;
+    height: 12px;
 }
 
 .spinner {
-    display: inline-block; 
+    display: inline-block;
     animation-name: spin;
     animation-duration: 2000ms;
     animation-iteration-count: infinite;
@@ -378,6 +478,10 @@ iframe {
     /* font-size: 64px; */
 }
 
+.no-scroll {
+    overflow: hidden;
+}
+
 @keyframes spin {
     from {
         transform: rotate(0deg);
@@ -391,6 +495,6 @@ iframe {
 @media (prefers-reduced-motion: reduce) {
     .spinner {
         animation: none;
-        transform: none; 
+        transform: none;
     }
 }