diff --git a/src/app/modules/presentation/remote/remote.component.less b/src/app/modules/presentation/remote/remote.component.less index 94612fe..5186996 100644 --- a/src/app/modules/presentation/remote/remote.component.less +++ b/src/app/modules/presentation/remote/remote.component.less @@ -1,7 +1,7 @@ @import "../../../../styles/shadow"; .song { - background: #fffe; + background: #fff5; width: 100%; padding: 10px; border-radius: 8px; diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index fa8ab01..689eb19 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -39,7 +39,7 @@ - +

diff --git a/src/app/modules/user/login/login.component.less b/src/app/modules/user/login/login.component.less index 7cadcff..206e3c4 100644 --- a/src/app/modules/user/login/login.component.less +++ b/src/app/modules/user/login/login.component.less @@ -8,12 +8,14 @@ p.error { } .login { + backdrop-filter: blur(12px); padding: 20px; width: 400px; margin: 100px 0; - background: #fffc; + background: #fffa; border-radius: 8px; font-size: 18px; + position: relative; @media screen and (max-width: 860px) { margin: 20px; box-sizing: border-box; diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less index 4560335..801b77e 100644 --- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less @@ -8,10 +8,11 @@ nav { left: 0; right: 0; height: 50px; - background: #222; + background: #222b; color: #fff; z-index: 1; - .card-3; + box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53); + backdrop-filter: blur(10px); transition: all 300ms ease-in-out; display: flex; diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index efcddfd..52086a7 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -1,10 +1,10 @@ @import "../../../../styles/shadow"; .card { - .card-3; margin: 20px; border-radius: 8px; background: #fffb; + backdrop-filter: blur(12px); overflow: hidden; width: 800px; position: relative; diff --git a/src/assets/background.jpg b/src/assets/background.jpg new file mode 100644 index 0000000..00d9613 Binary files /dev/null and b/src/assets/background.jpg differ diff --git a/src/assets/background.png b/src/assets/background.png new file mode 100644 index 0000000..e9296af Binary files /dev/null and b/src/assets/background.png differ diff --git a/src/styles/styles.less b/src/styles/styles.less index 78e6aae..9bd82b3 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -20,6 +20,8 @@ body { background: -webkit-linear-gradient(to bottom, #373b44, @primary-color); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #373b44, @primary-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-attachment: fixed; + background: url("/assets/background.png"); + background-size: cover; } p { @@ -100,3 +102,23 @@ select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #0000 inset; transition: background-color 5000s ease-in-out 0s; } + +mat-dialog-container.mat-dialog-container { + background: #fffb; + backdrop-filter: blur(8px); + border-radius: 8px; +} + +.mat-form-field-outline { + background: #fff4; + border-radius: 4px; +} + +.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap { + border-top-color: inherit !important; +} + +.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, +.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { + transform: translateY(-1.0em) scale(0.75); +}