Add files via upload
This commit is contained in:
wearrqqws
GitHub
parent
1be53d83da
commit
7180f868c2
29 changed files with 3905 additions and 0 deletions
94
bookmarklets/index.html
Normal file
94
bookmarklets/index.html
Normal file
File diff suppressed because one or more lines are too long
88
credits/index.html
Normal file
88
credits/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Credits</title>
|
||||||
|
<script src="/js/themes/loadCredits.js"></script>
|
||||||
|
<link rel="stylesheet" href="/vendor/aos/aos.css" />
|
||||||
|
<link rel="icon" href="/img/icon.png">
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
<script>
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
navigator.serviceWorker.register('/pwabuilder-sw.js').then((reg) => {
|
||||||
|
console.log('Service worker registered.', reg);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="/vendor/aos/aos.js"></script>
|
||||||
|
<script src="/main.js"></script>
|
||||||
|
<script src="/toggles.js"></script>
|
||||||
|
<script src="/header.js"></script>
|
||||||
|
<div class="top-header" data-aos="fade-down" data-aos-duration="1000">
|
||||||
|
<div id="title-background" class="title-background"><a id="nav-toggle" class="mobile-toggle" onclick="openNav()"><svg class="menu-bar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg></a></div>
|
||||||
|
</div>
|
||||||
|
<div id="sidenav" class="sidenav">
|
||||||
|
<a class="closebtn" onclick="closeNav()">×</a>
|
||||||
|
<br>
|
||||||
|
<a href="/" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon" viewBox="0 0 576 512"><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg> Home</a>
|
||||||
|
<a href="/proxies" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon" viewBox="0 0 512 512"><path d="M432 64H208C199.2 64 192 71.16 192 80V96H128V80C128 35.82 163.8 0 208 0H432C476.2 0 512 35.82 512 80V304C512 348.2 476.2 384 432 384H416V320H432C440.8 320 448 312.8 448 304V80C448 71.16 440.8 64 432 64zM0 192C0 156.7 28.65 128 64 128H320C355.3 128 384 156.7 384 192V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V192zM96 256H288C305.7 256 320 241.7 320 224C320 206.3 305.7 192 288 192H96C78.33 192 64 206.3 64 224C64 241.7 78.33 256 96 256z"/></svg> Proxies</a>
|
||||||
|
<a href="/games" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon" viewBox="0 0 640 512"><path d="M448 64H192C85.96 64 0 149.1 0 256s85.96 192 192 192h256c106 0 192-85.96 192-192S554 64 448 64zM247.1 280h-32v32c0 13.2-10.78 24-23.98 24c-13.2 0-24.02-10.8-24.02-24v-32L136 279.1C122.8 279.1 111.1 269.2 111.1 256c0-13.2 10.85-24.01 24.05-24.01L167.1 232v-32c0-13.2 10.82-24 24.02-24c13.2 0 23.98 10.8 23.98 24v32h32c13.2 0 24.02 10.8 24.02 24C271.1 269.2 261.2 280 247.1 280zM431.1 344c-22.12 0-39.1-17.87-39.1-39.1s17.87-40 39.1-40s39.1 17.88 39.1 40S454.1 344 431.1 344zM495.1 248c-22.12 0-39.1-17.87-39.1-39.1s17.87-40 39.1-40c22.12 0 39.1 17.88 39.1 40S518.1 248 495.1 248z"/></svg> Games</a>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<a href="/bookmarklets" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon-sm" viewBox="0 0 384 512"><path d="M384 48V512l-192-112L0 512V48C0 21.5 21.5 0 48 0h288C362.5 0 384 21.5 384 48z"/></svg> Bookmarklets</a>
|
||||||
|
<a href="/settings" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg> Settings</a>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<a href="./credits" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon-sm" viewBox="0 0 448 512"><path d="M256 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H256C273.7 32 288 46.33 288 64C288 81.67 273.7 96 256 96zM256 352H32C14.33 352 0 337.7 0 320C0 302.3 14.33 288 32 288H256C273.7 288 288 302.3 288 320C288 337.7 273.7 352 256 352zM0 192C0 174.3 14.33 160 32 160H416C433.7 160 448 174.3 448 192C448 209.7 433.7 224 416 224H32C14.33 224 0 209.7 0 192zM416 480H32C14.33 480 0 465.7 0 448C0 430.3 14.33 416 32 416H416C433.7 416 448 430.3 448 448C448 465.7 433.7 480 416 480z"/></svg> Credits</a>
|
||||||
|
<a href="./docs.html" class="mobile-nav-header-item"><svg xmlns="http://www.w3.org/2000/svg" class="header-icon-sm" viewBox="0 0 448 512"><path d="M448 336v-288C448 21.49 426.5 0 400 0H352v191.1c0 13.41-15.52 20.88-25.1 12.49L272 160L217.1 204.5C207.5 212.8 192 205.4 192 191.1V0H96C42.98 0 0 42.98 0 96v320c0 53.02 42.98 96 96 96h320c17.67 0 32-14.33 32-32c0-11.72-6.607-21.52-16-27.1v-81.36C441.8 362.8 448 350.2 448 336zM384 448H96c-17.67 0-32-14.33-32-32c0-17.67 14.33-32 32-32h288V448z"/></svg> Docs</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
<h1 class="title-text fade-in">Credits</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="credits">
|
||||||
|
<p class="credit-item">Ultraviolet - Created by Titanium Network</p>
|
||||||
|
<p class="credit-item">Rammerhead - Created by binary-person</p>
|
||||||
|
<p class="credit-item">Games provided by 3kh0</p>
|
||||||
|
<p class="credit-item">Website UI created by wearr</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<div id="footer">
|
||||||
|
<div class="footerflex">
|
||||||
|
<div class="footerbrand">
|
||||||
|
<h3><a href="/">Alu's Unblocker</a></h3>
|
||||||
|
<p>Made with ❤️ by <a href="#">wearr</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="footerlist">
|
||||||
|
<h3>Services</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a target="_blank" href="https://github.com/titaniumnetwork-dev/Ultraviolet">Ultraviolet</a></li>
|
||||||
|
<li><a target="_blank" href="https://github.com/binary-person/rammerhead">Rammerhead</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footerlist">
|
||||||
|
<h3>Socials</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a target="_blank" href="https://github.com/titaniumnetwork-dev/Holy-Unblocker">GitHub</a></li>
|
||||||
|
<li><a href="/terms.html">Instagram</a></li>
|
||||||
|
<div class="tooltip">
|
||||||
|
<span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
|
||||||
|
<li><a onclick="copyDiscord();" onmouseout="outFunc();" class="discord-text">Discord</a></li>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">Alu's Unblocker © 2022</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
508
css/dark/boilerplate.css
Normal file
508
css/dark/boilerplate.css
Normal file
|
|
@ -0,0 +1,508 @@
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
background-color: #46494C;
|
||||||
|
max-width: 100vw;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #1985A1;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-top: 3rem;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mid-content-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-content {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
-webkit-animation: fadein 1s;
|
||||||
|
animation: fadein 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1269px) {
|
||||||
|
.header-item {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box !important;
|
||||||
|
display: -ms-flexbox !important;
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile support moment*/
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 750ms ease-in-out;
|
||||||
|
transition: 750ms ease-in-out;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1269px) {
|
||||||
|
.mobile-header {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-background {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 2%;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
height: 90px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #1985A1;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
list-style-type: none;
|
||||||
|
border: none !important;
|
||||||
|
z-index: 10;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1003px) {
|
||||||
|
.title-background {
|
||||||
|
width: 500%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #D8DEE9;
|
||||||
|
margin-left: 3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 500ms;
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:hover {
|
||||||
|
font-size: 1.11em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-box-pack: right;
|
||||||
|
-ms-flex-pack: right;
|
||||||
|
justify-content: right;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 3rem;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
background-color: #81A1C1;
|
||||||
|
padding: 2%;
|
||||||
|
height: 90px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 350ms ease-in-out;
|
||||||
|
transition: 350ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item:hover {
|
||||||
|
font-size: 1.07em;
|
||||||
|
}
|
||||||
|
.menu-bar {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon {
|
||||||
|
width: 20px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon-sm {
|
||||||
|
width: 15px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
/* 100% Full-height */
|
||||||
|
width: 0;
|
||||||
|
/* 0 width - change this with JavaScript */
|
||||||
|
position: fixed;
|
||||||
|
/* Stay in place */
|
||||||
|
z-index: 11;
|
||||||
|
/* Stay on top */
|
||||||
|
top: 0;
|
||||||
|
/* Stay at the top */
|
||||||
|
left: 0;
|
||||||
|
background-color: #3a3c3e;
|
||||||
|
padding-top: 60px;
|
||||||
|
/* Place content 60px from the top */
|
||||||
|
-webkit-transition: 0.5s;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navigation menu links */
|
||||||
|
.sidenav a {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When you mouse over the navigation links, change their color */
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 0;
|
||||||
|
font-size: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.sidenav a {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #DCDCDD;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 140px;
|
||||||
|
background-color: #D8DEE9;
|
||||||
|
color: #3B4252;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: -200%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -30%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D8DEE9 transparent transparent transparent;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
position: relative;
|
||||||
|
left: 1.5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icn {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #D8DEE9;
|
||||||
|
}
|
||||||
|
.patreon {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-ms-flex-negative: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
-webkit-transform: translateY(140px);
|
||||||
|
transform: translateY(140px);
|
||||||
|
padding-top: 20vw;
|
||||||
|
background-image: url("/img/darkwaves.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 25px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 15px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand p {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li > a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist > * {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.credits {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
47
css/dark/bookmarklets.css
Normal file
47
css/dark/bookmarklets.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
.bookmarklets {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid white;
|
||||||
|
-webkit-transition: background-color 300ms ease-in-out;
|
||||||
|
transition: background-color 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn:hover {
|
||||||
|
background-color: #232831;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: 15%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 629px) {
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
0
css/dark/credits.css
Normal file
0
css/dark/credits.css
Normal file
73
css/dark/games.css
Normal file
73
css/dark/games.css
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
.options {
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
color: #D8DEE9;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.games {
|
||||||
|
border: 2px solid #D8DEE9;
|
||||||
|
padding: 1rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
color: #fff;
|
||||||
|
margin-top: -10px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
-webkit-columns: 3 auto;
|
||||||
|
columns: 3 auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 973px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 467px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-img {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-title {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
57
css/dark/index.css
Normal file
57
css/dark/index.css
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
.proxies-button {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 15px;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
border: 5px solid white;
|
||||||
|
-webkit-transition: 400ms ease-out;
|
||||||
|
transition: 400ms ease-out;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.proxies-button:hover {
|
||||||
|
background-color: #393b3e;
|
||||||
|
color: rgb(228, 228, 228);
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-involved {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-card {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #576977;
|
||||||
|
border-radius: 1em;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.buttons > a {
|
||||||
|
padding-left: 50px;
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
49
css/dark/proxies.css
Normal file
49
css/dark/proxies.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.proxy-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 150px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #4C566A;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
border-radius: 35px;
|
||||||
|
-webkit-transition: 250ms ease-in-out;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
background-color: #464e61;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.proxy-list {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
202
css/dark/settings.css
Normal file
202
css/dark/settings.css
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
.toggle-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
-webkit-box-shadow: 0 0 1px #92aec9;
|
||||||
|
box-shadow: 0 0 1px #92aec9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#tab-cloak {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#icn-change {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background-color: #303643;
|
||||||
|
color: #D8DEE9;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounding {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bdr {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break-large {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-notes-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks-header {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.theme-toggle-wrapper > label {
|
||||||
|
color: rgb(227, 227, 227);
|
||||||
|
}
|
||||||
|
#themes {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.caret-icn {
|
||||||
|
z-index: 200;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
.item-wrapper {
|
||||||
|
height: 0px;
|
||||||
|
background-color: #303643;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.item:hover {
|
||||||
|
background-color: #2c3038;
|
||||||
|
}
|
||||||
503
css/light/boilerplate.css
Normal file
503
css/light/boilerplate.css
Normal file
|
|
@ -0,0 +1,503 @@
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
background-color: #fafafa;
|
||||||
|
max-width: 100vw;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.header-icon {
|
||||||
|
width: 20px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon-sm {
|
||||||
|
width: 15px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #641ddf;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-top: 3rem;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mid-content-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-content {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
-webkit-animation: fadein 1s;
|
||||||
|
animation: fadein 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: rgb(27, 27, 27);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
text-align: center;
|
||||||
|
color: #3c3d3f;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1269px) {
|
||||||
|
.header-item {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box !important;
|
||||||
|
display: -ms-flexbox !important;
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile support moment*/
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 750ms ease-in-out;
|
||||||
|
transition: 750ms ease-in-out;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1269px) {
|
||||||
|
.mobile-header {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-background {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 2%;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
height: 90px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #641ddf;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
list-style-type: none;
|
||||||
|
border: none !important;
|
||||||
|
z-index: 10;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1003px) {
|
||||||
|
.title-background {
|
||||||
|
width: 500%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #D8DEE9;
|
||||||
|
margin-left: 3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 500ms;
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:hover {
|
||||||
|
font-size: 1.11em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-box-pack: right;
|
||||||
|
-ms-flex-pack: right;
|
||||||
|
justify-content: right;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 3rem;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
background-color: #81A1C1;
|
||||||
|
padding: 2%;
|
||||||
|
height: 90px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 350ms ease-in-out;
|
||||||
|
transition: 350ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item:hover {
|
||||||
|
font-size: 1.07em;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 11;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #481b97;
|
||||||
|
padding-top: 60px;
|
||||||
|
-webkit-transition: 0.5s;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navigation menu links */
|
||||||
|
.sidenav a {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When you mouse over the navigation links, change their color */
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 0;
|
||||||
|
font-size: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.sidenav a {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #DCDCDD;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 140px;
|
||||||
|
background-color: #D8DEE9;
|
||||||
|
color: #3B4252;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: -200%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -30%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D8DEE9 transparent transparent transparent;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
position: relative;
|
||||||
|
left: 1.5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icn {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #D8DEE9;
|
||||||
|
}
|
||||||
|
.patreon {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-ms-flex-negative: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
-webkit-transform: translateY(140px);
|
||||||
|
transform: translateY(140px);
|
||||||
|
padding-top: 20vw;
|
||||||
|
background-image: url("/img/lightwaves.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 25px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 15px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand p {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li > a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist > * {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.credits {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit-item {
|
||||||
|
color: #313131;
|
||||||
|
}
|
||||||
|
.menu-bar {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
48
css/light/bookmarklets.css
Normal file
48
css/light/bookmarklets.css
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
.bookmarklets {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn {
|
||||||
|
color: #222325;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid rgb(15, 15, 15);
|
||||||
|
-webkit-transition: background-color 300ms ease-in-out;
|
||||||
|
transition: 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn:hover {
|
||||||
|
background-color: #4d4f53;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: 15%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 629px) {
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
color: #303234;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
0
css/light/credits.css
Normal file
0
css/light/credits.css
Normal file
65
css/light/games.css
Normal file
65
css/light/games.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
.games {
|
||||||
|
border: 2px solid #2b2c2f;
|
||||||
|
padding: 1rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: -10px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
-webkit-columns: 3 auto;
|
||||||
|
columns: 3 auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 973px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 467px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-img {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-title {
|
||||||
|
color: rgb(25, 25, 25);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
62
css/light/index.css
Normal file
62
css/light/index.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
.proxies-button {
|
||||||
|
color: #393b3e;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 15px;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
border: 5px solid rgb(35, 35, 35);
|
||||||
|
-webkit-transition: 400ms ease-out;
|
||||||
|
transition: 400ms ease-out;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.proxies-button:hover {
|
||||||
|
background-color: #393b3e;
|
||||||
|
color: rgb(228, 228, 228);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.get-involved {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #2b2b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-card {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #641ddf;
|
||||||
|
border-radius: 1em;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5em;
|
||||||
|
}
|
||||||
49
css/light/proxies.css
Normal file
49
css/light/proxies.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.proxy-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 150px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #333334;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
border-radius: 35px;
|
||||||
|
-webkit-transition: 250ms ease-in-out;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
background-color: #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.proxy-list {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
197
css/light/settings.css
Normal file
197
css/light/settings.css
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
.toggle-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-text {
|
||||||
|
color: #272829;
|
||||||
|
}
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 5px #313233;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
color: #3c3c3c;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#tab-cloak {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#icn-change {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background-color: #303643;
|
||||||
|
color: #e2e2e2;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounding {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bdr {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break-large {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-notes-text {
|
||||||
|
color: #252525;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks-header {
|
||||||
|
color: #282828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
#themes {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.caret-icn {
|
||||||
|
margin-left: 60px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.item-wrapper {
|
||||||
|
height: 0px;
|
||||||
|
background-color: #303643;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item:hover {
|
||||||
|
background-color: #2c3038;
|
||||||
|
}
|
||||||
509
css/null/boilerplate.css
Normal file
509
css/null/boilerplate.css
Normal file
|
|
@ -0,0 +1,509 @@
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.menu-bar {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon {
|
||||||
|
width: 20px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon-sm {
|
||||||
|
width: 15px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
background-color: #46494C;
|
||||||
|
max-width: 100vw;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #1985A1;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-top: 3rem;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mid-content-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-content {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
-webkit-animation: fadein 1s;
|
||||||
|
animation: fadein 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1269px) {
|
||||||
|
.header-item {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box !important;
|
||||||
|
display: -ms-flexbox !important;
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile support moment*/
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 750ms ease-in-out;
|
||||||
|
transition: 750ms ease-in-out;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1269px) {
|
||||||
|
.mobile-header {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-background {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 2%;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
height: 90px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #1985A1;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
list-style-type: none;
|
||||||
|
border: none !important;
|
||||||
|
z-index: 10;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1003px) {
|
||||||
|
.title-background {
|
||||||
|
width: 500%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #D8DEE9;
|
||||||
|
margin-left: 3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 500ms;
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:hover {
|
||||||
|
font-size: 1.11em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-box-pack: right;
|
||||||
|
-ms-flex-pack: right;
|
||||||
|
justify-content: right;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 3rem;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
background-color: #81A1C1;
|
||||||
|
padding: 2%;
|
||||||
|
height: 90px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 350ms ease-in-out;
|
||||||
|
transition: 350ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item:hover {
|
||||||
|
font-size: 1.07em;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
/* 100% Full-height */
|
||||||
|
width: 0;
|
||||||
|
/* 0 width - change this with JavaScript */
|
||||||
|
position: fixed;
|
||||||
|
/* Stay in place */
|
||||||
|
z-index: 11;
|
||||||
|
/* Stay on top */
|
||||||
|
top: 0;
|
||||||
|
/* Stay at the top */
|
||||||
|
left: 0;
|
||||||
|
background-color: #3a3c3e;
|
||||||
|
padding-top: 60px;
|
||||||
|
/* Place content 60px from the top */
|
||||||
|
-webkit-transition: 0.5s;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navigation menu links */
|
||||||
|
.sidenav a {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When you mouse over the navigation links, change their color */
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 0;
|
||||||
|
font-size: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.sidenav a {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #DCDCDD;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 140px;
|
||||||
|
background-color: #D8DEE9;
|
||||||
|
color: #3B4252;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: -200%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -30%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D8DEE9 transparent transparent transparent;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
position: relative;
|
||||||
|
left: 1.5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icn {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #D8DEE9;
|
||||||
|
}
|
||||||
|
.patreon {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-ms-flex-negative: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
-webkit-transform: translateY(140px);
|
||||||
|
transform: translateY(140px);
|
||||||
|
padding-top: 20vw;
|
||||||
|
background-image: url("/img/darkwaves.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 25px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 15px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand p {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li > a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist > * {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.credits {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
47
css/null/bookmarklets.css
Normal file
47
css/null/bookmarklets.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
.bookmarklets {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid white;
|
||||||
|
-webkit-transition: background-color 300ms ease-in-out;
|
||||||
|
transition: background-color 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn:hover {
|
||||||
|
background-color: #232831;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: 15%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 629px) {
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
73
css/null/games.css
Normal file
73
css/null/games.css
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
.options {
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
color: #D8DEE9;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.games {
|
||||||
|
border: 2px solid #D8DEE9;
|
||||||
|
padding: 1rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
color: #fff;
|
||||||
|
margin-top: -10px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
-webkit-columns: 3 auto;
|
||||||
|
columns: 3 auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 973px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 467px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-img {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-title {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
57
css/null/index.css
Normal file
57
css/null/index.css
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
.proxies-button {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 15px;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
border: 5px solid white;
|
||||||
|
-webkit-transition: 400ms ease-out;
|
||||||
|
transition: 400ms ease-out;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.proxies-button:hover {
|
||||||
|
background-color: #393b3e;
|
||||||
|
color: rgb(228, 228, 228);
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-involved {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-card {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #576977;
|
||||||
|
border-radius: 1em;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.buttons > a {
|
||||||
|
padding-left: 50px;
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
49
css/null/proxies.css
Normal file
49
css/null/proxies.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.proxy-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 150px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #4C566A;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
border-radius: 35px;
|
||||||
|
-webkit-transition: 250ms ease-in-out;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
background-color: #464e61;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.proxy-list {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
202
css/null/settings.css
Normal file
202
css/null/settings.css
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
.toggle-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
-webkit-box-shadow: 0 0 1px #92aec9;
|
||||||
|
box-shadow: 0 0 1px #92aec9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#tab-cloak {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#icn-change {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background-color: #303643;
|
||||||
|
color: #D8DEE9;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounding {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bdr {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break-large {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-notes-text {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks-header {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.theme-toggle-wrapper > label {
|
||||||
|
color: rgb(227, 227, 227);
|
||||||
|
}
|
||||||
|
#themes {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.caret-icn {
|
||||||
|
z-index: 200;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
.item-wrapper {
|
||||||
|
height: 0px;
|
||||||
|
background-color: #303643;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.item:hover {
|
||||||
|
background-color: #2c3038;
|
||||||
|
}
|
||||||
503
css/rainbow/boilerplate.css
Normal file
503
css/rainbow/boilerplate.css
Normal file
|
|
@ -0,0 +1,503 @@
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.menu-bar {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #00ff51;
|
||||||
|
}
|
||||||
|
.header-icon {
|
||||||
|
width: 20px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
.header-icon-sm {
|
||||||
|
width: 15px;
|
||||||
|
fill: #eaecef;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('https://thumbs.gfycat.com/CriminalSatisfiedArthropods-size_restricted.gif');
|
||||||
|
max-width: 100vw;
|
||||||
|
background-color: red;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #641ddf;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-top: 3rem;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mid-content-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-content {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
-webkit-animation: fadein 1s;
|
||||||
|
animation: fadein 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: rgb(27, 27, 27);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
text-align: center;
|
||||||
|
color: #3c3d3f;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1269px) {
|
||||||
|
.header-item {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box !important;
|
||||||
|
display: -ms-flexbox !important;
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile support moment*/
|
||||||
|
.mobile-toggle {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 750ms ease-in-out;
|
||||||
|
transition: 750ms ease-in-out;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1269px) {
|
||||||
|
.mobile-header {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-background {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 2%;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
height: 90px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url("https://thumbs.gfycat.com/CriminalSatisfiedArthropods-size_restricted.gif");
|
||||||
|
font-size: 1.05rem;
|
||||||
|
list-style-type: none;
|
||||||
|
border: none !important;
|
||||||
|
z-index: 10;
|
||||||
|
-webkit-transition: 250ms ease-in;
|
||||||
|
transition: 250ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1003px) {
|
||||||
|
.title-background {
|
||||||
|
width: 500%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #D8DEE9;
|
||||||
|
margin-left: 3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 500ms;
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:hover {
|
||||||
|
font-size: 1.11em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-box-pack: right;
|
||||||
|
-ms-flex-pack: right;
|
||||||
|
justify-content: right;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 3rem;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
background-color: #81A1C1;
|
||||||
|
padding: 2%;
|
||||||
|
height: 90px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: 350ms ease-in-out;
|
||||||
|
transition: 350ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item:hover {
|
||||||
|
font-size: 1.07em;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 11;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-image: url("https://thumbs.gfycat.com/CriminalSatisfiedArthropods-size_restricted.gif");
|
||||||
|
padding-top: 60px;
|
||||||
|
-webkit-transition: 0.5s;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navigation menu links */
|
||||||
|
.sidenav a {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When you mouse over the navigation links, change their color */
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position and style the close button (top right corner) */
|
||||||
|
.sidenav .closebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 0;
|
||||||
|
font-size: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.sidenav a {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #DCDCDD;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 140px;
|
||||||
|
background-color: #D8DEE9;
|
||||||
|
color: #3B4252;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: -200%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -30%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D8DEE9 transparent transparent transparent;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
position: relative;
|
||||||
|
left: 1.5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icn {
|
||||||
|
width: 2rem;
|
||||||
|
fill: #D8DEE9;
|
||||||
|
}
|
||||||
|
.patreon {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-ms-flex-negative: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
-webkit-transform: translateY(140px);
|
||||||
|
transform: translateY(140px);
|
||||||
|
padding-top: 20vw;
|
||||||
|
background-image: url("/img/lightwaves.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 25px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 15px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.footerflex > div {
|
||||||
|
margin: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand h3 a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand p {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbrand a {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist ul > li > a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerlist > * {
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footersocials a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #D8DEE9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.credits {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit-item {
|
||||||
|
color: #313131;
|
||||||
|
}
|
||||||
48
css/rainbow/bookmarklets.css
Normal file
48
css/rainbow/bookmarklets.css
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
.bookmarklets {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn {
|
||||||
|
color: #222325;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid rgb(15, 15, 15);
|
||||||
|
-webkit-transition: background-color 300ms ease-in-out;
|
||||||
|
transition: 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklet-btn:hover {
|
||||||
|
background-color: #4d4f53;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: 15%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 629px) {
|
||||||
|
.bookmarklets > a {
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
color: #303234;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
0
css/rainbow/credits.css
Normal file
0
css/rainbow/credits.css
Normal file
65
css/rainbow/games.css
Normal file
65
css/rainbow/games.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
.games {
|
||||||
|
border: 2px solid #2b2c2f;
|
||||||
|
padding: 1rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: -10px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
-webkit-columns: 3 auto;
|
||||||
|
columns: 3 auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 973px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 467px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-img {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-title {
|
||||||
|
color: rgb(25, 25, 25);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
62
css/rainbow/index.css
Normal file
62
css/rainbow/index.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
.proxies-button {
|
||||||
|
color: #393b3e;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 15px;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
border: 5px solid rgb(35, 35, 35);
|
||||||
|
-webkit-transition: 400ms ease-out;
|
||||||
|
transition: 400ms ease-out;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.proxies-button:hover {
|
||||||
|
background-color: #393b3e;
|
||||||
|
color: rgb(228, 228, 228);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.get-involved {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #2b2b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gi-card {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #641ddf;
|
||||||
|
border-radius: 1em;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate {
|
||||||
|
color: #D8DEE9;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5em;
|
||||||
|
}
|
||||||
49
css/rainbow/proxies.css
Normal file
49
css/rainbow/proxies.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.proxy-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 150px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #333334;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
border-radius: 35px;
|
||||||
|
-webkit-transition: 250ms ease-in-out;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy-list-item:hover {
|
||||||
|
color: #D8DEE9;
|
||||||
|
background-color: #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.proxy-list {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
199
css/rainbow/settings.css
Normal file
199
css/rainbow/settings.css
Normal file
|
|
@ -0,0 +1,199 @@
|
||||||
|
.toggle-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-text {
|
||||||
|
color: #272829;
|
||||||
|
}
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 5px #313233;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-setting {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
color: #3c3c3c;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#tab-cloak {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#icn-change {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background-color: #303643;
|
||||||
|
color: #e2e2e2;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounding {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bdr {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-break-large {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-notes-text {
|
||||||
|
color: #252525;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popular-cloaks-header {
|
||||||
|
color: #282828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
#themes {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.caret-icn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -43vh;
|
||||||
|
left: 56vw;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.item-wrapper {
|
||||||
|
height: 0px;
|
||||||
|
background-color: #303643;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.item:hover {
|
||||||
|
background-color: #2c3038;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue