diff --git a/anwendung/src/components/PopUp.jsx b/anwendung/src/components/PopUp.jsx index a307a20..04fb1b7 100644 --- a/anwendung/src/components/PopUp.jsx +++ b/anwendung/src/components/PopUp.jsx @@ -13,11 +13,11 @@ export default function PopUp(p) { }}>
-
+

{p.hint}

-
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css index 004e0eb..e12320e 100644 --- a/anwendung/src/styles/globals.css +++ b/anwendung/src/styles/globals.css @@ -56,6 +56,11 @@ body { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } +.box-shadow-heavy +{ + box-shadow: 0 0 10px rgba(0, 0, 0,1); +} + /* Button */ @@ -188,23 +193,42 @@ Popup flex-direction: row; justify-content: center; align-items: center; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.5); } .modal { + height: 180px; width: 300px; - height: 100px; border-radius: 10px; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: space-between; - padding: 5px; + padding: 20px; + animation-name: modalgrow; + animation-duration: 0.2s; + animation-play-state: running; +} + +@keyframes modalgrow { + from + { + height: 90px; + width: 150px; + } + to + { + height: 180px; + width: 300px; + } } .modal p { text-align: center; + pointer-events: none; + font-weight: bold; + font-size: 20px; } .modal div { @@ -406,6 +430,7 @@ Login height: 350px; } + .input-bordered { border: none; border-radius: 5px;