125 lines
4.0 KiB
CSS
125 lines
4.0 KiB
CSS
body {
|
|
background-image: url('../public/black_back.jpg'); /* Path relative to the public directory */
|
|
background-size: cover; /* Cover the entire viewport */
|
|
background-position: center; /* Center the background image */
|
|
background-repeat: no-repeat; /* Do not repeat the image */
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
/* Add this CSS to your global styles or a relevant CSS file */
|
|
|
|
:root {
|
|
|
|
--glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
--glassmorphism-gradient-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
--glassmorphism-bg: rgba(255, 255, 255, 0.03);
|
|
--glassmorphism-bg-dark: rgba(0, 0, 0, 0.2);
|
|
|
|
--glassmorphism-blur: 10px;
|
|
--glassmorphism-border: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.glassmorphism {
|
|
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
|
}
|
|
.glassmorphism-dark{
|
|
background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg-dark);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
|
}
|
|
.glassmorphism::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../public/acrylic.jpg');
|
|
-webkit-backdrop-filter: blur(50px);
|
|
backdrop-filter: blur(50px);
|
|
background-repeat: repeat;
|
|
opacity: 0.01;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.glassmorphism-scroller {
|
|
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
|
}
|
|
|
|
/* globals.css or your relevant CSS file */
|
|
.leaderboard-card {
|
|
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center; /* Center vertically */
|
|
align-items: center; /* Center horizontally */
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.leaderboard-card:hover{
|
|
background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg);
|
|
|
|
}
|
|
|
|
|
|
.leaderboard-card.positive {
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.1), 1px 1px 1px rgba(0,255,0,0.3), -1px -1px 1px rgba(100,255,100,0.15);
|
|
}
|
|
|
|
.leaderboard-card.negative {
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(255, 0, 0, 0.05), 1px 1px 1px rgba(255,0,0,0.3), -1px -1px 1px rgba(255,100,100,0.15);
|
|
}
|
|
|
|
.leaderboard-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Center horizontally */
|
|
justify-content: center; /* Center vertically */
|
|
width: 100%;
|
|
position:relative; /* Adjust padding as needed */
|
|
}
|
|
|
|
|
|
.modal {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 1) 100%), var(--glassmorphism-bg);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
|
|
overflow: hidden;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
|
}
|
|
|
|
.modal-bg {
|
|
background: linear-gradient(135deg, rgba(100, 100, 100, 0.02) 0%, rgba(0, 0, 0, 0.1) 100%), var(--glassmorphism-bg);
|
|
backdrop-filter: blur(var(--glassmorphism-blur));
|
|
border: 1px solid var(--glassmorphism-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
|
|
overflow: hidden;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
|
} |