updated demo homeview class to make it more readable

Author: makbn

jlmap-vaadin-demo/src/main/frontend/themes/jlmap-vaadin-demo/styles.css

@@ -7,4 +7,180 @@
 /* Vaadin overlays always on top */
 .v-overlay-container {
     z-index: 3000 !important;
-}
+}
+
+/* Google-quality, pixel-perfect left menu styles */
+.jlmap-menu {
+    position: absolute;
+    top: 64px;
+    left: 40px;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.55);
+    border-radius: 18px;
+    box-shadow: 0 2px 16px 0 rgba(60, 64, 67, 0.10), 0 1.5px 4px 0 rgba(60, 64, 67, 0.10);
+    padding: 32px 20px 32px 20px;
+    min-width: 270px;
+    max-width: 320px;
+    max-height: calc(100vh - 128px);
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    align-items: stretch;
+    pointer-events: auto;
+    overflow-y: auto;
+    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.15) contrast(1.15);
+    backdrop-filter: blur(24px) saturate(180%) brightness(1.15) contrast(1.15);
+    border: 1.5px solid rgba(255, 255, 255, 0.35);
+    bottom: 64px;
+}
+
+.jlmap-menu::before {
+    /* Animated caustic SVG overlay for liquid glass effect */
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    z-index: 1;
+    background: url('data:image/svg+xml;utf8,<svg width=\'400\' height=\'400\' xmlns=\'http://www.w3.org/2000/svg\'><defs><radialGradient id=\'g1\' cx=\'50%\' cy=\'50%\' r=\'0.7\'><stop offset=\'0%\' stop-color=\'#fff8\'/><stop offset=\'100%\' stop-color=\'#fff0\'/></radialGradient></defs><ellipse cx=\'200\' cy=\'200\' rx=\'180\' ry=\'120\' fill=\'url(%23g1)\'/><ellipse cx=\'120\' cy=\'80\' rx=\'60\' ry=\'40\' fill=\'url(%23g1)\' opacity=\'0.5\'/><ellipse cx=\'300\' cy=\'320\' rx=\'70\' ry=\'50\' fill=\'url(%23g1)\' opacity=\'0.4\'/></svg>');
+    background-size: 200% 200%;
+    background-repeat: no-repeat;
+    mix-blend-mode: lighten;
+    opacity: 0.45;
+    animation: jlmap-liquid-caustic 12s ease-in-out infinite alternate;
+}
+
+@keyframes jlmap-liquid-caustic {
+    0% {
+        background-position: 0% 0%;
+    }
+    100% {
+        background-position: 100% 100%;
+    }
+}
+
+.jlmap-menu::after {
+    /* Soft edge glow for depth */
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    z-index: 2;
+    box-shadow: 0 0 32px 8px rgba(255, 255, 255, 0.18) inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset;
+}
+
+.jlmap-menu > * {
+    position: relative;
+    z-index: 3;
+}
+
+.jlmap-menu-content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.jlmap-menu-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.jlmap-menu-section-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #202124;
+    margin-bottom: 6px;
+    letter-spacing: 0.01em;
+}
+
+.jlmap-menu-item {
+    background: none;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 1rem;
+    color: #444;
+    text-align: left;
+    transition: background 0.15s, color 0.15s;
+    cursor: pointer;
+    outline: none;
+    font-family: inherit;
+}
+
+.jlmap-menu-item:hover, .jlmap-menu-item:focus {
+    background: #ffffff;
+    color: #000000;
+}
+
+.jlmap-menu-item:active {
+    background: #ffffff;
+    color: #000000;
+}
+
+.jlmap-menu-footer {
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: block;
+    margin-top: auto;
+    padding: 18px 0 0 0;
+    text-align: center;
+    font-size: 1.04rem;
+    font-weight: 500;
+    color: #174ea6;
+    background: linear-gradient(to top, rgba(255,255,255,0.32) 80%, rgba(255,255,255,0.01) 100%);
+    text-decoration: none;
+    border-top: 1px solid rgba(255,255,255,0.18);
+    z-index: 4;
+    transition: color 0.18s;
+}
+
+.jlmap-menu-footer:hover, .jlmap-menu-footer:focus {
+    color: #0b254a;
+    text-decoration: underline;
+}
+
+.jlmap-github-icon {
+    display: inline-flex;
+    vertical-align: middle;
+    margin-right: 8px;
+    height: 20px;
+    width: 20px;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 700px) {
+    .jlmap-menu {
+        top: 16px;
+        left: 8px;
+        margin: 0;
+        padding: 12px 4px 12px 4px;
+        min-width: 160px;
+        max-width: 95vw;
+        max-height: calc(100vh - 32px);
+        bottom: 16px;
+    }
+
+    .jlmap-menu-section-title {
+        font-size: 1rem;
+    }
+
+    .jlmap-menu-item {
+        font-size: 0.97rem;
+        padding: 8px 8px;
+    }
+}