gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-10-13 22:47:06 +03:00
parent 5ad9cbe3a6
commit dfcaebaf8c
12 changed files with 3233 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
gnx-react/public/styles/layout/_banner.scss
View File

@@ -800,23 +800,30 @@
.cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1e40af, #0ea5e9);
color: white;
padding: 14px 28px;
border-radius: 8px;
gap: 10px;
background: linear-gradient(135deg, #1a365d, #2563eb);
color: #ffffff !important;
padding: 16px 32px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 24px rgba(30, 64, 175, 0.3);
box-shadow: 0 4px 14px rgba(26, 54, 93, 0.25);
font-size: 15px;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
span, i {
color: #ffffff !important;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.35);
background: linear-gradient(135deg, #1e40af, #3b82f6);
}
&:active {
@@ -824,7 +831,7 @@
}
i {
font-size: 15px;
font-size: 14px;
transition: transform 0.3s ease;
}
@@ -836,25 +843,31 @@
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: white;
padding: 14px 28px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
gap: 10px;
background: rgba(255, 255, 255, 0.05);
color: #ffffff !important;
padding: 16px 32px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 15px;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
span, i {
color: #ffffff !important;
}
&:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}
&:active {
@@ -862,7 +875,7 @@
}
i {
font-size: 15px;
font-size: 14px;
}
}
}

8
gnx-react/public/styles/layout/_footer.scss
View File

