From 70c63882e48c9534fa52d26b11a225eebb38e49a Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Thu, 25 Jan 2024 23:37:36 +0100 Subject: [PATCH] [DEV] corrrect the desplay of the player overflow (and some redesign) --- back/pom.xml | 2 +- front/package.json | 2 +- .../element-player-audio.html | 85 +++--- .../element-player-audio.less | 246 ++++++--------- .../element-player-audio.ts | 288 +++++------------- front/src/app/model/album.ts | 2 +- .../app/scene/error-viewer/error-viewer.ts | 5 +- front/src/styles.less | 140 ++++++--- 8 files changed, 318 insertions(+), 452 deletions(-) diff --git a/back/pom.xml b/back/pom.xml index b156f48..f75aa90 100644 --- a/back/pom.xml +++ b/back/pom.xml @@ -20,7 +20,7 @@ kangaroo-and-rabbit archidata - 0.6.0 + 0.6.1 org.slf4j diff --git a/front/package.json b/front/package.json index 3c7a877..af34e59 100644 --- a/front/package.json +++ b/front/package.json @@ -5,7 +5,7 @@ "scripts": { "all": "npm run build && npm run test", "ng": "ng", - "start": "ng serve --configuration=develop --watch --port 4203", + "dev": "ng serve --configuration=develop --watch --port 4203", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", diff --git a/front/src/app/component/element-player-audio/element-player-audio.html b/front/src/app/component/element-player-audio/element-player-audio.html index 1c6aae2..9d5439c 100644 --- a/front/src/app/component/element-player-audio/element-player-audio.html +++ b/front/src/app/component/element-player-audio/element-player-audio.html @@ -1,46 +1,45 @@ -
-
-
- -
-
-
-
- -
-
- -
-
- -
-
- - - - - - - - - - -
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + + +
+ + + + +
+
\ No newline at end of file diff --git a/front/src/app/component/element-player-audio/element-player-audio.less b/front/src/app/component/element-player-audio/element-player-audio.less index df9f42a..1b6dee3 100644 --- a/front/src/app/component/element-player-audio/element-player-audio.less +++ b/front/src/app/component/element-player-audio/element-player-audio.less @@ -1,159 +1,111 @@ +.controls { + //visibility: hidden; + opacity: 0.85; + width: 96%; + //height: 150px; + border-radius: 10px; + position: absolute; + bottom: 20px; + left: 2%; + //margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; + font-size: 40px; -.bottom { - .controls { - //visibility: hidden; - opacity: 0.85; - width: 96%; - height: 150px; - border-radius: 10px; - position: absolute; - bottom: 20px; - left: 2%; - //margin-left: -200px; - background-color: black; - box-shadow: 3px 3px 5px black; - transition: 1s all; - display: flex; + + .controls-inner { + position: relative; + width: fill; + height: fill; + font-family: monospace; + color: white; + margin: 10px 15px 1px 15px; + font-size: 20px; + } + + .material-icons { + color: #FFF; font-size: 40px; + } + + button { + border: none; + background: none; + } + + button:disabled, + button[disabled] { .material-icons { - color: #FFF; - font-size: 40px; - } - button { - border: none; - background: none; + color: rgb(46, 46, 46); } + } - button:disabled, - button[disabled] { - .material-icons { - color: rgb(46, 46, 46); - } - } - - .slidecontainer { - line-height: 38px; - font-size: 10px; - font-family: monospace; - text-shadow: 1px 1px 0px black; - color: white; - flex: 5; - position: relative; - } - .slider { - position: relative; - -webkit-appearance: none; - //width: calc(100% - 60px); - width: 95%; - height: 10px; - top: 5px; - border-radius: 5px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - flex: 5; - } - .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - border-radius: 50%; - background: #4CAF50; - cursor: pointer; - } - - .slider::-moz-range-thumb { - width: 25px; - height: 25px; - border-radius: 50%; - background: #4CAF50; - cursor: pointer; - } + .slider { + position: relative; + -webkit-appearance: none; + width: 100%; + height: 10px; + top: 5px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + flex: 5; + } - .timer-title { - position: absolute; - left: 30px; - width: 100%; - font-size: 20px; - font-weight:bold; - bottom: 104px; - } - .timer-lines { - position: absolute; - left: 30px; - //width: calc(100%-60px); - font-size: 20px; - font-weight:bold; - bottom: 82px; - } - .timer-text { - position: absolute; - left: 30px; - width: 100%; - font-size: 20px; - font-weight:bold; - bottom: 40px; - } - .timer-control { - position: absolute; - //top: 25px; - left: 0px; - width: 100%; - //line-height: 38px; - font-size: 30px; - font-weight:bold; - bottom: 0px; - } - .label { - //transform: translate(-12px,-12px); - vertical-align: text-top; - line-height: 18px; - min-width: 50%; - //display: block, - } + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; } - /* - :hover .controls, :focus .controls { - opacity: 1; + + .slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; } - */ - - button:before { - font-family: HeydingsControlsRegular; - font-size: 30px; - position: relative; - color: #FFF; - //text-shadow: 1px 1px 0px black; + + .text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .timer { - line-height: 38px; + + .title { + font-size: 24px; + font-weight: bold; + } + + .timer-slider { + width: 100%; + margin: 4px 0px 4px 0px; + font-size: 20px; + padding-bottom: 10px; + } + + + .control { + width: 100%; font-size: 30px; - font-family: monospace; - text-shadow: 1px 1px 0px black; - color: white; - flex: 5; - position: relative; + font-weight: bold; + display: flex; + justify-content: center; } - - .timer div { - width:100%; - line-height: 38px; - font-size: 10px; - font-family: monospace; - text-shadow: 1px 1px 0px black; - color: white; - flex: 5; - position: relative; - } - - .timer span { - position: absolute; - z-index: 3; - left: 19px; - } - - } + +button:before { + font-family: HeydingsControlsRegular; + font-size: 30px; + position: relative; + color: #FFF; +} \ No newline at end of file diff --git a/front/src/app/component/element-player-audio/element-player-audio.ts b/front/src/app/component/element-player-audio/element-player-audio.ts index 77fdeeb..b7a873a 100644 --- a/front/src/app/component/element-player-audio/element-player-audio.ts +++ b/front/src/app/component/element-player-audio/element-player-audio.ts @@ -26,16 +26,16 @@ export enum PlayMode { @Component({ selector: 'app-element-player-audio', templateUrl: './element-player-audio.html', - styleUrls: [ './element-player-audio.less' ] + styleUrls: ['./element-player-audio.less'] }) export class ElementPlayerAudioComponent implements OnInit { mediaPlayer: HTMLAudioElement; duration: number; durationDisplay: string; @ViewChild('mediaPlayer') - set mainVideoEl(el: ElementRef) { - if(el !== null && el !== undefined) { - this.mediaPlayer = el.nativeElement; + set mainVideoEl(el: ElementRef) { + if (el !== null && el !== undefined) { + this.mediaPlayer = el.nativeElement; } } public mediaSource: string = undefined; @@ -50,7 +50,9 @@ export class ElementPlayerAudioComponent implements OnInit { public volume_value: number = 100; public volume_displayMenu: boolean = false; - nameData: string; + dataTitle: string; + dataAlbum: string; + dataAuthor: string; playStream: boolean; isPlaying: boolean; currentTime: any; @@ -103,28 +105,27 @@ export class ElementPlayerAudioComponent implements OnInit { } let self = this; this.havePrevious = this.localIdStreaming <= 0; - this.haveNext = this.localIdStreaming >= this.localListStreaming.length-1; + this.haveNext = this.localIdStreaming >= this.localListStreaming.length - 1; this.trackService.get(this.localListStreaming[this.localIdStreaming]) .then((response: Media) => { //console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`); self.currentLMedia = response; - self.nameData = response.name; + self.dataTitle = response.name; if (!isNullOrUndefined(response.albumId)) { this.albumService.get(response.albumId) .then((response2: NodeData) => { - self.nameData = response2.name + " - " + self.nameData; - this.titleService.setTitle(`${environment.applName} > ${self.nameData}`) + self.dataAlbum = response2.name; + self.updateTitle(); }) - .catch(() => {}); + .catch(() => { }); } if (!isNullOrUndefined(response.artists) && isArray(response.artists) && response.artists.length > 0) { this.artistService.get(response.artists[0]) .then((response2: NodeData) => { - self.nameData = `${self.nameData} (${response2.name})`; - this.titleService.setTitle(`${environment.applName} > ${self.nameData}`) + self.dataAuthor = response2.name; }) - .catch(() => {}); - } + .catch(() => { }); + } if (isNullOrUndefined(self.currentLMedia)) { console.log("Can not retreive the media ...") return; @@ -136,187 +137,45 @@ export class ElementPlayerAudioComponent implements OnInit { self.mediaSource = self.httpService.createRESTCall2({ api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`, addURLToken: true, - }); + }).replace("http://localhost:19080", "https://atria-soft.org"); }).catch(() => { console.error("error not ùmanaged in audio player ... 111"); }) } + updateTitle() { + let title = this.dataTitle; + if (!isNullOrUndefined(this.dataAlbum)) { + title = `${this.dataAlbum} - ${title}`; + } + if (!isNullOrUndefined(this.dataAuthor)) { + title = `${title} (${this.dataAuthor})`; + } - generateName() { - /* - this.generatedName = ''; - if(this.seriesName !== undefined) { - this.generatedName = `${this.generatedName }${this.seriesName }-`; - } - if(this.seasonName !== undefined) { - if(this.seasonName.length < 2) { - this.generatedName = `${this.generatedName }s0${ this.seasonName }-`; - } else { - this.generatedName = `${this.generatedName }s${ this.seasonName }-`; - } - } - if(this.episode !== undefined) { - if(this.episode < 10) { - this.generatedName = `${this.generatedName }e0${ this.episode }-`; - } else { - this.generatedName = `${this.generatedName }e${ this.episode }-`; - } - } - this.generatedName = this.generatedName + this.name; - this.generatedName = this.generatedName.replace(new RegExp('&', 'g'), '_'); - this.generatedName = this.generatedName.replace(new RegExp('/', 'g'), '_'); - // update the path of the uri request - this.mediaSource = this.httpService.createRESTCall2({ - api: `data/${ this.dataId}/${this.generatedName}`, - addURLToken: true, - }); - */ - } - - myPeriodicCheckFunction() { - console.log('check ... '); + this.titleService.setTitle(`${environment.applName} > ${title}`) } changeMetadata() { console.log('list of the stream:'); - - /* - let captureStream = this.audioPlayer.audioTracks; - for (let iii=0; iii < captureStream.length; iii++) { - console.log(" - " + captureStream[iii].language); - if (captureStream[iii].language.substring(0,2) === "fr") { - captureStream[iii].enabled = true; - } else { - captureStream[iii].enabled = false; - } - } - */ } -/* - ngOnInit() { - let self = this; - - this.arianeService.updateManual(this.route.snapshot.paramMap); - this.idVideo = this.arianeService.getVideoId(); - this.arianeService.mediaChange.subscribe((mediaId) => { - console.log(`Detect mediaId change...${ mediaId}`); - self.idVideo = mediaId; - self.updateDisplay(); - }); - self.updateDisplay(); - } -*/ - updateDisplay():void { - let self = this; - /* - self.haveNext = null; - self.havePrevious = null; - this.mediaService.get(this.idVideo) - .then((response) => { - console.log(`get response of media : ${ JSON.stringify(response, null, 2)}`); - self.error = ''; - self.name = response.name; - self.description = response.description; - self.episode = response.episode; - self.seriesId = response.seriesId; - self.seasonId = response.seasonId; - self.dataId = response.dataId; - self.time = response.time; - self.generatedName = "????????? TODO: ???????" //response.generatedName; - if(self.dataId !== -1) { - self.mediaSource = self.httpService.createRESTCall2({ - api: `data/${ self.dataId}/${self.generatedName}`, - addURLToken: true, - }); - } else { - self.mediaSource = ''; - } - self.covers = self.dataService.getCoverListUrl(response.covers); - - self.generateName(); - if(self.seriesId !== undefined && self.seriesId !== null) { - self.seriesService.get(self.seriesId) - .then((response2) => { - self.seriesName = response2.name; - self.generateName(); - }).catch((response3) => { - // nothing to do ... - }); - } - if(self.seasonId !== undefined && self.seasonId !== null) { - self.seasonService.get(self.seasonId) - .then((response4) => { - self.seasonName = response4.name; - self.generateName(); - }).catch((response5) => { - // nothing to do ... - }); - self.seasonService.getVideo(self.seasonId) - .then((response6:any) => { - // console.log("saison property: " + JSON.stringify(response, null, 2)); - self.haveNext = null; - self.havePrevious = null; - for(let iii = 0; iii < response6.length; iii++) { - if(isNullOrUndefined(response6[iii].episode)) { - continue; - } - if(response6[iii].episode < self.episode) { - if(self.havePrevious === null) { - self.havePrevious = response6[iii]; - } else if(self.havePrevious.episode < response6[iii].episode) { - self.havePrevious = response6[iii]; - } - } else if(response6[iii].episode > self.episode) { - if(self.haveNext === null) { - self.haveNext = response6[iii]; - } else if(self.haveNext.episode > response6[iii].episode) { - self.haveNext = response6[iii]; - } - } - self.covers.push(self.dataService.getCoverUrl(response6[iii])); - } - }).catch((response7:any) => { - - }); - } - self.mediaIsLoading = false; - // console.log("display source " + self.mediaSource); - // console.log("set transformed : " + JSON.stringify(self, null, 2)); - }).catch((response8) => { - self.error = 'Can not get the data'; - self.name = ''; - self.description = ''; - self.episode = undefined; - self.seriesId = undefined; - self.seasonId = undefined; - self.dataId = -1; - self.time = undefined; - self.generatedName = ''; - self.mediaSource = ''; - self.covers = undefined; - self.seriesName = undefined; - self.seasonName = undefined; - self.mediaIsNotFound = true; - self.mediaIsLoading = false; - }); - */ + myPeriodicCheckFunction() { + console.log('check ... '); } onRequirePlay() { this.playStream = true; } onRequireStop() { - + this.playStream = false; } onAudioEnded() { if (this.playMode === PlayMode.PLAY_ONE) { - this.playStream = false; + this.playStream = false; } else if (this.playMode === PlayMode.PLAY_ALL) { this.onNext(); } else if (this.playMode === PlayMode.PLAY_ONE_LOOP) { this.mediaPlayer.currentTime = 0; this.onPlay(); } else { - if (this.localIdStreaming == this.localListStreaming.length-1) { + if (this.localIdStreaming == this.localListStreaming.length - 1) { this.localIdStreaming = 0; this.updateMediaStreamed(); if (this.localListStreaming.length == 1) { @@ -336,25 +195,25 @@ export class ElementPlayerAudioComponent implements OnInit { this.isPlaying = false; } - convertIndisplayTime(time:number) : string { - let tmpp = parseInt(`${ time}`, 10); - let heures = parseInt(`${ tmpp / 3600}`, 10); - tmpp = tmpp - heures * 3600; - let minutes = parseInt(`${ tmpp / 60}`, 10); - let seconds = tmpp - minutes * 60; + convertIndisplayTime(time: number): string { + let temporaryValue = parseInt(`${time}`, 10); + let hours = parseInt(`${temporaryValue / 3600}`, 10); + temporaryValue = temporaryValue - hours * 3600; + let minutes = parseInt(`${temporaryValue / 60}`, 10); + let seconds = temporaryValue - minutes * 60; let out = ''; - if(heures !== 0) { - out = `${out }${heures }:`; + if (hours !== 0) { + out = `${out}${hours}:`; } - if(minutes >= 10) { - out = `${out }${minutes }:`; + if (minutes >= 10) { + out = `${out}${minutes}:`; } else { - out = `${out }0${ minutes }:`; + out = `${out}0${minutes}:`; } - if(seconds >= 10) { + if (seconds >= 10) { out = out + seconds; } else { - out = `${out }0${ seconds}`; + out = `${out}0${seconds}`; } return out; } @@ -368,15 +227,15 @@ export class ElementPlayerAudioComponent implements OnInit { } changeDurationchange(duration: any) { console.log('duration change '); - console.log(` ==> ${ this.mediaPlayer.duration}`); + console.log(` ==> ${this.mediaPlayer.duration}`); this.duration = this.mediaPlayer.duration; this.durationDisplay = this.convertIndisplayTime(this.duration); } onPlay() { console.log('play'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.lockPlayerEnable(); @@ -385,8 +244,8 @@ export class ElementPlayerAudioComponent implements OnInit { onPause() { console.log('pause'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.unlockPlayerEnable(); @@ -395,7 +254,7 @@ export class ElementPlayerAudioComponent implements OnInit { onPauseToggle() { console.log('pause toggle ...'); - if(this.isPlaying === true) { + if (this.isPlaying === true) { this.onPause(); } else { this.onPlay(); @@ -404,8 +263,12 @@ export class ElementPlayerAudioComponent implements OnInit { onStop() { console.log('stop'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (this.mediaPlayer.paused && this.mediaPlayer.currentTime == 0) { + this.mediaSource = null; + return; + } + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.unlockPlayerEnable(); @@ -426,7 +289,7 @@ export class ElementPlayerAudioComponent implements OnInit { onNext() { console.log('next'); - if (this.localIdStreaming >= this.localListStreaming.length-1) { + if (this.localIdStreaming >= this.localListStreaming.length - 1) { console.error("have no next !!!"); return; } @@ -435,10 +298,10 @@ export class ElementPlayerAudioComponent implements OnInit { this.playerService.next(); } - seek(newValue:any) { - console.log(`seek ${ newValue.value}`); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + seek(newValue: any) { + console.log(`seek ${newValue.value}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.mediaPlayer.currentTime = newValue.value; @@ -446,8 +309,8 @@ export class ElementPlayerAudioComponent implements OnInit { onRewind() { console.log('rewind'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.mediaPlayer.currentTime = this.currentTime - 10; @@ -455,8 +318,8 @@ export class ElementPlayerAudioComponent implements OnInit { onForward() { console.log('forward'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } this.mediaPlayer.currentTime = this.currentTime + 10; @@ -464,8 +327,8 @@ export class ElementPlayerAudioComponent implements OnInit { onMore() { console.log('more'); - if(isNullOrUndefined(this.mediaPlayer)) { - console.log(`error element: ${ this.mediaPlayer}`); + if (isNullOrUndefined(this.mediaPlayer)) { + console.log(`error element: ${this.mediaPlayer}`); return; } } @@ -474,28 +337,29 @@ export class ElementPlayerAudioComponent implements OnInit { // these element is to permit to not stop music when sceen is off !! wakeLock = null; unlockPlayerEnable() { - let tmppp = this.wakeLock; + let temporaryValue = this.wakeLock; this.wakeLock = null; - if (!isNullOrUndefined(tmppp)) { - tmppp.release(); + if (!isNullOrUndefined(temporaryValue)) { + console.log(`plopppp ${temporaryValue}`); + temporaryValue.release(); } try { let tmp = navigator as any; this.wakeLock = tmp.wakeLock.request('screen'); - } catch (err) { + } catch (err) { // The Wake Lock request has failed - usually system related, such as battery. console.log(`Can not lock screen element: ${err.name}, ${err.message}`); - } + } } - lockPlayerEnable() { + async lockPlayerEnable() { if ('wakeLock' in navigator) { try { let tmp = navigator as any; - this.wakeLock = tmp.wakeLock.request('screen'); - } catch (err) { + this.wakeLock = await tmp.wakeLock.request('screen'); + } catch (err) { // The Wake Lock request has failed - usually system related, such as battery. console.log(`Can not lock screen element: ${err.name}, ${err.message}`); - } + } } } } diff --git a/front/src/app/model/album.ts b/front/src/app/model/album.ts index aba7c3c..fb52ec0 100644 --- a/front/src/app/model/album.ts +++ b/front/src/app/model/album.ts @@ -1,4 +1,4 @@ -import { isArrayOf, isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils"; +import { isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils"; diff --git a/front/src/app/scene/error-viewer/error-viewer.ts b/front/src/app/scene/error-viewer/error-viewer.ts index 6571deb..c978bab 100644 --- a/front/src/app/scene/error-viewer/error-viewer.ts +++ b/front/src/app/scene/error-viewer/error-viewer.ts @@ -5,15 +5,14 @@ */ import { Component, OnInit } from '@angular/core'; -import { ArianeService } from '../../service/ariane'; @Component({ selector: 'app-error-viewer', templateUrl: './error-viewer.html', - styleUrls: [ './error-viewer.less' ] + styleUrls: ['./error-viewer.less'] }) export class ErrorViewerScene implements OnInit { - constructor(private arianeService: ArianeService) { } + constructor() { } ngOnInit() { } diff --git a/front/src/styles.less b/front/src/styles.less index 8f57779..e5c229a 100644 --- a/front/src/styles.less +++ b/front/src/styles.less @@ -1,34 +1,67 @@ @media all and (min-width: 800px) { - .xdesktop{display:block;} - .xtablette{display:none;} - .xphone{display:none;} - .xmobile{display:none;} + .xdesktop { + display: block; + } + + .xtablette { + display: none; + } + + .xphone { + display: none; + } + + .xmobile { + display: none; + } } @media all and (min-width: 600px) and (max-width: 800px) { - .xdesktop{display:none;} - .xtablette{display:block;} - .xphone{display:none;} - .xmobile{display:block;} + .xdesktop { + display: none; + } + + .xtablette { + display: block; + } + + .xphone { + display: none; + } + + .xmobile { + display: block; + } } @media all and (max-width: 600px) { - .xdesktop{display:none;} - .xtablette{display:none;} - .xphone{display:block;} - .xmobile{display:block;} + .xdesktop { + display: none; + } + + .xtablette { + display: none; + } + + .xphone { + display: block; + } + + .xmobile { + display: block; + } } .clear { - clear: both; - text-align: center; + clear: both; + text-align: center; } html { font-size: 24px; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; } .main-modal { @@ -40,7 +73,7 @@ html { padding: 0; display: block; position: fixed; - z-index:1000; + z-index: 1000; /* background-color:#F00; */ @@ -59,7 +92,7 @@ html { margin: 1px 1px; transition-duration: 0.4s; cursor: pointer; - + :focus { border: 5px solid #BBB; } @@ -83,7 +116,7 @@ html { box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0; @@ -94,24 +127,24 @@ html { text-align: center; vertical-align: middle; transition-duration: 0.4s; - + &:hover { box-shadow: 0px 8px 20px 0 rgba(0, 0, 0, 0.9); } - + &:active { box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.9); } - + .material-icons { vertical-align: middle; } - + .material-icons { position: absolute; top: 50%; left: 50%; - transform: translate(-12px,-12px); + transform: translate(-12px, -12px); line-height: 24px; width: 24px; } @@ -130,7 +163,7 @@ html { overflow: hidden; line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0; @@ -140,16 +173,16 @@ html { text-decoration: none; text-align: center; vertical-align: middle; - + .material-icons { vertical-align: middle; } - + .material-icons { position: absolute; top: 50%; left: 50%; - transform: translate(-12px,-12px); + transform: translate(-12px, -12px); line-height: 24px; width: 24px; } @@ -168,7 +201,7 @@ html { min-width: 64px; padding: 0 16px; display: inline-block; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; @@ -181,11 +214,11 @@ html { text-align: center; line-height: 36px; vertical-align: middle; - + &:disabled { cursor: not-allowed; } - + .material-icons { vertical-align: middle; } @@ -202,7 +235,7 @@ html { min-width: 36px; padding: 0; display: inline-block; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; @@ -215,12 +248,15 @@ html { text-align: center; line-height: 36px; vertical-align: middle; + &:disabled { cursor: not-allowed; } + .material-icons { vertical-align: middle; } + background: rgba(0, 0, 0, 0) } @@ -244,22 +280,38 @@ label { height: 100%; } -.full-back{ - position:absolute; - width:100%; - height:100%; - left:0; - top:0; - background-color:#2b3137; - +.full-back { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color: #2b3137; + background-image: url("assets/images/ikon_gray.svg"); background-repeat: no-repeat; - /* - background-size: contain; - */ background-size: 80%; background-attachment: fixed; background-position: 50% 50%; - - z-index:-1; + + z-index: -1; } + + +/***************************************************************************** + * FLEX TOOLS + *****************************************************************************/ + + +.flex-row { + display: flex; + flex-direction: row; +} + +.flex-row-last { + margin-left: auto; +} + +.flex-row-first { + margin-right: auto; +} \ No newline at end of file