source: imaps-frontend/src/pages/Draw/Draw.module.css@ 0c6b92a

main
Last change on this file since 0c6b92a was 0c6b92a, checked in by stefan toskovski <stefantoska84@…>, 5 weeks ago

Pred finalna verzija
  • Property mode set to 100644
File size: 6.5 KB
RevLine 
[d565449]1html,
2body {
3 margin: 0;
4 padding: 0;
5 height: 100%;
[0c6b92a]6 overflow-x: hidden;
[d565449]7 background-color: #141414;
8}
9
[0c6b92a]10.topPanelH {
11 width: 100%;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 margin-bottom: 20px;
16}
17
[d565449]18.logo {
[0c6b92a]19 width: 80px;
[d565449]20}
21
22.title {
[0c6b92a]23 text-align: center;
24 font-size: 2.5em;
25 font-weight: 700;
26 text-transform: uppercase;
27 color: #333333;
28 font-family: "Oswald", sans-serif;
29 margin-bottom: 0;
30 text-decoration: none;
31}
32
33.titleLink {
34 text-decoration: none;
35}
36.titleLink:hover{
37 text-decoration: none;
[d565449]38}
39
40.paragraph {
41 color: #cccccc;
42}
[0c6b92a]43
[d565449]44.guideWrapper {
45 display: flex;
46 justify-content: center;
47 align-items: center;
48 margin: 0;
[0c6b92a]49 width: 100%;
[d565449]50}
51
52.wrapper {
53 display: flex;
54 height: 100vh;
55 background-color: #141414;
56 overflow: hidden;
57}
58
59.cont {
60 flex-grow: 1;
61 width: 85vw;
62 height: 90vh;
63 background-color: #161616;
64 border: 1px solid gray;
65 margin: 50px;
66}
67
68.panel {
69 width: 10vw;
70 height: 100vh;
71 display: flex;
72 flex-direction: column;
[0c6b92a]73 align-items: center; /* Center elements horizontally */
[d565449]74 padding: 20px;
75 background-color: #1c1c1c;
76 color: #ffffff;
77 overflow-y: auto;
78 box-sizing: border-box;
79 margin-right: 10px;
80 border-radius: 20px;
[0c6b92a]81 overflow-x: hidden;
[d565449]82}
83
84.buttonContainer {
85 display: flex;
[0c6b92a]86 justify-content: center;
[d565449]87 align-items: center;
88 margin-top: 2rem;
89 gap: 10px;
[0c6b92a]90 width: 100%;
[d565449]91}
92
93.renderButton {
94 width: 100%;
95 height: 50px;
96 background-color: #e67e22;
97 color: #ffffff;
98 border: none;
99 border-radius: 8px;
100 font-size: 20px;
101 font-weight: bold;
102 cursor: pointer;
103 display: flex;
104 justify-content: center;
105 align-items: center;
106 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
107 transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
108}
109
110.renderButton:hover {
111 background-color: #d2691e;
112 transform: scale(1.05);
113 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
114}
115
116.renderButton:active {
117 background-color: #b35418;
118 transform: scale(0.98);
119 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
120}
121
122.shapeOptions {
123 list-style: none;
124 padding: 0;
[0c6b92a]125 margin: 0;
126 display: grid;
127 grid-template-columns: repeat(2, 1fr);
[d565449]128 gap: 15px;
[0c6b92a]129 justify-items: center;
[d565449]130 align-items: center;
131}
132
133.shapeOption {
134 width: 4vw;
135 height: 4vw;
136 border: 2px solid #804047;
137 border-radius: 5px;
138 background-color: #362929;
139 color: white;
140 font-size: 12px;
141 font-weight: bold;
142 background-size: contain;
143 background-repeat: no-repeat;
144 background-position: center;
145 cursor: pointer;
146 transition: background-color 0.3s, border-color 0.3s;
147}
148
149.shapeOption:hover {
150 background-color: #94183b;
151 border-color: #94183b;
152}
153
[0c6b92a]154.templateCont {
155 display: flex;
156 flex-direction: column;
157 align-items: center; /* Center section horizontally */
158 width: 100%;
159}
160
[d565449]161.fpscounter {
162 border: 1px solid #00b822;
163 margin: 20px 0;
[0c6b92a]164 text-align: center;
165 width: 100%;
[d565449]166}
167
168.fpscounter p {
169 color: #00740c;
170 font-weight: bold;
171 margin: 0;
172 padding: 5px 0;
173}
174
175
176.popup {
177 position: fixed;
178 top: 40%;
179 left: 50%;
180 transform: translate(-50%, -50%);
181 background-color: rgba(73, 73, 73, 0.8);
182 color: white;
183 padding: 20px;
184 border-radius: 8px;
185 z-index: 1000;
186 width: 300px;
187 text-align: center;
188 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
189 opacity: 0;
190 animation: fadeInOut 3s ease-in-out forwards;
191}
192
193@keyframes fadeInOut {
194 0%,
195 100% {
196 opacity: 0;
197 transform: translate(-50%, -40%);
198 }
199 10%,
200 90% {
201 opacity: 1;
202 transform: translate(-50%, -50%);
203 }
204}
205
206.popupContent {
207 display: flex;
208 flex-direction: column;
209 gap: 10px;
210}
211
212.entrance {
213 background-image: url("./shapeImages/entrance_icon.png");
214}
215
216.wall {
217 background-image: url("./shapeImages/wall_icon.png");
218}
219
220.room {
221 background-image: url("./shapeImages/room_icon.png");
222}
[0c6b92a]223.stairs {
224 background-image: url("./shapeImages/stairs_icon.png");
225}
226.floorSection {
227 display: flex;
228 flex-direction: column;
229 align-items: center;
230 gap: 20px;
231 background-color: #2d2d2d;
232 padding: 20px;
233 border-radius: 8px;
234 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
235 width: 100%;
236}
237
238.floorLabel {
239 font-size: 16px;
240 font-weight: bold;
241 color: #ffffff;
242 margin-bottom: 10px;
243 text-align: center;
244}
245
246.floorList {
247 display: flex;
248 flex-direction: column;
249 align-items: center;
250 gap: 15px;
251 width: 100%;
252}
253
254.floorItems {
255 display: flex;
256 flex-direction: column;
257 align-items: center;
258 gap: 10px;
259 width: 100%;
260}
261
262.addFloorButton {
263 background-color: #e67e22;
264 border: none;
265 border-radius: 50%;
266 width: 40px;
267 height: 40px;
268 display: flex;
269 justify-content: center;
270 align-items: center;
271 cursor: pointer;
272 transition: background-color 0.3s, transform 0.2s;
273}
274
275.addFloorButton:hover {
276 background-color: #d2691e;
277 transform: scale(1.1);
278}
279
280.addFloorButton:active {
281 background-color: #b35418;
282 transform: scale(0.95);
283}
284
285.icon {
286 width: 20px;
287 height: 20px;
288 filter: invert(1);
289}
290
291.floorButton {
292 padding: 10px 15px;
293 font-size: 14px;
294 color: #ffffff;
295 background-color: #3a3a3a;
296 border: 1px solid #555555;
297 border-radius: 8px;
298 width: 100%;
299 text-align: center;
300 cursor: pointer;
301 transition: background-color 0.3s, transform 0.2s;
302}
303
304.floorButton:hover {
305 background-color: #4a4a4a;
306}
307
308.floorButton.active {
309 background-color: #1e90ff;
310 color: #ffffff;
311 font-weight: bold;
312}
313
314.floorInput {
315 width: 60%;
316 padding: 8px;
317 font-size: 14px;
318 border: 1px solid #ccc;
319 border-radius: 5px;
320 background-color: #3a3a3a;
321 color: #ffffff;
322 text-align: center;
323 transition: border-color 0.3s;
324}
325
326.floorInput:focus {
327 outline: none;
328 border-color: #1e90ff;
329}
330
331.floorActions {
332 display: flex;
333 gap: 10px;
334 justify-content: center;
335 align-items: center;
336 margin-top: 10px;
337}
338
339.errorMessage {
340 color: red;
341 font-size: 12px;
342 margin-top: 10px;
343 text-align: center;
344}
345.floorItemWrapper {
346 display: flex;
347 align-items: center;
348 gap: 10px;
349 width: 100%;
350}
351
352.floorItem {
353 padding: 10px 15px;
354 font-size: 14px;
355 color: #ffffff;
356 background-color: #3a3a3a;
357 border: 1px solid #555555;
358 border-radius: 8px;
359 text-align: center;
360 cursor: pointer;
361 flex-grow: 1;
362 transition: background-color 0.3s;
363}
364
365.floorItem:hover {
366 background-color: #4a4a4a;
367}
368
369.activeFloor {
370 background-color: #1e90ff;
371 color: #ffffff;
372 font-weight: bold;
373}
374
375.deleteFloorButton {
376 background-color: #ff4d4d;
377 border: none;
378 border-radius: 8px;
379 padding: 10px;
380 color: white;
381 cursor: pointer;
382 transition: background-color 0.3s, transform 0.2s;
383}
384
385.deleteFloorButton:hover {
386 background-color: #e60000;
387 transform: scale(1.1);
388}
389
390.deleteFloorButton:active {
391 background-color: #cc0000;
392 transform: scale(0.95);
393}
Note: See TracBrowser for help on using the repository browser.