Initial commit
This commit is contained in:
root
194
public/css/admin.css
Normal file
194
public/css/admin.css
Normal file
@@ -0,0 +1,194 @@
|
||||
:root{
|
||||
--ink:#07060a;
|
||||
--glass: rgba(16, 14, 26, .62);
|
||||
--glass2: rgba(18, 15, 28, .62);
|
||||
--b: rgba(255,255,255,.10);
|
||||
--muted: rgba(255,255,255,.72);
|
||||
--muted2: rgba(255,255,255,.50);
|
||||
--violet: rgba(139,92,246,.95);
|
||||
--fuchsia: rgba(217,70,239,.85);
|
||||
}
|
||||
|
||||
html,body{height:100%}
|
||||
body{background:var(--ink); color:#fff}
|
||||
|
||||
/* Helps native form controls (especially <select>) use dark UI */
|
||||
html{ color-scheme: dark; }
|
||||
|
||||
/* Background */
|
||||
.bg-aurora{
|
||||
position: fixed; inset: 0;
|
||||
background:
|
||||
radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.30), transparent 60%),
|
||||
radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.22), transparent 60%),
|
||||
radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.18), transparent 60%);
|
||||
z-index:-2;
|
||||
}
|
||||
.bg-grid{
|
||||
position: fixed; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity:.12;
|
||||
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
/* Topbar */
|
||||
.topbar-glass{
|
||||
background: var(--glass2);
|
||||
border: 1px solid var(--b);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,.35);
|
||||
}
|
||||
.brand-badge{
|
||||
width: 40px; height: 40px;
|
||||
display:grid; place-items:center;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--violet), var(--fuchsia));
|
||||
font-weight: 900;
|
||||
color:#0b0712;
|
||||
}
|
||||
.hero-gradient{
|
||||
background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.navlink{
|
||||
display:inline-flex; align-items:center; gap:.55rem;
|
||||
padding:.55rem .85rem;
|
||||
border-radius: 14px;
|
||||
text-decoration:none;
|
||||
color: rgba(255,255,255,.78);
|
||||
transition: transform .12s ease, background .12s ease;
|
||||
}
|
||||
.navlink:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
|
||||
.navlink i{ font-size: 1.1rem; }
|
||||
|
||||
/* Cards */
|
||||
.card-glass{
|
||||
background: var(--glass);
|
||||
border: 1px solid var(--b);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 12px 50px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
/* Pills / tags */
|
||||
.pill{
|
||||
padding: .45rem .75rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid var(--b);
|
||||
color: rgba(255,255,255,.80);
|
||||
font-size: .9rem;
|
||||
}
|
||||
.dot{
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 18px rgba(52,211,153,.55);
|
||||
}
|
||||
.tag{
|
||||
font-size: .75rem;
|
||||
padding: .25rem .55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(139,92,246,.18);
|
||||
border: 1px solid rgba(139,92,246,.25);
|
||||
color: rgba(255,255,255,.85);
|
||||
}
|
||||
|
||||
/* Bootstrap overrides to match glass */
|
||||
.form-control, .form-select, textarea{
|
||||
border-radius: 14px !important;
|
||||
background: rgba(255,255,255,.06) !important;
|
||||
border: 1px solid rgba(255,255,255,.10) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.form-control:focus, textarea:focus, .form-select:focus{
|
||||
border-color: rgba(167,139,250,.55) !important;
|
||||
box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
|
||||
}
|
||||
.form-control::placeholder, textarea::placeholder{
|
||||
color: rgba(255,255,255,.35) !important;
|
||||
}
|
||||
|
||||
/* Make <select> arrow + padding consistent and readable */
|
||||
.form-select{
|
||||
padding-right: 2.6rem !important;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E") !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: right 1rem center !important;
|
||||
background-size: 18px 18px !important;
|
||||
}
|
||||
|
||||
/* Dropdown list colors (works where browser allows styling) */
|
||||
.form-select option{
|
||||
background-color: #0c0a14;
|
||||
color: rgba(255,255,255,.92);
|
||||
}
|
||||
|
||||
/* Selected option contrast (supported in some browsers) */
|
||||
.form-select option:checked{
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(217,70,239,.45));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-violet{
|
||||
border:0 !important;
|
||||
color:#0b0712 !important;
|
||||
font-weight:900 !important;
|
||||
border-radius: 14px !important;
|
||||
background: linear-gradient(135deg, var(--violet), var(--fuchsia)) !important;
|
||||
box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 18px 40px rgba(139,92,246,.18);
|
||||
}
|
||||
.btn-violet:hover{ filter: brightness(1.08); transform: translateY(-1px); }
|
||||
|
||||
.btn-outline-light{
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid rgba(255,255,255,.12) !important;
|
||||
background: rgba(255,255,255,.06) !important;
|
||||
}
|
||||
.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }
|
||||
|
||||
/* Optional: Bootstrap dropdown menus (if you use .dropdown anywhere) */
|
||||
.dropdown-menu{
|
||||
background: rgba(16,14,26,.88) !important;
|
||||
border: 1px solid rgba(255,255,255,.10) !important;
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 18px 70px rgba(0,0,0,.45);
|
||||
border-radius: 14px;
|
||||
padding: .4rem;
|
||||
}
|
||||
.dropdown-item{
|
||||
color: rgba(255,255,255,.86) !important;
|
||||
border-radius: 10px;
|
||||
padding: .55rem .7rem;
|
||||
}
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus{
|
||||
background: rgba(167,139,250,.16) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active{
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.table-dark{
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-striped-bg: rgba(255,255,255,.03);
|
||||
--bs-table-hover-bg: rgba(255,255,255,.05);
|
||||
--bs-table-border-color: rgba(255,255,255,.08);
|
||||
}
|
||||
.table thead th{
|
||||
color: rgba(255,255,255,.70);
|
||||
border-bottom-color: rgba(255,255,255,.10) !important;
|
||||
}
|
||||
306
public/css/app.css
Normal file
306
public/css/app.css
Normal file
@@ -0,0 +1,306 @@
|
||||
.topbar-glass{
|
||||
background: rgba(18, 15, 28, .62);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
.brand-badge{
|
||||
width: 36px; height: 36px;
|
||||
display:grid; place-items:center;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.navlink{
|
||||
display:inline-flex; align-items:center; gap:.5rem;
|
||||
padding:.55rem .85rem;
|
||||
border-radius: 14px;
|
||||
text-decoration:none;
|
||||
color: rgba(255,255,255,.78);
|
||||
transition: transform .12s ease, background .12s ease;
|
||||
}
|
||||
.navlink:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
|
||||
.navlink span{ font-size: .95rem; }
|
||||
|
||||
.bg-aurora{
|
||||
position: fixed; inset: 0;
|
||||
background:
|
||||
radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.30), transparent 60%),
|
||||
radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.22), transparent 60%),
|
||||
radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.18), transparent 60%);
|
||||
filter: blur(0px);
|
||||
z-index:-2;
|
||||
}
|
||||
.bg-grid{
|
||||
position: fixed; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity:.12;
|
||||
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
.card-glass{
|
||||
background: rgba(16, 14, 26, .62);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 12px 50px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
.pill{
|
||||
padding: .45rem .75rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
color: rgba(255,255,255,.80);
|
||||
font-size: .9rem;
|
||||
}
|
||||
.dot{
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 18px rgba(52,211,153,.55);
|
||||
}
|
||||
|
||||
.hero-gradient{
|
||||
background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.iconlink{
|
||||
width: 42px; height: 42px;
|
||||
display:grid; place-items:center;
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
text-decoration:none;
|
||||
transition: transform .12s ease;
|
||||
}
|
||||
.iconlink:hover{ transform: translateY(-2px); }
|
||||
|
||||
.tag{
|
||||
font-size: .75rem;
|
||||
padding: .25rem .55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(139,92,246,.18);
|
||||
border: 1px solid rgba(139,92,246,.25);
|
||||
color: rgba(255,255,255,.85);
|
||||
}
|
||||
|
||||
.chip{
|
||||
padding: .45rem .7rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
background: rgba(255,255,255,.06);
|
||||
color: rgba(255,255,255,.75);
|
||||
}
|
||||
.chip.active{
|
||||
background: rgba(139,92,246,.30);
|
||||
border-color: rgba(139,92,246,.35);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.project-grid{
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.project-card{
|
||||
transition: transform .12s ease, border-color .12s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: start;
|
||||
height: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
.project-card:hover{ transform: translateY(-2px); border-color: rgba(167,139,250,.35); }
|
||||
.project-card .summary-clamp{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 3.6em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.project-card .project-footer{ margin-top: auto; }
|
||||
.project-card .tech-row{
|
||||
max-height: 64px;
|
||||
min-height: 28px;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.field{
|
||||
width:100%;
|
||||
padding: .9rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
.field:focus{
|
||||
border-color: rgba(167,139,250,.55);
|
||||
box-shadow: 0 0 0 4px rgba(139,92,246,.18);
|
||||
}
|
||||
|
||||
.bar{
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.08);
|
||||
overflow:hidden;
|
||||
}
|
||||
.bar-fill{
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
||||
transition: width 900ms cubic-bezier(.2,.9,.2,1);
|
||||
}
|
||||
|
||||
.social{
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
gap:.6rem;
|
||||
padding: 1rem;
|
||||
border-radius: 18px;
|
||||
text-decoration:none;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
color:#fff;
|
||||
transition: transform .12s ease;
|
||||
}
|
||||
.social:hover{ transform: translateY(-2px); }
|
||||
|
||||
.pulse-bars{ display:flex; gap:4px; align-items:flex-end; }
|
||||
.pulse-bars span{
|
||||
width:4px; height:10px; border-radius: 4px;
|
||||
background: rgba(34,197,94,.9);
|
||||
animation: beat 900ms infinite ease-in-out alternate;
|
||||
}
|
||||
.pulse-bars span:nth-child(2){ animation-delay: 120ms; height: 14px; }
|
||||
.pulse-bars span:nth-child(3){ animation-delay: 240ms; height: 8px; }
|
||||
.pulse-bars span:nth-child(4){ animation-delay: 360ms; height: 12px; }
|
||||
@keyframes beat{ from{ transform: translateY(0); opacity:.6 } to{ transform: translateY(-4px); opacity:1 } }
|
||||
|
||||
#spotifyCard.is-playing #spArt { animation: spin 4s linear infinite; }
|
||||
@keyframes spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }
|
||||
|
||||
/* Project modal gallery */
|
||||
.pm-gallery{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.pm-gallery a{
|
||||
position: relative;
|
||||
display:block;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
background: rgba(255,255,255,.04);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.30);
|
||||
}
|
||||
.pm-gallery img{
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
display:block;
|
||||
transition: transform .16s ease;
|
||||
}
|
||||
.pm-gallery a:hover img{ transform: scale(1.03); }
|
||||
|
||||
/* Animated PFP (neon ring) */
|
||||
|
||||
.pfp-wrap{
|
||||
position: relative;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: visible;
|
||||
transform: translateZ(0);
|
||||
animation: pfp-float 5.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pfp-img{
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
box-shadow:
|
||||
0 18px 60px rgba(0,0,0,.55),
|
||||
0 0 0 6px rgba(255,255,255,.03);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pfp-ring{
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 999px;
|
||||
background: conic-gradient(
|
||||
from 180deg,
|
||||
rgba(139,92,246,.0),
|
||||
rgba(139,92,246,.85),
|
||||
rgba(217,70,239,.85),
|
||||
rgba(167,139,250,.85),
|
||||
rgba(139,92,246,.0)
|
||||
);
|
||||
filter: drop-shadow(0 0 18px rgba(167,139,250,.22));
|
||||
animation: pfp-spin 4.2s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pfp-ring::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(7,6,10,.92);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
}
|
||||
|
||||
.pfp-wrap::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:-14px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle, rgba(167,139,250,.18), transparent 60%);
|
||||
filter: blur(10px);
|
||||
opacity: .75;
|
||||
animation: pfp-pulse 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pfp-wrap::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset: -30%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
|
||||
transform: translateX(-70%) rotate(12deg);
|
||||
animation: pfp-shine 3.8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
mix-blend-mode: screen;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.pfp-wrap:hover{
|
||||
animation-play-state: paused;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.pfp-wrap:hover .pfp-ring{
|
||||
filter: drop-shadow(0 0 22px rgba(217,70,239,.26));
|
||||
}
|
||||
|
||||
@keyframes pfp-spin { to { transform: rotate(360deg); } }
|
||||
@keyframes pfp-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
|
||||
@keyframes pfp-pulse { 0%,100%{ opacity:.55; transform: scale(.98); } 50%{ opacity:.9; transform: scale(1.03); } }
|
||||
@keyframes pfp-shine { 0%{ transform: translateX(-70%) rotate(12deg); } 55%{ transform: translateX(70%) rotate(12deg); } 100%{ transform: translateX(70%) rotate(12deg); } }
|
||||
105
public/css/contacts.css
Normal file
105
public/css/contacts.css
Normal file
@@ -0,0 +1,105 @@
|
||||
:root{
|
||||
--ink:#07060a;
|
||||
--glass: rgba(16, 14, 26, .72);
|
||||
--glass2: rgba(18, 16, 30, .82);
|
||||
--b: rgba(255,255,255,.12);
|
||||
--muted: rgba(255,255,255,.78);
|
||||
--muted2: rgba(255,255,255,.55);
|
||||
--violet: rgba(139,92,246,.95);
|
||||
--fuchsia: rgba(217,70,239,.88);
|
||||
--table-border: rgba(255,255,255,.08);
|
||||
}
|
||||
|
||||
body{
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-aurora, .bg-grid{
|
||||
position: fixed; inset: 0; pointer-events: none;
|
||||
}
|
||||
.bg-aurora{
|
||||
background:
|
||||
radial-gradient(1100px 520px at 20% 20%, rgba(139,92,246,.32), transparent 60%),
|
||||
radial-gradient(900px 620px at 78% 24%, rgba(217,70,239,.22), transparent 60%),
|
||||
radial-gradient(980px 640px at 60% 86%, rgba(167,139,250,.20), transparent 60%);
|
||||
z-index:-2;
|
||||
}
|
||||
.bg-grid{
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity:.12;
|
||||
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
.card-glass{
|
||||
background: linear-gradient(140deg, var(--glass), var(--glass2));
|
||||
border: 1px solid var(--b);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: 0 16px 60px rgba(0,0,0,.45);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.pill{
|
||||
padding: .35rem .7rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid var(--b);
|
||||
color: var(--muted);
|
||||
font-size: .82rem;
|
||||
}
|
||||
|
||||
.table-dark{
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-striped-bg: rgba(255,255,255,.03);
|
||||
--bs-table-hover-bg: rgba(255,255,255,.07);
|
||||
--bs-table-border-color: var(--table-border);
|
||||
}
|
||||
.table-dark th{
|
||||
color: var(--muted);
|
||||
border-bottom-color: var(--table-border) !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
.table-dark td{
|
||||
color: #fff;
|
||||
border-top-color: var(--table-border) !important;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background: rgba(255,255,255,.03);
|
||||
}
|
||||
|
||||
.btn-violet{
|
||||
border:0 !important;
|
||||
color:#0b0712 !important;
|
||||
font-weight:900 !important;
|
||||
border-radius: 14px !important;
|
||||
background: linear-gradient(135deg, var(--violet), var(--fuchsia)) !important;
|
||||
box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 18px 40px rgba(139,92,246,.22);
|
||||
}
|
||||
.btn-outline-light{
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid rgba(255,255,255,.16) !important;
|
||||
background: rgba(255,255,255,.07) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-outline-light:hover{ background: rgba(255,255,255,.15) !important; }
|
||||
.btn-outline-secondary{
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
.badge.text-bg-light{
|
||||
color:#0b0712;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.table-message{
|
||||
color: #e6e6e6;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.alert{
|
||||
border-radius: 14px;
|
||||
}
|
||||
381
public/css/edit_project.css
Normal file
381
public/css/edit_project.css
Normal file
@@ -0,0 +1,381 @@
|
||||
/*
|
||||
Admin Glass Theme (Purple Aurora)
|
||||
- Keeps your gradient style
|
||||
- Fixes dropdowns/selects (no white background, readable states)
|
||||
*/
|
||||
|
||||
:root{
|
||||
/* Base */
|
||||
--ink: #07060a;
|
||||
--panel: rgba(16, 14, 26, .62);
|
||||
--panel-strong: rgba(16, 14, 26, .86);
|
||||
|
||||
/* Borders / text */
|
||||
--border: rgba(255,255,255,.10);
|
||||
--border-strong: rgba(255,255,255,.16);
|
||||
--text: rgba(255,255,255,.90);
|
||||
--muted: rgba(255,255,255,.65);
|
||||
|
||||
/* Accents */
|
||||
--violet: rgba(139,92,246,.95);
|
||||
--magenta: rgba(217,70,239,.85);
|
||||
--neon: rgba(167,139,250,.90);
|
||||
|
||||
/* Effects */
|
||||
--shadow: 0 12px 50px rgba(0,0,0,.35);
|
||||
--shadow-strong: 0 18px 70px rgba(0,0,0,.45);
|
||||
--ring: 0 0 0 4px rgba(139,92,246,.18);
|
||||
|
||||
/* Radii */
|
||||
--r-sm: 10px;
|
||||
--r-md: 14px;
|
||||
--r-lg: 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
Base
|
||||
*/
|
||||
|
||||
html, body{ height: 100%; }
|
||||
body{
|
||||
background: var(--ink);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
a{ color: rgba(167,139,250,.95); }
|
||||
a:hover{ color: rgba(217,70,239,.95); }
|
||||
|
||||
::selection{
|
||||
background: rgba(167,139,250,.22);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container{ max-width: 1100px; }
|
||||
|
||||
/*
|
||||
Background helpers
|
||||
*/
|
||||
|
||||
.bg-aurora{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.28), transparent 60%),
|
||||
radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.20), transparent 60%),
|
||||
radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.16), transparent 60%);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.bg-grid{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity: .12;
|
||||
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/*
|
||||
Brand / Titles
|
||||
*/
|
||||
|
||||
h1.brand, .brand{
|
||||
font-weight: 800;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.brand{
|
||||
background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
Glass cards
|
||||
*/
|
||||
|
||||
.card-glass,
|
||||
.card.card-glass{
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border) !important;
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--r-lg);
|
||||
}
|
||||
|
||||
/*
|
||||
Alerts
|
||||
*/
|
||||
|
||||
.alert.card-glass{ color: var(--text); }
|
||||
|
||||
.alert-danger{
|
||||
background: rgba(220, 38, 38, .12) !important;
|
||||
border: 1px solid rgba(220, 38, 38, .25) !important;
|
||||
}
|
||||
.alert-success{
|
||||
background: rgba(34,197,94,.12) !important;
|
||||
border: 1px solid rgba(34,197,94,.22) !important;
|
||||
}
|
||||
.alert-warning{
|
||||
background: rgba(234,179,8,.12) !important;
|
||||
border: 1px solid rgba(234,179,8,.22) !important;
|
||||
}
|
||||
/* Optional: Bootstrap info alert used in your Gallery tab */
|
||||
.alert-info{
|
||||
background: rgba(59,130,246,.12) !important;
|
||||
border: 1px solid rgba(59,130,246,.22) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
/* nicer list spacing in errors */
|
||||
.alert ul{ padding-left: 1.25rem; }
|
||||
.alert li{ margin: .2rem 0; }
|
||||
|
||||
/*
|
||||
Tabs (Bootstrap nav-pills)
|
||||
*/
|
||||
|
||||
.nav-pills .nav-link{
|
||||
color: rgba(255,255,255,.78);
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: var(--r-md);
|
||||
padding: .55rem .85rem;
|
||||
}
|
||||
.nav-pills .nav-link:hover{
|
||||
background: rgba(255,255,255,.06);
|
||||
border-color: rgba(255,255,255,.12);
|
||||
color: rgba(255,255,255,.92);
|
||||
}
|
||||
.nav-pills .nav-link.active{
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
||||
border-color: rgba(167,139,250,.30);
|
||||
box-shadow: 0 12px 30px rgba(139,92,246,.18);
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
*/
|
||||
|
||||
.form-label{ color: var(--muted) !important; font-size: .92rem; }
|
||||
.form-text{ color: rgba(255,255,255,.55) !important; }
|
||||
|
||||
/* Inputs / Textareas */
|
||||
.form-control,
|
||||
textarea.form-control{
|
||||
background: rgba(255,255,255,.06) !important;
|
||||
border: 1px solid rgba(255,255,255,.10) !important;
|
||||
color: #fff !important;
|
||||
border-radius: var(--r-md) !important;
|
||||
padding: .85rem 1rem !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
textarea.form-control{ line-height: 1.35; }
|
||||
|
||||
.form-control::placeholder{ color: rgba(255,255,255,.35); }
|
||||
|
||||
.form-control:focus,
|
||||
textarea.form-control:focus{
|
||||
border-color: rgba(167,139,250,.55) !important;
|
||||
box-shadow: var(--ring) !important;
|
||||
}
|
||||
|
||||
/* Disabled/readonly */
|
||||
.form-control:disabled,
|
||||
.form-control[readonly]{
|
||||
opacity: .75;
|
||||
background: rgba(255,255,255,.04) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
SELECTS (Dropdown fields) — fixes “white background” issue
|
||||
Works for both:
|
||||
- Bootstrap 5: .form-select
|
||||
- Older Bootstrap: select.form-control
|
||||
*/
|
||||
|
||||
.form-select,
|
||||
select.form-control{
|
||||
background-color: rgba(255,255,255,.06) !important;
|
||||
border: 1px solid rgba(255,255,255,.10) !important;
|
||||
color: #fff !important;
|
||||
|
||||
border-radius: var(--r-md) !important;
|
||||
padding: .85rem 2.65rem .85rem 1rem !important;
|
||||
|
||||
/* Make sure OS arrow doesn't force ugly styles */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
/* Custom arrow */
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
.form-select:focus,
|
||||
select.form-control:focus{
|
||||
border-color: rgba(167,139,250,.55) !important;
|
||||
box-shadow: var(--ring) !important;
|
||||
}
|
||||
|
||||
/* Options: some browsers ignore this (native menu), but when supported it helps */
|
||||
.form-select option,
|
||||
select.form-control option{
|
||||
background: #0c0a14;
|
||||
color: rgba(255,255,255,.92);
|
||||
}
|
||||
|
||||
/*
|
||||
Bootstrap dropdown menus (the popup menus)
|
||||
*/
|
||||
|
||||
.dropdown-menu{
|
||||
background: var(--panel-strong) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
backdrop-filter: blur(18px) saturate(160%);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border-radius: var(--r-md);
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.dropdown-divider{
|
||||
border-top-color: rgba(255,255,255,.12) !important;
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
color: rgba(255,255,255,.86) !important;
|
||||
border-radius: var(--r-sm);
|
||||
padding: .55rem .7rem;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus{
|
||||
background: rgba(167,139,250,.16) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active{
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons
|
||||
*/
|
||||
|
||||
.btn{
|
||||
border-radius: var(--r-md) !important;
|
||||
padding: .55rem .95rem !important;
|
||||
font-weight: 600 !important;
|
||||
transition: transform .12s ease, filter .12s ease, background .12s ease;
|
||||
}
|
||||
.btn:hover{ transform: translateY(-1px); }
|
||||
|
||||
.btn-violet{
|
||||
color: #fff !important;
|
||||
border: 1px solid rgba(167,139,250,.28) !important;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
|
||||
box-shadow: 0 12px 30px rgba(139,92,246,.18);
|
||||
}
|
||||
.btn-violet:hover{ filter: brightness(1.06); }
|
||||
|
||||
.btn-outline-light{
|
||||
color: rgba(255,255,255,.85) !important;
|
||||
border: 1px solid rgba(255,255,255,.18) !important;
|
||||
background: rgba(255,255,255,.06) !important;
|
||||
}
|
||||
.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }
|
||||
|
||||
/*
|
||||
Code tag
|
||||
*/
|
||||
|
||||
code{
|
||||
color: rgba(167,139,250,.95);
|
||||
background: rgba(167,139,250,.10);
|
||||
border: 1px solid rgba(167,139,250,.18);
|
||||
padding: .15rem .35rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
Media manager (drop zone / grid)
|
||||
*/
|
||||
|
||||
.media-drop{
|
||||
border: 1px dashed rgba(255,255,255,.25);
|
||||
background: rgba(255,255,255,.04);
|
||||
min-height: 170px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, border-color .15s ease, transform .12s ease;
|
||||
}
|
||||
.media-drop:hover{
|
||||
background: rgba(255,255,255,.07);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.media-drop.is-drag{
|
||||
border-color: rgba(167,139,250,.65);
|
||||
box-shadow: 0 0 0 2px rgba(167,139,250,.25);
|
||||
background: rgba(167,139,250,.08);
|
||||
}
|
||||
|
||||
.media-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.media-card{
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: var(--r-md);
|
||||
background: rgba(255,255,255,.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.media-card img{
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-meta{ padding: .65rem .8rem; }
|
||||
|
||||
.media-actions{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.media-actions .btn{
|
||||
padding: .3rem .6rem !important;
|
||||
border-radius: 10px !important;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
/*
|
||||
Mobile polish
|
||||
*/
|
||||
|
||||
@media (max-width: 576px){
|
||||
.btn{ width: 100%; }
|
||||
.mt-4.d-flex.gap-2{ flex-direction: column; }
|
||||
}
|
||||
Reference in New Issue
Block a user