change to more generic layout / style
This commit is contained in:
Jonas Heinrich
parent
32df5df762
commit
ee4c394103
@ -3,8 +3,11 @@
|
||||
<id>radio</id>
|
||||
<name>Radio</name>
|
||||
<description>Listening to your favorite radio stations in NextCloud</description>
|
||||
<version>0.1</version>
|
||||
<version>0.2</version>
|
||||
<licence>MIT</licence>
|
||||
<author>Jonas Heinrich</author>
|
||||
<requiremin>9</requiremin>
|
||||
<dependencies>
|
||||
<owncloud min-version="9.1" max-version="9.2"/>
|
||||
<nextcloud min-version="10" max-version="11"/>
|
||||
</dependencies>
|
||||
</info>
|
||||
|
||||
767
css/main.css
767
css/main.css
@ -1,41 +1,768 @@
|
||||
* {
|
||||
/* SETTINGS */
|
||||
#files-setting-showhidden {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* FILE TABLE */
|
||||
#filestable {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* make sure there's enough room for the file actions */
|
||||
#body-user #filestable {
|
||||
min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
|
||||
}
|
||||
#body-user #controls {
|
||||
min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
|
||||
}
|
||||
|
||||
#filestable tbody tr {
|
||||
background-color: #fff;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
/* fit app list view heights */
|
||||
.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');
|
||||
}
|
||||
|
||||
#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,
|
||||
table tr.mouseOver td {
|
||||
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;
|
||||
-webkit-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;
|
||||
}
|
||||
|
||||
#radiocontainer {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid #eee;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
table td {
|
||||
padding: 0 15px;
|
||||
font-style: normal;
|
||||
background-position: 8px center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
table th#headerName {
|
||||
position: relative;
|
||||
width: 9999px; /* not really sure why this works better than 100% … table styling */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#radioquery {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
#headerName-container {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
.has-favorites #headerName-container {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
td{
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
/* Multiselect bar */
|
||||
#filestable.multiselect {
|
||||
top: 95px;
|
||||
}
|
||||
table.multiselect thead {
|
||||
position: fixed;
|
||||
top: 89px;
|
||||
z-index: 10;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
left: 250px; /* sidebar */
|
||||
}
|
||||
|
||||
tr{
|
||||
padding: 5px;
|
||||
table thead th {
|
||||
background-color: #fff;
|
||||
}
|
||||
table.multiselect thead th {
|
||||
background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: edeff2;
|
||||
transition: all 0.1s ease;
|
||||
#app-content.with-app-sidebar table.multiselect thead{
|
||||
margin-right: 27%;
|
||||
}
|
||||
|
||||
img.fav:hover {
|
||||
table.multiselect #headerName {
|
||||
position: relative;
|
||||
width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
|
||||
}
|
||||
table.multiselect #modified {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.homepage:hover {
|
||||
table td.selection,
|
||||
table th.selection,
|
||||
table td.fileaction {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
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: 8px;
|
||||
margin-top: 9px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
}
|
||||
table td.filename input.filename {
|
||||
width: 70%;
|
||||
margin-top: 9px;
|
||||
margin-left: 48px;
|
||||
cursor: text;
|
||||
}
|
||||
.has-favorites table td.filename input.filename {
|
||||
margin-left: 52px;
|
||||
}
|
||||
|
||||
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
|
||||
table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }
|
||||
|
||||
.modified, .column-last>span:first-child {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
/* TODO fix usability bug (accidental file/folder selection) */
|
||||
table td.filename .nametext {
|
||||
position: absolute;
|
||||
left: 105px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
}
|
||||
.has-favorites #fileList td.filename a.name {
|
||||
left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.hide-hidden-files #fileList tr.hidden-file,
|
||||
.hide-hidden-files #fileList tr.hidden-file.dragging {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fileList tr.animate-opacity {
|
||||
-webkit-transition:opacity 250ms;
|
||||
-moz-transition:opacity 250ms;
|
||||
-o-transition:opacity 250ms;
|
||||
transition:opacity 250ms;
|
||||
}
|
||||
#fileList tr.dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* for smaller resolutions - see mobile.css */
|
||||
|
||||
table td.filename .uploadtext {
|
||||
font-weight: normal;
|
||||
margin-left: 55px;
|
||||
margin-top: 5px;
|
||||
height: 20px;
|
||||
padding: 10px 0;
|
||||
font-size: 11px;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.ie8 input[type="checkbox"]{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* File checkboxes */
|
||||
html:not(.ie8) #fileList tr td.filename>.selectCheckBox + label:before {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
html.ie8 #fileList tr td.filename>.selectCheckBox {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
float: left;
|
||||
top: 0;
|
||||
margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
|
||||
}
|
||||
|
||||
/* Show checkbox when hovering, checked, or selected */
|
||||
html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
|
||||
html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
|
||||
html.ie8 #fileList tr td.filename>.selectCheckBox:checked,
|
||||
html.ie8 #fileList tr.selected td.filename>.selectCheckBox,
|
||||
html:not(.ie8) #fileList tr:hover td.filename>.selectCheckBox + label:before,
|
||||
html:not(.ie8) #fileList tr:focus td.filename>.selectCheckBox + label:before,
|
||||
html:not(.ie8) #fileList tr td.filename>.selectCheckBox:checked + label:before,
|
||||
html:not(.ie8) #fileList tr.selected td.filename>.selectCheckBox + label:before {
|
||||
opacity: 1;
|
||||
}
|
||||
html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
|
||||
html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
|
||||
html.ie8 #fileList tr td.filename>.selectCheckBox[checked=checked],
|
||||
html.ie8 #fileList tr.selected td.filename>.selectCheckBox {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
/* Use label to have bigger clickable size for checkbox */
|
||||
#fileList tr td.filename>.selectCheckBox + label,
|
||||
.select-all + label {
|
||||
background-position: 30px 30px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
z-index: 5;
|
||||
}
|
||||
#fileList tr td.filename>.selectCheckBox {
|
||||
/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
|
||||
* to prevent it to increase the height */
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.select-all + label {
|
||||
top: 0;
|
||||
}
|
||||
.ie8 .select-all,
|
||||
.select-all + label:before {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
z-index: 10;
|
||||
}
|
||||
.has-favorites .select-all {
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
#fileList tr td.filename {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right:0;
|
||||
-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;
|
||||
}
|
||||
|
||||
#fileList tr td.filename .favorite {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
#fileList tr td.filename .action-favorite {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 30px;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uploadsize-message,#delete-confirm { display:none; }
|
||||
|
||||
/* File actions */
|
||||
.fileactions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.busy .fileactions, .busy .action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* fix position of bubble pointer for Files app */
|
||||
.bubble,
|
||||
#app-navigation .app-navigation-entry-menu {
|
||||
border-top-right-radius: 3px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
|
||||
|
||||
#fileList .action.action-share-notification span, #fileList a.name {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
a.action > img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/* Actions for selected files */
|
||||
.selectedActions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.selectedActions a {
|
||||
display: inline;
|
||||
font-size: 11px;
|
||||
line-height: 50px;
|
||||
padding: 18px 5px;
|
||||
}
|
||||
.selectedActions a.delete-selected {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.selectedActions a.hidden {
|
||||
display: none;
|
||||
}
|
||||
.selectedActions a img {
|
||||
position:relative;
|
||||
vertical-align: text-bottom;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
html.ie8 .column-mtime .selectedActions {
|
||||
top: -95px;
|
||||
}
|
||||
|
||||
#fileList a.action {
|
||||
display: inline;
|
||||
padding: 17px 8px;
|
||||
line-height: 50px;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
display:none;
|
||||
}
|
||||
#fileList a.action.action-share {
|
||||
padding: 17px 14px;
|
||||
}
|
||||
|
||||
#fileList a.action.action-menu {
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.ie8 #fileList a.action img,
|
||||
#fileList tr:hover a.action,
|
||||
#fileList a.action.permanent,
|
||||
#fileList tr:focus a.action,
|
||||
#fileList a.action.permanent,
|
||||
#fileList tr:hover a.action.no-permission:hover,
|
||||
#fileList tr:focus a.action.no-permission:focus,
|
||||
/*#fileList .name:focus .action,*/
|
||||
/* also enforce the low opacity for disabled links that are hovered/focused */
|
||||
.ie8 #fileList a.action.disabled:hover img,
|
||||
#fileList tr:hover a.action.disabled:hover,
|
||||
#fileList tr:focus a.action.disabled:focus,
|
||||
#fileList .name:focus a.action.disabled:focus,
|
||||
#fileList a.action.disabled img {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
filter: alpha(opacity=30);
|
||||
opacity: .3;
|
||||
}
|
||||
.ie8 #fileList a.action:hover img,
|
||||
#fileList tr a.action.disabled.action-download,
|
||||
#fileList tr:hover a.action.disabled.action-download:hover,
|
||||
#fileList tr:focus a.action.disabled.action-download:focus,
|
||||
#fileList tr:hover a.action:hover,
|
||||
#fileList tr:focus a.action:focus,
|
||||
#fileList .name:focus a.action:focus {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: .7;
|
||||
display:inline;
|
||||
}
|
||||
#fileList tr a.action.disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* show share action of shared items darker to distinguish from non-shared */
|
||||
#fileList a.action.action-share.permanent.shared-style,
|
||||
/* show hovered permanent entries darker */
|
||||
#fileList tr a.action.action.permanent:hover,
|
||||
#fileList tr a.action.action.permanent:focus {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
|
||||
filter: alpha(opacity=70) !important;
|
||||
opacity: .7 !important;
|
||||
display:inline;
|
||||
}
|
||||
/* always show actions on mobile, not only on hover */
|
||||
#fileList a.action.permanent {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
|
||||
filter: alpha(opacity=30) !important;
|
||||
opacity: .3 !important;
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
/* properly display actions in the popover menu */
|
||||
#fileList .popovermenu .action {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
|
||||
filter: alpha(opacity=50) !important;
|
||||
opacity: .5 !important;
|
||||
}
|
||||
#fileList .popovermenu .action:hover,
|
||||
#fileList .popovermenu .action:focus {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
|
||||
filter: alpha(opacity=100) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
#selectedActionsList a.download.disabled,
|
||||
#fileList tr a.action.action-download.disabled {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#fileList tr:hover a.action.disabled:hover * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.summary td {
|
||||
border-bottom: none;
|
||||
vertical-align: top;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.summary .info {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.has-favorites .summary .info {
|
||||
margin-left: 90px;
|
||||
}
|
||||
|
||||
table.dragshadow {
|
||||
width:auto;
|
||||
}
|
||||
table.dragshadow td.filename {
|
||||
padding-left:60px;
|
||||
padding-right:16px;
|
||||
height: 36px;
|
||||
}
|
||||
table.dragshadow td.size {
|
||||
padding-right:8px;
|
||||
}
|
||||
#upgrade {
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
margin-left: -200px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
#fileList .popovermenu a.action img {
|
||||
padding: initial;
|
||||
}
|
||||
|
||||
html.ie8 #controls .button.new {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.newFileMenu {
|
||||
width: 200px;
|
||||
margin-left: -56px;
|
||||
margin-top: 25px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.newFileMenu .menuitem {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.newFileMenu.popovermenu a.menuitem,
|
||||
.newFileMenu.popovermenu label.menuitem,
|
||||
.newFileMenu.popovermenu .menuitem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.newFileMenu.popovermenu a.menuitem.active {
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.newFileMenu.bubble:after {
|
||||
left: 75px;
|
||||
right: auto;
|
||||
}
|
||||
.newFileMenu.bubble:before {
|
||||
left: 75px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.newFileMenu .filenameform {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.newFileMenu .filenameform input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
#fileList .popovermenu .action {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#filestable .filename .action .icon,
|
||||
#filestable .selectedActions a .icon,
|
||||
#controls .actions .button .icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
#filestable .filename .action .icon.hidden,
|
||||
#filestable .selectedActions a .icon.hidden,
|
||||
#controls .actions .button .icon.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filestable .filename .action .icon.loading,
|
||||
#filestable .selectedActions a .icon.loading,
|
||||
#controls .actions .button .icon.loading {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.app-files .actions .button.new .icon {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.canDrop,
|
||||
#filestable tbody tr.canDrop {
|
||||
background-color: rgba(255, 255, 140, 1);
|
||||
}
|
||||
|
||||
1
img/folder.svg
Normal file
1
img/folder.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 239 B |
BIN
img/homepage.png
BIN
img/homepage.png
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@ -7,8 +7,8 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="16"
|
||||
width="16"
|
||||
height="32px"
|
||||
width="32px"
|
||||
version="1.0"
|
||||
id="svg3581"
|
||||
inkscape:version="0.91 r13725"
|
||||
@ -24,7 +24,7 @@
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
@ -37,13 +37,13 @@
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1596"
|
||||
inkscape:window-width="1436"
|
||||
inkscape:window-height="860"
|
||||
id="namedview3598"
|
||||
showgrid="true"
|
||||
inkscape:zoom="29.610096"
|
||||
inkscape:cx="1.9547647"
|
||||
inkscape:cy="8"
|
||||
inkscape:zoom="10.46875"
|
||||
inkscape:cx="26.831171"
|
||||
inkscape:cy="-30.011478"
|
||||
inkscape:window-x="2"
|
||||
inkscape:window-y="19"
|
||||
inkscape:window-maximized="0"
|
||||
@ -81,7 +81,7 @@
|
||||
id="rect3590" />
|
||||
<path
|
||||
style="fill:#ffffff"
|
||||
d="M 0.94676967,14.933853 C 0.62195724,14.762477 0.39360747,14.515081 0.23230597,14.159794 0.01672734,13.684968 -0.00500319,13.303945 -0.00731475,9.958037 -0.01019259,5.8467141 0.01907789,5.6823746 0.85234564,5.1256899 1.0866637,4.9691484 1.3747818,4.6257446 1.4926074,4.3625707 1.7295609,3.8333153 1.9180173,3.7214637 2.5727941,3.7214637 c 0.3756302,0 10.6202619,-2.76574642 10.9116159,-2.94581148 0.05559,-0.0343578 0.101076,-0.13464798 0.101076,-0.22286979 0,-0.2748734 0.438712,-0.57326255 0.84285,-0.57326255 0.58071,0 0.869727,0.36871073 0.782177,0.99785181 C 15.131726,1.5435343 14.39623,1.7805576 13.867456,1.4101888 13.61352,1.2323267 13.2508,1.3232128 8.5334565,2.7467104 3.9223597,4.1381482 3.4751505,4.29666 3.508258,4.5278772 c 0.035788,0.2499093 0.1228174,0.2547611 5.6714322,0.3161697 5.4519318,0.060339 5.6465328,0.070762 5.9871098,0.3206955 0.757474,0.555873 0.788444,0.744841 0.785642,4.7932946 -0.0025,3.347401 -0.02398,3.726775 -0.239891,4.202369 -0.16807,0.370191 -0.384269,0.597745 -0.740679,0.779572 -0.489557,0.249752 -0.681845,0.25663 -7.0255195,0.251268 -6.2966316,-0.0053 -6.5387001,-0.01423 -6.99958283,-0.257393 z M 12.088701,13.191491 C 15.550536,11.627702 14.502194,6.5437461 10.716658,6.5377345 9.3331149,6.5355251 8.1327745,7.3088597 7.5546875,8.574841 c -0.377632,0.8269897 -0.3670632,2.128232 0.023368,2.879974 0.4955836,0.954157 1.23574,1.604123 2.139922,1.879162 0.6236474,0.189705 1.7905854,0.119568 2.3707034,-0.142486 z M 9.7811695,12.394805 c -0.3461132,-0.158483 -0.275915,-0.171769 0.9354885,-0.177051 1.196072,-0.0052 1.282627,0.0098 0.997851,0.172547 -0.395044,0.225826 -1.444648,0.228273 -1.9333395,0.0045 z M 8.4964386,11.305137 c -0.082323,-0.08233 -0.1496784,-0.194581 -0.1496784,-0.249463 0,-0.05488 1.0664518,-0.09979 2.3698978,-0.09979 1.303442,0 2.369898,0.02348 2.369898,0.05216 0,0.0287 -0.03407,0.140949 -0.07572,0.249463 -0.06497,0.169325 -0.379768,0.197299 -2.220218,0.197299 -1.5016426,0 -2.1893799,-0.04487 -2.294185,-0.149678 z m -0.3159883,-1.05606 c -0.045735,-0.04573 -0.083153,-0.186058 -0.083153,-0.3118287 0,-0.2144848 0.1625269,-0.228674 2.6193616,-0.228674 l 2.619359,0 0,0.3118287 0,0.311828 -2.536207,0 c -1.3949127,0 -2.5736254,-0.03742 -2.6193607,-0.08315 z M 8.3467602,9.0143515 c 0,-0.038811 0.058102,-0.1791343 0.1291211,-0.3118291 0.1200435,-0.2243041 0.2813038,-0.2412627 2.2941847,-0.2412627 2.229632,0 2.31649,0.01909 2.31649,0.5091269 0,0.065534 -1.013848,0.1145299 -2.369898,0.1145299 -1.303446,0 -2.3698978,-0.031756 -2.3698978,-0.070566 z M 9.6299267,7.6390813 C 10.20995,7.3245564 11.083439,7.2964182 11.652143,7.573939 l 0.498925,0.2434702 -1.43441,0.00511 C 9.3680241,7.8273146 9.3030387,7.8163418 9.6299267,7.6390849 Z M 3.4255382,11.273387 C 3.9762494,10.722672 3.6992473,9.8304058 2.9165791,9.6339682 2.5298532,9.536907 2.0192395,9.8529324 1.8519778,10.292864 1.4912464,11.241659 2.7024994,11.996422 3.4255382,11.273387 Z M 3.4430235,8.1900545 C 3.8021815,7.8526401 3.8140576,7.3522803 3.473173,6.9189375 3.1586187,6.5190432 2.5291504,6.4754074 2.0990546,6.8236801 1.7366201,7.1171607 1.7070791,7.8352836 2.0422032,8.2055926 2.3578525,8.554382 3.0635285,8.5465541 3.4430071,8.1900559 Z"
|
||||
d="M 3.8181385,60.028077 C 2.5159417,59.341018 1.6004704,58.349188 0.95380064,56.924816 0.08952986,55.021204 0.00241053,53.493655 -0.00685668,40.079658 -0.01839415,23.597062 0.09895337,22.938211 3.4395857,20.706419 4.3789842,20.078832 5.534071,18.702104 6.0064428,17.647018 c 0.9499641,-2.121823 1.7054999,-2.570244 4.3305492,-2.570244 1.505929,0 42.577421,-11.0880838 43.74548,-11.8099782 0.222865,-0.1377433 0.405222,-0.5398137 0.405222,-0.8935014 0,-1.1019877 1.758828,-2.29825216 3.379049,-2.29825216 2.328109,0 3.486801,1.47818896 3.135807,4.00046186 -0.315865,2.2697884 -3.264524,3.2200324 -5.384416,1.7351962 -1.01805,-0.7130624 -2.47222,-0.3486934 -21.384402,5.3582147 -18.486232,5.578376 -20.279127,6.213865 -20.146396,7.14083 0.143479,1.001904 0.492385,1.021357 22.737194,1.267548 21.857201,0.241905 22.637371,0.283691 24.002769,1.285693 3.036769,2.228535 3.160931,2.986122 3.1497,19.216672 -0.01,13.419982 -0.09616,14.94092 -0.961745,16.847611 -0.673804,1.484124 -1.540561,2.396405 -2.969435,3.125363 -1.962669,1.001274 -2.733568,1.028851 -28.165833,1.007352 C 6.6363226,61.038732 5.6658518,61.002942 3.8181385,60.028077 Z M 48.486971,53.042818 c 13.878755,-6.269347 9.675874,-26.651306 -5.500624,-26.675406 -5.546723,-0.0087 -10.35898,3.091497 -12.676572,8.166911 -1.513955,3.315464 -1.471587,8.532241 0.09367,11.546031 1.986833,3.825288 4.954174,6.43105 8.579108,7.533701 2.500247,0.760541 7.17859,0.479355 9.504325,-0.571237 z m -9.251066,-3.193972 c -1.387593,-0.63537 -1.106163,-0.688636 3.750442,-0.709813 4.795144,-0.02085 5.142149,0.0393 4.000461,0.691755 -1.583759,0.905352 -5.791702,0.915163 -7.750903,0.01805 z m -5.150579,-4.368563 c -0.33004,-0.330065 -0.600074,-0.78009 -0.600074,-1.000115 0,-0.220019 4.275485,-0.400065 9.501095,-0.400065 5.2256,0 9.501098,0.09415 9.501098,0.209115 0,0.115065 -0.136584,0.565071 -0.303566,1.000113 -0.26047,0.67884 -1.522517,0.790989 -8.90102,0.790989 -6.020197,0 -8.777387,-0.179872 -9.197555,-0.600072 z m -1.266824,-4.233822 c -0.18336,-0.183339 -0.333365,-0.745919 -0.333365,-1.250145 0,-0.859885 0.651582,-0.91677 10.501216,-0.91677 l 10.501205,0 0,1.250144 0,1.250141 -10.167842,0 c -5.59231,0 -10.317857,-0.150014 -10.501214,-0.333354 z m 0.66675,-4.950107 c 0,-0.155596 0.232936,-0.718161 0.517656,-1.250146 0.481263,-0.899251 1.127766,-0.967239 9.197557,-0.967239 8.938762,0 9.28698,0.07653 9.28698,2.041128 0,0.26273 -4.06459,0.459158 -9.501098,0.459158 -5.22561,0 -9.501095,-0.127313 -9.501095,-0.282906 z m 5.144312,-5.513558 c 2.325356,-1.260955 5.827238,-1.373765 8.107214,-0.261164 l 2.000227,0.976093 -5.750658,0.02049 c -5.40677,0.01906 -5.667303,-0.02478 -4.356783,-0.735399 z M 13.755706,45.352994 c 2.207842,-2.207856 1.09732,-5.785017 -2.040455,-6.572551 -1.550413,-0.389125 -3.5975012,0.877843 -4.2680655,2.641562 -1.4461992,3.803791 3.4098045,6.829691 6.3085205,3.930989 z M 13.8258,32.991687 c 1.439891,-1.35272 1.487504,-3.358698 0.120871,-5.096003 -1.261071,-1.603205 -3.784656,-1.778145 -5.5089426,-0.381894 -1.4530267,1.176584 -1.571459,4.055593 -0.2279213,5.540189 1.2654616,1.398322 4.0945699,1.366942 5.6159269,-0.06226 z"
|
||||
id="path3615"
|
||||
inkscape:connector-curvature="0" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.3 KiB |
1
img/recent.svg
Normal file
1
img/recent.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path style="text-decoration-color:#000;isolation:auto;mix-blend-mode:normal;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none" d="M8 0C3.594 0 0 3.594 0 8c0 4.406 3.594 8 8 8 4.406 0 8-3.594 8-8 0-4.406-3.594-8-8-8zm0 2c3.326 0 6 2.674 6 6s-2.674 6-6 6-6-2.674-6-6 2.674-6 6-6zm-.44.932a.617.617 0 0 0-.605.613l-.852 4.44V8C5.92 8.755 6.44 9 7.02 9.352h.005l2.998 1.58c.653.502 1.407-.476.754-.98L9 8.01V8l-.81-4.45a.617.617 0 0 0-.63-.618z" color="#000" white-space="normal"/></svg>
|
||||
|
After Width: | Height: | Size: 693 B |
1
img/star.svg
Normal file
1
img/star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22"><path d="M11.017.06l2.946 7.384L22 8.077l-6.11 5.082L17.77 21l-6.72-4.242-6.876 4.213 1.957-7.703L0 8.03l7.932-.52z"/></svg>
|
||||
|
After Width: | Height: | Size: 187 B |
16
js/main.js
16
js/main.js
@ -10,10 +10,18 @@ $(window).on('load', function(){
|
||||
$("tbody > tr").remove();
|
||||
$.each(data, function(i, station) {
|
||||
$('tbody').append('<tr src='+station['url']+'>\
|
||||
<td width=60px align=center><img class=fav width=20px height=20px src='+OC.imagePath('radio','fav.png')+'></td>\
|
||||
<td width=60px align=center><img width=40px height=40px src='+station['favicon']+'></td>\
|
||||
<td>'+station['name']+'</td>\
|
||||
<td width=60px align=center><a href="'+station['homepage']+'" target="_blank"><img class=homepage width=20px height=20px src='+OC.imagePath('radio','homepage.png')+'></a></td>\
|
||||
<td class="filename">\
|
||||
<a href="#" class="action action-favorite" data-original-title="" title="">\
|
||||
<span class="icon icon-star"></span>\
|
||||
<span class="hidden-visually">Favorite</span>\
|
||||
</a>\
|
||||
<label for="select-files-3">\
|
||||
<div class="thumbnail" style="background-image:url('+station['favicon']+'); background-size: 32px;"></div>\
|
||||
</label>\
|
||||
<a class="name" href="#">\
|
||||
<span class="nametext"><span class="innernametext">'+station['name']+'</span></span>\
|
||||
</a>\
|
||||
</td>\
|
||||
</tr>');
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,25 +3,77 @@
|
||||
script('radio', 'main');
|
||||
?>
|
||||
|
||||
<div id=radiocontainer>
|
||||
|
||||
<div id="content" class="app-files" role="main">
|
||||
<div id="app-navigation">
|
||||
<ul class="with-icon">
|
||||
<li data-id="files" class="nav-files">
|
||||
<a href="#" class="nav-icon-files svg">
|
||||
Top </a>
|
||||
</li>
|
||||
<li data-id="recent" class="nav-recent">
|
||||
<a href="#" class="nav-icon-recent svg">
|
||||
Recent </a>
|
||||
</li>
|
||||
<li data-id="favorites" class="nav-favorites">
|
||||
<a href="#" class="nav-icon-favorites svg">
|
||||
Favorites </a>
|
||||
</li>
|
||||
<li data-id="sharingin" class="nav-sharingin">
|
||||
<a href="#" class="nav-icon-sharingin svg">
|
||||
Categories </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="app-settings">
|
||||
<div id="app-settings-header">
|
||||
<button class="settings-button" data-apps-slide-toggle="#app-settings-content">
|
||||
Settings </button>
|
||||
</div>
|
||||
<div id="app-settings-content">
|
||||
<audio id="player" src="" controls></audio>
|
||||
<form id="radiosearch" action="javascript:void(0);">
|
||||
<input id="radioquery" placeholder="Search for name" autofocus required></input>
|
||||
</form>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<div id="files-setting-showhidden">
|
||||
<input class="checkbox" id="showhiddenfilesToggle" checked="checked" type="checkbox">
|
||||
<label for="showhiddenfilesToggle">Show hidden files</label>
|
||||
</div>
|
||||
<label for="webdavurl">WebDAV</label>
|
||||
<input id="webdavurl" type="text" readonly="readonly" value="http://127.0.0.1/remote.php/webdav/" />
|
||||
<em>Use this address to <a href="https://docs.nextcloud.com/server/11/go.php?to=user-webdav" target="_blank" rel="noreferrer">access your Files via WebDAV</a></em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<div id="app-content-files" class="viewcontainer">
|
||||
<table id="filestable" data-preview-x="32" data-preview-y="32">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<th id='headerName' class=" column-name">
|
||||
<div id="headerName-container">
|
||||
<a class="name sort columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fileList">
|
||||
<tr>
|
||||
<td class="filename">
|
||||
<a href="#" class="action action-favorite " data-original-title="" title="">
|
||||
<span class="icon icon-star"></span>
|
||||
<span class="hidden-visually">Favorite</span>
|
||||
</a>
|
||||
<label for="select-files-3">
|
||||
<div class="thumbnail" style="background-image:url('http://www.swr.de/static/favicons/SWR1/favicons/SWR1_96.png'); background-size: 32px;"></div>
|
||||
</label>
|
||||
<a class="name" href="#">
|
||||
<span class="nametext"><span class="innernametext">Radio 3</span></span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<audio id="player" src="" controls></audio>
|
||||
|
||||
<!-- <?php p($l->t('Some Setting'));?>: "<?php p($_['somesetting']); ?>" -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- closing app-content -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user