Fix CSS linting, organize properly
This commit is contained in:
parent
9082fb9762
commit
94b7959fd8
GPG Key ID:
37036C356E56CC51
@ -42,7 +42,8 @@ body {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 3999; /* Below widget container but above everything else */
|
||||
/* background: rgba(0,0,0,0.2); Optional: dim background */
|
||||
|
||||
/* background: rgb(0 0 0 / 20%); Optional: dim background */
|
||||
}
|
||||
|
||||
/* App Header */
|
||||
@ -74,7 +75,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
@ -98,7 +99,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
/* User Menu Popover */
|
||||
@ -114,19 +115,17 @@ body {
|
||||
width: 280px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
|
||||
padding: 1rem;
|
||||
z-index: 3001;
|
||||
}
|
||||
|
||||
.menu-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
z-index: 3000; /* Below popover but above everything else */
|
||||
/* background: rgba(0,0,0,0.1); Optional dimming */
|
||||
|
||||
/* background: rgb(0 0 0 / 10%); Optional dimming */
|
||||
}
|
||||
|
||||
.user-status {
|
||||
@ -174,6 +173,7 @@ body {
|
||||
.text-primary {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #dc3545;
|
||||
}
|
||||
@ -198,7 +198,7 @@ body {
|
||||
}
|
||||
|
||||
/* Settings Pane Mobile Overrides */
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.settings-pane.sidebar {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
@ -258,7 +258,7 @@ body {
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
|
||||
box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
|
||||
}
|
||||
|
||||
.edit-actions {
|
||||
@ -275,7 +275,7 @@ body {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin: 0 0 0.5rem 0;
|
||||
margin: 0 0 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@ -298,6 +298,16 @@ body {
|
||||
background: #0069d9;
|
||||
}
|
||||
|
||||
.meta-info a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.meta-info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -318,112 +328,6 @@ body {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.place-details {
|
||||
}
|
||||
|
||||
.place-details h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.place-details .place-type {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
text-transform: capitalize;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.place-details .place-description {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.place-details .actions {
|
||||
padding-bottom: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
/* width: 50%; */
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.4rem 1rem !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
border: 1px solid #898989;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: #333;
|
||||
border: 1px solid rgba(255, 204, 51, 0.2);
|
||||
background: rgba(255, 204, 51, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 204, 51, 0.4);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background: #198754;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-green:hover {
|
||||
background: #157347;
|
||||
}
|
||||
|
||||
.places-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -460,42 +364,113 @@ body {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.place-details h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.place-details .place-type {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
text-transform: capitalize;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.meta-info p:first-child {
|
||||
margin-top: 1.2rem;
|
||||
padding-top: 1.2rem;
|
||||
border-top: 1px solid #eee;
|
||||
.place-details .place-description {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.meta-info p {
|
||||
margin: 0.75rem 0;
|
||||
line-height: 1.4;
|
||||
word-break: break-word; /* Prevent long URLs from breaking layout */
|
||||
.place-details .actions {
|
||||
padding-bottom: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.meta-info strong {
|
||||
font-weight: bold;
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.meta-info a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
padding-bottom: 4rem;
|
||||
.btn-sm {
|
||||
padding: 0.4rem 1rem !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.meta-info a:hover {
|
||||
text-decoration: underline;
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
border: 1px solid #898989;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: #333;
|
||||
border: 1px solid rgb(255 204 51 / 20%);
|
||||
background: rgb(255 204 51 / 30%);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgb(255 204 51 / 40%);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background: #198754;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-green:hover {
|
||||
background: #157347;
|
||||
}
|
||||
|
||||
/* Map Search Pulse Animation */
|
||||
.search-pulse {
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 204, 51, 0.8); /* Gold/Yellow to match markers */
|
||||
background: rgba(255, 204, 51, 0.2);
|
||||
border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
|
||||
background: rgb(255 204 51 / 20%);
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
@ -509,8 +484,8 @@ body {
|
||||
}
|
||||
|
||||
.search-pulse.blue {
|
||||
border-color: rgba(51, 153, 204, 0.8);
|
||||
background: rgba(51, 153, 204, 0.2);
|
||||
border-color: rgb(51 153 204 / 80%);
|
||||
background: rgb(51 153 204 / 20%);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@ -518,6 +493,7 @@ body {
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1.4);
|
||||
opacity: 0;
|
||||
@ -526,28 +502,20 @@ body {
|
||||
|
||||
/* Locate Control */
|
||||
.ol-control.ol-locate {
|
||||
top: auto;
|
||||
bottom: 2.5em;
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
inset: auto 0.5em 2.5em auto;
|
||||
}
|
||||
|
||||
.ol-touch .ol-control.ol-locate {
|
||||
top: auto;
|
||||
bottom: 3.5em;
|
||||
inset: auto auto 3.5em;
|
||||
}
|
||||
|
||||
/* Rotate Control */
|
||||
.ol-rotate {
|
||||
top: auto;
|
||||
bottom: 5em;
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
inset: auto 0.5em 5em auto;
|
||||
}
|
||||
|
||||
.ol-touch .ol-rotate {
|
||||
top: auto;
|
||||
bottom: 6em;
|
||||
inset: auto auto 6em;
|
||||
}
|
||||
|
||||
span.icon {
|
||||
@ -561,7 +529,7 @@ span.icon {
|
||||
.icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: currentColor;
|
||||
stroke: currentcolor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
@ -578,6 +546,7 @@ span.icon {
|
||||
/* Selected Pin Animation */
|
||||
.selected-pin-container {
|
||||
position: absolute;
|
||||
|
||||
/* Center the bottom tip of the pin at the coordinate */
|
||||
transform: translate(-50%, -100%);
|
||||
pointer-events: none; /* Let clicks pass through to the map features below if needed */
|
||||
@ -586,14 +555,14 @@ span.icon {
|
||||
|
||||
.selected-pin-container.active {
|
||||
display: block;
|
||||
animation: dropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||||
animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||||
}
|
||||
|
||||
.selected-pin {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #ea4335; /* Google Red */
|
||||
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
|
||||
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
|
||||
}
|
||||
|
||||
.selected-pin svg {
|
||||
@ -608,7 +577,7 @@ span.icon {
|
||||
.selected-pin-shadow {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgb(0 0 0 / 30%);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -616,45 +585,45 @@ span.icon {
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
animation: shadowFade 0.5s 0.2s forwards;
|
||||
animation: shadow-fade 0.5s 0.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes dropIn {
|
||||
@keyframes drop-in {
|
||||
0% {
|
||||
transform: translate(-50%, -200%) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -100%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadowFade {
|
||||
@keyframes shadow-fade {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.sidebar {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
inset: auto 0 0;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain; /* Prevent scroll chaining */
|
||||
|
||||
/* Ensure content doesn't get hidden behind bottom safe areas on mobile */
|
||||
padding-bottom: env(safe-area-inset-bottom, 20px);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user