settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: adapt ReadySet to smartphone

Browse Source
This commit is contained in:
Settel 2022-10-10 19:01:27 +02:00
parent ce31b88acf
commit 673242ba11
1 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/ReadySet.vue
View File

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