From 750160909dc44984aab0d458f05c0fa647d54baf Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 2 Jan 2023 09:33:37 +0900
Subject: [PATCH] :art:
---
packages/frontend/src/ui/universal.vue | 33 +++++++-------------------
1 file changed, 8 insertions(+), 25 deletions(-)
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 7922ab0086..19be88c2b3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -285,8 +285,10 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
z-index: 1000;
bottom: 0;
left: 0;
- padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
- display: flex;
+ padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) 12px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ grid-gap: 8px;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: var(--blur, blur(32px));
@@ -296,26 +298,15 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
> .button {
position: relative;
- flex: 1;
padding: 0;
+ aspect-ratio: 1;
+ width: 100%;
+ max-width: 60px;
margin: auto;
- height: 64px;
- border-radius: 8px;
+ border-radius: 100%;
background: var(--panel);
color: var(--fg);
- &:not(:last-child) {
- margin-right: 12px;
- }
-
- @media (max-width: 400px) {
- height: 60px;
-
- &:not(:last-child) {
- margin-right: 8px;
- }
- }
-
&:hover {
background: var(--X2);
}
@@ -329,14 +320,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
animation: blink 1s infinite;
}
- &:first-child {
- margin-left: 0;
- }
-
- &:last-child {
- margin-right: 0;
- }
-
> * {
font-size: 20px;
}