From 0b831e45d5b0ee8f365f7ce22c5989a77f60b549 Mon Sep 17 00:00:00 2001 From: benjamin Date: Mon, 9 Mar 2026 16:39:41 +0100 Subject: [PATCH] replace less variables --- .../brand/new-user/new-user.component.less | 14 ++++++++------ .../shows/list/list-item/list-item.component.less | 4 +--- .../modules/shows/services/show-song.service.ts | 11 ++--------- src/app/modules/shows/services/show.service.ts | 6 +----- .../songs/song-list/song-list.component.less | 4 +--- .../user/info/users/user/user.component.less | 4 +--- .../navigation/filter/filter.component.less | 4 +--- .../navigation/link/link.component.less | 8 +++----- src/styles/styles.less | 15 ++++----------- 9 files changed, 22 insertions(+), 48 deletions(-) diff --git a/src/app/modules/brand/new-user/new-user.component.less b/src/app/modules/brand/new-user/new-user.component.less index 48d994b..8e68c4d 100644 --- a/src/app/modules/brand/new-user/new-user.component.less +++ b/src/app/modules/brand/new-user/new-user.component.less @@ -1,4 +1,6 @@ -@animation-duration: 20s; +:host { + --animation-duration: 20s; +} .frame { width: 512px; @@ -11,10 +13,10 @@ .brand { position: absolute; left: 0; - animation: @animation-duration brand ease-in-out forwards; + animation: var(--animation-duration) brand ease-in-out forwards; opacity: 0; @media screen and (max-width: 860px) { - animation: @animation-duration brand-mobile ease-in-out forwards; + animation: var(--animation-duration) brand-mobile ease-in-out forwards; } } @@ -34,7 +36,7 @@ @media screen and (max-width: 860px) { font-size: 40px; } - animation: @animation-duration welcome ease-in-out forwards; + animation: var(--animation-duration) welcome ease-in-out forwards; } .name { @@ -43,14 +45,14 @@ @media screen and (max-width: 860px) { font-size: 30px; } - animation: @animation-duration name ease-in-out forwards; + animation: var(--animation-duration) name ease-in-out forwards; } .roles { opacity: 0; font-size: 20px; margin-top: 40px; - animation: @animation-duration roles ease-in-out forwards; + animation: var(--animation-duration) roles ease-in-out forwards; } } diff --git a/src/app/modules/shows/list/list-item/list-item.component.less b/src/app/modules/shows/list/list-item/list-item.component.less index 3a7d285..20ec12b 100644 --- a/src/app/modules/shows/list/list-item/list-item.component.less +++ b/src/app/modules/shows/list/list-item/list-item.component.less @@ -1,5 +1,3 @@ -@import "../../../../../styles/styles"; - .list-item { padding: 5px 20px; display: grid; @@ -14,7 +12,7 @@ cursor: pointer; &:hover { - background: @primary-color; + background: var(--primary-color); color: #fff; } } diff --git a/src/app/modules/shows/services/show-song.service.ts b/src/app/modules/shows/services/show-song.service.ts index 069cb1b..e614f28 100644 --- a/src/app/modules/shows/services/show-song.service.ts +++ b/src/app/modules/shows/services/show-song.service.ts @@ -40,21 +40,14 @@ export class ShowSongService { public list = (showId: string): Promise => firstValueFrom(this.list$(showId)); public async delete$(showId: string, showSongId: string, index: number): Promise { - const [showSong, show] = await Promise.all([ - this.read(showId, showSongId), - firstValueFrom(this.showService.read$(showId)), - ]); + const [showSong, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]); if (!show) return; if (!showSong) return; const order = [...show.order]; order.splice(index, 1); - await Promise.all([ - this.showSongDataService.delete(showId, showSongId), - this.showService.update$(showId, {order}), - this.userService.decSongCount(showSong.songId), - ]); + await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), this.userService.decSongCount(showSong.songId)]); } public update$ = async (showId: string, songId: string, data: Partial): Promise => await this.showSongDataService.update$(showId, songId, data); diff --git a/src/app/modules/shows/services/show.service.ts b/src/app/modules/shows/services/show.service.ts index eee89d6..488c94e 100644 --- a/src/app/modules/shows/services/show.service.ts +++ b/src/app/modules/shows/services/show.service.ts @@ -30,11 +30,7 @@ export class ShowService { () => this.showDataService.list$, (user: User | null, shows: Show[]) => ({user, shows}) ), - map(s => - s.shows - .filter(show => !show.archived) - .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)) - ) + map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))) ); } diff --git a/src/app/modules/songs/song-list/song-list.component.less b/src/app/modules/songs/song-list/song-list.component.less index 8785443..7da8650 100644 --- a/src/app/modules/songs/song-list/song-list.component.less +++ b/src/app/modules/songs/song-list/song-list.component.less @@ -1,5 +1,3 @@ -@import "../../../../styles/styles"; - .list-item { padding: 5px 20px; display: grid; @@ -13,7 +11,7 @@ cursor: pointer; &:hover { - background: @primary-color; + background: var(--primary-color); color: #fff; .warning { diff --git a/src/app/modules/user/info/users/user/user.component.less b/src/app/modules/user/info/users/user/user.component.less index 05a5dd5..132a633 100644 --- a/src/app/modules/user/info/users/user/user.component.less +++ b/src/app/modules/user/info/users/user/user.component.less @@ -1,5 +1,3 @@ -@import "../../../../../../styles/styles"; - .users { display: grid; grid-template-columns: 1fr 1fr 40px; @@ -10,6 +8,6 @@ cursor: pointer; &:hover { - color: @primary-color; + color: var(--primary-color); } } diff --git a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less index bbe68ed..b58870f 100644 --- a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less @@ -1,5 +1,3 @@ -@import "../../../../../../styles/styles"; - input { font-size: 16px; background: transparent; @@ -10,7 +8,7 @@ input { &:focus { outline: none; - border-bottom: 1px solid @primary-color; + border-bottom: 1px solid var(--primary-color); } @media screen and (max-width: 500px) { diff --git a/src/app/widget-modules/components/application-frame/navigation/link/link.component.less b/src/app/widget-modules/components/application-frame/navigation/link/link.component.less index b1e76fa..57e2ee4 100644 --- a/src/app/widget-modules/components/application-frame/navigation/link/link.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/link/link.component.less @@ -1,5 +1,3 @@ -@import "../../../../../../styles/styles"; - a { opacity: 0.8; display: block; @@ -10,13 +8,13 @@ a { padding: 15px; box-sizing: border-box; background: transparent; - transition: @transition; + transition: var(--transition); border-color: #222; fa-icon { display: inline-block; transform: scale(1); - transition: @transition; + transition: var(--transition); } @media screen and (max-width: 860px) { @@ -35,7 +33,7 @@ a { } &.active { - border-bottom: 5px solid @primary-color; + border-bottom: 5px solid var(--primary-color); opacity: 1; fa-icon { diff --git a/src/styles/styles.less b/src/styles/styles.less index dc66824..ab8a73a 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -1,12 +1,9 @@ -@primary-color: #4286f4; - -@navigation-background: #fffffff1; - -@transition: all 300ms ease-in-out; - :root { --color-primary: #4286f4; --color-primary-light: #639af3; + --primary-color: #4286f4; + --navigation-background: #fffffff1; + --transition: all 300ms ease-in-out; } html { @@ -20,9 +17,7 @@ body { font-size: 14px; color: #333; - background-image: url("/assets/background.jpg"); - background-size: cover; - background-position: center; + background: linear-gradient(39deg, #292e49, #536976, #bbd2c5); overflow: auto; } @@ -45,8 +40,6 @@ a { } - - .content > *:not(router-outlet) { display: flex; justify-content: center;