From 673242ba11d7f1092e07c3882618767a0ae5eb4e Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Mon, 10 Oct 2022 19:01:27 +0200
Subject: [PATCH] css: adapt ReadySet to smartphone

---
 client/src/components/ReadySet.vue | 35 ++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 92b0373..25a3307 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -52,6 +52,11 @@ const textSize = computed((): string => {
       animation: fade-out 0.3s linear;
       animation-fill-mode: forwards;
     }
+
+    @media (max-width: $phone-max-width) {
+      width: 360px;
+      height: 360px;
+    }
   }
 
   &__box1 {
@@ -65,6 +70,14 @@ const textSize = computed((): string => {
     border: $animationbox-border;
     border-radius: 50px;
     z-index: 5;
+
+    @media (max-width: $phone-max-width) {
+      left: 54px;
+      top: 54px;
+      width: 240px;
+      height: 240px;
+      border-width: 6px;
+    }
   }
 
   &__box2 {
@@ -77,6 +90,14 @@ const textSize = computed((): string => {
     background-color: $animationbox-animation-color;
     animation: spin-rev 5s linear infinite;
     z-index: 4;
+
+    @media (max-width: $phone-max-width) {
+      left: 50px;
+      top: 50px;
+      width: 260px;
+      height: 260px;
+      border-radius: 100px;
+    }
   }
 
   &__box3 {
@@ -89,6 +110,14 @@ const textSize = computed((): string => {
     background-color: $animationbox-animation-color;
     z-index: 3;
     animation: spin 6s linear infinite;
+
+    @media (max-width: $phone-max-width) {
+      left: 50px;
+      top: 50px;
+      width: 260px;
+      height: 260px;
+      border-radius: 100px;
+    }
   }
 
   &__text {
@@ -117,6 +146,12 @@ const textSize = computed((): string => {
     &__popup {
       animation: pop 0.5s ease-in-out;
     }
+
+    @media (max-width: $phone-max-width) {
+      width: 360px;
+      height: 360px;
+      line-height: 360px;
+    }
   }
 }