mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 07:56:37 +08:00
sagit
111 lines
2.2 KiB
CSS
111 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
|
|
/* 移动端视口高度优化 */
|
|
html, body {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 现代浏览器使用 100dvh，避免地址栏收起/展开导致的布局跳动 */
|
|
@supports (height: 100dvh) {
|
|
.h-screen {
|
|
height: 100dvh;
|
|
}
|
|
.min-h-screen {
|
|
min-height: 100dvh;
|
|
}
|
|
}
|
|
|
|
/* 解决移动端100vh问题 */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.h-screen {
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
.min-h-screen {
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
}
|
|
|
|
/* 移动端滚动优化 */
|
|
@media (max-width: 768px) {
|
|
* {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* 安全区域变量与工具类（适配刘海/底部手势条） */
|
|
:root {
|
|
--safe-area-top: env(safe-area-inset-top, 0px);
|
|
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
[data-slot="input-wrapper"] {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-slot="input-wrapper"]:focus-within:not([data-invalid="true"]),
|
|
[data-slot="input-wrapper"][data-focus="true"]:not([data-invalid="true"]),
|
|
[data-slot="input-wrapper"][data-focused="true"]:not([data-invalid="true"]),
|
|
button[data-slot="trigger"][data-focus="true"]:not([data-invalid="true"]),
|
|
button[data-slot="trigger"][data-open="true"]:not([data-invalid="true"]) {
|
|
border-color: var(--heroui-default-200, #e5e7eb) !important;
|
|
outline: none !important;
|
|
outline-offset: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
[data-slot="input-wrapper"] input:focus,
|
|
[data-slot="input-wrapper"] textarea:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.safe-top {
|
|
padding-top: var(--safe-area-top);
|
|
}
|
|
|
|
.safe-bottom {
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
|
|
/* 验证码弹层动画 */
|
|
.captcha-modal-enter {
|
|
animation: captchaModalIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes captchaModalIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 验证码弹层背景渐入 */
|
|
.captcha-backdrop-enter {
|
|
animation: backdropFadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes backdropFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@config "../../tailwind.config.js"
|