Skip to content

Commit

Permalink
Introduce new 3d themes and crop image feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dor-sketch
Dor-sketch committed Jun 25, 2024
1 parent 63a0569 commit d1b89d3
Show file tree
Hide file tree
Showing 3 changed files with 249 additions and 150 deletions.
190 changes: 117 additions & 73 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,18 @@
.dark-theme {
--background-color: #121212;
/* Darker gray for deep mode, reducing eye strain */
--text-color: #E0E0E0;
--text-color: #d3fdc0;
/* d3fdc0 */
/* Light gray for text, ensuring legibility */
--board-background-color: #1E1E1E;
/* Slightly lighter than background for subtle layering */
--cell-border-color: #333333;
/* Dark gray for defined cell borders in dark mode */
--cell-background-color: #1E1E1E;
--cell-background-color: #2E2E2E;
/* Consistent with board background for seamless appearance */
--cell-hover-background-color: #2E2E2E;
/* Noticeably lighter for hover state distinction */
--cell-focus-background-color: #3949AB;
--cell-focus-background-color: #deffd7;
/* Deep blue for focus, ensuring visibility and contrast */
--cell-focus-shadow-color: #5C6BC0;
/* Slightly lighter blue for a glowing focus effect */
Expand All @@ -70,37 +71,51 @@

#sudoku-board {
display: grid;
grid-template-columns: repeat(9, 60px);
grid-template-rows: repeat(9, 60px);
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 1px;
background-color: var(--board-background-color);
padding: 10px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

width: 100%;
max-width: 600px; /* Limit the maximum width */
height: auto; /* Adjust height automatically */
aspect-ratio: 1; /* Keep the aspect ratio square */
margin: auto; /* Center the board horizontally */
position: fixed; /* Keep it in view at all times */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust position to center */
background-color: var(--board-background-color);
}

.cell {
width: 60px;
height: 60px;
width: 60px; /* Fixed width, consider making this responsive */
height: 60px; /* Fixed height, consider making this responsive */
text-align: center;
font-size: 24px;
line-height: 60px;
border: 1px solid var(--cell-border-color);
background-color: var(--cell-background-color);
margin: 1px;
line-height: 60px; /* Adjust line height for vertical centering */
outline: none;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
/* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); */
transition: background-color 0.2s, box-shadow 0.2s;
font-weight: bold;
background-clip: padding-box; /* Ensure background does not cover the borders */
}

.cell:hover {
background-color: var(--cell-hover-background-color);
#sudoku-board::before {
content: "";
background-image: linear-gradient(90deg, #81E6D9 0%, #81E6D9 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 10px;
}

.cell:focus {
background-color: var(--cell-focus-background-color);
box-shadow: 0 0 0 2px var(--cell-focus-shadow-color);
.cell:hover {
background-color: var(--cell-hover-background-color);
}

.actions {
Expand All @@ -119,7 +134,6 @@
border-radius: 5px;
background-color: var(--button-background-color);
color: var(--text-color);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;

Expand Down Expand Up @@ -149,7 +163,11 @@
/*make semi transparent*/
background-color: rgba(0, 0, 0, 0.5);
/* also for safari */
backdrop-filter: blur(10px);
backdrop-filter: saturate(180%) blur(20px); /* Creates a frosted */
text-decoration: none;
backdrop-filter: blur(10px); /* Adjust blur value as needed */
-webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* This line activates blur*/
;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
transition: background 0.3s;
Expand All @@ -174,9 +192,6 @@
transition: border 0.3s ease;
}

#input-board:focus {
border: 2px solid #2B6CB0;
}

.footer {
display: flex;
Expand Down Expand Up @@ -223,43 +238,7 @@
}
}

#sudoku-board {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
width: 100%;
/* Make the board fill the container width */
max-width: 600px;
/* Optional: limit the maximum width */
height: auto;
/* Adjust height automatically */
aspect-ratio: 1;
/* Keep the aspect ratio of the board to be square */
margin: auto;
/* Center the board horizontally */
position: fixed;
/* Use fixed to keep it in view at all times */
top: 50%;
/* Start at the middle of the screen vertically */
left: 50%;
/* Start at the middle of the screen horizontally */
transform: translate(-50%, -50%);
/* Adjust the position to truly center the board */
}

.cell {
width: 100%;
/* Make cell fill the column */
height: 100%;
/* Make cell fill the row */
font-size: 4vw;
/* Adjust font size based on viewport width */
line-height: normal;
/* Adjust line height to normal */
display: flex;
justify-content: center;
align-items: center;
}

.actions {
/*below the board but above the footer */
Expand All @@ -274,6 +253,18 @@
}

@media screen and (max-width: 600px) {
#sudoku-board {
width: 100%;
max-width: 100%;
border-radius: 0;
gap: 0;
}
.cell {
width: 8vw;
height: 8vw;
font-size: 18px;
line-height: 8vw;
}


