Changeset 0c6b92a for imaps-frontend/src/pages/Draw/Draw.module.css

Timestamp:

12/12/24 17:06:06 (5 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

d565449

Message:

Pred finalna verzija

File:

• imaps-frontend/src/pages/Draw/Draw.module.css (modified) (10 diffs)

imaps-frontend/src/pages/Draw/Draw.module.css

@@ -4 +4 @@
   padding: 0;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   background-color: #141414;
 }
 
+.topPanelH {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
 .logo {
-  width: 100px;
-  margin: 10px;
-  align-self: center;
+  width: 80px;
 }
 
 .title {
-  margin-top: 20px;
-  color: #804047;
-  font-size: 120%;
+  text-align: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #333333;
+  font-family: "Oswald", sans-serif;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.titleLink {
+  text-decoration: none;
+}
+.titleLink:hover{
+  text-decoration: none;
 }
 
@@ -23 +41 @@
   color: #cccccc;
 }
+
 .guideWrapper {
   display: flex;
@@ -28 +47 @@
   align-items: center;
   margin: 0;
+  width: 100%;
 }
 
@@ -51 +71 @@
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center elements horizontally */
   padding: 20px;
   background-color: #1c1c1c;
@@ -58 +79 @@
   margin-right: 10px;
   border-radius: 20px;
+  overflow-x: hidden;
 }
 
 .buttonContainer {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-top: 2rem;
   gap: 10px;
-}
-
-/* .hide {
-  visibility: hidden;
-} */
+  width: 100%;
+}
 
 .renderButton {
@@ -104 +123 @@
   list-style: none;
   padding: 0;
-  margin: 0 0;
-  display: flex;
-  flex-direction: column;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 15px;
+  justify-items: center;
   align-items: center;
 }
@@ -127 +147 @@
 }
 
-.templateCont {
-  display: flex;
-  flex-direction: column;
-}
-
 .shapeOption:hover {
   background-color: #94183b;
@@ -137 +152 @@
 }
 
+.templateCont {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center section horizontally */
+  width: 100%;
+}
+
 .fpscounter {
   border: 1px solid #00b822;
   margin: 20px 0;
+  text-align: center;
+  width: 100%;
 }
 
@@ -145 +169 @@
   color: #00740c;
   font-weight: bold;
-  text-align: center;
   margin: 0;
   padding: 5px 0;
 }
 
-.floorSelector {
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: #ffffff;
-}
-
-.floorSelector label {
-  font-size: 14px;
-}
-
-.floorDropdown {
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #3a3a3a;
-  color: #ffffff;
-  cursor: pointer;
-  width: 100%;
-  transition: border-color 0.3s;
-}
-
-.floorDropdown:focus {
-  outline: none;
-  border-color: #1e90ff;
-}
 
 .popup {
@@ -226 +221 @@
   background-image: url("./shapeImages/room_icon.png");
 }
+.stairs {
+  background-image: url("./shapeImages/stairs_icon.png");
+}
+.floorSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  width: 100%;
+}
+
+.floorLabel {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.floorList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+}
+
+.floorItems {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.addFloorButton {
+  background-color: #e67e22;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.addFloorButton:hover {
+  background-color: #d2691e;
+  transform: scale(1.1);
+}
+
+.addFloorButton:active {
+  background-color: #b35418;
+  transform: scale(0.95);
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  filter: invert(1);
+}
+
+.floorButton {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.floorButton:hover {
+  background-color: #4a4a4a;
+}
+
+.floorButton.active {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.floorInput {
+  width: 60%;
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #3a3a3a;
+  color: #ffffff;
+  text-align: center;
+  transition: border-color 0.3s;
+}
+
+.floorInput:focus {
+  outline: none;
+  border-color: #1e90ff;
+}
+
+.floorActions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.errorMessage {
+  color: red;
+  font-size: 12px;
+  margin-top: 10px;
+  text-align: center;
+}
+.floorItemWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.floorItem {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  flex-grow: 1;
+  transition: background-color 0.3s;
+}
+
+.floorItem:hover {
+  background-color: #4a4a4a;
+}
+
+.activeFloor {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.deleteFloorButton {
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.deleteFloorButton:hover {
+  background-color: #e60000;
+  transform: scale(1.1);
+}
+
+.deleteFloorButton:active {
+  background-color: #cc0000;
+  transform: scale(0.95);
+}