+ h1 {
+ margin: 0 0 14px;
+ padding: 10px 2px 9px;
border-bottom: 1px solid var(--line);
+ color: var(--accent);
+ font-size: 40px;
+ font-weight: 780;
+ line-height: 1;
+ letter-spacing: -1.4px;
}
-.calendar__month-navigation {
- height: 38px;
+.calendar__overview-months {
display: grid;
- grid-template-columns: 30px 1fr 30px;
- align-items: center;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 24px 11px;
}
-.calendar__month-navigation button {
+.calendar__overview-month {
+ min-width: 0;
+}
+
+.calendar__overview-month h2 {
+ margin: 0 0 7px;
+ overflow: hidden;
+ color: var(--label);
+ font-size: 16px;
+ font-weight: 680;
+ line-height: 1.1;
+ text-overflow: ellipsis;
+ text-transform: capitalize;
+ white-space: nowrap;
+}
+
+.calendar__overview-month h2.current {
+ color: var(--accent);
+}
+
+.calendar__overview-month > div {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.calendar__overview-month button,
+.calendar__overview-month > div > span {
+ min-width: 0;
+ height: 17px;
+}
+
+.calendar__overview-month button {
padding: 0;
+ border-radius: 50%;
display: grid;
place-items: center;
background: transparent;
- color: var(--accent);
- font-size: 13px;
- font-weight: 650;
+ color: var(--label);
+ font-size: 10px;
+ font-weight: 540;
+}
+
+.calendar__overview-month button.today,
+.calendar__overview-month button.selected {
+ background: var(--accent);
+ color: #fff;
+ font-weight: 750;
+}
+
+.calendar__content::-webkit-scrollbar {
+ display: none;
+}
+
+.calendar__year-month {
+ scroll-margin-top: 8px;
+ margin-bottom: 30px;
+}
+
+.calendar__year-month h1 {
+ margin: 0;
+ padding: 13px 18px 16px;
+ font-size: 34px;
+ font-weight: 780;
+ line-height: 1;
+ letter-spacing: -1.2px;
+ text-transform: capitalize;
}
.calendar__weekdays,
-.calendar__grid {
+.calendar__year-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar__weekdays {
- height: 27px;
+ height: 28px;
+ padding: 0 7px;
align-items: center;
- color: var(--muted);
- font-size: 11px;
- font-weight: 700;
+ color: var(--label);
+ font-size: 10px;
+ font-weight: 680;
text-align: center;
}
-.calendar__grid button {
+.calendar__weekdays span.weekend {
+ color: var(--muted);
+}
+
+.calendar__year-grid {
+ padding: 0 7px;
+}
+
+.calendar__year-grid button,
+.calendar__blank-day {
+ height: 92px;
+ border-top: 1px solid var(--line) !important;
+}
+
+.calendar__year-grid--compact > * {
+ height: 72px;
+}
+
+.calendar__year-grid--stacked > * {
+ height: 88px;
+}
+
+.calendar__year-grid--details > * {
+ height: 112px;
+}
+
+.calendar__year-grid button {
min-width: 0;
- padding: 2px 1px;
+ padding: 11px 1px 8px;
display: flex;
flex-direction: column;
align-items: center;
@@ -1046,55 +1245,45 @@ onMounted(loadMonth)
color: var(--label);
}
-.calendar__grid--compact button {
- height: 41px;
-}
-
-.calendar__grid--stacked button {
- height: 48px;
-}
-
-.calendar__grid--details button {
- height: 54px;
-}
-
-.calendar__grid button.outside {
- opacity: 0.28;
+.calendar__year-grid button.weekend {
+ color: var(--muted);
}
.calendar__day-number {
- width: 30px;
- height: 30px;
+ width: 34px;
+ height: 34px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
- font-size: 13px;
- font-weight: 560;
+ font-size: 17px;
+ font-weight: 600;
}
-.calendar__grid button.today .calendar__day-number {
+.calendar__year-grid button.today .calendar__day-number {
color: var(--accent);
font-weight: 800;
}
-.calendar__grid button.selected .calendar__day-number {
+.calendar__year-grid button.selected .calendar__day-number {
background: var(--accent);
color: #fff;
font-weight: 800;
}
.calendar__compact-indicator {
- width: 12px;
- height: 2px;
+ width: 5px;
+ height: 5px;
margin-top: 2px;
- border-radius: 2px;
- background: var(--accent);
+ border-radius: 50%;
+ background: #a855f7;
}
.calendar__event-bars {
- width: 78%;
+ width: 74%;
+ margin-top: 3px;
display: flex;
+ align-items: center;
gap: 2px;
}
@@ -1103,12 +1292,23 @@ onMounted(loadMonth)
min-width: 0;
flex: 1;
border-radius: 2px;
- background: var(--accent);
+}
+
+.calendar__event-dot--0 {
+ background: #a855f7;
+}
+
+.calendar__event-dot--1 {
+ background: #0ea5e9;
+}
+
+.calendar__event-dot--2 {
+ background: #f59e0b;
}
.calendar__event-titles {
width: 100%;
- padding: 0 1px;
+ padding: 0 2px;
display: flex;
flex-direction: column;
gap: 1px;
@@ -1117,12 +1317,51 @@ onMounted(loadMonth)
.calendar__event-titles i {
overflow: hidden;
color: var(--accent);
- font-size: 8.5px;
+ font-size: 8px;
font-style: normal;
font-weight: 650;
- line-height: 11px;
- white-space: nowrap;
+ line-height: 10px;
+ text-align: left;
text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.calendar__next-year {
+ width: calc(100% - 28px);
+ height: 48px;
+ margin: 0 14px 20px;
+ border-top: 1px solid var(--line) !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ background: transparent;
+ color: var(--accent) !important;
+ font-size: 15px !important;
+ font-weight: 650 !important;
+}
+
+.calendar__footer {
+ position: absolute;
+ z-index: 9;
+ bottom: 29px;
+ left: 14px;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+}
+
+.calendar__today-button {
+ height: 46px;
+ padding: 0 20px;
+ color: var(--label) !important;
+ font-size: 16px !important;
+ font-weight: 600 !important;
+ pointer-events: auto;
+}
+
+.calendar__list-view {
+ padding: 0 14px;
}
.calendar__agenda {
@@ -1851,16 +2090,6 @@ onMounted(loadMonth)
transform: translateY(100%);
}
-/* Keep dense month and agenda copy readable at the physical phone scale. */
-.calendar__weekdays {
- font-size: 13px;
-}
-
-.calendar__event-titles i {
- font-size: 10.5px;
- line-height: 13px;
-}
-
.calendar__agenda > header span,
.calendar__list-group > header span {
font-size: 13px;
diff --git a/frontend/src/views/apps/MemoryApp.vue b/frontend/src/views/apps/MemoryApp.vue
index 8f49ef2..c2aa588 100644
--- a/frontend/src/views/apps/MemoryApp.vue
+++ b/frontend/src/views/apps/MemoryApp.vue
@@ -123,8 +123,12 @@ onBeforeUnmount(() => {
-
-
+
+
+
@@ -449,126 +520,144 @@ onMounted(loadMonth)
{{ phone.t('Apps.calendar.signInBody') }}
+
+
+
+
+
{{ overview.year }}
+
+
+
+
+ + {{ month.label }} +
+
+
+
+
+
+
+
-
-
+
-
-
-
-
+
@@ -612,6 +701,12 @@ onMounted(loadMonth)
+
+
-
-
-
-
+ {{ month.label }}
-
+
{{ weekday }}
-
-
+
+
+
+
+ {{ event.title }}
+
+
+
+
+
- {{ selectedDateLabel }}
-
- {{ selectedEvents.length }}
-
-
-
- - {{ phone.t('Common.loading') }} -
-
- {{ phone.t('Apps.calendar.noEvents') }}
- {{ phone.t('Apps.calendar.noEventsBody') }}
-
-
-
{{ phone.t('Apps.memory.eyebrow') }}
-
+
+
{{ phone.t('Apps.memory.name') }}
@@ -278,6 +282,10 @@ onBeforeUnmount(() => { user-select: none; } +.memory-app--playing { + padding: 0; +} + .memory-header { height: 52px; display: flex; @@ -405,50 +413,67 @@ onBeforeUnmount(() => { .memory-difficulty__best { align-self: start; color: #74698f; font-size: 11.5px; line-height: 1.2; } .memory-difficulties svg { grid-column: 3; grid-row: 1 / 3; color: #7658c7; } -.memory-game { padding-top: 5px; } - -.memory-stats { - height: 50px; - display: grid; - grid-template-columns: 30px auto auto 1fr; - align-items: center; - gap: 11px; +.memory-game { + position: absolute; + inset: 0; } -.memory-stats div { display: grid; } -.memory-stats span { color: #74698f; font-size: 10.5px; font-weight: 800; text-transform: uppercase; } -.memory-stats strong { font-size: 19px; line-height: 1.05; } -.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 14px; font-weight: 800; } +.memory-stats { + position: absolute; + z-index: 7; + top: 66px; + right: 18px; + left: 18px; + height: 42px; + display: grid; + grid-template-columns: 32px 1fr 1fr auto; + align-items: center; + gap: 4px; + padding: 4px; + border: 1px solid rgb(105 79 160 / 10%); + border-radius: 21px; + background: rgb(246 241 255 / 64%); + box-shadow: 0 8px 24px rgb(75 52 121 / 13%); + backdrop-filter: blur(14px); + box-sizing: border-box; +} + +.memory-stats div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; } +.memory-stats span { color: #74698f; font-size: 10.5px; font-weight: 800; line-height: 10px; text-transform: uppercase; } +.memory-stats strong { display: block; font-size: 19px; line-height: 20px; } +.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 13px; font-weight: 800; } .memory-stats .memory-menu-button { - width: 30px; - height: 30px; + width: 32px; + height: 32px; display: grid; place-items: center; justify-self: start; padding: 0; - border: 1px solid rgb(105 79 160 / 10%); - border-radius: 10px; + border: 0; + border-radius: 50%; background: rgb(255 255 255 / 48%); - box-shadow: 0 3px 8px rgb(75 52 121 / 8%); cursor: pointer; } .memory-board { - position: relative; + position: absolute; + inset: 0; display: grid; gap: 8px; - padding: 9px; - border: 1px solid rgb(101 77 153 / 9%); - border-radius: 20px; - background: rgb(255 255 255 / 31%); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%); + align-content: center; + padding: 108px 17px 28px; + border: 0; + border-radius: 0; + background: + radial-gradient(circle at 12% 88%, rgb(135 105 207 / 12%), transparent 31%), + radial-gradient(circle at 88% 16%, rgb(255 255 255 / 54%), transparent 28%); perspective: 900px; } .memory-board--small { grid-template-columns: repeat(3, minmax(0, 1fr)); } .memory-board--medium, .memory-board--large { grid-template-columns: repeat(4, minmax(0, 1fr)); } -.memory-board--large { gap: 6px; padding: 7px; } +.memory-board--large { gap: 6px; padding-right: 15px; padding-left: 15px; } .memory-game-card { aspect-ratio: 0.82; @@ -545,7 +570,7 @@ onBeforeUnmount(() => { align-items: center; justify-content: center; gap: 10px; - border-radius: 20px; + border-radius: 0; background: rgb(244 239 255 / 90%); backdrop-filter: blur(6px); text-align: center; diff --git a/frontend/src/views/apps/MinesweeperApp.vue b/frontend/src/views/apps/MinesweeperApp.vue index ba3cb91..63b1612 100644 --- a/frontend/src/views/apps/MinesweeperApp.vue +++ b/frontend/src/views/apps/MinesweeperApp.vue @@ -198,8 +198,12 @@ onBeforeUnmount(() => { -
{{ phone.t('Apps.minesweeper.eyebrow') }}
-
+
+
{{ phone.t('Apps.minesweeper.name') }}
@@ -420,6 +424,10 @@ onBeforeUnmount(() => { user-select: none; } +.minesweeper-app--playing { + padding: 0; +} + .minesweeper-header { height: 55px; display: flex; @@ -524,22 +532,59 @@ onBeforeUnmount(() => { .minesweeper-difficulties small { align-self: start; color: #658a89; font-size: 8px; } .minesweeper-long-press { margin: 0; color: #628887; font-size: 9px; } -.minesweeper-game { position: relative; padding-top: 5px; } -.minesweeper-toolbar { height: 46px; display: grid; grid-template-columns: 36px 1fr 1fr 36px; align-items: center; gap: 7px; } -.minesweeper-toolbar div { display: grid; justify-items: center; line-height: 1.05; } -.minesweeper-toolbar span { color: #5a8484; font-size: 8px; font-weight: 800; text-transform: uppercase; } -.minesweeper-toolbar strong { font-size: 16px; } +.minesweeper-game { + position: absolute; + inset: 0; + background: + radial-gradient(circle at 12% 88%, rgb(26 129 130 / 14%), transparent 32%), + radial-gradient(circle at 88% 16%, rgb(238 255 249 / 45%), transparent 29%); +} + +.minesweeper-toolbar { + position: absolute; + z-index: 10; + top: 66px; + right: 18px; + left: 18px; + height: 42px; + display: grid; + grid-template-columns: 32px 1fr 1fr 32px; + align-items: center; + gap: 4px; + padding: 4px; + border: 1px solid rgb(23 83 87 / 10%); + border-radius: 21px; + background: rgb(226 249 242 / 65%); + box-shadow: 0 8px 24px rgb(23 73 75 / 13%); + backdrop-filter: blur(14px); + box-sizing: border-box; +} +.minesweeper-toolbar div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; } +.minesweeper-toolbar span { color: #5a8484; font-size: 10px; font-weight: 800; line-height: 10px; text-transform: uppercase; } +.minesweeper-toolbar strong { display: block; font-size: 18px; line-height: 20px; } + +.minesweeper-toolbar .minesweeper-toolbar__icon { + width: 32px; + height: 32px; + border: 0; + border-radius: 50%; + box-shadow: none; +} .minesweeper-board { - position: relative; + position: absolute; + top: 50%; + right: 14px; + left: 14px; display: grid; grid-template-columns: repeat(var(--minesweeper-columns), minmax(0, 1fr)); gap: 3px; padding: 7px; - border: 1px solid rgb(16 78 82 / 10%); + border: 0; border-radius: 18px; background: #187a7e; box-shadow: inset 0 2px 2px rgb(255 255 255 / 10%), 0 15px 27px rgb(20 79 81 / 18%); + transform: translateY(-45%); } .minesweeper-cell { @@ -582,8 +627,7 @@ onBeforeUnmount(() => { .minesweeper-game--exploding::after { position: absolute; z-index: 9; - inset: 46px 0 0; - border-radius: 18px; + inset: 0; background: #ffb341; content: ""; pointer-events: none; @@ -767,13 +811,13 @@ onBeforeUnmount(() => { } @keyframes minesweeper-board-shake { - 0%, 100% { transform: translate(0); } - 12% { transform: translate(-7px, 3px) rotate(-1deg); } - 24% { transform: translate(6px, -4px) rotate(1deg); } - 38% { transform: translate(-5px, -2px); } - 52% { transform: translate(4px, 3px); } - 68% { transform: translate(-2px, -2px); } - 82% { transform: translate(2px, 1px); } + 0%, 100% { transform: translate(0, -45%); } + 12% { transform: translate(-7px, calc(-45% + 3px)) rotate(-1deg); } + 24% { transform: translate(6px, calc(-45% - 4px)) rotate(1deg); } + 38% { transform: translate(-5px, calc(-45% - 2px)); } + 52% { transform: translate(4px, calc(-45% + 3px)); } + 68% { transform: translate(-2px, calc(-45% - 2px)); } + 82% { transform: translate(2px, calc(-45% + 1px)); } } @keyframes minesweeper-bomb-drop { @@ -866,7 +910,22 @@ onBeforeUnmount(() => { .minesweeper-secondary { position: relative; z-index: 1; min-width: 155px; min-height: 40px; border-radius: 13px; font-size: 11px; font-weight: 850; pointer-events: auto; } .minesweeper-primary { border: 0; color: #104d51; background: #8ce3d2; } .minesweeper-secondary { border: 1px solid rgb(255 255 255 / 13%); color: #e6faf5; background: rgb(255 255 255 / 7%); } -.minesweeper-game__hint { margin: 9px 0 0; color: #668c8c; font-size: 9px; text-align: center; } +.minesweeper-game__hint { + position: absolute; + z-index: 6; + right: 45px; + bottom: 27px; + left: 45px; + margin: 0; + padding: 7px 10px; + border-radius: 999px; + color: #668c8c; + background: rgb(226 249 242 / 52%); + backdrop-filter: blur(10px); + font-size: 9px; + text-align: center; + pointer-events: none; +} button:active { transform: scale(0.96); } diff --git a/frontend/src/views/apps/NeonDropApp.vue b/frontend/src/views/apps/NeonDropApp.vue index 16d4964..1f24c40 100644 --- a/frontend/src/views/apps/NeonDropApp.vue +++ b/frontend/src/views/apps/NeonDropApp.vue @@ -1,14 +1,9 @@ -
{{ phone.t('Apps.neonDrop.eyebrow') }}
- {{ phone.t('Apps.neonDrop.name') }}
@@ -335,51 +334,11 @@ onBeforeUnmount(() => { {{ phone.t('Apps.neonDrop.level') }}{{ game.level }}
-
+
-
-
-
-
-
-
{{ phone.t('Apps.neonDrop.gameHint') }}
@@ -421,6 +380,9 @@ onBeforeUnmount(() => {
user-select: none;
touch-action: manipulation;
}
+.neon-drop-app--playing {
+ padding: 0;
+}
.neon-header {
height: 54px;
display: flex;
@@ -613,42 +575,70 @@ onBeforeUnmount(() => {
background: #ffffff0a;
}
.neon-game {
- position: relative;
- height: calc(100% - 54px);
+ position: absolute;
+ inset: 0;
}
.neon-toolbar {
+ position: absolute;
+ z-index: 10;
+ top: 66px;
+ right: 18px;
+ left: 18px;
height: 42px;
display: grid;
- grid-template-columns: 35px 1fr 1fr 35px;
+ grid-template-columns: 32px 1fr 1fr 32px;
align-items: center;
- gap: 5px;
+ gap: 4px;
+ padding: 4px;
+ border: 1px solid #7cf6e72b;
+ border-radius: 21px;
+ background: #101a38a8;
+ box-shadow: 0 8px 24px #0008;
+ backdrop-filter: blur(14px);
+ box-sizing: border-box;
+}
+.neon-toolbar span {
+ font-size: 11px;
+ line-height: 10px;
}
.neon-toolbar div {
- text-align: center;
+ height: 32px;
+ display: grid;
+ grid-template-rows: 10px 20px;
+ align-content: center;
+ justify-items: center;
}
.neon-toolbar strong {
- font-size: 21px;
+ display: block;
+ font-size: 19px;
+ line-height: 20px;
+}
+.neon-toolbar button {
+ width: 32px;
+ height: 32px;
+ border: 0;
+ border-radius: 50%;
+ box-shadow: none;
}
.neon-play-area {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 5px;
+ position: absolute;
+ inset: 0;
}
.neon-board {
- width: 218px;
- height: 414px;
+ position: absolute;
+ top: 156px;
+ right: 0;
+ bottom: 76px;
+ left: 0;
display: grid;
grid-template-columns: repeat(10, 1fr);
- grid-template-rows: repeat(18, 1fr);
- gap: 1.5px;
- padding: 5px;
- border: 1px solid #65f4e43b;
- border-radius: 13px;
- background: #06091af2;
- box-shadow:
- inset 0 0 25px #000b,
- 0 12px 26px #0008;
+ grid-template-rows: repeat(17, 1fr);
+ gap: 1px;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
touch-action: none;
}
.neon-cell {
@@ -700,31 +690,35 @@ onBeforeUnmount(() => {
animation: neon-clear 0.24s ease-out;
}
.neon-side {
- width: 70px;
- display: flex;
- flex-direction: column;
+ position: absolute;
+ top: 110px;
+ right: 14px;
+ left: 14px;
+ height: 40px;
+ display: grid;
+ grid-template-columns: auto 40px auto auto 1fr;
align-items: center;
- gap: 9px;
- padding: 10px 4px 11px;
- border: 1px solid #65f4e448;
- border-radius: 13px;
- background: linear-gradient(180deg, #1420478f, #090d24a3);
- box-shadow: inset 0 0 16px #53e8d90a;
+ gap: 8px;
+ padding: 0 6px;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
}
.neon-side > strong {
- font-size: 28px;
+ font-size: 21px;
}
.neon-preview {
- width: 62px;
- height: 62px;
+ width: 40px;
+ height: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
- gap: 2px;
- padding: 5px;
- border: 1px solid #ffffff35;
- border-radius: 10px;
- background: #ffffff08;
+ gap: 1px;
+ padding: 3px;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
}
.neon-preview i[class*='neon-piece--'] {
border: 1px solid #ffffff68;
@@ -734,63 +728,49 @@ onBeforeUnmount(() => {
}
.neon-level {
position: relative;
- width: 12px;
- height: 221px;
+ width: 100%;
+ height: 6px;
overflow: hidden;
border-radius: 8px;
background: #ffffff0c;
}
.neon-level i {
position: absolute;
- right: 0;
+ top: 0;
bottom: 0;
left: 0;
border-radius: 8px;
background: linear-gradient(#73a7ff, #71f5e5);
box-shadow: 0 0 9px #69f4e5;
- transition: height 0.25s;
-}
-.neon-controls {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 5px;
- margin-top: 9px;
-}
-.neon-controls button {
- height: 48px;
- display: grid;
- place-items: center;
- padding: 0;
- border: 1px solid #ffffff16;
- border-radius: 11px;
- color: #dffefd;
- background: #ffffff0b;
-}
-.neon-controls button:last-child {
- color: #071225;
- background: linear-gradient(135deg, #ffe265, #ff9167);
-}
-.neon-controls svg {
- transform: scale(1.2);
+ transition: width 0.25s;
}
.neon-hint {
- margin: 7px 0 0;
+ position: absolute;
+ z-index: 6;
+ right: 45px;
+ bottom: 27px;
+ left: 45px;
+ margin: 0;
+ padding: 7px 10px;
+ border-radius: 999px;
color: #d6deed;
- font-size: 16px;
+ background: #101a3891;
+ backdrop-filter: blur(10px);
+ font-size: 10px;
font-weight: 700;
text-align: center;
+ pointer-events: none;
}
.neon-overlay {
position: absolute;
z-index: 10;
- inset: 42px 0 19px;
+ inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 25px;
- border-radius: 17px;
background: #080c21e8;
backdrop-filter: blur(6px);
text-align: center;
diff --git a/frontend/src/views/apps/NumberMergeApp.vue b/frontend/src/views/apps/NumberMergeApp.vue
index 3bc768f..c1d6cbf 100644
--- a/frontend/src/views/apps/NumberMergeApp.vue
+++ b/frontend/src/views/apps/NumberMergeApp.vue
@@ -1,9 +1,5 @@
-
-
+
+
{{ phone.t('Apps.numberMerge.eyebrow') }}
{{ phone.t('Apps.numberMerge.name') }}
@@ -317,17 +307,6 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown)){{ phone.t('Apps.numberMerge.swipeHint') }}
-
-
-
@@ -360,6 +339,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
user-select: none;
}
+.number-merge-app--playing {
+ padding: 0;
+}
+
.number-merge-header {
height: 55px;
display: flex;
@@ -508,40 +491,73 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
}
.number-merge-how-to small { display: block; color: #8b6559; font-size: 11px; line-height: 1.35; }
-.number-merge-game { padding-top: 5px; }
+.number-merge-game {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at 12% 88%, rgb(161 77 47 / 13%), transparent 32%),
+ radial-gradient(circle at 88% 16%, rgb(255 246 219 / 42%), transparent 29%);
+}
.number-merge-toolbar {
- height: 48px;
+ position: absolute;
+ z-index: 10;
+ top: 66px;
+ right: 18px;
+ left: 18px;
+ height: 42px;
display: grid;
- grid-template-columns: 36px 1fr 1fr 36px;
+ grid-template-columns: 32px 1fr 1fr 32px;
align-items: center;
- gap: 7px;
+ gap: 4px;
+ padding: 4px;
+ border: 1px solid rgb(109 66 52 / 10%);
+ border-radius: 21px;
+ background: rgb(255 241 216 / 65%);
+ box-shadow: 0 8px 24px rgb(95 48 31 / 13%);
+ backdrop-filter: blur(14px);
+ box-sizing: border-box;
}
.number-merge-toolbar div {
min-width: 0;
+ height: 32px;
display: grid;
+ grid-template-rows: 10px 20px;
+ align-content: center;
justify-items: center;
- line-height: 1.05;
}
-.number-merge-toolbar strong { max-width: 80px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; }
+.number-merge-toolbar span { line-height: 10px; }
+.number-merge-toolbar strong { display: block; max-width: 80px; overflow: hidden; font-size: 18px; line-height: 20px; text-overflow: ellipsis; }
.number-merge-toolbar__restart { justify-self: end; }
+.number-merge-toolbar .number-merge-toolbar__icon {
+ width: 32px;
+ height: 32px;
+ border: 0;
+ border-radius: 50%;
+ box-shadow: none;
+}
+
.number-merge-board {
--board-gap: 7px;
--board-padding: 9px;
- position: relative;
- width: 100%;
+ position: absolute;
+ top: 50%;
+ right: 14px;
+ left: 14px;
+ width: auto;
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--board-gap);
padding: var(--board-padding);
- border: 1px solid rgb(78 41 32 / 9%);
+ border: 0;
border-radius: 21px;
background: #80564c;
- box-shadow: inset 0 2px 2px rgb(255 255 255 / 10%), 0 17px 28px rgb(101 52 38 / 18%);
+ box-shadow: inset 0 2px 2px rgb(255 255 255 / 10%), 0 14px 28px rgb(101 52 38 / 15%);
+ transform: translateY(-47%);
}
.number-merge-cell {
@@ -638,25 +654,21 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
font-weight: 800;
}
-.number-merge-hint { margin: 10px 0 7px; color: #976f61; font-size: 12px; text-align: center; }
-
-.number-merge-controls {
- display: grid;
- grid-template-columns: repeat(4, 38px);
- justify-content: center;
- gap: 7px;
-}
-
-.number-merge-controls button {
- width: 38px;
- height: 38px;
- display: grid;
- place-items: center;
- padding: 0;
- border: 1px solid rgb(97 56 44 / 10%);
- border-radius: 12px;
- color: #71483b;
- background: rgb(255 255 255 / 38%);
+.number-merge-hint {
+ position: absolute;
+ z-index: 6;
+ right: 45px;
+ bottom: 27px;
+ left: 45px;
+ margin: 0;
+ padding: 7px 10px;
+ border-radius: 999px;
+ color: #8e675b;
+ background: rgb(255 241 216 / 52%);
+ backdrop-filter: blur(10px);
+ font-size: 10px;
+ text-align: center;
+ pointer-events: none;
}
.number-merge-confirm {
diff --git a/frontend/src/views/apps/SkyFlappyApp.vue b/frontend/src/views/apps/SkyFlappyApp.vue
index 3c336cd..1adbc4c 100644
--- a/frontend/src/views/apps/SkyFlappyApp.vue
+++ b/frontend/src/views/apps/SkyFlappyApp.vue
@@ -106,8 +106,15 @@ onBeforeUnmount(() => {
-
-
+
+
{{ phone.t('Apps.skyFlappy.eyebrow') }}