diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index 4f9ac26..0000000 --- a/.browserslistrc +++ /dev/null @@ -1,16 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR diff --git a/.gitignore b/.gitignore index 1de2d65..4146c63 100644 --- a/.gitignore +++ b/.gitignore @@ -41,4 +41,3 @@ Thumbs.db # Compiled files layout.css src/assets/demo/styles/badges.css -src/assets/layout/styles/theme/designer diff --git a/CHANGELOG.md b/CHANGELOG.md index f61d56f..5cc4109 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 16.0.0 +**Migration Guide** +- Upgrade to PrimeNG 16 +- Upgrade to Angular 16 +- Update theme files + ## 15.0.0 **Migration Guide** - Upgrade to PrimeNG 15 diff --git a/angular.json b/angular.json index fb523dc..cf2c606 100644 --- a/angular.json +++ b/angular.json @@ -1,125 +1,135 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "sakai-ng": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - }, - "@schematics/angular:application": { - "strict": true - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/sakai-ng", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "1mb", - "maximumError": "5mb" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "sakai-ng": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/sakai-ng", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "aot": true, + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [ + "node_modules/prismjs/prism.js", + "node_modules/prismjs/components/prism-typescript.js" + ] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "3mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "10kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "sakai-ng:build" + }, + "configurations": { + "production": { + "browserTarget": "sakai-ng:build:production" + }, + "development": { + "browserTarget": "sakai-ng:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "sakai-ng:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "inlineStyleLanguage": "scss", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/upload.php", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "sakai-ng:build:production" - }, - "development": { - "browserTarget": "sakai-ng:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "sakai-ng:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-eslint/builder:lint", - "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] - } } - } + }, + "cli": { + "analytics": false } - }, - "defaultProject": "sakai-ng", - "cli": { - "analytics": false, - "schematicCollections": [ - "@angular-eslint/schematics" - ] - } } diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index a451d67..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,44 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage/sakai'), - subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true - }); -}; diff --git a/package.json b/package.json index 1993fbc..d4afc93 100644 --- a/package.json +++ b/package.json @@ -1,54 +1,52 @@ { - "name": "sakai-ng", - "version": "15.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "ng lint" - }, - "private": true, - "dependencies": { - "@angular/animations": "^15.1.0", - "@angular/cdk": "^15.1.0", - "@angular/common": "^15.1.0", - "@angular/compiler": "^15.1.0", - "@angular/core": "^15.1.0", - "@angular/forms": "^15.1.0", - "@angular/platform-browser": "^15.1.0", - "@angular/platform-browser-dynamic": "^15.1.0", - "@angular/router": "^15.1.0", - "chart.js": "^3.3.2", - "primeflex": "^3.2.1", - "primeicons": "6.0.1", - "primeng": "15.1.1", - "quill": "^1.3.7", - "rxjs": "~7.5.0", - "tslib": "^2.3.0", - "web-animations-js": "^2.3.2", - "zone.js": "~0.11.4" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~15.1.0", - "@angular-eslint/builder": "^15.1.0", - "@angular-eslint/eslint-plugin": "^15.1.0", - "@angular-eslint/eslint-plugin-template": "^15.1.0", - "@angular-eslint/schematics": "^15.1.0", - "@angular-eslint/template-parser": "^15.1.0", - "@angular/cli": "^15.1.0", - "@angular/compiler-cli": "^15.1.0", - "@types/jasmine": "~3.10.0", - "@types/node": "^12.11.1", - "@typescript-eslint/parser": "5.37.0", - "eslint": "^8.23.1", - "jasmine-core": "~4.0.0", - "karma": "~6.3.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.2.0", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "~1.7.0", - "typescript": "~4.8.4" - } -} \ No newline at end of file + "name": "sakai-ng", + "version": "16.0.0", + "license": "PrimeNG Commercial", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "^16.1.0", + "@angular/cdk": "^16.1.0", + "@angular/common": "^16.1.0", + "@angular/compiler": "^16.1.0", + "@angular/core": "^16.1.0", + "@angular/forms": "^16.1.0", + "@angular/platform-browser": "^16.1.0", + "@angular/platform-browser-dynamic": "^16.1.0", + "@angular/router": "^16.1.0", + "@fullcalendar/angular": "^6.0.3", + "@fullcalendar/core": "^6.0.3", + "@fullcalendar/daygrid": "^6.0.3", + "@fullcalendar/interaction": "^6.0.3", + "@fullcalendar/timegrid": "^6.0.3", + "chart.js": "^3.3.2", + "primeflex": "^3.3.1", + "primeicons": "6.0.1", + "primeng": "16.0.2", + "quill": "^1.3.7", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.13.0", + "prismjs": "^1.29.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^16.1.5", + "@angular/cli": "~16.1.5", + "@angular/compiler-cli": "^16.1.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.6.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.1.3" + } +} diff --git a/src/assets/demo/styles/code.css b/src/assets/demo/styles/code.css new file mode 100644 index 0000000..93161a2 --- /dev/null +++ b/src/assets/demo/styles/code.css @@ -0,0 +1,14 @@ +pre.app-code { + background-color: var(--surface-ground); + margin: 0 0 1rem 0; + padding: 0; + border-radius: var(--border-radius); + overflow: auto; +} +pre.app-code code { + color: var(--surface-900); + padding: 1rem; + line-height: 1.5; + display: block; + font-family: monaco, Consolas, monospace; +} diff --git a/src/assets/layout/styles/theme/arya-blue/theme.css b/src/assets/layout/styles/theme/arya-blue/theme.css index df16d23..2e7f968 100644 --- a/src/assets/layout/styles/theme/arya-blue/theme.css +++ b/src/assets/layout/styles/theme/arya-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #93cbf9; + --highlight-bg: rgba(100, 181, 246, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #64B5F6; background: #64B5F6; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #64B5F6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(35, 150, 242, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #64B5F6; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #64B5F6; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/arya-green/theme.css b/src/assets/layout/styles/theme/arya-green/theme.css index 39ae2da..0838964 100644 --- a/src/assets/layout/styles/theme/arya-green/theme.css +++ b/src/assets/layout/styles/theme/arya-green/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #a7d8a9; + --highlight-bg: rgba(129, 199, 132, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #81C784; background: #81C784; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #81C784; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(84, 179, 88, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #81C784; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #81C784; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/arya-orange/theme.css b/src/assets/layout/styles/theme/arya-orange/theme.css index f580615..03c2a25 100644 --- a/src/assets/layout/styles/theme/arya-orange/theme.css +++ b/src/assets/layout/styles/theme/arya-orange/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #ffe284; + --highlight-bg: rgba(255, 213, 79, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFD54F; background: #FFD54F; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #FFD54F; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(255, 197, 12, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #FFD54F; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #FFD54F; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/arya-purple/theme.css b/src/assets/layout/styles/theme/arya-purple/theme.css index 37e8465..6b0808a 100644 --- a/src/assets/layout/styles/theme/arya-purple/theme.css +++ b/src/assets/layout/styles/theme/arya-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #cf95d9; + --highlight-bg: rgba(186, 104, 200, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #BA68C8; background: #BA68C8; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #BA68C8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(162, 65, 178, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #BA68C8; color: #ffffff; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #BA68C8; color: #ffffff; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/bootstrap4-dark-blue/theme.css b/src/assets/layout/styles/theme/bootstrap4-dark-blue/theme.css index 54c6c14..5b8c98f 100644 --- a/src/assets/layout/styles/theme/bootstrap4-dark-blue/theme.css +++ b/src/assets/layout/styles/theme/bootstrap4-dark-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.04); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #e3f3fe; + --highlight-bg: #8dd0ff; + --highlight-text-color: #151515; color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #151515; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #8dd0ff; background: #8dd0ff; @@ -1195,6 +1210,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f19ea6; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1208,6 +1224,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1582,12 +1599,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #151515; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f19ea6; } @@ -1599,7 +1623,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #8dd0ff; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2349,6 +2373,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3802,6 +3830,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #3eafff; } @@ -3948,6 +3980,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3985,6 +4021,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4428,6 +4468,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4497,6 +4541,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4754,6 +4802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #8dd0ff; color: #151515; @@ -5168,6 +5220,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5521,6 +5577,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5730,6 +5790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #8dd0ff; color: #151515; @@ -5789,6 +5853,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5874,6 +5942,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5899,6 +5971,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5973,6 +6049,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5990,6 +6070,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); @@ -6054,11 +6138,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6101,6 +6180,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #3f4b5b; @@ -6250,6 +6333,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #151515; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6287,6 +6374,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #2a323d; diff --git a/src/assets/layout/styles/theme/bootstrap4-dark-purple/theme.css b/src/assets/layout/styles/theme/bootstrap4-dark-purple/theme.css index a3f1c5b..d24d350 100644 --- a/src/assets/layout/styles/theme/bootstrap4-dark-purple/theme.css +++ b/src/assets/layout/styles/theme/bootstrap4-dark-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.04); --maskbg: rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 1px #f0e6f5; + --highlight-bg: #c298d8; + --highlight-text-color: #151515; color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #151515; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #c298d8; background: #c298d8; @@ -1195,6 +1210,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f19ea6; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1208,6 +1224,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1582,12 +1599,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #151515; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f19ea6; } @@ -1599,7 +1623,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #c298d8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2349,6 +2373,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3802,6 +3830,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #a263c4; } @@ -3948,6 +3980,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3985,6 +4021,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4428,6 +4468,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4497,6 +4541,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4754,6 +4802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #c298d8; color: #151515; @@ -5168,6 +5220,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5521,6 +5577,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5730,6 +5790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #c298d8; color: #151515; @@ -5789,6 +5853,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5874,6 +5942,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5899,6 +5971,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5973,6 +6049,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5990,6 +6070,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); @@ -6054,11 +6138,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6101,6 +6180,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #3f4b5b; @@ -6250,6 +6333,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #151515; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6287,6 +6374,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #2a323d; diff --git a/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css b/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css index 640f783..7e375b6 100644 --- a/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css +++ b/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover:#e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #007bff; + --highlight-text-color: #ffffff; --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #007bff; background: #007bff; @@ -1195,6 +1210,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #dc3545; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; @@ -1208,6 +1224,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; @@ -1582,12 +1599,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ffffff; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #dc3545; } @@ -1599,7 +1623,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #007bff; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2349,6 +2373,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3802,6 +3830,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #0062cc; } @@ -3948,6 +3980,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3985,6 +4021,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4428,6 +4468,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4497,6 +4541,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4754,6 +4802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #007bff; color: #ffffff; @@ -5168,6 +5220,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5521,6 +5577,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #212529; @@ -5730,6 +5790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #007bff; color: #ffffff; @@ -5789,6 +5853,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5874,6 +5942,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5899,6 +5971,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5973,6 +6049,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5990,6 +6070,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -6054,11 +6138,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #efefef; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6101,6 +6180,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6250,6 +6333,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #efefef; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6287,6 +6374,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/bootstrap4-light-purple/theme.css b/src/assets/layout/styles/theme/bootstrap4-light-purple/theme.css index 36cd263..cbf21ef 100644 --- a/src/assets/layout/styles/theme/bootstrap4-light-purple/theme.css +++ b/src/assets/layout/styles/theme/bootstrap4-light-purple/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover:#e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #883cae; + --highlight-text-color: #ffffff; --focus-ring: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #883cae; background: #883cae; @@ -1195,6 +1210,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #dc3545; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; @@ -1208,6 +1224,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; @@ -1582,12 +1599,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ffffff; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #dc3545; } @@ -1599,7 +1623,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #883cae; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2349,6 +2373,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3802,6 +3830,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #6d308b; } @@ -3948,6 +3980,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3985,6 +4021,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4428,6 +4468,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4497,6 +4541,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4754,6 +4802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #883cae; color: #ffffff; @@ -5168,6 +5220,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5521,6 +5577,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #212529; @@ -5730,6 +5790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #883cae; color: #ffffff; @@ -5789,6 +5853,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5874,6 +5942,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5899,6 +5971,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5973,6 +6049,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5990,6 +6070,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -6054,11 +6138,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #efefef; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6101,6 +6180,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6250,6 +6333,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #efefef; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6287,6 +6374,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/fluent-light/theme.css b/src/assets/layout/styles/theme/fluent-light/theme.css index 1b42738..5ab610d 100644 --- a/src/assets/layout/styles/theme/fluent-light/theme.css +++ b/src/assets/layout/styles/theme/fluent-light/theme.css @@ -41,6 +41,8 @@ --surface-border:#edebe9; --surface-hover:#f3f2f1; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #edebe9; + --highlight-text-color: #323130; --focus-ring: inset 0 0 0 1px #605e5c; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a4252c; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #0078d4; background: #0078d4; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #a4252c; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #605e5c; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #605e5c; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #323130; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #a4252c; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #323130; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #c3bcb5; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #0078d4; color: #ffffff; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 0.5rem; color: #323130; @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #0078d4; color: #ffffff; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 90%; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1rem; + height: 1rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 1.25rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 1.25rem; + height: 1.25rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 600; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #faf9f8; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #edebe9; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #faf9f8; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #edebe9; @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/lara-dark-blue/theme.css b/src/assets/layout/styles/theme/lara-dark-blue/theme.css index 4555231..925fadb 100644 --- a/src/assets/layout/styles/theme/lara-dark-blue/theme.css +++ b/src/assets/layout/styles/theme/lara-dark-blue/theme.css @@ -41,6 +41,8 @@ --surface-border:#0b213f; --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); + --highlight-bg: rgba(147, 197, 253, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --maskbg: rgba(0, 0, 0, 0.4); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #FCA5A5; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #93C5FD; background: #93C5FD; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #FCA5A5; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #93C5FD; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(68, 155, 252, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #93C5FD; color: #1c2127; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #93C5FD; color: #1c2127; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; diff --git a/src/assets/layout/styles/theme/lara-dark-indigo/theme.css b/src/assets/layout/styles/theme/lara-dark-indigo/theme.css index 0bcbe30..bfd378a 100644 --- a/src/assets/layout/styles/theme/lara-dark-indigo/theme.css +++ b/src/assets/layout/styles/theme/lara-dark-indigo/theme.css @@ -41,6 +41,8 @@ --surface-border:#0b213f; --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); + --highlight-bg: rgba(165, 180, 252, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --maskbg: rgba(0, 0, 0, 0.4); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #FCA5A5; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #A5B4FC; background: #A5B4FC; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #FCA5A5; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #A5B4FC; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(84, 113, 249, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #A5B4FC; color: #1c2127; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #A5B4FC; color: #1c2127; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; diff --git a/src/assets/layout/styles/theme/lara-dark-purple/theme.css b/src/assets/layout/styles/theme/lara-dark-purple/theme.css index a435ec5..28a4cb2 100644 --- a/src/assets/layout/styles/theme/lara-dark-purple/theme.css +++ b/src/assets/layout/styles/theme/lara-dark-purple/theme.css @@ -41,6 +41,8 @@ --surface-border:#0b213f; --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); + --highlight-bg: rgba(196, 181, 253, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --maskbg: rgba(0, 0, 0, 0.4); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #FCA5A5; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #C4B5FD; background: #C4B5FD; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #FCA5A5; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #C4B5FD; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(129, 96, 251, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #C4B5FD; color: #1c2127; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #C4B5FD; color: #1c2127; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; diff --git a/src/assets/layout/styles/theme/lara-dark-teal/theme.css b/src/assets/layout/styles/theme/lara-dark-teal/theme.css index 66bef50..c8433de 100644 --- a/src/assets/layout/styles/theme/lara-dark-teal/theme.css +++ b/src/assets/layout/styles/theme/lara-dark-teal/theme.css @@ -41,6 +41,8 @@ --surface-border:#0b213f; --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); + --highlight-bg: rgba(94, 234, 212, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --maskbg: rgba(0, 0, 0, 0.4); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #FCA5A5; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #5EEAD4; background: #5EEAD4; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #FCA5A5; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #5EEAD4; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(36, 226, 197, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #5EEAD4; color: #1c2127; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #5EEAD4; color: #1c2127; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; diff --git a/src/assets/layout/styles/theme/lara-light-blue/theme.css b/src/assets/layout/styles/theme/lara-light-blue/theme.css index 3415299..29c0f16 100644 --- a/src/assets/layout/styles/theme/lara-light-blue/theme.css +++ b/src/assets/layout/styles/theme/lara-light-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #BFDBFE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EFF6FF; + --highlight-text-color: #1D4ED8; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3B82F6; background: #3B82F6; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #e24c4c; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #3B82F6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #8cbeff; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #3B82F6; color: #ffffff; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: #495057; @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #3B82F6; color: #ffffff; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/lara-light-indigo/theme.css b/src/assets/layout/styles/theme/lara-light-indigo/theme.css index 7090486..3419e6f 100644 --- a/src/assets/layout/styles/theme/lara-light-indigo/theme.css +++ b/src/assets/layout/styles/theme/lara-light-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #C7D2FE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EEF2FF; + --highlight-text-color: #4338CA; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #6366F1; background: #6366F1; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #e24c4c; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #6366F1; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #8ba7ff; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #6366F1; color: #ffffff; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: #495057; @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #6366F1; color: #ffffff; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/lara-light-purple/theme.css b/src/assets/layout/styles/theme/lara-light-purple/theme.css index 50a58a9..45ce2ba 100644 --- a/src/assets/layout/styles/theme/lara-light-purple/theme.css +++ b/src/assets/layout/styles/theme/lara-light-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #DDD6FE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F5F3FF; + --highlight-text-color: #6D28D9; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #8B5CF6; background: #8B5CF6; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #e24c4c; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #8B5CF6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #a28fff; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #8B5CF6; color: #ffffff; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: #495057; @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #8B5CF6; color: #ffffff; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/lara-light-teal/theme.css b/src/assets/layout/styles/theme/lara-light-teal/theme.css index c7cd68f..5d1a407 100644 --- a/src/assets/layout/styles/theme/lara-light-teal/theme.css +++ b/src/assets/layout/styles/theme/lara-light-teal/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #99F6E4; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F0FDFA; + --highlight-text-color: #0F766E; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #14B8A6; background: #14B8A6; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #e24c4c; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #14B8A6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #99f1dd; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #99F6E4; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4392,6 +4432,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4461,6 +4505,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4718,6 +4766,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #14B8A6; color: #ffffff; @@ -5132,6 +5184,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5461,6 +5517,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1.25rem; color: #495057; @@ -5670,6 +5730,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #14B8A6; color: #ffffff; @@ -5729,6 +5793,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5814,6 +5882,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5839,6 +5911,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5913,6 +5989,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5930,6 +6010,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5994,11 +6078,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6041,6 +6120,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6190,6 +6273,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -6227,6 +6314,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/md-dark-deeppurple/theme.css b/src/assets/layout/styles/theme/md-dark-deeppurple/theme.css index 6678076..b1d66ec 100644 --- a/src/assets/layout/styles/theme/md-dark-deeppurple/theme.css +++ b/src/assets/layout/styles/theme/md-dark-deeppurple/theme.css @@ -41,6 +41,8 @@ --surface-border:hsla(0,0%,100%,.12); --surface-hover:hsla(0,0%,100%,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(206, 147, 216, 0.16); + --highlight-text-color: #CE93D8; --focus-ring: none; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44435; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 3rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #CE93D8; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #CE93D8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(182, 94, 197, 0.16); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #CE93D8; color: #121212; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #CE93D8; color: #121212; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/md-dark-indigo/theme.css b/src/assets/layout/styles/theme/md-dark-indigo/theme.css index 9a16f9c..81ed25f 100644 --- a/src/assets/layout/styles/theme/md-dark-indigo/theme.css +++ b/src/assets/layout/styles/theme/md-dark-indigo/theme.css @@ -41,6 +41,8 @@ --surface-border:hsla(0,0%,100%,.12); --surface-hover:hsla(0,0%,100%,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(159, 168, 218, 0.16); + --highlight-text-color: #9FA8DA; --focus-ring: none; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44435; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 3rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #9FA8DA; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #9FA8DA; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(105, 119, 197, 0.16); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #9FA8DA; color: #121212; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #9FA8DA; color: #121212; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/md-light-deeppurple/theme.css b/src/assets/layout/styles/theme/md-light-deeppurple/theme.css index 1b7d051..0bc301e 100644 --- a/src/assets/layout/styles/theme/md-light-deeppurple/theme.css +++ b/src/assets/layout/styles/theme/md-light-deeppurple/theme.css @@ -41,6 +41,8 @@ --surface-border:rgba(0,0,0,.12); --surface-hover:rgba(0,0,0,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; --focus-ring: none; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #B00020; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #B00020; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 3rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #673AB7; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(82, 46, 146, 0.12); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #673AB7; color: #ffffff; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #673AB7; color: #ffffff; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/md-light-indigo/theme.css b/src/assets/layout/styles/theme/md-light-indigo/theme.css index 9918529..c702657 100644 --- a/src/assets/layout/styles/theme/md-light-indigo/theme.css +++ b/src/assets/layout/styles/theme/md-light-indigo/theme.css @@ -41,6 +41,8 @@ --surface-border:rgba(0,0,0,.12); --surface-hover:rgba(0,0,0,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(63, 81, 181, 0.12); + --highlight-text-color: #3F51B5; --focus-ring: none; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #B00020; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #B00020; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 3rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #3F51B5; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #3F51B5; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(50, 65, 145, 0.12); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #3F51B5; color: #ffffff; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #3F51B5; color: #ffffff; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/mdc-dark-deeppurple/theme.css b/src/assets/layout/styles/theme/mdc-dark-deeppurple/theme.css index 1bdf761..f0f18a3 100644 --- a/src/assets/layout/styles/theme/mdc-dark-deeppurple/theme.css +++ b/src/assets/layout/styles/theme/mdc-dark-deeppurple/theme.css @@ -41,6 +41,8 @@ --surface-border:hsla(0,0%,100%,.12); --surface-hover:hsla(0,0%,100%,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(206, 147, 216, 0.16); + --highlight-text-color: #CE93D8; --focus-ring: none; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44435; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #CE93D8; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #CE93D8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(182, 94, 197, 0.16); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #CE93D8; color: #121212; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #CE93D8; color: #121212; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/mdc-dark-indigo/theme.css b/src/assets/layout/styles/theme/mdc-dark-indigo/theme.css index 7d6b632..022195c 100644 --- a/src/assets/layout/styles/theme/mdc-dark-indigo/theme.css +++ b/src/assets/layout/styles/theme/mdc-dark-indigo/theme.css @@ -41,6 +41,8 @@ --surface-border:hsla(0,0%,100%,.12); --surface-hover:hsla(0,0%,100%,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(159, 168, 218, 0.16); + --highlight-text-color: #9FA8DA; --focus-ring: none; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44435; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #9FA8DA; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #9FA8DA; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(105, 119, 197, 0.16); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #9FA8DA; color: #121212; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #9FA8DA; color: #121212; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/src/assets/layout/styles/theme/mdc-light-deeppurple/theme.css b/src/assets/layout/styles/theme/mdc-light-deeppurple/theme.css index c2017d1..f03aaf1 100644 --- a/src/assets/layout/styles/theme/mdc-light-deeppurple/theme.css +++ b/src/assets/layout/styles/theme/mdc-light-deeppurple/theme.css @@ -41,6 +41,8 @@ --surface-border:rgba(0,0,0,.12); --surface-hover:rgba(0,0,0,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; --focus-ring: none; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #B00020; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #B00020; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #673AB7; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(82, 46, 146, 0.12); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #673AB7; color: #ffffff; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #673AB7; color: #ffffff; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/mdc-light-indigo/theme.css b/src/assets/layout/styles/theme/mdc-light-indigo/theme.css index 040c0da..43684bb 100644 --- a/src/assets/layout/styles/theme/mdc-light-indigo/theme.css +++ b/src/assets/layout/styles/theme/mdc-light-indigo/theme.css @@ -41,6 +41,8 @@ --surface-border:rgba(0,0,0,.12); --surface-hover:rgba(0,0,0,.04); --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(63, 81, 181, 0.12); + --highlight-text-color: #3F51B5; --focus-ring: none; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -657,6 +664,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #B00020; @@ -707,6 +718,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; @@ -1215,6 +1230,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #B00020; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1228,6 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1598,12 +1615,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #3F51B5; margin-left: 0.5rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -1615,7 +1639,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #3F51B5; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2361,6 +2385,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} .p-speeddial-action { width: 3rem; @@ -3814,6 +3842,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(50, 65, 145, 0.12); } @@ -3960,6 +3992,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: none; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3997,6 +4033,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4440,6 +4480,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4509,6 +4553,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4766,6 +4814,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #3F51B5; color: #ffffff; @@ -5180,6 +5232,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5533,6 +5589,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -5742,6 +5802,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #3F51B5; color: #ffffff; @@ -5801,6 +5865,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5886,6 +5954,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5911,6 +5983,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5985,6 +6061,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6002,6 +6082,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -6066,11 +6150,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6113,6 +6192,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -6262,6 +6345,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -6299,6 +6386,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/saga-blue/theme.css b/src/assets/layout/styles/theme/saga-blue/theme.css index 0edb7cf..aacb7a0 100644 --- a/src/assets/layout/styles/theme/saga-blue/theme.css +++ b/src/assets/layout/styles/theme/saga-blue/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover: #e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #E3F2FD; + --highlight-text-color: #495057; --focus-ring: 0 0 0 0.2rem #a6d5fa; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #2196F3; background: #2196F3; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44336; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #2196F3; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #89c8f7; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #2196F3; color: #ffffff; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #495057; @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #2196F3; color: #ffffff; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/saga-green/theme.css b/src/assets/layout/styles/theme/saga-green/theme.css index 558206b..8ba4e9e 100644 --- a/src/assets/layout/styles/theme/saga-green/theme.css +++ b/src/assets/layout/styles/theme/saga-green/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover: #e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #E8F5E9; + --highlight-text-color: #495057; --focus-ring: 0 0 0 0.2rem #b7e0b8; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #4CAF50; background: #4CAF50; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44336; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #4CAF50; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #a6d8a9; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #4CAF50; color: #ffffff; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #495057; @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #4CAF50; color: #ffffff; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/saga-orange/theme.css b/src/assets/layout/styles/theme/saga-orange/theme.css index 531e463..166c30a 100644 --- a/src/assets/layout/styles/theme/saga-orange/theme.css +++ b/src/assets/layout/styles/theme/saga-orange/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover: #e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #FFF3E0; + --highlight-text-color: #495057; --focus-ring: 0 0 0 0.2rem #ffe69c; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFC107; background: #FFC107; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44336; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #FFC107; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #ffce80; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #FFC107; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #495057; @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #FFC107; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/saga-purple/theme.css b/src/assets/layout/styles/theme/saga-purple/theme.css index 16e7387..b11cbb3 100644 --- a/src/assets/layout/styles/theme/saga-purple/theme.css +++ b/src/assets/layout/styles/theme/saga-purple/theme.css @@ -41,6 +41,8 @@ --surface-border:#dee2e6; --surface-hover: #e9ecef; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F3E5F5; + --highlight-text-color: #495057; --focus-ring: 0 0 0 0.2rem #df9eea; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9C27B0; background: #9C27B0; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f44336; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #9C27B0; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #d3a1db; } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #9C27B0; color: #ffffff; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #495057; @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #9C27B0; color: #ffffff; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/tailwind-light/theme.css b/src/assets/layout/styles/theme/tailwind-light/theme.css index 71de847..e187ed5 100644 --- a/src/assets/layout/styles/theme/tailwind-light/theme.css +++ b/src/assets/layout/styles/theme/tailwind-light/theme.css @@ -40,6 +40,8 @@ --surface-overlay:#ffffff; --surface-border:#e5e7eb; --surface-hover: #f4f4f5; + --highlight-bg: #EEF2FF; + --highlight-text-color: #312E81; --focus-ring: 0 0 0 1px #6366F1; --maskbg: rgba(0, 0, 0, 0.4); color-scheme: light; @@ -111,6 +113,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -668,6 +675,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f0a9a7; @@ -718,6 +729,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 10px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 10px; + height: 10px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #4F46E5; background: #4F46E5; @@ -1226,6 +1241,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #f0a9a7; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #71717A; @@ -1239,6 +1255,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2.5rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #71717A; @@ -1609,12 +1626,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: #3f3f46; margin-left: 0.5rem; transition: none; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #EF4444; } @@ -1626,7 +1650,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #4F46E5; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2372,6 +2396,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3825,6 +3853,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: #8ba7ff; } @@ -3971,6 +4003,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -4008,6 +4044,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4451,6 +4491,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4520,6 +4564,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4777,6 +4825,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #4F46E5; color: #ffffff; @@ -5191,6 +5243,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5544,6 +5600,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: #3f3f46; @@ -5753,6 +5813,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #4F46E5; color: #ffffff; @@ -5812,6 +5876,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5897,6 +5965,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5922,6 +5994,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5996,6 +6072,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; @@ -6013,6 +6093,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; @@ -6077,11 +6161,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #fafafa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6124,6 +6203,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #e5e7eb; @@ -6273,6 +6356,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: #fafafa; } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #f4f4f5; @@ -6310,6 +6397,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/src/assets/layout/styles/theme/vela-blue/theme.css b/src/assets/layout/styles/theme/vela-blue/theme.css index 928dad7..eb77a6f 100644 --- a/src/assets/layout/styles/theme/vela-blue/theme.css +++ b/src/assets/layout/styles/theme/vela-blue/theme.css @@ -41,6 +41,8 @@ --surface-border:#304562; --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(100, 181, 246, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --focus-ring: 0 0 0 1px #93cbf9; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #64B5F6; background: #64B5F6; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #64B5F6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(35, 150, 242, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #64B5F6; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #64B5F6; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/src/assets/layout/styles/theme/vela-green/theme.css b/src/assets/layout/styles/theme/vela-green/theme.css index 5dc178e..aea01fe 100644 --- a/src/assets/layout/styles/theme/vela-green/theme.css +++ b/src/assets/layout/styles/theme/vela-green/theme.css @@ -41,6 +41,8 @@ --surface-border:#304562; --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(129, 199, 132, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --focus-ring: 0 0 0 1px #a7d8a9; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #81C784; background: #81C784; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #81C784; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(84, 179, 88, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #81C784; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #81C784; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/src/assets/layout/styles/theme/vela-orange/theme.css b/src/assets/layout/styles/theme/vela-orange/theme.css index a38bb7e..d1e01bc 100644 --- a/src/assets/layout/styles/theme/vela-orange/theme.css +++ b/src/assets/layout/styles/theme/vela-orange/theme.css @@ -41,6 +41,8 @@ --surface-border:#304562; --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(255, 213, 79, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --focus-ring: 0 0 0 1px #ffe284; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFD54F; background: #FFD54F; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #FFD54F; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(255, 197, 12, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #FFD54F; color: #212529; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #FFD54F; color: #212529; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/src/assets/layout/styles/theme/vela-purple/theme.css b/src/assets/layout/styles/theme/vela-purple/theme.css index 3832ccb..c50d753 100644 --- a/src/assets/layout/styles/theme/vela-purple/theme.css +++ b/src/assets/layout/styles/theme/vela-purple/theme.css @@ -41,6 +41,8 @@ --surface-border:#304562; --surface-hover:rgba(255,255,255,.03); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(186, 104, 200, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); --focus-ring: 0 0 0 1px #cf95d9; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -633,6 +640,10 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-icon { + width: 0.875rem; + height: 0.875rem; +} p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; @@ -683,6 +694,10 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #BA68C8; background: #BA68C8; @@ -1191,6 +1206,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: #ef9a9a; } +.p-input-icon-left > .p-icon-wrapper.p-icon, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1204,6 +1220,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { left: 2rem; } +.p-input-icon-right > .p-icon-wrapper, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1574,12 +1591,19 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { margin-left: 0.5rem; } +.p-rating { + gap: 0.5rem; +} .p-rating .p-rating-icon { color: rgba(255, 255, 255, 0.87); margin-left: 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -1591,7 +1615,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { .p-rating .p-rating-icon:first-child { margin-left: 0; } -.p-rating .p-rating-icon.pi-star-fill { +.p-rating .p-rating-icon.p-rating-icon-active { color: #BA68C8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover { @@ -2337,6 +2361,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} .p-speeddial-action { width: 3rem; @@ -3790,6 +3818,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background-color: rgba(162, 65, 178, 0.16); } @@ -3936,6 +3968,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox { margin-right: 0.5rem; } @@ -3973,6 +4009,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -4416,6 +4456,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4485,6 +4529,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } @@ -4742,6 +4790,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-contextmenu .p-menuitem-badge { background: #BA68C8; color: #ffffff; @@ -5156,6 +5208,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } +.p-menubar .p-submenu-list .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-menubar .p-submenu-list .p-menuitem { margin: 0; } @@ -5509,6 +5565,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu .p-slidemenu-icon { font-size: 0.875rem; } +.p-slidemenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-slidemenu .p-slidemenu-backward { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -5718,6 +5778,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-tieredmenu .p-menuitem-badge { background: #BA68C8; color: #ffffff; @@ -5777,6 +5841,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; margin-right: 0.5rem; } +.p-inline-message .p-icon { + width: 1rem; + height: 1rem; +} .p-inline-message .p-inline-message-text { font-size: 1rem; } @@ -5862,6 +5930,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-message .p-message-summary { font-weight: 700; } @@ -5887,6 +5959,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5961,6 +6037,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5978,6 +6058,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -6042,11 +6126,6 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } -.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; -} .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); @@ -6089,6 +6168,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -6238,6 +6321,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -6275,6 +6362,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/src/polyfills.ts b/src/polyfills.ts deleted file mode 100644 index 429bb9e..0000000 --- a/src/polyfills.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/tsconfig.app.json b/tsconfig.app.json index 82d91dc..41d7487 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,15 +1,14 @@ /* To learn more about this file see: https://angular.io/config/tsconfig. */ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] } diff --git a/tsconfig.json b/tsconfig.json index 991ca1d..bab818d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,31 +1,35 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2017", - "module": "es2020", - "lib": [ - "es2020", - "dom" - ] + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": false, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] }, + "exclude": ["node_modules", "**/node_modules/*"], "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": false, + "strictInputAccessModifiers": false, + "strictTemplates": false } -} + } + \ No newline at end of file diff --git a/tsconfig.spec.json b/tsconfig.spec.json index 092345b..ecc1b53 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -1,18 +1,17 @@ /* To learn more about this file see: https://angular.io/config/tsconfig. */ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] }