css code for it incase you need it (install stylus chrome extension first)
/* ===========================
LIQUID GLASS GAMEJOLT THEME
=========================== */
/* Background */
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
background-attachment: fixed;
font-family: 'Segoe UI', sans-serif;
}
/* Frosted glass base panels */
.container,
.card,
.post-card,
.game-card,
.section,
.comment,
.profile-header,
.sidebar,
.modal-content {
background: rgba(255, 255, 255, 0.07) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 18px !important;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
/* Hover effect */
.card:hover,
.post-card:hover,
.game-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 255, 255, 0.25);
}
/* Navbar glass */
.navbar {
background: rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Buttons */
button,
.btn,
.button {
background: rgba(0, 255, 255, 0.15) !important;
border: 1px solid rgba(0, 255, 255, 0.4) !important;
border-radius: 12px !important;
color: #00ffff !important;
backdrop-filter: blur(10px);
transition: 0.3s ease;
}
button:hover,
.btn:hover,
.button:hover {
background: rgba(0, 255, 255, 0.3) !important;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
color: white !important;
}
/* Links */
a {
color: #7df9ff !important;
transition: 0.2s ease;
}
a:hover {
color: #ffffff !important;
text-shadow: 0 0 8px #00ffff;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(0,255,255,0.5);
border-radius: 10px;
}
/* Profile banner glass overlay */
.profile-header::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(6px);
border-radius: 18px;
pointer-events: none;
}
/* Inputs */
input,
textarea {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 12px !important;
color: white !important;
backdrop-filter: blur(10px);
}
input:focus,
textarea:focus {
border-color: #00ffff !important;
box-shadow: 0 0 10px rgba(0,255,255,0.6);
outline: none;
}
/* Subtle glow animation */
@keyframes liquidGlow {
0% { box-shadow: 0 0 10px rgba(0,255,255,0.2); }
50% { box-shadow: 0 0 20px rgba(0,255,255,0.4); }
100% { box-shadow: 0 0 10px rgba(0,255,255,0.2); }
}
.card,
.post-card {
animation: liquidGlow 6s infinite ease-in-out;
}
1 comment