diff --git a/client/src/components/game/GamePort.styles.css b/client/src/components/game/GamePort.styles.css index 6992dc6..3c50f11 100644 --- a/client/src/components/game/GamePort.styles.css +++ b/client/src/components/game/GamePort.styles.css @@ -79,6 +79,13 @@ border-radius: var(--radius-lg); } +/* Планшет - уменьшаем отступы */ +@media (max-width: 1080px) and (max-height: 700px) { + .player-port { + padding: 0.5rem; + } +} + /* Тёмная тема */ [data-theme="dark"] .player-port { background: linear-gradient(135deg, #2a4a3e 0%, #1f3830 100%) !important; /* Градиент для тёмной темы */ @@ -258,6 +265,13 @@ border-radius: var(--radius-lg); } +/* Планшет - уменьшаем отступы */ +@media (max-width: 1080px) and (max-height: 700px) { + .active-port { + padding: 0.5rem; + } +} + .active-port.bonus-active { background: linear-gradient(135deg, var(--color-surface) 0%, rgba(251, 191, 36, 0.2) 100%); box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); diff --git a/client/src/components/game/GamePorts.vue b/client/src/components/game/GamePorts.vue index bf5e87b..d521a8b 100644 --- a/client/src/components/game/GamePorts.vue +++ b/client/src/components/game/GamePorts.vue @@ -224,6 +224,18 @@ onMounted(async () => { } /* Responsive */ + +/* Планшет с малой высотой */ +@media (max-width: 1080px) and (max-height: 700px) { + .game-ports { + padding: 16px; + } + + .ports-grid { + gap: 16px; + } +} + @media (max-width: 768px) { .game-ports { padding: 16px; diff --git a/client/src/components/ui/IconButton.vue b/client/src/components/ui/IconButton.vue index 84f55c9..fd658cd 100644 --- a/client/src/components/ui/IconButton.vue +++ b/client/src/components/ui/IconButton.vue @@ -284,6 +284,29 @@ const iconComponent = computed(() => { } } +/* Планшет с малой высотой - еще меньше кнопки */ +@media (max-width: 1080px) and (max-height: 700px) { + .icon-button--sm { + width: 36px !important; + height: 36px !important; + } + + .icon-button--md { + width: 48px !important; + height: 48px !important; + } + + .icon-button--lg { + width: 60px !important; + height: 60px !important; + } + + .icon-button--xl { + width: 75px !important; + height: 75px !important; + } +} + @media (max-width: 768px) { .icon-button--sm { width: 36px !important;