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

GNXSOFT.COM

Browse Source
This commit is contained in:
Iliyan Angelov
2025-09-26 00:15:37 +03:00
commit fe26b7cca4
16323 changed files with 2011881 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

689
gnx-react/public/styles/components/_cookie-consent.scss Normal file
View File

@@ -0,0 +1,689 @@
/* ==============
========= Cookie Consent Styles =========
============== */
// Cookie Consent Banner
.cookie-consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-50);
background: var(--white);
border-top: 1px solid var(--secondary-200);
box-shadow: var(--shadow-lg);
padding: var(--space-6);
@media (max-width: 768px) {
padding: var(--space-4);
}
&__container {
max-width: var(--container-xl);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
@media (max-width: 768px) {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
}
&__content {
display: flex;
align-items: center;
gap: var(--space-4);
flex: 1;
@media (max-width: 768px) {
flex-direction: column;
text-align: center;
}
}
&__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: var(--primary-100);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-600);
font-size: var(--text-xl);
@media (max-width: 768px) {
width: 40px;
height: 40px;
font-size: var(--text-lg);
}
}
&__text {
flex: 1;
h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
margin: 0 0 var(--space-2) 0;
line-height: var(--leading-tight);
}
p {
font-size: var(--text-sm);
color: var(--secondary-600);
margin: 0 0 var(--space-3) 0;
line-height: var(--leading-relaxed);
max-width: 600px;
}
}
&__links {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
a {
font-size: var(--text-xs);
color: var(--primary-600);
text-decoration: none;
font-weight: var(--font-weight-medium);
border-bottom: 1px solid transparent;
transition: var(--transition-colors);
&:hover {
color: var(--primary-700);
border-bottom-color: var(--primary-600);
}
}
}
&__actions {
display: flex;
gap: var(--space-3);
flex-shrink: 0;
@media (max-width: 768px) {
width: 100%;
justify-content: center;
}
}
&__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
border: none;
cursor: pointer;
transition: var(--transition-all);
white-space: nowrap;
@media (max-width: 768px) {
flex: 1;
justify-content: center;
}
&--primary {
background: var(--primary-600);
color: var(--white);
&:hover {
background: var(--primary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
&:active {
transform: translateY(0);
}
}
&--secondary {
background: var(--secondary-100);
color: var(--secondary-700);
border: 1px solid var(--secondary-200);
&:hover {
background: var(--secondary-200);
border-color: var(--secondary-300);
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
}
i {
font-size: var(--text-xs);
}
}
}
// Cookie Settings Modal
.cookie-settings-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: var(--z-50);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.cookie-settings-modal {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6);
border-bottom: 1px solid var(--secondary-200);
background: var(--secondary-50);
}
&__header-content {
display: flex;
align-items: center;
gap: var(--space-3);
h2 {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
margin: 0;
}
}
&__version {
font-size: var(--text-xs);
color: var(--secondary-500);
background: var(--secondary-200);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-weight: var(--font-weight-medium);
margin: 0;
}
&__close {
width: 32px;
height: 32px;
border: none;
background: var(--secondary-100);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--secondary-600);
transition: var(--transition-all);
&:hover {
background: var(--secondary-200);
color: var(--secondary-800);
}
i {
font-size: var(--text-sm);
}
}
&__content {
padding: var(--space-6);
overflow-y: auto;
flex: 1;
}
&__description {
margin-bottom: var(--space-6);
p {
font-size: var(--text-sm);
color: var(--secondary-600);
line-height: var(--leading-relaxed);
margin: 0;
}
}
&__types {
margin-bottom: var(--space-6);
}
&__type {
padding: var(--space-4);
border: 1px solid var(--secondary-200);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
transition: var(--transition-all);
&:last-child {
margin-bottom: 0;
}
&--required {
background: var(--secondary-50);
border-color: var(--primary-200);
}
&:hover {
border-color: var(--secondary-300);
box-shadow: var(--shadow-sm);
}
}
&__type-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
}
&__type-info {
display: flex;
gap: var(--space-3);
flex: 1;
i {
color: var(--primary-600);
font-size: var(--text-lg);
margin-top: 2px;
flex-shrink: 0;
}
h4 {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
margin: 0 0 var(--space-1) 0;
}
p {
font-size: var(--text-sm);
color: var(--secondary-600);
line-height: var(--leading-relaxed);
margin: 0;
}
}
&__type-toggle {
flex-shrink: 0;
}
&__privacy {
background: var(--secondary-50);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--secondary-200);
h4 {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
margin: 0 0 var(--space-3) 0;
}
ul {
margin: 0;
padding-left: var(--space-5);
li {
font-size: var(--text-sm);
color: var(--secondary-600);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2);
&:last-child {
margin-bottom: 0;
}
}
}
}
&__footer {
display: flex;
gap: var(--space-3);
padding: var(--space-6);
border-top: 1px solid var(--secondary-200);
background: var(--secondary-50);
justify-content: flex-end;
}
&__btn {
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
border: none;
cursor: pointer;
transition: var(--transition-all);
min-width: 120px;
&--primary {
background: var(--primary-600);
color: var(--white);
&:hover {
background: var(--primary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
}
&--secondary {
background: var(--white);
color: var(--secondary-700);
border: 1px solid var(--secondary-300);
&:hover {
background: var(--secondary-50);
border-color: var(--secondary-400);
}
}
&--outline {
background: transparent;
color: var(--primary-600);
border: 1px solid var(--primary-300);
&:hover {
background: var(--primary-50);
border-color: var(--primary-400);
}
}
&--danger {
background: var(--error);
color: var(--white);
&:hover {
background: #dc2626;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
}
}
}
// Enterprise features styling
.cookie-settings-modal__enterprise {
background: var(--primary-50);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--primary-200);
margin-top: var(--space-4);
h4 {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
color: var(--primary-800);
margin: 0 0 var(--space-3) 0;
}
}
.cookie-settings-modal__enterprise-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
@media (max-width: 640px) {
flex-direction: column;
}
}
// Cookie Toggle Switch
.cookie-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
input {
opacity: 0;
width: 0;
height: 0;
&:checked + .cookie-toggle__slider {
background: var(--primary-600);
&:before {
transform: translateX(24px);
}
}
&:disabled + .cookie-toggle__slider {
background: var(--secondary-300);
cursor: not-allowed;
&:before {
background: var(--secondary-400);
}
}
}
&__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--secondary-300);
transition: var(--transition-all);
border-radius: var(--radius-full);
&:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: var(--white);
transition: var(--transition-all);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
}
}
}
// Cookie Preferences Display (for footer/privacy page)
.cookie-preferences-display {
background: var(--secondary-50);
padding: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid var(--secondary-200);
h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
margin: 0 0 var(--space-4) 0;
}
&__status {
margin-bottom: var(--space-4);
p {
font-size: var(--text-sm);
color: var(--secondary-600);
margin: 0 0 var(--space-2) 0;
line-height: var(--leading-relaxed);
strong {
color: var(--secondary-800);
font-weight: var(--font-weight-medium);
}
}
}
&__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
&__btn {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
border: 1px solid var(--secondary-300);
background: var(--white);
color: var(--secondary-700);
cursor: pointer;
transition: var(--transition-all);
&:hover {
background: var(--secondary-50);
border-color: var(--secondary-400);
}
&--reset {
color: var(--error);
border-color: var(--error);
&:hover {
background: var(--error);
color: var(--white);
}
}
}
}
// Responsive adjustments
@media (max-width: 640px) {
.cookie-settings-modal {
margin: var(--space-4);
max-height: calc(100vh - var(--space-8));
&__header,
&__content,
&__footer {
padding: var(--space-4);
}
&__type-header {
flex-direction: column;
gap: var(--space-3);
}
&__type-toggle {
align-self: flex-start;
}
}
.cookie-preferences-display {
padding: var(--space-4);
&__actions {
flex-direction: column;
}
&__btn {
width: 100%;
justify-content: center;
}
}
}
// Dark mode support (if needed in the future)
@media (prefers-color-scheme: dark) {
.cookie-consent-banner {
background: var(--secondary-800);
border-top-color: var(--secondary-700);
&__text h3 {
color: var(--secondary-100);
}
&__text p {
color: var(--secondary-300);
}
}
.cookie-settings-modal {
background: var(--secondary-800);
&__header {
background: var(--secondary-900);
border-bottom-color: var(--secondary-700);
h2 {
color: var(--secondary-100);
}
}
&__close {
background: var(--secondary-700);
color: var(--secondary-300);
&:hover {
background: var(--secondary-600);
color: var(--secondary-100);
}
}
&__type {
background: var(--secondary-700);
border-color: var(--secondary-600);
&--required {
background: var(--secondary-700);
border-color: var(--primary-400);
}
}
&__type-info {
h4 {
color: var(--secondary-100);
}
p {
color: var(--secondary-300);
}
}
&__privacy {
background: var(--secondary-700);
border-color: var(--secondary-600);
h4 {
color: var(--secondary-100);
}
li {
color: var(--secondary-300);
}
}
&__footer {
background: var(--secondary-900);
border-top-color: var(--secondary-700);
}
}
}