20% of a settings page
This commit is contained in:
BluePotato102
+207
-1
@@ -11,6 +11,30 @@
|
||||
--scroll-track-color: #111;
|
||||
--font-color: #dcddde;
|
||||
--font-family: 'Assistant', sans-serif;
|
||||
|
||||
|
||||
--displacement: -0.1rem;
|
||||
--tremble: -10deg;
|
||||
--trembleF: 5deg;
|
||||
|
||||
--iPos: 50%;
|
||||
--bPos: -75%;
|
||||
--fPos: -50%;
|
||||
|
||||
--time: 430ms;
|
||||
|
||||
|
||||
--input-color: #99A3BA;
|
||||
--input-border: #CDD9ED;
|
||||
--input-background: #fff;
|
||||
--input-placeholder: #CBD1DC;
|
||||
--input-border-focus: #275EFE;
|
||||
--group-color: var(--input-color);
|
||||
--group-border: var(--input-border);
|
||||
--group-background: #EEF4FF;
|
||||
--group-color-focus: #fff;
|
||||
--group-border-focus: var(--input-border-focus);
|
||||
--group-background-focus: #678EFE;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -99,6 +123,14 @@ body.noscript {
|
||||
top: 2.5%;
|
||||
}
|
||||
|
||||
.setting-bg {
|
||||
width: 75%;
|
||||
background-color: var(--games-color);
|
||||
height: 70vh;
|
||||
overflow-y: scroll;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#title {
|
||||
z-index: 50;
|
||||
position: relative;
|
||||
@@ -169,6 +201,7 @@ body.noscript {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
logo img {
|
||||
z-index: 50;
|
||||
position: fixed;
|
||||
@@ -255,4 +288,177 @@ img[alt="Proxy Icon"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*Toggle switch*/
|
||||
|
||||
|
||||
.switch {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.switch__wrapper p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.switch__wrapper {
|
||||
text-align: center;
|
||||
margin: 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border: 2px solid red;
|
||||
border-radius: 99rem;
|
||||
transform-origin: left center;
|
||||
animation: checked__wrapper var(--time) ease-in forwards;
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
.switch__wrapper::before, .switch__wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #000;
|
||||
border-radius: inherit;
|
||||
transform-origin: inherit;
|
||||
animation: inherit;
|
||||
mix-blend-mode: inherit;
|
||||
}
|
||||
.switch__wrapper::before {
|
||||
--tremble: -12deg;
|
||||
--trembleF: -7deg;
|
||||
border-color: lime;
|
||||
animation-delay: 50ms;
|
||||
}
|
||||
.switch__wrapper::after {
|
||||
--tremble: -8deg;
|
||||
--trembleF: -4deg;
|
||||
border-color: blue;
|
||||
animation-delay: 75ms;
|
||||
}
|
||||
.switch__toggle {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 99rem;
|
||||
box-shadow: inset 0 0 0 2px #fff;
|
||||
transform-origin: inherit;
|
||||
animation: checked__toggle var(--time) ease-in forwards;
|
||||
}
|
||||
input:active + .switch__wrapper .switch__toggle {
|
||||
width: 1.6rem;
|
||||
}
|
||||
input:checked + .switch__wrapper {
|
||||
transform-origin: right center;
|
||||
animation-name: checked__wrapper--r;
|
||||
}
|
||||
input:checked + .switch__wrapper .switch__toggle {
|
||||
background: #fff;
|
||||
animation-name: checked__toggle--r;
|
||||
}
|
||||
@keyframes checked__wrapper {
|
||||
0%, 45%, 100% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
48% {
|
||||
transform: translateX(var(--displacement));
|
||||
filter: blur(0);
|
||||
}
|
||||
55% {
|
||||
transform: rotateZ(var(--tremble));
|
||||
filter: blur(1px);
|
||||
}
|
||||
65% {
|
||||
transform: rotateZ(var(--trembleF));
|
||||
}
|
||||
}
|
||||
@keyframes checked__wrapper--r {
|
||||
0%, 45%, 100% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
48% {
|
||||
transform: translateX(calc(-1 * var(--displacement)));
|
||||
filter: blur(0);
|
||||
}
|
||||
55% {
|
||||
transform: rotateZ(calc(-1 * var(--tremble)));
|
||||
filter: blur(1px);
|
||||
}
|
||||
65% {
|
||||
transform: rotateZ(calc(-1 * var(--trembleF)));
|
||||
}
|
||||
}
|
||||
@keyframes checked__toggle {
|
||||
0% {
|
||||
background: #fff;
|
||||
transform: translateX(var(--iPos)) scale(1.25, 1);
|
||||
}
|
||||
45% {
|
||||
background: #fff;
|
||||
transform: translateX(var(--bPos)) scale(1, 1);
|
||||
}
|
||||
50% {
|
||||
background: transparent;
|
||||
transform: translateX(var(--bPos)) scale(0.5, 1.1);
|
||||
}
|
||||
65% {
|
||||
transform: translateX(var(--bPos)) scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(var(--fPos));
|
||||
}
|
||||
}
|
||||
@keyframes checked__toggle--r {
|
||||
0% {
|
||||
background: transparent;
|
||||
transform: translateX(calc(-1 * var(--iPos))) scale(1.25, 1);
|
||||
}
|
||||
45% {
|
||||
background: transparent;
|
||||
transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
|
||||
}
|
||||
50% {
|
||||
background: #fff;
|
||||
transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1);
|
||||
}
|
||||
65% {
|
||||
transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-1 * var(--fPos)));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*input*/
|
||||
|
||||
.text-field {
|
||||
border: 1px solid var(--bg);
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
background-color: var(--games-color);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
/* Submit button styles */
|
||||
.submit-button {
|
||||
background-color: var(--button-color);
|
||||
color: var(--font-color);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/* Hover effect for the button */
|
||||
.submit-button:hover {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
+22
-1
@@ -232,7 +232,28 @@
|
||||
</div>
|
||||
<ul id="gamesList"></ul>
|
||||
</div>
|
||||
</section>
|
||||
<div class="settings">
|
||||
<div class="setting-bg">
|
||||
<h1>Settings</h1>
|
||||
<p>a dum description (add a better font later)</p>
|
||||
|
||||
<label class="switch">
|
||||
<p>toggle switch??</p>
|
||||
<input type="checkbox" id="toggle-1" hidden>
|
||||
<div class="switch__wrapper">
|
||||
<div class="switch__toggle"></div>
|
||||
</div>
|
||||
<p>input field??</p>
|
||||
</label>
|
||||
|
||||
<br><!--bad practice will fix in css later-->
|
||||
|
||||
<input class="text-field" type="text" placeholder="placeholder">
|
||||
<button class="submit-button">sumbmit</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="page-loader">
|
||||
<iframe></iframe>
|
||||
|
||||
Reference in New Issue
Block a user