style: add glassmorphism repository card and navigation styles for explore and dashboard
This commit is contained in:
eldov
@@ -371,3 +371,135 @@ footer, .ui.footer {
|
|||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgba(0, 242, 254, 0.7);
|
background: rgba(0, 242, 254, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
12. EXPLORE & DASHBOARD REPOSITORY LISTS (Cyber Glass Cards)
|
||||||
|
========================================================================== */
|
||||||
|
.secondary-nav, overflow-menu.secondary-nav {
|
||||||
|
background: rgba(11, 17, 33, 0.8) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(0, 242, 254, 0.2) !important;
|
||||||
|
border-radius: 14px !important;
|
||||||
|
padding: 6px 14px !important;
|
||||||
|
margin-bottom: 24px !important;
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-nav .item, overflow-menu.secondary-nav .item {
|
||||||
|
color: #94a3b8 !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
padding: 8px 18px !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
transition: all 0.25s ease !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-nav .item:hover, overflow-menu.secondary-nav .item:hover {
|
||||||
|
color: #00f2fe !important;
|
||||||
|
background: rgba(0, 242, 254, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-nav .active.item, overflow-menu.secondary-nav .active.item {
|
||||||
|
color: #030712 !important;
|
||||||
|
background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-nav .active.item svg, overflow-menu.secondary-nav .active.item svg {
|
||||||
|
fill: #030712 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter & Search Bar */
|
||||||
|
.ui.secondary.filter.menu {
|
||||||
|
background: transparent !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.filter.menu .ui.input>input {
|
||||||
|
background: rgba(6, 10, 22, 0.75) !important;
|
||||||
|
border: 1px solid rgba(0, 242, 254, 0.25) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
color: #f8fafc !important;
|
||||||
|
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.filter.menu .ui.input>input:focus {
|
||||||
|
border-color: #00f2fe !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.25) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.filter.menu .ui.dropdown {
|
||||||
|
background: rgba(15, 23, 42, 0.8) !important;
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.25) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
color: #cbd5e1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Repository List Items */
|
||||||
|
.flex-divided-list.items-with-main {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item {
|
||||||
|
background: rgba(11, 17, 33, 0.82) !important;
|
||||||
|
backdrop-filter: blur(24px) saturate(180%) !important;
|
||||||
|
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||||||
|
border: 1px solid rgba(0, 242, 254, 0.18) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
margin-bottom: 12px !important;
|
||||||
|
padding: 18px 24px !important;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item:hover {
|
||||||
|
transform: translateY(-2px) !important;
|
||||||
|
border-color: rgba(0, 242, 254, 0.45) !important;
|
||||||
|
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item .item-leading svg {
|
||||||
|
fill: #00f2fe !important;
|
||||||
|
filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item a.name {
|
||||||
|
color: #00f2fe !important;
|
||||||
|
font-size: 1.15rem !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
letter-spacing: -0.01em !important;
|
||||||
|
transition: color 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item a.name:hover {
|
||||||
|
color: #38bdf8 !important;
|
||||||
|
text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-divided-list .item .description {
|
||||||
|
color: #94a3b8 !important;
|
||||||
|
font-size: 0.95rem !important;
|
||||||
|
margin-top: 6px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination Menu */
|
||||||
|
.ui.pagination.menu {
|
||||||
|
background: rgba(11, 17, 33, 0.8) !important;
|
||||||
|
border: 1px solid rgba(0, 242, 254, 0.2) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.pagination.menu .item {
|
||||||
|
color: #cbd5e1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.pagination.menu .active.item {
|
||||||
|
color: #030712 !important;
|
||||||
|
background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user