Commit 72f777c1 authored by Chunchi Che's avatar Chunchi Che

Merge branch 'optimize/mobile' into 'main'

初步移动端适配

See merge request !322
parents 05ac712e 9d3fe5fd
@charset "utf-8";
@import url("https://fonts.font.im/css2?family=Electrolize&family=Noto+Serif+SC:wght@700&display=swap");
/* 默认字体大小,适用于PC端 */
html {
font-size: 16px;
}
/* 在移动端上设置不同的字体大小 */
/* iPad */
@media screen and (max-width: 1280px) {
html {
font-size: 14px;
}
}
/* Mobile */
@media screen and (max-width: 1000px) {
html {
font-size: 10px;
}
}
body {
color-scheme: dark;
color: rgba(255, 255, 255, 0.87);
background: #0f131e;
font-size: 14px;
display: flex;
margin: 0;
min-width: 320px;
min-width: 20rem;
position: fixed;
top: 0;
bottom: 0;
......@@ -17,7 +35,7 @@ body {
font-family: var(--theme-font);
--theme-font: "Electrolize", sans-serif;
--nato-serif-font: "Noto Serif SC", serif;
--header-height: 56px;
--header-height: 3.5rem;
#root {
height: 100%;
margin: 0 auto;
......
......@@ -7,7 +7,7 @@
top: 0;
width: 100%;
height: 100%;
padding: 0 10px 20px 10px;
padding: 0 0.625rem 1.25rem 0.625rem;
transition: 0.2s;
}
......@@ -25,41 +25,41 @@
box-shadow:
-1px 0 0 2px rgba(255, 255, 255, 0.15),
0 0 30px 0 #ffffff54;
backdrop-filter: blur(20px);
backdrop-filter: blur(1.25rem);
@include utils.noise-bg;
padding: 15px;
padding: 1rem;
display: flex;
flex-direction: column;
position: relative;
border-radius: 8px;
border-radius: 0.5rem;
}
.btn-close {
position: absolute;
right: 5px;
top: 5px;
right: 0.3rem;
top: 0.3rem;
}
.card {
--width: 160px;
--width: 10rem;
width: var(--width);
height: calc(var(--width) / var(--card-ratio));
flex-shrink: 0;
border: 1px solid #ffffff52;
overflow: hidden;
box-shadow: 0 0 6px 2px #ffffff2b;
box-shadow: 0 0 0.375rem 0.125rem #ffffff2b;
transition: 0.3s;
cursor: pointer;
&:hover {
--width: 220px;
--width: 13.75rem;
filter: contrast(1.1);
}
}
.title {
font-size: 20px;
font-size: 1.25rem;
font-family: var(--nato-serif-font);
margin: 20px 0 15px;
margin: 1.25rem 0 1rem;
display: flex;
justify-content: space-between;
// color: rgba(255, 255, 255, 0.45);
......
......@@ -117,7 +117,6 @@ export const CardDetail: React.FC<{
</a>
<div className={styles.title}>
<span>{card?.text.name}</span>
{/* <Avatar size={22}>光</Avatar> */}
</div>
<ScrollableArea>
<Descriptions layout="vertical" size="small" items={items} />
......
.deck-select {
display: flex;
flex-direction: column;
gap: 4px;
gap: 0.25rem;
.item {
height: 40px;
padding: 0 20px;
height: 2.5rem;
padding: 0 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -17,10 +17,10 @@
height: auto;
top: 0;
bottom: 0;
--padding-x: 5px;
--padding-x: 0.3rem;
left: var(--padding-x);
right: var(--padding-x);
border-radius: 4px;
border-radius: 0.25rem;
transition: 0.2s;
}
.hover {
......@@ -34,7 +34,7 @@
transition: 0.2s;
opacity: 0;
display: flex;
gap: 4px;
gap: 0.25rem;
}
&:hover {
.hover,
......@@ -47,12 +47,12 @@
.btn-add {
position: absolute;
bottom: 40px;
bottom: 2.5rem;
left: 0;
right: 0;
margin: auto;
background-color: rgba(0, 168, 202, 0.451);
box-shadow: 0 0 20px 0 rgba(0, 221, 255, 0.5);
box-shadow: 0 0 1.25rem 0 rgba(0, 221, 255, 0.5);
&:hover {
background-color: rgba(0, 168, 202, 0.451) !important;
transform: scale(1.1);
......
.title {
text-align: center;
font-size: 24px;
font-size: 1.5rem;
font-weight: bold;
margin: 12px 0 32px;
margin: 0.75rem 0 2rem;
}
.item {
......@@ -10,9 +10,9 @@
align-items: center;
.item-name {
display: flex;
gap: 4px;
gap: 0.25rem;
flex: 1;
flex-basis: 80px;
flex-basis: 5rem;
vertical-align: middle;
}
}
......@@ -20,18 +20,18 @@
.form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 8px;
gap: 1.25rem;
padding: 0.5rem;
}
.btns {
display: flex;
flex-direction: column;
gap: 10px;
gap: 0.625rem;
align-items: center;
padding: 30px 0 10px;
padding: 1.875rem 0 0.625rem;
& > button {
width: 220px;
width: 13.75rem;
border-radius: 3px;
}
}
......@@ -44,8 +44,8 @@
}
.divider {
flex: 0;
flex-basis: 32px;
flex-basis: 2rem;
text-align: center;
line-height: 30px;
line-height: 1.25rem;
}
}
......@@ -173,7 +173,7 @@ const Item: React.FC<
{title}
{showTip && (
<Tooltip title="若要输入 ? 的攻击/守备,请输入 -2">
<InfoCircleFilled style={{ fontSize: 10 }} />
<InfoCircleFilled style={{ fontSize: "0.625rem" }} />
</Tooltip>
)}
</div>
......
......@@ -9,7 +9,7 @@
}
.sider {
--sider-width: 300px;
--sider-width: 18.75rem;
width: var(--sider-width);
flex: 0 0 var(--sider-width);
background: transparent !important;
......@@ -27,21 +27,21 @@
padding-bottom: 0;
padding-right: 1rem;
.deck {
width: 660px;
width: 41.25rem;
}
.select {
flex: 1;
.select-btns {
padding: 5px 10px;
padding: 0.3rem 0.625rem;
display: flex;
gap: 8px;
gap: 0.5rem;
}
}
}
.container {
width: -webkit-fill-available;
height: calc(100% - 20px);
height: calc(100% - 1.25rem);
border: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
......@@ -49,8 +49,8 @@
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.title {
height: 44px;
flex: 0 0 44px;
height: 2.75rem;
flex: 0 0 2.75rem;
justify-content: space-between;
}
.deck-zone {
......@@ -60,7 +60,7 @@
--card-grid: 10;
}
background-color: hsla(0, 0%, 100%, 0.05);
backdrop-filter: blur(5px);
backdrop-filter: blur(0.3rem);
}
.deck .container {
......@@ -75,20 +75,20 @@
.search-cards-container {
height: 100%;
.search-cards {
--card-width: 80px;
--card-width: 5rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
padding: 0.75rem;
gap: 10px;
gap: 0.625rem;
}
}
.search-count {
font-size: 11px;
font-size: 0.7rem;
}
.empty {
gap: 20px;
gap: 1.25rem;
width: 100%;
height: 100%;
display: flex;
......@@ -103,8 +103,8 @@
bottom: 0;
background-color: #212332;
color: hsla(0, 0%, 100%, 0.3);
font-size: 12px;
padding: 2px 6px;
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
font-family: var(--theme-font);
user-select: none;
}
......@@ -237,11 +237,11 @@ export const DeckEditor: React.FC<{
placeholder="请输入卡组名字"
bordered={false}
prefix={<EditOutlined />}
style={{ width: 240 }}
style={{ width: "8.8rem" }}
onChange={(e) => setDeckName(e.target.value)}
value={deckName}
/>
<Space style={{ marginRight: 6 }}>
<Space style={{ marginRight: "0.4rem" }} size={5}>
<Button
type="text"
size="small"
......
......@@ -8,7 +8,8 @@ import { YgoCard } from "@/ui/Shared";
import { showCardModal } from "./CardModal";
const CARD_WIDTH = 100;
const CARD_WIDTH = "6.25rem";
const DRAWER_WIDTH = "10rem";
// TODO: 显示的位置还需要细细斟酌
......@@ -46,7 +47,7 @@ export const CardListModal = () => {
open={isOpen}
onClose={handleOkOrCancel}
// headerStyle={{ display: "none" }}
width={CARD_WIDTH + 66}
width={DRAWER_WIDTH}
style={{ maxHeight: "100%" }}
mask={false}
>
......
.desc {
line-height: 1.6;
font-size: 14px;
max-height: calc(100% - 237px);
font-size: 0.875rem;
max-height: calc(100% - 14.8rem);
.maro-item {
display: flex;
gap: 8px;
gap: 0.5rem;
}
}
......@@ -5,19 +5,19 @@
}
.drawer {
width: 90% !important;
width: 20vw !important;
left: 10%;
--height: 640px;
--height: 40rem;
top: calc((100% - var(--height)) / 2);
height: var(--height) !important;
position: relative;
border-radius: 6px;
border-radius: 0.375rem;
background: #242424;
:global(.ant-drawer-header) {
padding: 15px 0;
padding: 1rem 0;
:global(.ant-drawer-header-title) {
flex-direction: row-reverse;
padding-left: 24px;
padding-left: 1.5rem;
}
}
}
......@@ -34,19 +34,19 @@
font-family: var(--theme-font);
}
.number {
font-size: 30px;
line-height: 36px;
font-size: 1.875rem;
line-height: 2.25rem;
}
}
.attline {
display: flex;
flex-wrap: wrap;
row-gap: 10px;
row-gap: 0.625rem;
}
.info {
justify-content: space-between;
position: relative;
height: 230px; // TODO - fix this
height: 15rem; // TODO - fix this
}
......@@ -16,7 +16,7 @@ import {
import { Desc } from "./Desc";
import styles from "./index.module.scss";
const CARD_WIDTH = 140;
const CARD_WIDTH = "8.75rem";
const defaultStore = {
isOpen: false,
......@@ -86,7 +86,7 @@ export const CardModal = () => {
{/* TODO: 展示星级/LINK数 */}
</Space>
</Space>
<Divider style={{ margin: "14px 0" }}></Divider>
<Divider style={{ margin: "0.875rem 0" }}></Divider>
<Desc desc={desc} />
</div>
</Drawer>
......
......@@ -3,13 +3,13 @@
text-align: center;
.result {
font-size: 30px;
font-size: 1.875rem;
font-family: var(--theme-font);
color: var(--text-color);
}
.reason {
font-size: 20px;
font-size: 1.25rem;
font-family: var(--theme-font);
}
}
......@@ -72,7 +72,7 @@ export const OptionModal = () => {
style={{
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gap: "10px",
gap: "0.625rem",
}}
onChange={(values: any) => {
const v = selecteds.map((x, i) => (i === page ? values : x));
......@@ -83,7 +83,8 @@ export const OptionModal = () => {
<CheckCard
key={idx}
style={{
width: "200px",
width: "12.5rem",
fontSize: "1rem",
marginInlineEnd: 0,
marginBlockEnd: 0,
}}
......@@ -108,7 +109,7 @@ const Selector: React.FC<{
<Segmented
block
options={Array.from({ length: maxPage }).map((_, idx) => idx)}
style={{ margin: "10px 0" }}
style={{ margin: "0.625rem 0" }}
value={page}
onChange={onChange as any}
></Segmented>
......
......@@ -5,7 +5,7 @@
top: 50%;
display: flex;
justify-content: space-between;
padding: 0 10px;
padding: 0 0.625rem;
box-sizing: border-box;
height: 0;
button {
......@@ -13,7 +13,7 @@
}
}
:global(.ant-pro-checkcard) {
border-radius: 4px;
border-radius: 0.25rem;
overflow: hidden;
}
// 多选卡片的样式
......@@ -36,11 +36,11 @@
.check-group {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
gap: 0.625rem;
}
.check-card {
width: 100px;
width: 6.25rem;
aspect-ratio: var(--card-ratio);
margin-inline-end: 0;
margin-block-end: 0;
......
......@@ -110,7 +110,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
<span>{single ? "每次选择一张" : ""}</span>
</>
} // TODO: 这里可以再细化一些
width={600}
width={"37.5rem"}
okButtonProps={{
disabled: !submitable,
}}
......
......@@ -114,7 +114,7 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
return (
<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
<Card
style={{ width: 100 }}
style={{ width: "6.25rem" }}
cover={
<img
alt={props.meta.id.toString()}
......
......@@ -25,7 +25,7 @@ export const YesNoModal: React.FC = () => {
<NeosModal
title={`${preHintMsg} ${msg}`}
open={isOpen}
width={400}
width={"25rem"}
afterClose={() => (matStore.hint.esHint = undefined)}
footer={
<>
......
......@@ -13,6 +13,7 @@ const {
HAND_MARGIN_TOP,
HAND_CARD_HEIGHT,
HAND_CIRCLE_CENTER_OFFSET_Y,
HAND_MAT_OFFSET_Y,
} = matConfig;
const { HAND } = ygopro.CardZone;
......@@ -41,7 +42,7 @@ export const moveToHand: MoveFunc = async (props) => {
const negativeX = Math.sin(angle) * r;
const negativeY = Math.cos(angle) * r + HAND_CARD_HEIGHT / 2;
const x = hand_circle_center_x + negativeX * (isMe(controller) ? 1 : -1);
const y = hand_circle_center_y - negativeY + 140; // FIXME: 常量 是手动调的 这里肯定有问题 有空来修
const y = hand_circle_center_y - negativeY + HAND_MAT_OFFSET_Y;
const _rz = (angle * 180) / Math.PI;
......
......@@ -2,16 +2,16 @@
position: fixed;
display: flex;
// flex-direction: column;
gap: 6px;
bottom: 20px;
right: 35px;
gap: 0.375rem;
bottom: 1.25rem;
right: 2.2rem;
z-index: 999;
background-color: #323232;
padding: 8px;
border-radius: 6px;
padding: 0.5rem;
border-radius: 0.375rem;
overflow: hidden;
}
:global(.ant-dropdown-menu-item) {
gap: 8px;
gap: 0.5rem;
}
......@@ -5,10 +5,10 @@
justify-content: center;
.input {
font-size: 18px;
font-size: 1.2rem;
font-family: var(--theme-font);
color: #2885fff2;
height: 50px;
margin: 4px;
height: 3rem;
margin: 0.25rem;
}
}
......@@ -10,7 +10,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
gap: 3.75rem;
}
}
......@@ -18,19 +18,19 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr); /* 自动调整行高 */
width: 800px;
height: 530px;
gap: 16px;
width: 55rem;
// height: 33rem;
gap: 1rem;
.mode {
height: 100%;
background: hsla(0, 0%, 100%, 0.1);
backdrop-filter: blur(10px);
padding: 32px;
border-radius: 12px;
padding: 2rem;
border-radius: 0.75rem;
transition: 0.2s;
cursor: pointer;
&:hover {
box-shadow: 0 0 0 4px #226170;
box-shadow: 0 0 0 0.25rem #226170;
// background: hsla(0, 0%, 100%, 0.07);
filter: brightness(1.2);
}
......@@ -38,26 +38,26 @@
background: linear-gradient(#514f5780, #2a283277);
overflow: hidden;
position: relative;
--length: 48px;
--length: 3rem;
width: var(--length);
height: var(--length);
border-radius: 12px;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 1.25rem;
color: white;
transition: 0.2s;
filter: brightness(1.5);
}
.title {
margin-top: 24px;
margin-bottom: 12px;
font-size: 16px;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1rem;
}
.desc {
font-size: 14px;
line-height: 24px;
font-size: 0.875rem;
line-height: 1.5rem;
color: hsla(0, 0%, 100%, 0.6);
white-space: pre-wrap;
}
......
.desc {
line-height: 1.8;
font-size: 14px;
max-height: calc(100% - 237px);
font-size: 0.875rem;
max-height: calc(100% - 15rem);
font-family: var(--theme-font);
white-space: pre-wrap;
.maro-item {
display: flex;
gap: 8px;
gap: 0.5rem;
}
}
.special-btn {
cursor: pointer;
width: 200px;
width: 12.5rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 0;
gap: 0.625rem;
padding: 0.75rem 0;
border: 3px solid hsla(0, 0%, 100%, 0.3);
border-radius: 8px;
background-clip: padding-box;
background-color: hsla(0, 0%, 100%, 0.9);
color: #0d0d0d;
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.2px;
transition: 0.3s;
......
......@@ -11,7 +11,7 @@ interface Props {
code?: number;
// cardName?: string;
style?: CSSProperties;
width?: number;
width?: number | string;
onClick?: () => void;
onLoad?: () => void;
}
......
// 此文件目的是在js和CSS之间共享一些变量,并且这些变量是0运行时的。
interface CSSConfig {
readonly [key: string]: [number, UNIT];
}
type CSSConfig = [string, [number, UNIT]][];
// 以1280长度的viewpoint为基准进行缩放
const VIEW_POINT_WIDTH_BASE_IPAD = 1280;
const VIEW_POINT_WIDTH_BASE_MOBILE = 1000;
const ZOOM_RATE_IPAD = 0.7;
const ZOOM_RATE_MOBILE = 0.5;
/** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
const toCssProperties = (config: CSSConfig) =>
Object.entries(config)
config
.map(
([k, v]) =>
[
......@@ -18,13 +23,26 @@ const toCssProperties = (config: CSSConfig) =>
)
.reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
const pxTransform = (value: number, unit: UNIT) => {
if (unit === UNIT.PX && window.innerWidth < VIEW_POINT_WIDTH_BASE_MOBILE) {
return [value * ZOOM_RATE_MOBILE, unit];
} else if (
unit === UNIT.PX &&
window.innerWidth < VIEW_POINT_WIDTH_BASE_IPAD
) {
return [value * ZOOM_RATE_IPAD, unit];
} else {
return [value, unit];
}
};
enum UNIT {
PX = "px",
DEG = "deg",
NONE = "",
}
const matConfigWithUnit = {
const _matConfigWithUnit: Record<string, [number, UNIT]> = {
PERSPECTIVE: [1500, UNIT.PX],
PLANE_ROTATE_X: [0, UNIT.DEG],
BLOCK_WIDTH: [120, UNIT.PX],
......@@ -36,21 +54,26 @@ const matConfigWithUnit = {
HAND_MARGIN_TOP: [0, UNIT.PX],
HAND_CIRCLE_CENTER_OFFSET_Y: [2000, UNIT.PX],
HAND_CARD_HEIGHT: [130, UNIT.PX],
HAND_MAT_OFFSET_Y: [140, UNIT.PX], // 手卡离场地的偏移
DECK_OFFSET_X: [140, UNIT.PX],
DECK_OFFSET_Y: [80, UNIT.PX],
DECK_ROTATE_Z: [30, UNIT.DEG],
DECK_CARD_HEIGHT: [120, UNIT.PX],
CARD_HEIGHT_O: [100, UNIT.PX], // 场地魔法/墓地/除外的卡片高度
BLOCK_OUTSIDE_OFFSET_X: [15, UNIT.PX],
} satisfies CSSConfig;
};
const matConfigWithUnit = Object.entries(_matConfigWithUnit).map(
([k, [value, unit]]) => [k, pxTransform(value, unit) as [number, UNIT]],
) satisfies CSSConfig;
export const matConfig = Object.keys(matConfigWithUnit).reduce(
(prev, key) => ({
export const matConfig = matConfigWithUnit.reduce(
(prev, [key, value]) => ({
...prev,
// @ts-ignore
[key]: matConfigWithUnit[key][0],
[key]: value[0],
}),
{} as Record<keyof typeof matConfigWithUnit, number>,
{} as Record<keyof typeof _matConfigWithUnit, number>,
);
toCssProperties(matConfigWithUnit).forEach(([k, v]) => {
......
......@@ -3,10 +3,10 @@
align-items: center;
justify-content: center;
flex-direction: row;
gap: 80px;
gap: 5rem;
button {
width: 100px;
height: 50px;
font-size: 16px;
width: 6.25rem;
height: 3rem;
font-size: 1rem;
}
}
......@@ -17,25 +17,25 @@
flex: 1;
padding-bottom: 0;
padding: 1rem;
width: 660px;
width: 41.25rem;
}
.deck-container {
width: -webkit-fill-available;
height: calc(100% - 20px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
border-radius: 0.625rem;
display: flex;
flex-direction: column;
& > *:not(:last-of-type) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.title {
height: 44px;
flex: 0 0 44px;
height: 2.75rem;
flex: 0 0 2.75rem;
justify-content: space-between;
padding: 1em 2em;
font-size: 16px;
font-size: 1rem;
}
.deck-zone {
display: flex;
......@@ -44,11 +44,11 @@
--card-grid: 15;
}
background-color: hsla(0, 0%, 100%, 0.05);
backdrop-filter: blur(5px);
backdrop-filter: blur(0.3rem);
}
.detail-container {
--detail-width: 300px;
--detail-width: 18.75rem;
width: var(--detail-width);
flex: 0 0 var(--detail-width);
position: relative;
......
......@@ -5,66 +5,68 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
gap: 3rem;
}
.main {
height: 453px;
width: 1000px;
height: 50vh;
width: 60vw;
max-height: 100%;
position: relative;
display: flex;
justify-content: space-between;
.left {
height: 100%;
width: 40%;
display: flex;
flex-direction: column;
gap: 6px;
gap: 0.4rem;
.neos-logo {
width: 143px;
height: 34px;
width: 9rem;
height: 2rem;
}
.title {
font-size: 36px;
font-size: 2rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.86);
}
.keywords {
font-size: 24px;
font-size: 1.5rem;
font-weight: 500;
color: rgba(235, 245, 235, 0.8);
}
.details {
margin-top: 31px;
width: 450px;
font-size: 14px;
margin-top: 2rem;
width: 28rem;
max-width: 100%;
font-size: 1rem;
font-weight: 500;
line-height: 28px;
line-height: 1.75rem;
color: rgba(235, 245, 235, 0.5);
}
}
.right {
width: 360px;
height: 100%;
width: 40%;
position: relative;
overflow: hidden;
border-bottom-right-radius: 180px;
border-bottom-left-radius: 180px;
border-bottom-right-radius: 11.25rem;
border-bottom-left-radius: 11.25rem;
.neos-main-bg {
position: absolute;
bottom: 0;
width: fit-content;
height: 360px;
height: fit-content;
border-radius: 50%;
filter: brightness(0.7);
}
.neos-main {
position: absolute;
bottom: 0;
width: 80%;
border-bottom-right-radius: 50%;
transform: scale(1.25);
transform-origin: 50% 100%;
width: max-content;
filter: drop-shadow(0px 8px 8px rgba(255, 255, 255, 0.3))
drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8));
transition: 0.2s;
......
......@@ -11,17 +11,17 @@
width: 100%;
margin-top: auto;
background-color: hsla(0, 0%, 100%, 0.07);
padding: 8px;
padding: 0.5rem;
display: flex;
}
.dialogs {
position: absolute;
padding: 8px 0;
padding: 0.5rem 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
gap: 0.25rem;
.item {
vertical-align: baseline;
.name {
......@@ -31,16 +31,16 @@
.time {
font-size: 11px;
opacity: 0.8;
margin-left: 8px;
margin-left: 0.5rem;
}
.content {
font-size: 13px;
color: #ccc;
margin-top: 2px;
}
padding: 8px 8px;
margin: 0 10px;
border-radius: 8px;
padding: 0.5rem 0.5rem;
margin: 0 0.625rem;
border-radius: 0.5rem;
transition: 0.2s;
&:hover {
background-color: hsla(0, 0%, 100%, 0.07);
......
......@@ -94,7 +94,7 @@ export const TpPopover: React.FC<
return (
<Popover
overlayStyle={{ backdropFilter: "blur(10px)" }}
overlayStyle={{ backdropFilter: "blur(0.625rem)" }}
content={
<Space>
{[Tp.First, Tp.Second].map((item) => (
......
......@@ -2,9 +2,9 @@
height: 100%;
display: flex;
align-items: center;
--side-box-width: 500px;
--border-radius: 10px;
--sider-width: 300px;
--side-box-width: 30rem;
--border-radius: 0.625rem;
--sider-width: 18.75rem;
.content {
height: 100%;
position: relative;
......@@ -15,7 +15,7 @@
justify-content: center;
transition: transform 0.3s;
.wrap {
height: 500px; // TODO: 修正这里的高度,或者说修正全局的高度设置。高度不应该超过100%
height: 30rem; // TODO: 修正这里的高度,或者说修正全局的高度设置。高度不应该超过100%
display: flex;
flex-direction: column;
align-items: center;
......@@ -25,11 +25,11 @@
.sider {
position: relative;
width: var(--sider-width);
flex: 0 0 300px;
flex: 0 0 18.75rem;
height: 100%;
background-color: hsla(0, 0%, 100%, 0.05);
transition: transform 0.3s;
backdrop-filter: blur(5px);
backdrop-filter: blur(0.3rem);
z-index: 1;
}
}
......@@ -37,48 +37,48 @@
.both-side-container {
display: flex;
flex-direction: column;
gap: 30px;
gap: 1.8rem;
align-items: center;
margin-top: 80px;
margin-top: 5rem;
.side-box {
height: 100px;
height: 6.25rem;
width: var(--side-box-width);
border-radius: var(--border-radius);
background: hsla(0, 0%, 100%, 0.1);
backdrop-filter: blur(10px);
backdrop-filter: blur(0.625rem);
overflow: hidden;
padding: 0 32px;
padding: 0 2rem;
display: flex;
align-items: center;
gap: 16px;
gap: 1rem;
.inner {
position: absolute;
left: 0;
width: 150px;
height: 70px;
filter: blur(120px);
width: 9.4rem;
height: 4.375rem;
filter: blur(7.5rem);
transition: 0.3s;
}
&.ready .inner {
width: 250px;
height: 100px;
filter: blur(100px) brightness(1.2) saturate(1.2);
width: 15.6rem;
height: 6.25rem;
filter: blur(6.25rem) brightness(1.2) saturate(1.2);
}
&.me {
box-shadow: -5px 0 20px 0 rgba(0, 115, 255, 0.15);
box-shadow: -0.3rem 0 1.25rem 0 rgba(0, 115, 255, 0.15);
.inner {
background: linear-gradient(to right, blue, rgb(0, 149, 255));
}
z-index: 1;
}
&.op {
box-shadow: 5px 0 20px 0 rgba(255, 0, 81, 0.1);
box-shadow: 0.3rem 0 1.25rem 0 rgba(255, 0, 81, 0.1);
.inner {
background: linear-gradient(to right, rgb(255, 0, 106), rgb(255, 0, 0));
}
}
.name {
font-size: 18px;
font-size: 1.2rem;
color: white;
z-index: 1;
}
......@@ -108,22 +108,22 @@
}
.avatars-watch {
padding-left: 8px;
padding-left: 0.5rem;
}
.btns-side {
position: absolute;
left: 10px;
top: 10px;
left: 0.625rem;
top: 0.625rem;
display: flex;
flex-direction: column;
gap: 10px;
gap: 0.625rem;
transition: 0.3s;
.btn {
width: 32px;
width: 2rem;
background: hsla(0, 0%, 100%, 0.1);
justify-content: start;
padding: 0 8px;
padding: 0 0.5rem;
overflow: hidden;
.btn-icon {
display: flex;
......@@ -135,7 +135,7 @@
}
}
&:hover {
width: 100px;
width: 6.25rem;
}
}
}
......@@ -153,14 +153,14 @@
}
.fake-btn-large {
min-width: 88px;
height: 40px;
min-width: 5.5rem;
height: 2.5rem;
background: hsla(0, 0%, 100%, 0.1);
border-radius: 6px;
border-radius: 0.375rem;
display: flex;
align-items: center;
padding: 0 16px 0 16px;
gap: 8px;
padding: 0 1rem 0 1rem;
gap: 0.5rem;
cursor: not-allowed;
transition: 0.2s;
position: relative;
......
......@@ -249,7 +249,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
<Select
title="卡组"
showSearch
style={{ width: 250 }}
style={{ width: "15.6rem" }}
defaultValue={snapDeck.decks[0].deckName}
options={snapDeck.decks.map((deck) => ({
value: deck.deckName,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment