The official website for the open-source compatibility layer fpPS4
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

color consistency

changed some colors to match the compatibility list

+31 -21
+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
··· 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