2012-04-23 16:19:03 +04:00
/ * Copyright ( c ) 2011 , Jan-Christoph Borchardt , http : / / jancborchardt . net
2011-08-10 22:48:56 +04:00
This file is licensed under the Affero General Public License version 3 or later .
See the COPYING-README file . * /
2011-03-03 01:06:23 +03:00
/* FILE MENU */
2013-02-06 22:44:41 +04:00
. actions { padding : .3 em ; height : 2 em ; width : 100 % ; }
2012-12-06 19:37:23 +04:00
. actions input , . actions button , . actions . button { margin : 0 ; float : left ; }
2012-12-07 15:12:40 +04:00
# new {
height : 17px ; margin : 0 0 0 1em ; z-index : 1010 ; float : left ;
}
2012-10-26 20:11:12 +04:00
# new . active { border-bottom-left-radius : 0 ; border-bottom-right-radius : 0 ; border-bottom : none ; }
2012-12-13 03:12:21 +04:00
# new > a { padding : .5 em 1.2 em .3 em ; }
2012-12-07 15:12:40 +04:00
# new > ul {
2012-12-13 22:04:27 +04:00
display : none ; position : fixed ; min-width : 7em ; z-index : 10 ;
padding : . 5em ; padding-bottom : 0 ; margin-top : . 075em ; margin-left : - . 5em ;
2012-12-07 15:12:40 +04:00
text-align : left ;
2012-12-13 22:04:27 +04:00
background : # f8f8f8 ; border : 1px solid # ddd ; border-radius : 10px ; border-top-left-radius : 0 ;
box-shadow : 0 2px 7px rgba ( 170 , 170 , 170 , . 4 ) ;
2012-12-07 15:12:40 +04:00
}
2012-12-06 19:37:23 +04:00
# new > ul > li { height : 20 px ; margin : .3 em ; padding-left : 2 em ; padding-bottom : 0.1 em ;
background-repeat : no-repeat ; cursor : pointer ; }
2011-10-23 13:40:40 +04:00
# new > ul > li > p { cursor : pointer ; }
2013-01-02 20:02:55 +04:00
# new > ul > li > form > input { padding : 0.3 em ; margin : -0.3 em ; }
2011-07-28 03:26:26 +04:00
2013-02-04 21:30:49 +04:00
# trash { height : 17 px ; margin : 0 1 em ; z-index : 1010 ; float : right ; }
2013-01-15 23:35:15 +04:00
2013-02-11 15:23:53 +04:00
# upload {
2012-12-07 15:12:40 +04:00
height : 27px ; padding : 0 ; margin-left : 0 . 2em ; overflow : hidden ;
2012-12-05 14:17:41 +04:00
}
2012-12-07 15:12:40 +04:00
# upload a {
position : relative ; display : block ; width : 100 % ; height : 27px ;
2013-01-04 16:48:29 +04:00
cursor : pointer ; z-index : 10 ;
2012-12-13 03:12:21 +04:00
background-image : url ( '%webroot%/core/img/actions/upload.svg' ) ;
2012-12-07 20:41:52 +04:00
background-repeat : no-repeat ;
background-position : 7px 6px ;
2012-12-07 15:12:40 +04:00
}
2011-07-28 03:26:26 +04:00
. file_upload_target { display : none ; }
2012-12-07 20:41:52 +04:00
. file_upload_form { display : inline ; float : left ; margin : 0 ; padding : 0 ; cursor : pointer ; overflow : visible ; }
2013-01-14 23:30:39 +04:00
# file_upload_start {
2012-12-05 14:17:41 +04:00
left : 0 ; top : 0 ; width : 28px ; height : 27px ; padding : 0 ;
2012-12-07 20:41:52 +04:00
font-size : 1em ;
2012-12-05 14:17:41 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ; filter : alpha ( opacity = 0 ) ; opacity : 0 ;
2013-01-04 16:48:29 +04:00
z-index : 20 ; position : relative ; cursor : pointer ; overflow : hidden ;
2012-12-07 20:41:52 +04:00
}
2011-04-17 18:19:21 +04:00
2013-02-03 20:12:57 +04:00
# uploadprogresswrapper { float : right ; position : relative ; }
2012-12-05 02:45:12 +04:00
# uploadprogresswrapper # uploadprogressbar { position : relative ; display : inline-block ; width : 10 em ; height : 1.5 em ; top : .4 em ; }
2011-08-11 22:59:17 +04:00
2011-03-03 01:06:23 +03:00
/* FILE TABLE */
2012-12-07 15:12:40 +04:00
# emptyfolder {
2012-12-07 20:41:52 +04:00
position : absolute ;
margin : 10em 0 0 10em ;
font-size : 1 . 5em ; font-weight : bold ;
color : # 888 ; text-shadow : # fff 0 1px 0 ;
}
2013-02-09 20:54:56 +04:00
table { position : relative ; top : 37 px ; width : 100 % ; }
2012-04-15 15:34:16 +04:00
tbody tr { background-color : #fff ; height : 2.5 em ; }
tbody tr : hover , tbody tr : active , tbody tr . selected { background-color : #f8f8f8 ; }
2011-08-12 03:53:24 +04:00
tbody tr . selected { background-color : #eee ; }
2011-07-07 02:19:38 +04:00
tbody a { color : #000 ; }
2012-04-16 01:52:36 +04:00
span . extension , span . uploading , td . date { color : #999 ; }
2012-04-19 18:41:18 +04:00
span . extension { text-transform : lowercase ; -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ; filter : alpha ( opacity = 70 ) ; opacity : .7 ; -webkit- transition : opacity 300 ms ; -moz- transition : opacity 300 ms ; -o- transition : opacity 300 ms ; transition : opacity 300 ms ; }
tr : hover span . extension { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; color : #777 ; }
2011-07-22 00:01:55 +04:00
table tr . mouseOver td { background-color : #eee ; }
2011-07-30 17:31:11 +04:00
table th { height : 2 em ; padding : 0 .5 em ; color : #999 ; }
2011-07-28 02:21:11 +04:00
table th . name { float : left ; margin-left : .5 em ; }
table th , table td { border-bottom : 1 px solid #ddd ; text-align : left ; font-weight : normal ; }
2011-08-02 04:29:51 +04:00
table td { border-bottom : 1 px solid #eee ; font-style : normal ; background-position : 1 em .5 em ; background-repeat : no-repeat ; }
2012-12-20 16:30:57 +04:00
table th # headerName { width : 100 em ; /* not really sure why this works better than 100% … table styling */ }
2012-12-20 13:53:50 +04:00
table th # headerSize , table td . filesize { min-width : 3 em ; padding : 0 1 em ; text-align : right ; }
table th # headerDate , table td . date { min-width : 11 em ; padding : 0 .1 em 0 1 em ; text-align : left ; }
2012-12-13 22:44:55 +04:00
/* Multiselect bar */
2013-02-09 20:54:56 +04:00
table . multiselect { top : 63 px ; }
2013-02-11 15:23:53 +04:00
table . multiselect thead { position : fixed ; top : 82 px ; z-index : 1 ; -moz- box-sizing : border-box ; box-sizing : border-box ; left : 0 ; padding-left : 64 px ; width : 100 % ; }
2012-12-13 22:44:55 +04:00
table . multiselect thead th { background : rgba ( 230 , 230 , 230 , .8 ) ; color : #000 ; font-weight : bold ; border-bottom : 0 ; }
2013-02-11 15:23:53 +04:00
table . multiselect # headerName { width : 100 % ; }
2011-07-22 00:01:55 +04:00
table td . selection , table th . selection , table td . fileaction { width : 2 em ; text-align : center ; }
2011-08-02 04:29:51 +04:00
table td . filename a . name { display : block ; height : 1.5 em ; vertical-align : middle ; margin-left : 3 em ; }
2012-04-16 15:14:41 +04:00
table tr [ data-type = "dir" ] td . filename a . name span . nametext { font-weight : bold ; }
2012-10-18 16:16:59 +04:00
table td . filename input . filename { width : 100 % ; cursor : text ; }
2011-08-02 04:29:51 +04:00
table td . filename a , table td . login , table td . logout , table td . download , table td . upload , table td . create , table td . delete { padding : .2 em .5 em .5 em 0 ; }
2012-03-27 23:38:55 +04:00
table td . filename . nametext , . uploadtext , . modified { float : left ; padding : .3 em 0 ; }
2012-12-05 14:17:41 +04:00
/* TODO fix usability bug (accidental file/folder selection) */
2012-12-07 15:12:40 +04:00
table td . filename . nametext { overflow : hidden ; text-overflow : ellipsis ; }
2012-03-27 23:38:55 +04:00
table td . filename . uploadtext { font-weight : normal ; margin-left : .5 em ; }
2012-10-18 16:16:59 +04:00
table td . filename form { font-size : .85 em ; margin-left : 3 em ; margin-right : 3 em ; }
2013-02-14 13:40:23 +04:00
/* File checkboxes */
2012-12-05 14:17:41 +04:00
# fileList tr td . filename > input [ type = "checkbox" ] : first-child { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ; filter : alpha ( opacity = 0 ) ; opacity : 0 ; float : left ; margin : .7 em 0 0 1 em ; /* bigger clickable area doesn’ t work in FF width:2.8em; height:2.4em;*/ -webkit- transition : opacity 200 ms ; -moz- transition : opacity 200 ms ; -o- transition : opacity 200 ms ; transition : opacity 200 ms ; }
2012-04-15 16:37:42 +04:00
# fileList tr td . filename > input [ type = "checkbox" ] : hover : first-child { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ; filter : alpha ( opacity = 80 ) ; opacity : .8 ; }
2013-02-14 13:40:23 +04:00
/* Always show checkbox when selected */
2012-04-15 16:37:42 +04:00
# fileList tr td . filename > input [ type = "checkbox" ] : checked : first-child { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; }
2013-02-14 13:40:23 +04:00
# fileList tr . selected td . filename > input [ type = "checkbox" ] : first-child { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; }
2012-12-20 13:53:50 +04:00
# fileList tr td . filename {
2012-12-20 16:30:57 +04:00
position : relative ; width : 100 % ;
2012-12-20 13:53:50 +04:00
-webkit-transition : background-image 500ms ; -moz-transition : background-image 500ms ; -o-transition : background-image 500ms ; transition : background-image 500ms ;
}
2011-08-28 06:16:39 +04:00
# select_all { float : left ; margin : .3 em 0.6 em 0 .5 em ; }
2011-07-29 02:26:23 +04:00
# uploadsize-message , # delete-confirm { display : none ; }
2012-12-20 14:14:27 +04:00
/* File actions */
. fileactions {
position : absolute ; top : . 6em ; right : 0 ;
font-size : . 8em ;
}
2012-12-20 15:02:19 +04:00
# fileList . name { position : relative ; /* Firefox needs to explicitly have this default set … */ }
2012-12-20 14:14:27 +04:00
# fileList tr : hover . fileactions { /* background to distinguish when overlaying with file names */
2012-12-20 14:24:25 +04:00
background : rgba ( 248 , 248 , 248 , . 9 ) ; box-shadow : -5px 0 7px rgba ( 248 , 248 , 248 , . 9 ) ;
}
2013-01-28 22:47:51 +04:00
# fileList tr . selected : hover . fileactions , # fileList tr . mouseOver . fileactions { /* slightly darker color for selected rows */
2012-12-20 14:24:25 +04:00
background : rgba ( 238 , 238 , 238 , . 9 ) ; box-shadow : -5px 0 7px rgba ( 238 , 238 , 238 , . 9 ) ;
2012-12-20 14:14:27 +04:00
}
2012-04-15 16:15:11 +04:00
# fileList . fileactions a . action img { position : relative ; top : .2 em ; }
2012-04-15 19:49:40 +04:00
# fileList a . action { display : inline ; margin : -.5 em 0 ; padding : 1 em .5 em 1 em .5 em !important ; }
2013-01-30 17:32:20 +04:00
# fileList img . move2trash { display : inline ; margin : -.5 em 0 ; padding : 1 em .5 em 1 em .5 em !important ; float : right ; }
2012-04-15 16:15:11 +04:00
a . action . delete { float : right ; }
a . action > img { max-height : 16 px ; max-width : 16 px ; vertical-align : text - bottom ; }
2012-04-15 19:49:40 +04:00
. selectedActions { display : none ; float : right ; }
. selectedActions a { display : inline ; margin : -.5 em 0 ; padding : .5 em !important ; }
. selectedActions a img { position : relative ; top : .3 em ; }
2011-07-22 18:52:35 +04:00
2013-02-21 19:52:18 +04:00
# fileList a . action {
display : none ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ;
filter : alpha ( opacity = 0 ) ;
opacity : 0 ;
}
# fileList tr : hover a . action {
display : inline ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=.5)" ;
filter : alpha ( opacity = . 5 ) ;
opacity : . 5 ;
}
# fileList tr : hover a . action : hover {
display : inline ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)" ;
filter : alpha ( opacity = 1 ) ;
opacity : 1 ;
}
2011-11-10 19:40:09 +04:00
2012-08-28 00:45:54 +04:00
# scanning-message { top : 40 % ; left : 40 % ; position : absolute ; display : none ; }
2012-09-19 16:31:02 +04:00
2012-12-07 20:41:52 +04:00
div . crumb a { padding : 0.9 em 0 0.7 em 0 ; }
2013-01-03 03:26:13 +04:00
2013-01-19 00:49:38 +04:00
table . dragshadow {
width : auto ;
}
table . dragshadow td . filename {
padding-left : 36px ;
padding-right : 16px ;
}
table . dragshadow td . size {
padding-right : 8px ;
2013-01-30 22:24:24 +04:00
}
2013-01-03 03:26:13 +04:00
# upgrade {
width : 400px ;
position : absolute ;
top : 200px ;
left : 50 % ;
text-align : center ;
margin-left : -200px ;
}