feat: Optimize timeline post option mask.

4 files changed, 34 insertions, 23 deletions

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 17c3c779..fb90bd59 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,7 +1,11 @@
+:root {

+  --cru-card-border-radius: 8px;

+}

+

 .cru-card {

   border: 1px solid;

   border-color: #e9ecef;

-  border-radius: 8px;

+  border-radius: var(--cru-card-border-radius);

   background: #fefeff;

   transition: all 0.3s;

 }

diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
index a303b227..0c7deaa2 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
@@ -1,3 +1,24 @@
+.timeline-item.timeline-post-edit {

+  padding-bottom: 0;

+}

+

+.timeline-post-edit .timeline-item-card {

+  border-bottom-left-radius: 0;

+  border-bottom-right-radius: 0;

+  border-bottom: none;

+}

+

+.timeline-post-edit {

+  position: sticky;

+  bottom: 0;

+  z-index: 1;

+}

+

+.timeline-post-edit-image {

+  max-width: 100px;

+  max-height: 100px;

+}

+

 .timeline-markdown-post-edit-page {

   overflow: scroll;

   max-height: 300px;

diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 6d0d1f2e..7b16e898 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -92,7 +92,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
-            className="timeline-post-item-options-mask d-flex justify-content-around align-items-center"
+            className="timeline-post-item-options-mask"
             onClick={() => {
               setOperationMaskVisible(false);
             }}
diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css
index cca1ccd8..e38d0ba7 100644
--- a/FrontEnd/src/views/timeline-common/index.css
+++ b/FrontEnd/src/views/timeline-common/index.css
@@ -149,10 +149,6 @@
   padding: 0.5em;
 }
 
-.timeline-item.timeline-post-edit {
-  padding-bottom: 0;
-}
-
 .timeline-item-card {
   position: relative;
   padding: 0.3em 0.5em 1em 4em;
@@ -163,17 +159,6 @@
   opacity: 0;
 }
 
-.timeline-post-edit .timeline-item-card {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.timeline-post-edit {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}
-
 @media (max-width: 575.98px) {
   .timeline-item-card {
     padding-left: 3em;
@@ -220,19 +205,20 @@
   font-size: 0.8em;
 }
 
-.timeline-post-edit-image {
-  max-width: 100px;
-  max-height: 100px;
-}
-
 .timeline-post-item-options-mask {
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.85);
   z-index: 100;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  border-radius: var(--cru-card-border-radius);
 }
 
 .timeline-sync-state-badge {