diff --git a/src/app/components/playlist-uploader/playlist-uploader.component.css b/src/app/components/playlist-uploader/playlist-uploader.component.css index 16211734f..93050ab60 100644 --- a/src/app/components/playlist-uploader/playlist-uploader.component.css +++ b/src/app/components/playlist-uploader/playlist-uploader.component.css @@ -1,8 +1,7 @@ .drop-container { - /*width: 400px;*/ - height: 100px; - border: 1px dashed #ccc; - border-radius: 10px; + height: 200px; + border: 2px dashed #ccc; + border-radius: 3px; margin: 0 auto; padding: 10px; text-align: center; @@ -14,3 +13,40 @@ input { border: 1px solid #ccc; padding: 5px; } + +.upload-title { + font-size: 1.25em; +} + +.inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} + +.inputfile + label { + font-size: 1.25em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; +} + +.inputfile:focus + label, +.inputfile + label:hover { + background-color: red; +} + +.inputfile + label { + cursor: pointer; + line-height: 35px; + padding: 3px 10px; +} + +.upload-icon { + font-size: 80px; + width: 80px; +} diff --git a/src/app/components/playlist-uploader/playlist-uploader.component.html b/src/app/components/playlist-uploader/playlist-uploader.component.html index 3bc83126b..374aec1fa 100644 --- a/src/app/components/playlist-uploader/playlist-uploader.component.html +++ b/src/app/components/playlist-uploader/playlist-uploader.component.html @@ -2,15 +2,18 @@ Add playlist
-

- Drag files here or - - to upload. +

+ save_alt +
+

+ Drag & drop files here

+

or

+ +

@@ -22,4 +25,4 @@ - \ No newline at end of file + diff --git a/src/styles.scss b/src/styles.scss index 32b9a4506..9e41bd73d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,6 +5,11 @@ $material-icons-font-path: '~material-icons/iconfont/'; @import '~material-icons/iconfont/material-icons.scss'; -body,html { - background: #eee; +body, +html { + background: #eee; +} + +.mat-toolbar.mat-primary { + background: #000000; }