Patrick Sun
5 lat temu
5 zmienionych plików z 32 dodań i 77 usunięć
+ 10
- 1
src/app/app.component.html
Wyświetl plik
| @@ -1,4 +1,4 @@ | |||
| <kendo-appbar *ngIf='login' [position]="'top'" [positionMode]="'sticky'"> | |||
| <kendo-appbar *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'"> | |||
| <kendo-appbar-section> | |||
| <kendo-menu [items]="items" (select)="onSelect($event)"> | |||
| <ng-template kendoMenuItemTemplate let-item="item"> | |||
| @@ -26,3 +26,12 @@ | |||
| <app-loan-edit #loanEditComponent></app-loan-edit> | |||
| <router-outlet></router-outlet> | |||
| <div class="vimeo-wrapper"> | |||
| <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0" | |||
| allow="autoplay; fullscreen" allowfullscreen></iframe> | |||
| <div class="overlay"> | |||
| </div> | |||
| </div> | |||
+ 20
- 27
src/app/app.component.scss
Wyświetl plik
| @@ -1,30 +1,23 @@ | |||
| .target { | |||
| border-radius: 5px; | |||
| height: 100px; | |||
| width: 400px; | |||
| background-color: yellowgreen; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08); | |||
| } | |||
| .placeholder { | |||
| font-size: 20px; | |||
| color: #656565; | |||
| margin: 0; | |||
| } | |||
| .topMenuBar { | |||
| left: 0px; | |||
| top: 0px; | |||
| // position: absolute; | |||
| margin : 0px; | |||
| width : 100%; | |||
| display: block; | |||
| background-color: rgb(229, 230, 218); | |||
| box-shadow : 0px 0px 2px 0px #d6d2d2 | |||
| } | |||
| .vimeo-wrapper { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| z-index: -1; | |||
| pointer-events: none; | |||
| overflow: hidden; | |||
| } | |||
| .vimeo-wrapper iframe { | |||
| width: 100vw; | |||
| height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ | |||
| min-height: 100vh; | |||
| min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| } | |||
| .appbar, | |||
| .k-appbar-sticky{ | |||
+ 1
- 1
src/app/auth/auth.component.scss
Wyświetl plik
| @@ -4,6 +4,7 @@ div.parent { | |||
| display: table; | |||
| width: 100%; | |||
| height: 100vh; | |||
| opacity: 0.95; | |||
| background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; | |||
| } | |||
| @@ -20,5 +21,4 @@ div.parent { | |||
| padding-bottom: 20px; | |||
| box-shadow: 0 0 6px black; | |||
| border-radius: 5px; | |||
| opacity: 0.8; | |||
| } | |||
+ 1
- 1
src/app/auth/dist/auth.component.css
Wyświetl plik
| @@ -6,6 +6,7 @@ div.parent { | |||
| display: table; | |||
| width: 100%; | |||
| height: 100vh; | |||
| opacity: 0.95; | |||
| background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed; | |||
| } | |||
| @@ -22,5 +23,4 @@ div.parent { | |||
| padding-bottom: 20px; | |||
| box-shadow: 0 0 6px black; | |||
| border-radius: 5px; | |||
| opacity: 0.8; | |||
| } | |||
+ 0
- 47
src/index.html
Wyświetl plik
| @@ -12,53 +12,6 @@ | |||
| <body> | |||
| <app-root></app-root> | |||
| <style> | |||
| #bgVideo { | |||
| position: fixed; | |||
| right: 0; | |||
| bottom: 0; | |||
| min-width: 100%; | |||
| min-height: 100%; | |||
| z-index: -1; | |||
| } | |||
| html { | |||
| background: url('./assets/img/body_bg.jpg') no-repeat center center fixed; | |||
| -webkit-background-size: cover; | |||
| -moz-background-size: cover; | |||
| -o-background-size: cover; | |||
| background-size: cover; | |||
| } | |||
| body { | |||
| margin: 0; | |||
| background-size: cover; | |||
| } | |||
| .vimeo-container { | |||
| padding: 0; | |||
| width: 100%; | |||
| height: 100vh; | |||
| overflow: hidden; | |||
| position: relative; | |||
| } | |||
| iframe { | |||
| box-sizing: border-box; | |||
| width: 177.77777778vh; | |||
| height: 56.25vw; | |||
| min-width: 100%; | |||
| min-height: 100%; | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| } | |||
| </style> | |||
| <!-- <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0" | |||
| allow="autoplay; fullscreen" allowfullscreen></iframe> --> | |||
| </body> | |||
| </html> | |||
Ładowanie…