mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
669 lines
11 KiB
CSS
669 lines
11 KiB
CSS
.saper {
|
|
display: flex;
|
|
padding-top: 10%;
|
|
border-radius: 20px;
|
|
background: #17181C;
|
|
backdrop-filter: blur(100px);
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.bg {
|
|
background: #293561;
|
|
filter: blur(120px);
|
|
position: absolute;
|
|
top: 250px;
|
|
transform: rotate(180deg);
|
|
left: 200px;
|
|
width: 40%;
|
|
height: 55%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.bg-two {
|
|
background: #293561;
|
|
filter: blur(120px);
|
|
position: absolute;
|
|
top: 220px;
|
|
transform: rotate(330deg);
|
|
left: 600px;
|
|
width: 60%;
|
|
height: 35%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.saper-start {
|
|
z-index: 1;
|
|
margin-left: 5%;
|
|
border-radius: 20px;
|
|
background: #22252F;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
width: 27%;
|
|
height: 480px;
|
|
margin-top: 2.6%;
|
|
}
|
|
|
|
.padding-elements {
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.title-saper h2 {
|
|
padding: 16px 0 5px 0;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
line-height: 31px;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.saper-start__content p {
|
|
color: #FFFFFF84;
|
|
font-weight: 700;
|
|
line-height: 31px;
|
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.crystals h3,
|
|
.diamonds h3 {
|
|
color: #44C6EF54;
|
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 31px;
|
|
}
|
|
|
|
.crystals .crystals__choises input,
|
|
.diamonds .diamonds__choises input {
|
|
width: 110px;
|
|
height: 38px;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
line-height: 31px;
|
|
font-family: Montserrat Alternates;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
padding-left: 25px;
|
|
border: 2px solid #2B3458;
|
|
background: #22252F;
|
|
}
|
|
|
|
.crystals__choises {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.crystals .crystals__choises input:focus,
|
|
.diamonds .diamonds__choises input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.crystals-input__margin {
|
|
margin-left: -5.5%;
|
|
}
|
|
|
|
.btn-click {
|
|
border-radius: 10px !important;
|
|
background: #EF4444 !important;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
|
|
}
|
|
|
|
.crystals-btns__choices button,
|
|
.btn-style__diamonds button {
|
|
margin-left: 5px;
|
|
border-radius: 10px;
|
|
background: #252C47;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
border: none;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
line-height: 31px;
|
|
font-family: Montserrat Alternates;
|
|
font-size: 12px;
|
|
padding: 4px 23px;
|
|
}
|
|
|
|
.crystal-icon,
|
|
.diamond-icon {
|
|
position: relative;
|
|
left: 25px;
|
|
top: 2px;
|
|
}
|
|
|
|
.crystals-btns__display {
|
|
display: flex;
|
|
}
|
|
|
|
#diamonds-input {
|
|
width: 347px;
|
|
height: 38px;
|
|
}
|
|
|
|
.diamonds h3 {
|
|
margin: 1.2% 0 0 5.8%;
|
|
}
|
|
|
|
.diamonds-input__margin {
|
|
margin-left: -5.6%;
|
|
}
|
|
|
|
.diamonds .diamonds__choises input {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.diamond-icon {
|
|
top: 12px;
|
|
left: 35px;
|
|
}
|
|
|
|
.diamonds__btns {
|
|
margin: 2.5% 0 0 5.5%;
|
|
}
|
|
|
|
.diamonds-btns__display {
|
|
display: flex;
|
|
margin-left: -1%;
|
|
}
|
|
|
|
.btn-style__diamonds button {
|
|
padding: 4px 20px;
|
|
}
|
|
|
|
#max-button {
|
|
text-transform: uppercase;
|
|
font-family: Inter;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
padding: 4px 15px;
|
|
}
|
|
|
|
.saper-start__btns {
|
|
margin: 3.7% 2.7% 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.saper-start__btns button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-bottom: 5px;
|
|
border: none;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
line-height: 19px;
|
|
font-style: normal;
|
|
font-family: Inter;
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
.btn-start {
|
|
border-radius: 10px;
|
|
background: #EF4444;
|
|
}
|
|
|
|
.btn-claim {
|
|
border-radius: 10px;
|
|
background: #252C47;
|
|
}
|
|
|
|
.saper-start__steps {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
.steps-btns__display span {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: #adadad;
|
|
}
|
|
|
|
.steps-btns__display {
|
|
display: flex;
|
|
}
|
|
|
|
.btns-style__steps button {
|
|
border-radius: 10px;
|
|
background: #252C47;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
border: none;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-family: Montserrat Alternates;
|
|
font-size: 12px;
|
|
width: 100px;
|
|
height: 40px;
|
|
}
|
|
|
|
.error-block {
|
|
position: absolute;
|
|
top: 440px;
|
|
}
|
|
|
|
.error-block h2 {
|
|
color: #982f2f;
|
|
font-weight: 700;
|
|
font-family: Montserrat Alternates;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.animate-start-btn {
|
|
animation: shake 0.6s cubic-bezier(.36, .07, .19, .97);
|
|
opacity: 50%;
|
|
}
|
|
|
|
/* Saper Game */
|
|
|
|
.start-game {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 45%;
|
|
background: #262C48;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.saper-game {
|
|
margin: -2.75% 0 0 5.1%;
|
|
}
|
|
|
|
.saper-game__content {
|
|
display: flex;
|
|
border-radius: 20px;
|
|
background: #22252F;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
width: 85%;
|
|
height: 580px;
|
|
}
|
|
|
|
.square {
|
|
border-radius: 10px;
|
|
background: #252C47;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
width: 95px;
|
|
height: 95px;
|
|
cursor: pointer;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.square-fliper {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.square h2 {
|
|
transition: .2s;
|
|
opacity: 1;
|
|
user-select: none;
|
|
}
|
|
|
|
.square-text {
|
|
color: #303751;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 33px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
padding-top: 25px;
|
|
}
|
|
|
|
.game {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.game-end {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
filter: blur(5px);
|
|
}
|
|
|
|
.img-style-click {
|
|
position: relative;
|
|
width: 110px;
|
|
height: 110px;
|
|
top: -70px;
|
|
user-select: none;
|
|
}
|
|
|
|
.crystal-img {
|
|
left: -5px;
|
|
}
|
|
|
|
.game-start {
|
|
pointer-events: unset !important;
|
|
}
|
|
|
|
.game-start__menu-off .crystals,
|
|
.game-start__menu-off .diamonds,
|
|
.game-start__menu-off .saper-start__btns .btn-start {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hidden {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.display-lines {
|
|
display: flex;
|
|
}
|
|
|
|
.margin-lines .firstline {
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.margin-lines {
|
|
padding-left: 4%;
|
|
}
|
|
|
|
.margin-lines li {
|
|
margin: 2% 10px 1% 0;
|
|
}
|
|
|
|
.info-emeralds {
|
|
margin: 13.5% 0 0 10.5%;
|
|
}
|
|
|
|
.info-crystals__count {
|
|
position: relative;
|
|
}
|
|
|
|
.card-style-count {
|
|
width: 40%;
|
|
text-align: center;
|
|
font-family: "Montserrat Alternates";
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 1% 1%;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
border-radius: 25px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.on-element-card {
|
|
opacity: 1 !important;
|
|
transition: opacity .4s ease;
|
|
}
|
|
|
|
.emeralds-bg {
|
|
background: #6BC884;
|
|
top: -22%;
|
|
left: 12%;
|
|
}
|
|
|
|
.crystals-bg {
|
|
background: #EF4444;
|
|
top: -20%;
|
|
left: 12%;
|
|
}
|
|
|
|
.card-info {
|
|
border-radius: 15px;
|
|
border: 1px solid #2B4D6C;
|
|
background: linear-gradient(180deg, #252C47 0%, #252C47 8.33%, rgba(37, 44, 71, 0.00) 100%);
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
width: 85%;
|
|
height: 250px;
|
|
}
|
|
|
|
.text-style__subtitle h2 {
|
|
margin: 8% 0 6px 6.3%;
|
|
color: #FFF;
|
|
font-weight: 800;
|
|
line-height: 18px;
|
|
text-transform: uppercase;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.text-style__comment p {
|
|
margin-left: 6.3%;
|
|
color: #9CA5C7;
|
|
font-weight: 400;
|
|
line-height: 13px;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
|
|
font-family: Montserrat Alternates;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.info-crystals {
|
|
margin: 13.5% 0 0 10.5%;
|
|
}
|
|
|
|
.circles__content {
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
left: 17px;
|
|
}
|
|
|
|
.circles {
|
|
position: absolute;
|
|
}
|
|
|
|
.circles-1 {
|
|
top: 125px;
|
|
}
|
|
|
|
.circles-2 {
|
|
top: 235px;
|
|
}
|
|
|
|
.circles-3 {
|
|
top: 345px;
|
|
}
|
|
|
|
.circles-4 {
|
|
top: 455px;
|
|
}
|
|
|
|
/* /Saper Game */
|
|
|
|
/* Media */
|
|
|
|
@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
|
|
.saper-game__content {
|
|
width: auto;
|
|
}
|
|
|
|
.saper-start {
|
|
width: 30%;
|
|
height: 500px;
|
|
}
|
|
|
|
.btns-style__steps button {
|
|
width: 60px;
|
|
height: 50px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
margin-right: 29px !important;
|
|
}
|
|
|
|
.steps-btns__display {
|
|
justify-content: center;
|
|
}
|
|
|
|
.margin-lines .firstline {
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.info-emeralds {
|
|
margin-top: 6.5%;
|
|
}
|
|
|
|
.info-crystals {
|
|
margin-top: 6.5%;
|
|
}
|
|
|
|
.crystals-btns__choices button,
|
|
.btn-style__diamonds button {
|
|
padding: 4px 13px;
|
|
}
|
|
|
|
.diamond-icon {
|
|
top: 12px;
|
|
left: 35px;
|
|
}
|
|
|
|
#diamonds-input {
|
|
width: 60%;
|
|
}
|
|
|
|
.btns-style__steps button {
|
|
padding: 6px 9px;
|
|
}
|
|
.emeralds-bg {
|
|
top: -23%;
|
|
}
|
|
.crystals-bg {
|
|
top: -21%;
|
|
}
|
|
.card-info img {
|
|
width: 100%;
|
|
}
|
|
|
|
.circles-1 {
|
|
top: 110px;
|
|
}
|
|
|
|
.circles-2 {
|
|
top: 220px;
|
|
}
|
|
|
|
.circles-3 {
|
|
top: 330px;
|
|
}
|
|
|
|
.circles-4 {
|
|
top: 440px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
|
|
.bg-two {
|
|
left: 300px;
|
|
}
|
|
|
|
.saper-game__content {
|
|
width: auto;
|
|
}
|
|
|
|
.saper-start {
|
|
width: 30%;
|
|
height: 510px;
|
|
}
|
|
|
|
.steps-btns__display {
|
|
justify-content: center;
|
|
}
|
|
|
|
.btns-style__steps button {
|
|
width: 60px;
|
|
height: 50px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
margin-right: 30px !important;
|
|
}
|
|
|
|
.margin-lines .firstline {
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.square {
|
|
width: 75px;
|
|
}
|
|
|
|
.img-style-click {
|
|
left: -15px;
|
|
}
|
|
|
|
.info-emeralds {
|
|
margin-top: 6.5%;
|
|
}
|
|
|
|
.info-crystals {
|
|
margin-top: 6.5%;
|
|
}
|
|
|
|
.text-style__subtitle h2 {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.text-style__comment p {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.crystals-btns__choices button,
|
|
.btn-style__diamonds button {
|
|
padding: 4px 7px;
|
|
}
|
|
|
|
.diamonds-btns__display {
|
|
margin-left: 3%;
|
|
}
|
|
|
|
.diamond-icon {
|
|
top: 12px;
|
|
left: 35px;
|
|
}
|
|
|
|
#diamonds-input {
|
|
width: 60%;
|
|
}
|
|
|
|
.btns-style__steps button {
|
|
padding: 6px 4px;
|
|
}
|
|
.emeralds-bg {
|
|
top: -24%;
|
|
}
|
|
.crystals-bg {
|
|
top: -22%;
|
|
}
|
|
.card-info img {
|
|
width: 100%;
|
|
}
|
|
|
|
.circles__content {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* /Media */
|
|
|
|
/* Swiper */
|
|
|
|
.swiper {
|
|
user-select: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.swiper-button-prev:after,
|
|
.swiper-button-next:after {
|
|
font-size: 30px;
|
|
color: rgb(210 31 31 / 62%);
|
|
}
|
|
|
|
/* /Swiper */ |