revision history WIP
This commit is contained in:
926
public/style.css
926
public/style.css
@@ -1,464 +1,464 @@
|
||||
/* fullscreen flex container */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
/* fullscreen flex container */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
Reference in New Issue
Block a user