kinda okj
This commit is contained in:
Gal Podlipnik
parent
09a21fdbf2
commit
ea7a8cd5de
51
package-lock.json
generated
51
package-lock.json
generated
@ -16,9 +16,7 @@
|
||||
"@angular/core": "~20.0.0",
|
||||
"@angular/forms": "~20.0.0",
|
||||
"@angular/platform-browser": "~20.0.0",
|
||||
"@angular/platform-server": "~20.0.0",
|
||||
"@angular/router": "~20.0.0",
|
||||
"@angular/ssr": "~20.0.0",
|
||||
"@mmstack/primitives": "^20.0.0",
|
||||
"@primeng/themes": "^19.1.3",
|
||||
"express": "^4.21.2",
|
||||
@ -2988,26 +2986,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-server": {
|
||||
"version": "20.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-20.0.3.tgz",
|
||||
"integrity": "sha512-7v0BSHgbohgxAJ0pROOtHJzwvp7AHf9sZd3Lws+UzRp0UUzdtUj2qDH1Ag1lQbXx6yxSLbsVDdVQi7F1woJyVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0",
|
||||
"xhr2": "^0.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "20.0.3",
|
||||
"@angular/compiler": "20.0.3",
|
||||
"@angular/core": "20.0.3",
|
||||
"@angular/platform-browser": "20.0.3",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/router": {
|
||||
"version": "20.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-20.0.3.tgz",
|
||||
@ -3026,26 +3004,6 @@
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/ssr": {
|
||||
"version": "20.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-20.0.2.tgz",
|
||||
"integrity": "sha512-BIjjQvSuzzLRwfSbeOeZGA5jj7xFKHeYBs5RuySpGgz5t60GJpyn5h1iAU6GRhMZ4flCwja8CvRkiFjAUa0yIA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^20.0.0",
|
||||
"@angular/core": "^20.0.0",
|
||||
"@angular/platform-server": "^20.0.0",
|
||||
"@angular/router": "^20.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/platform-server": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
|
||||
@ -22251,15 +22209,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xhr2": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.2.1.tgz",
|
||||
"integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
|
||||
@ -16,9 +16,7 @@
|
||||
"@angular/core": "~20.0.0",
|
||||
"@angular/forms": "~20.0.0",
|
||||
"@angular/platform-browser": "~20.0.0",
|
||||
"@angular/platform-server": "~20.0.0",
|
||||
"@angular/router": "~20.0.0",
|
||||
"@angular/ssr": "~20.0.0",
|
||||
"@mmstack/primitives": "^20.0.0",
|
||||
"@primeng/themes": "^19.1.3",
|
||||
"express": "^4.21.2",
|
||||
|
||||
@ -22,12 +22,7 @@
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": ["./src/styles.scss"],
|
||||
"server": "src/main.server.ts",
|
||||
"ssr": {
|
||||
"entry": "src/server.ts"
|
||||
},
|
||||
"outputMode": "server"
|
||||
"styles": ["./src/styles.scss"]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
@ -89,3 +84,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,13 +80,37 @@ import { StudentService } from './student.service';
|
||||
:host ::ng-deep {
|
||||
.p-inputtext:enabled:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-light);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.p-multiselect:not(.p-disabled).p-focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-light);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.p-inputtext,
|
||||
.p-multiselect {
|
||||
background-color: var(--card-background) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-radius: var(--input-radius) !important;
|
||||
border: 1px solid var(--table-border-color) !important;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||
color 0.3s;
|
||||
}
|
||||
|
||||
.p-inputtext:enabled:hover,
|
||||
.p-multiselect:not(.p-disabled):hover {
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
.card-container {
|
||||
max-width: 480px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
`,
|
||||
],
|
||||
@ -125,3 +149,4 @@ export class AddStudentComponent {
|
||||
this.router.navigate(['/students']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -49,104 +49,113 @@ import { ButtonModule } from 'primeng/button';
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--primary-color);
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 var(--spacing-lg);
|
||||
height: 4rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-left .app-title {
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.navbar-center a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0 1rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0 var(--spacing-md);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0;
|
||||
padding: var(--spacing-sm) 0;
|
||||
position: relative;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
transition: color 0.2s;
|
||||
|
||||
.navbar-center a.active,
|
||||
.navbar-center a:hover {
|
||||
&.active,
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-center a.active::after,
|
||||
.navbar-center a:hover::after {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.75rem;
|
||||
margin-right: var(--spacing-sm);
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-left: 0.25rem;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
background: #fff !important;
|
||||
color: var(--primary-color) !important;
|
||||
border-radius: 50%;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.dark-theme .theme-toggle-btn {
|
||||
background: #fff !important;
|
||||
color: var(--primary-color) !important;
|
||||
border: 1.5px solid var(--primary-light);
|
||||
}
|
||||
|
||||
:root .theme-toggle-btn {
|
||||
--theme-toggle-bg: #f3f4f8;
|
||||
--theme-toggle-icon: #23272f;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-height: calc(100vh - 4rem);
|
||||
padding: 2rem 0;
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--background-color);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1rem 0;
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
@ -155,7 +164,7 @@ import { ButtonModule } from 'primeng/button';
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 1rem 0;
|
||||
padding: var(--spacing-md) 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
@ -193,4 +202,3 @@ export class App implements OnInit {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
||||
import { appConfig } from './app.config';
|
||||
import { serverRoutes } from './app.routes.server';
|
||||
|
||||
const serverConfig: ApplicationConfig = {
|
||||
providers: [provideServerRendering(withRoutes(serverRoutes))],
|
||||
};
|
||||
|
||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||
@ -1,8 +0,0 @@
|
||||
import { RenderMode, ServerRoute } from '@angular/ssr';
|
||||
|
||||
export const serverRoutes: ServerRoute[] = [
|
||||
{
|
||||
path: '**',
|
||||
renderMode: RenderMode.Prerender,
|
||||
},
|
||||
];
|
||||
@ -94,12 +94,38 @@ import { StudentService } from './student.service';
|
||||
.p-inputtext:disabled {
|
||||
opacity: 0.8;
|
||||
background-color: #f5f5f5;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.p-inputtext,
|
||||
.p-multiselect {
|
||||
background-color: var(--card-background) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-radius: var(--input-radius) !important;
|
||||
border: 1px solid var(--table-border-color) !important;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||
color 0.3s;
|
||||
}
|
||||
|
||||
.p-inputtext:enabled:focus,
|
||||
.p-multiselect:not(.p-disabled).p-focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-light);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.p-inputtext:enabled:hover,
|
||||
.p-multiselect:not(.p-disabled):hover {
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
.card-container {
|
||||
max-width: 480px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.not-found-message {
|
||||
|
||||
@ -29,6 +29,7 @@ import { StudentService } from './student.service';
|
||||
icon="pi pi-refresh"
|
||||
class="p-button-secondary"
|
||||
(click)="generateMock()"
|
||||
[disabled]="students().length > 0"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,6 +101,7 @@ import { StudentService } from './student.service';
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-buttons-header {
|
||||
@ -119,8 +121,10 @@ import { StudentService } from './student.service';
|
||||
|
||||
:host ::ng-deep {
|
||||
.p-datatable {
|
||||
border-radius: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--card-shadow);
|
||||
background-color: var(--card-background);
|
||||
|
||||
.p-datatable-header {
|
||||
background-color: var(--card-background) !important;
|
||||
@ -132,7 +136,7 @@ import { StudentService } from './student.service';
|
||||
background-color: var(--table-header-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--table-border-color);
|
||||
}
|
||||
@ -169,12 +173,10 @@ import { StudentService } from './student.service';
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background-color: var(
|
||||
--paginator-button-selected-bg
|
||||
) !important;
|
||||
color: var(--paginator-button-selected-text) !important;
|
||||
border-color: var(--paginator-button-selected-bg) !important;
|
||||
font-weight: 500;
|
||||
background-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #000000 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -188,6 +190,14 @@ import { StudentService } from './student.service';
|
||||
background-color: var(--table-row-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
border-radius: var(--input-radius);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -239,4 +249,3 @@ export class OverviewComponent {
|
||||
this.studentsService.deleteSutdent(id);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { App } from './app/app.component';
|
||||
import { config } from './app/app.config.server';
|
||||
|
||||
const bootstrap = () => bootstrapApplication(App, config);
|
||||
|
||||
export default bootstrap;
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
import {
|
||||
AngularNodeAppEngine,
|
||||
createNodeRequestHandler,
|
||||
isMainModule,
|
||||
writeResponseToNodeResponse,
|
||||
} from '@angular/ssr/node';
|
||||
import express from 'express';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
|
||||
const browserDistFolder = resolve(serverDistFolder, '../browser');
|
||||
|
||||
const app = express();
|
||||
const angularApp = new AngularNodeAppEngine();
|
||||
|
||||
/**
|
||||
* Example Express Rest API endpoints can be defined here.
|
||||
* Uncomment and define endpoints as necessary.
|
||||
*
|
||||
* Example:
|
||||
* ```ts
|
||||
* app.get('/api/**', (req, res) => {
|
||||
* // Handle API request
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* Serve static files from /browser
|
||||
*/
|
||||
app.use(
|
||||
express.static(browserDistFolder, {
|
||||
maxAge: '1y',
|
||||
index: false,
|
||||
redirect: false,
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* Handle all other requests by rendering the Angular application.
|
||||
*/
|
||||
app.use('/**', (req, res, next) => {
|
||||
angularApp
|
||||
.handle(req)
|
||||
.then((response) =>
|
||||
response ? writeResponseToNodeResponse(response, res) : next()
|
||||
)
|
||||
.catch(next);
|
||||
});
|
||||
|
||||
/**
|
||||
* Start the server if this module is the main entry point.
|
||||
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
||||
*/
|
||||
if (isMainModule(import.meta.url)) {
|
||||
const port = process.env['PORT'] || 4000;
|
||||
app.listen(port, () => {
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
|
||||
*/
|
||||
export const reqHandler = createNodeRequestHandler(app);
|
||||
303
src/styles.scss
303
src/styles.scss
@ -3,156 +3,302 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
:root {
|
||||
// Base colors
|
||||
--primary-color: #6200ee;
|
||||
--primary-light: #9951ff;
|
||||
--text-color: #333333;
|
||||
--background-color: #ffffff;
|
||||
--card-background: #ffffff;
|
||||
--table-header-bg: #f8f9fa;
|
||||
--table-row-bg: #ffffff;
|
||||
--table-row-hover-bg: #f5f5f5;
|
||||
--table-border-color: #e9ecef;
|
||||
--paginator-button-selected-bg: var(--primary-color);
|
||||
--primary-light: #7f39fb;
|
||||
--primary-dark: #3700b3;
|
||||
--accent-color: #03dac6;
|
||||
--text-color: #23272f;
|
||||
--text-secondary: #555a64;
|
||||
--background-color: #f4f6fa;
|
||||
|
||||
// Card & containers
|
||||
--card-background: #fff;
|
||||
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// Table colors
|
||||
--table-header-bg: #f3f4f8;
|
||||
--table-row-bg: #fff;
|
||||
--table-row-hover-bg: #f0f0f5;
|
||||
--table-border-color: #e0e3ea;
|
||||
|
||||
// Pagination
|
||||
--paginator-button-selected-bg: #000000;
|
||||
--paginator-button-selected-text: #ffffff;
|
||||
--paginator-button-hover-bg: rgba(
|
||||
98,
|
||||
0,
|
||||
238,
|
||||
0.1
|
||||
); /* Light purple for hover state */
|
||||
--paginator-button-hover-bg: rgba(98, 0, 238, 0.08);
|
||||
|
||||
// Spacing
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
|
||||
// Border radius
|
||||
--border-radius: 12px;
|
||||
--input-radius: 8px;
|
||||
|
||||
// Focus
|
||||
--focus-ring: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
--primary-color: #bb86fc;
|
||||
--primary-light: #e2b9ff;
|
||||
--primary-dark: #3700b3;
|
||||
--accent-color: #03dac6;
|
||||
--text-color: #e0e0e0;
|
||||
--background-color: #121212;
|
||||
--card-background: #1e1e1e;
|
||||
--table-header-bg: #2a2a2a;
|
||||
--table-row-bg: #1e1e1e;
|
||||
--table-row-hover-bg: #333333;
|
||||
--table-border-color: #444444;
|
||||
--paginator-button-selected-bg: var(--primary-color);
|
||||
--text-secondary: #b0b0b0;
|
||||
--background-color: #181a20;
|
||||
--card-background: #23242a;
|
||||
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
|
||||
--table-header-bg: #23242a;
|
||||
--table-row-bg: #181a20;
|
||||
--table-row-hover-bg: #23242a;
|
||||
--table-border-color: #33343a;
|
||||
--paginator-button-hover-bg: rgba(187, 134, 252, 0.12);
|
||||
--paginator-button-selected-bg: #000000;
|
||||
--paginator-button-selected-text: #ffffff;
|
||||
--paginator-button-hover-bg: rgba(
|
||||
187,
|
||||
134,
|
||||
252,
|
||||
0.2
|
||||
); /* Light purple for hover state in dark mode */
|
||||
}
|
||||
|
||||
// Typography
|
||||
.page-title {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
// Layout patterns
|
||||
.flex-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-gap {
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
// Cards and containers
|
||||
.card-container {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
box-shadow: var(--card-shadow);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
transition: background-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 2rem;
|
||||
margin-top: var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep,
|
||||
body {
|
||||
.p-component {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
.p-button {
|
||||
&.p-button-primary {
|
||||
background-color: var(--primary-color);
|
||||
&:hover {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
}
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
.p-inputtext,
|
||||
.p-multiselect {
|
||||
width: 100%;
|
||||
border-radius: var(--input-radius) !important;
|
||||
border: 1px solid var(--table-border-color) !important;
|
||||
padding: var(--spacing-sm) var(--spacing-md) !important;
|
||||
background-color: var(--card-background) !important;
|
||||
color: var(--text-color) !important;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||
color 0.3s;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
input[type='text']:focus,
|
||||
input[type='email']:focus,
|
||||
.p-inputtext:focus,
|
||||
.p-multiselect.p-focus {
|
||||
border-color: var(--primary-color) !important;
|
||||
box-shadow: var(--focus-ring) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.p-multiselect {
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-label {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
// PrimeNG component styling
|
||||
.p-component-styles {
|
||||
// Buttons
|
||||
.p-button {
|
||||
border-radius: var(--input-radius);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
||||
box-shadow: none;
|
||||
|
||||
&.p-button-primary {
|
||||
background-color: var(--primary-color);
|
||||
border: none;
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--primary-light);
|
||||
color: #fff;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-secondary {
|
||||
background-color: var(--accent-color);
|
||||
border: none;
|
||||
color: #23272f;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #26ffe6;
|
||||
color: #23272f;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background: transparent;
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--primary-light);
|
||||
color: #fff;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-danger {
|
||||
background-color: #e53935;
|
||||
border: none;
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #b71c1c;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--primary-light);
|
||||
color: #fff;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.p-datatable {
|
||||
margin-top: 1.5rem;
|
||||
background-color: var(--card-background) !important;
|
||||
border-radius: 8px;
|
||||
margin-top: var(--spacing-lg);
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: background-color 0.3s, box-shadow 0.3s;
|
||||
|
||||
.p-datatable-header {
|
||||
background-color: var(--card-background) !important;
|
||||
padding: 1rem;
|
||||
background-color: var(--card-background);
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--table-header-bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
padding: var(--spacing-md);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr {
|
||||
background-color: var(--table-row-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--table-row-bg);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--table-row-hover-bg) !important;
|
||||
background-color: var(--table-row-hover-bg);
|
||||
}
|
||||
|
||||
> td {
|
||||
background-color: transparent !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
background-color: var(--card-background) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--card-background);
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
|
||||
.p-paginator-element.p-highlight {
|
||||
background-color: var(--paginator-button-selected-bg) !important;
|
||||
color: var(--paginator-button-selected-text) !important;
|
||||
background-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
|
||||
.p-paginator-element:hover {
|
||||
background-color: var(--paginator-button-hover-bg) !important;
|
||||
background-color: var(--paginator-button-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-emptymessage td {
|
||||
background-color: var(--table-row-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
// Apply these styles globally
|
||||
body {
|
||||
@extend .p-component-styles;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--table-border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -169,4 +315,3 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user