/* ===================================================================== Liquid Glass library Source: https://snipzy.dev/snippets/ (10 snippets) CRD004 card / BTN003 button / DRP001 dropdown / FRM001 form / ICO001 icons NAV002 nav / SRH002 search / SBR001 sidebar / LDR003 spinner / TGL001 toggle All snippet classes are prefixed `lg-` to avoid colliding with the admin panel's existing `.nav-item`, `.form-group`, `.sidebar-header`, `.search-input`, etc. The shared SVG distortion filter expects an element with id `lg-glass-distortion` somewhere in the DOM (index.html ships it inline at the top of ). Each component root declares the same three vars so they cascade to the inner glass layers: --lg-bg : surface tint (rgba) --lg-highlight : specular highlight (rgba) --lg-text : text/icon color ===================================================================== */ /* === Shared glass layers ============================================ */ .lg-glass-filter, .lg-glass-overlay, .lg-glass-specular { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .lg-glass-filter { z-index: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); filter: url(#lg-glass-distortion) saturate(120%) brightness(1.15); } .lg-glass-overlay { z-index: 2; } .lg-glass-specular { z-index: 3; } .lg-glass-content { position: relative; z-index: 4; } /* === 1. Liquid Glass Card (CRD004) ================================= */ .lg-glass-card { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; position: relative; width: 300px; height: 200px; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } .lg-glass-card .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-card .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-card .lg-glass-content { padding: 20px; color: var(--lg-text); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .lg-glass-card .lg-glass-content h3 { margin: 0 0 10px 0; font-size: 24px; font-weight: 600; } .lg-glass-card .lg-glass-content p { margin: 0; opacity: 0.8; } /* Optional animated distortion overlay used by the card snippet. */ .lg-glass-distortion-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 80%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0%, transparent 80%); background-size: 300% 300%; animation: lg-float-distort 10s infinite ease-in-out; mix-blend-mode: overlay; z-index: 2; pointer-events: none; } @keyframes lg-float-distort { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* === 2. Liquid Glass Button (BTN003) =============================== */ .lg-glass-button { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; position: relative; padding: 12px 24px; border: none; border-radius: 12px; cursor: pointer; overflow: hidden; background: transparent; transition: transform 0.2s ease; outline: none; color: var(--lg-text); font-family: inherit; } .lg-glass-button:hover { transform: scale(1.05); } .lg-glass-button:active { transform: scale(0.95); } .lg-glass-button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .lg-glass-button .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-button .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-button .lg-glass-content { color: var(--lg-text); font-weight: 500; font-size: 16px; } /* === 3. Liquid Glass Dropdown (DRP001) ============================= */ .lg-glass-dropdown-list { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 400px; } .lg-glass-dropdown { position: relative; } .lg-dropdown-toggle { position: absolute; opacity: 0; pointer-events: none; } .lg-dropdown-header { position: relative; display: block; border-radius: 12px; overflow: hidden; cursor: pointer; } .lg-glass-dropdown-list .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-dropdown-list .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-dropdown-header .lg-glass-content { padding: 16px; color: var(--lg-text); display: flex; justify-content: space-between; align-items: center; } .lg-dropdown-arrow { width: 20px; height: 20px; transition: transform 0.3s ease; } .lg-dropdown-content { position: relative; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; border-radius: 12px; margin-top: 8px; } .lg-dropdown-content .lg-glass-content { padding: 0 16px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; color: var(--lg-text); } .lg-dropdown-toggle:checked ~ .lg-dropdown-header .lg-dropdown-arrow { transform: rotate(180deg); } .lg-dropdown-toggle:checked ~ .lg-dropdown-content { max-height: 200px; } .lg-dropdown-toggle:checked ~ .lg-dropdown-content .lg-glass-content { padding: 16px; opacity: 1; transform: translateY(0); } .lg-dropdown-content ul { list-style: none; margin: 0; padding: 0; } .lg-dropdown-content li { margin: 8px 0; } .lg-dropdown-header:hover .lg-glass-overlay { background: rgba(255, 255, 255, 0.3); } /* === 4. Liquid Glass Form (FRM001) ================================= */ .lg-glass-form { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; --lg-input-bg: rgba(255, 255, 255, 0.1); --lg-input-border: rgba(255, 255, 255, 0.2); --lg-input-focus: rgba(255, 255, 255, 0.3); position: relative; width: 400px; min-height: 450px; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } .lg-glass-form .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-form .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-form .lg-glass-content { padding: 30px; color: var(--lg-text); height: 100%; } .lg-form-container { display: none; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .lg-form-container.active { display: block; opacity: 1; transform: translateX(0); } .lg-form-container h3 { margin: 0 0 20px 0; font-size: 28px; font-weight: 600; text-align: center; } .lg-form-group { position: relative; margin-bottom: 20px; } .lg-form-group .lg-form-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--lg-text); opacity: 0.8; pointer-events: none; } .lg-form-group input { width: 100%; padding: 12px 15px 12px 45px; background: var(--lg-input-bg); border: 1px solid var(--lg-input-border); border-radius: 10px; color: var(--lg-text); font-size: 16px; transition: border-color 0.3s ease, background 0.3s ease; font-family: inherit; } .lg-form-group input:focus { outline: none; background: var(--lg-input-focus); border-color: var(--lg-highlight); } .lg-form-group input::placeholder { color: rgba(255, 255, 255, 0.6); } .lg-glass-form button[type="submit"] { width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; color: var(--lg-text); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; font-family: inherit; } .lg-glass-form button[type="submit"]:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.4); } .lg-form-switch { text-align: center; margin-top: 20px; font-size: 14px; opacity: 0.8; } .lg-form-switch a { color: var(--lg-text); text-decoration: none; font-weight: 600; opacity: 1; } .lg-form-switch a:hover { text-decoration: underline; } /* === 5. Liquid Glass Icons (ICO001) ================================ */ .lg-glass-icons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 24px; max-width: 400px; margin: 0 auto; } .lg-glass-icon { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-icon-color: #ffffff; --lg-icon-size: 64px; position: relative; width: var(--lg-icon-size); height: var(--lg-icon-size); border-radius: 16px; overflow: hidden; background: transparent; cursor: pointer; transition: transform 0.2s ease; } .lg-glass-icon:hover { transform: scale(1.1); } .lg-glass-icon .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-icon .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-icon .lg-glass-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .lg-glass-icon .lg-glass-content svg { width: 80%; height: 80%; color: var(--lg-icon-color); transition: transform 0.2s ease; } .lg-glass-icon:hover .lg-glass-content svg { transform: scale(0.9); } /* === 6. Liquid Glass Nav (NAV002) ================================== */ .lg-glass-nav { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; position: relative; width: 100%; max-width: 600px; border-radius: 12px; overflow: hidden; background: transparent; } .lg-glass-nav .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-nav .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-nav .lg-glass-content { padding: 16px; } .lg-nav-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 24px; } .lg-nav-item { color: var(--lg-text); text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 16px; border-radius: 8px; transition: background-color 0.2s ease; } .lg-nav-item:hover { background-color: rgba(255, 255, 255, 0.1); } .lg-nav-item.active { background-color: rgba(255, 255, 255, 0.2); } /* === 7. Liquid Glass Search (SRH002) =============================== */ .lg-glass-search { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; --lg-input-bg: rgba(255, 255, 255, 0.1); --lg-input-border: rgba(255, 255, 255, 0.2); --lg-input-focus: rgba(255, 255, 255, 0.3); position: relative; width: 500px; max-width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } .lg-glass-search .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-search .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-search .lg-glass-content { color: var(--lg-text); } .lg-search-container { position: relative; padding: 20px; display: flex; align-items: center; transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lg-search-container.expanded { padding: 25px 20px; } .lg-search-icon { position: absolute; left: 35px; width: 18px; height: 18px; color: var(--lg-text); opacity: 0.8; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lg-search-container.expanded .lg-search-icon { transform: scale(1.1); opacity: 1; } .lg-search-input { width: 100%; padding: 12px 45px; background: var(--lg-input-bg); border: 1px solid var(--lg-input-border); border-radius: 12px; color: var(--lg-text); font-size: 16px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, box-shadow, background; font-family: inherit; } .lg-search-input:focus { outline: none; background: var(--lg-input-focus); border-color: var(--lg-highlight); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .lg-search-input::placeholder { color: rgba(255, 255, 255, 0.6); transition: opacity 0.3s ease; } .lg-search-input:focus::placeholder { opacity: 0.4; } .lg-search-clear { position: absolute; right: 35px; background: none; border: none; color: var(--lg-text); opacity: 0; cursor: pointer; font-size: 16px; transition: opacity 0.3s ease; padding: 5px; border-radius: 50%; } .lg-search-clear:hover { background: rgba(255, 255, 255, 0.1); } .lg-search-input:not(:placeholder-shown) ~ .lg-search-clear { opacity: 0.7; } .lg-search-suggestions { padding: 0 20px 20px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .lg-search-suggestions.active { max-height: 300px; opacity: 1; transform: translateY(0); pointer-events: auto; } .lg-suggestion-group h4 { font-size: 14px; margin: 0 0 10px; opacity: 0.7; font-weight: 500; } .lg-suggestion-group ul { list-style: none; padding: 0; margin: 0; } .lg-suggestion-group li { padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateX(-10px); } .lg-search-suggestions.active .lg-suggestion-group li { opacity: 1; transform: translateX(0); } .lg-suggestion-group li:nth-child(1) { transition-delay: 0.10s; } .lg-suggestion-group li:nth-child(2) { transition-delay: 0.15s; } .lg-suggestion-group li:nth-child(3) { transition-delay: 0.20s; } .lg-suggestion-group li:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } /* === 8. Liquid Glass Sidebar (SBR001) ============================== */ .lg-glass-sidebar { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; position: relative; width: 280px; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } .lg-glass-sidebar .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-sidebar .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-sidebar .lg-glass-content { color: var(--lg-text); height: 100%; display: flex; flex-direction: column; } .lg-sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .lg-sidebar-header h3 { margin: 0; font-size: 24px; font-weight: 600; } .lg-sidebar-nav { padding: 20px 0; flex: 1; } .lg-sidebar-nav .lg-nav-link { display: flex; align-items: center; padding: 12px 20px; color: var(--lg-text); text-decoration: none; gap: 12px; transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lg-sidebar-nav .lg-nav-link:hover, .lg-sidebar-nav .lg-nav-link.active { background: rgba(255, 255, 255, 0.1); } .lg-sidebar-nav .lg-nav-link svg { width: 18px; height: 18px; } .lg-sidebar-nav .lg-nav-link span { font-size: 16px; opacity: 0.9; } /* === 9. Liquid Glass Spinner (LDR003) ============================== */ .lg-glass-spinner { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-spinner-size: 80px; --lg-ring-size: 64px; --lg-core-size: 24px; position: relative; width: var(--lg-spinner-size); height: var(--lg-spinner-size); border-radius: 50%; overflow: hidden; background: transparent; } .lg-glass-spinner .lg-glass-overlay { background: var(--lg-bg); } .lg-glass-spinner .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-glass-spinner .lg-glass-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .lg-spinner-ring { position: absolute; width: var(--lg-ring-size); height: var(--lg-ring-size); border: 2px solid transparent; border-top-color: rgba(255, 255, 255, 0.8); border-right-color: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: lg-spin 1s linear infinite; } .lg-spinner-core { width: var(--lg-core-size); height: var(--lg-core-size); background: rgba(255, 255, 255, 0.9); border-radius: 50%; animation: lg-pulse 1s ease-in-out infinite alternate; } @keyframes lg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes lg-pulse { from { transform: scale(0.8); opacity: 0.5; } to { transform: scale(1); opacity: 0.8; } } /* === 10. Liquid Glass Toggle (TGL001) ============================== */ .lg-glass-toggle-group { display: flex; flex-direction: column; gap: 20px; min-width: 200px; } .lg-glass-toggle { --lg-bg: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; --lg-track-width: 60px; --lg-track-height: 32px; --lg-thumb-size: 24px; display: flex; align-items: center; gap: 12px; cursor: pointer; } .lg-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .lg-toggle-track { position: relative; width: var(--lg-track-width); height: var(--lg-track-height); border-radius: 16px; overflow: hidden; } .lg-toggle-track > .lg-glass-overlay { background: var(--lg-bg); } .lg-toggle-track > .lg-glass-specular { box-shadow: inset 1px 1px 1px var(--lg-highlight); } .lg-toggle-thumb { position: absolute; z-index: 4; top: 4px; left: 4px; width: var(--lg-thumb-size); height: var(--lg-thumb-size); border-radius: 50%; transition: transform 0.3s ease; overflow: hidden; } .lg-toggle-thumb .lg-glass-overlay { background: rgba(255, 255, 255, 0.9); } .lg-toggle-label { color: var(--lg-text); font-size: 16px; user-select: none; } .lg-toggle-input:checked + .lg-toggle-track .lg-toggle-thumb { transform: translateX(calc(var(--lg-track-width) - var(--lg-thumb-size) - 8px)); } .lg-toggle-input:checked + .lg-toggle-track > .lg-glass-overlay { background: rgba(255, 255, 255, 0.4); } .lg-toggle-input:focus-visible + .lg-toggle-track { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .lg-glass-toggle:hover .lg-toggle-track > .lg-glass-overlay { background: rgba(255, 255, 255, 0.35); }