nessi/NexaVPN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restore original logo image and update color scheme with cyan-violet gradient palette

Browse Source 
Replace inline SVG brand glyph with NexaVPN_Logo.png image in sidebar. Simplify brand-block to sidebar-brand with logo image styling.

Update CSS color variables from green accent (#74e0b8) to cyan (#44e6e7) with violet (#8d5bff) and blue (#4a8cff) accents. Adjust background gradients to use new cyan-violet-blue palette with updated opacity values.

Update nav-link hover and active states with cyan-blue gradient background. Modify sidebar background
This commit is contained in:
Sascha Nesterovic
2026-03-24 17:54:59 +01:00
parent 1a2044537d
commit 8282c1fbf4
2 changed files with 36 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
admin-web/src/styles/global.css
View File

@@ -1,15 +1,16 @@
:root {
color-scheme: light dark;
--bg: #0c1322;
--bg-soft: #111b30;
--panel: rgba(17, 27, 48, 0.78);
--panel-strong: #14203a;
--text: #eff4ff;
--muted: #9fb2d4;
--line: rgba(177, 197, 229, 0.15);
--accent: #74e0b8;
--accent-strong: #1fb67a;
--shadow: 0 18px 48px rgba(3, 8, 20, 0.35);
--bg: #08101d;
--bg-soft: #0d1630;
--panel: rgba(13, 22, 48, 0.82);
--panel-strong: #142453;
--text: #eff5ff;
--muted: #9db1d3;
--line: rgba(114, 178, 255, 0.16);
--accent: #44e6e7;
--accent-strong: #4a8cff;
--accent-violet: #8d5bff;
--shadow: 0 20px 56px rgba(2, 7, 18, 0.42);
font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
}
@@ -22,9 +23,10 @@ body {
min-height: 100vh;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(116, 224, 184, 0.17), transparent 28%),
radial-gradient(circle at bottom right, rgba(98, 144, 255, 0.16), transparent 24%),
linear-gradient(180deg, #08101d 0%, #0d1728 100%);
radial-gradient(circle at top left, rgba(68, 230, 231, 0.18), transparent 26%),
radial-gradient(circle at top right, rgba(141, 91, 255, 0.16), transparent 24%),
radial-gradient(circle at bottom right, rgba(74, 140, 255, 0.16), transparent 26%),
linear-gradient(180deg, #07101c 0%, #0a1430 100%);
}
a {
@@ -90,31 +92,19 @@ button {
align-items: flex-start;
}
.brand-glyph,
.topbar-icon-wrap,
.page-title-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--accent);
border: 1px solid rgba(116, 224, 184, 0.18);
border: 1px solid rgba(68, 230, 231, 0.18);
background:
radial-gradient(circle at top, rgba(116, 224, 184, 0.14), transparent 72%),
radial-gradient(circle at top, rgba(68, 230, 231, 0.16), transparent 72%),
rgba(10, 18, 32, 0.88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.brand-glyph {
width: 54px;
height: 54px;
border-radius: 18px;
}
.brand-glyph svg {
width: 25px;
height: 25px;
}
.brand-copy {
display: grid;
gap: 6px;
@@ -176,14 +166,26 @@ button {
.sidebar {
padding: 28px;
border-right: 1px solid var(--line);
background: rgba(7, 12, 22, 0.76);
background:
linear-gradient(180deg, rgba(8, 15, 28, 0.96) 0%, rgba(7, 13, 25, 0.88) 100%);
backdrop-filter: blur(18px);
}
.sidebar-brand {
display: flex;
align-items: center;
}
.sidebar-brand-logo {
width: min(100%, 170px);
height: auto;
display: block;
}
.nav {
display: grid;
gap: 10px;
margin-top: 36px;
margin-top: 28px;
}
.nav-link {
@@ -201,8 +203,9 @@ button {
.nav-link:hover,
.nav-link.active {
color: var(--text);
border-color: rgba(116, 224, 184, 0.14);
background: rgba(116, 224, 184, 0.08);
border-color: rgba(68, 230, 231, 0.16);
background:
linear-gradient(135deg, rgba(68, 230, 231, 0.08), rgba(74, 140, 255, 0.08));
}
.nav-link-copy {