-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
124 lines (113 loc) · 5.14 KB
/
Copy pathstyle.css
File metadata and controls
124 lines (113 loc) · 5.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
:root{
--hud-font: "Segoe UI", "Microsoft YaHei", "PingFang SC", monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; height:100%; overflow:hidden; background:#0b0d12; font-family:var(--hud-font); color:#fff; user-select:none; }
#game-root{ position:fixed; inset:0; }
#game-root canvas{ display:block; }
#overlay{
position:fixed; top:0; left:0; width:100vw; height:100vh;
z-index:5; pointer-events:none;
}
#vignette{
position:fixed; inset:0; z-index:4; pointer-events:none;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.42) 100%);
}
#fade{
position:fixed; inset:0; z-index:40; pointer-events:none;
background:#000; opacity:0; transition: opacity 0.35s ease;
}
#fade.on{ opacity:1; }
.hidden{ display:none !important; }
.overlay{
position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
background: rgba(8,10,16,0.62);
backdrop-filter: blur(2px);
}
.menu-box{
background: linear-gradient(#3a3f4a, #22262e);
border: 4px solid #000;
box-shadow: inset 0 0 0 3px rgba(255,255,255,0.16), 0 12px 48px rgba(0,0,0,0.55);
padding: 34px 44px;
width: min(560px, 92vw);
text-align:center;
}
.menu-box h1{
font-size: 54px; letter-spacing: 4px; font-weight: 900;
text-shadow: 3px 3px 0 #000;
}
.menu-box h1 span{ color:#7ee05a; }
.menu-box h2{ font-size: 34px; text-shadow: 2px 2px 0 #000; margin-bottom: 10px; }
.menu-box .subtitle{ color:#b9c2d0; margin: 6px 0 22px; font-size: 15px; letter-spacing: 1px; }
.menu-box p{ color:#cfd6e2; margin-bottom: 16px; }
.controls{
display:grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; text-align:left;
font-size: 14px; color:#d7dde8; margin-bottom: 22px;
}
.controls b{
display:inline-block; min-width: 82px; background:#0e1116; border:2px solid #000;
padding: 2px 6px; text-align:center; color:#ffd66b; font-size: 13px; margin-right: 6px;
}
.settings-row{
display:flex; align-items:center; gap: 14px; margin: 10px 0; justify-content:center;
}
.settings-row label{ width: 64px; text-align:right; color:#b9c2d0; font-size:14px; }
.seg{ display:flex; gap: 6px; }
.seg button, .menu-box button{
font-family: inherit; font-size: 15px; padding: 8px 18px; cursor:pointer;
background:#4b5160; color:#fff; border: 3px solid #000;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.seg button.active{ background:#7ee05a; color:#14210a; font-weight:700; }
.menu-box button:hover{ background:#6a7284; }
.menu-box button:active{ transform: translateY(2px); }
.menu-box > button{ font-size: 19px; font-weight: 700; padding: 12px 34px; margin-top: 18px; background:#4f9cff; }
.menu-box > button:hover{ background:#6fb1ff; }
input[type=range]{ width: 200px; accent-color: #7ee05a; }
.tip{ margin-top: 14px; color:#8b93a3; font-size: 12px; }
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none; }
#top-left{ position:absolute; top:18px; left:18px; }
.stat-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.bar-bg{
width: 220px; height: 16px; background:#0c0f14; border:2px solid #000;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14);
}
.bar-bg div{ height:100%; width:100%; transition: width 0.15s ease; }
#hp-bar{ background: linear-gradient(#8bee60, #4da52c); }
#hp-bar.low{ background: linear-gradient(#ff6b5e, #c02618); }
#armor-bar{ background: linear-gradient(#6cc0ff, #2f7fd0); }
#top-left span{ font-size: 15px; font-weight:700; text-shadow: 2px 2px 0 #000; width: 30px; }
#top-right{ position:absolute; top:18px; right:18px; text-align:right; }
#score{ font-size: 17px; font-weight:700; text-shadow: 2px 2px 0 #000; }
#goal{ color:#9fb0c5; font-size: 13px; margin-top:4px; text-shadow: 1px 1px 0 #000; }
#killfeed{
position:absolute; top: 76px; right: 18px; width: 260px;
display:flex; flex-direction:column; align-items:flex-end; gap: 4px;
}
.kf{
background: rgba(10,13,18,0.78); border:2px solid #000; padding: 4px 9px;
font-size: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
animation: kfin 0.18s ease, kfout 0.5s ease 3.5s forwards;
}
.kf .hs{ color:#ff5f52; font-weight:800; }
@keyframes kfin{ from{ transform: translateX(30px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes kfout{ to{ opacity:0; transform: translateY(-8px); } }
#minimap-wrap{
position:absolute; left:18px; bottom:18px;
border:3px solid #000; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}
#minimap{ display:block; background: rgba(12,18,12,0.55); }
#ammo-wrap{
position:absolute; right:22px; bottom:18px; text-align:right;
}
#weapon-name{ font-size: 15px; color:#ffd66b; text-shadow: 2px 2px 0 #000; letter-spacing:1px; }
#ammo-count{ font-size: 34px; font-weight:900; text-shadow: 3px 3px 0 #000; line-height:1.05; }
#ammo-count .low{ color:#ff5f52; }
#reload-hint{ color:#ffd66b; font-size: 14px; text-shadow: 2px 2px 0 #000; height: 18px; }
#fps{ position:absolute; left:18px; bottom: 200px; color:#9fb0c5; font-size:12px; text-shadow:1px 1px 0 #000; }
#msg{
position:absolute; left:50%; top: 38%; transform: translate(-50%, -50%);
font-size: 26px; font-weight:800; text-shadow: 3px 3px 0 #000; letter-spacing:2px;
color:#ffd66b; opacity:0; transition: opacity 0.25s ease;
}
#msg.on{ opacity:1; }