diff --git a/CHANGELOG.md b/CHANGELOG.md index c3e96a3f..b04b265d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 3.7.0 (2023-05-06) + +- Upgrade to PrimeVue 3.28.0 + +**Implemented New Features and Enhancements** + ## 3.6.0 (2023-04-12) **Implemented New Features and Enhancements** diff --git a/package-lock.json b/package-lock.json index 32a8a3fa..8640fda1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "sakai-vue", - "version": "3.6.0", + "version": "3.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "sakai-vue", - "version": "3.6.0", + "version": "3.7.0", "dependencies": { "chart.js": "3.3.2", "primeflex": "^3.2.1", "primeicons": "^6.0.1", - "primevue": "3.26.1", + "primevue": "3.28.0", "vue": "^3.2.41", "vue-router": "^4.1.5" }, @@ -1842,11 +1842,10 @@ "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" }, "node_modules/primevue": { - "version": "3.26.1", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.26.1.tgz", - "integrity": "sha512-I10mYyKMl0GF0KfIZK+psCpifzE6vTW8lvlgB8ukmYghKUmU1Ii879OgD7a8xWM8ijoEaO4mYZ18XXVpQ3xScw==", + "version": "3.28.0", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.28.0.tgz", + "integrity": "sha512-yLHvmtTUvO4znfQqcOYHO8H/l0sBHqfvzPAhu4rKNSRjyrj/KO1cP0S+1aa5zGsspaKxXfi2bhhzwSDD0xXwgA==", "peerDependencies": { - "primeicons": "^5.0.0 || ^6.0.0", "vue": "^3.0.0" } }, @@ -3581,9 +3580,9 @@ "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" }, "primevue": { - "version": "3.26.1", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.26.1.tgz", - "integrity": "sha512-I10mYyKMl0GF0KfIZK+psCpifzE6vTW8lvlgB8ukmYghKUmU1Ii879OgD7a8xWM8ijoEaO4mYZ18XXVpQ3xScw==", + "version": "3.28.0", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.28.0.tgz", + "integrity": "sha512-yLHvmtTUvO4znfQqcOYHO8H/l0sBHqfvzPAhu4rKNSRjyrj/KO1cP0S+1aa5zGsspaKxXfi2bhhzwSDD0xXwgA==", "requires": {} }, "punycode": { diff --git a/package.json b/package.json index 1a69fbed..a0316874 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sakai-vue", - "version": "3.6.0", + "version": "3.7.0", "scripts": { "dev": "vite", "build": "vite build", @@ -11,7 +11,7 @@ "chart.js": "3.3.2", "primeflex": "^3.2.1", "primeicons": "^6.0.1", - "primevue": "3.26.1", + "primevue": "3.28.0", "vue": "^3.2.41", "vue-router": "^4.1.5" }, diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 1e9facc7..1f294ab4 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #93cbf9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(100, 181, 246, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #64B5F6; background: #64B5F6; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #242424; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #93cbf9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #383838; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 63cd51c6..2f2fb752 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #a7d8a9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(129, 199, 132, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #81C784; background: #81C784; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #242424; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a7d8a9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #383838; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 0199d07b..8dc9d543 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #ffe284; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(255, 213, 79, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFD54F; background: #FFD54F; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #242424; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe284; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #383838; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 80d763ff..c2949657 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #cf95d9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(186, 104, 200, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #BA68C8; background: #BA68C8; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #242424; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #cf95d9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #383838; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #383838; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #383838; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 8b946c1c..0817a7c3 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.04); --focus-ring: 0 0 0 1px #e3f3fe; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #8dd0ff; + --highlight-text-color: #151515; color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #151515; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #8dd0ff; background: #8dd0ff; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8dd0ff; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f19ea6; } @@ -1121,6 +1132,7 @@ color: #f19ea6; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1134,6 +1146,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1492,6 +1505,10 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 2px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #2f3641; @@ -3248,6 +3304,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3261,15 +3318,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; background: #8dd0ff; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #64bfff; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3421,6 +3480,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3434,15 +3494,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; background: #8dd0ff; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #64bfff; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e3f3fe; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #8dd0ff; color: #151515; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3958,15 +4029,19 @@ border: 1px solid #3f4b5b; background: #2a323d; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1.25rem; border: 1px solid #3f4b5b; background: #2a323d; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4066,6 +4141,7 @@ border: 1px solid #3f4b5b; padding: 1rem 1.25rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4111,6 +4187,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4180,7 +4260,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4401,6 +4481,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4454,6 +4535,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4540,6 +4625,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4658,6 +4744,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4769,6 +4856,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4929,6 +5017,7 @@ transition: box-shadow 0.15s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; font-weight: 600; } @@ -4981,6 +5070,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5178,6 +5268,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5231,6 +5322,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.75rem; @@ -5362,6 +5457,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 1; @@ -5381,6 +5480,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5455,6 +5558,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5472,6 +5579,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); @@ -5555,6 +5666,10 @@ color: #f8f9fa; transition: color 0.15s, box-shadow 0.15s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5583,6 +5698,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #3f4b5b; @@ -5713,6 +5832,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #721c24; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #721c24; + } + 40% { + stroke: #004085; + } + 66% { + stroke: #155724; + } + 80%, 90% { + stroke: #856404; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5730,6 +5894,10 @@ font-size: 1.5rem; color: #151515; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5767,6 +5935,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #2a323d; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 373f9887..6432a0fc 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.04); --focus-ring: 0 0 0 1px #f0e6f5; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #c298d8; + --highlight-text-color: #151515; color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #151515; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #c298d8; background: #c298d8; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c298d8; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f19ea6; } @@ -1121,6 +1132,7 @@ color: #f19ea6; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1134,6 +1146,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1492,6 +1505,10 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 2px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #2f3641; @@ -3248,6 +3304,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3261,15 +3318,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; background: #c298d8; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #b07acd; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3421,6 +3480,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3434,15 +3494,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; background: #c298d8; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #b07acd; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #f0e6f5; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #c298d8; color: #151515; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3958,15 +4029,19 @@ border: 1px solid #3f4b5b; background: #2a323d; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1.25rem; border: 1px solid #3f4b5b; background: #2a323d; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4066,6 +4141,7 @@ border: 1px solid #3f4b5b; padding: 1rem 1.25rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4111,6 +4187,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4180,7 +4260,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4401,6 +4481,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4454,6 +4535,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4540,6 +4625,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4658,6 +4744,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4769,6 +4856,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4929,6 +5017,7 @@ transition: box-shadow 0.15s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; font-weight: 600; } @@ -4981,6 +5070,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5178,6 +5268,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5231,6 +5322,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.75rem; @@ -5362,6 +5457,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 1; @@ -5381,6 +5480,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5455,6 +5558,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5472,6 +5579,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); @@ -5555,6 +5666,10 @@ color: #f8f9fa; transition: color 0.15s, box-shadow 0.15s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5583,6 +5698,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #3f4b5b; @@ -5713,6 +5832,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #721c24; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #721c24; + } + 40% { + stroke: #004085; + } + 66% { + stroke: #155724; + } + 80%, 90% { + stroke: #856404; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5730,6 +5894,10 @@ font-size: 1.5rem; color: #151515; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5767,6 +5935,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #2a323d; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index a41d0996..3189352a 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:#e9ecef; --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #007bff; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #007bff; background: #007bff; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #007bff; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #dc3545; } @@ -1121,6 +1132,7 @@ color: #dc3545; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; @@ -1134,6 +1146,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; @@ -1492,6 +1505,10 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 2px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.05); @@ -3248,6 +3304,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3261,15 +3318,17 @@ background: #e9ecef; color: #212529; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007bff; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #0067d6; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.05); } @@ -3421,6 +3480,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3434,15 +3494,17 @@ background: #e9ecef; color: #212529; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007bff; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #0067d6; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.05); } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007bff; color: #ffffff; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 0 0; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3958,15 +4029,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #212529; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #212529; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4066,6 +4141,7 @@ border: 1px solid #dee2e6; padding: 1rem 1.25rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4111,6 +4187,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4180,7 +4260,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4401,6 +4481,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4454,6 +4535,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4540,6 +4625,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4658,6 +4744,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4769,6 +4856,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4929,6 +5017,7 @@ transition: box-shadow 0.15s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #212529; padding: 1rem 1.25rem; font-weight: 600; } @@ -4981,6 +5070,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -5178,6 +5268,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -5231,6 +5322,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.75rem; @@ -5362,6 +5457,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 1; @@ -5381,6 +5480,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5455,6 +5558,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5472,6 +5579,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5555,6 +5666,10 @@ color: #f8f9fa; transition: box-shadow 0.15s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5583,6 +5698,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5713,6 +5832,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #721c24; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #721c24; + } + 40% { + stroke: #004085; + } + 66% { + stroke: #155724; + } + 80%, 90% { + stroke: #856404; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5730,6 +5894,10 @@ font-size: 1.5rem; color: #efefef; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5767,6 +5935,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index f2f12c1d..77251d9a 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:#e9ecef; --focus-ring: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #883cae; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #883cae; background: #883cae; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #883cae; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #dc3545; } @@ -1121,6 +1132,7 @@ color: #dc3545; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; @@ -1134,6 +1146,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; @@ -1492,6 +1505,10 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 2px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.05); @@ -3248,6 +3304,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3261,15 +3318,17 @@ background: #e9ecef; color: #212529; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #883cae; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #703290; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.05); } @@ -3421,6 +3480,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3434,15 +3494,17 @@ background: #e9ecef; color: #212529; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #883cae; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #703290; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.05); } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #883cae; color: #ffffff; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 0 0; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3958,15 +4029,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #212529; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #212529; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4066,6 +4141,7 @@ border: 1px solid #dee2e6; padding: 1rem 1.25rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4111,6 +4187,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4180,7 +4260,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4401,6 +4481,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4454,6 +4535,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4540,6 +4625,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4658,6 +4744,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4769,6 +4856,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -4929,6 +5017,7 @@ transition: box-shadow 0.15s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #212529; padding: 1rem 1.25rem; font-weight: 600; } @@ -4981,6 +5070,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -5178,6 +5268,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #212529; padding: 0.75rem 1rem; user-select: none; } @@ -5231,6 +5322,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.75rem; @@ -5362,6 +5457,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 1; @@ -5381,6 +5480,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5455,6 +5558,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5472,6 +5579,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #efefef; @@ -5555,6 +5666,10 @@ color: #f8f9fa; transition: box-shadow 0.15s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5583,6 +5698,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5713,6 +5832,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #721c24; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #721c24; + } + 40% { + stroke: #004085; + } + 66% { + stroke: #155724; + } + 80%, 90% { + stroke: #856404; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5730,6 +5894,10 @@ font-size: 1.5rem; color: #efefef; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5767,6 +5935,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 5fcec085..1652edf4 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f3f2f1; --focus-ring: inset 0 0 0 1px #605e5c; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #edebe9; + --highlight-text-color: #323130; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #0078d4; background: #0078d4; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #005a9e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a4252c; } @@ -1117,6 +1128,7 @@ color: #a4252c; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #605e5c; @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #605e5c; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #faf9f8; @@ -3236,6 +3292,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.5rem; @@ -3249,15 +3306,17 @@ background: #f3f2f1; color: #323130; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #323130; + background: #e1dfdd; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #323130; background: #edebe9; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #e1dfdd; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #faf9f8; } @@ -3409,6 +3468,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.5rem; @@ -3422,15 +3482,17 @@ background: #f3f2f1; color: #323130; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #323130; + background: #e1dfdd; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #323130; background: #edebe9; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #e1dfdd; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #faf9f8; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #605e5c; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 2px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #323130; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #edebe9; color: #323130; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #a19f9d; background: #ffffff; color: #323130; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #a19f9d; background: #ffffff; color: #323130; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #a19f9d; padding: 1rem; border-radius: 2px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #323130; padding: 1rem; font-weight: 600; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #323130; padding: 0.75rem 0.5rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5301,6 +5396,10 @@ font-size: 1rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 1.25rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.25rem; + height: 1.25rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 600; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #edebe9; @@ -5652,6 +5771,51 @@ line-height: 2px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #323130; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #323130; + } + 40% { + stroke: #323130; + } + 66% { + stroke: #323130; + } + 80%, 90% { + stroke: #323130; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #faf9f8; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #edebe9; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 7134107a..1928220c 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(147, 197, 253, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #93C5FD; background: #93C5FD; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #7fbafd; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #FCA5A5; } @@ -1117,6 +1128,7 @@ color: #FCA5A5; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #0d1a2c; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(147, 197, 253, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(147, 197, 253, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(147, 197, 253, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(147, 197, 253, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(147, 197, 253, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #0b213f; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #93C5FD; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +} diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 84af8ced..c5a50b33 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(165, 180, 252, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #A5B4FC; background: #A5B4FC; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #91a3fb; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #FCA5A5; } @@ -1117,6 +1128,7 @@ color: #FCA5A5; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #0d1a2c; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(165, 180, 252, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(165, 180, 252, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(165, 180, 252, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #0b213f; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #A5B4FC; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(165, 180, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +} diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index e5c1e4cc..1923a415 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(196, 181, 253, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #C4B5FD; background: #C4B5FD; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b3a0fc; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #FCA5A5; } @@ -1117,6 +1128,7 @@ color: #FCA5A5; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #0d1a2c; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(196, 181, 253, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(196, 181, 253, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(196, 181, 253, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #0b213f; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #C4B5FD; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(196, 181, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +} diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index d4941b64..ae061107 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(94, 234, 212, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #1c2127; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #5EEAD4; background: #5EEAD4; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4fe8d0; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #FCA5A5; } @@ -1117,6 +1128,7 @@ color: #FCA5A5; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #0d1a2c; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(94, 234, 212, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(94, 234, 212, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(94, 234, 212, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(94, 234, 212, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(94, 234, 212, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #0b213f; background: #071426; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #0b213f; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #0b213f; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #071426; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #5EEAD4; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(94, 234, 212, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +} diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 7fd6cd56..33c23fe5 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #BFDBFE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EFF6FF; + --highlight-text-color: #1D4ED8; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3B82F6; background: #3B82F6; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #2563eb; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } @@ -1117,6 +1128,7 @@ color: #e24c4c; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #1D4ED8; background: #EFF6FF; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #fcfcfc; } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #1D4ED8; background: #EFF6FF; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #fcfcfc; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #BFDBFE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EFF6FF; color: #1D4ED8; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #dee2e6; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6c757d; padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3B82F6; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; +} diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 86fe99bc..3b2afeb6 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #C7D2FE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EEF2FF; + --highlight-text-color: #4338CA; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #6366F1; background: #6366F1; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4F46E5; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } @@ -1117,6 +1128,7 @@ color: #e24c4c; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #4338CA; background: #EEF2FF; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #E0E7FF; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #fcfcfc; } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #4338CA; background: #EEF2FF; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #E0E7FF; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #fcfcfc; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C7D2FE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #4338CA; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #dee2e6; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6c757d; padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #6366F1; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; +} diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index cfef9e38..61f9a38b 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #DDD6FE; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F5F3FF; + --highlight-text-color: #6D28D9; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #8B5CF6; background: #8B5CF6; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #7C3AED; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } @@ -1117,6 +1128,7 @@ color: #e24c4c; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #6D28D9; background: #F5F3FF; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #fcfcfc; } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #6D28D9; background: #F5F3FF; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #fcfcfc; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #DDD6FE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F5F3FF; color: #6D28D9; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #dee2e6; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6c757d; padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #8B5CF6; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; +} diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 2255e5b6..7b0745fb 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -42,6 +42,8 @@ --surface-hover:#f6f9fc; --focus-ring: 0 0 0 0.2rem #99F6E4; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F0FDFA; + --highlight-text-color: #0F766E; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #14B8A6; background: #14B8A6; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0D9488; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } @@ -1117,6 +1128,7 @@ color: #e24c4c; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99F6E4; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #0F766E; background: #F0FDFA; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #fcfcfc; } @@ -3409,6 +3468,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #0F766E; background: #F0FDFA; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #fcfcfc; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #99F6E4; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F0FDFA; color: #0F766E; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #dee2e6; padding: 1.25rem; border-radius: 6px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6c757d; padding: 1.25rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1.25rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5652,6 +5771,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dee2e6; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -5766,3 +5938,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #14B8A6; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; +} diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 9d15009c..a11544e6 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -42,6 +42,8 @@ --surface-hover:#4c4c4c; --focus-ring: 0 0 0 0.1rem white; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #FFE082; + --highlight-text-color: #212529; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFE082; background: #FFE082; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #FFD54F; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } @@ -1121,6 +1132,7 @@ color: #e57373; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #323232; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #4c4c4c; color: #dedede; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #FFE082; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #ffe081; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #323232; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #4c4c4c; color: #dedede; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #FFE082; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #ffe081; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #323232; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFE082; color: #212529; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #191919; background: #323232; color: #dedede; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #191919; background: #323232; color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #191919; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #dedede; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #4b4b4b; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #212529; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #323232; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e56d6cbe..fb7ee058 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:#4c4c4c; --focus-ring: 0 0 0 0.1rem white; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #81D4FA; + --highlight-text-color: #212529; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #81D4FA; background: #81D4FA; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4FC3F7; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } @@ -1121,6 +1132,7 @@ color: #e57373; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #323232; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #4c4c4c; color: #dedede; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #81D4FA; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #81d4fa; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #323232; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #4c4c4c; color: #dedede; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #81D4FA; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #81d4fa; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #323232; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #81D4FA; color: #212529; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #191919; background: #323232; color: #dedede; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #191919; background: #323232; color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #191919; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #dedede; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #4b4b4b; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #212529; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #323232; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 023a1882..1b99e0ae 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -42,6 +42,8 @@ --surface-hover:#4c4c4c; --focus-ring: 0 0 0 0.1rem white; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #C5E1A5; + --highlight-text-color: #212529; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #C5E1A5; background: #C5E1A5; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #AED581; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } @@ -1121,6 +1132,7 @@ color: #e57373; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #323232; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #4c4c4c; color: #dedede; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #C5E1A5; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #c5e1a5; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #323232; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #4c4c4c; color: #dedede; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #C5E1A5; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #c5e1a5; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #323232; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #C5E1A5; color: #212529; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #191919; background: #323232; color: #dedede; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #191919; background: #323232; color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #191919; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #dedede; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #4b4b4b; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #212529; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #323232; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 5ec03a37..a0676243 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -42,6 +42,8 @@ --surface-hover:#4c4c4c; --focus-ring: 0 0 0 0.1rem white; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F48FB1; + --highlight-text-color: #212529; color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #F48FB1; background: #F48FB1; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #F06292; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } @@ -1121,6 +1132,7 @@ color: #e57373; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #323232; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #4c4c4c; color: #dedede; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #F48FB1; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #f48fb1; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #323232; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #4c4c4c; color: #dedede; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #F48FB1; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #f48fb1; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #323232; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F48FB1; color: #212529; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #191919; background: #323232; color: #dedede; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #191919; background: #323232; color: #dedede; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #191919; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #dedede; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #dedede; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #4b4b4b; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #212529; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #323232; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index e973598f..84cb9570 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -42,6 +42,8 @@ --surface-hover:hsla(0,0%,100%,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(206, 147, 216, 0.16); + --highlight-text-color: #CE93D8; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } @@ -1141,6 +1152,7 @@ color: #f44435; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1154,6 +1166,7 @@ left: 3rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #222222; @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3273,15 +3330,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3446,15 +3506,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 1rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.5rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 1rem 1rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5742,6 +5906,10 @@ font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(255, 255, 255, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(255, 255, 255, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(255, 255, 255, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(165, 214, 167, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(255, 255, 255, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 9711283f..589ebd46 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:hsla(0,0%,100%,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(159, 168, 218, 0.16); + --highlight-text-color: #9FA8DA; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } @@ -1141,6 +1152,7 @@ color: #f44435; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1154,6 +1166,7 @@ left: 3rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #222222; @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3273,15 +3330,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3446,15 +3506,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 1rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.5rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 1rem 1rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5742,6 +5906,10 @@ font-size: 1.5rem; color: #121212; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(255, 255, 255, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(255, 255, 255, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(255, 255, 255, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(244, 143, 177, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(255, 255, 255, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 69f1741c..e3488530 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(0,0,0,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #B00020; } @@ -1141,6 +1152,7 @@ color: #B00020; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1154,6 +1166,7 @@ left: 3rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3273,15 +3330,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3446,15 +3506,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 1rem 1rem; border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid #e0e0e0; padding: 1rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(0, 0, 0, 0.87); padding: 1.5rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 1rem 1rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5742,6 +5906,10 @@ font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(0, 0, 0, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(0, 0, 0, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(0, 0, 0, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(76, 175, 80, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(0, 0, 0, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #e0e0e1; border-color: #e0e0e1; } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 85d5e0f0..e8963446 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(0,0,0,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(63, 81, 181, 0.12); + --highlight-text-color: #3F51B5; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #B00020; } @@ -1141,6 +1152,7 @@ color: #B00020; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1154,6 +1166,7 @@ left: 3rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3273,15 +3330,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3446,15 +3506,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 1rem 1rem; border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid #e0e0e0; padding: 1rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(0, 0, 0, 0.87); padding: 1.5rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 1rem 1rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 1rem 1rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5742,6 +5906,10 @@ font-size: 1.5rem; color: #ffffff; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(0, 0, 0, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(0, 0, 0, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(0, 0, 0, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(255, 64, 129, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(0, 0, 0, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #e0e0e1; border-color: #e0e0e1; } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 2b37d399..a47f41c2 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -42,6 +42,8 @@ --surface-hover:hsla(0,0%,100%,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(206, 147, 216, 0.16); + --highlight-text-color: #CE93D8; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } @@ -1141,6 +1152,7 @@ color: #f44435; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1154,6 +1166,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #222222; @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3273,15 +3330,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3446,15 +3506,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5742,6 +5906,10 @@ font-size: 1.15rem; color: #121212; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.15rem; + height: 1.15rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(255, 255, 255, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(255, 255, 255, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(255, 255, 255, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(165, 214, 167, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(255, 255, 255, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 2d12a1dd..f7c7af00 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:hsla(0,0%,100%,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(159, 168, 218, 0.16); + --highlight-text-color: #9FA8DA; color-scheme: dark; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #121212; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } @@ -1141,6 +1152,7 @@ color: #f44435; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1154,6 +1166,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #222222; @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3273,15 +3330,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3446,15 +3506,17 @@ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(255, 255, 255, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5742,6 +5906,10 @@ font-size: 1.15rem; color: #121212; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.15rem; + height: 1.15rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1e1e1e; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(255, 255, 255, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(255, 255, 255, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(255, 255, 255, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(255, 255, 255, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(255, 255, 255, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(244, 143, 177, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(255, 255, 255, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 6a6bfaa0..79cda753 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(0,0,0,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #B00020; } @@ -1141,6 +1152,7 @@ color: #B00020; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1154,6 +1166,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3273,15 +3330,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3446,15 +3506,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 0.75rem; border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid #e0e0e0; padding: 0.75rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(0, 0, 0, 0.87); padding: 1.25rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5742,6 +5906,10 @@ font-size: 1.15rem; color: #ffffff; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.15rem; + height: 1.15rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(0, 0, 0, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(0, 0, 0, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(0, 0, 0, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(76, 175, 80, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(0, 0, 0, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #e0e0e1; border-color: #e0e0e1; } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 0622a747..cc7adcf1 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(0,0,0,.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); + --highlight-bg: rgba(63, 81, 181, 0.12); + --highlight-text-color: #3F51B5; color-scheme: light; } @@ -100,6 +102,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; @@ -670,6 +677,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; @@ -1095,7 +1106,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #B00020; } @@ -1141,6 +1152,7 @@ color: #B00020; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1154,6 +1166,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); @@ -1508,6 +1521,10 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1rem; + height: 1rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #B00020; } @@ -2202,6 +2219,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 2rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 2rem; + height: 2rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} .p-speeddial-action { width: 3rem; @@ -2715,6 +2746,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2728,25 +2763,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3260,6 +3316,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3273,15 +3330,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3433,6 +3492,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3446,15 +3506,17 @@ background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); } @@ -3496,6 +3558,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3532,11 +3600,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; @@ -3570,6 +3633,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3712,6 +3779,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3970,15 +4041,19 @@ border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 0.75rem; border: 1px solid #e0e0e0; background: #ffffff; color: rgba(0, 0, 0, 0.87); + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; border-top: 0 none; } @@ -4078,6 +4153,7 @@ border: 1px solid #e0e0e0; padding: 0.75rem; border-radius: 4px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4123,6 +4199,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4192,7 +4272,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4413,6 +4493,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4466,6 +4547,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4552,6 +4637,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4670,6 +4756,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4781,6 +4868,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -4941,6 +5029,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(0, 0, 0, 0.87); padding: 1.25rem; font-weight: 400; } @@ -4993,6 +5082,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5190,6 +5280,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem 0.75rem; user-select: none; } @@ -5243,6 +5334,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5374,6 +5469,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5393,6 +5492,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5467,6 +5570,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5484,6 +5591,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); @@ -5567,6 +5678,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5595,6 +5710,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: rgba(0, 0, 0, 0.12); @@ -5725,6 +5844,51 @@ line-height: 4px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #B71C1C; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #B71C1C; + } + 40% { + stroke: #01579B; + } + 66% { + stroke: #1B5E20; + } + 80%, 90% { + stroke: #7f6003; + } +} .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5742,6 +5906,10 @@ font-size: 1.15rem; color: #ffffff; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.15rem; + height: 1.15rem; +} .p-skeleton { background-color: rgba(0, 0, 0, 0.08); @@ -5779,6 +5947,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -6085,6 +6257,9 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button span { color: rgba(0, 0, 0, 0.6); } +.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path { + fill: rgba(0, 0, 0, 0.6); +} .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover { background: rgba(0, 0, 0, 0.04); } @@ -6115,18 +6290,29 @@ margin: 0 auto 0 0; order: 1; } +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:focus, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker .p-datepicker-header .p-datepicker-prev { order: 2; } .p-datepicker .p-datepicker-header .p-datepicker-next { order: 3; } +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table th { border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.38); font-weight: 400; font-size: 0.875rem; } +.p-datepicker table td > span:focus { + background: rgba(0, 0, 0, 0.12); +} .p-datepicker table td.p-datepicker-today > span { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } @@ -6694,6 +6880,7 @@ } .p-float-label input:focus ~ label, +.p-float-label textarea:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } @@ -6841,10 +7028,10 @@ box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -6934,10 +7121,10 @@ border-bottom-right-radius: 4px; } -.p-picklist .p-picklist-list .p-picklist-item:focus { +.p-picklist .p-picklist-list .p-picklist-item.p-focus { background: rgba(0, 0, 0, 0.12); } -.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { +.p-picklist .p-picklist-list .p-picklist-item.p-focus.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -7027,6 +7214,10 @@ transform: scale(1); } +.p-speeddial-item.p-focus > .p-speeddial-action { + background: rgba(255, 64, 129, 0.76); +} + .p-splitbutton.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-outlined > .p-button:enabled:focus, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7207,10 +7398,13 @@ display: none; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { +.p-tree .p-tree-container .p-treenode { + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { background: rgba(0, 0, 0, 0.12); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } @@ -7340,11 +7534,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } -.p-togglebutton.p-button:focus { +.p-togglebutton.p-button:not(.p-disabled).p-focus { background: #e0e0e1; border-color: #e0e0e1; } -.p-togglebutton.p-button:focus.p-highlight { +.p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 493920f8..edc6437d 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -42,6 +42,8 @@ --surface-hover:#eaeaea; --focus-ring: 0 0 0 0.2rem #8dcdff; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #e02365; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } @@ -1117,6 +1128,7 @@ color: #a80000; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; @@ -1130,6 +1142,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #f9f9f9; @@ -3236,6 +3292,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3249,15 +3306,17 @@ background: #eaeaea; color: #333333; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #e02365; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #e02365; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f9f9f9; } @@ -3409,6 +3468,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3422,15 +3482,17 @@ background: #eaeaea; color: #333333; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #e02365; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #e02365; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f9f9f9; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #e02365; color: #ffffff; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #007ad9; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: background-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; padding: 0.857rem 1rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #c8c8c8; @@ -5652,6 +5771,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f4f4f4; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #eaeaea; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 12a1ceb2..0af149f9 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -42,6 +42,8 @@ --surface-hover:#eaeaea; --focus-ring: 0 0 0 0.2rem #8dcdff; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #007ad9; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } @@ -1121,6 +1132,7 @@ color: #a80000; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #f9f9f9; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #eaeaea; color: #333333; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007ad9; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #007ad9; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f9f9f9; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #eaeaea; color: #333333; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007ad9; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #007ad9; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f9f9f9; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #333333; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #c8c8c8; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #f4f4f4; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #eaeaea; @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index c716a5d5..8b2998f9 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -42,6 +42,8 @@ --surface-hover:#eaeaea; --focus-ring: 0 0 0 0.2rem #c2e9d8; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #41b883; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #41b883; background: #41b883; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #318c63; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } @@ -1121,6 +1132,7 @@ color: #a80000; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #f9f9f9; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #eaeaea; color: #333333; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c2e9d8; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #41b883; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #41b883; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f9f9f9; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #eaeaea; color: #333333; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c2e9d8; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #41b883; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #41b883; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f9f9f9; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c2e9d8; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c2e9d8; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #41b883; color: #ffffff; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #c8c8c8; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #333333; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #c8c8c8; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #f4f4f4; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #eaeaea; @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 5017dd68..008d18b5 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -42,6 +42,8 @@ --surface-hover:#eaeaea; --focus-ring: 0 0 0 0.2rem #8dcdff; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #007ad9; + --highlight-text-color: #ffffff; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; @@ -1075,7 +1086,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } @@ -1121,6 +1132,7 @@ color: #a80000; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; @@ -1134,6 +1146,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; @@ -1492,6 +1505,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } @@ -2190,6 +2207,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} .p-speeddial-action { width: 3rem; @@ -2703,6 +2734,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2716,25 +2751,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #f9f9f9; @@ -3248,6 +3304,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3261,15 +3318,17 @@ background: #eaeaea; color: #333333; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007ad9; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #007ad9; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f9f9f9; } @@ -3421,6 +3480,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3434,15 +3494,17 @@ background: #eaeaea; color: #333333; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007ad9; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #007ad9; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f9f9f9; } @@ -3484,6 +3546,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3520,11 +3588,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; @@ -3558,6 +3621,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3700,6 +3767,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3933,15 +4004,19 @@ border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #c8c8c8; background: #ffffff; color: #333333; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4041,6 +4116,7 @@ border: 1px solid #c8c8c8; padding: 0.857rem 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4086,6 +4162,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4155,7 +4235,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4376,6 +4456,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4429,6 +4510,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4515,6 +4600,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4633,6 +4719,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4744,6 +4831,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -4904,6 +4992,7 @@ transition: background-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #333333; padding: 0.857rem 1rem; font-weight: 700; } @@ -4956,6 +5045,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5129,6 +5219,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #333333; padding: 0.857rem; user-select: none; } @@ -5182,6 +5273,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5313,6 +5408,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5332,6 +5431,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5406,6 +5509,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5423,6 +5530,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5506,6 +5617,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5534,6 +5649,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #c8c8c8; @@ -5664,6 +5783,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5681,6 +5845,10 @@ font-size: 1.5rem; color: #f4f4f4; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #eaeaea; @@ -5718,6 +5886,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index bfaf29ba..82b9ca1b 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -42,6 +42,8 @@ --surface-hover: #eaeaea; --focus-ring: 0 0 0 0.2rem #e4e9ec; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #AFD3C8; + --highlight-text-color: #385048; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #7B95A3; background: #7B95A3; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #AFD3C8; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e7a3a3; } @@ -1117,6 +1128,7 @@ color: #e7a3a3; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.429rem; color: #a6a6a6; @@ -1130,6 +1142,7 @@ left: 1.858rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.429rem; color: #a6a6a6; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #f8f8f8; @@ -3236,6 +3292,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3249,15 +3306,17 @@ background: #f4f4f4; color: #666666; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #666666; + background: #e0e0e0; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #385048; background: #AFD3C8; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #aed3c7; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f8f8f8; } @@ -3409,6 +3468,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3422,15 +3482,17 @@ background: #f4f4f4; color: #666666; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #666666; + background: #e0e0e0; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #385048; background: #AFD3C8; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #aed3c7; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f8f8f8; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e4e9ec; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 2px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #666666; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #AFD3C8; color: #385048; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3921,15 +3992,19 @@ border: 1px solid #dadada; background: #ffffff; color: #666666; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.571rem 1rem; border: 1px solid #dadada; background: #ffffff; color: #666666; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; border-top: 0 none; } @@ -4029,6 +4104,7 @@ border: 1px solid #7B95A3; padding: 0.857rem 1rem; border-radius: 2px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4074,6 +4150,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4143,7 +4223,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4364,6 +4444,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -4417,6 +4498,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4503,6 +4588,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -4621,6 +4707,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -4732,6 +4819,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -4892,6 +4980,7 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; padding: 0.857rem 1rem; font-weight: 700; } @@ -4944,6 +5033,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -5117,6 +5207,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #666666; padding: 0.857rem; user-select: none; } @@ -5170,6 +5261,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem; @@ -5301,6 +5396,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5320,6 +5419,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5394,6 +5497,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #ebedef; @@ -5411,6 +5518,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.3); color: #ebedef; @@ -5494,6 +5605,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5522,6 +5637,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dadada; @@ -5652,6 +5771,51 @@ line-height: 24px; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #212121; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #212121; + } + 40% { + stroke: #212121; + } + 66% { + stroke: #212121; + } + 80%, 90% { + stroke: #212121; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5669,6 +5833,10 @@ font-size: 1.5rem; color: #f4f4f4; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #dadada; @@ -5706,6 +5874,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index ecb70f76..83a1cfe9 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover: #e9ecef; --focus-ring: 0 0 0 0.2rem #a6d5fa; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #E3F2FD; + --highlight-text-color: #495057; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #2196F3; background: #2196F3; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d89ec; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } @@ -1117,6 +1128,7 @@ color: #f44336; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #E3F2FD; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #e9ecef; } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #E3F2FD; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #e9ecef; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a6d5fa; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E3F2FD; color: #495057; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #dee2e6; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #495057; padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 42aebe67..61bbc9b2 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -42,6 +42,8 @@ --surface-hover: #e9ecef; --focus-ring: 0 0 0 0.2rem #b7e0b8; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #E8F5E9; + --highlight-text-color: #495057; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #4CAF50; background: #4CAF50; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #449e48; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } @@ -1117,6 +1128,7 @@ color: #f44336; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #E8F5E9; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #e9ecef; } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #E8F5E9; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #e9ecef; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #b7e0b8; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E8F5E9; color: #495057; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #dee2e6; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #495057; padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index ae585ece..e2c5a065 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -42,6 +42,8 @@ --surface-hover: #e9ecef; --focus-ring: 0 0 0 0.2rem #ffe69c; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #FFF3E0; + --highlight-text-color: #495057; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFC107; background: #FFC107; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ecb100; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } @@ -1117,6 +1128,7 @@ color: #f44336; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #FFF3E0; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #ebe0ce; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #e9ecef; } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #FFF3E0; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #ebe0ce; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #e9ecef; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe69c; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFF3E0; color: #495057; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #dee2e6; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #495057; padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 7051507f..9449fe2b 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover: #e9ecef; --focus-ring: 0 0 0 0.2rem #df9eea; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F3E5F5; + --highlight-text-color: #495057; color-scheme: light; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #9C27B0; background: #9C27B0; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8c239e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } @@ -1117,6 +1128,7 @@ color: #f44336; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: #e9ecef; color: #495057; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #F3E5F5; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #e9ecef; } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: #e9ecef; color: #495057; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #F3E5F5; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #e9ecef; } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #df9eea; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F3E5F5; color: #495057; @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #dee2e6; background: #ffffff; color: #495057; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #dee2e6; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #495057; padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #495057; padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #dee2e6; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: #f8f9fa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #e9ecef; @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index daee2ece..9b24553b 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -42,6 +42,8 @@ --surface-hover: #f4f4f5; --focus-ring: 0 0 0 1px #6366F1; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EEF2FF; + --highlight-text-color: #312E81; color-scheme: light; } @@ -111,6 +113,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -681,6 +688,10 @@ color: #ffffff; font-size: 10px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 10px; + height: 10px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #4F46E5; background: #4F46E5; @@ -1106,7 +1117,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4338CA; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f0a9a7; } @@ -1152,6 +1163,7 @@ color: #f0a9a7; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.75rem; color: #71717A; @@ -1165,6 +1177,7 @@ left: 2.5rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; color: #71717A; @@ -1519,6 +1532,10 @@ transition: none; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #EF4444; } @@ -2213,6 +2230,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; +} .p-speeddial-action { width: 3rem; @@ -2726,6 +2757,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2739,25 +2774,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #fcfcfc; @@ -3271,6 +3327,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1rem; @@ -3284,15 +3341,17 @@ background: #f4f4f5; color: #18181B; } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #18181B; + background: #e5e7eb; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #312E81; background: #EEF2FF; } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #E0E7FF; +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #fcfcfc; } @@ -3444,6 +3503,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1rem; @@ -3457,15 +3517,17 @@ background: #f4f4f5; color: #18181B; } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #18181B; + background: #e5e7eb; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #312E81; background: #EEF2FF; } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #E0E7FF; +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #fcfcfc; } @@ -3507,6 +3569,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #6366F1; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 0.375rem; @@ -3543,11 +3611,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #3f3f46; } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #312E81; @@ -3581,6 +3644,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 0 0 1px 0; @@ -3723,6 +3790,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3981,15 +4052,19 @@ border: 1px solid #e5e7eb; background: #ffffff; color: #3f3f46; + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.75rem 1.25rem; border: 1px solid #e5e7eb; background: #ffffff; color: #3f3f46; + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; border-top: 0 none; } @@ -4089,6 +4164,7 @@ border: 1px solid #e5e7eb; padding: 1.25rem; border-radius: 0.375rem; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4134,6 +4210,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4203,7 +4283,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4424,6 +4504,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -4477,6 +4558,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4563,6 +4648,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -4681,6 +4767,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -4792,6 +4879,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -4952,6 +5040,7 @@ transition: none; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #3f3f46; padding: 1.25rem; font-weight: 700; } @@ -5004,6 +5093,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -5201,6 +5291,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #3f3f46; padding: 0.75rem 1rem; user-select: none; } @@ -5254,6 +5345,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.75rem 0.75rem; @@ -5385,6 +5480,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5404,6 +5503,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5478,6 +5581,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; @@ -5495,6 +5602,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; @@ -5578,6 +5689,10 @@ color: #f8f9fa; transition: none; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5606,6 +5721,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #e5e7eb; @@ -5736,6 +5855,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #DC2626; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #DC2626; + } + 40% { + stroke: #2563EB; + } + 66% { + stroke: #059669; + } + 80%, 90% { + stroke: #D97706; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5753,6 +5917,10 @@ font-size: 1.5rem; color: #fafafa; } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: #f4f4f5; @@ -5790,6 +5958,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #ffffff; @@ -5885,3 +6057,7 @@ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #4F46E5; } + +.p-speeddial-item.p-focus > .p-speeddial-action { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366F1, 0 1px 2px 0 rgba(0, 0, 0, 0); +} diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 4ed9aa46..aa7a277d 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #93cbf9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(100, 181, 246, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #64B5F6; background: #64B5F6; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #253144; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #93cbf9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #304562; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 3cccd70c..03934338 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #a7d8a9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(129, 199, 132, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #81C784; background: #81C784; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #253144; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a7d8a9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #304562; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 98f12827..c0b33164 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #ffe284; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(255, 213, 79, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #212529; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #FFD54F; background: #FFD54F; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #253144; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe284; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #304562; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 7655e78d..1d17b6d3 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -42,6 +42,8 @@ --surface-hover:rgba(255,255,255,.03); --focus-ring: 0 0 0 1px #cf95d9; --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(186, 104, 200, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: light dark; } @@ -76,6 +78,11 @@ font-size: 1rem; } +.p-icon { + width: 1rem; + height: 1rem; +} + .p-link { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -646,6 +653,10 @@ color: #ffffff; font-size: 14px; } +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; +} .p-checkbox .p-checkbox-box.p-highlight { border-color: #BA68C8; background: #BA68C8; @@ -1071,7 +1082,7 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } -.p-inputswitch.p-invalid { +.p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } @@ -1117,6 +1128,7 @@ color: #ef9a9a; } +.p-input-icon-left > svg:first-of-type, .p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1142,7 @@ left: 2rem; } +.p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); @@ -1484,6 +1497,10 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } +.p-rating .p-rating-item .p-rating-icon.p-icon { + width: 1.143rem; + height: 1.143rem; +} .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #F48FB1; } @@ -2178,6 +2195,20 @@ .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1.3rem; } +.p-speeddial-button.p-button.p-button-icon-only .p-icon { + width: 1.3rem; + height: 1.3rem; +} + +.p-speeddial-list { + outline: 0 none; +} + +.p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; +} .p-speeddial-action { width: 3rem; @@ -2691,6 +2722,10 @@ .p-datatable .p-datatable-loading-icon { font-size: 2rem; } +.p-datatable .p-datatable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-datatable.p-datatable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -2704,25 +2739,46 @@ border-width: 0 1px 1px 1px; } .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td, .p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td { - border-top-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; } -.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td { - border-left-width: 0; +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background: #253144; @@ -3236,6 +3292,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3249,15 +3306,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; +.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); +} .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3409,6 +3468,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3422,15 +3482,17 @@ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; +.p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); +} .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.01); } @@ -3472,6 +3534,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; +} +.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #cf95d9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3508,11 +3576,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } -.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; -} .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3546,6 +3609,10 @@ .p-tree .p-tree-loading-icon { font-size: 2rem; } +.p-tree .p-tree-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; @@ -3688,6 +3755,10 @@ .p-treetable .p-treetable-loading-icon { font-size: 2rem; } +.p-treetable .p-treetable-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-treetable.p-treetable-gridlines .p-datatable-header { border-width: 1px 1px 0 1px; } @@ -3946,15 +4017,19 @@ border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.p-panel .p-panel-content:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - border-top: 0 none; } .p-panel .p-panel-footer { padding: 0.5rem 1rem; border: 1px solid #304562; background: #1f2d40; color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top: 0 none; } @@ -4054,6 +4129,7 @@ border: 1px solid #304562; padding: 1rem; border-radius: 3px; + gap: 0.5rem; } .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; @@ -4099,6 +4175,10 @@ .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } +.p-confirm-popup .p-confirm-popup-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -4168,7 +4248,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } -.p-dialog.p-confirm-dialog .p-confirm-dialog-message { +.p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -4389,6 +4469,7 @@ border-radius: 0; } .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4442,6 +4523,10 @@ .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } +.p-contextmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); @@ -4528,6 +4613,7 @@ border-radius: 0; } .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4646,6 +4732,7 @@ border-radius: 0; } .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4757,6 +4844,7 @@ border-radius: 0; } .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -4917,6 +5005,7 @@ transition: box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; } @@ -4969,6 +5058,7 @@ border-radius: 0; } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5166,6 +5256,7 @@ border-radius: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1rem; user-select: none; } @@ -5219,6 +5310,10 @@ .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } +.p-tieredmenu .p-submenu-icon.p-icon { + width: 0.875rem; + height: 0.875rem; +} .p-inline-message { padding: 0.5rem 0.5rem; @@ -5350,6 +5445,10 @@ font-size: 1.5rem; margin-right: 0.5rem; } +.p-message .p-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; +} .p-toast { opacity: 0.9; @@ -5369,6 +5468,10 @@ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 2rem; } +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 2rem; + height: 2rem; +} .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 700; } @@ -5443,6 +5546,10 @@ .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } +.p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-close:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5460,6 +5567,10 @@ .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } +.p-galleria .p-galleria-item-nav .p-icon { + width: 2rem; + height: 2rem; +} .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; @@ -5543,6 +5654,10 @@ color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } +.p-image-preview-indicator .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); @@ -5571,6 +5686,10 @@ .p-image-action.p-link i { font-size: 1.5rem; } +.p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-avatar { background-color: #304562; @@ -5701,6 +5820,51 @@ line-height: 1.5rem; } +.p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; +} + +.p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #73000c; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progress-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progress-spinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #73000c; + } + 40% { + stroke: #044868; + } + 66% { + stroke: #224a23; + } + 80%, 90% { + stroke: #6d5100; + } +} .p-scrolltop { width: 3rem; height: 3rem; @@ -5718,6 +5882,10 @@ font-size: 1.5rem; color: rgba(255, 255, 255, 0.87); } +.p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; +} .p-skeleton { background-color: rgba(255, 255, 255, 0.06); @@ -5755,6 +5923,10 @@ margin-right: 0.25rem; font-size: 0.75rem; } +.p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; +} .p-terminal { background: #1f2d40; diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue index 454c2478..9a3b8c42 100644 --- a/src/layout/AppMenu.vue +++ b/src/layout/AppMenu.vue @@ -153,6 +153,11 @@ const model = ref([ icon: 'pi pi-fw pi-search', url: 'https://github.com/primefaces/sakai-vue', target: '_blank' + }, + { + label: 'Nuxt Version', + url: 'https://github.com/primefaces/sakai-nuxt', + icon: 'pi pi-fw pi-star' } ] } diff --git a/src/views/pages/Empty.vue b/src/views/pages/Empty.vue index d45a97cd..d0a1dbc4 100644 --- a/src/views/pages/Empty.vue +++ b/src/views/pages/Empty.vue @@ -1,10 +1,6 @@ diff --git a/src/views/utilities/Documentation.vue b/src/views/utilities/Documentation.vue index 57dabe2b..366e8d10 100644 --- a/src/views/utilities/Documentation.vue +++ b/src/views/utilities/Documentation.vue @@ -1,64 +1,59 @@ diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue index 36251a58..895ce381 100644 --- a/src/views/utilities/Icons.vue +++ b/src/views/utilities/Icons.vue @@ -28,57 +28,55 @@ onMounted(() => {