From 4bf871b640d57a54b90443eb928d0925878efebe Mon Sep 17 00:00:00 2001 From: fs Date: Thu, 26 Mar 2026 12:24:06 +0100 Subject: [PATCH] refactor(addressbook): remove factory, extract filter-chip builder, split CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove AddressBookServicesFactory — all 8 dependencies already registered in DI container individually. Update container registrar to wire directly. Extract 42-line filter-chip builder from index().php into AddressBookService::buildCustomFieldChipMeta(). Split 576-line CSS file into functional layout (76 lines) and decorative banner animation (500 lines) with separate asset registration. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../AddressBookContainerRegistrar.php | 29 +- .../Service/AddressBookService.php | 55 ++ .../Service/AddressBookServicesFactory.php | 41 -- modules/addressbook/module.php | 1 + .../addressbook/pages/address-book/data().php | 4 +- .../pages/address-book/index().php | 48 +- .../Service/AddressBookServiceTest.php | 2 +- .../web/css/pages/address-book-banner.css | 252 +++++++++ .../web/css/pages/address-book-view.css | 500 ------------------ 9 files changed, 330 insertions(+), 602 deletions(-) delete mode 100644 modules/addressbook/lib/Module/AddressBook/Service/AddressBookServicesFactory.php create mode 100644 modules/addressbook/web/css/pages/address-book-banner.css diff --git a/modules/addressbook/lib/Module/AddressBook/AddressBookContainerRegistrar.php b/modules/addressbook/lib/Module/AddressBook/AddressBookContainerRegistrar.php index 996af28..e07abc6 100644 --- a/modules/addressbook/lib/Module/AddressBook/AddressBookContainerRegistrar.php +++ b/modules/addressbook/lib/Module/AddressBook/AddressBookContainerRegistrar.php @@ -5,25 +5,28 @@ namespace MintyPHP\Module\AddressBook; use MintyPHP\App\AppContainer; use MintyPHP\App\Container\ContainerRegistrar; use MintyPHP\Module\AddressBook\Service\AddressBookService; -use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory; -use MintyPHP\Service\CustomField\CustomFieldServicesFactory; -use MintyPHP\Service\Directory\DirectoryServicesFactory; +use MintyPHP\Service\Access\RoleService; +use MintyPHP\Service\CustomField\UserCustomFieldValueService; +use MintyPHP\Service\Org\DepartmentService; use MintyPHP\Service\Tenant\TenantScopeService; -use MintyPHP\Service\User\UserServicesFactory; +use MintyPHP\Service\Tenant\TenantService; +use MintyPHP\Service\User\UserAccountService; +use MintyPHP\Service\User\UserAssignmentService; +use MintyPHP\Service\User\UserAvatarService; final class AddressBookContainerRegistrar implements ContainerRegistrar { public function register(AppContainer $container): void { - $container->set(AddressBookServicesFactory::class, static fn (AppContainer $c): AddressBookServicesFactory => new AddressBookServicesFactory( - $c->get(UserServicesFactory::class), - $c->get(DirectoryServicesFactory::class), - $c->get(CustomFieldServicesFactory::class), - $c->get(TenantScopeService::class) + $container->set(AddressBookService::class, static fn (AppContainer $c): AddressBookService => new AddressBookService( + $c->get(UserAccountService::class), + $c->get(UserAssignmentService::class), + $c->get(TenantService::class), + $c->get(DepartmentService::class), + $c->get(RoleService::class), + $c->get(TenantScopeService::class), + $c->get(UserCustomFieldValueService::class), + $c->get(UserAvatarService::class) )); - - $container->set(AddressBookService::class, static fn (AppContainer $c): AddressBookService => $c - ->get(AddressBookServicesFactory::class) - ->createAddressBookService()); } } diff --git a/modules/addressbook/lib/Module/AddressBook/Service/AddressBookService.php b/modules/addressbook/lib/Module/AddressBook/Service/AddressBookService.php index 40bd6d7..89965e1 100644 --- a/modules/addressbook/lib/Module/AddressBook/Service/AddressBookService.php +++ b/modules/addressbook/lib/Module/AddressBook/Service/AddressBookService.php @@ -312,6 +312,61 @@ class AddressBookService ]; } + /** + * Transform custom field filter definitions into chip metadata for the grid UI. + * + * @param list> $definitions + * @return list> + */ + public function buildCustomFieldChipMeta(array $definitions): array + { + $chips = []; + foreach ($definitions as $definition) { + $uuid = strtolower(trim((string) ($definition['uuid'] ?? ''))); + $type = strtolower(trim((string) ($definition['type'] ?? ''))); + $label = trim((string) ($definition['label'] ?? '')); + $options = is_array($definition['options'] ?? null) ? $definition['options'] : []; + if ($uuid === '' || $type === '' || $label === '') { + continue; + } + + if (in_array($type, ['select', 'boolean'], true)) { + $optionMap = gridOptionMapFromItems($options); + if ($type === 'boolean') { + $optionMap = ['1' => t('Yes'), '0' => t('No')]; + } + $chips[] = [ + 'type' => 'scalar', + 'param' => 'cf_' . $uuid, + 'label' => $label, + 'options' => $optionMap, + ]; + continue; + } + + if ($type === 'multiselect') { + $chips[] = [ + 'type' => 'multi_csv', + 'param' => 'cfm_' . $uuid, + 'label' => $label, + 'options' => gridOptionMapFromItems($options), + ]; + continue; + } + + if ($type === 'date') { + $chips[] = [ + 'type' => 'date_range', + 'label' => $label, + 'from_param' => 'cfd_' . $uuid . '_from', + 'to_param' => 'cfd_' . $uuid . '_to', + ]; + } + } + + return $chips; + } + private function splitCommaValues($value): array { return array_values(array_filter( diff --git a/modules/addressbook/lib/Module/AddressBook/Service/AddressBookServicesFactory.php b/modules/addressbook/lib/Module/AddressBook/Service/AddressBookServicesFactory.php deleted file mode 100644 index c2ceb7b..0000000 --- a/modules/addressbook/lib/Module/AddressBook/Service/AddressBookServicesFactory.php +++ /dev/null @@ -1,41 +0,0 @@ -addressBookService !== null) { - return $this->addressBookService; - } - - $userFactory = $this->userServicesFactory; - $directoryFactory = $this->directoryServicesFactory; - return $this->addressBookService = new AddressBookService( - $userFactory->createUserAccountService(), - $userFactory->createUserAssignmentService(), - $directoryFactory->createTenantService(), - $directoryFactory->createDepartmentService(), - $directoryFactory->createRoleService(), - $this->tenantScopeService, - $this->customFieldServicesFactory->createUserCustomFieldValueService(), - $userFactory->createUserAvatarService() - ); - } -} diff --git a/modules/addressbook/module.php b/modules/addressbook/module.php index 5a2ba16..5db8783 100644 --- a/modules/addressbook/module.php +++ b/modules/addressbook/module.php @@ -72,6 +72,7 @@ return [ 'asset_groups' => [ 'address-book' => [ 'modules/addressbook/css/pages/address-book-view.css', + 'modules/addressbook/css/pages/address-book-banner.css', ], ], 'scheduler_jobs' => [], diff --git a/modules/addressbook/pages/address-book/data().php b/modules/addressbook/pages/address-book/data().php index 347dbc9..c4712a3 100644 --- a/modules/addressbook/pages/address-book/data().php +++ b/modules/addressbook/pages/address-book/data().php @@ -2,7 +2,7 @@ use MintyPHP\Http\SessionStoreInterface; use MintyPHP\Module\AddressBook\AddressBookAuthorizationPolicy; -use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory; +use MintyPHP\Module\AddressBook\Service\AddressBookService; use MintyPHP\Support\Guard; $session = app(SessionStoreInterface::class)->all(); @@ -22,7 +22,7 @@ foreach ($query as $rawKey => $rawValue) { } $currentUserId = (int) ($session['user']['id'] ?? 0); -$addressBookService = (app(AddressBookServicesFactory::class))->createAddressBookService(); +$addressBookService = app(AddressBookService::class); $result = $addressBookService->buildGridResult($currentUserId, $filters); gridJsonDataResult( (array) ($result['data'] ?? []), diff --git a/modules/addressbook/pages/address-book/index().php b/modules/addressbook/pages/address-book/index().php index f0c2695..a65eb42 100644 --- a/modules/addressbook/pages/address-book/index().php +++ b/modules/addressbook/pages/address-book/index().php @@ -2,7 +2,7 @@ use MintyPHP\Buffer; use MintyPHP\Http\SessionStoreInterface; -use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory; +use MintyPHP\Module\AddressBook\Service\AddressBookService; use MintyPHP\Session; use MintyPHP\Support\Guard; @@ -13,7 +13,7 @@ Guard::requireAbilityOrForbidden(\MintyPHP\Module\AddressBook\AddressBookAuthori $filterSchema = require __DIR__ . '/filter-schema.php'; $query = requestInput()->queryAll(); $currentUserId = (int) ($session['user']['id'] ?? 0); -$addressBookService = (app(AddressBookServicesFactory::class))->createAddressBookService(); +$addressBookService = app(AddressBookService::class); $context = $addressBookService->buildIndexContext($currentUserId, $query); $activeTenants = $context['activeTenants'] ?? []; $activeRoles = $context['activeRoles'] ?? []; @@ -48,49 +48,7 @@ $drawerToolbarFilterSchema = $listFilterContext['drawerToolbarFilterSchema']; $toolbarOptionSets = $listFilterContext['toolbarOptionSets']; $clientFilterSchema = $listFilterContext['clientFilterSchema']; $searchConfig = $listFilterContext['searchConfig']; -$customFieldChipMeta = []; -foreach ($customFieldFilterDefinitions as $definition) { - $definitionUuid = strtolower(trim((string) ($definition['uuid'] ?? ''))); - $definitionType = strtolower(trim((string) ($definition['type'] ?? ''))); - $definitionLabel = trim((string) ($definition['label'] ?? '')); - $definitionOptions = is_array($definition['options'] ?? null) ? $definition['options'] : []; - if ($definitionUuid === '' || $definitionType === '' || $definitionLabel === '') { - continue; - } - - if (in_array($definitionType, ['select', 'boolean'], true)) { - $options = gridOptionMapFromItems($definitionOptions); - if ($definitionType === 'boolean') { - $options = ['1' => t('Yes'), '0' => t('No')]; - } - $customFieldChipMeta[] = [ - 'type' => 'scalar', - 'param' => 'cf_' . $definitionUuid, - 'label' => $definitionLabel, - 'options' => $options, - ]; - continue; - } - - if ($definitionType === 'multiselect') { - $customFieldChipMeta[] = [ - 'type' => 'multi_csv', - 'param' => 'cfm_' . $definitionUuid, - 'label' => $definitionLabel, - 'options' => gridOptionMapFromItems($definitionOptions), - ]; - continue; - } - - if ($definitionType === 'date') { - $customFieldChipMeta[] = [ - 'type' => 'date_range', - 'label' => $definitionLabel, - 'from_param' => 'cfd_' . $definitionUuid . '_from', - 'to_param' => 'cfd_' . $definitionUuid . '_to', - ]; - } -} +$customFieldChipMeta = $addressBookService->buildCustomFieldChipMeta($customFieldFilterDefinitions); $filterChipMeta = [ 'search' => [ 'label' => t('Search'), diff --git a/modules/addressbook/tests/Module/AddressBook/Service/AddressBookServiceTest.php b/modules/addressbook/tests/Module/AddressBook/Service/AddressBookServiceTest.php index 0e1e7fd..b824a20 100644 --- a/modules/addressbook/tests/Module/AddressBook/Service/AddressBookServiceTest.php +++ b/modules/addressbook/tests/Module/AddressBook/Service/AddressBookServiceTest.php @@ -2,8 +2,8 @@ namespace MintyPHP\Tests\Module\AddressBook\Service; -use MintyPHP\Service\Access\RoleService; use MintyPHP\Module\AddressBook\Service\AddressBookService; +use MintyPHP\Service\Access\RoleService; use MintyPHP\Service\CustomField\UserCustomFieldValueService; use MintyPHP\Service\Org\DepartmentService; use MintyPHP\Service\Tenant\TenantScopeService; diff --git a/modules/addressbook/web/css/pages/address-book-banner.css b/modules/addressbook/web/css/pages/address-book-banner.css new file mode 100644 index 0000000..d1a8fee --- /dev/null +++ b/modules/addressbook/web/css/pages/address-book-banner.css @@ -0,0 +1,252 @@ +@layer pages { +@keyframes ani-app-profile-banner { + 0% { + --c-0: hsla(212, 0%, 0%, 1); + --s-start-0: 14.489998991212337%; + --s-end-0: 72%; + --y-0: 93%; + --x-0: 93%; + --c-1: hsla(212, 0%, 0%, 1); + --s-start-1: 0%; + --s-end-1: 45%; + --y-1: 9%; + --x-1: 26%; + --x-2: 15%; + --s-start-2: 2.9253667596993065%; + --s-end-2: 22.388851682060018%; + --c-2: hsla(257, 91%, 27%, 0.35); + --y-2: 79%; + --x-3: 40%; + --s-start-3: 3.985353824694249%; + --s-end-3: 47.580278608924694%; + --y-3: 104%; + --c-3: hsla(212, 100%, 50%, 0.5); + --y-4: 60%; + --x-4: 0%; + --c-4: hsla(224, 72%, 36%, 1); + --s-start-4: 2.391200382592061%; + --s-end-4: 29.307684556768592%; + --s-start-5: 2.9253667596993065%; + --s-end-5: 22.388851682060018%; + --y-5: 37%; + --c-5: hsla(248, 52%, 24%, 1); + --x-5: 92%; + --x-6: 101%; + --y-6: 16%; + --s-start-6: 13.173642363290591%; + --s-end-6: 31.747336520355095%; + --c-6: hsla(212, 100%, 50%, 0.19); + --y-7: 13%; + --s-start-7: 1%; + --s-end-7: 31%; + --x-7: 90%; + --c-7: hsla(227, 98%, 53%, 1); + --y-8: 56%; + --s-start-8: 3.985353824694249%; + --s-end-8: 13.103042116379756%; + --c-8: hsla(166, 71%, 60%, 0.32); + --x-8: 104%; + --c-9: hsla(219, 83%, 23%, 0.18); + --s-start-9: 18.597054544690312%; + --s-end-9: 31%; + --x-9: 97%; + --y-9: 19%; + } + + 100% { + --c-0: hsla(306, 0%, 0%, 1); + --s-start-0: 2.391200382592061%; + --s-end-0: 43.902064173373226%; + --y-0: 9%; + --x-0: 7%; + --c-1: hsla(306, 0%, 0%, 1); + --s-start-1: 9%; + --s-end-1: 54.805582404585024%; + --y-1: 93%; + --x-1: 96%; + --x-2: -2%; + --s-start-2: 3%; + --s-end-2: 26.722813338714598%; + --c-2: hsla(166, 72%, 60%, 1); + --y-2: 103%; + --x-3: 33%; + --s-start-3: 2.391200382592061%; + --s-end-3: 32.0689540200964%; + --y-3: 82%; + --c-3: hsla(180, 100%, 50%, 0.26); + --y-4: 81%; + --x-4: 37%; + --c-4: hsla(212, 88%, 26%, 0.58); + --s-start-4: 4.40642490323111%; + --s-end-4: 37.23528104246256%; + --s-start-5: 3%; + --s-end-5: 32.537089799783296%; + --y-5: 99%; + --c-5: hsla(271, 98%, 53%, 0.31); + --x-5: 54%; + --x-6: 104%; + --y-6: 43%; + --s-start-6: 6%; + --s-end-6: 42.501105312974815%; + --c-6: hsla(262, 100%, 50%, 0.15); + --y-7: -16%; + --s-start-7: 5%; + --s-end-7: 13.10107024898374%; + --x-7: 104%; + --c-7: hsla(298, 36%, 23%, 1); + --y-8: 30%; + --s-start-8: 2.391200382592061%; + --s-end-8: 27.141813016850573%; + --c-8: hsla(180, 100%, 50%, 0.11); + --x-8: 97%; + --c-9: hsla(219, 83%, 23%, 0.59); + --s-start-9: 5%; + --s-end-9: 21.32164536610654%; + --x-9: 78%; + --y-9: 4%; + } +} + +.app-profile-banner { + --c-0: hsla(212, 0%, 0%, 1); + --y-0: 93%; + --x-0: 93%; + --c-1: hsla(212, 0%, 0%, 1); + --y-1: 9%; + --x-1: 26%; + --x-2: 15%; + --c-2: hsla(257, 91%, 27%, 0.35); + --y-2: 79%; + --x-3: 40%; + --y-3: 104%; + --c-3: hsla(212, 100%, 50%, 0.5); + --y-4: 60%; + --x-4: 0%; + --c-4: hsla(224, 72%, 36%, 1); + --y-5: 37%; + --c-5: hsla(248, 52%, 24%, 1); + --x-5: 92%; + --x-6: 101%; + --y-6: 16%; + --c-6: hsla(212, 100%, 50%, 0.19); + --y-7: 13%; + --x-7: 90%; + --c-7: hsla(227, 98%, 53%, 1); + --y-8: 56%; + --c-8: hsla(166, 71%, 60%, 0.32); + --x-8: 104%; + --c-9: hsla(219, 83%, 23%, 0.18); + --x-9: 97%; + --y-9: 19%; + background-color: hsla(305, 0%, 0%, 1); + background-image: + radial-gradient( + circle at var(--x-0) var(--y-0), + var(--c-0) var(--s-start-0), + transparent var(--s-end-0) + ), + radial-gradient( + circle at var(--x-1) var(--y-1), + var(--c-1) var(--s-start-1), + transparent var(--s-end-1) + ), + radial-gradient( + circle at var(--x-2) var(--y-2), + var(--c-2) var(--s-start-2), + transparent var(--s-end-2) + ), + radial-gradient( + circle at var(--x-3) var(--y-3), + var(--c-3) var(--s-start-3), + transparent var(--s-end-3) + ), + radial-gradient( + circle at var(--x-4) var(--y-4), + var(--c-4) var(--s-start-4), + transparent var(--s-end-4) + ), + radial-gradient( + circle at var(--x-5) var(--y-5), + var(--c-5) var(--s-start-5), + transparent var(--s-end-5) + ), + radial-gradient( + circle at var(--x-6) var(--y-6), + var(--c-6) var(--s-start-6), + transparent var(--s-end-6) + ), + radial-gradient( + circle at var(--x-7) var(--y-7), + var(--c-7) var(--s-start-7), + transparent var(--s-end-7) + ), + radial-gradient( + circle at var(--x-8) var(--y-8), + var(--c-8) var(--s-start-8), + transparent var(--s-end-8) + ), + radial-gradient( + circle at var(--x-9) var(--y-9), + var(--c-9) var(--s-start-9), + transparent var(--s-end-9) + ); + animation: ani-app-profile-banner 10s linear infinite alternate; + background-blend-mode: + normal, normal, normal, normal, normal, normal, normal, normal, normal, + normal; + will-change: transform, opacity; + contain: paint; + height: 160px; +} +} + +@property --c-0 { syntax: ""; inherits: false; initial-value: hsla(212, 0%, 0%, 1); } +@property --s-start-0 { syntax: ""; inherits: false; initial-value: 14.489998991212337%; } +@property --s-end-0 { syntax: ""; inherits: false; initial-value: 72%; } +@property --y-0 { syntax: ""; inherits: false; initial-value: 93%; } +@property --x-0 { syntax: ""; inherits: false; initial-value: 93%; } +@property --c-1 { syntax: ""; inherits: false; initial-value: hsla(212, 0%, 0%, 1); } +@property --s-start-1 { syntax: ""; inherits: false; initial-value: 0%; } +@property --s-end-1 { syntax: ""; inherits: false; initial-value: 45%; } +@property --y-1 { syntax: ""; inherits: false; initial-value: 9%; } +@property --x-1 { syntax: ""; inherits: false; initial-value: 26%; } +@property --x-2 { syntax: ""; inherits: false; initial-value: 15%; } +@property --s-start-2 { syntax: ""; inherits: false; initial-value: 2.9253667596993065%; } +@property --s-end-2 { syntax: ""; inherits: false; initial-value: 22.388851682060018%; } +@property --c-2 { syntax: ""; inherits: false; initial-value: hsla(257, 91%, 27%, 0.35); } +@property --y-2 { syntax: ""; inherits: false; initial-value: 79%; } +@property --x-3 { syntax: ""; inherits: false; initial-value: 40%; } +@property --s-start-3 { syntax: ""; inherits: false; initial-value: 3.985353824694249%; } +@property --s-end-3 { syntax: ""; inherits: false; initial-value: 47.580278608924694%; } +@property --y-3 { syntax: ""; inherits: false; initial-value: 104%; } +@property --c-3 { syntax: ""; inherits: false; initial-value: hsla(212, 100%, 50%, 0.5); } +@property --y-4 { syntax: ""; inherits: false; initial-value: 60%; } +@property --x-4 { syntax: ""; inherits: false; initial-value: 0%; } +@property --c-4 { syntax: ""; inherits: false; initial-value: hsla(224, 72%, 36%, 1); } +@property --s-start-4 { syntax: ""; inherits: false; initial-value: 2.391200382592061%; } +@property --s-end-4 { syntax: ""; inherits: false; initial-value: 29.307684556768592%; } +@property --s-start-5 { syntax: ""; inherits: false; initial-value: 2.9253667596993065%; } +@property --s-end-5 { syntax: ""; inherits: false; initial-value: 22.388851682060018%; } +@property --y-5 { syntax: ""; inherits: false; initial-value: 37%; } +@property --c-5 { syntax: ""; inherits: false; initial-value: hsla(248, 52%, 24%, 1); } +@property --x-5 { syntax: ""; inherits: false; initial-value: 92%; } +@property --x-6 { syntax: ""; inherits: false; initial-value: 101%; } +@property --y-6 { syntax: ""; inherits: false; initial-value: 16%; } +@property --s-start-6 { syntax: ""; inherits: false; initial-value: 13.173642363290591%; } +@property --s-end-6 { syntax: ""; inherits: false; initial-value: 31.747336520355095%; } +@property --c-6 { syntax: ""; inherits: false; initial-value: hsla(212, 100%, 50%, 0.19); } +@property --y-7 { syntax: ""; inherits: false; initial-value: 13%; } +@property --s-start-7 { syntax: ""; inherits: false; initial-value: 1%; } +@property --s-end-7 { syntax: ""; inherits: false; initial-value: 31%; } +@property --x-7 { syntax: ""; inherits: false; initial-value: 90%; } +@property --c-7 { syntax: ""; inherits: false; initial-value: hsla(227, 98%, 53%, 1); } +@property --y-8 { syntax: ""; inherits: false; initial-value: 56%; } +@property --s-start-8 { syntax: ""; inherits: false; initial-value: 3.985353824694249%; } +@property --s-end-8 { syntax: ""; inherits: false; initial-value: 13.103042116379756%; } +@property --c-8 { syntax: ""; inherits: false; initial-value: hsla(166, 71%, 60%, 0.32); } +@property --x-8 { syntax: ""; inherits: false; initial-value: 104%; } +@property --c-9 { syntax: ""; inherits: false; initial-value: hsla(219, 83%, 23%, 0.18); } +@property --s-start-9 { syntax: ""; inherits: false; initial-value: 18.597054544690312%; } +@property --s-end-9 { syntax: ""; inherits: false; initial-value: 31%; } +@property --x-9 { syntax: ""; inherits: false; initial-value: 97%; } +@property --y-9 { syntax: ""; inherits: false; initial-value: 19%; } diff --git a/modules/addressbook/web/css/pages/address-book-view.css b/modules/addressbook/web/css/pages/address-book-view.css index 37ac9b4..b8f2f55 100644 --- a/modules/addressbook/web/css/pages/address-book-view.css +++ b/modules/addressbook/web/css/pages/address-book-view.css @@ -73,504 +73,4 @@ .app-profile-table tr:last-child td { border-bottom: 0; } - -@keyframes ani-app-profile-banner { - 0% { - --c-0: hsla(212, 0%, 0%, 1); - --s-start-0: 14.489998991212337%; - --s-end-0: 72%; - --y-0: 93%; - --x-0: 93%; - --c-1: hsla(212, 0%, 0%, 1); - --s-start-1: 0%; - --s-end-1: 45%; - --y-1: 9%; - --x-1: 26%; - --x-2: 15%; - --s-start-2: 2.9253667596993065%; - --s-end-2: 22.388851682060018%; - --c-2: hsla(257, 91%, 27%, 0.35); - --y-2: 79%; - --x-3: 40%; - --s-start-3: 3.985353824694249%; - --s-end-3: 47.580278608924694%; - --y-3: 104%; - --c-3: hsla(212, 100%, 50%, 0.5); - --y-4: 60%; - --x-4: 0%; - --c-4: hsla(224, 72%, 36%, 1); - --s-start-4: 2.391200382592061%; - --s-end-4: 29.307684556768592%; - --s-start-5: 2.9253667596993065%; - --s-end-5: 22.388851682060018%; - --y-5: 37%; - --c-5: hsla(248, 52%, 24%, 1); - --x-5: 92%; - --x-6: 101%; - --y-6: 16%; - --s-start-6: 13.173642363290591%; - --s-end-6: 31.747336520355095%; - --c-6: hsla(212, 100%, 50%, 0.19); - --y-7: 13%; - --s-start-7: 1%; - --s-end-7: 31%; - --x-7: 90%; - --c-7: hsla(227, 98%, 53%, 1); - --y-8: 56%; - --s-start-8: 3.985353824694249%; - --s-end-8: 13.103042116379756%; - --c-8: hsla(166, 71%, 60%, 0.32); - --x-8: 104%; - --c-9: hsla(219, 83%, 23%, 0.18); - --s-start-9: 18.597054544690312%; - --s-end-9: 31%; - --x-9: 97%; - --y-9: 19%; - } - - 100% { - --c-0: hsla(306, 0%, 0%, 1); - --s-start-0: 2.391200382592061%; - --s-end-0: 43.902064173373226%; - --y-0: 9%; - --x-0: 7%; - --c-1: hsla(306, 0%, 0%, 1); - --s-start-1: 9%; - --s-end-1: 54.805582404585024%; - --y-1: 93%; - --x-1: 96%; - --x-2: -2%; - --s-start-2: 3%; - --s-end-2: 26.722813338714598%; - --c-2: hsla(166, 72%, 60%, 1); - --y-2: 103%; - --x-3: 33%; - --s-start-3: 2.391200382592061%; - --s-end-3: 32.0689540200964%; - --y-3: 82%; - --c-3: hsla(180, 100%, 50%, 0.26); - --y-4: 81%; - --x-4: 37%; - --c-4: hsla(212, 88%, 26%, 0.58); - --s-start-4: 4.40642490323111%; - --s-end-4: 37.23528104246256%; - --s-start-5: 3%; - --s-end-5: 32.537089799783296%; - --y-5: 99%; - --c-5: hsla(271, 98%, 53%, 0.31); - --x-5: 54%; - --x-6: 104%; - --y-6: 43%; - --s-start-6: 6%; - --s-end-6: 42.501105312974815%; - --c-6: hsla(262, 100%, 50%, 0.15); - --y-7: -16%; - --s-start-7: 5%; - --s-end-7: 13.10107024898374%; - --x-7: 104%; - --c-7: hsla(298, 36%, 23%, 1); - --y-8: 30%; - --s-start-8: 2.391200382592061%; - --s-end-8: 27.141813016850573%; - --c-8: hsla(180, 100%, 50%, 0.11); - --x-8: 97%; - --c-9: hsla(219, 83%, 23%, 0.59); - --s-start-9: 5%; - --s-end-9: 21.32164536610654%; - --x-9: 78%; - --y-9: 4%; - } -} - -@property --c-0 { - syntax: ""; - inherits: false; - initial-value: hsla(212, 0%, 0%, 1); -} - -@property --s-start-0 { - syntax: ""; - inherits: false; - initial-value: 14.489998991212337%; -} - -@property --s-end-0 { - syntax: ""; - inherits: false; - initial-value: 72%; -} - -@property --y-0 { - syntax: ""; - inherits: false; - initial-value: 93%; -} - -@property --x-0 { - syntax: ""; - inherits: false; - initial-value: 93%; -} - -@property --c-1 { - syntax: ""; - inherits: false; - initial-value: hsla(212, 0%, 0%, 1); -} - -@property --s-start-1 { - syntax: ""; - inherits: false; - initial-value: 0%; -} - -@property --s-end-1 { - syntax: ""; - inherits: false; - initial-value: 45%; -} - -@property --y-1 { - syntax: ""; - inherits: false; - initial-value: 9%; -} - -@property --x-1 { - syntax: ""; - inherits: false; - initial-value: 26%; -} - -@property --x-2 { - syntax: ""; - inherits: false; - initial-value: 15%; -} - -@property --s-start-2 { - syntax: ""; - inherits: false; - initial-value: 2.9253667596993065%; -} - -@property --s-end-2 { - syntax: ""; - inherits: false; - initial-value: 22.388851682060018%; -} - -@property --c-2 { - syntax: ""; - inherits: false; - initial-value: hsla(257, 91%, 27%, 0.35); -} - -@property --y-2 { - syntax: ""; - inherits: false; - initial-value: 79%; -} - -@property --x-3 { - syntax: ""; - inherits: false; - initial-value: 40%; -} - -@property --s-start-3 { - syntax: ""; - inherits: false; - initial-value: 3.985353824694249%; -} - -@property --s-end-3 { - syntax: ""; - inherits: false; - initial-value: 47.580278608924694%; -} - -@property --y-3 { - syntax: ""; - inherits: false; - initial-value: 104%; -} - -@property --c-3 { - syntax: ""; - inherits: false; - initial-value: hsla(212, 100%, 50%, 0.5); -} - -@property --y-4 { - syntax: ""; - inherits: false; - initial-value: 60%; -} - -@property --x-4 { - syntax: ""; - inherits: false; - initial-value: 0%; -} - -@property --c-4 { - syntax: ""; - inherits: false; - initial-value: hsla(224, 72%, 36%, 1); -} - -@property --s-start-4 { - syntax: ""; - inherits: false; - initial-value: 2.391200382592061%; -} - -@property --s-end-4 { - syntax: ""; - inherits: false; - initial-value: 29.307684556768592%; -} - -@property --s-start-5 { - syntax: ""; - inherits: false; - initial-value: 2.9253667596993065%; -} - -@property --s-end-5 { - syntax: ""; - inherits: false; - initial-value: 22.388851682060018%; -} - -@property --y-5 { - syntax: ""; - inherits: false; - initial-value: 37%; -} - -@property --c-5 { - syntax: ""; - inherits: false; - initial-value: hsla(248, 52%, 24%, 1); -} - -@property --x-5 { - syntax: ""; - inherits: false; - initial-value: 92%; -} - -@property --x-6 { - syntax: ""; - inherits: false; - initial-value: 101%; -} - -@property --y-6 { - syntax: ""; - inherits: false; - initial-value: 16%; -} - -@property --s-start-6 { - syntax: ""; - inherits: false; - initial-value: 13.173642363290591%; -} - -@property --s-end-6 { - syntax: ""; - inherits: false; - initial-value: 31.747336520355095%; -} - -@property --c-6 { - syntax: ""; - inherits: false; - initial-value: hsla(212, 100%, 50%, 0.19); -} - -@property --y-7 { - syntax: ""; - inherits: false; - initial-value: 13%; -} - -@property --s-start-7 { - syntax: ""; - inherits: false; - initial-value: 1%; -} - -@property --s-end-7 { - syntax: ""; - inherits: false; - initial-value: 31%; -} - -@property --x-7 { - syntax: ""; - inherits: false; - initial-value: 90%; -} - -@property --c-7 { - syntax: ""; - inherits: false; - initial-value: hsla(227, 98%, 53%, 1); -} - -@property --y-8 { - syntax: ""; - inherits: false; - initial-value: 56%; -} - -@property --s-start-8 { - syntax: ""; - inherits: false; - initial-value: 3.985353824694249%; -} - -@property --s-end-8 { - syntax: ""; - inherits: false; - initial-value: 13.103042116379756%; -} - -@property --c-8 { - syntax: ""; - inherits: false; - initial-value: hsla(166, 71%, 60%, 0.32); -} - -@property --x-8 { - syntax: ""; - inherits: false; - initial-value: 104%; -} - -@property --c-9 { - syntax: ""; - inherits: false; - initial-value: hsla(219, 83%, 23%, 0.18); -} - -@property --s-start-9 { - syntax: ""; - inherits: false; - initial-value: 18.597054544690312%; -} - -@property --s-end-9 { - syntax: ""; - inherits: false; - initial-value: 31%; -} - -@property --x-9 { - syntax: ""; - inherits: false; - initial-value: 97%; -} - -@property --y-9 { - syntax: ""; - inherits: false; - initial-value: 19%; -} - -.app-profile-banner { - --c-0: hsla(212, 0%, 0%, 1); - --y-0: 93%; - --x-0: 93%; - --c-1: hsla(212, 0%, 0%, 1); - --y-1: 9%; - --x-1: 26%; - --x-2: 15%; - --c-2: hsla(257, 91%, 27%, 0.35); - --y-2: 79%; - --x-3: 40%; - --y-3: 104%; - --c-3: hsla(212, 100%, 50%, 0.5); - --y-4: 60%; - --x-4: 0%; - --c-4: hsla(224, 72%, 36%, 1); - --y-5: 37%; - --c-5: hsla(248, 52%, 24%, 1); - --x-5: 92%; - --x-6: 101%; - --y-6: 16%; - --c-6: hsla(212, 100%, 50%, 0.19); - --y-7: 13%; - --x-7: 90%; - --c-7: hsla(227, 98%, 53%, 1); - --y-8: 56%; - --c-8: hsla(166, 71%, 60%, 0.32); - --x-8: 104%; - --c-9: hsla(219, 83%, 23%, 0.18); - --x-9: 97%; - --y-9: 19%; - background-color: hsla(305, 0%, 0%, 1); - background-image: - radial-gradient( - circle at var(--x-0) var(--y-0), - var(--c-0) var(--s-start-0), - transparent var(--s-end-0) - ), - radial-gradient( - circle at var(--x-1) var(--y-1), - var(--c-1) var(--s-start-1), - transparent var(--s-end-1) - ), - radial-gradient( - circle at var(--x-2) var(--y-2), - var(--c-2) var(--s-start-2), - transparent var(--s-end-2) - ), - radial-gradient( - circle at var(--x-3) var(--y-3), - var(--c-3) var(--s-start-3), - transparent var(--s-end-3) - ), - radial-gradient( - circle at var(--x-4) var(--y-4), - var(--c-4) var(--s-start-4), - transparent var(--s-end-4) - ), - radial-gradient( - circle at var(--x-5) var(--y-5), - var(--c-5) var(--s-start-5), - transparent var(--s-end-5) - ), - radial-gradient( - circle at var(--x-6) var(--y-6), - var(--c-6) var(--s-start-6), - transparent var(--s-end-6) - ), - radial-gradient( - circle at var(--x-7) var(--y-7), - var(--c-7) var(--s-start-7), - transparent var(--s-end-7) - ), - radial-gradient( - circle at var(--x-8) var(--y-8), - var(--c-8) var(--s-start-8), - transparent var(--s-end-8) - ), - radial-gradient( - circle at var(--x-9) var(--y-9), - var(--c-9) var(--s-start-9), - transparent var(--s-end-9) - ); - animation: ani-app-profile-banner 10s linear infinite alternate; - background-blend-mode: - normal, normal, normal, normal, normal, normal, normal, normal, normal, - normal; - will-change: transform, opacity; - contain: paint; - height: 160px; -} }