The official website for the open-source compatibility layer fpPS4
1@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
2/*+ scrollbar */
3::-webkit-scrollbar {
4 width: 0.57rem;}
5
6::-webkit-scrollbar-thumb {
7 background: var(--hover);
8 border-radius: 0.13rem;}
9
10::-webkit-scrollbar-thumb:hover {
11 background: var(--selected); }
12/*- scrollbar */
13
14:root {
15 --text: #eceff4;
16 --border: #e1e1e10d;
17 --solidBorder: #393b3e;
18 --background: #101112;
19 --main0: #26272a;
20 --main1: #2f3134;
21 --hover: #393b3e;
22 --selected: #424448;
23}
24
25* {
26 margin: 0;
27 padding: 0;
28 box-sizing: border-box;
29 font-family: 'Rubik', sans-serif;
30 color: var(--text);
31 text-decoration: none;
32 scrollbar-color: var(--main1) #ffffff00; /* - FF scrollbar */
33 text-rendering: optimizeLegibility;
34 -webkit-tap-highlight-color: transparent;
35 font-weight: 400;
36}
37
38html {scroll-behavior: smooth; transition: all ease 0.4s;}
39
40body{
41 background-color: var(--background);
42 overflow-x: hidden;
43 height: 180vh !important;
44}
45
46.top {
47 display: flex;
48 justify-content: center;
49 height: 100vh;
50}
51
52.top-text-container {
53 transform: translate(-50%, -50%);
54 display: flex;
55 flex-direction: column;
56 position: absolute;
57 align-items: center;
58 text-align: center;
59 top: 50%;
60 left: 50%;
61 width: 50%;
62 height: 50%;
63 background-color: var(--main0);
64 border: 1px solid var(--border);
65 border-radius: 8px;
66 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
67}
68
69.coming-soon {
70 transform: translatey(-50%);
71 position: absolute;
72 top: 16%;
73 font-size:32px;
74 font-weight: 500;
75}
76
77.main-text {
78 transform: translatey(-50%);
79 position: absolute;
80 top: 35%;
81 font-size: 42px;
82 font-weight: 500;
83}
84
85
86.progress-text {
87 position: absolute;
88 top: 52%;
89 margin: 0 12%;
90 font-size: 20px;
91}
92
93.button {
94 cursor: pointer;
95 position: relative;
96 width: 130px;
97 height: 50px;
98 padding: 12px 0;
99 border-radius: 8px;
100 font-size: 16px;
101 border: 2px solid var(--solidBorder);
102 display: flex;
103 align-content: center;
104 flex-wrap: wrap;
105 justify-content: center;
106}
107
108.topButtonContainer {
109 display: flex;
110 top: 72%;
111 flex-direction: row;
112 position: relative;
113 gap: 20px;
114}
115
116.bottom-container {
117 display: flex;
118 position: relative;
119 height: 80vh;
120}
121
122.bottom-left {
123 transform: translate(-50%, -50%);
124 display: flex;
125 position: absolute;
126 top: 45%;
127 left: 30%;
128 width: 50%;
129 height: 62%;
130 flex-direction: column;
131 align-items: center;
132 text-align: center;
133 background-color: var(--main0);
134 border: 1px solid var(--border);
135 border-radius: 8px;
136 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
137}
138
139.bottom-right {
140 transform: translate(-50%, -50%);
141 display: flex;
142 position: absolute;
143 top: 45%;
144 left: 78%;
145 width: 35%;
146 height: 62%;
147 flex-direction: column;
148 align-items: center;
149 background-color: var(--main0);
150 border: 1px solid rgba(225, 225, 225, 0.05);
151 border-radius: 8px;
152 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
153}
154
155.bottom-top-text {
156 transform: translatey(-50%);
157 position: absolute;
158 top: 20%;
159 font-size: 39px;
160 font-weight: 500;
161}
162
163.bottom-desc-text {
164 transform: translatey(-50%);
165 position: absolute;
166 font-size: 22px;
167 top: 38%;
168 margin: 0 22%;
169}
170
171.buttons-container {
172 transform: translate(-50%, -50%);
173 position: absolute;
174 display: flex;
175 top: 65%;
176 left: 50%;
177 gap: 60px;
178}
179
180.thank-user-container {
181 display: flex;
182 position: absolute;
183 flex-wrap: wrap;
184 top: 38%;
185 left: 17%;
186 font-size: 18px;
187 gap: 24px;
188}
189
190.top-text-container:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}
191
192.button:hover {border: 2px solid var(--text);}
193
194.bottom-right:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}
195
196.bottom-left:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}