nextcloud-app-radio/css/main.css

#playbutton{
	height:50px;
	width: 50px;
	margin: 10px;
	border: none;
	background-size: 100%;
	background-position: center;
	/* display: inline; */
	float: left;
	-webkit-transition: background-image 0.4s ease-in-out;
	transition: background-image 0.4s ease-in-out;
}

.buffering {
	-webkit-animation:spin 4s linear infinite;
	-moz-animation:spin 4s linear infinite;
	animation:spin 4s linear infinite;
	background: url('../img/wheel.png') no-repeat;
	-webkit-transition: background-image 0.4s ease-in-out;
	transition: background-image 0.4s ease-in-out;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#station_metadata{
	margin: 5px 20px;
	padding-left: 5px;
	white-space:nowrap;
	overflow:hidden;
}

.play{
	background: url('../img/play.png') no-repeat;
}
.pause{
	background: url('../img/pause.png') no-repeat;
}

.icon-stationfav {
	width: 16px;
	height: 16px;
	/* margin-right: 5px;
	margin-bottom: 5px;
	position: absolute; */
	background-image: url('../img/star.svg');
	background-repeat: no-repeat;
	/* background-size: contain; */
	background-position: center;
	line-height: 100%;
	display: inline-block;
	vertical-align: middle;
	background-size: 16px 16px;
	opacity: 0.3;
}

.starred {
	background-image: url('../img/starred.svg');
	opacity: 1;
}

.icon-stationfav:hover {
	background-image: url('../img/starred.svg');
	opacity: 1;
}

/* SETTINGS */
#files-setting-showhidden {
	padding-bottom: 8px;
}

/* FILE TABLE */
#filestable {
	position: relative;
	width: 100%;
}

#filestable tbody tr {
	background-color: #fff;
	height: 51px;
}

/* fit app list view heights */
#content {
	padding-top: 25px;
}

.app-files #app-content>.viewcontainer {
	min-height: 0%;
}

.app-files #app-content {
	transition: background-color 0.3s ease;
	overflow-x: hidden;
}

/* icons for sidebar */
.nav-icon-files {
	background-image: url('../img/folder.svg?v=1');
}
.nav-icon-recent {
	background-image: url('../img/recent.svg?v=1');
}
.nav-icon-favorites {
	background-image: url('../img/star.svg?v=1');
}
.nav-icon-sharingin,
.nav-icon-sharingout {
	background-image: url('../img/share.svg?v=1');
}
.nav-icon-sharinglinks {
	background-image: url('../img/public.svg?v=1');
}
.nav-icon-extstoragemounts {
	background-image: url('../img/external.svg?v=1');
}
.nav-icon-trashbin {
	background-image: url('../img/delete.svg?v=1');
}
.nav-icon-systemtagsfilter {
	background-image: url('../img/systemtags.svg?v=1');
}

#app-navigation .nav-files a.nav-icon-files {
	width: auto;
}
/* button needs overrides due to navigation styles */
#app-navigation .nav-files a.new {
	width: 40px;
	height: 32px;
	padding: 0 10px;
	margin: 0;
	cursor: pointer;
}

#app-navigation .nav-files a.new.hidden {
	display: none;
}

#app-navigation .nav-files a.new.disabled {
	opacity: 0.3;
}

#filestable tbody tr {
	transition: background-color 0.3s ease;
	background-color: #fff;
	height: 40px;
}

#filestable tbody tr:hover,
#filestable tbody tr:focus,
#filestable tbody .name:focus,
#filestable tbody tr:active,
#filestable tbody tr.highlighted,
#filestable tbody tr.highlighted .name:focus,
#filestable tbody tr.selected,
#filestable tbody tr.searchresult,
#filestable tbody tr.rowhighlight,
table tr.mouseOver {
	transition: background-color 0.3s ease;
	background-color: #f8f8f8;
}

tbody a { color:#000; }

span.conflict-path, span.extension, span.uploading, td.date {
	color: #999;
}
span.conflict-path, span.extension {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	-o-transition: opacity 300ms;
	transition: opacity 300ms;
	vertical-align: top;
}
tr:hover span.conflict-path,
tr:focus span.conflict-path,
tr:hover span.extension,
tr:focus span.extension {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	color: #777;
}

table th, table th a {
	color: #999;
}
table.multiselect th a {
	color: #000;
}
table th .columntitle {
	display: block;
	padding: 15px;
	height: 50px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	vertical-align: middle;
}
table th .columntitle.name {
	padding-left: 5px;
	padding-right: 80px;
	margin-left: 100px;
}

table th,
table td {
	border-bottom: 1px solid #eee;
	text-align: left;
	font-weight: normal;
}

table th#headerName {
	position: relative;
	width: 9999px; /* not really sure why this works better than 100% … table styling */
	padding: 0;
}

