diff --git a/CHANGELOG.md b/CHANGELOG.md index 29a87bf5919..be85c20197c 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,35 @@ # Changelog +## [16.5.0](https://github.com/primefaces/primeng/tree/16.5.0) (2023-10-11) + +[Full Changelog](https://github.com/primefaces/primeng/compare/16.4.1...16.5.0) + +**Deprecated:** +- SlideMenu: Deprecate from PrimeNG [\#13830](https://github.com/primefaces/primeng/issues/13830) +- Remove FullCalendar theme support [\#13834](https://github.com/primefaces/primeng/issues/13834) + +**Implemented New Features and Enhancements:** +- Button: New props [\#13851](https://github.com/primefaces/primeng/issues/13851) +- SelectButton: Add allowEmpty property [\#13853](https://github.com/primefaces/primeng/issues/13853) +- Accessibility | Step component bugs and improvements [\#13742](https://github.com/primefaces/primeng/issues/13742) +- Tooltip: Accessibility role not available [\#13843](https://github.com/primefaces/primeng/issues/13843) +- Improve block/unblockScroll architecture [\#13855](https://github.com/primefaces/primeng/issues/13855) + +**Fixed bugs:** + +- Toolbar: Inconsistent naming and wrong documentation [\#13814](https://github.com/primefaces/primeng/issues/13814) +- Password | Incorrect placement of close icon when toggleMask="true" [\#13817](https://github.com/primefaces/primeng/issues/13817) +- Tooltip: disable autoHide doesn't work [\#13828](https://github.com/primefaces/primeng/issues/13828) +- Multiselect: Chips: Delete button not visible if label is too wide [\#13816](https://github.com/primefaces/primeng/issues/13816) +- BlockUI: Mask is not applied when blocked changes rapidly [\#11838](https://github.com/primefaces/primeng/issues/11838) +- panelMenu- sub MenuItem is disabled but still it can be clickable and expandable [\#13827](https://github.com/primefaces/primeng/issues/13827) +- Multiselect: Incorrect view with selected items [\#13654](https://github.com/primefaces/primeng/issues/13654) +- there is a missed "break;" line in a switch case in menu.ts at line 540 [\#13766](https://github.com/primefaces/primeng/issues/13766) +- SSR fails on carousel circular and galleria autoplay [\#13837](https://github.com/primefaces/primeng/issues/13837) +- Editor layer defect [\#13831](https://github.com/primefaces/primeng/issues/13831) +- p-dialog: ExpressionChangedAfterItHasBeenCheckedError with attr.aria-labelledby [\#13636](https://github.com/primefaces/primeng/issues/13636) +- Textarea: autoResize doesn't work when used inside a Dialog [\#9231](https://github.com/primefaces/primeng/issues/9231) + ## [16.4.1](https://github.com/primefaces/primeng/tree/16.4.1) (2023-09-27) [Full Changelog](https://github.com/primefaces/primeng/compare/16.4.0...16.4.1) @@ -322,6 +352,19 @@ - Checkbox in p-treeNode always checked when using custom icon [\#12951](https://github.com/primefaces/primeng/issues/12951) - ConfirmDialog: Duplicated AcceptIcons [\#13001](https://github.com/primefaces/primeng/issues/13001) +## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.10-LTS](https://www.npmjs.com/package/primeng/v/15.4.10-lts) (2023-10-04) +**Fixed bugs:** +- Autocomplete Force Selection case sensitive issue [\#13578](https://github.com/primefaces/primeng/issues/13578) +- Component: Carousel add better playing status support [\#12706](https://github.com/primefaces/primeng/issues/12706) +- p-calendar: Cannot read properties of undefined (reading 'length') [\#13348](https://github.com/primefaces/primeng/issues/13348) +- DropDown filter search not trimming text and search showing empty [\#13559](https://github.com/primefaces/primeng/issues/13559) +- InputNumber - showClear icon not showing when value is "0" [\#13525](https://github.com/primefaces/primeng/issues/13525) +- fileUpload: choose button is disabled after upload when you chose more files than the file limit [\#13566](https://github.com/primefaces/primeng/issues/13566) +- Component: Pick List [\#13513](https://github.com/primefaces/primeng/issues/13513) +- AutoComplete showClear close icon overlap with loader icon [\#13572](https://github.com/primefaces/primeng/issues/13572) +- calendar year view not work with *maxDate* and *minDate* not working [\#13583](https://github.com/primefaces/primeng/issues/13583) +- Calendar: onModelChange not called with keepInvalid=true if user enters a well-formatted date but outside allowed range [\#13132](https://github.com/primefaces/primeng/issues/13132) + ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.9-LTS](https://www.npmjs.com/package/primeng/v/15.4.9-lts) (2023-08-30) **Fixed bugs:** - Image Component: esc button doesn't close the preview [\#13305](https://github.com/primefaces/primeng/issues/13305) @@ -579,6 +622,19 @@ - Sidebar: Footer Templating [\#12259](https://github.com/primefaces/primeng/issues/12259) - Calendar: Day names don't update [\#12148](https://github.com/primefaces/primeng/issues/12148) +## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.13-LTS](https://www.npmjs.com/package/primeng/v/14.2.13-lts) (2023-10-04) +**Fixed bugs:** +- Calendar: onModelChange not called with keepInvalid=true if user enters a well-formatted date but outside allowed range [\#13132](https://github.com/primefaces/primeng/issues/13132) +- calendar year view not work with *maxDate* and *minDate* not working [\#13583](https://github.com/primefaces/primeng/issues/13583) +- p-calendar: Cannot read properties of undefined (reading 'length') [\#13348](https://github.com/primefaces/primeng/issues/13348) +- Component: Pick List [\#13513](https://github.com/primefaces/primeng/issues/13513) +- AutoComplete showClear close icon overlap with loader icon [\#13572](https://github.com/primefaces/primeng/issues/13572) +- fileUpload: choose button is disabled after upload when you chose more files than the file limit [\#13566](https://github.com/primefaces/primeng/issues/13566) +- Component: Carousel add better playing status support [\#12706](https://github.com/primefaces/primeng/issues/12706) +- InputNumber - showClear icon not showing when value is "0" [\#13525](https://github.com/primefaces/primeng/issues/13525) +- Dropdown: Escape Key event not default prevented [\#13463](https://github.com/primefaces/primeng/issues/13463) +- p-splitter: nested panels should have min-width: 0 to leverage flex-basis correctly [\#13323](https://github.com/primefaces/primeng/issues/13323) + ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.12-LTS](https://www.npmjs.com/package/primeng/v/14.2.12-lts) (2023-08-30) - DropDown filter search not trimming text and search showing empty [\#13559](https://github.com/primefaces/primeng/issues/13559) - Autocomplete Force Selection case sensitive issue [\#13578](https://github.com/primefaces/primeng/issues/13578) diff --git a/package-lock.json b/package-lock.json index 8c3efbbfdba..1ab88f7e5c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,15 @@ { "name": "primeng", - "version": "16.3.1", + "version": "16.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "primeng", - "version": "16.3.1", + "version": "16.4.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { - "@docsearch/js": "^3.3.4", - "@types/react": "^18.0.28" + "@docsearch/js": "^3.3.4" }, "devDependencies": { "@angular-devkit/build-angular": "^16.2.0", @@ -4482,7 +4481,9 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "optional": true, + "peer": true }, "node_modules/@types/qs": { "version": "6.9.7", @@ -4507,6 +4508,8 @@ "version": "18.2.20", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz", "integrity": "sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==", + "optional": true, + "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -4528,7 +4531,9 @@ "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", + "optional": true, + "peer": true }, "node_modules/@types/semver": { "version": "7.5.0", @@ -8351,7 +8356,9 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "optional": true, + "peer": true }, "node_modules/cuint": { "version": "0.2.2", @@ -26288,7 +26295,9 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "optional": true, + "peer": true }, "@types/qs": { "version": "6.9.7", @@ -26313,6 +26322,8 @@ "version": "18.2.20", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz", "integrity": "sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==", + "optional": true, + "peer": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -26334,7 +26345,9 @@ "@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", + "optional": true, + "peer": true }, "@types/semver": { "version": "7.5.0", @@ -29202,7 +29215,9 @@ "csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "optional": true, + "peer": true }, "cuint": { "version": "0.2.2", diff --git a/package.json b/package.json index 9f98e081120..77652ea0afc 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "16.4.1", + "version": "16.5.0", "license": "SEE LICENSE IN LICENSE.md", "scripts": { "ng": "ng", @@ -93,7 +93,6 @@ "zone.js": "~0.13.0" }, "dependencies": { - "@docsearch/js": "^3.3.4", - "@types/react": "^18.0.28" + "@docsearch/js": "^3.3.4" } } \ No newline at end of file diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts index 975f44efb35..1a334e1bcd6 100755 --- a/src/app/components/accordion/accordion.ts +++ b/src/app/components/accordion/accordion.ts @@ -283,7 +283,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy { this.accordion.updateActiveIndex(); this.changeDetector.markForCheck(); - event.preventDefault(); + event?.preventDefault(); } findTabIndex() { diff --git a/src/app/components/api/tooltipoptions.ts b/src/app/components/api/tooltipoptions.ts index 079e5e453cc..442de34f332 100644 --- a/src/app/components/api/tooltipoptions.ts +++ b/src/app/components/api/tooltipoptions.ts @@ -14,7 +14,7 @@ export interface TooltipOptions { */ tooltipPosition?: 'right' | 'left' | 'top' | 'bottom'; /** - * Position of tooltip. + * Event to show the tooltip. */ tooltipEvent?: 'hover' | 'focus'; /** @@ -63,4 +63,8 @@ export interface TooltipOptions { * Time to wait in milliseconds to hide the tooltip even it is active. */ life?: number; + /** + * When present, it adds a custom id to the tooltip. + */ + id?: string; } diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts index 03668b102cc..c8e214981d8 100755 --- a/src/app/components/blockui/blockui.ts +++ b/src/app/components/blockui/blockui.ts @@ -107,8 +107,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { this.target.getBlockableElement().style.position = 'relative'; } else { this.renderer.appendChild(this.document.body, (this.mask as ElementRef).nativeElement); - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); + DomHandler.blockBodyScroll(); } if (this.autoZIndex) { @@ -117,7 +116,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { } unblock() { - if (this.mask) { + if (this.mask && !this.animationEndListener) { this.animationEndListener = this.renderer.listen(this.mask.nativeElement, 'animationend', this.destroyModal.bind(this)); DomHandler.addClass(this.mask.nativeElement, 'p-component-overlay-leave'); } @@ -129,8 +128,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { ZIndexUtils.clear(this.mask.nativeElement); DomHandler.removeClass(this.mask.nativeElement, 'p-component-overlay-leave'); this.renderer.removeChild(this.el.nativeElement, this.mask.nativeElement); - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.removeProperty('--scrollbar-width'); + DomHandler.unblockBodyScroll(); } this.unbindAnimationEndListener(); this.cd.markForCheck(); diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts index e44c9df85d0..3237ce4087c 100755 --- a/src/app/components/button/button.ts +++ b/src/app/components/button/button.ts @@ -320,6 +320,46 @@ export class Button implements AfterContentInit { * @group Props */ @Input() loadingIcon: string | undefined; + /** + * Add a shadow to indicate elevation. + * @group Props + */ + @Input() raised: boolean = false; + /** + * Add a circular border radius to the button. + * @group Props + */ + @Input() rounded: boolean = false; + /** + * Add a textual class to the button without a background initially. + * @group Props + */ + @Input() text: boolean = false; + /** + * Add a plain textual class to the button without a background initially. + * @group Props + */ + @Input() plain: boolean = false; + /** + * Defines the style of the button. + * @group Props + */ + @Input() severity: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined; + /** + * Add a border class without a background initially. + * @group Props + */ + @Input() outlined: boolean = false; + /** + * Add a link style to the button. + * @group Props + */ + @Input() link: boolean = false; + /** + * Defines the size of the button. + * @group Props + */ + @Input() size: 'small' | 'large' | undefined; /** * Inline style of the element. * @group Props @@ -393,7 +433,16 @@ export class Button implements AfterContentInit { 'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label, 'p-disabled': this.disabled || this.loading, 'p-button-loading': this.loading, - 'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left' + 'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left', + 'p-button-link': this.link, + [`p-button-${this.severity}`]: this.severity, + 'p-button-raised': this.raised, + 'p-button-rounded': this.rounded, + 'p-button-text': this.text, + 'p-button-outlined': this.outlined, + 'p-button-sm': this.size === 'small', + 'p-button-lg': this.size === 'large', + 'p-button-plain': this.plain }; } diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index cb73ae25b04..4224bad5250 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -2819,8 +2819,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { this.disableModality(); }); this.renderer.appendChild(this.document.body, this.mask); - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); + DomHandler.blockBodyScroll(); } } @@ -2849,8 +2848,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { } if (!hasBlockerMasks) { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.removeProperty('--scrollbar-width'); + DomHandler.blockBodyScroll(); } this.unbindAnimationEndListener(); diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts index 3fbe409097d..aa23696c196 100755 --- a/src/app/components/carousel/carousel.ts +++ b/src/app/components/carousel/carousel.ts @@ -358,29 +358,31 @@ export class Carousel implements AfterContentInit { } ngOnChanges(simpleChange: SimpleChanges) { - if (simpleChange.value) { - if (this.circular && this._value) { - this.setCloneItems(); + if (isPlatformBrowser(this.platformId)) { + if (simpleChange.value) { + if (this.circular && this._value) { + this.setCloneItems(); + } } - } - if (this.isCreated) { - if (simpleChange.numVisible) { - if (this.responsiveOptions) { - this.defaultNumVisible = this.numVisible; - } + if (this.isCreated) { + if (simpleChange.numVisible) { + if (this.responsiveOptions) { + this.defaultNumVisible = this.numVisible; + } - if (this.isCircular()) { - this.setCloneItems(); - } + if (this.isCircular()) { + this.setCloneItems(); + } - this.createStyle(); - this.calculatePosition(); - } + this.createStyle(); + this.calculatePosition(); + } - if (simpleChange.numScroll) { - if (this.responsiveOptions) { - this.defaultNumScroll = this.numScroll; + if (simpleChange.numScroll) { + if (this.responsiveOptions) { + this.defaultNumScroll = this.numScroll; + } } } } @@ -388,22 +390,24 @@ export class Carousel implements AfterContentInit { ngAfterContentInit() { this.id = UniqueComponentId(); - this.allowAutoplay = !!this.autoplayInterval; + if (isPlatformBrowser(this.platformId)) { + this.allowAutoplay = !!this.autoplayInterval; - if (this.circular) { - this.setCloneItems(); - } + if (this.circular) { + this.setCloneItems(); + } - if (this.responsiveOptions) { - this.defaultNumScroll = this._numScroll; - this.defaultNumVisible = this._numVisible; - } + if (this.responsiveOptions) { + this.defaultNumScroll = this._numScroll; + this.defaultNumVisible = this._numVisible; + } - this.createStyle(); - this.calculatePosition(); + this.createStyle(); + this.calculatePosition(); - if (this.responsiveOptions) { - this.bindDocumentListeners(); + if (this.responsiveOptions) { + this.bindDocumentListeners(); + } } this.templates?.forEach((item) => { @@ -436,69 +440,71 @@ export class Carousel implements AfterContentInit { } ngAfterContentChecked() { - const isCircular = this.isCircular(); - let totalShiftedItems = this.totalShiftedItems; + if (isPlatformBrowser(this.platformId)) { + const isCircular = this.isCircular(); + let totalShiftedItems = this.totalShiftedItems; - if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) { - if (this.autoplayInterval) { - this.stopAutoplay(false); - } + if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) { + if (this.autoplayInterval) { + this.stopAutoplay(false); + } - this.remainingItems = (this.value.length - this._numVisible) % this._numScroll; + this.remainingItems = (this.value.length - this._numVisible) % this._numScroll; - let page = this._page; - if (this.totalDots() !== 0 && page >= this.totalDots()) { - page = this.totalDots() - 1; - this._page = page; - this.onPage.emit({ - page: this.page - }); - } + let page = this._page; + if (this.totalDots() !== 0 && page >= this.totalDots()) { + page = this.totalDots() - 1; + this._page = page; + this.onPage.emit({ + page: this.page + }); + } - totalShiftedItems = page * this._numScroll * -1; - if (isCircular) { - totalShiftedItems -= this._numVisible; - } + totalShiftedItems = page * this._numScroll * -1; + if (isCircular) { + totalShiftedItems -= this._numVisible; + } - if (page === this.totalDots() - 1 && this.remainingItems > 0) { - totalShiftedItems += -1 * this.remainingItems + this._numScroll; - this.isRemainingItemsAdded = true; - } else { - this.isRemainingItemsAdded = false; - } + if (page === this.totalDots() - 1 && this.remainingItems > 0) { + totalShiftedItems += -1 * this.remainingItems + this._numScroll; + this.isRemainingItemsAdded = true; + } else { + this.isRemainingItemsAdded = false; + } - if (totalShiftedItems !== this.totalShiftedItems) { - this.totalShiftedItems = totalShiftedItems; - } + if (totalShiftedItems !== this.totalShiftedItems) { + this.totalShiftedItems = totalShiftedItems; + } - this._oldNumScroll = this._numScroll; - this.prevState.numScroll = this._numScroll; - this.prevState.numVisible = this._numVisible; - this.prevState.value = [...(this._value as any[])]; + this._oldNumScroll = this._numScroll; + this.prevState.numScroll = this._numScroll; + this.prevState.numVisible = this._numVisible; + this.prevState.value = [...(this._value as any[])]; - if (this.totalDots() > 0 && this.itemsContainer.nativeElement) { - this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`; - } + if (this.totalDots() > 0 && this.itemsContainer.nativeElement) { + this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`; + } - this.isCreated = true; + this.isCreated = true; - if (this.autoplayInterval && this.isAutoplay()) { - this.startAutoplay(); + if (this.autoplayInterval && this.isAutoplay()) { + this.startAutoplay(); + } } - } - if (isCircular) { - if (this.page === 0) { - totalShiftedItems = -1 * this._numVisible; - } else if (totalShiftedItems === 0) { - totalShiftedItems = -1 * this.value.length; - if (this.remainingItems > 0) { - this.isRemainingItemsAdded = true; + if (isCircular) { + if (this.page === 0) { + totalShiftedItems = -1 * this._numVisible; + } else if (totalShiftedItems === 0) { + totalShiftedItems = -1 * this.value.length; + if (this.remainingItems > 0) { + this.isRemainingItemsAdded = true; + } } - } - if (totalShiftedItems !== this.totalShiftedItems) { - this.totalShiftedItems = totalShiftedItems; + if (totalShiftedItems !== this.totalShiftedItems) { + this.totalShiftedItems = totalShiftedItems; + } } } } diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts index c32d3f6cecf..020073ea7bb 100755 --- a/src/app/components/chip/chip.ts +++ b/src/app/components/chip/chip.ts @@ -17,7 +17,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle'; - + diff --git a/src/app/components/common/common.css b/src/app/components/common/common.css index 0ed78d752ca..6b23d729193 100755 --- a/src/app/components/common/common.css +++ b/src/app/components/common/common.css @@ -1,3 +1,8 @@ +.p-overflow-hidden { + overflow: hidden; + padding-right: var(--scrollbar-width); +} + @layer primeng { .p-component, .p-component * { @@ -52,11 +57,6 @@ height: 100%; } - .p-overflow-hidden { - overflow: hidden; - padding-right: var(--scrollbar-width); - } - .p-unselectable-text { user-select: none; } diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts index d5e59665310..ad444896356 100755 --- a/src/app/components/contextmenu/contextmenu.ts +++ b/src/app/components/contextmenu/contextmenu.ts @@ -47,7 +47,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers'; [ngClass]="{ 'p-submenu-list': !root, 'p-contextmenu-root-list': root }" [@overlayAnimation]="visible" (@overlayAnimation.start)="onEnter($event, sublist)" - [id]="menuId + '_list'" + [attr.id]="menuId + '_list'" [tabindex]="tabindex" [attr.aria-label]="ariaLabel" [attr.aria-labelledBy]="ariaLabelledBy" @@ -61,7 +61,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
  • - {{ header }} - + {{ header }} + @@ -464,6 +465,8 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { dragging: boolean | undefined; + ariaLabelledBy: string | undefined; + documentDragListener: VoidListener; documentDragEndListener: VoidListener; @@ -554,6 +557,12 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { } } + ngOnChanges(changes: SimpleChanges): void { + if (changes.header) { + this.ariaLabelledBy = this.getAriaLabelledBy(); + } + } + getAriaLabelledBy() { return this.header !== null ? UniqueComponentId() + '_header' : null; } @@ -582,8 +591,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { } if (this.modal) { - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); + DomHandler.blockBodyScroll(); } } @@ -594,8 +602,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { } if (this.modal) { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.removeProperty('--scrollbar-width'); + DomHandler.unblockBodyScroll(); } if (!(this.cd as ViewRef).destroyed) { @@ -609,11 +616,9 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { if (!this.modal && !this.blockScroll) { if (this.maximized) { - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); + DomHandler.blockBodyScroll(); } else { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); - this.document.body.style.removeProperty('--scrollbar-width'); + DomHandler.unblockBodyScroll(); } } diff --git a/src/app/components/dock/dock.ts b/src/app/components/dock/dock.ts index 3816f45d475..6b402fe889e 100755 --- a/src/app/components/dock/dock.ts +++ b/src/app/components/dock/dock.ts @@ -18,7 +18,7 @@ import { DomHandler } from 'primeng/dom';
    ` -}) -export class AccessibilityDoc { - @Input() id: string; - - @Input() title: string; -} diff --git a/src/app/showcase/doc/slidemenu/basicdoc.ts b/src/app/showcase/doc/slidemenu/basicdoc.ts deleted file mode 100644 index a58ced0ade1..00000000000 --- a/src/app/showcase/doc/slidemenu/basicdoc.ts +++ /dev/null @@ -1,303 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'basic-doc', - template: `
    - -

    SlideMenu requires a collection of menuitems as its model along with viewportHeight and menuWidth.

    -     -
    - -
    - -
    ` -}) -export class BasicDoc implements OnInit { - @Input() id: string; - - @Input() title: string; - - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - } - - code: Code = { - basic: ` -`, - - html: ` -
    - -
    `, - - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; - -@Component({ - selector: 'slide-menu-basic-demo', - templateUrl: './slide-menu-basic-demo.html' -}) -export class SlideMenuBasicDemo implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - } -}` - }; -} diff --git a/src/app/showcase/doc/slidemenu/importdoc.ts b/src/app/showcase/doc/slidemenu/importdoc.ts deleted file mode 100644 index 964080f3bda..00000000000 --- a/src/app/showcase/doc/slidemenu/importdoc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'import-doc', - template: `
    - - -
    ` -}) -export class ImportDoc { - @Input() id: string; - - @Input() title: string; - - code: Code = { - typescript: `import { SlideMenuModule } from 'primeng/slidemenu';` - }; -} diff --git a/src/app/showcase/doc/slidemenu/popupdoc.ts b/src/app/showcase/doc/slidemenu/popupdoc.ts deleted file mode 100644 index fe29a5d91f0..00000000000 --- a/src/app/showcase/doc/slidemenu/popupdoc.ts +++ /dev/null @@ -1,306 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'popup-doc', - template: `
    - -

    Popup mode is enabled by adding popup property and calling toggle method with an event of the target.

    -     -
    - - -
    - -
    ` -}) -export class PopupDoc implements OnInit { - @Input() id: string; - - @Input() title: string; - - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - } - - code: Code = { - basic: ` - -`, - - html: ` -
    - - -
    `, - - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; - -@Component({ - selector: 'slide-menu-popup-demo', - templateUrl: './slide-menu-popup-demo.html' -}) -export class SlideMenuPopupDemo implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - } -}` - }; -} diff --git a/src/app/showcase/doc/slidemenu/slidemenudoc.module.ts b/src/app/showcase/doc/slidemenu/slidemenudoc.module.ts deleted file mode 100644 index 4a564a505d6..00000000000 --- a/src/app/showcase/doc/slidemenu/slidemenudoc.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { SlideMenuModule } from 'primeng/slidemenu'; -import { ButtonModule } from 'primeng/button'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/code/app.code.component'; -import { BasicDoc } from './basicdoc'; -import { ImportDoc } from './importdoc'; -import { PopupDoc } from './popupdoc'; -import { StyleDoc } from './styledoc'; -import { AccessibilityDoc } from './accessibilitydoc'; - -@NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, SlideMenuModule, ButtonModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, PopupDoc, AccessibilityDoc], - exports: [AppDocModule] -}) -export class SlideMenuDocModule {} diff --git a/src/app/showcase/doc/slidemenu/styledoc.ts b/src/app/showcase/doc/slidemenu/styledoc.ts deleted file mode 100644 index 19c5dd9bc32..00000000000 --- a/src/app/showcase/doc/slidemenu/styledoc.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'style-doc', - template: `
    - -

    Following is the list of structural style classes, for theming classes visit theming page.

    -     -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameElement
    p-slidemenuContainer element.
    p-slidemenu-wrapperWrapper of content.
    p-slidemenu-contentContent element.
    p-slidemenu-backwardElement to navigate to previous menu on click.
    p-menu-listList element.
    p-menuitemMenuitem element.
    p-menuitem-textLabel of a menuitem.
    p-menuitem-iconIcon of a menuitem.
    p-submenu-iconArrow icon of a submenu.
    -
    -
    ` -}) -export class StyleDoc { - @Input() id: string; - - @Input() title: string; -} diff --git a/src/app/showcase/doc/slider/basicdoc.ts b/src/app/showcase/doc/slider/basicdoc.ts index c98e4cc5d60..9fc1247e368 100644 --- a/src/app/showcase/doc/slider/basicdoc.ts +++ b/src/app/showcase/doc/slider/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Two-way binding is defined using the standard ngModel directive.

     diff --git a/src/app/showcase/doc/slider/importdoc.ts b/src/app/showcase/doc/slider/importdoc.ts index 61035339444..a7dfa7e386b 100644 --- a/src/app/showcase/doc/slider/importdoc.ts +++ b/src/app/showcase/doc/slider/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/slider/inputdoc.ts b/src/app/showcase/doc/slider/inputdoc.ts index 3f5d1362feb..3d930f981c5 100644 --- a/src/app/showcase/doc/slider/inputdoc.ts +++ b/src/app/showcase/doc/slider/inputdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'input-doc', - template: `
    + template: `

    Slider is connected to an input field using two-way binding.

     diff --git a/src/app/showcase/doc/slider/rangedoc.ts b/src/app/showcase/doc/slider/rangedoc.ts index 8f49487d927..2c3f6a7984e 100644 --- a/src/app/showcase/doc/slider/rangedoc.ts +++ b/src/app/showcase/doc/slider/rangedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'range-doc', - template: `
    + template: `

    When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.

     diff --git a/src/app/showcase/doc/slider/reactiveformsdoc.ts b/src/app/showcase/doc/slider/reactiveformsdoc.ts index 73583b08253..f7972b6e47d 100644 --- a/src/app/showcase/doc/slider/reactiveformsdoc.ts +++ b/src/app/showcase/doc/slider/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
    + template: `

    Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

     diff --git a/src/app/showcase/doc/slider/stepdoc.ts b/src/app/showcase/doc/slider/stepdoc.ts index 380d808c7cd..759b01d129d 100644 --- a/src/app/showcase/doc/slider/stepdoc.ts +++ b/src/app/showcase/doc/slider/stepdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'step-doc', - template: `
    + template: `

    Size of each movement is defined with the step property.

     diff --git a/src/app/showcase/doc/slider/styledoc.ts b/src/app/showcase/doc/slider/styledoc.ts index d1dca9f4fd9..b0bc281392f 100644 --- a/src/app/showcase/doc/slider/styledoc.ts +++ b/src/app/showcase/doc/slider/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/slider/verticaldoc.ts b/src/app/showcase/doc/slider/verticaldoc.ts index d48455fd4af..dcdc2d753ae 100644 --- a/src/app/showcase/doc/slider/verticaldoc.ts +++ b/src/app/showcase/doc/slider/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
    + template: `

    Default layout of slider is horizontal, use orientation property for the alternative vertical mode.

     diff --git a/src/app/showcase/doc/speeddial/circledoc.ts b/src/app/showcase/doc/speeddial/circledoc.ts index 079330a56ec..f73d9fe1a87 100644 --- a/src/app/showcase/doc/speeddial/circledoc.ts +++ b/src/app/showcase/doc/speeddial/circledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'circle-doc', - template: `
    + template: `

    Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.

     diff --git a/src/app/showcase/doc/speeddial/customdoc.ts b/src/app/showcase/doc/speeddial/customdoc.ts index edeb1add922..ec36acccb9b 100644 --- a/src/app/showcase/doc/speeddial/customdoc.ts +++ b/src/app/showcase/doc/speeddial/customdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-doc', - template: `
    + template: `

    SpeedDial sample with an outlined button, custom icons and transitionDelay.

     diff --git a/src/app/showcase/doc/speeddial/importdoc.ts b/src/app/showcase/doc/speeddial/importdoc.ts index ffe23e85254..704168f06fe 100644 --- a/src/app/showcase/doc/speeddial/importdoc.ts +++ b/src/app/showcase/doc/speeddial/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/speeddial/lineardoc.ts b/src/app/showcase/doc/speeddial/lineardoc.ts index 3a5846ef437..7a18886b6cd 100644 --- a/src/app/showcase/doc/speeddial/lineardoc.ts +++ b/src/app/showcase/doc/speeddial/lineardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'linear-doc', - template: `
    + template: `

    SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button.

     diff --git a/src/app/showcase/doc/speeddial/maskdoc.ts b/src/app/showcase/doc/speeddial/maskdoc.ts index 0dc69b5b69b..2bb69f8fa84 100644 --- a/src/app/showcase/doc/speeddial/maskdoc.ts +++ b/src/app/showcase/doc/speeddial/maskdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'mask-doc', - template: `
    + template: `

    Adding mask property displays a modal layer behind the popup items.

     diff --git a/src/app/showcase/doc/speeddial/quartercircledoc.ts b/src/app/showcase/doc/speeddial/quartercircledoc.ts index ae4487bdc9b..61c877099cb 100644 --- a/src/app/showcase/doc/speeddial/quartercircledoc.ts +++ b/src/app/showcase/doc/speeddial/quartercircledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'quarter-circle-doc', - template: `
    + template: `

    When type is defined as quarter-circle, items are displayed in a half-circle around the button.

     diff --git a/src/app/showcase/doc/speeddial/semicircledoc.ts b/src/app/showcase/doc/speeddial/semicircledoc.ts index 0191bcbf1c7..5f37368c93f 100644 --- a/src/app/showcase/doc/speeddial/semicircledoc.ts +++ b/src/app/showcase/doc/speeddial/semicircledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'semi-circle-doc', - template: `
    + template: `

    When type is defined as semi-circle, items are displayed in a half-circle around the button.

     diff --git a/src/app/showcase/doc/speeddial/styledoc.ts b/src/app/showcase/doc/speeddial/styledoc.ts index 172be7581cf..36c55bc0683 100644 --- a/src/app/showcase/doc/speeddial/styledoc.ts +++ b/src/app/showcase/doc/speeddial/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/speeddial/tooltipdoc.ts b/src/app/showcase/doc/speeddial/tooltipdoc.ts index 90720ca6cf9..033d26b9af1 100644 --- a/src/app/showcase/doc/speeddial/tooltipdoc.ts +++ b/src/app/showcase/doc/speeddial/tooltipdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tooltip-doc', - template: `
    + template: `

    Items display a tooltip on hover when a standalone Tooltip is present with a target that matches the items.

     diff --git a/src/app/showcase/doc/splitbutton/basicdoc.ts b/src/app/showcase/doc/splitbutton/basicdoc.ts index e457e4872ea..f8cdc39e0be 100644 --- a/src/app/showcase/doc/splitbutton/basicdoc.ts +++ b/src/app/showcase/doc/splitbutton/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

     diff --git a/src/app/showcase/doc/splitbutton/disableddoc.ts b/src/app/showcase/doc/splitbutton/disableddoc.ts index 3b2ad179723..6fc2053fcb4 100644 --- a/src/app/showcase/doc/splitbutton/disableddoc.ts +++ b/src/app/showcase/doc/splitbutton/disableddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
    + template: `

    When disabled is present, the element cannot be edited and focused.

     diff --git a/src/app/showcase/doc/splitbutton/importdoc.ts b/src/app/showcase/doc/splitbutton/importdoc.ts index 7a590acaefe..b5efaf8cb19 100644 --- a/src/app/showcase/doc/splitbutton/importdoc.ts +++ b/src/app/showcase/doc/splitbutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/splitbutton/nesteddoc.ts b/src/app/showcase/doc/splitbutton/nesteddoc.ts index db756688e9a..11ee44519e0 100644 --- a/src/app/showcase/doc/splitbutton/nesteddoc.ts +++ b/src/app/showcase/doc/splitbutton/nesteddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'nested-doc', - template: `
    + template: `

    SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

     diff --git a/src/app/showcase/doc/splitbutton/outlineddoc.ts b/src/app/showcase/doc/splitbutton/outlineddoc.ts index b4f423c6d03..5465a9b90f8 100644 --- a/src/app/showcase/doc/splitbutton/outlineddoc.ts +++ b/src/app/showcase/doc/splitbutton/outlineddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'outlined-doc', - template: `
    + template: `

    Outlined buttons display a border without a background initially.

     diff --git a/src/app/showcase/doc/splitbutton/raiseddoc.ts b/src/app/showcase/doc/splitbutton/raiseddoc.ts index 80d2ee9ad04..33abc28558c 100644 --- a/src/app/showcase/doc/splitbutton/raiseddoc.ts +++ b/src/app/showcase/doc/splitbutton/raiseddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'raised-doc', - template: `
    + template: `

    Raised buttons display a shadow to indicate elevation.

     diff --git a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts index d2e013e2d9e..74fdc4d3eaf 100644 --- a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts +++ b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'raised-text-doc', - template: `
    + template: `

    Text buttons can be displayed as raised as well for elevation.

     diff --git a/src/app/showcase/doc/splitbutton/roundeddoc.ts b/src/app/showcase/doc/splitbutton/roundeddoc.ts index 091c0533cae..417d793cc15 100644 --- a/src/app/showcase/doc/splitbutton/roundeddoc.ts +++ b/src/app/showcase/doc/splitbutton/roundeddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'rounded-doc', - template: `
    + template: `

    Rounded buttons have a circular border radius.

     diff --git a/src/app/showcase/doc/splitbutton/severitydoc.ts b/src/app/showcase/doc/splitbutton/severitydoc.ts index d065da9469a..c148e72d0c1 100644 --- a/src/app/showcase/doc/splitbutton/severitydoc.ts +++ b/src/app/showcase/doc/splitbutton/severitydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `
    + template: `

    Severity defines the type of button.

     diff --git a/src/app/showcase/doc/splitbutton/sizesdoc.ts b/src/app/showcase/doc/splitbutton/sizesdoc.ts index cff570bf97e..13fc582effb 100644 --- a/src/app/showcase/doc/splitbutton/sizesdoc.ts +++ b/src/app/showcase/doc/splitbutton/sizesdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'sizes-doc', - template: `
    + template: `

    SplitButton provides small and large sizes as alternatives to the standard.

     diff --git a/src/app/showcase/doc/splitbutton/styledoc.ts b/src/app/showcase/doc/splitbutton/styledoc.ts index 6469f296d16..1d7ecc27fae 100644 --- a/src/app/showcase/doc/splitbutton/styledoc.ts +++ b/src/app/showcase/doc/splitbutton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/splitbutton/textdoc.ts b/src/app/showcase/doc/splitbutton/textdoc.ts index 003ad106840..c43a1a5cb49 100644 --- a/src/app/showcase/doc/splitbutton/textdoc.ts +++ b/src/app/showcase/doc/splitbutton/textdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'text-doc', - template: `
    + template: `

    Text buttons are displayed as textual elements.

     diff --git a/src/app/showcase/doc/splitter/horizontaldoc.ts b/src/app/showcase/doc/splitter/horizontaldoc.ts index 0d97fdf8430..358d89da2d1 100644 --- a/src/app/showcase/doc/splitter/horizontaldoc.ts +++ b/src/app/showcase/doc/splitter/horizontaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'horizontal-doc', - template: `
    + template: `

    Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

     diff --git a/src/app/showcase/doc/splitter/importdoc.ts b/src/app/showcase/doc/splitter/importdoc.ts index 490e963c057..91c815cd8f3 100644 --- a/src/app/showcase/doc/splitter/importdoc.ts +++ b/src/app/showcase/doc/splitter/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/splitter/nesteddoc.ts b/src/app/showcase/doc/splitter/nesteddoc.ts index 5335a6c22d0..1de8d55b174 100644 --- a/src/app/showcase/doc/splitter/nesteddoc.ts +++ b/src/app/showcase/doc/splitter/nesteddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'nested-doc', - template: `
    + template: `

    Splitters can be combined to create advanced layouts.

     diff --git a/src/app/showcase/doc/splitter/sizedoc.ts b/src/app/showcase/doc/splitter/sizedoc.ts index 748a2f7a1c2..2896cb6417e 100644 --- a/src/app/showcase/doc/splitter/sizedoc.ts +++ b/src/app/showcase/doc/splitter/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'size-doc', - template: `
    + template: `

    When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].

     diff --git a/src/app/showcase/doc/splitter/styledoc.ts b/src/app/showcase/doc/splitter/styledoc.ts index 6347907dc9c..53df5cfc7e0 100644 --- a/src/app/showcase/doc/splitter/styledoc.ts +++ b/src/app/showcase/doc/splitter/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/splitter/verticaldoc.ts b/src/app/showcase/doc/splitter/verticaldoc.ts index c7bfd20770f..10cc792ac4d 100644 --- a/src/app/showcase/doc/splitter/verticaldoc.ts +++ b/src/app/showcase/doc/splitter/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
    + template: `

    Panels are displayed as stacked by setting the layout to vertical.

     diff --git a/src/app/showcase/doc/steps/basicdoc.ts b/src/app/showcase/doc/steps/basicdoc.ts index 75c8626eeba..5cef2c5f10a 100644 --- a/src/app/showcase/doc/steps/basicdoc.ts +++ b/src/app/showcase/doc/steps/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Steps requires a collection of menuitems as its model.

     diff --git a/src/app/showcase/doc/steps/importdoc.ts b/src/app/showcase/doc/steps/importdoc.ts index 9d0051ad93d..f6ae8d2d00e 100644 --- a/src/app/showcase/doc/steps/importdoc.ts +++ b/src/app/showcase/doc/steps/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/steps/interactivedoc.ts b/src/app/showcase/doc/steps/interactivedoc.ts index 439060b0ed1..82a1d947fce 100644 --- a/src/app/showcase/doc/steps/interactivedoc.ts +++ b/src/app/showcase/doc/steps/interactivedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'interactive-doc', - template: `
    + template: `

    In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with activeIndexChange to control the Steps.

     diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts index 71483d259ea..81e6cca2e31 100644 --- a/src/app/showcase/doc/steps/routingdoc.ts +++ b/src/app/showcase/doc/steps/routingdoc.ts @@ -6,7 +6,7 @@ import { TicketService } from '../../service/ticketservice'; @Component({ selector: 'routing-doc', - template: `
    + template: `

    Example below uses nested routes with Steps.

     diff --git a/src/app/showcase/doc/steps/styledoc.ts b/src/app/showcase/doc/steps/styledoc.ts index 8e2f1c9e02c..92cdd35f0da 100644 --- a/src/app/showcase/doc/steps/styledoc.ts +++ b/src/app/showcase/doc/steps/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/styleclass/animationdoc.ts b/src/app/showcase/doc/styleclass/animationdoc.ts index fb4777d3a81..1183b42bf99 100644 --- a/src/app/showcase/doc/styleclass/animationdoc.ts +++ b/src/app/showcase/doc/styleclass/animationdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animation-doc', - template: `
    + template: `

    Classes to apply during enter and leave animations are specified using the enterClass, enterActiveClass, enterToClass, leaveClass, leaveActiveClass,leaveToClassproperties. In addition in case diff --git a/src/app/showcase/doc/styleclass/importdoc.ts b/src/app/showcase/doc/styleclass/importdoc.ts index 2b045186734..52446bc2821 100644 --- a/src/app/showcase/doc/styleclass/importdoc.ts +++ b/src/app/showcase/doc/styleclass/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

    + template: `
    ` diff --git a/src/app/showcase/doc/styleclass/toggleclassdoc.ts b/src/app/showcase/doc/styleclass/toggleclassdoc.ts index 6983d8aa193..ec3937d97e1 100644 --- a/src/app/showcase/doc/styleclass/toggleclassdoc.ts +++ b/src/app/showcase/doc/styleclass/toggleclassdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'toggle-class-doc', - template: `
    + template: `

    StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts index f2dff1a9c5a..891b053bfbc 100644 --- a/src/app/showcase/doc/table/basicdoc.ts +++ b/src/app/showcase/doc/table/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'basic-doc', - template: `

    + template: `

    DataTable requires a collection to display along with column components for the representation of the data.

     diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts index 3cf9d1ebcc7..9ccf2c132c0 100644 --- a/src/app/showcase/doc/table/celleditdoc.ts +++ b/src/app/showcase/doc/table/celleditdoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'cell-edit-doc', - template: `
    + template: `

    In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a p-cellEditor helper component to define the input-output templates for the edit and view modes respectively.

     diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts index 540e63efe26..dc080bdb134 100644 --- a/src/app/showcase/doc/table/checkboxselectiondoc.ts +++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'checkbox-selection-doc', - template: `
    + template: `

    Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.

     diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts index 4a082a8ff21..4a52acf5684 100644 --- a/src/app/showcase/doc/table/columngroupdoc.ts +++ b/src/app/showcase/doc/table/columngroupdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'column-group-doc', - template: `
    + template: `

    Columns can be grouped using rowspan and colspan properties.

     diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts index 3daa04b8b66..513cbfc1fa3 100644 --- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-resize-expand-mode-doc', - template: `
    + template: `

    Setting columnResizeMode as expand changes the table width as well.

     diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts index 86166387443..a6b4e3be996 100644 --- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-resize-fit-mode-doc', - template: `
    + template: `

    Columns can be resized using drag drop by setting the resizableColumns to true. Fit mode is the default one and the overall table width does not change when a column is resized.

     diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts index c2686a91b4b..5b31a19c55c 100644 --- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts +++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'column-resize-scrollable-mode-doc', - template: `
    + template: `
    diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts index e91e6f657db..c6a7e4c0005 100644 --- a/src/app/showcase/doc/table/columnselectiondoc.ts +++ b/src/app/showcase/doc/table/columnselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-selection-doc', - template: `
    + template: `

    Selection using custom elements.

     diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts index 0ff4e66de2e..4c795439d20 100644 --- a/src/app/showcase/doc/table/columntoggledoc.ts +++ b/src/app/showcase/doc/table/columntoggledoc.ts @@ -9,7 +9,7 @@ interface Column { } @Component({ selector: 'column-toggle-doc', - template: `
    + template: `

    This demo uses a multiselect component to implement toggleable columns.

     diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts index 6113f60ae23..d80a4959dc0 100644 --- a/src/app/showcase/doc/table/contextmenudoc.ts +++ b/src/app/showcase/doc/table/contextmenudoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'context-menu-doc', - template: `
    + template: `

    Table has exclusive integration with contextmenu component. In order to attach a menu to a table, add pContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts index 66fa61b4b5d..f3c04081dd1 100644 --- a/src/app/showcase/doc/table/controlledselectiondoc.ts +++ b/src/app/showcase/doc/table/controlledselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'controlled-selection-doc', - template: `

    + template: `

    Row selection can be controlled by utilizing rowSelectable and disabled properties.

     diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts index cdf3b8190b3..ec5ea6a874f 100644 --- a/src/app/showcase/doc/table/customersdoc.ts +++ b/src/app/showcase/doc/table/customersdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'customers-doc', - template: `
    + template: `

    DataTable with selection, pagination, filtering, sorting and templating.

     diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts index 346b2b4a6ed..9c35b6fa756 100644 --- a/src/app/showcase/doc/table/customsortdoc.ts +++ b/src/app/showcase/doc/table/customsortdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'custom-sort-doc', - template: `
    + template: `

    Instead of using the built-in sorting algorithm a custom sort can be attached by enabling customSort property and defining a sortFunction implementation. This function gets a SortEvent instance that provides the data to sort, diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts index b60b3609eb3..fd8c074cca0 100644 --- a/src/app/showcase/doc/table/dynamicdoc.ts +++ b/src/app/showcase/doc/table/dynamicdoc.ts @@ -9,7 +9,7 @@ interface Column { } @Component({ selector: 'dynamic-doc', - template: `

    + template: `

    Columns can be defined dynamically using the *ngFor directive.

     diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts index d77798f7b33..f5bb4492135 100644 --- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts +++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'expandable-row-group-doc', - template: `
    + template: `

    When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the expandedRows and onRowToggle properties.

     diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts index 1730e897d09..27407a75b1b 100644 --- a/src/app/showcase/doc/table/exportdoc.ts +++ b/src/app/showcase/doc/table/exportdoc.ts @@ -17,7 +17,7 @@ interface ExportColumn { @Component({ selector: 'export-doc', - template: `
    + template: `

    Table can export its data in CSV format using the built-in exportCSV() function. By default, all data is exported. If you'd like to export only the selection then pass a config object with selectionOnly property as true. diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts index b1a0d5556e3..6afe9d87666 100644 --- a/src/app/showcase/doc/table/filtermenudoc.ts +++ b/src/app/showcase/doc/table/filtermenudoc.ts @@ -7,7 +7,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'filter-menu-doc', - template: `

    + template: `

    Filters are displayed in an overlay.

     diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts index 77b261f7fa1..3dba2d06297 100644 --- a/src/app/showcase/doc/table/filterrowdoc.ts +++ b/src/app/showcase/doc/table/filterrowdoc.ts @@ -7,7 +7,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'filter-row-doc', - template: `
    + template: `

    Filters are displayed inline within a separate row.

     diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts index ce7cee14cb1..036cdb674ff 100644 --- a/src/app/showcase/doc/table/flexiblescrolldoc.ts +++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'flexible-scroll-doc', - template: `
    + template: `

    Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts index e2d8151b069..b55360d2c6e 100644 --- a/src/app/showcase/doc/table/frozencolumnsdoc.ts +++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'frozen-columns-doc', - template: `

    + template: `

    Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, alignFrozen is available to define whether the column should be fixed on the left or right.

     diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts index 1214efb1942..2671cce6a21 100644 --- a/src/app/showcase/doc/table/frozenrowsdoc.ts +++ b/src/app/showcase/doc/table/frozenrowsdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'frozen-rows-doc', - template: `
    + template: `

    Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.

     diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts index 1a9cb458910..3c1c7f75c75 100644 --- a/src/app/showcase/doc/table/gridlinesdoc.ts +++ b/src/app/showcase/doc/table/gridlinesdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'gridlines-doc', - template: `
    + template: `

    Adding p-datatable-gridlines class displays grid lines.

     diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalandverticaldoc.ts index 63b2960265b..4843e038796 100644 --- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts +++ b/src/app/showcase/doc/table/horizontalandverticaldoc.ts @@ -5,7 +5,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'horizontal-and-vertical-scroll-doc', - template: `
    + template: `

    Horizontal and vertical scroll can be used together to enable double axis scrolling.

     diff --git a/src/app/showcase/doc/table/importdoc.ts b/src/app/showcase/doc/table/importdoc.ts index 16d59216a39..1a842214ab4 100644 --- a/src/app/showcase/doc/table/importdoc.ts +++ b/src/app/showcase/doc/table/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts index 637205f565d..5acf09c82ac 100644 --- a/src/app/showcase/doc/table/lazyloaddoc.ts +++ b/src/app/showcase/doc/table/lazyloaddoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'lazy-load-doc', - template: `
    + template: `

    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging, sorting and filtering happens. Sample here loads diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts index b52c1308dcb..7b87efb0ebe 100644 --- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-column-sort-doc', - template: `

    + template: `

    Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

     diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts index f5c54b27ad2..fd687045b0f 100644 --- a/src/app/showcase/doc/table/multipleselectiondoc.ts +++ b/src/app/showcase/doc/table/multipleselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'multiple-selection-doc', - template: `
    + template: `

    In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts index d76962835a0..237adc6d5a6 100644 --- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts +++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'page-only-selection-doc', - template: `

    + template: `
    diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts index ca09c29d29d..9bb88bfa816 100644 --- a/src/app/showcase/doc/table/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-basic-doc', - template: `
    + template: `

    Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. For server side pagination, see the diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts index 03733b324b3..59f059aade4 100644 --- a/src/app/showcase/doc/table/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-locale-doc', - template: `

    + template: `

    paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.

     diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts index 4e3e1f4c59c..5aaeb610009 100644 --- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts +++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts @@ -6,12 +6,12 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-programmatic-doc', - template: `
    + template: `

    Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.
    -
    +
    diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts index ac02b4f3b57..aa73aa7598b 100644 --- a/src/app/showcase/doc/table/productsdoc.ts +++ b/src/app/showcase/doc/table/productsdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'products-doc', - template: `
    + template: `

    CRUD implementation example with a Dialog.

     diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts index a677025b1a4..e016e23316a 100644 --- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts +++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'radio-button-selection-doc', - template: `
    + template: `

    Single selection can also be handled using radio buttons.

     diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts index 72041b36d25..faa506e75f4 100644 --- a/src/app/showcase/doc/table/reorderdoc.ts +++ b/src/app/showcase/doc/table/reorderdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'reorder-doc', - template: `
    + template: `

    Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding reorderableColumns property.

    diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts index 75197139903..5a6e78a75a8 100644 --- a/src/app/showcase/doc/table/responsivescrolldoc.ts +++ b/src/app/showcase/doc/table/responsivescrolldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'responsive-scroll-doc', - template: `

    + template: `

    When there is not enough space for the table to fit all the content efficiently, table displays a horizontal scrollbar. It is suggested to give a min-width to the table to avoid design issues due wrapping of cell contents.

    Following table displays a horizontal scrollbar when viewport is smaller than 50rem.

    diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts index 83afc998b23..36022b83abd 100644 --- a/src/app/showcase/doc/table/responsivestackdoc.ts +++ b/src/app/showcase/doc/table/responsivestackdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'responsive-stack-doc', - template: `
    + template: `

    In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px' as max-width. This feature is enabled by setting responsiveLayout to stack and adding an element with diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts index 923e7232343..b0133f656ff 100644 --- a/src/app/showcase/doc/table/roweditdoc.ts +++ b/src/app/showcase/doc/table/roweditdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'row-edit-doc', - template: `

    + template: `

    Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts index 5f391a99d96..8d05367add7 100644 --- a/src/app/showcase/doc/table/rowexpanddoc.ts +++ b/src/app/showcase/doc/table/rowexpanddoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'row-expand-doc', - template: `

    + template: `

    Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice diff --git a/src/app/showcase/doc/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts index 3e6b8621f22..ee1d283ff7d 100644 --- a/src/app/showcase/doc/table/rowspangroupingdoc.ts +++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'rowspan-grouping-doc', - template: `

    + template: `

    When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.

     diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts index 2b4e2bef040..cff9b4bd64f 100644 --- a/src/app/showcase/doc/table/selectioneventsdoc.ts +++ b/src/app/showcase/doc/table/selectioneventsdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'selection-events-doc', - template: `
    + template: `

    Table provides onRowSelect and onRowUnselect events to listen selection events.

     diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts index b8e3a5f8b02..cae39a8e282 100644 --- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-column-sort-doc', - template: `
    + template: `

    A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sortIcon component. For dynamic columns, setting diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts index 65b01732f4b..0cb9263cb60 100644 --- a/src/app/showcase/doc/table/singleselectiondoc.ts +++ b/src/app/showcase/doc/table/singleselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-selection-doc', - template: `

    + template: `

    Single row selection is enabled by defining selectionMode as single along with a value binding using selection property. When available, it is suggested to provide a unique identifier of a row with diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts index c42e5d6b4a8..f73b5ce592e 100644 --- a/src/app/showcase/doc/table/sizedoc.ts +++ b/src/app/showcase/doc/table/sizedoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'size-doc', - template: `

    + template: `

    In addition to a regular table, alternatives with alternative sizes are available.

     diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts index 2eaa1f25fb4..0622a63a154 100644 --- a/src/app/showcase/doc/table/statefuldoc.ts +++ b/src/app/showcase/doc/table/statefuldoc.ts @@ -5,7 +5,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'stateful-doc', - template: `
    + template: `

    Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.

    diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts index 9c3d8077ef5..825aa79f4c7 100644 --- a/src/app/showcase/doc/table/stripeddoc.ts +++ b/src/app/showcase/doc/table/stripeddoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'striped-doc', - template: `

    + template: `

    Adding p-datatable-striped class displays striped rows.

     diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts index 877eca53901..58541c7dfd8 100644 --- a/src/app/showcase/doc/table/styledoc.ts +++ b/src/app/showcase/doc/table/styledoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Certain rows or cells can easily be styled based on conditions.

     diff --git a/src/app/showcase/doc/table/stylingdoc.ts b/src/app/showcase/doc/table/stylingdoc.ts index b9ac93e5f35..4b106bbdae5 100644 --- a/src/app/showcase/doc/table/stylingdoc.ts +++ b/src/app/showcase/doc/table/stylingdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'styling-doc', - template: `
    + template: `
    diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts index ca21c4149e6..611ddcd8f72 100644 --- a/src/app/showcase/doc/table/subheadergroupingdoc.ts +++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'subheader-grouping-doc', - template: `
    + template: `

    Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader, a header and footer can be displayed for each group. The content of a group header is provided with groupheader and diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts index 0fd75b6c2f3..745889ac88e 100644 --- a/src/app/showcase/doc/table/templatedoc.ts +++ b/src/app/showcase/doc/table/templatedoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'template-doc', - template: `

    + template: `

    Custom content at header, body and footer sections are supported via templating.

     diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts index 76b4f2ec41e..c7d089b0406 100644 --- a/src/app/showcase/doc/table/verticalscrolldoc.ts +++ b/src/app/showcase/doc/table/verticalscrolldoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'vertical-scroll-doc', - template: `
    + template: `

    Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

     diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts index efa48f4f8e5..6ae19096683 100644 --- a/src/app/showcase/doc/table/virtualscrolldoc.ts +++ b/src/app/showcase/doc/table/virtualscrolldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'virtual-scroll-doc', - template: `
    + template: `

    VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts index 09ae89f963b..01dbaf5223e 100644 --- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts @@ -12,7 +12,7 @@ interface Column { @Component({ selector: 'virtual-scroll-lazy-doc', - template: `

    + template: `

    VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also diff --git a/src/app/showcase/doc/tabmenu/activedoc.ts b/src/app/showcase/doc/tabmenu/activedoc.ts index 666e1f63ee0..221df1055ec 100644 --- a/src/app/showcase/doc/tabmenu/activedoc.ts +++ b/src/app/showcase/doc/tabmenu/activedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'active-doc', - template: `

    + template: `

    By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.

     diff --git a/src/app/showcase/doc/tabmenu/basicdoc.ts b/src/app/showcase/doc/tabmenu/basicdoc.ts index 59d11e9842a..f3a5a161590 100644 --- a/src/app/showcase/doc/tabmenu/basicdoc.ts +++ b/src/app/showcase/doc/tabmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    TabMenu requires a collection of menuitems as its model.

     diff --git a/src/app/showcase/doc/tabmenu/controlleddoc.ts b/src/app/showcase/doc/tabmenu/controlleddoc.ts index 5a0831b1d5b..fe853e53111 100644 --- a/src/app/showcase/doc/tabmenu/controlleddoc.ts +++ b/src/app/showcase/doc/tabmenu/controlleddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'controlled-doc', - template: `
    + template: `

    For controlled mode, use activeItem property along with activeItemChange event are needed to manage the active item.

     diff --git a/src/app/showcase/doc/tabmenu/importdoc.ts b/src/app/showcase/doc/tabmenu/importdoc.ts index 0e05b805042..8eca9948daa 100644 --- a/src/app/showcase/doc/tabmenu/importdoc.ts +++ b/src/app/showcase/doc/tabmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tabmenu/scrollabledoc.ts b/src/app/showcase/doc/tabmenu/scrollabledoc.ts index 3efd50d10b8..9fa3b687478 100644 --- a/src/app/showcase/doc/tabmenu/scrollabledoc.ts +++ b/src/app/showcase/doc/tabmenu/scrollabledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scrollable-doc', - template: `
    + template: `

    Setting scrollable property to true enables scrolling if content overflows.

     diff --git a/src/app/showcase/doc/tabmenu/styledoc.ts b/src/app/showcase/doc/tabmenu/styledoc.ts index 46ed6b32a85..61af5f68fc1 100644 --- a/src/app/showcase/doc/tabmenu/styledoc.ts +++ b/src/app/showcase/doc/tabmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/tabmenu/templatedoc.ts b/src/app/showcase/doc/tabmenu/templatedoc.ts index 0392adca5d6..fcebd025c4f 100644 --- a/src/app/showcase/doc/tabmenu/templatedoc.ts +++ b/src/app/showcase/doc/tabmenu/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tab-menu-template-demo', - template: `
    + template: `

    TabMenu supports templating via the item template which gets the menuitem instance and the index.

     diff --git a/src/app/showcase/doc/tabview/basicdoc.ts b/src/app/showcase/doc/tabview/basicdoc.ts index 738c3f90cf4..42edb39f5d2 100644 --- a/src/app/showcase/doc/tabview/basicdoc.ts +++ b/src/app/showcase/doc/tabview/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    TabView consists of one or more TabPanel elements.

     diff --git a/src/app/showcase/doc/tabview/closabledoc.ts b/src/app/showcase/doc/tabview/closabledoc.ts index 0d4b81837c7..c2fc1602d4e 100644 --- a/src/app/showcase/doc/tabview/closabledoc.ts +++ b/src/app/showcase/doc/tabview/closabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'closable-doc', - template: `
    + template: `

    When closable is enabled, a close icon is displayed to hide the tab.

     diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts index efe9b938a87..0ed68e374ad 100644 --- a/src/app/showcase/doc/tabview/controlleddoc.ts +++ b/src/app/showcase/doc/tabview/controlleddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'controlled-doc', - template: `
    + template: `

    TabView can be controlled programmatically using a binding to activeIndex update the active index.

     diff --git a/src/app/showcase/doc/tabview/customtemplatedoc.ts b/src/app/showcase/doc/tabview/customtemplatedoc.ts index e3cb3531928..7a2171caf32 100644 --- a/src/app/showcase/doc/tabview/customtemplatedoc.ts +++ b/src/app/showcase/doc/tabview/customtemplatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
    + template: `

    Header of a tab supports templating to place custom html content instead of strings as well.

     diff --git a/src/app/showcase/doc/tabview/disableddoc.ts b/src/app/showcase/doc/tabview/disableddoc.ts index 88a9903c28d..739b0111c11 100644 --- a/src/app/showcase/doc/tabview/disableddoc.ts +++ b/src/app/showcase/doc/tabview/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
    + template: `

    Setting disabled property to true of a TabPanel prevents user interaction.

     diff --git a/src/app/showcase/doc/tabview/importdoc.ts b/src/app/showcase/doc/tabview/importdoc.ts index 0462e48a029..9acd790dae5 100644 --- a/src/app/showcase/doc/tabview/importdoc.ts +++ b/src/app/showcase/doc/tabview/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tabview/scrollabledoc.ts b/src/app/showcase/doc/tabview/scrollabledoc.ts index 3ad5bb550b0..84e101e5c4f 100644 --- a/src/app/showcase/doc/tabview/scrollabledoc.ts +++ b/src/app/showcase/doc/tabview/scrollabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scrollable-doc', - template: `
    + template: `

    Adding scrollable property displays navigational buttons at each side to scroll between tabs.

     diff --git a/src/app/showcase/doc/tabview/styledoc.ts b/src/app/showcase/doc/tabview/styledoc.ts index 8dc282bc156..ddf3184f4d2 100644 --- a/src/app/showcase/doc/tabview/styledoc.ts +++ b/src/app/showcase/doc/tabview/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/tag/basicdoc.ts b/src/app/showcase/doc/tag/basicdoc.ts index 7be18789e85..aebe3912d87 100644 --- a/src/app/showcase/doc/tag/basicdoc.ts +++ b/src/app/showcase/doc/tag/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Label of the tag is defined with the value property.

     diff --git a/src/app/showcase/doc/tag/icondoc.ts b/src/app/showcase/doc/tag/icondoc.ts index 98373dd6ab3..042d0b8d724 100644 --- a/src/app/showcase/doc/tag/icondoc.ts +++ b/src/app/showcase/doc/tag/icondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'icon-doc', - template: `
    + template: `

    A font icon next to the value can be displayed with the icon property.

     diff --git a/src/app/showcase/doc/tag/importdoc.ts b/src/app/showcase/doc/tag/importdoc.ts index 7b540bcb6f3..f3b9e6a4832 100644 --- a/src/app/showcase/doc/tag/importdoc.ts +++ b/src/app/showcase/doc/tag/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tag/pilldoc.ts b/src/app/showcase/doc/tag/pilldoc.ts index e2b57985a1a..235ab55d326 100644 --- a/src/app/showcase/doc/tag/pilldoc.ts +++ b/src/app/showcase/doc/tag/pilldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'pill-doc', - template: `
    + template: `

    Enabling rounded, displays a tag as a pill.

     diff --git a/src/app/showcase/doc/tag/severitydoc.ts b/src/app/showcase/doc/tag/severitydoc.ts index e65b16cdc35..b1102408bdf 100644 --- a/src/app/showcase/doc/tag/severitydoc.ts +++ b/src/app/showcase/doc/tag/severitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `
    + template: `

    Severity defines the color of the tag, possible values are success, info, warning and danger in addition to the default theme color.

     diff --git a/src/app/showcase/doc/tag/styledoc.ts b/src/app/showcase/doc/tag/styledoc.ts index c30217c0c14..7d96b4ef4cd 100644 --- a/src/app/showcase/doc/tag/styledoc.ts +++ b/src/app/showcase/doc/tag/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/tag/templatedoc.ts b/src/app/showcase/doc/tag/templatedoc.ts index fc3518f88c6..e2a1c0b3102 100644 --- a/src/app/showcase/doc/tag/templatedoc.ts +++ b/src/app/showcase/doc/tag/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tag-template-demo', - template: `
    + template: `

    Children of the component are passed as the content for templating.

     diff --git a/src/app/showcase/doc/terminal/basicdoc.ts b/src/app/showcase/doc/terminal/basicdoc.ts index 964f56730c5..152a2f8ebac 100644 --- a/src/app/showcase/doc/terminal/basicdoc.ts +++ b/src/app/showcase/doc/terminal/basicdoc.ts @@ -5,7 +5,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Commands are processed using observables via the TerminalService. Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function.

     diff --git a/src/app/showcase/doc/terminal/importdoc.ts b/src/app/showcase/doc/terminal/importdoc.ts index 2660b0fd8fc..661fc41cdf9 100644 --- a/src/app/showcase/doc/terminal/importdoc.ts +++ b/src/app/showcase/doc/terminal/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/terminal/styledoc.ts b/src/app/showcase/doc/terminal/styledoc.ts index a9e9b418e19..84e2359267d 100644 --- a/src/app/showcase/doc/terminal/styledoc.ts +++ b/src/app/showcase/doc/terminal/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/theming/architecturedoc.ts b/src/app/showcase/doc/theming/architecturedoc.ts index 70871c2527d..3e68d668b69 100644 --- a/src/app/showcase/doc/theming/architecturedoc.ts +++ b/src/app/showcase/doc/theming/architecturedoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'architecture-doc', - template: `
    + template: `

    Note: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new diff --git a/src/app/showcase/doc/theming/builtinthemesdoc.ts b/src/app/showcase/doc/theming/builtinthemesdoc.ts index a92cb3efc67..c6f39aa8c3c 100644 --- a/src/app/showcase/doc/theming/builtinthemesdoc.ts +++ b/src/app/showcase/doc/theming/builtinthemesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'builtin-themes-doc', - template: `

    + template: `

    PrimeNG ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator diff --git a/src/app/showcase/doc/theming/cssvariablesdoc.ts b/src/app/showcase/doc/theming/cssvariablesdoc.ts index 7438fe33cb2..95e242598a8 100644 --- a/src/app/showcase/doc/theming/cssvariablesdoc.ts +++ b/src/app/showcase/doc/theming/cssvariablesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'css-variables-doc', - template: `

    + template: `

    Each PrimeNG theme exports numerous CSS variables, refer to Colors page for more details.

     diff --git a/src/app/showcase/doc/theming/customthemedoc.ts b/src/app/showcase/doc/theming/customthemedoc.ts index 7dd6b461a74..82856b25d5d 100644 --- a/src/app/showcase/doc/theming/customthemedoc.ts +++ b/src/app/showcase/doc/theming/customthemedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-theme-doc', - template: `
    + template: `

    Themes are created with SASS using the primeng-sass-theme project available at github. This repository contains all the scss files for the components and the diff --git a/src/app/showcase/doc/theming/primeflexdoc.ts b/src/app/showcase/doc/theming/primeflexdoc.ts index 123ab54292c..441ea1b825a 100644 --- a/src/app/showcase/doc/theming/primeflexdoc.ts +++ b/src/app/showcase/doc/theming/primeflexdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'primeflex-doc', - template: `

    + template: `

    PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeNG can be used with any CSS utility library like bootstrap and tailwind diff --git a/src/app/showcase/doc/theming/scalingdoc.ts b/src/app/showcase/doc/theming/scalingdoc.ts index 626a32f8c56..df04c67c86b 100644 --- a/src/app/showcase/doc/theming/scalingdoc.ts +++ b/src/app/showcase/doc/theming/scalingdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scaling-doc', - template: `

    + template: `

    PrimeNG utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. Code diff --git a/src/app/showcase/doc/theming/scopedcssdoc.ts b/src/app/showcase/doc/theming/scopedcssdoc.ts index f3b482f7123..70cb23299d0 100644 --- a/src/app/showcase/doc/theming/scopedcssdoc.ts +++ b/src/app/showcase/doc/theming/scopedcssdoc.ts @@ -16,7 +16,7 @@ import { Code } from '../../domain/code'; } ` ], - template: `

    + template: `

    Theming styles the components globally, in case you require to change the style of a certain component use ::ng-deep.

     diff --git a/src/app/showcase/doc/theming/switchthemesdoc.ts b/src/app/showcase/doc/theming/switchthemesdoc.ts index 08d526e36d6..f271db9e55e 100644 --- a/src/app/showcase/doc/theming/switchthemesdoc.ts +++ b/src/app/showcase/doc/theming/switchthemesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'switch-themes-doc', - template: `
    + template: `

    Themes can be switched on-the-fly so that users of your app can choose their own theme. We have created a video tutorial that goes through the steps.

     diff --git a/src/app/showcase/doc/theming/utilsdoc.ts b/src/app/showcase/doc/theming/utilsdoc.ts index a148a335119..d6ef4f95171 100644 --- a/src/app/showcase/doc/theming/utilsdoc.ts +++ b/src/app/showcase/doc/theming/utilsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'utils-doc', - template: `
    + template: `

    A couple of utility classes are provided as a solution to common requirements.

     diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts index 8d0f353fe08..07f4e74cfcc 100644 --- a/src/app/showcase/doc/tieredmenu/basicdoc.ts +++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    TieredMenu requires a collection of menuitems as its model.

     diff --git a/src/app/showcase/doc/tieredmenu/importdoc.ts b/src/app/showcase/doc/tieredmenu/importdoc.ts index f31982cba48..c265a584b17 100644 --- a/src/app/showcase/doc/tieredmenu/importdoc.ts +++ b/src/app/showcase/doc/tieredmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts index b7d2e491577..2b4402d9b12 100644 --- a/src/app/showcase/doc/tieredmenu/popupdoc.ts +++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'popup-doc', - template: `
    + template: `

    Popup mode is enabled by adding popup property and calling toggle method with an event of the target.

     diff --git a/src/app/showcase/doc/tieredmenu/styledoc.ts b/src/app/showcase/doc/tieredmenu/styledoc.ts index 9e0de3e1d78..afccab220c2 100644 --- a/src/app/showcase/doc/tieredmenu/styledoc.ts +++ b/src/app/showcase/doc/tieredmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/timeline/alignmentdoc.ts b/src/app/showcase/doc/timeline/alignmentdoc.ts index 76adf1c081c..1e67049ea00 100644 --- a/src/app/showcase/doc/timeline/alignmentdoc.ts +++ b/src/app/showcase/doc/timeline/alignmentdoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'alignment-doc', - template: `
    + template: `

    Content location relative the line is defined with the align property.

     diff --git a/src/app/showcase/doc/timeline/basicdoc.ts b/src/app/showcase/doc/timeline/basicdoc.ts index 82d1a09c5b7..7dc9d9ee5be 100644 --- a/src/app/showcase/doc/timeline/basicdoc.ts +++ b/src/app/showcase/doc/timeline/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that diff --git a/src/app/showcase/doc/timeline/horizontaldoc.ts b/src/app/showcase/doc/timeline/horizontaldoc.ts index 21e328f9d19..e296d5468bb 100644 --- a/src/app/showcase/doc/timeline/horizontaldoc.ts +++ b/src/app/showcase/doc/timeline/horizontaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'horizontal-doc', - template: `

    + template: `

    TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.

     diff --git a/src/app/showcase/doc/timeline/importdoc.ts b/src/app/showcase/doc/timeline/importdoc.ts index 5fe95a8b865..629411ae6dc 100644 --- a/src/app/showcase/doc/timeline/importdoc.ts +++ b/src/app/showcase/doc/timeline/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/timeline/oppositedoc.ts b/src/app/showcase/doc/timeline/oppositedoc.ts index 1470c805d66..bf53ac3aeed 100644 --- a/src/app/showcase/doc/timeline/oppositedoc.ts +++ b/src/app/showcase/doc/timeline/oppositedoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'opposite-doc', - template: `
    + template: `

    Additional content at the other side of the line can be provided with the opposite property.

     diff --git a/src/app/showcase/doc/timeline/styledoc.ts b/src/app/showcase/doc/timeline/styledoc.ts index 186cc957482..b599e3a80b9 100644 --- a/src/app/showcase/doc/timeline/styledoc.ts +++ b/src/app/showcase/doc/timeline/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/timeline/templatedoc.ts b/src/app/showcase/doc/timeline/templatedoc.ts index ec4eec26256..adebccf78ad 100644 --- a/src/app/showcase/doc/timeline/templatedoc.ts +++ b/src/app/showcase/doc/timeline/templatedoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'template-doc', - template: `
    + template: `

    Sample implementation with custom content and styled markers.

     diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts index ae6334cb3ca..c1dd2aefcca 100644 --- a/src/app/showcase/doc/toast/animationdoc.ts +++ b/src/app/showcase/doc/toast/animationdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animation-doc', - template: `
    + template: `

    Transition of the animations can be customized using the showTransitionOptions, hideTransitionOptions, showTransformOptions and hideTransformOptions properties.

     diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts index 1ebf880bfc3..74bdc5709fb 100644 --- a/src/app/showcase/doc/toast/basicdoc.ts +++ b/src/app/showcase/doc/toast/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Toasts are displayed by calling the add and addAll method provided by the messageService. A single toast is specified by the Message interface that defines various properties such as severity, diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts index 3aa2987eb81..ee29bcf61b1 100644 --- a/src/app/showcase/doc/toast/cleardoc.ts +++ b/src/app/showcase/doc/toast/cleardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'clear-doc', - template: `

    + template: `

    Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear function of the messageService. Calling it without any arguments, removes all displayed messages whereas diff --git a/src/app/showcase/doc/toast/importdoc.ts b/src/app/showcase/doc/toast/importdoc.ts index ca5c8aae619..ea8df8d21a1 100644 --- a/src/app/showcase/doc/toast/importdoc.ts +++ b/src/app/showcase/doc/toast/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

    + template: `
    ` diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts index 86299b7b154..2977bd3b453 100644 --- a/src/app/showcase/doc/toast/lifedoc.ts +++ b/src/app/showcase/doc/toast/lifedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'life-doc', - template: `
    + template: `

    A toast disappears after 3000ms by default, set the life option on either the message or toast to override this.

     diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts index 6e15f9c2618..a4b26c192eb 100644 --- a/src/app/showcase/doc/toast/multipledoc.ts +++ b/src/app/showcase/doc/toast/multipledoc.ts @@ -4,13 +4,13 @@ import { Code } from '../../domain/code'; @Component({ selector: 'toast-multiple-demo', - template: `
    + template: `

    Multiple toasts are displayed by passing an array to the showAll method of the messageService.
    - +
    `, @@ -23,7 +23,7 @@ export class MultipleDoc { constructor(private messageService: MessageService) {} - showMultiple() { + show() { this.messageService.addAll([ { severity: 'success', summary: 'Message 1', detail: 'Message Content' }, { severity: 'info', summary: 'Message 2', detail: 'Message Content' }, @@ -34,11 +34,11 @@ export class MultipleDoc { code: Code = { basic: ` -`, +`, html: `
    - +
    `, typescript: ` import { Component } from '@angular/core'; @@ -52,7 +52,7 @@ import { MessageService } from 'primeng/api'; export class ToastMultipleDemo { constructor(private messageService: MessageService) {} - showMultiple() { + show() { this.messageService.addAll([ { severity: 'success', summary: 'Message 1', detail: 'Message Content' }, { severity: 'info', summary: 'Message 2', detail: 'Message Content' }, diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts index ee995f55ad0..b2aa1de0969 100644 --- a/src/app/showcase/doc/toast/positiondoc.ts +++ b/src/app/showcase/doc/toast/positiondoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'position-doc', - template: `
    + template: `

    Location of the toast is customized with the position property. Valid values are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right and center.

     diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts index e46506261f3..6dcf68bd718 100644 --- a/src/app/showcase/doc/toast/responsivedoc.ts +++ b/src/app/showcase/doc/toast/responsivedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'responsive-doc', - template: `
    + template: `

    Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts index 3f01e82d66d..933a5d6dc46 100644 --- a/src/app/showcase/doc/toast/severitydoc.ts +++ b/src/app/showcase/doc/toast/severitydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `

    + template: `

    The severity option specifies the type of the message. There are four types of messages: success, info, warn and error. The severity of the message is used to display the icon and the color of the diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts index 61ed93e79b6..527a90d32a5 100644 --- a/src/app/showcase/doc/toast/stickydoc.ts +++ b/src/app/showcase/doc/toast/stickydoc.ts @@ -4,13 +4,16 @@ import { Code } from '../../domain/code'; @Component({ selector: 'sticky-doc', - template: `

    + template: `

    A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically.
    - +
    + + +
    `, @@ -23,18 +26,28 @@ export class StickyDoc { constructor(private messageService: MessageService) {} - showSticky() { + show() { this.messageService.add({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true }); } + clear() { + this.messageService.clear(); + } + code: Code = { basic: ` -`, +
    + + +
    `, html: `
    - +
    + + +
    `, typescript: ` import { Component } from '@angular/core'; @@ -48,9 +61,13 @@ import { MessageService } from 'primeng/api'; export class ToastStickyDemo { constructor(private messageService: MessageService) {} - showSticky() { + show() { this.messageService.add({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true }); } + + clear() { + this.messageService.clear(); + } }` }; } diff --git a/src/app/showcase/doc/toast/styledoc.ts b/src/app/showcase/doc/toast/styledoc.ts index ca30bf9b56a..153953660e9 100644 --- a/src/app/showcase/doc/toast/styledoc.ts +++ b/src/app/showcase/doc/toast/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts index 71d226157bf..9e7b6fe3a5b 100644 --- a/src/app/showcase/doc/toast/targetdoc.ts +++ b/src/app/showcase/doc/toast/targetdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'target-doc', - template: `
    + template: `

    A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match.

     diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts index 82d216ad3e0..0143bec236c 100644 --- a/src/app/showcase/doc/toast/templatedoc.ts +++ b/src/app/showcase/doc/toast/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
    + template: `

    Templating allows customizing the content where the message instance is available as the implicit variable.

     @@ -39,19 +39,25 @@ export class TemplateDoc { @Input() title: string; + visible: boolean = false; + constructor(private messageService: MessageService) {} showConfirm() { - this.messageService.clear(); - this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' }); + if (!this.visible) { + this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' }); + this.visible = true; + } } onConfirm() { this.messageService.clear('confirm'); + this.visible = false; } onReject() { this.messageService.clear('confirm'); + this.visible = false; } code: Code = { @@ -111,8 +117,23 @@ import { MessageService } from 'primeng/api'; export class ToastTemplateDemo { constructor(private messageService: MessageService) {} - showSticky() { - this.messageService.add({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true }); + visible: boolean = false; + + showConfirm() { + if (!this.visible) { + this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' }); + this.visible = true; + } + } + + onConfirm() { + this.messageService.clear('confirm'); + this.visible = false; + } + + onReject() { + this.messageService.clear('confirm'); + this.visible = false; } }` }; diff --git a/src/app/showcase/doc/togglebutton/basicdoc.ts b/src/app/showcase/doc/togglebutton/basicdoc.ts index f737e5e6f50..9f49b2f2e47 100644 --- a/src/app/showcase/doc/togglebutton/basicdoc.ts +++ b/src/app/showcase/doc/togglebutton/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Two-way binding to a boolean property is defined using the standard ngModel directive.

     diff --git a/src/app/showcase/doc/togglebutton/customizeddoc.ts b/src/app/showcase/doc/togglebutton/customizeddoc.ts index 49bfa2165a6..0a110bceb17 100644 --- a/src/app/showcase/doc/togglebutton/customizeddoc.ts +++ b/src/app/showcase/doc/togglebutton/customizeddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'customized-doc', - template: `
    + template: `

    Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.

     diff --git a/src/app/showcase/doc/togglebutton/importdoc.ts b/src/app/showcase/doc/togglebutton/importdoc.ts index 7b2fe7dcb05..9ce0aa1fe3c 100644 --- a/src/app/showcase/doc/togglebutton/importdoc.ts +++ b/src/app/showcase/doc/togglebutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts index ff582429634..432fd9bf127 100644 --- a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
    + template: `

    ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

     diff --git a/src/app/showcase/doc/togglebutton/styledoc.ts b/src/app/showcase/doc/togglebutton/styledoc.ts index ebdb53ea3bb..908ddb264be 100644 --- a/src/app/showcase/doc/togglebutton/styledoc.ts +++ b/src/app/showcase/doc/togglebutton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts index 02ef2f8d597..b88b0796b10 100644 --- a/src/app/showcase/doc/toolbar/basicdoc.ts +++ b/src/app/showcase/doc/toolbar/basicdoc.ts @@ -4,9 +4,9 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `
    -

    Toolbar provides start, center and end templates to place content at these sections.

    +

    Toolbar is a grouping component for buttons and other content. Its content can be placed inside the start, center and end sections.
    diff --git a/src/app/showcase/doc/toolbar/importdoc.ts b/src/app/showcase/doc/toolbar/importdoc.ts index 249e1da3ac5..4c4d4fef1ee 100644 --- a/src/app/showcase/doc/toolbar/importdoc.ts +++ b/src/app/showcase/doc/toolbar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/toolbar/styledoc.ts b/src/app/showcase/doc/toolbar/styledoc.ts index fb4610c520f..6aebe1df836 100644 --- a/src/app/showcase/doc/toolbar/styledoc.ts +++ b/src/app/showcase/doc/toolbar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts new file mode 100644 index 00000000000..ce404b49c1a --- /dev/null +++ b/src/app/showcase/doc/toolbar/templatedoc.ts @@ -0,0 +1,136 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'template-doc', + template: `
    + +

    Content can also be placed using the start, center and end templates.

    +     +
    + + + + + + + + + Center + + + + + + + +
    + +
    ` +}) +export class TemplateDoc implements OnInit { + @Input() id: string; + + @Input() title: string; + + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'Update', + icon: 'pi pi-refresh' + }, + { + label: 'Delete', + icon: 'pi pi-times' + }, + { + label: 'Angular', + icon: 'pi pi-external-link', + url: 'http://angular.io' + }, + { + label: 'Router', + icon: 'pi pi-upload', + routerLink: '/fileupload' + } + ]; + } + + code: Code = { + basic: ` + + + + + + + + + Center + + + + + + +`, + + html: ` + + + + + + + + + + Center + + + + + + + +
    `, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; + +@Component({ + selector: 'toolbar-template-demo', + templateUrl: './toolbar-template-demo.html' +}) +export class ToolbarTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'Update', + icon: 'pi pi-refresh' + }, + { + label: 'Delete', + icon: 'pi pi-times' + }, + { + label: 'Angular', + icon: 'pi pi-external-link', + url: 'http://angular.io' + }, + { + label: 'Router', + icon: 'pi pi-upload', + routerLink: '/fileupload' + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/toolbar/toolbardoc.module.ts b/src/app/showcase/doc/toolbar/toolbardoc.module.ts index 371ae5556ca..35a075c075a 100644 --- a/src/app/showcase/doc/toolbar/toolbardoc.module.ts +++ b/src/app/showcase/doc/toolbar/toolbardoc.module.ts @@ -10,10 +10,11 @@ import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, ToolbarModule, RouterModule, ButtonModule, SplitButtonModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) export class ToolbarDocModule {} diff --git a/src/app/showcase/doc/tooltip/autohidedoc.ts b/src/app/showcase/doc/tooltip/autohidedoc.ts index 93341ba2466..1c23738b507 100644 --- a/src/app/showcase/doc/tooltip/autohidedoc.ts +++ b/src/app/showcase/doc/tooltip/autohidedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'auto-hide-doc', - template: `
    + template: `

    Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior.

     diff --git a/src/app/showcase/doc/tooltip/basicdoc.ts b/src/app/showcase/doc/tooltip/basicdoc.ts index 0e305ccb6cd..6a678d10120 100644 --- a/src/app/showcase/doc/tooltip/basicdoc.ts +++ b/src/app/showcase/doc/tooltip/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Tooltip is applied to an element with pTooltip directive where the value of the directive defines the text to display.

     diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts index ab7842275fd..f209064018e 100644 --- a/src/app/showcase/doc/tooltip/delaydoc.ts +++ b/src/app/showcase/doc/tooltip/delaydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'delay-doc', - template: `
    + template: `

    Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.

     diff --git a/src/app/showcase/doc/tooltip/eventdoc.ts b/src/app/showcase/doc/tooltip/eventdoc.ts index 2ba5167a190..240a90e0ee2 100644 --- a/src/app/showcase/doc/tooltip/eventdoc.ts +++ b/src/app/showcase/doc/tooltip/eventdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'event-doc', - template: `
    + template: `

    Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.

     diff --git a/src/app/showcase/doc/tooltip/importdoc.ts b/src/app/showcase/doc/tooltip/importdoc.ts index 2c122491e67..dab0f159082 100644 --- a/src/app/showcase/doc/tooltip/importdoc.ts +++ b/src/app/showcase/doc/tooltip/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tooltip/optionsdoc.ts b/src/app/showcase/doc/tooltip/optionsdoc.ts index f63027efb9d..082c51ac623 100644 --- a/src/app/showcase/doc/tooltip/optionsdoc.ts +++ b/src/app/showcase/doc/tooltip/optionsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'options-doc', - template: `
    + template: `

    Tooltip is also configurable by using tooltipOptions property.

     diff --git a/src/app/showcase/doc/tooltip/positiondoc.ts b/src/app/showcase/doc/tooltip/positiondoc.ts index f92fcdb2283..adc681a80fa 100644 --- a/src/app/showcase/doc/tooltip/positiondoc.ts +++ b/src/app/showcase/doc/tooltip/positiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'position-doc', - template: `
    + template: `

    Position of the tooltip is specified using tooltipPosition attribute. Valid values are top, bottom, right and left. Default position of the tooltip is right.

     diff --git a/src/app/showcase/doc/tooltip/styledoc.ts b/src/app/showcase/doc/tooltip/styledoc.ts index c869502c55d..f65e91c5b7a 100644 --- a/src/app/showcase/doc/tooltip/styledoc.ts +++ b/src/app/showcase/doc/tooltip/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts index e55c9ce76be..ab0e652d663 100644 --- a/src/app/showcase/doc/tooltip/templatedoc.ts +++ b/src/app/showcase/doc/tooltip/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'options-doc', - template: `
    + template: `

    Tooltip can use either a string or a TemplateRef.

     diff --git a/src/app/showcase/doc/tree/basicdoc.ts b/src/app/showcase/doc/tree/basicdoc.ts index d365d88306c..f21aa4e4e23 100644 --- a/src/app/showcase/doc/tree/basicdoc.ts +++ b/src/app/showcase/doc/tree/basicdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    Tree component requires an array of TreeNode objects as its value.

     diff --git a/src/app/showcase/doc/tree/checkboxdoc.ts b/src/app/showcase/doc/tree/checkboxdoc.ts index a4fb2de11fd..ea7d44e97fe 100644 --- a/src/app/showcase/doc/tree/checkboxdoc.ts +++ b/src/app/showcase/doc/tree/checkboxdoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'checkbox-doc', - template: `
    + template: `

    Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

     diff --git a/src/app/showcase/doc/tree/contextmenudoc.ts b/src/app/showcase/doc/tree/contextmenudoc.ts index 32880927ab3..09473c14e44 100644 --- a/src/app/showcase/doc/tree/contextmenudoc.ts +++ b/src/app/showcase/doc/tree/contextmenudoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'context-menu-doc', - template: `
    + template: `

    Tree requires a collection of TreeNode instances as a value.

     diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts index e3089f4ba73..101ce9d9673 100644 --- a/src/app/showcase/doc/tree/controlleddoc.ts +++ b/src/app/showcase/doc/tree/controlleddoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'controlled-doc', - template: `
    + template: `

    Tree requires a collection of TreeNode instances as a value.

     diff --git a/src/app/showcase/doc/tree/dragdropdoc.ts b/src/app/showcase/doc/tree/dragdropdoc.ts index a0d903d4113..d5c7aa281bc 100644 --- a/src/app/showcase/doc/tree/dragdropdoc.ts +++ b/src/app/showcase/doc/tree/dragdropdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'drag-drop-doc', - template: `
    + template: `

    Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop.

     diff --git a/src/app/showcase/doc/tree/eventdoc.ts b/src/app/showcase/doc/tree/eventdoc.ts index 2df19a0f6ca..a87c540a6ee 100644 --- a/src/app/showcase/doc/tree/eventdoc.ts +++ b/src/app/showcase/doc/tree/eventdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'event-doc', - template: `
    + template: `

    An event is provided for each type of user interaction such as expand, collapse and selection.

     diff --git a/src/app/showcase/doc/tree/filterdoc.ts b/src/app/showcase/doc/tree/filterdoc.ts index d0de790364d..f3cd6e42d9f 100644 --- a/src/app/showcase/doc/tree/filterdoc.ts +++ b/src/app/showcase/doc/tree/filterdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'filter-doc', - template: `
    + template: `

    Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define diff --git a/src/app/showcase/doc/tree/importdoc.ts b/src/app/showcase/doc/tree/importdoc.ts index c1ba7ba1105..b03f2a55d1e 100644 --- a/src/app/showcase/doc/tree/importdoc.ts +++ b/src/app/showcase/doc/tree/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

    + template: `
    ` diff --git a/src/app/showcase/doc/tree/lazydoc.ts b/src/app/showcase/doc/tree/lazydoc.ts index bb8a9afd6ef..9eb16d09614 100644 --- a/src/app/showcase/doc/tree/lazydoc.ts +++ b/src/app/showcase/doc/tree/lazydoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'lazy-demo', - template: `
    + template: `

    Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method.

     diff --git a/src/app/showcase/doc/tree/multipledoc.ts b/src/app/showcase/doc/tree/multipledoc.ts index 14ee04b6ff8..52b13e2b478 100644 --- a/src/app/showcase/doc/tree/multipledoc.ts +++ b/src/app/showcase/doc/tree/multipledoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'multiple-doc', - template: `
    + template: `

    More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with diff --git a/src/app/showcase/doc/tree/singledoc.ts b/src/app/showcase/doc/tree/singledoc.ts index 97aac77eabb..ee5b3d8228a 100644 --- a/src/app/showcase/doc/tree/singledoc.ts +++ b/src/app/showcase/doc/tree/singledoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'single-doc', - template: `

    + template: `

    Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding.

     diff --git a/src/app/showcase/doc/tree/styledoc.ts b/src/app/showcase/doc/tree/styledoc.ts index d24bae6ac1e..d12a25506ac 100644 --- a/src/app/showcase/doc/tree/styledoc.ts +++ b/src/app/showcase/doc/tree/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/tree/templatedoc.ts b/src/app/showcase/doc/tree/templatedoc.ts index f1ebe74953c..035469d10dc 100644 --- a/src/app/showcase/doc/tree/templatedoc.ts +++ b/src/app/showcase/doc/tree/templatedoc.ts @@ -4,14 +4,14 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
    + template: `

    Custom node content instead of a node label is defined with the pTemplate property.
    - {{ node.label }} + {{ node.label }} {{ node.label }} @@ -57,7 +57,7 @@ export class TemplateDoc implements OnInit { basic: ` - {{ node.label }} + {{ node.label }} {{ node.label }} @@ -68,7 +68,7 @@ export class TemplateDoc implements OnInit {
    - {{ node.label }} + {{ node.label }} {{ node.label }} diff --git a/src/app/showcase/doc/treeselect/basicdoc.ts b/src/app/showcase/doc/treeselect/basicdoc.ts index 4a0f9753ba7..fb3dad43e92 100644 --- a/src/app/showcase/doc/treeselect/basicdoc.ts +++ b/src/app/showcase/doc/treeselect/basicdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    TreeSelect is used as a controlled component with ng-model directive along with an options collection. Internally Tree component is used so the options model is based on TreeNode API.

    In single selection mode, value binding should be the key value of a node.

    diff --git a/src/app/showcase/doc/treeselect/checkboxdoc.ts b/src/app/showcase/doc/treeselect/checkboxdoc.ts index c20e702aea1..db1d9fb03f6 100644 --- a/src/app/showcase/doc/treeselect/checkboxdoc.ts +++ b/src/app/showcase/doc/treeselect/checkboxdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'checkbox-doc', - template: `
    + template: `

    Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

     diff --git a/src/app/showcase/doc/treeselect/disableddoc.ts b/src/app/showcase/doc/treeselect/disableddoc.ts index f2f1c1c96a4..21ee99f023a 100644 --- a/src/app/showcase/doc/treeselect/disableddoc.ts +++ b/src/app/showcase/doc/treeselect/disableddoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'disabled-doc', - template: `
    + template: `

    When disabled is present, the element cannot be edited and focused.

     diff --git a/src/app/showcase/doc/treeselect/filterdoc.ts b/src/app/showcase/doc/treeselect/filterdoc.ts index 3896126217a..c19186c5a80 100644 --- a/src/app/showcase/doc/treeselect/filterdoc.ts +++ b/src/app/showcase/doc/treeselect/filterdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'filter-doc', - template: `
    + template: `

    Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define diff --git a/src/app/showcase/doc/treeselect/floatlabeldoc.ts b/src/app/showcase/doc/treeselect/floatlabeldoc.ts index 5fb53238aa1..afc9a6430c2 100644 --- a/src/app/showcase/doc/treeselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/treeselect/floatlabeldoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'floatlabel-doc', - template: `

    + template: `

    A floating label appears on top of the input field when focused.

     diff --git a/src/app/showcase/doc/treeselect/importdoc.ts b/src/app/showcase/doc/treeselect/importdoc.ts index ba937f5ad59..cd15e24025a 100644 --- a/src/app/showcase/doc/treeselect/importdoc.ts +++ b/src/app/showcase/doc/treeselect/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/treeselect/invaliddoc.ts b/src/app/showcase/doc/treeselect/invaliddoc.ts index 398ca0e66df..94811de600b 100644 --- a/src/app/showcase/doc/treeselect/invaliddoc.ts +++ b/src/app/showcase/doc/treeselect/invaliddoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'invalid-doc', - template: `
    + template: `

    Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

     diff --git a/src/app/showcase/doc/treeselect/multipledoc.ts b/src/app/showcase/doc/treeselect/multipledoc.ts index 242f5bf77af..a16c9503f3e 100644 --- a/src/app/showcase/doc/treeselect/multipledoc.ts +++ b/src/app/showcase/doc/treeselect/multipledoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'multiple-doc', - template: `
    + template: `

    More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with diff --git a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts index a814ee74f51..9a1e52893e4 100644 --- a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'reactive-forms-doc', - template: `

    + template: `

    TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

     diff --git a/src/app/showcase/doc/treeselect/styledoc.ts b/src/app/showcase/doc/treeselect/styledoc.ts index 386fbba77f9..33e55fec73a 100644 --- a/src/app/showcase/doc/treeselect/styledoc.ts +++ b/src/app/showcase/doc/treeselect/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts index 8cf86b0f606..6c5ecf94ac3 100644 --- a/src/app/showcase/doc/treetable/basicdoc.ts +++ b/src/app/showcase/doc/treetable/basicdoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    TreeTable requires a collection of TreeNode instances as a value components as children for the representation.

     diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts index a8a079f3b46..aa0c36119b9 100644 --- a/src/app/showcase/doc/treetable/columngroupdoc.ts +++ b/src/app/showcase/doc/treetable/columngroupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'column-group-doc', - template: `
    + template: `
    diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts index dd41e55ecca..6cebd3af3af 100644 --- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts +++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'resize-expand-doc', - template: `
    + template: `

    Setting columnResizeMode as expand changes the table width as well.

     diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts index ed841411a9e..e7e2a24df1a 100644 --- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts +++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'resize-fit-doc', - template: `
    + template: `

    Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.

     diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts index c77a9024926..d2794dc3af8 100644 --- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts +++ b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Code } from '../../domain/code'; import { NodeService } from '../../service/nodeservice'; @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'resize-scrollable-doc', - template: `
    + template: `

    To utilize the column resize modes with a scrollable TreeTable, a colgroup template must be defined. The default value of scrollHeight is "flex," it can also be set as a string value.

     diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts index eb193a8f408..c1a293ceef4 100644 --- a/src/app/showcase/doc/treetable/columntoggledoc.ts +++ b/src/app/showcase/doc/treetable/columntoggledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'column-toggle-doc', - template: `
    + template: `

    Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.

     diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts index eff89f1fa4e..b5b045fc1b2 100644 --- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts +++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'conditional-style-doc', - template: `
    + template: `

    Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.

     diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts index 5b4781833b2..fd8fcc6978e 100644 --- a/src/app/showcase/doc/treetable/contextmenudoc.ts +++ b/src/app/showcase/doc/treetable/contextmenudoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'context-menu-doc', - template: `
    + template: `

    TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection properties to control the selection via the menu.

     diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts index 68d0dc5a132..e0931b4d8b5 100644 --- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'dynamic-columns-doc', - template: `
    + template: `

    Columns can be created programmatically.

     diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts index 9aaf694e1aa..6291821360b 100644 --- a/src/app/showcase/doc/treetable/editdoc.ts +++ b/src/app/showcase/doc/treetable/editdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'edit-doc', - template: `
    + template: `

    Incell editing is enabled by defining input elements with treeTableCellEditor.

     @@ -25,7 +25,7 @@ interface Column {
    - - - - @@ -46,7 +62,8 @@ - + diff --git a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts index 83f3c71c6e7..e2e9317c09e 100644 --- a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts @@ -1,6 +1,9 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit, ViewContainerRef } from '@angular/core'; -import { Router } from '@angular/router'; import { Location } from '@angular/common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewContainerRef } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subscription } from 'rxjs'; +import { AppConfig } from 'src/app/showcase/domain/appconfig'; +import { AppConfigService } from 'src/app/showcase/service/appconfigservice'; @Component({ selector: 'app-docapitable', @@ -29,9 +32,20 @@ export class AppDocApiTable implements OnInit { @Input() isInterface: boolean = false; - constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location) {} + config: AppConfig; + + subscription: Subscription; - ngOnInit() {} + constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, public configService: AppConfigService, private cd: ChangeDetectorRef) {} + + ngOnInit() { + this.config = this.configService.config; + + this.subscription = this.configService.configUpdate$.subscribe((config) => { + this.config = config; + this.cd.markForCheck(); + }); + } navigate(event, param) { if (typeof window !== undefined) { @@ -106,4 +120,10 @@ export class AppDocApiTable implements OnInit { label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); } } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } } diff --git a/src/app/showcase/layout/topbar/app.topbar.component.html b/src/app/showcase/layout/topbar/app.topbar.component.html index 53fb68647bb..be91c04e780 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.html +++ b/src/app/showcase/layout/topbar/app.topbar.component.html @@ -8,21 +8,29 @@
    • - +
    • - +
      • +
    • + + + +
    • diff --git a/src/app/showcase/pages/contextmenu/contextmenudemo.ts b/src/app/showcase/pages/contextmenu/contextmenudemo.ts index 1499929dbec..dc02fae806f 100755 --- a/src/app/showcase/pages/contextmenu/contextmenudemo.ts +++ b/src/app/showcase/pages/contextmenu/contextmenudemo.ts @@ -26,11 +26,6 @@ export class ContextMenuDemo { label: 'Document', component: DocumentDoc }, - { - id: 'triggerevent', - label: 'Trigger Event', - component: TriggerEventDoc - }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/image/imagedemo.ts b/src/app/showcase/pages/image/imagedemo.ts index 281031d3204..fe3ef29e6ba 100755 --- a/src/app/showcase/pages/image/imagedemo.ts +++ b/src/app/showcase/pages/image/imagedemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/Image/importdoc'; -import { StyleDoc } from '../../doc/Image/styledoc'; -import { BasicDoc } from '../../doc/Image/basicdoc'; -import { TemplateDoc } from '../../doc/Image/templatedoc'; import { AccessibilityDoc } from '../../doc/Image/accessibilitydoc'; +import { BasicDoc } from '../../doc/Image/basicdoc'; +import { ImportDoc } from '../../doc/Image/importdoc'; import { PreviewDoc } from '../../doc/Image/previewdoc'; import { PreviewImageSourceDoc } from '../../doc/Image/previewimagesourcedoc'; +import { StyleDoc } from '../../doc/Image/styledoc'; +import { TemplateDoc } from '../../doc/Image/templatedoc'; @Component({ templateUrl: './imagedemo.html' @@ -22,19 +22,19 @@ export class ImageDemo { label: 'Basic', component: BasicDoc }, - { - id: 'templates', - label: 'Indicator Template', - component: TemplateDoc - }, { id: 'preview', label: 'Preview', component: PreviewDoc }, + { + id: 'templates', + label: 'Indicator', + component: TemplateDoc + }, { id: 'preview-image-source', - label: 'Preview Image Source', + label: 'Image Source', component: PreviewImageSourceDoc }, { diff --git a/src/app/showcase/pages/landing/landing.component.html b/src/app/showcase/pages/landing/landing.component.html index b1070235503..d2ad54f1f3c 100644 --- a/src/app/showcase/pages/landing/landing.component.html +++ b/src/app/showcase/pages/landing/landing.component.html @@ -35,6 +35,12 @@ Designer
      • +
    • + + primevue designer + UI Kit + +
    • Primeng templates @@ -43,21 +49,22 @@
      • - + - + + + + @@ -1296,7 +1303,7 @@
      Customers
    • - Examples
    @@ -1305,11 +1312,11 @@
    Customers
    • Support
    • - Forum
    • - Discord
    • @@ -1325,32 +1332,32 @@
      Customers
      • Resources
      • - PrimeTV
      • - Store
      • - Source Code
      • - Twitter
      • - Newsletter
      • - PrimeGear
      • - Contact Us
        • @@ -1366,7 +1373,7 @@
        Customers
      • - Designer
      • @@ -1386,15 +1393,15 @@
        Customers
        primeng logo
        - - - diff --git a/src/app/showcase/pages/slidemenu/slidemenudemo-routing.module.ts b/src/app/showcase/pages/slidemenu/slidemenudemo-routing.module.ts deleted file mode 100755 index d1b12b4832f..00000000000 --- a/src/app/showcase/pages/slidemenu/slidemenudemo-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { SlideMenuDemo } from './slidemenudemo'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: SlideMenuDemo }])], - exports: [RouterModule] -}) -export class SlideMenuDemoRoutingModule {} diff --git a/src/app/showcase/pages/slidemenu/slidemenudemo.html b/src/app/showcase/pages/slidemenu/slidemenudemo.html deleted file mode 100755 index 8e80388898c..00000000000 --- a/src/app/showcase/pages/slidemenu/slidemenudemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/slidemenu/slidemenudemo.module.ts b/src/app/showcase/pages/slidemenu/slidemenudemo.module.ts deleted file mode 100755 index 9649ab172bd..00000000000 --- a/src/app/showcase/pages/slidemenu/slidemenudemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { SlideMenuDocModule } from '../../doc/slidemenu/slidemenudoc.module'; -import { SlideMenuDemo } from './slidemenudemo'; -import { SlideMenuDemoRoutingModule } from './slidemenudemo-routing.module'; - -@NgModule({ - imports: [CommonModule, SlideMenuDemoRoutingModule, SlideMenuDocModule], - declarations: [SlideMenuDemo] -}) -export class SlideMenuDemoModule {} diff --git a/src/app/showcase/pages/slidemenu/slidemenudemo.ts b/src/app/showcase/pages/slidemenu/slidemenudemo.ts deleted file mode 100755 index 9420d2829ca..00000000000 --- a/src/app/showcase/pages/slidemenu/slidemenudemo.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component } from '@angular/core'; -import { PopupDoc } from '../../doc/slidemenu/popupdoc'; -import { BasicDoc } from '../../doc/slidemenu/basicdoc'; -import { ImportDoc } from '../../doc/slidemenu/importdoc'; -import { StyleDoc } from '../../doc/slidemenu/styledoc'; -import { AccessibilityDoc } from '../../doc/slidemenu/accessibilitydoc'; - -@Component({ - templateUrl: './slidemenudemo.html' -}) -export class SlideMenuDemo { - docs = [ - { - id: 'import', - label: 'Import', - component: ImportDoc - }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, - { - id: 'popup', - label: 'Popup', - component: PopupDoc - }, - { - id: 'style', - label: 'Style', - component: StyleDoc - }, - { - id: 'accessibility', - label: 'Accessibility', - component: AccessibilityDoc - } - ]; -} diff --git a/src/app/showcase/pages/team/team.component.html b/src/app/showcase/pages/team/team.component.html index 5d6e9ac418c..b66a623da4d 100644 --- a/src/app/showcase/pages/team/team.component.html +++ b/src/app/showcase/pages/team/team.component.html @@ -72,11 +72,6 @@

        Meet the Team

        Kerem Yıldan UI/UX Designer
        -
        - UlaÅŸ Turan - UlaÅŸ Turan - Front-End Developer -
        Buğra Beydüz Buğra Beydüz @@ -84,7 +79,7 @@

        Meet the Team

        Alirıza Gücal - Ali Rıza Gücal + Alirıza Gücal Front-End Developer
        diff --git a/src/app/showcase/pages/toast/toastdemo.ts b/src/app/showcase/pages/toast/toastdemo.ts index 57b16e87cce..8b91eae600d 100755 --- a/src/app/showcase/pages/toast/toastdemo.ts +++ b/src/app/showcase/pages/toast/toastdemo.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/toast/importdoc'; -import { BasicDoc } from '../../doc/toast/basicdoc'; -import { SeverityDoc } from '../../doc/toast/severitydoc'; +import { AccessibilityDoc } from '../../doc/toast/accessibilitydoc'; import { AnimationDoc } from '../../doc/toast/animationdoc'; +import { BasicDoc } from '../../doc/toast/basicdoc'; +import { ClearDoc } from '../../doc/toast/cleardoc'; +import { ImportDoc } from '../../doc/toast/importdoc'; +import { LifeDoc } from '../../doc/toast/lifedoc'; import { MultipleDoc } from '../../doc/toast/multipledoc'; import { PositionDoc } from '../../doc/toast/positiondoc'; import { ResponsiveDoc } from '../../doc/toast/responsivedoc'; -import { LifeDoc } from '../../doc/toast/lifedoc'; +import { SeverityDoc } from '../../doc/toast/severitydoc'; import { StickyDoc } from '../../doc/toast/stickydoc'; import { StyleDoc } from '../../doc/toast/styledoc'; import { TargetDoc } from '../../doc/toast/targetdoc'; import { TemplateDoc } from '../../doc/toast/templatedoc'; -import { ClearDoc } from '../../doc/toast/cleardoc'; -import { AccessibilityDoc } from '../../doc/toast/accessibilitydoc'; @Component({ templateUrl: './toastdemo.html' @@ -54,16 +54,16 @@ export class ToastDemo { label: 'Life', component: LifeDoc }, + { + id: 'clear', + label: 'Clear', + component: ClearDoc + }, { id: 'sticky', label: 'Sticky', component: StickyDoc }, - { - id: 'clear', - label: 'Clearing Messages', - component: ClearDoc - }, { id: 'templating', label: 'Templating', diff --git a/src/app/showcase/pages/toolbar/toolbardemo.ts b/src/app/showcase/pages/toolbar/toolbardemo.ts index b2cc8cfa603..1fd22ed9c93 100755 --- a/src/app/showcase/pages/toolbar/toolbardemo.ts +++ b/src/app/showcase/pages/toolbar/toolbardemo.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { StyleDoc } from '../../doc/toolbar/styledoc'; import { ImportDoc } from '../../doc/toolbar/importdoc'; import { BasicDoc } from '../../doc/toolbar/basicdoc'; +import { TemplateDoc } from '../../doc/toolbar/templatedoc'; import { AccessibilityDoc } from '../../doc/toolbar/accessibilitydoc'; @Component({ @@ -19,6 +20,11 @@ export class ToolbarDemo { label: 'Basic', component: BasicDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, { id: 'style', label: 'Style', diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 7a1b6b67a97..f586907c134 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#284862; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1e1e1e; + border: 1px solid #383838; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-content .ql-editor { + background: #121212; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #64B5F6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1e1e1e; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1e1e1e; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1e1e1e; - border: 1px solid #383838; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-content .ql-editor { - background: #121212; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #64B5F6; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #121212; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #43a5f4; - border: 1px solid #43a5f4; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #43a5f4; - color: #212529; - border-color: #43a5f4; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #2396f2; - color: #212529; - border-color: #2396f2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #383838; - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #383838; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #43a5f4; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #43a5f4; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #43a5f4; - color: #212529; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #2396f2; - color: #212529; - border-color: #2396f2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(100, 181, 246, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 8772ca9216e..e546ddb70f3 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -171,14 +171,113 @@ --primary-900:#345035; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1e1e1e; + border: 1px solid #383838; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-content .ql-editor { + background: #121212; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #81C784; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1e1e1e; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1e1e1e; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1e1e1e; - border: 1px solid #383838; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-content .ql-editor { - background: #121212; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #81C784; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #121212; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #6abd6e; - border: 1px solid #6abd6e; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #81C784; - border: 1px solid #81C784; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #6abd6e; - color: #212529; - border-color: #6abd6e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #54b358; - color: #212529; - border-color: #54b358; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #383838; - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #383838; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #6abd6e; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #6abd6e; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #81C784; - border: 1px solid #81C784; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #6abd6e; - color: #212529; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #54b358; - color: #212529; - border-color: #54b358; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #81C784; - border: 1px solid #81C784; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(129, 199, 132, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 91fad0918d7..4bfba46874e 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -171,14 +171,113 @@ --primary-900:#665520; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1e1e1e; + border: 1px solid #383838; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-content .ql-editor { + background: #121212; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #FFD54F; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1e1e1e; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1e1e1e; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1e1e1e; - border: 1px solid #383838; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-content .ql-editor { - background: #121212; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #FFD54F; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #121212; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #ffcd2e; - border: 1px solid #ffcd2e; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #ffcd2e; - color: #212529; - border-color: #ffcd2e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #ffc50c; - color: #212529; - border-color: #ffc50c; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #383838; - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #383838; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #ffcd2e; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #ffcd2e; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #ffcd2e; - color: #212529; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #ffc50c; - color: #212529; - border-color: #ffc50c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 213, 79, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 342a7d09d18..b8583b53d1f 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -171,14 +171,113 @@ --primary-900:#4a2a50; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1e1e1e; + border: 1px solid #383838; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #383838; +} +.p-editor-container .p-editor-content .ql-editor { + background: #121212; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #BA68C8; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1e1e1e; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1e1e1e; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1e1e1e; - border: 1px solid #383838; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #383838; - } - .p-editor-container .p-editor-content .ql-editor { - background: #121212; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #BA68C8; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #121212; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #383838; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #b052c0; - border: 1px solid #b052c0; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid #383838; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #b052c0; - color: #ffffff; - border-color: #b052c0; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #a241b2; - color: #ffffff; - border-color: #a241b2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #383838; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #383838; - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #383838; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #b052c0; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #b052c0; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #b052c0; - color: #ffffff; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #a241b2; - color: #ffffff; - border-color: #a241b2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1e1e1e; - border: 1px solid #383838; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(186, 104, 200, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 53e36b4c3c0..d5506c42510 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#385366; } +.p-editor-container .p-editor-toolbar { + background: #2a323d; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f4b5b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2a323d; + border: 1px solid #3f4b5b; + box-shadow: none; + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #3f4b5b; +} +.p-editor-container .p-editor-content .ql-editor { + background: #20262e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #8dd0ff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #8dd0ff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #8dd0ff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #8dd0ff; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f19ea6; + } .p-dropdown-panel { background: #2a323d; @@ -893,14 +995,16 @@ color: #151515; background: #8dd0ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #64bfff; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #2a323d; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f19ea6; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1.5rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #2a323d; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #3f4b5b; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2a323d; - border: 1px solid #3f4b5b; - box-shadow: none; - border-radius: 4px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #3f4b5b; - } - .p-editor-container .p-editor-content .ql-editor { - background: #20262e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #8dd0ff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #8dd0ff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #8dd0ff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #8dd0ff; - } - .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #20262e; @@ -3165,295 +3171,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #2a323d; - border: 1px solid #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #2a323d; - border: 1px solid #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #56bdff; - border: 1px solid #56bdff; - color: #151515; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #2a323d; - border: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #151515; - background: #8dd0ff; - border: 1px solid #8dd0ff; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #56bdff; - color: #151515; - border-color: #56bdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #1dadff; - color: #151515; - border-color: #1dadff; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #3f4b5b; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #2a323d; - border-color: #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #3f4b5b; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #2a323d; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #3f4b5b; - padding: 1rem 1.25rem; - background: #2a323d; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #3f4b5b; - background: #2a323d; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #151515; - background: #56bdff; - border-color: #56bdff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #151515; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #56bdff; - border-color: #56bdff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #2a323d; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #151515; - background: #8dd0ff; - border: 1px solid #8dd0ff; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #56bdff; - color: #151515; - border-color: #56bdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #1dadff; - color: #151515; - border-color: #1dadff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.65; - color: #151515; - background: #8dd0ff; - border: 1px solid #8dd0ff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #151515; - background: #8dd0ff; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6263,6 +5980,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6365,9 +6085,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Vendor extensions to the designer enhanced bootstrap compatibility */ diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 79c82a82821..9b5a50efd09 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -171,14 +171,113 @@ --primary-900:#4e3d56; } +.p-editor-container .p-editor-toolbar { + background: #2a323d; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f4b5b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2a323d; + border: 1px solid #3f4b5b; + box-shadow: none; + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #3f4b5b; +} +.p-editor-container .p-editor-content .ql-editor { + background: #20262e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #c298d8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #c298d8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #c298d8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #c298d8; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f19ea6; + } .p-dropdown-panel { background: #2a323d; @@ -893,14 +995,16 @@ color: #151515; background: #c298d8; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #b07acd; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #2a323d; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f19ea6; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1.5rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #2a323d; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #3f4b5b; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2a323d; - border: 1px solid #3f4b5b; - box-shadow: none; - border-radius: 4px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #3f4b5b; - } - .p-editor-container .p-editor-content .ql-editor { - background: #20262e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #c298d8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #c298d8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #c298d8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #c298d8; - } - .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #20262e; @@ -3165,295 +3171,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #2a323d; - border: 1px solid #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #2a323d; - border: 1px solid #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #aa70c7; - border: 1px solid #aa70c7; - color: #151515; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #2a323d; - border: 1px solid #3f4b5b; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #151515; - background: #c298d8; - border: 1px solid #c298d8; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #aa70c7; - color: #151515; - border-color: #aa70c7; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #9954bb; - color: #151515; - border-color: #9954bb; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #3f4b5b; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #2a323d; - border-color: #3f4b5b; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #3f4b5b; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #2a323d; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #3f4b5b; - padding: 1rem 1.25rem; - background: #2a323d; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #3f4b5b; - background: #2a323d; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #151515; - background: #aa70c7; - border-color: #aa70c7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #151515; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #aa70c7; - border-color: #aa70c7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #2a323d; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #151515; - background: #c298d8; - border: 1px solid #c298d8; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #aa70c7; - color: #151515; - border-color: #aa70c7; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #9954bb; - color: #151515; - border-color: #9954bb; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.65; - color: #151515; - background: #c298d8; - border: 1px solid #c298d8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #151515; - background: #c298d8; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6263,6 +5980,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6365,9 +6085,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Vendor extensions to the designer enhanced bootstrap compatibility */ diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 32bc7156904..84d6266306e 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#003166; } +.p-editor-container .p-editor-toolbar { + background: #efefef; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: none; + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #212529; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #007bff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #007bff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #007bff; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #007bff; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #212529; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #212529; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #495057; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #dc3545; + } .p-dropdown-panel { background: #ffffff; @@ -893,14 +995,16 @@ color: #ffffff; background: #007bff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #0067d6; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #dc3545; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1.5rem; + color: #212529; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #efefef; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: none; - border-radius: 4px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #212529; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #007bff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #007bff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #007bff; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #007bff; - } - .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3165,295 +3171,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #efefef; - border: 1px solid #dee2e6; - color: #212529; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #212529; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #0069d9; - border: 1px solid #0069d9; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #efefef; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #007bff; - border: 1px solid #007bff; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #0069d9; - color: #ffffff; - border-color: #0069d9; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #0062cc; - color: #ffffff; - border-color: #0062cc; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #efefef; - border-color: #dee2e6; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #212529; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem 1.25rem; - background: #efefef; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #212529; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #0069d9; - border-color: #0069d9; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #0069d9; - border-color: #0069d9; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #efefef; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #007bff; - border: 1px solid #007bff; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #0069d9; - color: #ffffff; - border-color: #0069d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #0062cc; - color: #ffffff; - border-color: #0062cc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.65; - color: #ffffff; - background: #007bff; - border: 1px solid #007bff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: #212529; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #007bff; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6263,6 +5980,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6365,9 +6085,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Vendor extensions to the designer enhanced bootstrap compatibility */ diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index d55039fe4d7..d9cb372399d 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -171,14 +171,113 @@ --primary-900:#361846; } +.p-editor-container .p-editor-toolbar { + background: #efefef; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: none; + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #212529; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #212529; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #212529; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #883cae; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #883cae; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #883cae; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #883cae; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #212529; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #212529; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #495057; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #dc3545; + } .p-dropdown-panel { background: #ffffff; @@ -893,14 +995,16 @@ color: #ffffff; background: #883cae; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #703290; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #dc3545; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1.5rem; + color: #212529; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #efefef; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: none; - border-radius: 4px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #212529; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #212529; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #212529; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #883cae; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #883cae; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #883cae; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #883cae; - } - .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3165,295 +3171,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #efefef; - border: 1px solid #dee2e6; - color: #212529; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #212529; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #7a38a7; - border: 1px solid #7a38a7; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #efefef; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #883cae; - border: 1px solid #883cae; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #7a38a7; - color: #ffffff; - border-color: #7a38a7; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #68329e; - color: #ffffff; - border-color: #68329e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #efefef; - border-color: #dee2e6; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #212529; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem 1.25rem; - background: #efefef; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #212529; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #7a38a7; - border-color: #7a38a7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #7a38a7; - border-color: #7a38a7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #efefef; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #883cae; - border: 1px solid #883cae; - font-size: 1rem; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #7a38a7; - color: #ffffff; - border-color: #7a38a7; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #68329e; - color: #ffffff; - border-color: #68329e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.65; - color: #ffffff; - background: #883cae; - border: 1px solid #883cae; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #6c757d; - border: 1px solid #6c757d; - color: #ffffff; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: #212529; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #883cae; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6263,6 +5980,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6365,9 +6085,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Vendor extensions to the designer enhanced bootstrap compatibility */ diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 762530f07fe..e5efd5450d7 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -171,14 +171,113 @@ --primary-900:#003055; } +.p-editor-container .p-editor-toolbar { + background: #faf9f8; + border-top-right-radius: 2px; + border-top-left-radius: 2px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #a19f9d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #605e5c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #605e5c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #605e5c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; + border-radius: 2px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #323130; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #323130; + background: #f3f2f1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 0.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #a19f9d; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #323130; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #323130; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #323130; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #323130; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #0078d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #0078d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #0078d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #0078d4; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 2px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #323130; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #323130; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #605e5c; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #605e5c; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #a4252c; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #323130; background: #edebe9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #e1dfdd; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; - background: #f3f2f1; + background: #e1dfdd; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 0.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; - background: transparent; + background: #f3f2f1; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #a4252c; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 0.5rem; + color: #323130; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #faf9f8; - border-top-right-radius: 2px; - border-top-left-radius: 2px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #a19f9d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #605e5c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #605e5c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #605e5c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; - border-radius: 2px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #323130; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #323130; - background: #f3f2f1; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 0.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #a19f9d; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #323130; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #323130; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #323130; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #323130; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #0078d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #0078d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #0078d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #0078d4; - } - .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #323130; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #faf9f8; - border: 1px solid #a19f9d; - color: #323130; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #a19f9d; - color: #323130; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #a19f9d; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #a19f9d; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #0078d4; - border: 1px solid #0078d4; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #faf9f8; - border: 1px solid #a19f9d; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #0078d4; - border: 1px solid #0078d4; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 2px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #106ebe; - color: #ffffff; - border-color: #106ebe; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #005a9e; - color: #ffffff; - border-color: #005a9e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #605e5c; - color: #323130; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f3f2f1; - border-color: #605e5c; - color: #323130; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #a19f9d; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #faf9f8; - border-color: #a19f9d; - color: #323130; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #323130; - border-color: #a19f9d; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #a19f9d; - padding: 1rem; - background: #faf9f8; - color: #323130; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #605e5c; - border: 0 none; - background: transparent; - border-radius: 2px; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #605e5c; - border-color: transparent; - background: #f3f2f1; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #a19f9d; - background: #ffffff; - color: #323130; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #0078d4; - border-color: #0078d4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #0078d4; - border-color: #0078d4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #f3f2f1; - color: #323130; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #faf9f8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #0078d4; - border: 1px solid #0078d4; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 2px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #106ebe; - color: #ffffff; - border-color: #106ebe; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #005a9e; - color: #ffffff; - border-color: #005a9e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #0078d4; - border: 1px solid #0078d4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #605e5c; - color: #323130; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f3f2f1; - border-color: #605e5c; - color: #323130; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .fc.fc-theme-standard a { - color: #323130; - } - .fc.fc-theme-standard .fc-highlight { - color: #323130; - background: #edebe9; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6203,6 +5920,9 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6305,9 +6025,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index b898cdce338..13851347683 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#071426; --surface-b:#040d19; --surface-c:rgba(255, 255, 255, 0.03); @@ -189,14 +190,113 @@ --primary-900:#3b4f65; } +.p-editor-container .p-editor-toolbar { + background: #071426; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #071426; + border: 1px solid #0b213f; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-content .ql-editor { + background: #040d19; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #93C5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #93C5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #93C5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #93C5FD; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #FCA5A5; + } .p-dropdown-panel { background: #071426; @@ -907,14 +1010,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(147, 197, 253, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(147, 197, 253, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: #0b213f; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #091a32; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #FCA5A5; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #071426; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #071426; - border: 1px solid #0b213f; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-content .ql-editor { - background: #040d19; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #93C5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #93C5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #93C5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #93C5FD; - } - .p-inputgroup-addon { background: #071426; color: rgba(255, 255, 255, 0.6); @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #7fbafd; - border: 1px solid #7fbafd; - color: #1c2127; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #071426; - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #7fbafd; - color: #1c2127; - border-color: #7fbafd; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #93C5FD; - border-color: #93C5FD; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #7fbafd; - border-color: #7fbafd; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #071426; - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #071426; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #0b213f; - padding: 1.25rem; - background: #071426; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #0b213f; - background: #071426; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #1c2127; - background: #7fbafd; - border-color: #7fbafd; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #1c2127; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #7fbafd; - border-color: #7fbafd; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #071426; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #7fbafd; - color: #1c2127; - border-color: #7fbafd; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #93C5FD; - border-color: #93C5FD; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #7fbafd; - border-color: #7fbafd; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index c7699622066..04e45f1494e 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#071426; --surface-b:#040d19; --surface-c:rgba(255, 255, 255, 0.03); @@ -189,14 +190,113 @@ --primary-900:#424865; } +.p-editor-container .p-editor-toolbar { + background: #071426; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #071426; + border: 1px solid #0b213f; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-content .ql-editor { + background: #040d19; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #A5B4FC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #A5B4FC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #A5B4FC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #A5B4FC; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #FCA5A5; + } .p-dropdown-panel { background: #071426; @@ -907,14 +1010,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(165, 180, 252, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: #0b213f; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #091a32; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #FCA5A5; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #071426; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #071426; - border: 1px solid #0b213f; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-content .ql-editor { - background: #040d19; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #A5B4FC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #A5B4FC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #A5B4FC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #A5B4FC; - } - .p-inputgroup-addon { background: #071426; color: rgba(255, 255, 255, 0.6); @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #91a3fb; - border: 1px solid #91a3fb; - color: #1c2127; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #071426; - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #1c2127; - background: #A5B4FC; - border: 1px solid #A5B4FC; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #91a3fb; - color: #1c2127; - border-color: #91a3fb; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #7d92fb; - color: #1c2127; - border-color: #7d92fb; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #A5B4FC; - border-color: #A5B4FC; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #91a3fb; - border-color: #91a3fb; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #071426; - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #071426; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #0b213f; - padding: 1.25rem; - background: #071426; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #0b213f; - background: #071426; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #1c2127; - background: #91a3fb; - border-color: #91a3fb; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #1c2127; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #91a3fb; - border-color: #91a3fb; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #071426; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #1c2127; - background: #A5B4FC; - border: 1px solid #A5B4FC; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #91a3fb; - color: #1c2127; - border-color: #91a3fb; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #7d92fb; - color: #1c2127; - border-color: #7d92fb; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #1c2127; - background: #A5B4FC; - border: 1px solid #A5B4FC; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #A5B4FC; - border-color: #A5B4FC; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #91a3fb; - border-color: #91a3fb; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(165, 180, 252, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 11cf1a9581f..7547c7e2302 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#071426; --surface-b:#040d19; --surface-c:rgba(255, 255, 255, 0.03); @@ -189,14 +190,113 @@ --primary-900:#4e4865; } +.p-editor-container .p-editor-toolbar { + background: #071426; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #071426; + border: 1px solid #0b213f; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-content .ql-editor { + background: #040d19; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #C4B5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #C4B5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #C4B5FD; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #C4B5FD; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #FCA5A5; + } .p-dropdown-panel { background: #071426; @@ -907,14 +1010,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(196, 181, 253, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: #0b213f; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #091a32; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #FCA5A5; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #071426; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #071426; - border: 1px solid #0b213f; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-content .ql-editor { - background: #040d19; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #C4B5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #C4B5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #C4B5FD; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #C4B5FD; - } - .p-inputgroup-addon { background: #071426; color: rgba(255, 255, 255, 0.6); @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #b3a0fc; - border: 1px solid #b3a0fc; - color: #1c2127; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #071426; - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #1c2127; - background: #C4B5FD; - border: 1px solid #C4B5FD; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #b3a0fc; - color: #1c2127; - border-color: #b3a0fc; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #a28bfc; - color: #1c2127; - border-color: #a28bfc; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #C4B5FD; - border-color: #C4B5FD; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b3a0fc; - border-color: #b3a0fc; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #071426; - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #071426; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #0b213f; - padding: 1.25rem; - background: #071426; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #0b213f; - background: #071426; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #1c2127; - background: #b3a0fc; - border-color: #b3a0fc; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #1c2127; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #b3a0fc; - border-color: #b3a0fc; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #071426; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #1c2127; - background: #C4B5FD; - border: 1px solid #C4B5FD; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #b3a0fc; - color: #1c2127; - border-color: #b3a0fc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #a28bfc; - color: #1c2127; - border-color: #a28bfc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #1c2127; - background: #C4B5FD; - border: 1px solid #C4B5FD; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #C4B5FD; - border-color: #C4B5FD; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b3a0fc; - border-color: #b3a0fc; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(196, 181, 253, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 6fdcf460a79..a35a8d31a3f 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#071426; --surface-b:#040d19; --surface-c:rgba(255, 255, 255, 0.03); @@ -189,14 +190,113 @@ --primary-900:#265e55; } +.p-editor-container .p-editor-toolbar { + background: #071426; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #071426; + border: 1px solid #0b213f; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #0b213f; +} +.p-editor-container .p-editor-content .ql-editor { + background: #040d19; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #5EEAD4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #5EEAD4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #5EEAD4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #5EEAD4; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #FCA5A5; + } .p-dropdown-panel { background: #071426; @@ -907,14 +1010,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(94, 234, 212, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(94, 234, 212, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: #0b213f; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #091a32; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #FCA5A5; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #071426; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #071426; - border: 1px solid #0b213f; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #0b213f; - } - .p-editor-container .p-editor-content .ql-editor { - background: #040d19; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #5EEAD4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #5EEAD4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #5EEAD4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #5EEAD4; - } - .p-inputgroup-addon { background: #071426; color: rgba(255, 255, 255, 0.6); @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #4fe8d0; - border: 1px solid #4fe8d0; - color: #1c2127; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #071426; - border: 1px solid #0b213f; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #1c2127; - background: #5EEAD4; - border: 1px solid #5EEAD4; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #4fe8d0; - color: #1c2127; - border-color: #4fe8d0; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #41e6cc; - color: #1c2127; - border-color: #41e6cc; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #5EEAD4; - border-color: #5EEAD4; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4fe8d0; - border-color: #4fe8d0; - color: #1c2127; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #071426; - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #0b213f; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #071426; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #0b213f; - padding: 1.25rem; - background: #071426; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #0b213f; - background: #071426; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #1c2127; - background: #4fe8d0; - border-color: #4fe8d0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #1c2127; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #4fe8d0; - border-color: #4fe8d0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #071426; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #1c2127; - background: #5EEAD4; - border: 1px solid #5EEAD4; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #4fe8d0; - color: #1c2127; - border-color: #4fe8d0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #41e6cc; - color: #1c2127; - border-color: #41e6cc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #1c2127; - background: #5EEAD4; - border: 1px solid #5EEAD4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #071426; - border: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #0b213f; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #5EEAD4; - border-color: #5EEAD4; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4fe8d0; - border-color: #4fe8d0; - color: #1c2127; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(94, 234, 212, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 0ac2a187df6..e3f4568077e 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#ffffff; --surface-b:#f8f9fa; --surface-c:#e9ecef; @@ -189,14 +190,113 @@ --primary-900:#183462; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #3B82F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #3B82F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #3B82F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #3B82F6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: #6c757d; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e24c4c; + } .p-dropdown-panel { background: #ffffff; @@ -907,14 +1010,16 @@ color: #1D4ED8; background: #EFF6FF; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #ffffff; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e24c4c; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3B82F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3B82F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3B82F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3B82F6; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #343a40; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #2563eb; - border: 1px solid #2563eb; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #2563eb; - color: #ffffff; - border-color: #2563eb; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #1D4ED8; - color: #ffffff; - border-color: #1D4ED8; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #3B82F6; - border-color: #3B82F6; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #2563eb; - border-color: #2563eb; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1.25rem; - background: #f8f9fa; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #2563eb; - border-color: #2563eb; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #2563eb; - border-color: #2563eb; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #2563eb; - color: #ffffff; - border-color: #2563eb; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #1D4ED8; - color: #ffffff; - border-color: #1D4ED8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #3B82F6; - border-color: #3B82F6; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #2563eb; - border-color: #2563eb; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #1D4ED8; - background: #EFF6FF; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index ebc5895a881..612b4d1e44d 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#ffffff; --surface-b:#f8f9fa; --surface-c:#e9ecef; @@ -189,14 +190,113 @@ --primary-900:#282960; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #6366F1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #6366F1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #6366F1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #6366F1; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: #6c757d; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e24c4c; + } .p-dropdown-panel { background: #ffffff; @@ -907,14 +1010,16 @@ color: #4338CA; background: #EEF2FF; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #E0E7FF; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #ffffff; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e24c4c; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #6366F1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #6366F1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #6366F1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #6366F1; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #343a40; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #4F46E5; - border: 1px solid #4F46E5; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #6366F1; - border: 1px solid #6366F1; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #4F46E5; - color: #ffffff; - border-color: #4F46E5; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #6366F1; - border-color: #6366F1; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1.25rem; - background: #f8f9fa; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #4F46E5; - border-color: #4F46E5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #4F46E5; - border-color: #4F46E5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #6366F1; - border: 1px solid #6366F1; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #4F46E5; - color: #ffffff; - border-color: #4F46E5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #6366F1; - border: 1px solid #6366F1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #6366F1; - border-color: #6366F1; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #4338CA; - background: #EEF2FF; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 178c0a50b8a..548fe361622 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#ffffff; --surface-b:#f8f9fa; --surface-c:#e9ecef; @@ -189,14 +190,113 @@ --primary-900:#382562; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #8B5CF6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #8B5CF6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #8B5CF6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #8B5CF6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: #6c757d; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e24c4c; + } .p-dropdown-panel { background: #ffffff; @@ -907,14 +1010,16 @@ color: #6D28D9; background: #F5F3FF; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #ffffff; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e24c4c; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #8B5CF6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #8B5CF6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #8B5CF6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #8B5CF6; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #343a40; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #7C3AED; - border: 1px solid #7C3AED; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #8B5CF6; - border: 1px solid #8B5CF6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #7C3AED; - color: #ffffff; - border-color: #7C3AED; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #6D28D9; - color: #ffffff; - border-color: #6D28D9; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #8B5CF6; - border-color: #8B5CF6; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #7C3AED; - border-color: #7C3AED; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1.25rem; - background: #f8f9fa; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #7C3AED; - border-color: #7C3AED; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #7C3AED; - border-color: #7C3AED; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #8B5CF6; - border: 1px solid #8B5CF6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #7C3AED; - color: #ffffff; - border-color: #7C3AED; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #6D28D9; - color: #ffffff; - border-color: #6D28D9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #8B5CF6; - border: 1px solid #8B5CF6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #8B5CF6; - border-color: #8B5CF6; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #7C3AED; - border-color: #7C3AED; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #6D28D9; - background: #F5F3FF; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index f66560b0024..e1447b166c9 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -3,6 +3,7 @@ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; --font-family:"Inter var", sans-serif; + --font-feature-settings: "cv02","cv03","cv04","cv11"; --surface-a:#ffffff; --surface-b:#f8f9fa; --surface-c:#e9ecef; @@ -189,14 +190,113 @@ --primary-900:#084a42; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #14B8A6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #14B8A6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #14B8A6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #14B8A6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -228,9 +328,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -287,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -787,9 +887,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -851,7 +951,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -866,6 +966,9 @@ color: #6c757d; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e24c4c; + } .p-dropdown-panel { background: #ffffff; @@ -907,14 +1010,16 @@ color: #0F766E; background: #F0FDFA; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -923,9 +1028,10 @@ background: #ffffff; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e24c4c; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -941,105 +1047,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #14B8A6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #14B8A6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #14B8A6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #14B8A6; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1189,8 +1196,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3171,295 +3178,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #343a40; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #0D9488; - border: 1px solid #0D9488; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #14B8A6; - border: 1px solid #14B8A6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #0D9488; - color: #ffffff; - border-color: #0D9488; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #0F766E; - color: #ffffff; - border-color: #0F766E; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #14B8A6; - border-color: #14B8A6; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0D9488; - border-color: #0D9488; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1.25rem; - background: #f8f9fa; - color: #343a40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #0D9488; - border-color: #0D9488; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #0D9488; - border-color: #0D9488; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #14B8A6; - border: 1px solid #14B8A6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #0D9488; - color: #ffffff; - border-color: #0D9488; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #0F766E; - color: #ffffff; - border-color: #0F766E; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #14B8A6; - border: 1px solid #14B8A6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #14B8A6; - border-color: #14B8A6; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0D9488; - border-color: #0D9488; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99F6E4; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #0F766E; - background: #F0FDFA; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6221,6 +5939,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99F6E4; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6323,9 +6044,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index b28cbef7ea9..30a0d5abb08 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -171,14 +171,113 @@ --primary-900:#665a34; } +.p-editor-container .p-editor-toolbar { + background: #191919; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #323232; + border: 1px solid #191919; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #dedede; + background: #4c4c4c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-content .ql-editor { + background: #191919; + color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #FFE082; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #FFE082; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #FFE082; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #FFE082; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #888888; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e57373; + } .p-dropdown-panel { background: #323232; @@ -893,14 +995,16 @@ color: #212529; background: #FFE082; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #ffe081; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #4c4c4c; + background: #3c3c3c; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; - background: transparent; + background: #4c4c4c; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #191919; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e57373; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #dedede; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #191919; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #323232; - border: 1px solid #191919; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #dedede; - background: #4c4c4c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-content .ql-editor { - background: #191919; - color: #dedede; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #FFE082; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #FFE082; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #FFE082; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #FFE082; - } - .p-inputgroup-addon { background: #252525; color: #888888; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #dedede; background: #191919; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #191919; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #323232; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #FFD54F; - border: 1px solid #FFD54F; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #191919; - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #FFE082; - border: 1px solid #FFE082; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #FFD54F; - color: #212529; - border-color: #FFD54F; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #FFCA28; - color: #212529; - border-color: #FFCA28; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFE082; - border-color: #FFE082; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #191919; - border-color: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #dedede; - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #323232; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #191919; - padding: 0.857rem 1rem; - background: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #8888; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #dedede; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #191919; - background: #323232; - color: #dedede; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #FFD54F; - border-color: #FFD54F; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #FFD54F; - border-color: #FFD54F; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #191919; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #FFE082; - border: 1px solid #FFE082; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #FFD54F; - color: #212529; - border-color: #FFD54F; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #FFCA28; - color: #212529; - border-color: #FFCA28; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #212529; - background: #FFE082; - border: 1px solid #FFE082; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFE082; - border-color: #FFE082; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #dedede; - } - .fc.fc-theme-standard .fc-highlight { - color: #212529; - background: #FFE082; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 300508b5ed7..837790ed480 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#345564; } +.p-editor-container .p-editor-toolbar { + background: #191919; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #323232; + border: 1px solid #191919; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #dedede; + background: #4c4c4c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-content .ql-editor { + background: #191919; + color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #81D4FA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #81D4FA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #81D4FA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #81D4FA; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #888888; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e57373; + } .p-dropdown-panel { background: #323232; @@ -893,14 +995,16 @@ color: #212529; background: #81D4FA; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #81d4fa; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #4c4c4c; + background: #3c3c3c; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; - background: transparent; + background: #4c4c4c; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #191919; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e57373; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #dedede; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #191919; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #323232; - border: 1px solid #191919; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #dedede; - background: #4c4c4c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-content .ql-editor { - background: #191919; - color: #dedede; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #81D4FA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #81D4FA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #81D4FA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #81D4FA; - } - .p-inputgroup-addon { background: #252525; color: #888888; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #dedede; background: #191919; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #191919; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #323232; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #4FC3F7; - border: 1px solid #4FC3F7; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #191919; - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #81D4FA; - border: 1px solid #81D4FA; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #4FC3F7; - color: #212529; - border-color: #4FC3F7; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #29B6F6; - color: #212529; - border-color: #29B6F6; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81D4FA; - border-color: #81D4FA; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4FC3F7; - border-color: #4FC3F7; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #191919; - border-color: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #dedede; - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #323232; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #191919; - padding: 0.857rem 1rem; - background: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #8888; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #dedede; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #191919; - background: #323232; - color: #dedede; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #4FC3F7; - border-color: #4FC3F7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #4FC3F7; - border-color: #4FC3F7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #191919; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #81D4FA; - border: 1px solid #81D4FA; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #4FC3F7; - color: #212529; - border-color: #4FC3F7; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #29B6F6; - color: #212529; - border-color: #29B6F6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #212529; - background: #81D4FA; - border: 1px solid #81D4FA; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81D4FA; - border-color: #81D4FA; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4FC3F7; - border-color: #4FC3F7; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #dedede; - } - .fc.fc-theme-standard .fc-highlight { - color: #212529; - background: #81D4FA; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 6ea03d619ed..c815b5d08a7 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -171,14 +171,113 @@ --primary-900:#4f5a42; } +.p-editor-container .p-editor-toolbar { + background: #191919; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #323232; + border: 1px solid #191919; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #dedede; + background: #4c4c4c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-content .ql-editor { + background: #191919; + color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #C5E1A5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #C5E1A5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #C5E1A5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #C5E1A5; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #888888; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e57373; + } .p-dropdown-panel { background: #323232; @@ -893,14 +995,16 @@ color: #212529; background: #C5E1A5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #c5e1a5; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #4c4c4c; + background: #3c3c3c; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; - background: transparent; + background: #4c4c4c; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #191919; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e57373; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #dedede; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #191919; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #323232; - border: 1px solid #191919; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #dedede; - background: #4c4c4c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-content .ql-editor { - background: #191919; - color: #dedede; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #C5E1A5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #C5E1A5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #C5E1A5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #C5E1A5; - } - .p-inputgroup-addon { background: #252525; color: #888888; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #dedede; background: #191919; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #191919; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #323232; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #AED581; - border: 1px solid #AED581; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #191919; - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #C5E1A5; - border: 1px solid #C5E1A5; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #AED581; - color: #212529; - border-color: #AED581; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #9CCC65; - color: #212529; - border-color: #9CCC65; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #C5E1A5; - border-color: #C5E1A5; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #AED581; - border-color: #AED581; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #191919; - border-color: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #dedede; - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #323232; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #191919; - padding: 0.857rem 1rem; - background: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #8888; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #dedede; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #191919; - background: #323232; - color: #dedede; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #AED581; - border-color: #AED581; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #AED581; - border-color: #AED581; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #191919; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #C5E1A5; - border: 1px solid #C5E1A5; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #AED581; - color: #212529; - border-color: #AED581; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #9CCC65; - color: #212529; - border-color: #9CCC65; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #212529; - background: #C5E1A5; - border: 1px solid #C5E1A5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #C5E1A5; - border-color: #C5E1A5; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #AED581; - border-color: #AED581; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #dedede; - } - .fc.fc-theme-standard .fc-highlight { - color: #212529; - background: #C5E1A5; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 4b64c45b6b6..776420152df 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -171,14 +171,113 @@ --primary-900:#623947; } +.p-editor-container .p-editor-toolbar { + background: #191919; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #888888; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #323232; + border: 1px solid #191919; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #dedede; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #dedede; + background: #4c4c4c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #191919; +} +.p-editor-container .p-editor-content .ql-editor { + background: #191919; + color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #dedede; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #F48FB1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #F48FB1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #F48FB1; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #F48FB1; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #888888; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e57373; + } .p-dropdown-panel { background: #323232; @@ -893,14 +995,16 @@ color: #212529; background: #F48FB1; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #f48fb1; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #4c4c4c; + background: #3c3c3c; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; - background: transparent; + background: #4c4c4c; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #191919; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e57373; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #dedede; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #191919; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #888888; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #323232; - border: 1px solid #191919; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #dedede; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #dedede; - background: #4c4c4c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #191919; - } - .p-editor-container .p-editor-content .ql-editor { - background: #191919; - color: #dedede; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #dedede; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #F48FB1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #F48FB1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #F48FB1; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #F48FB1; - } - .p-inputgroup-addon { background: #252525; color: #888888; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #dedede; background: #191919; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #191919; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #323232; - border: 1px solid #191919; - color: #dedede; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #191919; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #F06292; - border: 1px solid #F06292; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #191919; - border: 1px solid #191919; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #F48FB1; - border: 1px solid #F48FB1; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #F06292; - color: #212529; - border-color: #F06292; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #EC407A; - color: #212529; - border-color: #EC407A; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #F48FB1; - border-color: #F48FB1; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #F06292; - border-color: #F06292; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #191919; - border-color: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #dedede; - border-color: #191919; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #323232; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #191919; - padding: 0.857rem 1rem; - background: #191919; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #8888; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #dedede; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #191919; - background: #323232; - color: #dedede; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #F06292; - border-color: #F06292; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #F06292; - border-color: #F06292; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #191919; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #F48FB1; - border: 1px solid #F48FB1; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #F06292; - color: #212529; - border-color: #F06292; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #EC407A; - color: #212529; - border-color: #EC407A; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #212529; - background: #F48FB1; - border: 1px solid #F48FB1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #252525; - border: 1px solid #252525; - color: #dedede; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #F48FB1; - border-color: #F48FB1; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #F06292; - border-color: #F06292; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #dedede; - } - .fc.fc-theme-standard .fc-highlight { - color: #212529; - background: #F48FB1; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index c6ccb178241..09c72f19c6f 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -195,14 +195,113 @@ --primary-900:#523b56; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2b2b2b; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 1rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-content .ql-editor { + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #CE93D8; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.5rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.5rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44435; + } .p-dropdown-panel { background: #2b2b2b; @@ -913,14 +1015,16 @@ color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 1rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: transparent; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44435; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 1rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2b2b2b; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 1rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-content .ql-editor { - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #CE93D8; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #1e1e1e; @@ -3177,295 +3183,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(206, 147, 216, 0.16); - border: 1px solid rgba(206, 147, 216, 0.16); - color: #CE93D8; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #121212; - background: #CE93D8; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(206, 147, 216, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(206, 147, 216, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid rgba(255, 255, 255, 0.12); - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2.5rem; - height: 2.5rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.6); - border-color: transparent; - background: rgba(255, 255, 255, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); - border-color: rgba(206, 147, 216, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #CE93D8; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(206, 147, 216, 0.16); - border-color: rgba(206, 147, 216, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #121212; - background: #CE93D8; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(206, 147, 216, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(206, 147, 216, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #121212; - background: #CE93D8; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index b6f67c77374..f52f98d1c60 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -195,14 +195,113 @@ --primary-900:#404357; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2b2b2b; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 1rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-content .ql-editor { + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #9FA8DA; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.5rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.5rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44435; + } .p-dropdown-panel { background: #2b2b2b; @@ -913,14 +1015,16 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 1rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: transparent; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44435; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 1rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2b2b2b; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 1rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-content .ql-editor { - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #9FA8DA; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #1e1e1e; @@ -3177,295 +3183,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(159, 168, 218, 0.16); - border: 1px solid rgba(159, 168, 218, 0.16); - color: #9FA8DA; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #121212; - background: #9FA8DA; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(159, 168, 218, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(159, 168, 218, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid rgba(255, 255, 255, 0.12); - padding: 1rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2.5rem; - height: 2.5rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.6); - border-color: transparent; - background: rgba(255, 255, 255, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #9FA8DA; - background: rgba(159, 168, 218, 0.16); - border-color: rgba(159, 168, 218, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #9FA8DA; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(159, 168, 218, 0.16); - border-color: rgba(159, 168, 218, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #121212; - background: #9FA8DA; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(159, 168, 218, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(159, 168, 218, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #121212; - background: #9FA8DA; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #9FA8DA; - background: rgba(159, 168, 218, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 1d5154309c2..ec26cce3c2b 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -195,14 +195,113 @@ --primary-900:#291749; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 1rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #673AB7; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.5rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.5rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #B00020; + } .p-dropdown-panel { background: #ffffff; @@ -913,14 +1015,16 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); + background: rgba(0, 0, 0, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 1rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); - background: transparent; + background: rgba(0, 0, 0, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #ffffff; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #B00020; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 1rem 1rem; + color: rgba(0, 0, 0, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 1rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #673AB7; - } - .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(0, 0, 0, 0.87); background: #ffffff; @@ -3177,295 +3183,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(103, 58, 183, 0.12); - border: 1px solid rgba(103, 58, 183, 0.12); - color: #673AB7; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #673AB7; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(103, 58, 183, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(103, 58, 183, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(0, 0, 0, 0.87); - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #e0e0e0; - padding: 1rem; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2.5rem; - height: 2.5rem; - color: rgba(0, 0, 0, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(0, 0, 0, 0.6); - border-color: transparent; - background: rgba(0, 0, 0, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #e0e0e0; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #673AB7; - background: rgba(103, 58, 183, 0.12); - border-color: rgba(103, 58, 183, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #673AB7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(103, 58, 183, 0.12); - border-color: rgba(103, 58, 183, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #673AB7; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(103, 58, 183, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(103, 58, 183, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #ffffff; - background: #673AB7; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #673AB7; - background: rgba(103, 58, 183, 0.12); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index d6d191fdb0e..f6dcbf210d9 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -195,14 +195,113 @@ --primary-900:#192048; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 1rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #3F51B5; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.5rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.5rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #B00020; + } .p-dropdown-panel { background: #ffffff; @@ -913,14 +1015,16 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); + background: rgba(0, 0, 0, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 1rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); - background: transparent; + background: rgba(0, 0, 0, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #ffffff; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #B00020; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 1rem 1rem; + color: rgba(0, 0, 0, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 1rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; - } - .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(0, 0, 0, 0.87); background: #ffffff; @@ -3177,295 +3183,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(63, 81, 181, 0.12); - border: 1px solid rgba(63, 81, 181, 0.12); - color: #3F51B5; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #3F51B5; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(63, 81, 181, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(63, 81, 181, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(0, 0, 0, 0.87); - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #e0e0e0; - padding: 1rem; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2.5rem; - height: 2.5rem; - color: rgba(0, 0, 0, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(0, 0, 0, 0.6); - border-color: transparent; - background: rgba(0, 0, 0, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #e0e0e0; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #3F51B5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #3F51B5; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(63, 81, 181, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(63, 81, 181, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #ffffff; - background: #3F51B5; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 94aea947e35..8d4b4877798 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -195,14 +195,113 @@ --primary-900:#523b56; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2b2b2b; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 0.75rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-content .ql-editor { + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #CE93D8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #CE93D8; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44435; + } .p-dropdown-panel { background: #2b2b2b; @@ -913,14 +1015,16 @@ color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 0.75rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: transparent; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44435; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 0.75rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2b2b2b; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 0.75rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-content .ql-editor { - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #CE93D8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #CE93D8; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #1e1e1e; @@ -3177,295 +3183,6 @@ padding: 0.75rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(206, 147, 216, 0.16); - border: 1px solid rgba(206, 147, 216, 0.16); - color: #CE93D8; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #121212; - background: #CE93D8; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(206, 147, 216, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(206, 147, 216, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid rgba(255, 255, 255, 0.12); - padding: 0.75rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.6); - border-color: transparent; - background: rgba(255, 255, 255, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.75rem; - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); - border-color: rgba(206, 147, 216, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #CE93D8; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(206, 147, 216, 0.16); - border-color: rgba(206, 147, 216, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #121212; - background: #CE93D8; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(206, 147, 216, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(206, 147, 216, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #121212; - background: #CE93D8; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 0.75rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(206, 147, 216, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(206, 147, 216, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 7f32d86540a..15c2455d769 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -195,14 +195,113 @@ --primary-900:#404357; } +.p-editor-container .p-editor-toolbar { + background: #1e1e1e; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #2b2b2b; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 0.75rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid rgba(255, 255, 255, 0.12); +} +.p-editor-container .p-editor-content .ql-editor { + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #9FA8DA; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #9FA8DA; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44435; + } .p-dropdown-panel { background: #2b2b2b; @@ -913,14 +1015,16 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 0.75rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: transparent; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44435; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 0.75rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1e1e1e; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #2b2b2b; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 0.75rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .p-editor-container .p-editor-content .ql-editor { - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #9FA8DA; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #9FA8DA; - } - .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #1e1e1e; @@ -3177,295 +3183,6 @@ padding: 0.75rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(159, 168, 218, 0.16); - border: 1px solid rgba(159, 168, 218, 0.16); - color: #9FA8DA; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #121212; - background: #9FA8DA; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(159, 168, 218, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(159, 168, 218, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1e1e1e; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid rgba(255, 255, 255, 0.12); - padding: 0.75rem; - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.6); - border-color: transparent; - background: rgba(255, 255, 255, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.75rem; - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #9FA8DA; - background: rgba(159, 168, 218, 0.16); - border-color: rgba(159, 168, 218, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #9FA8DA; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(159, 168, 218, 0.16); - border-color: rgba(159, 168, 218, 0.16); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1e1e1e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #121212; - background: #9FA8DA; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(159, 168, 218, 0.92); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(159, 168, 218, 0.68); - color: #121212; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #121212; - background: #9FA8DA; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #2f2f2f; - border: 1px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #373737; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #9FA8DA; - background: rgba(159, 168, 218, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 0.75rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(159, 168, 218, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(159, 168, 218, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index b6d01e3b517..3b28b138631 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -195,14 +195,113 @@ --primary-900:#291749; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 0.75rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #673AB7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #673AB7; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-dropdown.p-invalid.p-component { + border-color: #B00020; + } .p-dropdown-panel { background: #ffffff; @@ -913,14 +1015,16 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); + background: rgba(0, 0, 0, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 0.75rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); - background: transparent; + background: rgba(0, 0, 0, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #ffffff; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #B00020; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 0.75rem; + color: rgba(0, 0, 0, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 0.75rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #673AB7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #673AB7; - } - .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(0, 0, 0, 0.87); background: #ffffff; @@ -3177,295 +3183,6 @@ padding: 0.75rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(103, 58, 183, 0.12); - border: 1px solid rgba(103, 58, 183, 0.12); - color: #673AB7; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #673AB7; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(103, 58, 183, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(103, 58, 183, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(0, 0, 0, 0.87); - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #e0e0e0; - padding: 0.75rem; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(0, 0, 0, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(0, 0, 0, 0.6); - border-color: transparent; - background: rgba(0, 0, 0, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.75rem; - border: 1px solid #e0e0e0; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #673AB7; - background: rgba(103, 58, 183, 0.12); - border-color: rgba(103, 58, 183, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #673AB7; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(103, 58, 183, 0.12); - border-color: rgba(103, 58, 183, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #673AB7; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(103, 58, 183, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(103, 58, 183, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #ffffff; - background: #673AB7; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #673AB7; - background: rgba(103, 58, 183, 0.12); - } - .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 0.75rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(103, 58, 183, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(103, 58, 183, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index f70aa11e32d..e8a8d8b3e9b 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -195,14 +195,113 @@ --primary-900:#192048; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(0, 0, 0, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 0.75rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #e0e0e0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(0, 0, 0, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #3F51B5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #3F51B5; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(0, 0, 0, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-dropdown.p-invalid.p-component { + border-color: #B00020; + } .p-dropdown-panel { background: #ffffff; @@ -913,14 +1015,16 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); + background: rgba(0, 0, 0, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 0.75rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); - background: transparent; + background: rgba(0, 0, 0, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #ffffff; font-weight: 400; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #B00020; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 0.75rem; + color: rgba(0, 0, 0, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(0, 0, 0, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 0.75rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #e0e0e0; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(0, 0, 0, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; - } - .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(0, 0, 0, 0.87); background: #ffffff; @@ -3177,295 +3183,6 @@ padding: 0.75rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: rgba(63, 81, 181, 0.12); - border: 1px solid rgba(63, 81, 181, 0.12); - color: #3F51B5; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 1px solid #e0e0e0; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #3F51B5; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: rgba(63, 81, 181, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: rgba(63, 81, 181, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #e0e0e0; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(0, 0, 0, 0.87); - border-color: #e0e0e0; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #e0e0e0; - padding: 0.75rem; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(0, 0, 0, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(0, 0, 0, 0.6); - border-color: transparent; - background: rgba(0, 0, 0, 0.04); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.75rem; - border: 1px solid #e0e0e0; - background: #ffffff; - color: rgba(0, 0, 0, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #3F51B5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #3F51B5; - border: 0 none; - font-size: 1rem; - 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); - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: rgba(63, 81, 181, 0.92); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: rgba(63, 81, 181, 0.68); - color: #ffffff; - border-color: transparent; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.38; - color: #ffffff; - background: #3F51B5; - border: 0 none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - 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); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: rgba(0, 0, 0, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); - } - .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -6275,6 +5992,9 @@ outline-offset: 0; box-shadow: none; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 1rem 1rem; @@ -6377,9 +6097,9 @@ padding: 0.75rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { @@ -7267,51 +6987,6 @@ background: transparent; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus { - background: rgba(63, 81, 181, 0.76); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active { - background: rgba(63, 81, 181, 0.68); - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus { - background: #e0e0e1; - border-color: #e0e0e1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight { - background: #d9d8d9; - border-color: #d9d8d9; - } - .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 1bed673d560..0b9d550c400 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -199,14 +199,113 @@ --primary-900:#263445; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #E5E9F0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #4C566A; + background: transparent; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #E5E9F0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #4C566A; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #4C566A; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #4C566A; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #5E81AC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #5E81AC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #5E81AC; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #5E81AC; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -238,9 +337,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 4px; } .p-link:focus-visible { @@ -297,9 +396,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4C566A; padding: 0; margin: 0; @@ -797,9 +896,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4C566A; padding: 0; margin: 0; @@ -861,7 +960,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #4C566A; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -876,6 +975,9 @@ color: #81A1C1; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #BF616A; + } .p-dropdown-panel { background: #ffffff; @@ -917,12 +1019,14 @@ color: #2E3440; background: #D8DEE9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #bec8da; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4C566A; - background: transparent; + background: #E5E9F0; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #4C566A; background: transparent; } @@ -933,9 +1037,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #BF616A; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #4C566A; + background: transparent; } .p-input-filled .p-dropdown { @@ -951,105 +1056,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #E5E9F0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #81A1C1; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #81A1C1; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #81A1C1; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #4C566A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #4C566A; - background: transparent; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #E5E9F0; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #4C566A; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #4C566A; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #4C566A; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #4C566A; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #5E81AC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #5E81AC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #5E81AC; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #5E81AC; - } - .p-inputgroup-addon { background: #ffffff; color: #81A1C1; @@ -1199,8 +1205,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #4C566A; background: #ffffff; @@ -3181,295 +3187,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 1px solid #E5E9F0; - color: #4C566A; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #E5E9F0; - color: #4C566A; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #E5E9F0; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #E5E9F0; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #51749e; - border: 1px solid #51749e; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 1px solid #E5E9F0; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #5E81AC; - border: 2px solid #5E81AC; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 4px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #81A1C1; - color: #ffffff; - border-color: #51749e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #48678c; - color: #ffffff; - border-color: #48678c; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 2px solid #D8DEE9; - color: #4C566A; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #ECEFF4; - border-color: #81A1C1; - color: #4C566A; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #5E81AC; - border-color: #5E81AC; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #81A1C1; - border-color: #5E81AC; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #E5E9F0; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #E5E9F0; - color: #4C566A; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #4C566A; - border-color: #E5E9F0; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #E5E9F0; - padding: 1rem; - background: #ffffff; - color: #4C566A; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #81A1C1; - border: 2px solid transparent; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #4C566A; - border-color: #5E81AC; - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #E5E9F0; - background: #ffffff; - color: #4C566A; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #51749e; - border-color: #51749e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #51749e; - border-color: #51749e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: transparent; - color: #4C566A; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #5E81AC; - border: 2px solid #5E81AC; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #81A1C1; - color: #ffffff; - border-color: #51749e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #48678c; - color: #ffffff; - border-color: #48678c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #5E81AC; - border: 2px solid #5E81AC; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 2px solid #D8DEE9; - color: #4C566A; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #ECEFF4; - border-color: #81A1C1; - color: #4C566A; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #5E81AC; - border-color: #5E81AC; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #81A1C1; - border-color: #5E81AC; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C0D0E0; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .fc.fc-theme-standard a { - color: #4C566A; - } - .fc.fc-theme-standard .fc-highlight { - color: #2E3440; - background: #D8DEE9; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6279,6 +5996,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C0D0E0; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6381,9 +6101,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index 6ba8a0183ec..5a9e081573d 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -171,14 +171,113 @@ --primary-900:#072e4d; } +.p-editor-container .p-editor-toolbar { + background: #f2f4f8; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 1px; + padding: 0.25rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #343a3f; + background: #dde1e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.25rem 0.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #343a3f; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #343a3f; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #343a3f; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #1174c0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #1174c0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #1174c0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #1174c0; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 1px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.125rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #343a3f; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.125rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #343a3f; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #697077; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #697077; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #d8222f; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #ffffff; background: #44A1D9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #1174c0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #343a3f; - background: #dde1e6; + background: #d2d6db; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.25rem 0.5rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #343a3f; - background: transparent; + background: #dde1e6; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #d8222f; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.25rem 0.5rem; + color: #343a3f; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f2f4f8; - border-top-right-radius: 1px; - border-top-left-radius: 1px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #697077; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #697077; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #697077; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 1px; - padding: 0.25rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #343a3f; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #343a3f; - background: #dde1e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.25rem 0.5rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #343a3f; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #343a3f; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #343a3f; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #343a3f; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #1174c0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #1174c0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #1174c0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #1174c0; - } - .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #343a3f; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 0.5rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f2f4f8; - border: 1px solid #dee2e6; - color: #343a3f; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #343a3f; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #0f68ad; - border: 1px solid #0f68ad; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f2f4f8; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #1174c0; - border: 1px solid #1174c0; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 1px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #0f68ad; - color: #ffffff; - border-color: #0f68ad; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #0e5d9a; - color: #ffffff; - border-color: #0e5d9a; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #a5acb3; - color: #343a3f; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #dde1e6; - border-color: #a5acb3; - color: #343a3f; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1174c0; - border-color: #1174c0; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0f68ad; - border-color: #0f68ad; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 1px; - border-bottom-left-radius: 1px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f2f4f8; - border-color: #dee2e6; - color: #343a3f; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #343a3f; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 0.75rem; - background: #f2f4f8; - color: #343a3f; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 1rem; - height: 1rem; - color: #878d96; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #343a3f; - border-color: #121619; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.5rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #343a3f; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #0f68ad; - border-color: #0f68ad; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #0f68ad; - border-color: #0f68ad; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #dde1e6; - color: #343a3f; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f2f4f8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #1174c0; - border: 1px solid #1174c0; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 1px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #0f68ad; - color: #ffffff; - border-color: #0f68ad; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #0e5d9a; - color: #ffffff; - border-color: #0e5d9a; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #1174c0; - border: 1px solid #1174c0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #a5acb3; - color: #343a3f; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #dde1e6; - border-color: #a5acb3; - color: #343a3f; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #1174c0; - border-color: #1174c0; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0f68ad; - border-color: #0f68ad; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 1px; - border-bottom-left-radius: 1px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - } - .fc.fc-theme-standard a { - color: #343a3f; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #44A1D9; - } - .p-orderlist .p-orderlist-controls { padding: 0.5rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.25rem 0.25rem; @@ -6353,8 +6073,8 @@ padding: 0.5rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 18ea2c85115..adca066e390 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -171,14 +171,113 @@ --primary-900:#003157; } +.p-editor-container .p-editor-toolbar { + background: #007ad9; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #007ad9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #c8c8c8; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #333333; + background: #eaeaea; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #c8c8c8; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #007ad9; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #848484; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #a80000; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #ffffff; background: #e02365; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #e02365; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #eaeaea; + background: #d6d6d6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; - background: transparent; + background: #eaeaea; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #f4f4f4; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #a80000; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #333333; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #007ad9; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #007ad9; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid #c8c8c8; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #333333; - background: #eaeaea; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #c8c8c8; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #333333; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #007ad9; - } - .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #333333; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #007ad9; - border: 1px solid #007ad9; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #007ad9; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #007ad9; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #116fbf; - border: 1px solid #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #007ad9; - border: 1px solid #007ad9; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #333333; - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #007ad9; - padding: 0.857rem 1rem; - background: #007ad9; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #a6a6a6; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #007ad9; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #c8c8c8; - background: #ffffff; - color: #333333; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #eaeaea; - color: #333333; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #007ad9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #333333; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #e02365; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6203,6 +5920,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6305,9 +6025,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 0d7e50895fe..b8d3d89760a 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -171,14 +171,113 @@ --primary-900:#003157; } +.p-editor-container .p-editor-toolbar { + background: #333333; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #c8c8c8; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #333333; + background: #eaeaea; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #c8c8c8; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #007ad9; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #848484; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #a80000; + } .p-dropdown-panel { background: #ffffff; @@ -893,14 +995,16 @@ color: #ffffff; background: #007ad9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #eaeaea; + background: #d6d6d6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; - background: transparent; + background: #eaeaea; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #f4f4f4; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #a80000; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #333333; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #333333; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid #c8c8c8; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #333333; - background: #eaeaea; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #c8c8c8; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #333333; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #007ad9; - } - .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #333333; background: #ffffff; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #333333; - border: 1px solid #333333; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #333333; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #333333; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #116fbf; - border: 1px solid #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #333333; - border: 1px solid #333333; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #333333; - border-color: #333333; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #333333; - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #333333; - padding: 0.857rem 1rem; - background: #333333; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #a6a6a6; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #007ad9; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #c8c8c8; - background: #ffffff; - color: #333333; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #eaeaea; - color: #333333; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #333333; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #333333; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #007ad9; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index c1766491e74..95d5acb09a8 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -171,14 +171,113 @@ --primary-900:#003157; } +.p-editor-container .p-editor-toolbar { + background: #f4f4f4; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #c8c8c8; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #848484; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #c8c8c8; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #333333; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #333333; + background: #eaeaea; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #c8c8c8; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #333333; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #007ad9; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #007ad9; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -773,9 +872,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -837,7 +936,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -852,6 +951,9 @@ color: #848484; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #a80000; + } .p-dropdown-panel { background: #ffffff; @@ -893,14 +995,16 @@ color: #ffffff; background: #007ad9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #eaeaea; + background: #d6d6d6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; - background: transparent; + background: #eaeaea; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -909,9 +1013,10 @@ background: #f4f4f4; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #a80000; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #333333; + background: transparent; } .p-input-filled .p-dropdown { @@ -927,105 +1032,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f4f4f4; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #c8c8c8; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #848484; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid #c8c8c8; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 3px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #333333; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #333333; - background: #eaeaea; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #c8c8c8; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #333333; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #333333; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #007ad9; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #007ad9; - } - .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1175,8 +1181,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #333333; background: #ffffff; @@ -3165,295 +3171,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f4f4f4; - border: 1px solid #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #c8c8c8; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #c8c8c8; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #116fbf; - border: 1px solid #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f4f4f4; - border: 1px solid #c8c8c8; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f4f4f4; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #333333; - border-color: #c8c8c8; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #c8c8c8; - padding: 0.857rem 1rem; - background: #f4f4f4; - color: #333333; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #a6a6a6; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #007ad9; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #c8c8c8; - background: #ffffff; - color: #333333; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #116fbf; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #eaeaea; - color: #333333; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f4f4f4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #116fbf; - color: #ffffff; - border-color: #116fbf; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #005b9f; - color: #ffffff; - border-color: #005b9f; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #ffffff; - background: #007ad9; - border: 1px solid #007ad9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #dadada; - border: 1px solid #dadada; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #333333; - } - .fc.fc-theme-standard .fc-highlight { - color: #ffffff; - background: #007ad9; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6215,6 +5932,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6317,9 +6037,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 306a4e08ce4..1a6e73b6242 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -171,14 +171,113 @@ --primary-900:#313c41; } +.p-editor-container .p-editor-toolbar { + background: #7B95A3; + border-top-right-radius: 2px; + border-top-left-radius: 2px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #7B95A3; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a6a6a6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a6a6a6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a6a6a6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #eaeaea; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 2px; + padding: 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #666666; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #666666; + background: #f4f4f4; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.429rem 0.857rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dadada; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #666666; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #666666; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #666666; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #666666; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #7B95A3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #7B95A3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #7B95A3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #7B95A3; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 2px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.2145rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #666666; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.2145rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #666666; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #a6a6a6; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #a6a6a6; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #e7a3a3; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #385048; background: #AFD3C8; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #aed3c7; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; - background: #f4f4f4; + background: #e0e0e0; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.429rem 0.857rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; - background: transparent; + background: #f4f4f4; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #f4f4f4; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #e7a3a3; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.429rem 0.857rem; + color: #666666; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #7B95A3; - border-top-right-radius: 2px; - border-top-left-radius: 2px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #7B95A3; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #a6a6a6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #a6a6a6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #a6a6a6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 1px solid #eaeaea; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 2px; - padding: 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #666666; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #666666; - background: #f4f4f4; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.429rem 0.857rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dadada; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #666666; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #666666; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #666666; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #666666; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #7B95A3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #7B95A3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #7B95A3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #7B95A3; - } - .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #666666; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 0.571rem 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #7B95A3; - border: 1px solid #7B95A3; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dadada; - color: #666666; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #7B95A3; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #7B95A3; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #AFD3C8; - border: 1px solid #6c8999; - color: #385048; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #7B95A3; - border: 1px solid #7B95A3; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #7B95A3; - border: 1px solid #7B95A3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 2px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #6c8999; - color: #ffffff; - border-color: #6c8999; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #617c8a; - color: #ffffff; - border-color: #617c8a; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #eaeaea; - border: 1px solid #eaeaea; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #AFD3C8; - border-color: #AFD3C8; - color: #385048; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #8DC8B5; - border-color: #8DC8B5; - color: #385048; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dadada; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #7B95A3; - border-color: #7B95A3; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #666666; - border-color: #dadada; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #7B95A3; - padding: 0.857rem 1rem; - background: #7B95A3; - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #a6a6a6; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #666666; - border-color: transparent; - background: transparent; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 0.571rem 1rem; - border: 1px solid #dadada; - background: #ffffff; - color: #666666; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #385048; - background: #AFD3C8; - border-color: #6c8999; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #385048; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #AFD3C8; - border-color: #6c8999; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #f4f4f4; - color: #666666; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #7B95A3; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #7B95A3; - border: 1px solid #7B95A3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 2px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #6c8999; - color: #ffffff; - border-color: #6c8999; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #617c8a; - color: #ffffff; - border-color: #617c8a; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.5; - color: #ffffff; - background: #7B95A3; - border: 1px solid #7B95A3; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #eaeaea; - border: 1px solid #eaeaea; - color: #333333; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #AFD3C8; - border-color: #AFD3C8; - color: #385048; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #8DC8B5; - border-color: #8DC8B5; - color: #385048; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .fc.fc-theme-standard a { - color: #666666; - } - .fc.fc-theme-standard .fc-highlight { - color: #385048; - background: #AFD3C8; - } - .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -6203,6 +5920,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; @@ -6305,9 +6025,9 @@ padding: 0.571rem 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 9a435acf8c2..0ac3aa0713a 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#0d3c61; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #2196F3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #2196F3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #2196F3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #2196F3; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #6c757d; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44336; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #495057; background: #E3F2FD; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44336; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #2196F3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #2196F3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #2196F3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #2196F3; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #0d89ec; - border: 1px solid #0d89ec; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #2196F3; - border: 1px solid #2196F3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #0d89ec; - color: #ffffff; - border-color: #0d89ec; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #0b7ad1; - color: #ffffff; - border-color: #0b7ad1; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #2196F3; - border-color: #2196F3; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0d89ec; - border-color: #0d89ec; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem; - background: #f8f9fa; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #0d89ec; - border-color: #0d89ec; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #0d89ec; - border-color: #0d89ec; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #2196F3; - border: 1px solid #2196F3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #0d89ec; - color: #ffffff; - border-color: #0d89ec; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #0b7ad1; - color: #ffffff; - border-color: #0b7ad1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #2196F3; - border: 1px solid #2196F3; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #2196F3; - border-color: #2196F3; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #0d89ec; - border-color: #0d89ec; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #495057; - background: #E3F2FD; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index fdc5cb3039d..bc0aa3c28e5 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -171,14 +171,113 @@ --primary-900:#1e4620; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #4CAF50; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #4CAF50; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #4CAF50; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #4CAF50; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #6c757d; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44336; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #495057; background: #E8F5E9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44336; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #4CAF50; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #4CAF50; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #4CAF50; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #4CAF50; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #449e48; - border: 1px solid #449e48; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #4CAF50; - border: 1px solid #4CAF50; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #449e48; - color: #ffffff; - border-color: #449e48; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #3d8c40; - color: #ffffff; - border-color: #3d8c40; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #4CAF50; - border-color: #4CAF50; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #449e48; - border-color: #449e48; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem; - background: #f8f9fa; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #449e48; - border-color: #449e48; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #449e48; - border-color: #449e48; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #4CAF50; - border: 1px solid #4CAF50; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #449e48; - color: #ffffff; - border-color: #449e48; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #3d8c40; - color: #ffffff; - border-color: #3d8c40; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #4CAF50; - border: 1px solid #4CAF50; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #4CAF50; - border-color: #4CAF50; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #449e48; - border-color: #449e48; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #495057; - background: #E8F5E9; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index a968827e59f..b2d8729662c 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -171,14 +171,113 @@ --primary-900:#664d03; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #FFC107; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #FFC107; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #FFC107; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #FFC107; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #6c757d; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44336; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #495057; background: #FFF3E0; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #ebe0ce; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44336; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #FFC107; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #FFC107; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #FFC107; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #FFC107; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #ecb100; - border: 1px solid #ecb100; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #FFC107; - border: 1px solid #FFC107; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #ecb100; - color: #212529; - border-color: #ecb100; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #d29d00; - color: #212529; - border-color: #d29d00; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFC107; - border-color: #FFC107; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ecb100; - border-color: #ecb100; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem; - background: #f8f9fa; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #ecb100; - border-color: #ecb100; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #ecb100; - border-color: #ecb100; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #FFC107; - border: 1px solid #FFC107; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #ecb100; - color: #212529; - border-color: #ecb100; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #d29d00; - color: #212529; - border-color: #d29d00; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #212529; - background: #FFC107; - border: 1px solid #FFC107; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFC107; - border-color: #FFC107; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ecb100; - border-color: #ecb100; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #495057; - background: #FFF3E0; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 8b8d34a8bf9..7ed09346a37 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -171,14 +171,113 @@ --primary-900:#3e1046; } +.p-editor-container .p-editor-toolbar { + background: #f8f9fa; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #6c757d; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #495057; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #495057; + background: #e9ecef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #495057; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #9C27B0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #9C27B0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #9C27B0; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #9C27B0; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: #6c757d; right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f44336; + } .p-dropdown-panel { background: #ffffff; @@ -889,14 +991,16 @@ color: #495057; background: #F3E5F5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #e9ecef; + background: #dee2e6; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; - background: transparent; + background: #e9ecef; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f44336; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #495057; + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #f8f9fa; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #6c757d; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #495057; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #495057; - background: #e9ecef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dee2e6; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #495057; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #495057; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #9C27B0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #9C27B0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #9C27B0; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #9C27B0; - } - .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #495057; background: #ffffff; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #f8f9fa; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dee2e6; - color: #495057; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #8c239e; - border: 1px solid #8c239e; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #f8f9fa; - border: 1px solid #dee2e6; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #9C27B0; - border: 1px solid #9C27B0; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #8c239e; - color: #ffffff; - border-color: #8c239e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #7d1f8d; - color: #ffffff; - border-color: #7d1f8d; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #9C27B0; - border-color: #9C27B0; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #8c239e; - border-color: #8c239e; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #f8f9fa; - border-color: #dee2e6; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #495057; - border-color: #dee2e6; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dee2e6; - padding: 1rem; - background: #f8f9fa; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #495057; - border-color: transparent; - background: #e9ecef; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #dee2e6; - background: #ffffff; - color: #495057; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #8c239e; - border-color: #8c239e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #8c239e; - border-color: #8c239e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #e9ecef; - color: #495057; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #f8f9fa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #9C27B0; - border: 1px solid #9C27B0; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #8c239e; - color: #ffffff; - border-color: #8c239e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #7d1f8d; - color: #ffffff; - border-color: #7d1f8d; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #9C27B0; - border: 1px solid #9C27B0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #ced4da; - color: #495057; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #9C27B0; - border-color: #9C27B0; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #8c239e; - border-color: #8c239e; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: #495057; - } - .fc.fc-theme-standard .fc-highlight { - color: #495057; - background: #F3E5F5; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index 7139c1141b5..66e44b4f68c 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -195,14 +195,113 @@ --primary-900:#473f63; } +.p-editor-container .p-editor-toolbar { + background: #282936; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3e4053; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #282936; + border: 1px solid #3e4053; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #3e4053; +} +.p-editor-container .p-editor-content .ql-editor { + background: #1d1e27; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #b19df7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #b19df7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #b19df7; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #b19df7; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ff9a9a; + } .p-dropdown-panel { background: #282936; @@ -913,14 +1015,16 @@ color: #b19df7; background: rgba(177, 157, 247, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #333544; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ff9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #282936; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #3e4053; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #282936; - border: 1px solid #3e4053; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #3e4053; - } - .p-editor-container .p-editor-content .ql-editor { - background: #1d1e27; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #b19df7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #b19df7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #b19df7; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #b19df7; - } - .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #1d1e27; @@ -3177,295 +3183,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #282936; - border: 1px solid #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #282936; - border: 1px solid #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #3e4053; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #3e4053; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #a28af5; - border: 1px solid #a28af5; - color: #1c1d26; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #282936; - border: 1px solid #3e4053; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #1c1d26; - background: #b19df7; - border: 1px solid #b19df7; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #a28af5; - color: #1c1d26; - border-color: #a28af5; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #9378f4; - color: #1c1d26; - border-color: #9378f4; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #282936; - border: 1px solid #3e4053; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #b19df7; - border-color: #b19df7; - color: #1c1d26; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #a28af5; - border-color: #a28af5; - color: #1c1d26; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #3e4053; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #282936; - border-color: #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #3e4053; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #282936; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #3e4053; - padding: 1.25rem; - background: #282936; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #3e4053; - background: #282936; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #1c1d26; - background: #a28af5; - border-color: #a28af5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #1c1d26; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #a28af5; - border-color: #a28af5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #282936; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #1c1d26; - background: #b19df7; - border: 1px solid #b19df7; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #a28af5; - color: #1c1d26; - border-color: #a28af5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #9378f4; - color: #1c1d26; - border-color: #9378f4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #1c1d26; - background: #b19df7; - border: 1px solid #b19df7; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #282936; - border: 1px solid #3e4053; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #b19df7; - border-color: #b19df7; - color: #1c1d26; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #a28af5; - border-color: #a28af5; - color: #1c1d26; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #b19df7; - background: rgba(177, 157, 247, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6227,6 +5944,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6329,9 +6049,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } @layer primeng { diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index bf2fe1bed72..4c641e6da36 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -195,14 +195,113 @@ --primary-900:#2e2261; } +.p-editor-container .p-editor-toolbar { + background: #eff3f8; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dfe7ef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #043d75; + background: #f6f9fc; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dfe7ef; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #043d75; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #043d75; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #043d75; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #043d75; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #7254f3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #7254f3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #7254f3; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #7254f3; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -234,9 +333,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -293,9 +392,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #043d75; padding: 0; margin: 0; @@ -793,9 +892,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #043d75; padding: 0; margin: 0; @@ -857,7 +956,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #708da9; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -872,6 +971,9 @@ color: #708da9; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ff6767; + } .p-dropdown-panel { background: #ffffff; @@ -913,14 +1015,16 @@ color: #7254f3; background: #e2dcfc; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #cbc0fa; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #043d75; - background: #f6f9fc; + background: #dfe7ef; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #043d75; - background: transparent; + background: #f6f9fc; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -929,9 +1033,10 @@ background: #eff3f8; font-weight: 700; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ff6767; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #043d75; + background: transparent; } .p-input-filled .p-dropdown { @@ -947,105 +1052,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #eff3f8; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #dfe7ef; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #708da9; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #708da9; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #708da9; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: 6px; - padding: 0.75rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #043d75; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #043d75; - background: #f6f9fc; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1.25rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #dfe7ef; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #043d75; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #043d75; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #043d75; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #043d75; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #7254f3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #7254f3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #7254f3; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #7254f3; - } - .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1195,8 +1201,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #043d75; background: #ffffff; @@ -3177,295 +3183,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #eff3f8; - border: 1px solid #dfe7ef; - color: #708da9; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #dfe7ef; - color: #043d75; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #dfe7ef; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #dfe7ef; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #6545f2; - border: 1px solid #6545f2; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #eff3f8; - border: 1px solid #dfe7ef; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #7254f3; - border: 1px solid #7254f3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #6545f2; - color: #ffffff; - border-color: #6545f2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #5935f1; - color: #ffffff; - border-color: #5935f1; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #d3dbe3; - color: #043d75; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f9fc; - border-color: #d3dbe3; - color: #043d75; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #7254f3; - border-color: #7254f3; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6545f2; - border-color: #6545f2; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #dfe7ef; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #eff3f8; - border-color: #dfe7ef; - color: #708da9; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #043d75; - border-color: #dfe7ef; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #dfe7ef; - padding: 1.25rem; - background: #eff3f8; - color: #708da9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #708da9; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #043d75; - border-color: transparent; - background: #f6f9fc; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #dfe7ef; - background: #ffffff; - color: #043d75; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #6545f2; - border-color: #6545f2; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #6545f2; - border-color: #6545f2; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #f6f9fc; - color: #043d75; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #eff3f8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #7254f3; - border: 1px solid #7254f3; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #6545f2; - color: #ffffff; - border-color: #6545f2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #5935f1; - color: #ffffff; - border-color: #5935f1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #7254f3; - border: 1px solid #7254f3; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #d3dbe3; - color: #043d75; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f6f9fc; - border-color: #d3dbe3; - color: #043d75; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #7254f3; - border-color: #7254f3; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6545f2; - border-color: #6545f2; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #043d75; - } - .fc.fc-theme-standard .fc-highlight { - color: #7254f3; - background: #e2dcfc; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6227,6 +5944,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6329,9 +6049,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 5a0ff0ff3ac..93c2a75f556 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -206,14 +206,113 @@ --primary-900:#201c5c; } +.p-editor-container .p-editor-toolbar { + background: #fafafa; + border-top-right-radius: 0.375rem; + border-top-left-radius: 0.375rem; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e5e7eb; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #71717A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #71717A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #71717A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-radius: 0.375rem; + padding: 0.25rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #18181B; + background: #f4f4f5; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #e5e7eb; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #3f3f46; + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #3f3f46; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #3f3f46; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #3f3f46; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #4F46E5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #4F46E5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #4F46E5; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #4F46E5; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -245,9 +344,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 0.375rem; } .p-link:focus-visible { @@ -304,9 +403,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #3f3f46; padding: 0; margin: 0; @@ -804,9 +903,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #3f3f46; padding: 0; margin: 0; @@ -868,7 +967,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #71717A; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -883,6 +982,9 @@ color: #71717A; right: 3rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f0a9a7; + } .p-dropdown-panel { background: #ffffff; @@ -924,15 +1026,17 @@ color: #312E81; background: #EEF2FF; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #E0E7FF; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #18181B; + background: #e5e7eb; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #18181B; background: #f4f4f5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1rem; - color: #3f3f46; - background: transparent; - } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -940,9 +1044,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f0a9a7; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1rem; + color: #3f3f46; + background: transparent; } .p-input-filled .p-dropdown { @@ -958,105 +1063,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #fafafa; - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #e5e7eb; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #71717A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #71717A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #71717A; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-radius: 0.375rem; - padding: 0.25rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #3f3f46; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #18181B; - background: #f4f4f5; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.75rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #e5e7eb; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #3f3f46; - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #3f3f46; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #3f3f46; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #3f3f46; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #4F46E5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #4F46E5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #4F46E5; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #4F46E5; - } - .p-inputgroup-addon { background: #fafafa; color: #71717A; @@ -1206,8 +1212,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #3f3f46; background: #ffffff; @@ -3188,295 +3194,6 @@ padding: 1.25rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #fafafa; - border: 1px solid #e5e7eb; - color: #3f3f46; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 1px solid #e5e7eb; - color: #3f3f46; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #e5e7eb; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #e5e7eb; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #4F46E5; - border: 1px solid #4F46E5; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #fafafa; - border: 1px solid #e5e7eb; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #4F46E5; - border: 1px solid #4F46E5; - font-size: 1rem; - transition: none; - border-radius: 0.375rem; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #d4d4d8; - color: #3f3f46; - transition: none; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f4f4f5; - border-color: #d4d4d8; - color: #3f3f46; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4338CA; - border-color: #4338CA; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #e5e7eb; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #fafafa; - border-color: #e5e7eb; - color: #3f3f46; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #3f3f46; - border-color: #e5e7eb; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #e5e7eb; - padding: 1.25rem; - background: #fafafa; - color: #3f3f46; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #71717A; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #18181B; - border-color: transparent; - background: #f4f4f5; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1.25rem; - border: 1px solid #e5e7eb; - background: #ffffff; - color: #3f3f46; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #4F46E5; - border-color: #4F46E5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #4F46E5; - border-color: #4F46E5; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #f4f4f5; - color: #18181B; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #fafafa; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #4F46E5; - border: 1px solid #4F46E5; - font-size: 1rem; - transition: none; - border-radius: 0.375rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #4338CA; - color: #ffffff; - border-color: #4338CA; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #4F46E5; - border: 1px solid #4F46E5; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 1px solid #d4d4d8; - color: #3f3f46; - transition: none; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #f4f4f5; - border-color: #d4d4d8; - color: #3f3f46; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #4338CA; - border-color: #4338CA; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - .fc.fc-theme-standard a { - color: #3f3f46; - } - .fc.fc-theme-standard .fc-highlight { - color: #312E81; - background: #EEF2FF; - } - .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -6286,6 +6003,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; @@ -6388,9 +6108,9 @@ padding: 1.25rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 24c96a86c34..e6c72a5e70c 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -171,14 +171,113 @@ --primary-900:#284862; } +.p-editor-container .p-editor-toolbar { + background: #1f2d40; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1f2d40; + border: 1px solid #304562; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-content .ql-editor { + background: #17212f; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #64B5F6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #64B5F6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1f2d40; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1f2d40; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1f2d40; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1f2d40; - border: 1px solid #304562; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-content .ql-editor { - background: #17212f; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #64B5F6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #64B5F6; - } - .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #17212f; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #43a5f4; - border: 1px solid #43a5f4; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1f2d40; - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #43a5f4; - color: #212529; - border-color: #43a5f4; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #2396f2; - color: #212529; - border-color: #2396f2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1f2d40; - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #304562; - padding: 1rem; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #304562; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #43a5f4; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #43a5f4; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #43a5f4; - color: #212529; - border-color: #43a5f4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #2396f2; - color: #212529; - border-color: #2396f2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #64B5F6; - border: 1px solid #64B5F6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(100, 181, 246, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 0ec38033bdf..c5d375400c5 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -171,14 +171,113 @@ --primary-900:#345035; } +.p-editor-container .p-editor-toolbar { + background: #1f2d40; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1f2d40; + border: 1px solid #304562; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-content .ql-editor { + background: #17212f; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #81C784; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #81C784; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1f2d40; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1f2d40; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1f2d40; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1f2d40; - border: 1px solid #304562; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-content .ql-editor { - background: #17212f; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #81C784; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #81C784; - } - .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #17212f; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #6abd6e; - border: 1px solid #6abd6e; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1f2d40; - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #81C784; - border: 1px solid #81C784; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #6abd6e; - color: #212529; - border-color: #6abd6e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #54b358; - color: #212529; - border-color: #54b358; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1f2d40; - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #304562; - padding: 1rem; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #304562; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #6abd6e; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #6abd6e; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #81C784; - border: 1px solid #81C784; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #6abd6e; - color: #212529; - border-color: #6abd6e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #54b358; - color: #212529; - border-color: #54b358; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #81C784; - border: 1px solid #81C784; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(129, 199, 132, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index f4399a81015..06f3fc2ad33 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -171,14 +171,113 @@ --primary-900:#665520; } +.p-editor-container .p-editor-toolbar { + background: #1f2d40; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1f2d40; + border: 1px solid #304562; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-content .ql-editor { + background: #17212f; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #FFD54F; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #FFD54F; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1f2d40; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1f2d40; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1f2d40; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1f2d40; - border: 1px solid #304562; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-content .ql-editor { - background: #17212f; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #FFD54F; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #FFD54F; - } - .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #17212f; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #ffcd2e; - border: 1px solid #ffcd2e; - color: #212529; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1f2d40; - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #ffcd2e; - color: #212529; - border-color: #ffcd2e; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #ffc50c; - color: #212529; - border-color: #ffc50c; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1f2d40; - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #304562; - padding: 1rem; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #304562; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #212529; - background: #ffcd2e; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #212529; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #ffcd2e; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #ffcd2e; - color: #212529; - border-color: #ffcd2e; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #ffc50c; - color: #212529; - border-color: #ffc50c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #212529; - background: #FFD54F; - border: 1px solid #FFD54F; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 213, 79, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index c975ac8caa6..8f84fba7f52 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -171,14 +171,113 @@ --primary-900:#4a2a50; } +.p-editor-container .p-editor-toolbar { + background: #1f2d40; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #1f2d40; + border: 1px solid #304562; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 3px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #304562; +} +.p-editor-container .p-editor-content .ql-editor { + background: #17212f; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #BA68C8; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #BA68C8; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -210,9 +309,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 3px; } .p-link:focus-visible { @@ -269,9 +368,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -769,9 +868,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -833,7 +932,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -848,6 +947,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-dropdown.p-invalid.p-component { + border-color: #ef9a9a; + } .p-dropdown-panel { background: #1f2d40; @@ -889,14 +991,16 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.09); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(255, 255, 255, 0.03); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -905,9 +1009,10 @@ background: #1f2d40; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #ef9a9a; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -923,105 +1028,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #1f2d40; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #1f2d40; - border: 1px solid #304562; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 3px; - padding: 0.5rem 0; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 1px solid #304562; - } - .p-editor-container .p-editor-content .ql-editor { - background: #17212f; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #BA68C8; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #BA68C8; - } - .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1171,8 +1177,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #17212f; @@ -3153,295 +3159,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 1px solid #304562; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #b052c0; - border: 1px solid #b052c0; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #1f2d40; - border: 1px solid #304562; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #b052c0; - color: #ffffff; - border-color: #b052c0; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #a241b2; - color: #ffffff; - border-color: #a241b2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #1f2d40; - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #304562; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 1px solid #304562; - padding: 1rem; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 1px solid #304562; - background: #1f2d40; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #b052c0; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #b052c0; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #1f2d40; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - font-size: 1rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #b052c0; - color: #ffffff; - border-color: #b052c0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #a241b2; - color: #ffffff; - border-color: #a241b2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #ffffff; - background: #BA68C8; - border: 1px solid #BA68C8; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #1f2d40; - border: 1px solid #304562; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(186, 104, 200, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6251,6 +5968,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; @@ -6353,9 +6073,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 7e9a6258709..0d9c59fd11f 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -203,14 +203,113 @@ --primary-900:#3f455c; } +.p-editor-container .p-editor-toolbar { + background: #161d21; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 2px solid #263238; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #161d21; + border: 1px solid #263238; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.5rem 0.5rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 2px solid #263238; +} +.p-editor-container .p-editor-content .ql-editor { + background: #0e1315; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #9eade6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #9eade6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #9eade6; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #9eade6; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -242,9 +341,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -301,9 +400,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -801,9 +900,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -865,7 +964,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -880,6 +979,9 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f78c79; + } .p-dropdown-panel { background: #161d21; @@ -921,14 +1023,16 @@ color: #9eade6; background: rgba(158, 173, 230, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(158, 173, 230, 0.08); + background: rgba(158, 173, 230, 0.1); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: transparent; + background: rgba(158, 173, 230, 0.08); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -937,9 +1041,10 @@ background: #161d21; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f78c79; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; } .p-input-filled .p-dropdown { @@ -955,105 +1060,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #161d21; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 2px solid #263238; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: rgba(255, 255, 255, 0.6); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #161d21; - border: 1px solid #263238; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.5rem 0.5rem; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(158, 173, 230, 0.08); - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 2px solid #263238; - } - .p-editor-container .p-editor-content .ql-editor { - background: #0e1315; - color: rgba(255, 255, 255, 0.87); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: rgba(255, 255, 255, 0.87); - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #9eade6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #9eade6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #9eade6; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #9eade6; - } - .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1203,8 +1209,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #0e1315; @@ -3185,295 +3191,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #161d21; - border: 2px solid #263238; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #161d21; - border: 2px solid #263238; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 2px solid #263238; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 2px solid #263238; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #8fa0e2; - border: 2px solid #8fa0e2; - color: #121212; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #161d21; - border: 2px solid #263238; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #121212; - background: #9eade6; - border: 2px solid #9eade6; - font-size: 1rem; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #8fa0e2; - color: #121212; - border-color: #8fa0e2; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #7f93de; - color: #121212; - border-color: #7f93de; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #161d21; - border: 2px solid #263238; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(158, 173, 230, 0.08); - border-color: #263238; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: rgba(158, 173, 230, 0.16); - border-color: rgba(158, 173, 230, 0.16); - color: #9eade6; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: rgba(158, 173, 230, 0.24); - border-color: rgba(158, 173, 230, 0.24); - color: #9eade6; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #263238; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #161d21; - border-color: #263238; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness td { - color: rgba(255, 255, 255, 0.87); - border-color: #263238; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #161d21; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 2px solid #263238; - padding: 1rem; - background: #161d21; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(158, 173, 230, 0.08); - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 2px solid #263238; - background: #161d21; - color: rgba(255, 255, 255, 0.87); - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #121212; - background: #8fa0e2; - border-color: #8fa0e2; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #121212; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #8fa0e2; - border-color: #8fa0e2; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(158, 173, 230, 0.08); - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #161d21; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #121212; - background: #9eade6; - border: 2px solid #9eade6; - font-size: 1rem; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #8fa0e2; - color: #121212; - border-color: #8fa0e2; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #7f93de; - color: #121212; - border-color: #7f93de; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.4; - color: #121212; - background: #9eade6; - border: 2px solid #9eade6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #161d21; - border: 2px solid #263238; - color: rgba(255, 255, 255, 0.87); - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: rgba(158, 173, 230, 0.08); - border-color: #263238; - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: rgba(158, 173, 230, 0.16); - border-color: rgba(158, 173, 230, 0.16); - color: #9eade6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: rgba(158, 173, 230, 0.24); - border-color: rgba(158, 173, 230, 0.24); - color: #9eade6; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: rgba(255, 255, 255, 0.87); - } - .fc.fc-theme-standard .fc-highlight { - color: #9eade6; - background: rgba(158, 173, 230, 0.16); - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6283,6 +6000,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6385,9 +6105,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index df3d9b9655d..bd8e7ab0824 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -204,14 +204,113 @@ --primary-900:#222e55; } +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 2px solid #ebebeb; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.5rem 0.5rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 2px solid #ebebeb; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #6c6c6c; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #6c6c6c; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #6c6c6c; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: #5472d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: #5472d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: #5472d4; +} +.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: #5472d4; +} + @layer primeng { * { box-sizing: border-box; } .p-component { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -243,9 +342,9 @@ } .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; border-radius: 6px; } .p-link:focus-visible { @@ -302,9 +401,9 @@ padding: 0.25rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #6c6c6c; padding: 0; margin: 0; @@ -802,9 +901,9 @@ padding: 0.25rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #6c6c6c; padding: 0; margin: 0; @@ -866,7 +965,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #898989; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -881,6 +980,9 @@ color: #898989; right: 2.857rem; } + .p-dropdown.p-invalid.p-component { + border-color: #f88c79; + } .p-dropdown-panel { background: #ffffff; @@ -922,14 +1024,16 @@ color: #585858; background: #ced6f1; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #aebbe8; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #6c6c6c; - background: #edf0fA; + background: #e6e9f3; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.5rem 1rem; + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #6c6c6c; - background: transparent; + background: #edf0fA; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -938,9 +1042,10 @@ background: #ffffff; font-weight: 600; } - - p-dropdown.ng-dirty.ng-invalid > .p-dropdown { - border-color: #f88c79; + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #6c6c6c; + background: transparent; } .p-input-filled .p-dropdown { @@ -956,105 +1061,6 @@ background-color: transparent; } - .p-editor-container .p-editor-toolbar { - background: #ffffff; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - .p-editor-container .p-editor-toolbar.ql-snow { - border: 2px solid #ebebeb; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { - stroke: #898989; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { - fill: #898989; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: #898989; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - border-radius: 6px; - padding: 0.5rem 0.5rem; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: #6c6c6c; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - color: #6c6c6c; - background: #edf0fA; - } - .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 1rem; - } - .p-editor-container .p-editor-content { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .p-editor-content.ql-snow { - border: 2px solid #ebebeb; - } - .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; - color: #6c6c6c; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - } - .p-editor-container .ql-snow.ql-toolbar button:hover, -.p-editor-container .ql-snow.ql-toolbar button:focus { - color: #6c6c6c; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: #6c6c6c; - } - .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { - fill: #6c6c6c; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #5472d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #5472d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #5472d4; - } - .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #5472d4; - } - .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1204,8 +1210,8 @@ } .p-inputtext { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #6c6c6c; background: #ffffff; @@ -3186,295 +3192,6 @@ padding: 1rem; } - .fc { - /* FullCalendar 4 */ - /* FullCalendar 5 */ - } - .fc.fc-unthemed .fc-view-container th { - background: #ffffff; - border: 2px solid #ebebeb; - color: #6c6c6c; - } - .fc.fc-unthemed .fc-view-container td.fc-widget-content { - background: #ffffff; - border: 2px solid #ebebeb; - color: #6c6c6c; - } - .fc.fc-unthemed .fc-view-container td.fc-head-container { - border: 2px solid #ebebeb; - } - .fc.fc-unthemed .fc-view-container .fc-row { - border-right: 2px solid #ebebeb; - } - .fc.fc-unthemed .fc-view-container .fc-event { - background: #4868d1; - border: 2px solid #4868d1; - color: #ffffff; - } - .fc.fc-unthemed .fc-view-container .fc-divider { - background: #ffffff; - border: 2px solid #ebebeb; - } - .fc.fc-unthemed .fc-toolbar .fc-button { - color: #ffffff; - background: #5472d4; - border: 2px solid #5472d4; - font-size: 1rem; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - border-radius: 6px; - display: flex; - align-items: center; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { - background: #4868d1; - color: #ffffff; - border-color: #4868d1; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { - background: #3c5ece; - color: #ffffff; - border-color: #3c5ece; - } - .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-unthemed .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 2px solid #e1e1e1; - color: #6c6c6c; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #edf0fA; - border-color: #e1e1e1; - color: #6c6c6c; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #ced6f1; - border-color: #ced6f1; - color: #585858; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #bdc7ec; - border-color: #bdc7ec; - color: #585858; - } - .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - z-index: 1; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { - border-color: #ebebeb; - } - .fc.fc-theme-standard .fc-view-harness th { - background: #ffffff; - border-color: #ebebeb; - color: #6c6c6c; - } - .fc.fc-theme-standard .fc-view-harness td { - color: #6c6c6c; - border-color: #ebebeb; - } - .fc.fc-theme-standard .fc-view-harness .fc-view { - background: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover { - background: none; - border: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { - border: 2px solid #ebebeb; - padding: 1rem; - background: #ffffff; - color: #6c6c6c; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - font-family: "PrimeIcons" !important; - font-size: 1rem; - width: 2rem; - height: 2rem; - color: #898989; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { - content: "\e90b"; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:enabled:hover { - color: #6c6c6c; - border-color: transparent; - background: #edf0fA; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - } - .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { - padding: 1rem; - border: 2px solid #ebebeb; - background: #ffffff; - color: #6c6c6c; - border-top: 0 none; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { - color: #ffffff; - background: #4868d1; - border-color: #4868d1; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { - color: #ffffff; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { - background: #4868d1; - border-color: #4868d1; - } - .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: #edf0fA; - color: #6c6c6c; - } - .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { - background: #ffffff; - } - .fc.fc-theme-standard .fc-toolbar .fc-button { - color: #ffffff; - background: #5472d4; - border: 2px solid #5472d4; - font-size: 1rem; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - border-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { - background: #4868d1; - color: #ffffff; - border-color: #4868d1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { - background: #3c5ece; - color: #ffffff; - border-color: #3c5ece; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { - opacity: 0.6; - color: #ffffff; - background: #5472d4; - border: 2px solid #5472d4; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { - content: "\e900"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { - font-family: "PrimeIcons" !important; - text-indent: 0; - font-size: 1rem; - } - .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { - content: "\e901"; - } - .fc.fc-theme-standard .fc-toolbar .fc-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { - background: #ffffff; - border: 2px solid #e1e1e1; - color: #6c6c6c; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { - background: #edf0fA; - border-color: #e1e1e1; - color: #6c6c6c; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { - background: #ced6f1; - border-color: #ced6f1; - color: #585858; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { - background: #bdc7ec; - border-color: #bdc7ec; - color: #585858; - } - .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - z-index: 1; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { - border-radius: 0; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - .fc.fc-theme-standard a { - color: #6c6c6c; - } - .fc.fc-theme-standard .fc-highlight { - color: #585858; - background: #ced6f1; - } - .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -6284,6 +6001,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-chip .pi-chip-remove-icon:focus { + outline: 0 none; + } .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; @@ -6386,9 +6106,9 @@ padding: 1rem; } .p-terminal .p-terminal-input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; } } /* Customizations to the designer theme should be defined here */ diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index 83cfe18a8d7..46e4e1c918f 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -312,10 +312,6 @@ "name": "PanelMenu", "routerLink": "/panelmenu" }, - { - "name": "SlideMenu", - "routerLink": "/slidemenu" - }, { "name": "Steps", "routerLink": "/steps" @@ -545,6 +541,11 @@ } ] }, + { + "name": "PrimeTV", + "icon": "pi pi-youtube", + "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" + }, { "name": "Discover", "icon": "pi pi-search", @@ -557,10 +558,6 @@ "name": "Roadmap", "routerLink": "/roadmap" }, - { - "name": "PrimeTV", - "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" - }, { "name": "Source Code", "href": "https://github.com/primefaces/primeng" diff --git a/src/assets/showcase/styles/layout/_doc.scss b/src/assets/showcase/styles/layout/_doc.scss index 3e7e6303575..594883d5f8a 100644 --- a/src/assets/showcase/styles/layout/_doc.scss +++ b/src/assets/showcase/styles/layout/_doc.scss @@ -1,7 +1,7 @@ .doc-tabmenu { list-style: none; margin: 0 17rem 0 0; - padding: 0; + padding: 0 0 1px 0; display: flex; margin-bottom: 2rem; border-bottom: 1px solid var(--surface-border); @@ -14,7 +14,7 @@ background-color: transparent; border: 0 none; display: block; - padding: 1rem 0; + padding: 1rem 2rem; min-width: 12rem; text-align: center; color: var(--surface-700); @@ -63,11 +63,12 @@ } .doc-intro { - margin-bottom: 2rem; + margin-bottom: 1.5rem; p { font-size: 1.125rem; color: var(--surface-900); + margin: 0; } } @@ -179,11 +180,11 @@ overflow: hidden; text-overflow: ellipsis; transition: all .2s; + } - &:hover { - .px-link { - color: var(--surface-900); - } + &:hover { + .px-link { + color: var(--surface-900); } } } @@ -212,6 +213,17 @@ } } +.doc-section-code-buttons { + gap: .75rem; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + + .p-button-label { + font-weight: normal; + font-size: 0.875rem; + } +} + .doc-section-code-tooltip .p-tooltip-text { padding: 0.5rem; font-size: 11px; @@ -224,19 +236,12 @@ } } - .p-button-label { - font-weight: normal; - font-size: 0.875rem; - } - - .doc-section-code-active { - .p-button-label { - font-weight: bold; - } + pre { + margin: 0; } - pre { - margin: 0 0 1.5rem 0; + &:not(:last-child) { + margin-bottom: 1rem; } } @@ -254,7 +259,7 @@ th { border-bottom: 1px solid var(--surface-border); - padding: 1rem; + padding: .75rem 1rem; text-align: left; text-transform: capitalize; } @@ -265,37 +270,40 @@ } td { - padding: 1rem; + padding: .75rem 1rem; border-bottom: 1px solid var(--surface-border); - white-space: pre-wrap; + white-space: pre-line; line-height: 1.5; + scroll-margin-top: 6.5rem; - &.doc-option-type { + &:first-child { + color: var(--primary-color); + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + } + + .doc-option-type { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; color: var(--primary-500); + font-weight: 500; - > a { - color: var(--primary-500); + .doc-option-type-options-container { + display: flex; + align-items: center; + } + span.doc-option-type-options { + color: var(--primary-700); + } + + &.doc-option-link { &:hover { text-decoration: underline; } } } - &.doc-option-default { - font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - color: var(--primary-color); - } - - &:first-child { - color: var(--primary-color); - font-weight: 700; - font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - } - .doc-option-name, - > i { + > i:not(.pi) { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; position: relative; scroll-margin-top: 6.5rem; @@ -305,6 +313,7 @@ padding: 2px 6px; font-weight: 600; font-style: normal; + white-space: nowrap; .doc-option-link { position: absolute; @@ -328,6 +337,43 @@ } } } + + .doc-option-default, + .doc-option-returnType { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + font-weight: 400; + font-style: normal; + display: flex; + border-width: 1px; + border-style: solid; + border-radius: 6px; + padding: 2px 6px; + max-width: min-content; + } + + .doc-option-parameter-name { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + color: var(--primary-700); + } + + .doc-option-parameter-type { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + color: var(--primary-500); + } + + .doc-option-params { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + } + + .doc-option-light { + background: var(--bluegray-50); + border-color: var(--bluegray-100); + } + + .doc-option-dark { + background: var(--bluegray-800); + border-color: var(--bluegray-800); + } } } }
    + @@ -73,7 +73,7 @@ export class EditDoc implements OnInit {
    + @@ -98,7 +98,7 @@ export class EditDoc implements OnInit {
    + diff --git a/src/app/showcase/doc/treetable/filterdoc.ts b/src/app/showcase/doc/treetable/filterdoc.ts index 89fcbd47a6e..bcfa32c6835 100644 --- a/src/app/showcase/doc/treetable/filterdoc.ts +++ b/src/app/showcase/doc/treetable/filterdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'filter-doc', - template: `
    + template: `

    The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in diff --git a/src/app/showcase/doc/treetable/importdoc.ts b/src/app/showcase/doc/treetable/importdoc.ts index 57734b6bf5d..cd1a36a5fcd 100644 --- a/src/app/showcase/doc/treetable/importdoc.ts +++ b/src/app/showcase/doc/treetable/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

    + template: `
    ` diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts index c2b0fa13da9..1c7e6ed82aa 100644 --- a/src/app/showcase/doc/treetable/lazyloaddoc.ts +++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'lazy-load-doc', - template: `
    + template: `

    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering occurs. Sample below diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts index 13b4a21c354..8357cc26e80 100644 --- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-basic-doc', - template: `

    + template: `

    Pagination is enabled by adding paginator property and defining rows per page.

     diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts index 79f7466dde3..84e49760e19 100644 --- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-locale-doc', - template: `
    + template: `

    paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.

     diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts index dd5b54aa850..9c3e4726a6d 100644 --- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts +++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-template-doc', - template: `
    + template: `

    Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts index d11e78438c3..323df0f84f1 100644 --- a/src/app/showcase/doc/treetable/reorderdoc.ts +++ b/src/app/showcase/doc/treetable/reorderdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'reorder-doc', - template: `

    + template: `

    Order of the columns can be changed using drag and drop when reorderableColumns is present.

     diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts index f13a6ae335f..d96cbcc746e 100644 --- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-frozen-columns-doc', - template: `
    + template: `

    A column can be fixed during horizontal scrolling by enabling the frozenColumns property.

     diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts index 443c5b37154..fa8f12bd977 100644 --- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-horizontal-doc', - template: `
    + template: `

    Horizontal scrolling is enabled when the total width of columns exceeds table width.

     diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts index ccd4dd0d1e6..89cb1992384 100644 --- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-vertical-doc', - template: `
    + template: `

    Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

     diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts index 33270be74d0..5f2f703678f 100644 --- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts +++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-checkbox-doc', - template: `
    + template: `

    Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

    In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.

    diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts index a6dfa9df59f..a243b00c3d4 100644 --- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts +++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts @@ -15,7 +15,7 @@ interface NodeEvent { @Component({ selector: 'selection-events-doc', - template: `
    + template: `

    TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events.

     diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts index f36f6e30711..8ac7bb7286d 100644 --- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts +++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-multiple-doc', - template: `
    + template: `

    More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts index 6e72edce46e..f643c279aeb 100644 --- a/src/app/showcase/doc/treetable/selectionsingledoc.ts +++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-single-doc', - template: `

    + template: `

    Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding.

    diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts index c3041ff8816..73fdbfd73c0 100644 --- a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'sort-multiple-column-doc', - template: `

    + template: `

    Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

     diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts index 66dfca0a976..9eba25d4e50 100644 --- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'sort-single-column-doc', - template: `
    + template: `

    Sorting on a column is enabled by adding the ttSortableColumn property.

     diff --git a/src/app/showcase/doc/treetable/styledoc.ts b/src/app/showcase/doc/treetable/styledoc.ts index ee1800258f3..b89ffa04062 100644 --- a/src/app/showcase/doc/treetable/styledoc.ts +++ b/src/app/showcase/doc/treetable/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts index 8408bd38428..67571496800 100644 --- a/src/app/showcase/doc/treetable/templatedoc.ts +++ b/src/app/showcase/doc/treetable/templatedoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'template-doc', - template: `
    + template: `

    Custom content at caption, header, body and summary sections are supported via templating.

     diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts index e6e63baeca0..e366a891bd1 100644 --- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
    + template: `

    A model can be bound using the standard ngModel directive.

     diff --git a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts index 34489bad942..84020357332 100644 --- a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
    + template: `

    When disabled is present, the element cannot be edited and focused.

     diff --git a/src/app/showcase/doc/tristatecheckbox/importdoc.ts b/src/app/showcase/doc/tristatecheckbox/importdoc.ts index 4db48b46b6a..4db4299a197 100644 --- a/src/app/showcase/doc/tristatecheckbox/importdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts index d204dd12408..5e75a3ddece 100644 --- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
    + template: `

    TriStateCheckbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

     diff --git a/src/app/showcase/doc/tristatecheckbox/styledoc.ts b/src/app/showcase/doc/tristatecheckbox/styledoc.ts index 5ba6b0d23de..2f5c2c322be 100644 --- a/src/app/showcase/doc/tristatecheckbox/styledoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/virtualscroller/basicdoc.ts b/src/app/showcase/doc/virtualscroller/basicdoc.ts index 2eea81bfe5b..028d2b2421a 100644 --- a/src/app/showcase/doc/virtualscroller/basicdoc.ts +++ b/src/app/showcase/doc/virtualscroller/basicdoc.ts @@ -7,7 +7,7 @@ interface Item { } @Component({ selector: 'basic-doc', - template: `
    + template: `

    VirtualScroller requires value as the data to display, itemSize for the dimensions of an item and pTemplate to define the content per item. Size of the viewport is configured using scrollWidth, diff --git a/src/app/showcase/doc/virtualscroller/importdoc.ts b/src/app/showcase/doc/virtualscroller/importdoc.ts index 1736b6ea9c3..598ab2f4a6c 100644 --- a/src/app/showcase/doc/virtualscroller/importdoc.ts +++ b/src/app/showcase/doc/virtualscroller/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

    + template: `
    ` diff --git a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts index 46b70e02e32..57ef61f49eb 100644 --- a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts +++ b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'lazy-load-doc', - template: `
    + template: `

    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the lazy property and implement onLazyLoad callback to diff --git a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts index ac10d124207..6b7757917bf 100644 --- a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts +++ b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts @@ -8,7 +8,7 @@ interface Item { } @Component({ selector: 'programmatic-scroll-doc', - template: `

    + template: `

    Scrolling to a specific index can be done with the scrollToIndex function.

     diff --git a/src/app/showcase/doc/virtualscroller/styledoc.ts b/src/app/showcase/doc/virtualscroller/styledoc.ts index 4b79aa6fd27..cc6b4c70b71 100644 --- a/src/app/showcase/doc/virtualscroller/styledoc.ts +++ b/src/app/showcase/doc/virtualscroller/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
    + template: `

    Following is the list of structural style classes, for theming classes visit theming page.

     diff --git a/src/app/showcase/doc/virtualscroller/templatedoc.ts b/src/app/showcase/doc/virtualscroller/templatedoc.ts index ce4b636a00f..fd3cd49e7a5 100644 --- a/src/app/showcase/doc/virtualscroller/templatedoc.ts +++ b/src/app/showcase/doc/virtualscroller/templatedoc.ts @@ -8,7 +8,7 @@ interface Item { @Component({ selector: 'template-doc', - template: `
    + template: `

    Header and Footer are the two sections that are capable of displaying custom content by using header and footer templates.

     diff --git a/src/app/showcase/layout/app-routing.module.ts b/src/app/showcase/layout/app-routing.module.ts index a6ba2debba5..a1017a986a9 100644 --- a/src/app/showcase/layout/app-routing.module.ts +++ b/src/app/showcase/layout/app-routing.module.ts @@ -87,7 +87,6 @@ const routes: Routes = [ { path: 'selectbutton', loadChildren: () => import('../pages/selectbutton/selectbuttondemo.module').then((m) => m.SelectButtonDemoModule) }, { path: 'sidebar', loadChildren: () => import('../pages/sidebar/sidebardemo.module').then((m) => m.SidebarDemoModule) }, { path: 'skeleton', loadChildren: () => import('../pages/skeleton/skeletondemo.module').then((m) => m.SkeletonDemoModule) }, - { path: 'slidemenu', loadChildren: () => import('../pages/slidemenu/slidemenudemo.module').then((m) => m.SlideMenuDemoModule) }, { path: 'slider', loadChildren: () => import('../pages/slider/sliderdemo.module').then((m) => m.SliderDemoModule) }, { path: 'speeddial', loadChildren: () => import('../pages/speeddial/speeddialdemo.module').then((m) => m.SpeedDialDemoModule) }, { path: 'splitbutton', loadChildren: () => import('../pages/splitbutton/splitbuttondemo.module').then((m) => m.SplitButtonDemoModule) }, diff --git a/src/app/showcase/layout/doc/code/app.code.component.html b/src/app/showcase/layout/doc/code/app.code.component.html index 2ff073e36e9..94b6595efe6 100644 --- a/src/app/showcase/layout/doc/code/app.code.component.html +++ b/src/app/showcase/layout/doc/code/app.code.component.html @@ -2,12 +2,12 @@
    diff --git a/src/app/showcase/layout/doc/code/app.code.component.ts b/src/app/showcase/layout/doc/code/app.code.component.ts index 66aadff4ce8..95065c107fd 100644 --- a/src/app/showcase/layout/doc/code/app.code.component.ts +++ b/src/app/showcase/layout/doc/code/app.code.component.ts @@ -3,7 +3,7 @@ import { Component, ElementRef, Input, NgModule, ViewChild } from '@angular/core import { ButtonModule } from 'primeng/button'; import { TooltipModule } from 'primeng/tooltip'; import { Code, ExtFile, RouteFile } from 'src/app/showcase/domain/code'; -import { useStackBlitz, useCodeSandbox } from '../codeeditor'; +import { useCodeSandbox, useStackBlitz } from '../codeeditor'; @Component({ selector: 'app-code', @@ -36,6 +36,7 @@ export class AppCodeComponent { if (typeof window !== undefined && window['Prism'] && this.codeElement && !this.codeElement.nativeElement.classList.contains('prism')) { window['Prism'].highlightElement(this.codeElement.nativeElement); this.codeElement.nativeElement.classList.add('prism'); + this.codeElement.nativeElement.parentElement.setAttribute('tabindex', '-1'); } } diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index f3815052cc9..30546dd1438 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -15,7 +15,7 @@ export interface Props { const app_dependencies = pkg ? pkg.devDependencies : {}; const PrimeNG = { - version: '16.4.1', + version: '16.5.0', description: 'PrimeNG is an open source UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.' }; diff --git a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html index c805f8e12be..40f56e39d21 100644 --- a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html +++ b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html @@ -19,24 +19,40 @@
    - - {{entry[1] || '-'}} - {{entry[1] || '-'}} + + + {{entry[1] || '-'}} + {{entry[1] || '-'}} - - {{entry[1].name}} : - {{i !== 0 ? ' |' : ' ' }} {{value || '-'}} +
    + {{entry[1].name}} + : + {{i !== 0 + ? ' |' : ' ' }} {{value || '-'}} - {{value}} + {{value}} - +
    - - + null     - {{entry[1]}} + {{ entry[1] }}