mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-02-18 14:54:54 -05:00
403 lines
9.2 KiB
SCSS
403 lines
9.2 KiB
SCSS
/* Global styles and PrimeNG theme setup */
|
|
|
|
/* Import PrimeNG Theme (Lara Dark with Purple accent) */
|
|
@use "primeicons/primeicons.css";
|
|
@use "primeflex/primeflex.css";
|
|
|
|
/* Global Variables */
|
|
:root {
|
|
/* Base application variables */
|
|
--app-font-family: Poppins, sans-serif;
|
|
--app-primary: var(--primary-color);
|
|
--app-card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
|
|
--app-content-padding: 1.5rem;
|
|
--app-border-radius: 6px;
|
|
--app-transition-speed: 0.3s;
|
|
|
|
/* Purple Theme Colors - Default values that will be overridden by ThemeService */
|
|
--primary-color: #7E57C2;
|
|
--primary-color-text: #ffffff;
|
|
--primary-dark: #5E35B1;
|
|
--primary-light: #B39DDB;
|
|
|
|
/* Dark theme base colors */
|
|
--surface-ground: #121212;
|
|
--surface-section: #1E1E1E;
|
|
--surface-card: #262626;
|
|
--surface-overlay: #2A2A2A;
|
|
--surface-border: #383838;
|
|
|
|
--text-color: #F5F5F5;
|
|
--text-color-secondary: #BDBDBD;
|
|
--text-color-disabled: #757575;
|
|
|
|
/* App-specific accent colors */
|
|
--accent-purple-50: #EDE7F6;
|
|
--accent-purple-100: #D1C4E9;
|
|
--accent-purple-200: #B39DDB;
|
|
--accent-purple-300: #9575CD;
|
|
--accent-purple-400: #7E57C2; /* Main accent */
|
|
--accent-purple-500: #673AB7;
|
|
--accent-purple-600: #5E35B1;
|
|
--accent-purple-700: #512DA8;
|
|
--accent-purple-800: #4527A0;
|
|
--accent-purple-900: #311B92;
|
|
|
|
/* Sidebar Layout Variables */
|
|
--sidebar-width: 270px; /* Single source for both desktop/mobile */
|
|
--sidebar-width-collapsed: 70px;
|
|
--sidebar-height: 100vh;
|
|
--sidebar-z-index: 1000;
|
|
|
|
/* Sidebar Visual Variables */
|
|
--sidebar-background: linear-gradient(135deg, #2c1a47 0%, #1a0e29 50%, #1e1230 75%, rgba(30, 18, 48, 0.95) 100%);
|
|
--sidebar-border: 1px solid rgba(142, 68, 173, 0.15);
|
|
--sidebar-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
|
|
--sidebar-backdrop-filter: blur(5px);
|
|
|
|
/* Sidebar Top Line */
|
|
--sidebar-top-line-height: 1px;
|
|
--sidebar-top-line-background: linear-gradient(90deg, rgba(142, 68, 173, 0.6), rgba(103, 58, 183, 0.6));
|
|
--sidebar-top-line-shadow: 0 0 8px rgba(142, 68, 173, 0.4);
|
|
|
|
/* Logo Variables */
|
|
--sidebar-logo-size: 50px;
|
|
--sidebar-logo-background: rgba(142, 68, 173, 0.1);
|
|
--sidebar-logo-border: 1px solid rgba(142, 68, 173, 0.3);
|
|
--sidebar-logo-icon-size: 30px;
|
|
|
|
/* Navigation Variables */
|
|
--sidebar-nav-padding: 1rem 0;
|
|
--sidebar-nav-item-padding: 10px 20px;
|
|
--sidebar-nav-icon-wrapper-size: 48px;
|
|
--sidebar-nav-icon-size: 22px;
|
|
--sidebar-nav-border-radius: 0 6px 6px 0;
|
|
--sidebar-nav-hover-transform: translateX(4px);
|
|
|
|
/* Text & Color Variables */
|
|
--sidebar-text-white: #ffffff;
|
|
--sidebar-text-gradient: linear-gradient(to right, #fff, #bbb);
|
|
--sidebar-text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
--sidebar-logo-glow: 0 0 10px 6px rgba(89, 16, 185, 0.5);
|
|
--sidebar-heart-color: rgb(147, 0, 255);
|
|
--sidebar-heart-shadow: 0 0 6px rgba(239, 68, 68, 0.7), 0 0 12px rgba(239, 68, 68, 0.5);
|
|
|
|
/* Animation Variables */
|
|
--sidebar-transition-duration: 0.3s;
|
|
--sidebar-transition-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
--sidebar-animation-easing: ease-in-out;
|
|
|
|
/* Standard color palette for logs and events */
|
|
--yellow-50: #fffde7;
|
|
--yellow-100: #fff9c4;
|
|
--yellow-200: #fff59d;
|
|
--yellow-300: #fff176;
|
|
--yellow-400: #ffee58;
|
|
--yellow-500: #ffeb3b;
|
|
--yellow-600: #fdd835;
|
|
--yellow-700: #fbc02d;
|
|
--yellow-800: #f9a825;
|
|
--yellow-900: #f57f17;
|
|
|
|
--blue-50: #e3f2fd;
|
|
--blue-100: #bbdefb;
|
|
--blue-200: #90caf9;
|
|
--blue-300: #64b5f6;
|
|
--blue-400: #42a5f5;
|
|
--blue-500: #2196f3;
|
|
--blue-600: #1e88e5;
|
|
--blue-700: #1976d2;
|
|
--blue-800: #1565c0;
|
|
--blue-900: #0d47a1;
|
|
|
|
--red-50: #ffebee;
|
|
--red-100: #ffcdd2;
|
|
--red-200: #ef9a9a;
|
|
--red-300: #e57373;
|
|
--red-400: #ef5350;
|
|
--red-500: #f44336;
|
|
--red-600: #e53935;
|
|
--red-700: #d32f2f;
|
|
--red-800: #c62828;
|
|
--red-900: #b71c1c;
|
|
|
|
--orange-50: #fff3e0;
|
|
--orange-100: #ffe0b2;
|
|
--orange-200: #ffcc80;
|
|
--orange-300: #ffb74d;
|
|
--orange-400: #ffa726;
|
|
--orange-500: #ff9800;
|
|
--orange-600: #fb8c00;
|
|
--orange-700: #f57c00;
|
|
--orange-800: #ef6c00;
|
|
--orange-900: #e65100;
|
|
|
|
--gray-50: #fafafa;
|
|
--gray-100: #f5f5f5;
|
|
--gray-200: #eeeeee;
|
|
--gray-300: #e0e0e0;
|
|
--gray-400: #bdbdbd;
|
|
--gray-500: #9e9e9e;
|
|
--gray-600: #757575;
|
|
--gray-700: #616161;
|
|
--gray-800: #424242;
|
|
--gray-900: #212121;
|
|
}
|
|
|
|
/* Base Styles */
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--app-font-family);
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--surface-ground);
|
|
color: var(--text-color);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.grid-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* PrimeNG Component Customizations */
|
|
|
|
/* Card styles */
|
|
.p-card {
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--app-card-shadow) !important;
|
|
transition: transform var(--app-transition-speed), box-shadow var(--app-transition-speed);
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.p-card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.p-card-subtitle {
|
|
font-weight: 400;
|
|
color: var(--text-color-secondary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.p-card-content {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.p-card-footer {
|
|
padding-top: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Button styling */
|
|
.p-button {
|
|
border-radius: var(--border-radius);
|
|
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--primary-color), 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&.p-button-outlined {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-50);
|
|
}
|
|
}
|
|
|
|
&.p-button-text {
|
|
background-color: transparent;
|
|
color: var(--primary-color);
|
|
border-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--primary-600);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Form elements */
|
|
.form-field {
|
|
margin-bottom: 1.5rem;
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.field-row {
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
label {
|
|
min-width: 200px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media screen and (max-width: 768px) {
|
|
html {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.p-card .p-card-content {
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.field-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
label {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.p-select, .p-autocomplete {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* PrimeNG Sidebar Override - moved to sidebar-content component */
|
|
|
|
/* Dark purple theme overrides */
|
|
.dark-mode {
|
|
/* Button styles */
|
|
.p-button {
|
|
&.p-button-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
|
|
&:hover {
|
|
background-color: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
}
|
|
}
|
|
|
|
&.p-button-outlined {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
|
|
&:hover {
|
|
background-color: rgba(126, 87, 194, 0.1);
|
|
}
|
|
}
|
|
|
|
&.p-button-text {
|
|
color: var(--primary-color);
|
|
|
|
&:hover {
|
|
background-color: rgba(126, 87, 194, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.p-card {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2) !important;
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
}
|
|
|
|
/* Selection and focus states */
|
|
.p-checkbox .p-checkbox-box.p-highlight,
|
|
.p-radiobutton .p-radiobutton-box.p-highlight {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Accent color for various components */
|
|
.p-select-panel .p-select-items .p-select-item.p-highlight,
|
|
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
|
|
.p-listbox .p-listbox-list .p-listbox-item.p-highlight,
|
|
.p-select-panel .p-select-items .p-select-item:focus,
|
|
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus,
|
|
.p-listbox .p-listbox-list .p-listbox-item:focus {
|
|
background-color: rgba(126, 87, 194, 0.16);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Navigation elements */
|
|
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Focus and selection ring */
|
|
.p-component:focus,
|
|
.p-inputtext:focus,
|
|
.p-select:focus,
|
|
.p-autocomplete:focus {
|
|
box-shadow: 0 0 0 1px var(--primary-light);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Links */
|
|
a:not(.p-button) {
|
|
color: var(--primary-light);
|
|
|
|
&:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
/* Sidebar and navigation */
|
|
.sidebar {
|
|
.sidebar-nav {
|
|
li.active {
|
|
background-color: rgba(126, 87, 194, 0.16);
|
|
border-left-color: var(--primary-color);
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|