@@ -54,7 +54,7 @@
img {
filter: brightness(0) invert(1); // Make logo white for dark footer
transition: all 0.3s ease;
max-height: 120px;
max-height: 90px;
width: auto;
}
@@ -479,7 +479,7 @@
}
.footer-logo img {
max-height: 100px;
max-height: 75px;
}
.security-badges-left,
@@ -511,7 +511,7 @@
}
.footer-logo img {
max-height: 80px;
max-height: 60px;
}
.security-badges-left,
@@ -540,7 +540,7 @@
@media (max-width: 575.98px) {
.footer-logo-section {
.footer-logo img {
max-height: 60px;
max-height: 45px;
}
.security-badges-left,

297
gnx-react/public/styles/layout/_header.scss
View File

@@ -71,13 +71,16 @@
.navbar__dropdown-label {
position: relative;
padding-right: 25px;
padding: 10px 25px 10px 15px;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&::after {
content: "\f107";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 0;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
@@ -87,6 +90,17 @@
&:hover {
color: var(--enterprise-gold);
background: rgba(255, 255, 255, 0.05);
&::after {
color: var(--enterprise-gold);
transform: translateY(-50%) rotate(180deg);
}
}
&.navbar__item-active {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.1);
&::after {
color: var(--enterprise-gold);
@@ -101,71 +115,103 @@
}
}
&:hover .navbar__dropdown-label::after {
transform: translateY(-50%) rotate(180deg);
&:hover .navbar__dropdown-label {
color: var(--enterprise-gold);
background: rgba(255, 255, 255, 0.05);
&::after {
transform: translateY(-50%) rotate(180deg);
color: var(--enterprise-gold);
}
}
}
.navbar__sub-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.92);
border-radius: 8px;
position: absolute !important;
top: calc(100% + 12px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: #1a1a1a !important;
border-radius: 12px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
0 8px 25px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: 4px 0;
min-width: 240px;
0 25px 70px rgba(0, 0, 0, 0.7),
0 10px 35px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2) !important;
padding: 12px !important;
min-width: 280px !important;
max-width: 320px;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px) scale(0.96);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
z-index: 9999 !important;
backdrop-filter: blur(25px) saturate(180%);
// Custom scrollbar styles
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 8px 0;
}
&::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.4);
border-radius: 10px;
&:hover {
background: rgba(212, 175, 55, 0.6);
}
}
&.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
display: block !important;
}
&::before {
content: "";
position: absolute;
top: -7px;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(0, 0, 0, 0.92);
filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.4));
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1a1a1a;
filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.5));
}
li {
list-style: none;
margin: 1px 6px;
border-radius: 6px;
overflow: hidden;
margin: 2px 0;
border-radius: 8px;
overflow: visible;
opacity: 1 !important;
visibility: visible !important;
a {
display: flex;
align-items: center;
padding: 10px 16px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 500;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: block !important;
padding: 14px 20px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
text-decoration: none;
border-radius: 6px;
letter-spacing: 0.2px;
line-height: 1.4;
text-decoration: none !important;
border-radius: 8px;
letter-spacing: 0.3px;
line-height: 1.5;
opacity: 1 !important;
visibility: visible !important;
&::before {
content: "";
@@ -173,30 +219,33 @@
left: 0;
top: 0;
bottom: 0;
width: 2px;
width: 3px;
background: linear-gradient(135deg, var(--enterprise-gold), #f4d03f);
transform: scaleY(0);
transition: transform 0.25s ease;
border-radius: 0 1px 1px 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0 2px 2px 0;
}
&::after {
content: "→";
position: absolute;
right: 16px;
right: 20px;
opacity: 0;
transform: translateX(-3px);
transition: all 0.25s ease;
transform: translateX(-5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--enterprise-gold);
font-weight: 600;
font-size: 10px;
font-weight: 700;
font-size: 14px;
}
&:hover {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.12);
transform: translateX(3px);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
transform: translateX(4px);
box-shadow:
0 4px 12px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding-right: 35px;
&::before {
transform: scaleY(1);
@@ -210,9 +259,11 @@
&.active-current-sub {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.18);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.12));
font-weight: 600;
box-shadow: 0 1px 6px rgba(212, 175, 55, 0.25);
box-shadow:
0 2px 10px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
&::before {
transform: scaleY(1);
@@ -222,34 +273,34 @@
// Loading and error states
.text-muted {
color: rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.65) !important;
font-style: italic;
font-size: 12px;
padding: 10px 16px;
font-size: 13px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.2px;
gap: 8px;
letter-spacing: 0.3px;
&::before {
content: "⏳";
animation: spin 1s linear infinite;
font-size: 10px;
font-size: 12px;
}
}
.text-danger {
color: #ff6b6b;
font-size: 12px;
padding: 10px 16px;
color: #ff6b6b !important;
font-size: 13px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.2px;
gap: 8px;
letter-spacing: 0.3px;
&::before {
content: "⚠️";
font-size: 10px;
font-size: 12px;
}
}
}
@@ -259,6 +310,17 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInSlideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.navbar__options {
display: flex;
@@ -349,21 +411,102 @@
}
}
}
.navbar__item--has-children {
.navbar__dropdown-label {
&:hover {
color: var(--primary-color);
background: rgba(0, 0, 0, 0.04);
&::after {
color: var(--primary-color);
}
}
&.navbar__item-active {
color: var(--primary-color);
background: rgba(212, 175, 55, 0.12);
&::after {
color: var(--primary-color);
}
}
}
&:hover .navbar__dropdown-label {
color: var(--primary-color);
background: rgba(0, 0, 0, 0.04);
&::after {
color: var(--primary-color);
}
}
}
.navbar__sub-menu {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.15),
0 10px 35px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(25px) saturate(180%);
&::before {
border-bottom-color: white;
border-bottom-color: #ffffff;
}
// Custom scrollbar for light mode
&::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.5);
&:hover {
background: rgba(212, 175, 55, 0.7);
}
}
li a {
color: var(--secondary-color);
display: block !important;
color: #222222 !important;
opacity: 1 !important;
visibility: visible !important;
&:hover {
&::before {
background: linear-gradient(135deg, var(--primary-color), var(--enterprise-gold));
}
&::after {
color: var(--primary-color);
}
&:hover {
color: var(--primary-color) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));
box-shadow:
0 4px 12px rgba(212, 175, 55, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
&.active-current-sub {
color: var(--primary-color) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
box-shadow:
0 2px 10px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
// Loading and error states for light mode
.text-muted {
color: rgba(0, 0, 0, 0.55) !important;
}
.text-danger {
color: #dc3545 !important;
}
}
@@ -936,6 +1079,20 @@
}
// Responsive styles for enterprise header
@media (max-width: 1199.98px) {
.tp-header {
.navbar__sub-menu {
min-width: 240px;
max-width: 280px;
li a {
padding: 12px 18px;
font-size: 13px;
}
}
}
}
@media (max-width: 991.98px) {
.tp-header {
.navbar__menu {