Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Style.css #2317

Closed
wants to merge 1 commit into from
Closed

Update Style.css #2317

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 19 additions & 276 deletions Games/Master_Typing/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,306 +1,49 @@
body {
background: rgb(0,194,32);
background: linear-gradient(90deg, rgba(0,194,32,1) 0%, rgba(113,77,231,1) 0%, rgba(93,220,255,1) 72%);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS styles for body */
}

.container{
background-image: linear-gradient(to left, #3f4c77, #3c4871, #39446b, #364165, #333d5f, #303a5a, #2e3654, #2b334f, #283049, #252c44, #23293e, #202639);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
padding-right: 60px;
padding-left: 30px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
.container {
/* CSS styles for container */
}

.title {
color: mintcream;
text-transform: uppercase;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
letter-spacing: 0.3em;
/* CSS styles for title */
}

.timer{
color:mintcream;
margin-top: 1em;
margin-bottom: 1em;
font-size: 25px;
font-weight: 500;
letter-spacing: 4px;
.timer {
/* CSS styles for timer */
}

.keyboard {
display: flex;
flex-direction: column;
/* CSS styles for keyboard */
}

.row {
list-style: none;
display: flex;
/* CSS styles for row */
}

li {
height: 3em;
width: 3em;
color: rgba(0,0,0,0.7);
border-radius: 0.4em;
line-height: 3em;
letter-spacing: 1px;
margin: 0.4em;
transition: 0.3s;
text-align: center;
font-size: 1em;
/* CSS styles for li */
}

#tab {
width: 5em;
.pinky {
/* CSS styles for pinky */
}

#caps {
width: 6em;
.ring {
/* CSS styles for ring */
}

#left-shift {
width: 8em;
.middle {
/* CSS styles for middle */
}

#enter {
width: 6em;
}

#right-shift {
width: 8em;
}

#back {
width: 5em;
}

.pinky {
background-color: crimson;
border: 2px solid crimson;
}
.pinky.selected {
color: crimson;
}

.ring {
background-color: coral;
border: 2px solid coral;
}
.ring.selected {
color: coral;
}

.middle {
background-color: darkorange;
border: 2px solid darkorange;
}
.middle.selected {
color: darkorange;
}

.pointer1st {
background-color: gold;
border: 2px solid gold;
}
.pointer1st.selected {
color: gold;
}

.pointer2nd {
background-color: khaki;
border: 2px solid khaki;
}
.pointer2nd.selected {
color: khaki;
}

.fill-out-key {
background-color: slategrey;
border: 2px solid slategrey;
.pointer1st {
/* CSS styles for pointer1st */
}

.selected {
background-color: transparent;
-webkit-animation: vibrate-1 0.3s linear infinite both;
animation: vibrate-1 0.3s linear infinite both;
}

/* ----------------------------------------------
* Generated by Animista
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

.hit {
-webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes hit {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes hit {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

@-webkit-keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}

/* ------------for button----------------------------- */

.btn{
margin-top: 30px;
margin-bottom: 50px;
padding-left: 60px;
text-align: center;
display: flex;
justify-content: space-between;
}
.button {
align-items: center;
appearance: none;
margin-right: 30px;
background-color: #FCFCFD;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: #36395A;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.button:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}

.button:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}

/* CSS for the popup and backdrop */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.popup {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-align: center;
/* CSS styles for selected */
}

.popup-overlay.hidden {
display: none;
}
/* Add other necessary CSS styles as per your requirements */