951 lines
17 KiB
CSS
951 lines
17 KiB
CSS
/* Reset Basic */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f4f7f6;
|
|
color: #333;
|
|
}
|
|
|
|
/* Warna Utama */
|
|
.bg-tosca {
|
|
background-color: #5FBDBD;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15px 30px;
|
|
background: #e0f2f1; /* Sedikit terang menyesuaikan gambar */
|
|
font-weight: bold;
|
|
}
|
|
.navbar .logo {
|
|
font-weight: 900;
|
|
font-size: 1.2rem;
|
|
color: #333;
|
|
}
|
|
.navbar .nav-links a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
transition: color 0.3s;
|
|
}
|
|
.navbar .nav-links a:hover {
|
|
color: #5FBDBD;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Cards (Umum) */
|
|
.card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Auth Pages (Login/Register) */
|
|
.auth-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: calc(100vh - 60px); /* Kurangi tinggi navbar */
|
|
background-color: transparent;
|
|
}
|
|
|
|
.auth-card {
|
|
width: 320px;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
}
|
|
.auth-card h2 {
|
|
margin-bottom: 25px;
|
|
font-weight: 800;
|
|
}
|
|
.auth-card input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-bottom: 15px;
|
|
border: none;
|
|
background: #e0e0e0;
|
|
border-radius: 20px;
|
|
outline: none;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
.auth-card button {
|
|
padding: 10px 40px;
|
|
border: none;
|
|
background: #ddd;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: background 0.3s;
|
|
}
|
|
.auth-card button:hover {
|
|
background: #ccc;
|
|
}
|
|
.message {
|
|
font-size: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.msg-error { color: red; }
|
|
.msg-success { color: green; }
|
|
|
|
/* Dashboard Layout */
|
|
.dashboard-layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 250px;
|
|
background: #e0f2f1;
|
|
padding: 20px;
|
|
}
|
|
.sidebar h3 {
|
|
margin-bottom: 30px;
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
}
|
|
.sidebar ul {
|
|
list-style: none;
|
|
}
|
|
.sidebar ul li {
|
|
margin-bottom: 15px;
|
|
}
|
|
.sidebar ul li a {
|
|
text-decoration: none;
|
|
color: #555;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.sidebar ul li.active a {
|
|
color: #333;
|
|
font-weight: bold;
|
|
/* Indikator aktif mirip gambar */
|
|
position: relative;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
flex: 1;
|
|
background: #5FBDBD;
|
|
padding: 30px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Sensor Cards */
|
|
.cards-grid {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.sensor-card {
|
|
background: #e0f2f1;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 150px;
|
|
height: 150px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.sensor-val {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
background: white;
|
|
border-radius: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Chart Container */
|
|
.chart-container {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
height: 300px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
margin: 20px auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Control Settings */
|
|
.controls-container {
|
|
background: #e0f2f1;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
max-width: 400px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 20px;
|
|
}
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 34px;
|
|
}
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
input:checked + .slider {
|
|
background-color: #333;
|
|
}
|
|
input:checked + .slider:before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* ==== TAMBAHAN CSS SESUAI GAMBAR UI ==== */
|
|
|
|
/* Dashboard Menu Cards (Gambar 1) */
|
|
.menu-cards-grid {
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.menu-card-link {
|
|
background: #e0f2f1;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 180px;
|
|
height: 140px;
|
|
text-decoration: none;
|
|
color: #333;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
.menu-card-link:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
.menu-card-link .icon-box {
|
|
font-size: 40px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Monitoring Parameter (Gambar 2) */
|
|
.mon-top-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.mon-circle-card {
|
|
background: #9bdcd5;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
width: 200px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.mon-circle-card .circle-val {
|
|
background: white;
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 15px auto;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
color: #333;
|
|
}
|
|
.mon-circle-card .title {
|
|
font-weight: 800;
|
|
font-size: 1.1rem;
|
|
color: #222;
|
|
}
|
|
|
|
.mon-bot-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
.mon-pill-card {
|
|
background: #9bdcd5;
|
|
border-radius: 20px;
|
|
padding: 15px 30px;
|
|
width: 350px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Sistem Kontrol (Gambar 3) */
|
|
.ctrl-main-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
.ctrl-box {
|
|
background: #e0f2f1;
|
|
border-radius: 20px;
|
|
padding: 25px;
|
|
width: 450px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.ctrl-box-title {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-weight: 800;
|
|
margin-bottom: 25px;
|
|
}
|
|
.ctrl-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.ctrl-item input[type="text"] {
|
|
width: 60px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.ctrl-time {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.ctrl-time input {
|
|
background: white;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
.btn-mulai {
|
|
background: #e8d5d5;
|
|
border: none;
|
|
padding: 8px 30px;
|
|
border-radius: 15px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin: 0 auto;
|
|
transition: 0.2s;
|
|
}
|
|
.btn-mulai:hover {
|
|
background: #d4baba;
|
|
}
|
|
|
|
/* Catatan Table (Gambar 4) */
|
|
.table-container {
|
|
background: #9bdcd5;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.catatan-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.catatan-table th, .catatan-table td {
|
|
padding: 12px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 14px;
|
|
}
|
|
.catatan-table th {
|
|
background: #fdfdfd;
|
|
font-weight: bold;
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
padding: 0 10px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.pagination-controls button {
|
|
background: #333;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
}
|
|
.dashboard-layout {
|
|
display: flex;
|
|
}
|
|
|
|
.dashboard-layout {
|
|
display: flex;
|
|
}
|
|
|
|
/* Sidebar collapse */
|
|
.sidebar.hide {
|
|
width: 80px;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
/* Hilangkan teks menu */
|
|
.sidebar.hide .text {
|
|
display: none;
|
|
}
|
|
|
|
/* Hilangkan tulisan DASHBOARD */
|
|
.sidebar.hide .sidebar-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Biar tombol tetap keliatan & ke tengah */
|
|
.sidebar.hide .sidebar-header {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ICON tetap center */
|
|
.sidebar.hide ul li a {
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
/* Background aquarium */
|
|
.aquarium {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: linear-gradient(to bottom, #0099cc, #003366);
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding-top: 120px;
|
|
color: white;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* IKAN */
|
|
.fish {
|
|
position: absolute;
|
|
font-size: 40px;
|
|
animation: swim linear infinite;
|
|
}
|
|
|
|
|
|
.fish1 { top: 30%; animation-duration: 12s; }
|
|
.fish2 { top: 50%; animation-duration: 18s; }
|
|
.fish3 { top: 70%; animation-duration: 20s; }
|
|
|
|
@keyframes swim {
|
|
0% {
|
|
left: -100px;
|
|
transform: scaleX(-1); /* dibalik jadi hadap kanan */
|
|
}
|
|
100% {
|
|
left: 110%;
|
|
transform: scaleX(-1); /* tetap hadap kanan */
|
|
}
|
|
}
|
|
|
|
|
|
.shark {
|
|
position: absolute;
|
|
top: 40%;
|
|
font-size: 80px;
|
|
animation: swimShark 25s linear infinite;
|
|
}
|
|
|
|
@keyframes swimShark {
|
|
0% {
|
|
right: -150px;
|
|
transform: scaleX(1); /* hadap kiri (default emoji) */
|
|
}
|
|
100% {
|
|
right: 110%;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
.stingray {
|
|
position: absolute;
|
|
bottom: 20%;
|
|
font-size: 70px;
|
|
animation: swimRay 30s linear infinite;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@keyframes swimRay {
|
|
0% {
|
|
right: -150px;
|
|
transform: scaleX(1); /* hadap kiri (default emoji) */
|
|
}
|
|
100% {
|
|
right: 110%;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
.jellyfish {
|
|
position: absolute;
|
|
font-size: 50px;
|
|
animation: floatUpDown ease-in-out infinite;
|
|
}
|
|
.j1 {
|
|
left: 20%;
|
|
animation-duration: 6s;
|
|
}
|
|
|
|
.j2 {
|
|
left: 50%;
|
|
animation-duration: 8s;
|
|
}
|
|
|
|
.j3 {
|
|
left: 75%;
|
|
animation-duration: 7s;
|
|
}
|
|
@keyframes floatUpDown {
|
|
0% {
|
|
top: 20%;
|
|
}
|
|
50% {
|
|
top: 60%;
|
|
}
|
|
100% {
|
|
top: 20%;
|
|
}
|
|
}
|
|
|
|
|
|
/* GELEMBUNG */
|
|
.bubble {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: rgba(255, 255, 255, 0.8); /* lebih terang */
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px rgba(255,255,255,0.8); /* glow biar keliatan */
|
|
animation: rise linear infinite;
|
|
}
|
|
|
|
|
|
.bubble1 { left: 20%; animation-duration: 5s; }
|
|
.bubble2 { left: 40%; animation-duration: 3s; }
|
|
.bubble3 { left: 20%; animation-duration: 5s; }
|
|
.bubble4 { left: 80%; animation-duration: 4s; }
|
|
.bubble5 { left: 20%; animation-duration: 5s; }
|
|
.bubble6 { left: 40%; animation-duration: 3s; }
|
|
.bubble7 { left: 20%; animation-duration: 5s; }
|
|
.bubble8 { left: 80%; animation-duration: 4s; }
|
|
.bubble9 { left: 20%; animation-duration: 5s; }
|
|
.bubble10 { left: 80%; animation-duration: 4s; }
|
|
|
|
|
|
@keyframes rise {
|
|
0% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* TERUMBU KARANG */
|
|
.coral {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font-size: 150px; /* dibesarin */
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
.coral-right {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 10px;
|
|
font-size: 150px;
|
|
transform: rotate(-5deg); /* sedikit miring biar natural */
|
|
}
|
|
.hero h1 {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 60px;
|
|
color: #aefeff; /* warna aqua */
|
|
|
|
}
|
|
.bg-login {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
background: linear-gradient(to bottom, #0099cc, #003366);
|
|
}
|
|
.auth-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.auth-card {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(12px);
|
|
border-radius: 20px;
|
|
padding: 35px;
|
|
width: 320px;
|
|
color: white;
|
|
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
|
|
box-shadow:
|
|
0 10px 30px rgba(0,0,0,0.3);
|
|
|
|
animation: fadeIn 0.8s ease;
|
|
}
|
|
.auth-card h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
font-size: 28px;
|
|
color: #ffffff;
|
|
}
|
|
.auth-card input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-bottom: 15px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
outline: none;
|
|
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
}
|
|
|
|
.auth-card input::placeholder {
|
|
color: #eee;
|
|
}
|
|
.auth-card button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
|
|
background: linear-gradient(45deg, #00c9ff, #92fe9d);
|
|
color: black;
|
|
font-weight: bold;
|
|
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.auth-card button:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
.forgot-password {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: white;
|
|
text-decoration: none;
|
|
margin-bottom: 15px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.forgot-password:hover {
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
}
|
|
/* item dasar */
|
|
.sidebar ul li a {
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* hover */
|
|
.sidebar ul li a:hover {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* ACTIVE MENU */
|
|
.sidebar ul li.active a {
|
|
background: #5FBDBD;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
/* ICON ikut berubah */
|
|
.sidebar ul li.active i {
|
|
color: #000;
|
|
}
|
|
.sidebar ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar ul li.active::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 5px;
|
|
background: #00c9ff;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
.sidebar ul li a {
|
|
padding: 10px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.sidebar ul li a:hover {
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
.sidebar ul li a {
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.sidebar ul li a:hover {
|
|
background: #cceeee;
|
|
}
|
|
/* Header sidebar saat collapse */
|
|
.sidebar.hide .sidebar-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Biar tombol sama posisi icon menu */
|
|
#toggleSidebar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
/* Biar icon menu konsisten */
|
|
.sidebar ul li i {
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
.sidebar {
|
|
width: 250px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* teks fade out */
|
|
.sidebar .text {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.sidebar.hide .text {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* judul juga fade */
|
|
.sidebar-title {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.sidebar.hide .sidebar-title {
|
|
opacity: 0;
|
|
}
|
|
.sidebar ul li a {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.sidebar ul li a:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
/* Animasi masuk halaman */
|
|
.page-enter {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeSlideIn 0.6s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeSlideIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.menu-card-link {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeSlideIn 0.5s ease forwards;
|
|
}
|
|
|
|
/* delay tiap card */
|
|
.menu-card-link:nth-child(1) { animation-delay: 0.1s; }
|
|
.menu-card-link:nth-child(2) { animation-delay: 0.2s; }
|
|
.menu-card-link:nth-child(3) { animation-delay: 0.3s; }
|
|
.topbar-icons {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.notif, .user {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notif-dropdown, .user-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 45px;
|
|
right: 0;
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(15px);
|
|
|
|
color: white;
|
|
width: 240px;
|
|
border-radius: 16px;
|
|
padding: 15px;
|
|
|
|
box-shadow:
|
|
0 10px 25px rgba(0,0,0,0.3),
|
|
inset 0 0 10px rgba(255,255,255,0.1);
|
|
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
|
|
animation: dropdown3D 0.3s ease;
|
|
z-index: 999;
|
|
}
|
|
|
|
|
|
.user-dropdown {
|
|
width: 260px; /* diperlebar */
|
|
}
|
|
|
|
|
|
/* aktif */
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
/* animasi */
|
|
@keyframes dropdown3D {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
/* KHUSUS NOTIF */
|
|
.notif-dropdown {
|
|
width: 280px; /* diperlebar */
|
|
}
|
|
|
|
/* KHUSUS USER */
|
|
.user-dropdown {
|
|
width: 260px; /* biar email muat */
|
|
}
|
|
.notif-dropdown ul {
|
|
list-style: none; /* INI KUNCINYA */
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.notif-dropdown li {
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
}
|
|
.notif-dropdown li::before {
|
|
content: "🔔";
|
|
margin-right: 8px;
|
|
}
|