429 lines
7.9 KiB
CSS
Executable File
429 lines
7.9 KiB
CSS
Executable File
/* 基础样式重置 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
|
||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 50%, #f1f8e9 100%);
|
||
color: #2e7d32;
|
||
font-size: 18px;
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
position: relative;
|
||
outline: none; /* 移除默认的焦点轮廓 */
|
||
}
|
||
|
||
.container:focus {
|
||
/* 当容器获得焦点时的样式，用于iframe环境 */
|
||
outline: none;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.title {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: #1b5e20;
|
||
text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
|
||
margin: 0;
|
||
}
|
||
|
||
.score-container {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.score-box {
|
||
background: linear-gradient(135deg, #c8e6c9 0%, #e8f5e8 100%);
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
min-width: 80px;
|
||
box-shadow: 0 2px 8px rgba(46,125,50,0.2);
|
||
border: 1px solid rgba(129,199,132,0.3);
|
||
}
|
||
|
||
.score-label {
|
||
font-size: 12px;
|
||
color: #2e7d32;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.score {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #1b5e20;
|
||
background: linear-gradient(45deg, #4caf50, #66bb6a);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* 游戏容器 */
|
||
.game-container {
|
||
position: relative;
|
||
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 4px 12px rgba(46,125,50,0.15);
|
||
border: 1px solid rgba(129,199,132,0.2);
|
||
}
|
||
|
||
/* 网格样式 */
|
||
.grid-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.grid-row {
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.grid-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.grid-cell {
|
||
width: calc(25% - 6px);
|
||
height: 80px;
|
||
background: rgba(200, 230, 201, 0.4);
|
||
border-radius: 8px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
}
|
||
|
||
.grid-cell:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* 数字方块容器 */
|
||
.tile-container {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 15px;
|
||
right: 15px;
|
||
bottom: 15px;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 数字方块样式 */
|
||
.tile {
|
||
position: absolute;
|
||
width: calc(25% - 6px);
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32px;
|
||
transition: all 0.15s ease-in-out;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* 不同数字的颜色 */
|
||
.tile-2 { background: #e8f5e8; color: #2e7d32; }
|
||
.tile-4 { background: #c8e6c9; color: #1b5e20; }
|
||
.tile-8 { background: #a5d6a7; color: #ffffff; }
|
||
.tile-16 { background: #81c784; color: #ffffff; }
|
||
.tile-32 { background: #66bb6a; color: #ffffff; }
|
||
.tile-64 { background: #4caf50; color: #ffffff; }
|
||
.tile-128 { background: #43a047; color: #ffffff; font-size: 28px; }
|
||
.tile-256 { background: #388e3c; color: #ffffff; font-size: 28px; }
|
||
.tile-512 { background: #2e7d32; color: #ffffff; font-size: 28px; }
|
||
.tile-1024 { background: #1b5e20; color: #ffffff; font-size: 24px; }
|
||
.tile-2048 { background: #0d4e14; color: #ffffff; font-size: 24px; box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }
|
||
.tile-super { background: #3c3a32; color: #f9f6f2; font-size: 20px; }
|
||
|
||
/* 动画效果 */
|
||
.tile-new {
|
||
animation: appear 0.2s ease-in-out;
|
||
}
|
||
|
||
.tile-merged {
|
||
animation: pop 0.2s ease-in-out;
|
||
}
|
||
|
||
@keyframes appear {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes pop {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.2);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* 游戏消息 */
|
||
.game-message {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
z-index: 100;
|
||
text-align: center;
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.game-message.game-won {
|
||
background: rgba(237, 194, 46, 0.9);
|
||
color: #f9f6f2;
|
||
}
|
||
|
||
.game-message.game-over {
|
||
background: rgba(238, 228, 218, 0.9);
|
||
color: #776e65;
|
||
}
|
||
|
||
.game-message p {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.lower {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.retry-button {
|
||
background: #8f7a66;
|
||
color: #f9f6f2;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 排行榜样式（与 2048 主题一致） */
|
||
.leaderboard {
|
||
width: 100%;
|
||
max-width: 440px;
|
||
background: rgba(250, 248, 239, 0.95); /* #faf8ef */
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
color: #776e65;
|
||
}
|
||
|
||
.leaderboard-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #8f7a66;
|
||
margin-bottom: 8px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.leaderboard-summary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
color: #8f7a66;
|
||
margin-bottom: 10px;
|
||
}
|
||
.leaderboard-summary strong {
|
||
color: #8f7a66;
|
||
}
|
||
|
||
.leaderboard-table {
|
||
border: 1px solid rgba(187, 173, 160, 0.3); /* #bbada0 */
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background: rgba(238, 228, 218, 0.4); /* #eee4da */
|
||
}
|
||
|
||
.leaderboard-header,
|
||
.leaderboard-row {
|
||
display: grid;
|
||
grid-template-columns: 64px 1fr 90px 120px; /* 排名/名称/分数/日期 */
|
||
align-items: center;
|
||
}
|
||
|
||
.leaderboard-header {
|
||
background: #eee4da;
|
||
color: #776e65;
|
||
font-weight: 700;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid rgba(187, 173, 160, 0.3);
|
||
}
|
||
|
||
.leaderboard-body {
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
background: rgba(238, 228, 218, 0.25);
|
||
}
|
||
|
||
.leaderboard-row {
|
||
padding: 8px 10px;
|
||
border-top: 1px solid rgba(187, 173, 160, 0.15);
|
||
}
|
||
.leaderboard-row:nth-child(odd) {
|
||
background: rgba(238, 228, 218, 0.22);
|
||
}
|
||
.leaderboard-row.current {
|
||
background: #f3e9d4;
|
||
box-shadow: inset 0 0 0 2px rgba(143, 122, 102, 0.35);
|
||
}
|
||
|
||
.leaderboard-col.rank {
|
||
text-align: center;
|
||
font-weight: 700;
|
||
color: #8f7a66;
|
||
}
|
||
.leaderboard-col.score {
|
||
text-align: right;
|
||
font-weight: 700;
|
||
}
|
||
.leaderboard-col.time {
|
||
text-align: right;
|
||
color: #776e65;
|
||
}
|
||
|
||
.retry-button:hover {
|
||
background: #9f8a76;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* 手机端优化 */
|
||
@media (max-width: 480px) {
|
||
.container {
|
||
padding: 15px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.score-container {
|
||
justify-content: center;
|
||
}
|
||
|
||
.grid-cell,
|
||
.tile {
|
||
height: 70px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.tile-128,
|
||
.tile-256,
|
||
.tile-512 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.tile-1024,
|
||
.tile-2048 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.tile-super {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.game-message p {
|
||
font-size: 28px;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.grid-cell,
|
||
.tile {
|
||
height: 60px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.tile-128,
|
||
.tile-256,
|
||
.tile-512 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.tile-1024,
|
||
.tile-2048 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.tile-super {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/* 电脑端优化 */
|
||
@media (min-width: 768px) {
|
||
.container {
|
||
padding: 30px;
|
||
}
|
||
|
||
.grid-cell,
|
||
.tile {
|
||
height: 90px;
|
||
font-size: 36px;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* 触摸优化 */
|
||
@media (hover: none) and (pointer: coarse) {
|
||
.retry-button {
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
}
|
||
} |