503 lines
10 KiB
CSS
503 lines
10 KiB
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; }
|