#headerName-container {
	position: relative;
	height: 50px;
}
.has-favorites #headerName-container {
	padding-left: 50px;
}

table th#headerSize, table td.filesize {
	text-align: right;
}
table th#headerDate, table td.date,
table th.column-last, table td.column-last {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	/* this can not be just width, both need to be set … table styling */
	min-width: 130px;
	max-width: 130px;
}

table thead th {
	background-color: #fff;
}

table td.filename a.name {
	position:relative; /* Firefox needs to explicitly have this default set … */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0;
}
table td.filename .thumbnail {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-left: 10px;
	margin-top: 9px;
	cursor: pointer;
	float: left;
	position: absolute;
	z-index: 4;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:0px 0; }

.modified, .column-last>span:first-child {
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	/*width: 110px;*/
}

table td.filename .nametext {
	position: absolute;
	left: 60px;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 800px;
	height: 100%;
}
.has-favorites #fileList td.filename a.name {
	left: 0px;
	margin-right: 0px;
}

#fileList tr.animate-opacity {
	-webkit-transition:opacity 250ms;
	-moz-transition:opacity 250ms;
	-o-transition:opacity 250ms;
	transition:opacity 250ms;
}

table td.filename .nametext .innernametext {
	text-overflow: ellipsis;
	overflow: hidden;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

@media only screen and (min-width: 1500px) {
	table td.filename .nametext .innernametext {
		max-width: 790px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 390px;
	}
}
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
	table td.filename .nametext .innernametext {
		max-width: 660px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 290px;
	}
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
	table td.filename .nametext .innernametext {
		max-width: 500px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 230px;
	}
}
@media only screen and (min-width: 1100px) and (max-width: 1200px) {
	table td.filename .nametext .innernametext {
		max-width: 400px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 230px;
	}
}
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
	table td.filename .nametext .innernametext {
		max-width: 310px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 230px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
	table td.filename .nametext .innernametext {
		max-width: 240px;
	}
	.with-app-sidebar table td.filename .nametext .innernametext {
		max-width: 230px;
	}
}

#fileList tr td.filename {
	position: relative;
	width: 100%;
	-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
}

#fileList tr td.filename a.name label {
	position: absolute;
	width: 80%;
	height: 50px;
}

.busy .fileactions, .busy .action {
	visibility: hidden;
}

/* force show the loading icon, not only on hover */
#fileList .icon-loading-small {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	opacity: 1 !important;
	display: inline !important;
}

.summary {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: .3;
	/* add whitespace to bottom of files list to correctly show dropdowns */
	height: 300px;
}
.summary:hover,
.summary:focus,
.summary,
table tr.summary td {
	background-color: transparent;
}
.mask {
	z-index: 50;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	background-repeat: no-repeat no-repeat;
	background-position: 50%;
	opacity: 0.7;
	filter: alpha(opacity=70);
	transition: opacity 100ms;
	-moz-transition: opacity 100ms;
	-o-transition: opacity 100ms;
	-ms-transition: opacity 100ms;
	-webkit-transition: opacity 100ms;
}
.mask.transparent{
	opacity: 0;
}

#app-content {
  z-index: 500;
  background-color: var(--color-main-background);
  position: relative;
  flex-basis: 100vw;
  min-height: 100%;
}

#content {
  z-index: 500;
  background-color: var(--color-main-background);
  position: relative;
  flex-basis: 100vw;
  min-height: 100%;
}

table td {
	padding: 0 0px;
	font-style: normal;
	background-position: 8px center;
	background-repeat: no-repeat;
}

#fileList {
	table-layout: fixed;
	white-space: nowrap;
}

#fileList tr td.favcolumn {
	padding: 0 15px;
	position: relative;
	width: 0.1%;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fileList tr td.filename {
	position: relative;
	width: 99.9%;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-settings {
	overflow: hidden;
	margin-bottom: 10px;
}

#volumeicon {
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	left: 75px;
	top: 14px;
}
#volumeicon.full {
	background-image: url('../img/sound_full.png');
}
#volumeicon.mid {
	background-image: url('../img/sound_mid.png');
}
#volumeicon.silent {
	background-image: url('../img/sound_silent.png');
}

#volumeslider{
	width: 170px;
	display: inline-block;
	position: relative;
	left: 40px;
	top: -7px;
}

#station_metadata {
	margin-top: -3px;
}

#preload-01 { background: url('../img/sound_mid.png') no-repeat -9999px -9999px; }
#preload-02 { background: url('../img/sound_silent.png') no-repeat -9999px -9999px; }
#preload-03 { background: url('../img/pause.png') no-repeat -9999px -9999px; }
#preload-04 { background: url('../img/wheel.png') no-repeat -9999px -9999px; }