Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@SUMAn9682
SUMAn9682 authored Oct 5, 2024
1 parent 22daa0d commit 4a04120
Showing 1 changed file with 51 additions and 83 deletions.
134 changes: 51 additions & 83 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

#scoreBox, #HighScoreBox {
position: absolute;
font-size: 2.5vh; /* Responsive font size */
font-size: 4vh; /* Default large font size */
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
font-family: 'Poppins', sans-serif;
Expand All @@ -33,17 +33,30 @@
#scoreBox {
top: 2vh;
right: 5vw; /* Responsive positioning */
color :#000000;
font-size: 40px;
color: #000000;
}

#HighScoreBox {
top: 8vh;
right: 5vw;
color :#000000;
font-size: 40px;
color: #000000;
}

/* Media query for small devices (phones) */
@media (max-width: 768px) {
#scoreBox, #HighScoreBox {
font-size: 5vh; /* Increase font size for smaller screens */
}
}

/* Media query for very small devices (phones in landscape) */
@media (max-width: 480px) {
#scoreBox, #HighScoreBox {
font-size: 6vh; /* Further increase font size for very small screens */
}
}


#board {
/* background-image: radial-gradient(circle, rgb(0, 204, 255), rgb(9, 140, 215)); */
width: 80vw; /* Responsive width */
Expand Down Expand Up @@ -125,120 +138,75 @@
}
}

/* Existing CSS remains unchanged */

/* Existing CSS remains unchanged */

/* Style for the control buttons container */
/* Style for the control buttons container */
/* Style for the control buttons container */
/* General control buttons positioning */
#controls {
position: absolute;
bottom: 5vh; /* Adjust for space below board */
bottom: 2vh; /* Place the buttons at the bottom */
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column; /* Arrange buttons vertically */
align-items: center; /* Center the buttons */
gap: 50px; /* Space between rows */
flex-direction: row; /* Arrange buttons horizontally */
align-items: center;
gap: 4vw; /* Space between buttons, adjusted for screen size */
z-index: 20; /* Ensure buttons are above other elements */
max-width: 90vw; /* Prevent buttons from going outside the viewport */
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Style for individual button containers for horizontal alignment */
#leftRightContainer {
display: flex;
justify-content: center;
gap: 40px; /* Space between left and right buttons */
}

/* Style for buttons */
/* Style for individual buttons */
.control-button {
font-size: 3vh; /* Responsive font size for buttons */
padding: 15px 20px; /* Larger clickable area */
background-color: rgba(255, 255, 255, 0.9); /* Slight transparency */
font-size: 4vh; /* Responsive font size for buttons */
padding: 10px 15px; /* Adjust padding for larger clickable area */
background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent */
border: none;
border-radius: 15px; /* Rounded corners */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Button shadow */
border-radius: 15px; /* More rounded corners */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Improved shadow */
cursor: pointer;
transition: all 0.2s; /* Smooth transition */
}

/* Hover effect for buttons */
.control-button:hover {
background-color: rgba(0, 150, 255, 0.8); /* Hover effect color */
transform: scale(1.1); /* Enlarge on hover */
}

/* Pressed state for buttons */
.control-button:active {
transform: scale(0.95); /* Shrink on press */
background-color: rgba(0, 120, 200, 0.8); /* Darker color on press */
transition: all 0.2s; /* Smooth transition for all properties */
max-width: 15vw; /* Ensure buttons scale down on smaller screens */
flex-shrink: 0; /* Prevent shrinking */
}

/* Button color styles */
/* Specific styles for the directional buttons */
#upButton {
background-color: #28a745; /* Green for up button */
background-color: #28a745; /* Green color for the up button */
}

#downButton {
background-color: #dc3545; /* Red for down button */
background-color: #dc3545; /* Red color for the down button */
}

#leftButton {
background-color: #ffc107; /* Yellow for left button */
background-color: #ffc107; /* Yellow color for the left button */
}

#rightButton {
background-color: #17a2b8; /* Cyan for right button */
background-color: #17a2b8; /* Cyan color for the right button */
}

/* Media query for smaller screens (responsive design) */
/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
#controls {
bottom: 5h; /* Push controls higher to avoid overlap */
gap: 30px; /* Reduce gap between buttons for mobile */
}

#leftRightContainer {
gap: 20px; /* Reduce gap between left and right buttons */
bottom: 1vh; /* Adjust bottom position for smaller screens */
gap: 3vw; /* Adjust the gap between buttons */
}

.control-button {
font-size: 4vh; /* Larger buttons for easier tap */
padding: 10px 15px; /* Smaller padding for compact size */
font-size: 3.5vh; /* Reduce button size on smaller screens */
padding: 8px 10px; /* Reduce padding for smaller screens */
max-width: 20vw; /* Scale buttons down to fit smaller screens */
}
}

/* Media query for very small devices (like phones in landscape mode) */
/* Additional tweaks for very small devices */
@media (max-width: 480px) {
#controls {
bottom: 10vh; /* Increase space below controls to prevent overlapping */
}

#leftRightContainer {
gap: 10px; /* Further reduce gap between buttons */
gap: 2vw; /* Reduce gap between buttons */
}

.control-button {
font-size: 3.5vh; /* Adjust font size for very small screens */
padding: 8px 12px; /* Smaller padding for compact layout */
}
}

/* Adjust the board size for mobile devices */
@media (max-width: 768px) {
#board {
width: 90vw; /* Full width for smaller screens */
height: 90vw;
max-width: 70vh; /* Adjust board size to avoid overlap */
max-height: 70vh;
}
}

@media (max-width: 480px) {
#board {
width: 95vw; /* Nearly full screen width on very small devices */
height: 95vw;
max-width: 60vh; /* Adjust max size to prevent overlap */
max-height: 60vh;
font-size: 3vh; /* Further reduce button size */
padding: 5px 8px; /* Further reduce padding */
max-width: 25vw; /* Ensure buttons scale down on small screens */
}
}

0 comments on commit 4a04120

Please sign in to comment.