h1 {
Expand All @@ -291,7 +282,11 @@
/*semi transparent*/
background-color: rgba(0, 0, 0, 0.5);
/* also for safari */
backdrop-filter: blur(10px);
backdrop-filter: saturate(180%) blur(20px); /* Creates a frosted */
text-decoration: none;
backdrop-filter: blur(10px); /* Adjust blur value as needed */
-webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* This line activates blur*/
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}
}
Expand Down Expand Up @@ -343,14 +338,16 @@
position: fixed;
top: 50%;
left: 50%;
line-height: 1.5;
transform: translate(-50%, -50%);
background-color: var(--background-color);
padding: 20px;
padding-bottom: 10px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
max-width: 90%;
width: 400px;
z-index: 1000;
z-index: 2;
transition: all 0.3s ease;
overflow-y: auto;
max-height: 80vh;
Expand All @@ -361,10 +358,18 @@
justify-content: center;
/* Center content vertically */
}
.tutorial-popup p, .tutorial-popup ul {
margin: 0 0 15px 0;
padding: 0;
align-self: start;
text-align: left;
}

.tutorial-step {
display: none;
animation: fadeIn 0.3s ease;
align-items: center;
text-align: center;
}

.tutorial-step p,
Expand All @@ -388,7 +393,6 @@
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

Expand All @@ -403,7 +407,6 @@
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
Expand All @@ -421,7 +424,6 @@
border: none;
/* padding: 10px 20px; */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

Expand Down Expand Up @@ -494,12 +496,11 @@

#processedImageContainer {
display: none; /* Hidden by default */
position: fixed; /* Overlay */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
/* background-color: rgba(0, 0, 0, 0.5); Semi-transparent background */
z-index: 2; /* Ensure it's above other content */
justify-content: center;
align-items: center;
Expand All @@ -512,21 +513,19 @@
}

.processingMessage {
color: white;
color: var(--text-color);
margin-top: 20px;
}

#processedImageContainer.show {
display: flex; /* Show the container */
}
label {
cursor: pointer;
padding: 10px 20px;
background-color: var(--footer-text-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
Expand All @@ -537,7 +536,6 @@ label {
padding: 10px 25px; /* Adjust padding if needed */
box-shadow: none; /* Removes box-shadow */
border-radius: 5px; /* Adds rounded corners */
cursor: pointer; /* Changes cursor to pointer on hover */
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; /* Adds smooth transition effects */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
margin-right: 0.5rem;
Expand Down Expand Up @@ -585,6 +583,11 @@ label {
flex: 1;
}

#confirmCrop {
display: none; /* Hidden by default */
}


:root {
--cell-border-color-darker: #000000; /* Temporarily set to black for visibility */
}
Expand All @@ -605,4 +608,45 @@ label {
.grid-container > .cell:nth-child(n+19):nth-child(-n+27),
.grid-container > .cell:nth-child(n+10):nth-child(-n+18) {
border-bottom: 2px solid var(--cell-border-color-darker); /* Thicker bottom border for group separation */
}
}


#sudoku-board::before {
content: ''; /* Add a pseudo-element */
position: absolute; /* Position it absolutely */
top: 0; /* Align it to the top */
left: 0; /* Align it to the left */
width: 100%; /* Make it span the entire width */
height: 100%; /* Make it span the entire height */
background:
linear-gradient(90deg, transparent calc(33.33% - 2px), var(--cell-border-color-darker) 33.33%, var(--cell-border-color-darker) calc(33.33% + 2px), transparent calc(66.66% - 2px), var(--cell-border-color-darker) 66.66%, var(--cell-border-color-darker) calc(66.66% + 2px), transparent), /* Add vertical lines */
linear-gradient(0deg, transparent calc(33.33% - 2px), var(--cell-border-color-darker) 33.33%, var(--cell-border-color-darker) calc(33.33% + 2px), transparent calc(66.66% - 2px), var(--cell-border-color-darker) 66.66%, var(--cell-border-color-darker) calc(66.66% + 2px), transparent); /* Add horizontal lines */
background-size: 100% 100%; /* Set the size of the background */
z-index: 1; /* Ensure it's behind the cells */
}
/* Reset the cell border color */
:root {
--cell-border-color-darker: #E0E0E0; /* Reset the cell border color */
}

/* Add a hover effect to the cells */
.cell:hover {
background-color: var(--cell-hover-background-color); /* Change the background color on hover */
}

:root {
--cell-border-color-darker: #E0E0E0; /* Reset the cell border color */
--cell-border-color: #CCCCCC; /* Define regular cell border color */
--cell-hover-background-color: #F0F0F0; /* Define hover background color */
}

/* Base cell styling with padding */
.cell {
z-index: 2; /* Ensure cell content is above the pseudo-element */
}

/* Adjustments for group separation and 3D effect */
#sudoku-board::before {
/* Existing styles */
z-index: 1; /* Ensure it's behind the cells */
}
Loading

0 comments on commit d1b89d3

Please sign in to comment.