fix(shadcn): isolate Nexus CSS vars with --nx- prefix + admin password reset endpoint
This commit is contained in:
@@ -0,0 +1,681 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 252 80% 74%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 252 80% 74%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
body {
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', sans-serif;
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Nexus overrides for existing CSS variables used in dashboard */
|
||||
:root {
|
||||
--nx-bg: #080a0f;
|
||||
--nx-panel: #10131a;
|
||||
--nx-panel-soft: #0d1016;
|
||||
--nx-line: #202530;
|
||||
--nx-muted: #7e8799;
|
||||
--nx-accent: #8b7cf6;
|
||||
--nx-accent-soft: rgba(139, 124, 246, 0.12);
|
||||
--nx-green: #51d49a;
|
||||
--nx-text: #e8eaf0;
|
||||
--nx-text-dim: #6f7889;
|
||||
}
|
||||
|
||||
/* ── Existing Nexus layout styles ── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 224px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 22px 14px 14px;
|
||||
border-right: 1px solid #1a1e27;
|
||||
background: rgba(9, 11, 16, 0.94);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 0 8px 25px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #443d7c;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(145deg, #241f44, #12121f);
|
||||
color: #b8adff;
|
||||
box-shadow: 0 0 24px rgba(139, 124, 246, 0.13);
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.brand span,
|
||||
.owner span {
|
||||
display: block;
|
||||
color: var(--nx-muted);
|
||||
font-size: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.nav button,
|
||||
.sidebar-bottom > button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
padding: 9px 10px;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #8991a1;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav button:hover,
|
||||
.nav button.active {
|
||||
color: #ececf5;
|
||||
background: var(--nx-accent-soft);
|
||||
}
|
||||
|
||||
.nav button.active {
|
||||
box-shadow: inset 2px 0 var(--nx-accent);
|
||||
}
|
||||
|
||||
.nav button i {
|
||||
margin-left: auto;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid #343947;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid #1b1f28;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.owner {
|
||||
display: grid;
|
||||
grid-template-columns: 31px 1fr auto;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
padding: 10px 8px;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.owner:hover {
|
||||
background: var(--nx-accent-soft);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.owner strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #28243f;
|
||||
color: #bcb3ff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
border-bottom: 1px solid #191d25;
|
||||
background: rgba(8, 10, 15, 0.68);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.search {
|
||||
width: min(390px, 42vw);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #202530;
|
||||
border-radius: 7px;
|
||||
color: #6f7889;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.search kbd {
|
||||
margin-left: auto;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #2c313d;
|
||||
border-radius: 4px;
|
||||
color: #606979;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #8c95a5;
|
||||
}
|
||||
|
||||
.connection.live {
|
||||
color: var(--nx-green);
|
||||
}
|
||||
|
||||
.connection.preview {
|
||||
color: #e6b75d;
|
||||
}
|
||||
|
||||
.ask,
|
||||
.refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid #37315e;
|
||||
border-radius: 7px;
|
||||
background: #18152a;
|
||||
color: #c4bbff;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px 16px 60px;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.kicker {
|
||||
color: #7065c8;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 7px 0 5px;
|
||||
font-size: 27px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.page-heading p,
|
||||
.placeholder p {
|
||||
margin: 0;
|
||||
color: var(--nx-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
border-color: var(--nx-line);
|
||||
background: var(--nx-panel);
|
||||
color: #a5adba;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #aaa4e7;
|
||||
}
|
||||
|
||||
/* ── Keep existing module/layout styles for non-dashboard pages ── */
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.metrics article,
|
||||
.panel {
|
||||
border: 1px solid var(--nx-line);
|
||||
background: linear-gradient(145deg, rgba(18, 21, 29, 0.96), rgba(12, 15, 21, 0.96));
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.metrics article {
|
||||
padding: 16px 17px;
|
||||
}
|
||||
|
||||
.metrics span {
|
||||
color: #717a8a;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.metrics strong {
|
||||
display: block;
|
||||
margin: 7px 0 5px;
|
||||
font-size: 24px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.metrics small {
|
||||
color: #687181;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.metrics small.up {
|
||||
color: #55c995;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 18px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #1d222c;
|
||||
}
|
||||
|
||||
.panel-head h2 {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.panel-head button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #8e96a5;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.badge.positive {
|
||||
color: var(--nx-green);
|
||||
background: rgba(81, 212, 154, 0.1);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
color: #e7b660;
|
||||
background: rgba(231, 182, 96, 0.1);
|
||||
}
|
||||
|
||||
.badge.negative {
|
||||
color: #e16e75;
|
||||
background: rgba(225, 110, 117, 0.1);
|
||||
}
|
||||
|
||||
.runtime-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.runtime-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
color: #ad9fff;
|
||||
background: var(--nx-accent-soft);
|
||||
}
|
||||
|
||||
.runtime-main strong,
|
||||
.model strong,
|
||||
.project strong,
|
||||
.event strong {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.runtime-main span,
|
||||
.model small,
|
||||
.event small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--nx-muted);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.pulse-bars {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.pulse-bars i {
|
||||
width: 3px;
|
||||
min-height: 5px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(#927fff, #443b7c);
|
||||
}
|
||||
|
||||
.model {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 12px 2px;
|
||||
border-bottom: 1px solid #1b2029;
|
||||
}
|
||||
|
||||
.model > span:last-child {
|
||||
color: #687181;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #657083;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: var(--nx-green);
|
||||
box-shadow: 0 0 7px rgba(81, 212, 154, 0.4);
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: #e16e75;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: grid;
|
||||
grid-template-columns: 34px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #1b2029;
|
||||
}
|
||||
|
||||
.project-letter {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #353047;
|
||||
border-radius: 7px;
|
||||
color: #a99cf5;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.project-info > div:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-info span {
|
||||
color: var(--nx-muted);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.project b {
|
||||
color: #838c9c;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 3px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #242936;
|
||||
}
|
||||
|
||||
.progress i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #685ac8, #a091ff);
|
||||
}
|
||||
|
||||
.event {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #1b2029;
|
||||
}
|
||||
|
||||
.event > span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: 4px;
|
||||
border-radius: 50%;
|
||||
background: #657083;
|
||||
}
|
||||
|
||||
.event > span.runtime {
|
||||
background: var(--nx-green);
|
||||
}
|
||||
|
||||
.event > span.deploy {
|
||||
background: #8b7cf6;
|
||||
}
|
||||
|
||||
.event > span.security {
|
||||
background: #e5ad52;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
min-height: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder svg {
|
||||
margin-bottom: 18px;
|
||||
color: #8074d8;
|
||||
}
|
||||
|
||||
.placeholder h2 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
left: -240px;
|
||||
width: 224px;
|
||||
transition: left 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
box-shadow: 20px 0 60px #000;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.content {
|
||||
padding: 26px 16px 40px;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.page-heading p {
|
||||
max-width: 220px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.runtime-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pulse-bars {
|
||||
width: 100%;
|
||||
margin-left: 57px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user