The official website for the open-source compatibility layer fpPS4
color consistency
changed some colors to match the compatibility list
+31
-21
+1
-1
public_html/index.html
+1
-1
public_html/index.html
···
25
25
<meta name="copyright" content="fpPS4">
26
26
<meta name="theme-color" content="#4C566A">
27
27
<meta property="og:title" content="fpPS4 - An open source PS4 compatibility layer">
28
-
<meta property="og:description" content="fpPS4 is an open source PS4 compatibility layer written in Free Pascal for Windows.">
28
+
<meta property="og:description" content="fpPS4 is an open source PS4 compatibility layer written with Free Pascal for Windows.">
29
29
<meta property="og:image" content="https://fpps4.net/images/fpPS4-icon.png">
30
30
<meta property="og:url" content="https://fpps4.net">
31
31
<link rel="stylesheet" href="./style.css">
+30
-20
public_html/style.css
+30
-20
public_html/style.css
···
1
-
2
-
3
-
/* + scrollbar */
1
+
/*+ scrollbar */
4
2
::-webkit-scrollbar {
5
-
width: 9px;}
3
+
width: 0.57rem;}
6
4
7
-
::-webkit-scrollbar-thumb {
8
-
background: #2a3136;
9
-
border-radius: 2px;}
5
+
::-webkit-scrollbar-thumb {
6
+
background: var(--hover);
7
+
border-radius: 0.13rem;}
10
8
11
-
::-webkit-scrollbar-thumb:hover {
12
-
background: #383e45; }
13
-
/* - scrollbar */
9
+
::-webkit-scrollbar-thumb:hover {
10
+
background: var(--selected); }
11
+
/*- scrollbar */
12
+
13
+
:root {
14
+
--text: #eceff4;
15
+
--border: #e1e1e10d;
16
+
--solidBorder: #393b3e;
17
+
--background: #101112;
18
+
--main0: #26272a;
19
+
--main1: #2f3134;
20
+
--hover: #393b3e;
21
+
--selected: #424448;
22
+
}
14
23
15
24
* {
16
25
margin: 0;
17
26
padding: 0;
18
27
box-sizing: border-box;
19
28
font-family: 'Montserrat', sans-serif;
20
-
color: white;
29
+
color: var(--text);
21
30
text-decoration: none;
22
-
scrollbar-color: #2a3136 #ffffff00; /* - FF scrollbar */
31
+
scrollbar-color: var(--main1) #ffffff00; /* - FF scrollbar */
23
32
text-rendering: optimizeLegibility;
33
+
-webkit-tap-highlight-color: transparent;
24
34
}
25
35
26
36
html {scroll-behavior: smooth; transition: all ease 0.4s;}
27
37
28
38
body{
29
-
background-color: #0e141b;
39
+
background-color: var(--background);
30
40
overflow-x: hidden;
31
41
height: 180vh !important;
32
42
}
···
48
58
left: 50%;
49
59
width: 50%;
50
60
height: 50%;
51
-
background-color: #242830;
52
-
border: 1px solid rgba(225, 225, 225, 0.05);
61
+
background-color: var(--main0);
62
+
border: 1px solid var(--border);
53
63
border-radius: 8px;
54
64
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
55
65
}
···
85
95
text-align: center;
86
96
border-radius: 8px;
87
97
font-size: 16px;
88
-
border: 2px solid rgba(255, 255, 255, 0.4);
98
+
border: 2px solid var(--solidBorder);
89
99
}
90
100
91
101
.topButtonContainer {
···
113
123
flex-direction: column;
114
124
align-items: center;
115
125
text-align: center;
116
-
background-color: #252a33;
117
-
border: 1px solid rgba(225, 225, 225, 0.05);
126
+
background-color: var(--main0);
127
+
border: 1px solid var(--border);
118
128
border-radius: 8px;
119
129
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
120
130
}
···
129
139
height: 62%;
130
140
flex-direction: column;
131
141
align-items: center;
132
-
background-color: #252a33;
142
+
background-color: var(--main0);
133
143
border: 1px solid rgba(225, 225, 225, 0.05);
134
144
border-radius: 8px;
135
145
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
···
171
181
172
182
.top-text-container:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}
173
183
174
-
.button:hover {border: 2px solid white;}
184
+
.button:hover {border: 2px solid var(--text);}
175
185
176
186
.bottom-right:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}
177
187