Skip to content

Commit

Permalink
Update styles.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@pakelcomedy
pakelcomedy committed Dec 13, 2024
1 parent 182d3af commit e873c8c
Showing 1 changed file with 61 additions and 61 deletions.
122 changes: 61 additions & 61 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,71 +10,71 @@ body {

/* Slot Machine Wrapper */
.slot-wrapper {
max-width: 1100px;
max-height: 735px;
margin: 50px auto;
padding: 50px;
max-width: 1045px;
max-height: 698.25px;
margin: 47.5px auto;
padding: 47.5px;
background: linear-gradient(145deg, #2a2a2a, #3b3b3b);
border-radius: 25px;
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.05);
border-radius: 23.75px;
box-shadow: 0px 28.5px 47.5px rgba(0, 0, 0, 0.6), inset 0 0 19px rgba(255, 255, 255, 0.05);
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: transform 0.4s ease;
transition: transform 0.38s ease;
}

.slot-wrapper:hover {
transform: scale(1.05);
transform: scale(1.0475);
}

/* Slot Container */
.slot-container {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 40px;
gap: 9.5px;
margin-bottom: 38px;
width: 100%;
flex-wrap: nowrap;
}

/* Slot Column */
.slot-column {
width: 140px;
height: 450px; /* Ensure enough height for 5 items */
width: 133px;
height: 427.5px; /* Ensure enough height for 5 items */
overflow: hidden;
border: 3px solid #444;
border-radius: 20px;
border: 2.85px solid #444;
border-radius: 19px;
background: linear-gradient(180deg, #2e2e2e, #1a1a1a);
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
box-shadow: inset 0 0 19px rgba(0, 0, 0, 0.5), 0 4.75px 14.25px rgba(0, 0, 0, 0.3);
transition: all 0.38s ease;
}

.slot-column:hover {
transform: translateY(-10px);
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.1), 0 15px 30px rgba(0, 0, 0, 0.5);
transform: translateY(-9.5px);
box-shadow: inset 0 0 23.75px rgba(255, 255, 255, 0.1), 0 14.25px 28.5px rgba(0, 0, 0, 0.5);
}

/* Slot Item */
.slot-item {
width: 100%;
height: 90px; /* Ensure consistent height */
font-size: 2.5rem;
height: 85.5px; /* Ensure consistent height */
font-size: 2.375rem;
font-weight: bold;
color: #f4d03f;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #555;
border-bottom: 0.95px solid #555;
background: linear-gradient(145deg, #3a3a3a, #1f1f1f);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.4s ease-out, box-shadow 0.3s ease;
box-shadow: 0 2.85px 5.7px rgba(0, 0, 0, 0.3);
transition: transform 0.38s ease-out, box-shadow 0.285s ease;
}

.slot-item:hover {
transform: scale(1.15);
box-shadow: 0 10px 20px rgba(244, 208, 63, 0.7);
transform: scale(1.0925);
box-shadow: 0 9.5px 19px rgba(244, 208, 63, 0.7);
background: linear-gradient(145deg, #ffeaa7, #f4d03f);
color: #000;
}
Expand All @@ -84,31 +84,31 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
margin-top: 28.5px;
background: linear-gradient(145deg, #444, #222);
padding: 25px 35px;
border-radius: 20px;
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease;
gap: 25px;
padding: 23.75px 33.25px;
border-radius: 19px;
box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), inset 0 0 9.5px rgba(255, 255, 255, 0.05);
transition: transform 0.285s ease;
gap: 23.75px;
}

.slot-controls:hover {
transform: translateY(-10px);
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.4);
transform: translateY(-9.5px);
box-shadow: 0px 28.5px 47.5px rgba(0, 0, 0, 0.4);
}

/* Info Styling */
.slot-controls .info {
font-size: 1.8rem;
font-size: 1.71rem;
color: #f4d03f;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
text-shadow: 1.9px 1.9px 3.8px rgba(0, 0, 0, 0.3);
}

.slot-controls .info span {
display: inline-block;
margin: 0 25px;
margin: 0 23.75px;
}

.slot-controls .info span strong {
Expand All @@ -117,32 +117,32 @@ body {

/* Start Button */
.btn-danger {
font-size: 1.6rem;
padding: 15px 40px;
font-size: 1.52rem;
padding: 14.25px 38px;
background: linear-gradient(145deg, #e74c3c, #c0392b);
color: white;
border: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0px 10px 25px rgba(231, 76, 60, 0.5);
border-radius: 47.5px;
transition: all 0.285s ease;
box-shadow: 0px 9.5px 23.75px rgba(231, 76, 60, 0.5);
}

.btn-danger:hover {
background: linear-gradient(145deg, #ff6f61, #ff4c4c);
transform: scale(1.1);
box-shadow: 0px 15px 30px rgba(231, 76, 60, 0.7);
transform: scale(1.0475);
box-shadow: 0px 14.25px 28.5px rgba(231, 76, 60, 0.7);
}

.btn-danger:focus {
outline: none;
box-shadow: 0px 5px 20px rgba(231, 76, 60, 0.8);
box-shadow: 0px 4.75px 19px rgba(231, 76, 60, 0.8);
}

/* Spotlight Effect for Winning Items */
.spotlight {
animation: spotlight-animation 1.2s ease-in-out forwards;
border: 3px solid #FFD700;
box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.8);
animation: spotlight-animation 1.14s ease-in-out forwards;
border: 2.85px solid #FFD700;
box-shadow: 0 0 19px 9.5px rgba(255, 215, 0, 0.8);
}

@keyframes spotlight-animation {
Expand All @@ -151,7 +151,7 @@ body {
opacity: 1;
}
50% {
transform: scale(1.2);
transform: scale(1.14);
opacity: 1;
}
100% {
Expand All @@ -163,8 +163,8 @@ body {
/* Responsive Design */
@media (max-width: 1024px) {
.slot-wrapper {
padding: 25px;
max-width: 90%;
padding: 23.75px;
max-width: 85.5%;
}

.slot-container {
Expand All @@ -173,8 +173,8 @@ body {
}

.slot-column {
width: 100px;
height: 450px; /* Maintain height for 5 rows */
width: 95px;
height: 427.5px; /* Maintain height for 5 rows */
}

.slot-controls {
Expand All @@ -184,14 +184,14 @@ body {
}

.btn-danger {
font-size: 1.4rem;
padding: 12px 30px;
font-size: 1.33rem;
padding: 11.4px 28.5px;
}
}

@media (max-width: 768px) {
.slot-wrapper {
padding: 15px;
padding: 14.25px;
}

.slot-container {
Expand All @@ -200,18 +200,18 @@ body {
}

.slot-column {
width: calc(100% / 6); /* Dynamically adjust width for 6 columns */
height: 450px; /* Maintain height for 5 rows */
border-radius: 15px; /* Adjust border-radius for smaller screens */
width: calc(95% / 6); /* Dynamically adjust width for 6 columns */
height: 427.5px; /* Maintain height for 5 rows */
border-radius: 14.25px; /* Adjust border-radius for smaller screens */
}

.slot-item {
font-size: 2rem;
height: 90px; /* Ensure consistent height */
font-size: 1.9rem;
height: 85.5px; /* Ensure consistent height */
}

.slot-controls {
padding: 20px 30px;
padding: 19px 28.5px;
flex-direction: column;
align-items: center;
}
Expand Down

0 comments on commit e873c8c

Please sign in to comment.