Update default-styles.css

PhotoVoyage · Mar 22, 2024 · 908ed1c · 908ed1c
1 parent 1b63935
commit 908ed1c
Showing 1 changed file with 105 additions and 31 deletions.
diff --git a/default-styles.css b/default-styles.css
@@ -1,4 +1,3 @@
-
 body {
     font-family: Arial, sans-serif; /* Set default font */
     margin: 0; /* Remove default margin */
@@ -31,6 +30,18 @@ h1 {
     cursor: pointer; /* Change cursor to pointer */
 }
 
+.dropdown-header {
+    padding: 10px 20px; /* Add padding */
+    font-weight: bold; /* Set font weight */
+    color: #333; /* Set text color */
+    text-transform: uppercase; /* Transform text to uppercase */
+}
+
+.dropdown-divider {
+    border-bottom: 1px solid #ccc; /* Add border bottom */
+    margin: 5px 0; /* Add margin */
+}
+
 /* Dropdown menu styles */
 .dropdown-content {
     display: none; /* Hide the dropdown content by default */
@@ -76,17 +87,28 @@ h1 {
 /* Show dropdown content when menu toggle is active */
 .menu-toggle.active .dropdown-content {
     display: block; /* Display the dropdown content */
-    animation: fadeIn 0.3s ease forwards;
+    opacity: 0; /* Start with opacity 0 */
+    transform: translateY(-20px) scale(0.9); /* Start with translateY -20px and slightly smaller */
+    animation: fadeInSlideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
-@keyframes fadeIn {
+@keyframes fadeInSlideDown {
     from {
         opacity: 0;
-        transform: translateY(-5px);
+        transform: translateY(-20px) scale(0.9);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0.95);
+    }
+    to {
+        transform: scale(1);
     }
 }
 
@@ -161,45 +183,99 @@ h1 {
 
 /* Modal styles */
 .modal {
-    display: none; /* Hide the modal by default */
-    position: fixed; /* Position the modal */
-    z-index: 1; /* Set stacking order */
-    padding-top: 50px; /* Add padding at the top */
+    display: none; /* Hide the modal window by default */
+    position: fixed; /* Fixed position to keep it in place */
+    z-index: 1; /* Place modal window on top of other content */
     left: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto; /* Allow scrolling */
-    background-color: rgb(0,0,0); /* Set background color */
-    background-color: rgba(0,0,0,0.9); /* Set background color with opacity */
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Allow vertical scrolling if needed */
+    background-color: rgb(0,0,0); /* Black background color */
+    background-color: rgba(0,0,0,0.9); /* Black background color with transparency */
+    transition: opacity 0.3s; /* Add a smooth transition */
 }
 
 /* Modal content styles */
 .modal-content {
-    margin: auto; /* Center the content */
-    display: block; /* Display as block element */
-    width: 80%; /* Set width */
-    max-width: 700px; /* Set maximum width */
-    max-height: 80%; /* Set maximum height */
+    margin: auto; /* Center the content vertically and horizontally */
+    display: block;
+    max-width: 90%; /* Maximum width of the content */
+    max-height: 90%; /* Maximum height of the content */
+    animation: fadeInBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+/* Animation to show preview */
+@keyframes fadeInBounce {
+    0% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    70% {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Image inside the modal */
+.modal-img {
+    width: 100%; /* Set the image width to 100% of the container */
+    height: auto; /* Auto height to maintain aspect ratio */
+    display: block;
+    margin: auto; /* Center the image */
+    max-width: 100%; /* Maximum width of the image */
+    max-height: 100%; /* Maximum height of the image */
 }
 
 /* Close button styles */
 .close {
-    position: absolute; /* Position the close button */
-    top: 15px; /* Set top position */
-    right: 35px; /* Set right position */
-    color: #fff; /* Set text color */
-    font-size: 40px; /* Set font size */
-    font-weight: bold; /* Set font weight */
-    transition: 0.3s; /* Add transition effect */
-    cursor: pointer; /* Change cursor to pointer */
+    position: absolute; /* Absolute position */
+    top: 15px; /* Distance from the top */
+    right: 35px; /* Distance from the right */
+    font-size: 30px; /* Font size */
+    font-weight: bold; /* Font weight */
+    color: #f1f1f1; /* Text color */
+    transition: 0.3s; /* Smooth transition */
 }
 
 /* Hover effect for close button */
 .close:hover,
 .close:focus {
-    color: #bbb; /* Change text color on hover */
-    text-decoration: none; /* Remove underline on hover */
+    color: #bbb; /* Change text color on hover or focus */
+    text-decoration: none; /* Remove underline */
+    cursor: pointer; /* Change cursor on hover */
+}
+
+/* Styles for zoom controls */
+.zoom-controls {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+}
+
+.zoom-controls button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 5px;
+}
+
+/* Styles for the display of the current image */
+.current-image {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    color: white;
+    font-size: 14px;
+    z-index: 2;
 }
 
 /* Custom CSS */
@@ -209,9 +285,7 @@ h1 {
     cursor: pointer; /* Change cursor to pointer */
     max-width: 350px; /* Set maximum width */
     max-height: 300px; /* Set height */
-    background-color: #ffffff; /* Set background color */
     border-radius: 10px; /* Add border radius */
-    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Add shadow */
     transition: transform 0.3s ease; /* Add transform transition */
     text-align: center;
 }