Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: outsource background images to backgrounds.scss

Browse source
This commit is contained in:
Chneemann 2025-05-03 10:31:15 +02:00
parent f763e42ded
commit dea3d31f2c
11 changed files with 29 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/auth/forgot-password/forgot-password.component.html
View file

@ -1,4 +1,4 @@
<section>
<section class="login-background">
<div class="content">
<div class="headline">Forgot your password?</div>
@if (!queryEmail && !sendMailSuccess && !queryEmailSuccess) {

6
frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
View file

@ -1,7 +1,3 @@
@use "./../../../../assets/style/backgrounds.scss" as *;
@use "./../../../../assets/style/form.scss" as *;
@use "./../../../../assets/style/auth-layout.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/login.jpeg);
}

2
frontend/src/app/components/auth/landing-page/landing-page.component.html
View file

@ -1,4 +1,4 @@
<section>
<section class="home-background">
<div class="headline">
<p>Movies, TV shows, and more</p>
<p>Watch whenever you want wherever you want</p>

6
frontend/src/app/components/auth/landing-page/landing-page.component.scss
View file

@ -1,12 +1,8 @@
@use "./../../../../assets/style/backgrounds.scss" as *;
@use "./../../../../assets/style/colors.scss" as *;
@use "./../../../../assets/style/form.scss" as *;
@use "./../../../../assets/style/auth-layout.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(./../../../../assets/img/backgrounds/home.jpeg);
}
.headline {
p:nth-child(1) {
font-size: 48px;

2
frontend/src/app/components/auth/login/login.component.html
View file

@ -1,4 +1,4 @@
<section>
<section class="login-background">
<div class="content">
<div class="headline">Log in</div>
<form

6
frontend/src/app/components/auth/login/login.component.scss
View file

@ -1,13 +1,9 @@
@use "./../../../../assets/style/backgrounds.scss" as *;
@use "./../../../../assets/style/colors.scss" as *;
@use "./../../../../assets/style/form.scss" as *;
@use "./../../../../assets/style/auth-layout.scss" as *;
@use "./../../../../assets/style/checkbox.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/login.jpeg);
}
.content {
position: relative;
}

2
frontend/src/app/components/auth/register/register.component.html
View file

@ -1,4 +1,4 @@
<section>
<section class="register-background">
<div class="content">
<div class="headline">Sign Up</div>
@if (registrationSuccess) {

6
frontend/src/app/components/auth/register/register.component.scss
View file

@ -1,8 +1,4 @@
@use "./../../../../assets/style/backgrounds.scss" as *;
@use "./../../../../assets/style/form.scss" as *;
@use "./../../../../assets/style/auth-layout.scss" as *;
@use "./../../../../assets/style/checkbox.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/register.jpeg);
}

2
frontend/src/app/components/auth/verify-email/verify-email.component.html
View file

@ -1,4 +1,4 @@
<section>
<section class="login-background">
<div class="content">
<div class="headline">Verify Email</div>
<div class="note">

6
frontend/src/app/components/auth/verify-email/verify-email.component.scss
View file

@ -1,7 +1,3 @@
@use "./../../../../assets/style/backgrounds.scss" as *;
@use "./../../../../assets/style/form.scss" as *;
@use "./../../../../assets/style/auth-layout.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url(./../../../../assets/img/backgrounds/login.jpeg);
}

19
frontend/src/assets/style/backgrounds.scss Normal file
View file

@ -0,0 +1,19 @@
@mixin background-image($path, $opacity) {
background-image: linear-gradient(
rgba(0, 0, 0, $opacity),
rgba(0, 0, 0, $opacity)
),
url($path);
}
.login-background {
@include background-image("/assets/img/backgrounds/login.jpeg", 0.3);
}
.register-background {
@include background-image("/assets/img/backgrounds/register.jpeg", 0.3);
}
.home-background {
@include background-image("/assets/img/backgrounds/home.jpeg", 0.4);
}