+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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