Seregon/zftpd

Zero-copy FTP/HTTP Daemon compatible with all POSIX systems

C/11.0 KB/No license
web/css/games.css
zftpd / web / css / games.css
1/* ══ GAMES VIEW — PS4 XMB STYLE ═════════════════════════════════════════ */
2 
3.games-xmb { display:flex; flex-direction:column; gap:14px; }
4 
5.games-xmb-header {
6 display:flex; align-items:flex-end; justify-content:space-between;
7 padding:4px 2px;
8}
9.games-xmb-title { font-size:28px; font-weight:700; color:var(--tx); letter-spacing:.01em; }
10.games-xmb-sub { margin-top:3px; font-size:12px; color:var(--tx3); }
11.games-xmb-tools { display:flex; gap:8px; }
12 
13.games-actions {
14 border:1px solid var(--bd);
15 border-radius:14px;
16 background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
17 padding:12px;
18}
19 
20.games-actions-row {
21 display:grid;
22 grid-template-columns:1fr auto auto auto;
23 gap:8px;
24}
25 
26.games-input {
27 width:100%;
28 border:1px solid var(--bd2);
29 background:var(--sf2);
30 color:var(--tx);
31 border-radius:10px;
32 padding:9px 11px;
33 font-size:12px;
34}
35 
36.games-install-status {
37 margin-top:10px;
38 border:1px solid var(--bd2);
39 border-radius:10px;
40 background:var(--sf2);
41 color:var(--tx2);
42 font-size:11px;
43 padding:8px 10px;
44}
45.games-install-status.ok { border-color: rgba(40, 200, 120, .45); color:#8df3b7; }
46.games-install-status.er { border-color: rgba(255, 90, 90, .5); color:#ff8a8a; }
47 
48.games-shelf {
49 border:1px solid var(--bd);
50 border-radius:14px;
51 background:var(--sf);
52 padding:10px;
53}
54.games-shelf-title {
55 color:var(--tx2);
56 font-size:12px;
57 font-weight:700;
58 letter-spacing:.04em;
59 text-transform:uppercase;
60 margin:2px 2px 8px;
61}
62 
63.games-xmb-row {
64 display:flex;
65 gap:12px;
66 overflow-x:auto;
67 overflow-y:hidden;
68 padding:2px;
69 min-height:255px;
70}
71 
72.games-card {
73 position:relative;
74 width:190px;
75 flex:0 0 190px;
76 border-radius:14px;
77 border:1px solid var(--bd);
78 background:var(--sf2);
79 overflow:hidden;
80 transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
81}
82.games-card:hover {
83 transform:translateY(-2px) scale(1.01);
84 border-color:var(--ac);
85 box-shadow:0 12px 28px rgba(0,0,0,.45);
86}
87 
88.games-card-cover {
89 width:100%;
90 height:190px;
91 object-fit:cover;
92 display:block;
93 background:linear-gradient(135deg, #1f2f4e, #152033);
94}
95 
96.games-card-body { padding:10px; }
97.games-card-title {
98 color:var(--tx);
99 font-size:12px;
100 font-weight:700;
101 line-height:1.25;
102 min-height:30px;
103 display:-webkit-box;
104 line-clamp:2;
105 -webkit-line-clamp:2;
106 -webkit-box-orient:vertical;
107 overflow:hidden;
108}
109.games-card-meta {
110 margin-top:5px;
111 color:var(--tx3);
112 font-size:10px;
113 white-space:nowrap;
114 overflow:hidden;
115 text-overflow:ellipsis;
116}
117 
118.games-card-actions {
119 display:flex;
120 gap:6px;
121 margin-top:8px;
122}
123.games-card-actions .btn {
124 flex:1;
125 padding:6px 8px;
126 font-size:10px;
127 line-height:1;
128}
129 
130.games-empty {
131 color:var(--tx3);
132 font-size:12px;
133 text-align:center;
134 width:100%;
135 padding:40px 10px;
136}
137 
138@media (max-width: 1100px) {
139 .games-actions-row { grid-template-columns:1fr 1fr; }
140}
141