Changeset 43c9090 for src/main/resources/static/css/index.css

Timestamp:

10/12/24 21:32:15 (5 weeks ago)

Author:

macagaso <gasoskamarija@…>

Branches:

master

Parents:

743de55

Message:

Updated version

File:

• src/main/resources/static/css/index.css (modified) (12 diffs)

src/main/resources/static/css/index.css

@@ -66 +66 @@
 
 .dropdown-content {
-    display: none; /* Hide dropdown by default */
-    position: absolute; /* Position relative to the list item */
+    display: none;
+    position: absolute;
     left: 0;
-    top: 100%; /* Position below the list item */
-    background-color: white; /* Background color of the dropdown */
-    border: 1px solid #ddd; /* Border of the dropdown */
-    padding: 10px; /* Padding inside the dropdown */
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional shadow for dropdown */
-    width: 100%; /* Full width of the list item */
+    top: 100%;
+    background-color: white;
+    border: 1px solid #ddd;
+    padding: 10px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    width: 100%;
 }
 .icon-search{
@@ -98 +98 @@
     justify-content: center;
     height: 350px;
-    /*background-color: #F3F0E7;*/
     background-color: #F7F7F5;
 }
@@ -108 +107 @@
 .items-register{
     font-family: "Kumbh Sans", sans-serif;
+    position: absolute;
+    left: 900px;
 }
 .items-register p{
@@ -117 +118 @@
 }
 
-.items-register{
-    display:flex;
+.form-imp{
+    display: flex;
     flex-direction: column;
     align-items: center;
-    /*background-color: #F3F0E7;*/
-}
-
-.form-imp{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     width: auto;
     padding: 10px;
 }
 input , button {
-    border-radius: 5px; /* Adjust the value to make the corners more or less rounded */
-    padding: 7px; /* Optional: adds padding inside the input */
-    border: 1px solid #9D9D9D; /* Optional: adds a border around the input */
+    border-radius: 5px;
+    padding: 7px;
+    border: 1px solid #9D9D9D;
 }
 button{
@@ -140 +134 @@
     color:white;
 }
+#personalised{
+    font-size: xx-large;
+    font-family: "Caveat", cursive;
+}
 .white-part{
+    display: flex;
+    flex-direction: column;
     background-color: white;
     width: 415px;
     border-radius: 5px;
-    padding: 7px;
+    padding: 20px;
+}
+a {
+    text-decoration: none;
+}
+.logged-in{
+    padding: 20px;
+    font-family: "Kumbh Sans", sans-serif;
 }
 .split-title{
@@ -179 +186 @@
     align-items: center;
     background-color: #F7F7F5;
-    /*background-color: #F3F0E7;*/
 }
 .part2 > div{
@@ -187 +193 @@
 }
 .part2 > div:first-child {
-    justify-content: flex-end; /* Align the content to the right */
+    justify-content: flex-end;
 }
 
@@ -217 +223 @@
     background-color: transparent;
     color: darkgreen;
-    border: 2px solid darkgreen; /* Set the border color and make it bold */
-    border-radius: 12px; /* Make the borders rounded */
-    font-weight: bold; /* Make the text bold */
-    padding: 10px 20px; /* Add some padding for better appearance */
-    cursor: pointer; /* Change the cursor to a pointer when hovered */
-    font-family: "Kumbh Sans", sans-serif; /* Match the font family */
-    font-size: 16px; /* Adjust font size as needed */
+    border: 2px solid darkgreen;
+    border-radius: 12px;
+    font-weight: bold;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-family: "Kumbh Sans", sans-serif;
+    font-size: 16px;
 }
 
@@ -248 +254 @@
 }
 .icons li img:hover {
-    background-color: white; /* Change background color on hover */
-    border-color: darkslategrey; /* Change border color on hover */
+    background-color: white;
+    border-color: darkslategrey;
 }
 .footer-left p img{
@@ -272 +278 @@
 }
 
-
-/*login*/
-
 .popup {
-    display: none; /* Hide the form */
-    position: fixed; /* Position it relative to the viewport */
-    z-index: 2; /* Ensure it appears above other content */
+    display: none;
+    position: fixed;
+    z-index: 2;
     left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%); /* Center it horizontally and vertically */
-    width: 500px; /* Set a fixed width for the form */
-    padding: 25px; /* Add some padding */
-    background-color: white; /* Background color of the form */
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Add a shadow for better visibility */
-    border-radius: 10px; /* Slightly round the corners */
-}
-
-/* Style the close button */
+    transform: translate(-50%, -50%);
+    width: 500px;
+    height: auto;
+    padding: 25px;
+    background-color: white;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    font-family: "Kumbh Sans", sans-serif;
+}
+
 .popup .close-btn {
     position: absolute;
@@ -297 +301 @@
     cursor: pointer;
 }
-
-/* Add some basic styling for the form content */
+#submit-btn{
+    width: 120px;
+    background-color: #10B981;
+}
+#loginForm > div > h2{
+    text-align: center;
+}
+
 .popup-content {
-    display: flex; /* Use flexbox for layout */
-    flex-direction: column; /* Stack children vertically */
-    align-items: stretch; /* Ensure all elements take the full width */
-    text-align: center; /* Center the content */
+    padding: 20px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 }
 
 .popup-content h2 {
-    margin-bottom: 20px; /* Add some space below the title */
+    margin-bottom: 20px;
 }
 
 .popup-content label {
-    display: block; /* Make the labels block elements */
-    margin-bottom: 10px; /* Add some space below the labels */
-    text-align: left; /* Align the text to the left */
+    display: block;
+    margin-bottom: 10px;
+    text-align: left;
 }
 
 .popup-content input {
-    width: 100%; /* Make the inputs take up the full width */
-    padding: 8px; /* Add some padding inside the inputs */
-    margin-bottom: 20px; /* Add space below the inputs */
-    border: 1px solid #ccc; /* Light border around inputs */
-    border-radius: 5px; /* Slightly round the input corners */
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
 }
 
 .popup-content button {
-    padding: 10px 20px; /* Add padding to the button */
-    background-color: #007BFF; /* Button background color */
-    color: white; /* Button text color */
-    border: none; /* Remove the default border */
-    border-radius: 5px; /* Round the button corners */
-    cursor: pointer; /* Add a pointer cursor on hover */
+    padding: 10px 20px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
 }
 
 .popup-content button:hover {
-    background-color: #0056b3; /* Darken the button on hover */
+    background-color: #0056b3;
 }
 body.no-scroll {
@@ -340 +351 @@
 }
 .dataForms{
-    display: flex; /* Use flexbox for layout */
-    flex-direction: column; /* Stack children vertically */
-    align-items: stretch; /* Ensure all elements take the full width */
-    text-align: center; /* Center the content */
-}
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+
+}
+#links{
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    color: darkgreen;
+}
+.logged-in{
+    position: absolute;
+    left: 900px;
+    padding: 30px;
+}
+a img{
+    transform: rotate(-90deg);
+    height: 20px;
+    margin-right: 10px;
+}
+#signInForm{
+    height: 500px;
+    width: 700px;
+}
+#signInForm > div > form{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 10px;
+}
+#authButton{
+    position: absolute;
+    left: 1145px;
+    top: 21px;
+    width: 150px;
+    color: white;
+    background-color: red;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+}
+
+#create{
+    width: 200px;
+    padding: 15px;
+    background-color: #10B981;
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 20px;
+}