From 090c9c144b7dc87eb79f6ab0d00599ce936713cc Mon Sep 17 00:00:00 2001 From: Bikram Date: Fri, 7 Jul 2023 00:18:35 +0530 Subject: [PATCH] Update Style.css --- Games/Master_Typing/style.css | 295 +++------------------------------- 1 file changed, 19 insertions(+), 276 deletions(-) diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css index 1b106a1018..91d0913331 100644 --- a/Games/Master_Typing/style.css +++ b/Games/Master_Typing/style.css @@ -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; -} \ No newline at end of file +/* Add other necessary CSS styles as per your requirements */