2012-04-23 16:19:03 +04:00
/ * Copyright ( c ) 2011 , Jan-Christoph Borchardt , http : / / jancborchardt . net
2011-08-09 01:31:58 +04:00
This file is licensed under the Affero General Public License version 3 or later .
See the COPYING-README file . * /
2011-08-13 18:00:10 +04:00
html , body , div , span , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , code , del , dfn , em , img , q , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td , article , aside , dialog , figure , footer , header , hgroup , nav , section { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; font-weight : inherit ; font-size : 100 % ; font-family : inherit ; vertical-align : baseline ; cursor : default ; }
2012-12-07 20:41:52 +04:00
html , body { height : 100 % ; overflow : auto ; }
2011-08-10 18:02:28 +04:00
article , aside , dialog , figure , footer , header , hgroup , nav , section { display : block ; }
body { line-height : 1.5 ; }
table { border-collapse : separate ; border-spacing : 0 ; white-space : nowrap ; }
caption , th , td { text-align : left ; font-weight : normal ; }
table , td , th { vertical-align : middle ; }
a { border : 0 ; color : #000 ; text-decoration : none ; }
2011-08-13 17:32:00 +04:00
a , a * , input , input * , select , . button span , li , label { cursor : pointer ; }
2011-08-10 18:02:28 +04:00
ul { list-style : none ; }
2013-04-11 19:20:24 +04:00
body { background : #fefefe ; font : normal .8 em / 1.6 em "Helvetica Neue" , Helvetica , Arial , FreeSans , sans-serif ; color : #000 ; }
2011-08-08 19:57:45 +04:00
/* HEADERS */
2013-02-14 20:06:08 +04:00
# body-user # header , # body-settings # header {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ; height : 45px ; line-height : 2 . 5em ;
background : # 1d2d44 url ( '../img/noise.png' ) repeat ;
-moz-box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , . 5 ) , inset 0 -2px 10px # 222 ; -webkit-box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , . 5 ) , inset 0 -2px 10px # 222 ; box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , . 5 ) , inset 0 -2px 10px # 222 ; }
2012-04-16 13:34:00 +04:00
# body-login # header { margin : -2 em auto 0 ; text-align : center ; height : 10 em ; padding : 1 em 0 .5 em ;
2011-10-04 20:58:38 +04:00
-moz-box-shadow : 0 0 1em rgba ( 0 , 0 , 0 , . 5 ) ; -webkit-box-shadow : 0 0 1em rgba ( 0 , 0 , 0 , . 5 ) ; box-shadow : 0 0 1em rgba ( 0 , 0 , 0 , . 5 ) ;
2012-12-07 20:41:52 +04:00
background : # 1d2d44 ; /* Old browsers */
2013-04-17 13:53:38 +04:00
background : -moz-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* FF3.6+ */
background : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 % , # 35537a ) , color-stop ( 100 % , # 1d2d44 ) ) ; /* Chrome,Safari4+ */
background : -webkit-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* Chrome10+,Safari5.1+ */
background : -o-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* Opera11.10+ */
background : -ms-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* IE10+ */
background : linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* W3C */
filter : progid : DXImageTransform . Microsoft . gradient ( startColorstr = '#35537a' , endColorstr = '#1d2d44' , GradientType = 0 ) ; /* IE6-9 */ }
2011-08-08 19:57:45 +04:00
2013-01-31 23:19:32 +04:00
# owncloud { position : absolute ; top : 0 ; left : 0 ; padding : 6 px ; padding-bottom : 0 ; }
2013-03-07 22:28:17 +04:00
. header-right { float : right ; vertical-align : middle ; padding : 0.5 em ; }
2013-01-31 23:19:32 +04:00
. header-right > * { vertical-align : middle ; }
2011-08-08 19:57:45 +04:00
2013-03-06 15:38:43 +04:00
2011-08-08 19:57:45 +04:00
/* INPUTS */
2013-06-04 18:04:29 +04:00
input [ type = "text" ] , input [ type = "password" ] , input [ type = "search" ] , input [ type = "number" ] , input [ type = "email" ] , input [ type = "url" ] ,
2013-04-03 19:55:31 +04:00
textarea , select ,
button , . button ,
# quota , div . jp-progress , . pager li a {
2012-12-05 14:17:41 +04:00
width : 10em ; margin : . 3em ; padding : . 6em . 5em . 4em ;
2013-04-11 19:20:24 +04:00
font-size : 1em ;
2012-12-05 03:25:58 +04:00
background : # fff ; color : # 333 ; border : 1px solid # ddd ; outline : none ;
-moz-box-shadow : 0 1px 1px # fff , 0 2px 0 # bbb inset ; -webkit-box-shadow : 0 1px 1px # fff , 0 1px 0 # bbb inset ; box-shadow : 0 1px 1px # fff , 0 1px 0 # bbb inset ;
-moz-border-radius : . 5em ; -webkit-border-radius : . 5em ; border-radius : . 5em ;
}
2012-12-05 14:17:41 +04:00
input [ type = "hidden" ] { height : 0 ; width : 0 ; }
2013-06-04 18:04:29 +04:00
input [ type = "text" ] , input [ type = "password" ] , input [ type = "search" ] , input [ type = "number" ] , input [ type = "email" ] , input [ type = "url" ] , textarea {
2013-03-06 15:38:43 +04:00
background : # f8f8f8 ; color : # 555 ; cursor : text ;
2013-04-17 18:30:42 +04:00
font-family : inherit ; /* use default ownCloud font instead of default textarea monospace */
2013-03-06 15:38:43 +04:00
}
2013-06-04 18:04:29 +04:00
input [ type = "text" ] , input [ type = "password" ] , input [ type = "search" ] , input [ type = "number" ] , input [ type = "email" ] , input [ type = "url" ] {
2013-03-06 15:38:43 +04:00
-webkit-appearance : textfield ; -moz-appearance : textfield ;
-webkit-box-sizing : content-box ; -moz-box-sizing : content-box ; box-sizing : content-box ;
}
2011-10-23 12:44:05 +04:00
input [ type = "text" ] : hover , input [ type = "text" ] : focus , input [ type = "text" ] : active ,
input [ type = "password" ] : hover , input [ type = "password" ] : focus , input [ type = "password" ] : active ,
2013-02-21 19:25:47 +04:00
input [ type = "number" ] : hover , input [ type = "number" ] : focus , input [ type = "number" ] : active ,
2012-10-20 22:11:35 +04:00
. searchbox input [ type = "search" ] : hover , . searchbox input [ type = "search" ] : focus , . searchbox input [ type = "search" ] : active ,
2013-03-06 15:38:43 +04:00
input [ type = "email" ] : hover , input [ type = "email" ] : focus , input [ type = "email" ] : active ,
2013-06-04 18:04:29 +04:00
input [ type = "url" ] : hover , input [ type = "url" ] : focus , input [ type = "url" ] : active ,
2013-03-06 15:38:43 +04:00
textarea : hover , textarea : focus , textarea : active {
background-color : # fff ; color : # 333 ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ;
}
2012-12-13 15:51:45 +04:00
input [ type = "checkbox" ] { margin : 0 ; padding : 0 ; height : auto ; width : auto ; }
input [ type = "checkbox" ] : hover + label , input [ type = "checkbox" ] : focus + label { color : #111 !important ; }
2011-09-25 00:13:35 +04:00
# quota { cursor : default ; }
2011-08-08 11:47:58 +04:00
2013-01-25 13:52:10 +04:00
2013-01-31 20:21:44 +04:00
/* SCROLLING */
2013-02-01 01:20:31 +04:00
:: -webkit-scrollbar { width : 8 px ; }
:: -webkit-scrollbar-track-piece { background-color : transparent ; }
:: -webkit-scrollbar-thumb { background : #ddd ; }
2013-01-31 20:21:44 +04:00
2011-08-08 11:47:58 +04:00
2012-12-13 15:51:45 +04:00
/* BUTTONS */
2013-04-03 22:06:26 +04:00
input [ type = "submit" ] , input [ type = "button" ] ,
2013-04-03 19:55:31 +04:00
button , . button ,
# quota , div . jp-progress , select , . pager li a {
2013-01-28 16:16:30 +04:00
width : auto ; padding : . 4em ;
2013-01-31 15:59:30 +04:00
background-color : rgba ( 240 , 240 , 240 , . 9 ) ; font-weight : bold ; color : # 555 ; text-shadow : rgba ( 255 , 255 , 255 , . 9 ) 0 1px 0 ; border : 1px solid rgba ( 190 , 190 , 190 , . 9 ) ; cursor : pointer ;
-moz-box-shadow : 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) , 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) inset ; -webkit-box-shadow : 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) , 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) inset ; box-shadow : 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) , 0 1px 1px rgba ( 255 , 255 , 255 , . 9 ) inset ;
2012-12-05 03:25:58 +04:00
-moz-border-radius : . 5em ; -webkit-border-radius : . 5em ; border-radius : . 5em ;
}
2013-04-03 19:55:31 +04:00
input [ type = "submit" ] : hover , input [ type = "submit" ] : focus ,
input [ type = "button" ] : hover , input [ type = "button" ] : focus ,
button : hover , button : focus ,
. button : hover , . button : focus ,
select : hover , select : focus , select : active {
2013-04-12 16:30:16 +04:00
background-color : rgba ( 250 , 250 , 250 , . 9 ) ;
2013-04-03 19:55:31 +04:00
color : # 333 ;
2012-12-13 15:49:59 +04:00
}
2012-11-05 22:54:48 +04:00
input [ type = "submit" ] img , input [ type = "button" ] img , button img , . button img { cursor : pointer ; }
2013-01-31 18:21:50 +04:00
# header . button { border : none ; -moz- box-shadow : none ; -webkit- box-shadow : none ; box-shadow : none ; }
2012-12-05 03:37:00 +04:00
2013-04-03 20:45:03 +04:00
/* disabled input fields and buttons */
input : disabled , input : disabled : hover , input : disabled : focus ,
button : disabled , button : disabled : hover , button : disabled : focus ,
2013-04-12 21:18:11 +04:00
. button : disabled , . button : disabled : hover , . button : disabled : focus ,
a . disabled , a . disabled : hover , a . disabled : focus {
2013-04-03 20:45:03 +04:00
background : rgba ( 230 , 230 , 230 , . 9 ) ;
color : # 999 ;
cursor : default ;
}
2012-12-13 15:51:45 +04:00
/* Primary action button, use sparingly */
2012-12-10 18:08:58 +04:00
. primary , input [ type = "submit" ] . primary , input [ type = "button" ] . primary , button . primary , . button . primary {
border : 1px solid # 1d2d44 ;
background : # 35537a ; color : # ddd ; text-shadow : # 000 0 -1px 0 ;
-moz-box-shadow : 0 0 1px # 000 , 0 1px 1px # 6d7d94 inset ; -webkit-box-shadow : 0 0 1px # 000 , 0 1px 1px # 6d7d94 inset ; box-shadow : 0 0 1px # 000 , 0 1px 1px # 6d7d94 inset ;
}
. primary : hover , input [ type = "submit" ] . primary : hover , input [ type = "button" ] . primary : hover , button . primary : hover , . button . primary : hover ,
. primary : focus , input [ type = "submit" ] . primary : focus , input [ type = "button" ] . primary : focus , button . primary : focus , . button . primary : focus {
border : 1px solid # 1d2d44 ;
background : # 2d3d54 ; color : # fff ; text-shadow : # 000 0 -1px 0 ;
-moz-box-shadow : 0 0 1px # 000 , 0 1px 1px # 5d6d84 inset ; -webkit-box-shadow : 0 0 1px # 000 , 0 1px 1px # 5d6d84 inset ; box-shadow : 0 0 1px # 000 , 0 1px 1px # 5d6d84 inset ;
}
. primary : active , input [ type = "submit" ] . primary : active , input [ type = "button" ] . primary : active , button . primary : active , . button . primary : active {
border : 1px solid # 1d2d44 ;
2013-04-17 13:53:38 +04:00
background : # 1d2d44 ; color : # bbb ; text-shadow : # 000 0 -1px 0 ;
2012-12-10 18:08:58 +04:00
-moz-box-shadow : 0 1px 1px # fff , 0 1px 1px 0 rgba ( 0 , 0 , 0 , . 2 ) inset ; -webkit-box-shadow : 0 1px 1px # fff , 0 1px 1px 0 rgba ( 0 , 0 , 0 , . 2 ) inset ; box-shadow : 0 1px 1px # fff , 0 1px 1px 0 rgba ( 0 , 0 , 0 , . 2 ) inset ;
}
2012-12-05 03:37:00 +04:00
2011-08-08 11:47:58 +04:00
# body-login input { font-size : 1.5 em ; }
2012-12-07 20:41:52 +04:00
# body-login input [ type = "text" ] , # body-login input [ type = "password" ] { width : 13 em ; }
2013-02-05 15:48:30 +04:00
# body-login input . login { width : auto ; float : right ; padding : 7 px 9 px 6 px ; }
2013-02-05 15:49:33 +04:00
# remember_login { margin : .8 em .2 em 0 1 em ; vertical-align : text - bottom ; }
2013-04-02 13:52:57 +04:00
. searchbox input [ type = "search" ] { font-size : 1.2 em ; padding : .2 em .5 em .2 em 1.5 em ; background : #fff url ( '../img/actions/search.svg' ) no-repeat .5 em center ; border : 0 ; -moz- border-radius : 1 em ; -webkit- border-radius : 1 em ; border-radius : 1 em ; -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 ; margin-top : 10 px ; float : right ; }
2011-08-08 16:13:11 +04:00
input [ type = "submit" ] . enabled { background : #66f866 ; border : 1 px solid #5e5 ; -moz- box-shadow : 0 1 px 1 px #f8f8f8 , 0 1 px 1 px #cfc inset ; -webkit- box-shadow : 0 1 px 1 px #f8f8f8 , 0 1 px 1 px #cfc inset ; box-shadow : 0 1 px 1 px #f8f8f8 , 0 1 px 1 px #cfc inset ; }
2012-12-07 20:41:52 +04:00
# select_all { margin-top : .4 em !important ; }
2012-12-18 18:41:58 +04:00
2011-08-09 00:31:17 +04:00
/* CONTENT ------------------------------------------------------------------ */
2013-02-04 21:30:49 +04:00
# controls {
position : fixed ;
height : 2 . 8em ; width : 100 % ;
padding : 0 70px 0 0 . 5em ; margin : 0 ;
-moz-box-sizing : border-box ; box-sizing : border-box ;
-moz-box-shadow : 0 -3px 7px # 000 ; -webkit-box-shadow : 0 -3px 7px # 000 ; box-shadow : 0 -3px 7px # 000 ;
2013-06-11 16:50:23 +04:00
background : # eee ; border-bottom : 1px solid # e7e7e7 ; z-index : 50 ;
2013-02-04 21:30:49 +04:00
}
2011-08-21 13:14:57 +04:00
# controls . button { display : inline-block ; }
2013-01-18 16:58:50 +04:00
# content { position : relative ; height : 100 % ; width : 100 % ; }
2013-02-06 19:56:26 +04:00
# content . hascontrols { position : relative ; top : 2.9 em ; }
2013-01-18 16:58:50 +04:00
# content-wrapper {
position : absolute ; height : 100 % ; width : 100 % ; padding-top : 3 . 5em ; padding-left : 64px ;
-moz-box-sizing : border-box ; box-sizing : border-box ;
2012-10-27 21:42:25 +04:00
}
2013-01-28 22:36:21 +04:00
# leftcontent , . leftcontent {
2013-02-03 17:44:33 +04:00
position : relative ; overflow : auto ; width : 20em ; height : 100 % ;
2013-01-28 22:36:21 +04:00
background : # f8f8f8 ; border-right : 1px solid # ddd ;
2013-02-03 17:44:33 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
2013-01-28 22:36:21 +04:00
}
2012-04-16 14:52:48 +04:00
# leftcontent li , . leftcontent li { background : #f8f8f8 ; padding : .5 em .8 em ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; -webkit- transition : background-color 200 ms ; -moz- transition : background-color 200 ms ; -o- transition : background-color 200 ms ; transition : background-color 200 ms ; }
2011-09-17 03:05:24 +04:00
# leftcontent li : hover , # leftcontent li : active , # leftcontent li . active , . leftcontent li : hover , . leftcontent li : active , . leftcontent li . active { background : #eee ; }
2012-04-16 14:52:48 +04:00
# leftcontent li . active , . leftcontent li . active { font-weight : bold ; }
# leftcontent li : hover , . leftcontent li : hover { color : #333 ; background : #ddd ; }
2012-12-07 20:41:52 +04:00
# leftcontent a { height : 100 % ; display : block ; margin : 0 ; padding : 0 1 em 0 0 ; float : left ; }
2013-01-25 14:31:41 +04:00
# rightcontent , . rightcontent { position : fixed ; top : 6.4 em ; left : 24.5 em ; overflow : auto }
2011-03-02 01:20:16 +03:00
2011-08-13 17:32:00 +04:00
2011-04-19 04:00:15 +04:00
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
2011-08-10 17:10:32 +04:00
# body-login { background : #ddd ; }
2012-12-07 20:41:52 +04:00
# body-login div . buttons { text-align : center ; }
# body-login p . info { width : 22 em ; text-align : center ; margin : 2 em auto ; color : #777 ; text-shadow : #fff 0 1 px 0 ; }
2011-09-28 19:14:37 +04:00
# body-login p . info a { font-weight : bold ; color : #777 ; }
2013-02-27 14:04:08 +04:00
# body-login # submit . login { margin-right : 7 px ; } /* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
2011-05-18 00:34:31 +04:00
2011-08-08 14:19:22 +04:00
# login { min-height : 30 em ; margin : 2 em auto 0 ; border-bottom : 1 px solid #f8f8f8 ; background : #eee ; }
2011-09-30 20:22:12 +04:00
# login form { width : 22 em ; margin : 2 em auto 2 em ; padding : 0 ; }
2012-12-10 18:08:58 +04:00
# login form fieldset { margin-bottom : 20 px ; }
# login form # adminaccount { margin-bottom : 5 px ; }
# login form fieldset legend , # datadirContent label {
width : 100 % ; text-align : center ;
font-weight : bold ; color : # 999 ; text-shadow : 0 1px 0 white ;
}
# login form fieldset legend a { color : #999 ; }
# login # datadirContent label { display : block ; margin : 0 ; color : #999 ; }
# login form # datadirField legend { margin-bottom : 15 px ; }
2012-12-11 21:54:43 +04:00
/* Icons for username and password fields to better recognize them */
2012-12-13 01:40:08 +04:00
# adminlogin , # adminpass , # user , # password { width : 11.7 em !important ; padding-left : 1.8 em ; }
2013-02-07 21:04:14 +04:00
# adminlogin + label + img , # adminpass-icon , # user + label + img , # password-icon {
2012-12-13 01:40:08 +04:00
position : absolute ; left : 1 . 25em ; top : 1 . 65em ;
2013-02-14 13:59:30 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" ; filter : alpha ( opacity = 30 ) ; opacity : . 3 ;
2012-12-13 01:40:08 +04:00
}
2013-02-07 21:04:14 +04:00
# adminpass-icon , # password-icon { top : 1.1 em ; }
2013-01-25 13:52:10 +04:00
input [ name = "password-clone" ] { padding-left : 1.8 em ; width : 11.7 em !important ; }
2013-02-08 15:08:28 +04:00
input [ name = "adminpass-clone" ] { padding-left : 1.8 em ; width : 11.7 em !important ; }
2012-12-13 01:40:08 +04:00
2012-12-10 18:08:58 +04:00
/* Nicely grouping input field sets */
. grouptop input {
margin-bottom : 0 ;
border-bottom : 0 ; border-bottom-left-radius : 0 ; border-bottom-right-radius : 0 ;
}
. groupmiddle input {
margin-top : 0 ; margin-bottom : 0 ;
2013-02-09 20:14:20 +04:00
border-top : 0 ; border-bottom : 0 ; border-radius : 0 ;
2012-12-10 18:08:58 +04:00
box-shadow : 0 1px 1px # fff , 0 1px 0 # ddd inset ;
}
. groupbottom input {
margin-top : 0 ;
border-top : 0 ; border-top-right-radius : 0 ; border-top-left-radius : 0 ;
box-shadow : 0 1px 1px # fff , 0 1px 0 # ddd inset ;
}
2012-12-04 19:58:42 +04:00
2013-02-07 20:02:43 +04:00
/* In field labels. No, HTML placeholder does not work as well. */
2012-12-11 21:54:43 +04:00
# login form label { color : #666 ; }
# login . groupmiddle label , # login . groupbottom label { top : .65 em ; }
2012-12-07 20:41:52 +04:00
p . infield { position : relative ; }
2012-12-11 21:54:43 +04:00
label . infield { cursor : text !important ; top : 1.05 em ; left : .85 em ; }
2013-02-09 20:13:02 +04:00
# login form label . infield { /* labels are ellipsized when too long, keep them short */
position : absolute ; width : 90 % ; padding-left : 1 . 4em ;
font-size : 19px ; color : # aaa ;
white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ;
}
2013-02-07 19:57:54 +04:00
# login # databaseField . infield { padding-left : 0 ; }
2011-08-08 13:45:01 +04:00
# login form input [ type = "checkbox" ] + label { position : relative ; margin : 0 ; font-size : 1 em ; text-shadow : #fff 0 1 px 0 ; }
2013-04-08 09:11:35 +04:00
# login form . errors { background : #fed7d7 ; border : 1 px solid #f00 ; list-style-indent : inside ; margin : 0 0 2 em ; padding : 1 em ; }
# login . success { background : #d7fed7 ; border : 1 px solid #0f0 ; width : 35 % ; margin : 30 px auto ; padding : 1 em ; text-align : center ; }
2011-04-17 20:00:10 +04:00
2013-02-07 20:04:03 +04:00
/* Show password toggle */
2013-04-13 08:15:30 +04:00
# show , # dbpassword { position : absolute ; right : 1 em ; top : .8 em ; float : right ; }
# show , # dbpassword , # personal-show { display : none ; }
# show + label , # dbpassword + label { right : 1 em ; top : 1.25 em !important ; }
# show : checked + label , # dbpassword : checked + label , # personal-show : checked + label { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ; filter : alpha ( opacity = 80 ) ; opacity : .8 ; }
# show + label , # dbpassword + label , # personal-show + label {
2013-02-09 10:10:07 +04:00
position : absolute ! important ; height : 14px ; width : 24px ;
2013-02-14 13:59:30 +04:00
background-image : url ( "../img/actions/toggle.png" ) ; background-repeat : no-repeat ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" ; filter : alpha ( opacity = 30 ) ; opacity : . 3 ;
2013-02-07 20:04:03 +04:00
}
2013-02-12 15:22:38 +04:00
# pass2 , input [ name = "personal-password-clone" ] { padding : 0.6 em 2.5 em 0.4 em 0.4 em ; width : 8 em ; }
# personal-show + label { margin-top : 1 em ; margin-left : -3 em ; }
# passwordbutton { margin-left : 0.5 em ; }
2013-02-07 20:04:03 +04:00
2013-02-07 20:02:43 +04:00
/* Database selector */
2011-08-11 20:18:50 +04:00
# login form # selectDbType { text-align : center ; }
2012-12-10 18:08:58 +04:00
# login form # selectDbType label {
position : static ; margin : 0 -3px 5px ; padding : . 4em ;
font-size : 12px ; font-weight : bold ; background : # f8f8f8 ; color : # 888 ; cursor : pointer ;
border : 1px solid # ddd ; text-shadow : # eee 0 1px 0 ;
-moz-box-shadow : 0 1px 1px # fff , 0 1px 1px # fff inset ; -webkit-box-shadow : 0 1px 1px # fff , 0 1px 1px # fff inset ;
}
# login form # selectDbType label . ui-state-hover , # login form # selectDbType label . ui-state-active { color : #000 ; background-color : #e8e8e8 ; }
2013-04-17 19:15:34 +04:00
/* Warnings, for information */
. warning {
display : block ;
background-color : # f2dede ;
color : # b94a48 ;
padding : 8px ;
margin : 0 7px 5px ;
border : 1px solid # eed3d7 ;
border-radius : 5px ;
2012-12-10 18:08:58 +04:00
}
2013-04-17 19:15:34 +04:00
. warning legend ,
. warning a {
color : # b94a48 ! important ;
font-weight : bold ;
}
/* Errors, for grave states */
li . update , li . error { width : 640 px ; margin : 4 em auto ; padding : 1 em 1 em 1 em 4 em ; background : #ffe .8 em .8 em no-repeat ; border : 1 px solid #ccc ; -moz- border-radius : 10 px ; -webkit- border-radius : 10 px ; border-radius : 10 px ; cursor : default ; }
. error { color : #FF3B3B ; }
2011-08-11 20:18:50 +04:00
2013-02-06 18:15:20 +04:00
/* Alternative Logins */
# alternative-logins legend { margin-bottom : 10 px ; }
# alternative-logins li { height : 40 px ; display : inline-block ; white-space : nowrap ; }
2011-08-11 18:37:20 +04:00
2011-04-17 20:00:10 +04:00
/* NAVIGATION ------------------------------------------------------------- */
2013-01-31 17:14:12 +04:00
# navigation {
2013-03-21 21:37:23 +04:00
position : fixed ; float : left ; width : 64px ; padding-top : 3 . 5em ; z-index : 75 ; height : 100 % ;
2013-04-17 19:36:30 +04:00
background : # 383c43 url ( '../img/noise.png' ) repeat ;
2013-01-31 17:14:12 +04:00
-moz-box-shadow : 0 0 7px # 000 ; -webkit-box-shadow : 0 0 7px # 000 ; box-shadow : 0 0 7px # 000 ;
2013-03-21 21:46:59 +04:00
overflow : hidden ; box-sizing : border-box ; -moz-box-sizing : border-box ;
2013-01-31 17:14:12 +04:00
}
2013-04-14 21:25:46 +04:00
# navigation : hover { overflow-y : auto ; } /* show scrollbar only on hover */
2013-04-10 17:44:50 +04:00
# navigation a span {
display : block ;
2013-01-17 08:54:31 +04:00
text-decoration : none ; font-size : 10px ; text-align : center ;
2013-02-14 13:59:30 +04:00
color : # fff ; text-shadow : # 000 0 -1px 0 ;
2013-04-05 03:17:52 +04:00
white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; /* ellipsize long app names */
2013-01-17 08:54:31 +04:00
}
2013-04-17 19:23:12 +04:00
2013-04-14 21:25:46 +04:00
/* icon opacity and hover effect */
2013-04-17 19:23:12 +04:00
# navigation a img ,
# navigation a span {
/* 50% opacity when inactive */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ;
filter : alpha ( opacity = 50 ) ;
opacity : . 5 ;
}
# navigation a : hover img , # navigation a : focus img ,
# navigation a : hover span , # navigation a : focus span {
/* 80% opacity when hovered or focused */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ;
filter : alpha ( opacity = 80 ) ;
opacity : . 8 ;
}
# navigation a . active img ,
# navigation a . active span {
/* full opacity for the active app */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ;
filter : alpha ( opacity = 100 ) ;
opacity : 1 ;
}
2013-04-14 21:25:46 +04:00
/* positioning */
2013-04-10 18:00:28 +04:00
# navigation . icon {
2013-04-14 21:25:46 +04:00
display : block ;
width : 32px ; height : 32px ;
margin : 0 16px 0 ; padding : 8px 0 4px ;
2013-04-10 18:00:28 +04:00
}
2013-01-17 08:54:31 +04:00
# navigation li : first-child a { padding-top : 16 px ; }
2013-02-14 20:06:08 +04:00
/* USER MENU */
2012-10-27 20:58:16 +04:00
# settings { float : right ; margin-top : 7 px ; color : #bbb ; text-shadow : 0 -1 px 0 #000 ; }
# expand { padding : 15 px ; cursor : pointer ; font-weight : bold ; }
# expand : hover , # expand : focus , # expand : active { color : #fff ; }
2013-02-14 13:59:30 +04:00
# expand img { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ; filter : alpha ( opacity = 70 ) ; opacity : .7 ; margin-bottom : -2 px ; }
# expand : hover img , # expand : focus img , # expand : active img { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; }
2013-02-06 19:03:01 +04:00
# expanddiv {
position : absolute ; right : 0 ; top : 45px ; z-index : 76 ; display : none ;
2013-02-15 21:37:52 +04:00
background : # 383c43 url ( '../img/noise.png' ) repeat ;
border-bottom-left-radius : 7px ; border-bottom : 1px # 333 solid ; border-left : 1px # 333 solid ;
2013-02-14 20:06:08 +04:00
-moz-box-shadow : 0 0 7px rgb ( 29 , 45 , 68 ) ; -webkit-box-shadow : 0 0 7px rgb ( 29 , 45 , 68 ) ; box-shadow : 0 0 7px rgb ( 29 , 45 , 68 ) ;
2013-02-06 19:03:01 +04:00
}
2013-02-14 13:59:30 +04:00
# expanddiv a {
display : block ; color : # fff ; text-shadow : 0 -1px 0 # 000 ; padding : 0 8px ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ; filter : alpha ( opacity = 70 ) ; opacity : . 7 ;
}
2013-01-17 09:45:33 +04:00
# expanddiv a img { margin-bottom : -3 px ; }
2013-02-14 13:59:30 +04:00
# expanddiv a : hover , # expanddiv a : focus , # expanddiv a : active { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; }
2011-03-02 01:20:16 +03:00
2013-01-30 17:42:51 +04:00
2011-08-13 17:32:00 +04:00
/* VARIOUS REUSABLE SELECTORS */
. hidden { display : none ; }
2012-12-07 20:41:52 +04:00
. bold { font-weight : bold ; }
. center { text-align : center ; }
2011-08-13 17:32:00 +04:00
2013-01-11 18:21:39 +04:00
# notification-container { position : fixed ; top : 0 px ; width : 100 % ; text-align : center ; z-index : 101 ; line-height : 1.2 ; }
2013-04-24 22:17:39 +04:00
# notification , # update-notification { z-index : 101 ; background-color : #fc4 ; border : 0 ; padding : 0 .7 em .3 em ; display : none ; position : relative ; top : 0 ; -moz- border-radius-bottomleft : 1 em ; -webkit- border-bottom-left-radius : 1 em ; border-bottom-left-radius : 1 em ; -moz- border-radius-bottomright : 1 em ; -webkit- border-bottom-right-radius : 1 em ; border-bottom-right-radius : 1 em ; }
# notification span , # update-notification span { cursor : pointer ; font-weight : bold ; margin-left : 1 em ; }
2011-08-12 01:38:43 +04:00
2013-01-26 22:25:15 +04:00
tr . action : not ( . permanent ) , . selectedActions a { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ; filter : alpha ( opacity = 0 ) ; opacity : 0 ; }
tr : hover . action , tr . action . permanent , . selectedActions a { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ; filter : alpha ( opacity = 50 ) ; opacity : .5 ; }
2012-12-07 20:41:52 +04:00
tr . action { width : 16 px ; height : 16 px ; }
2012-06-19 01:22:52 +04:00
. header-action { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ; filter : alpha ( opacity = 80 ) ; opacity : .8 ; }
2012-10-28 15:47:33 +04:00
tr : hover . action : hover , . selectedActions a : hover , . header-action : hover { -ms- filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ; filter : alpha ( opacity = 100 ) ; opacity : 1 ; }
2011-08-13 17:32:00 +04:00
tbody tr : hover , tr : active { background-color : #f8f8f8 ; }
2013-06-11 16:51:06 +04:00
# body-settings . personalblock , # body-settings . helpblock {
padding : . 5em 1em ;
margin : 1em ;
background-color : rgb ( 240 , 240 , 240 ) ;
color : # 555 ;
text-shadow : # fff 0 1px 0 ;
-moz-border-radius : . 5em ; -webkit-border-radius : . 5em ; border-radius : . 5em ;
}
2012-02-22 01:31:35 +04:00
# body-settings . personalblock # quota { position : relative ; padding : 0 ; }
2012-12-07 20:41:52 +04:00
# body-settings # controls + . helpblock { position : relative ; margin-top : 3 em ; }
2011-09-29 17:55:18 +04:00
. personalblock > legend { margin-top : 2 em ; }
2012-12-07 20:41:52 +04:00
. personalblock > legend , th , dt , label { font-weight : bold ; }
code { font-family : "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , monospace ; }
2011-08-13 17:32:00 +04:00
2013-06-11 16:51:06 +04:00
# quota div , div . jp-play-bar , div . jp-seek-bar {
padding : 0 ;
background-color : rgb ( 220 , 220 , 220 ) ;
font-weight : normal ;
white-space : nowrap ;
-moz-border-radius-bottomleft : . 4em ; -webkit-border-bottom-left-radius : . 4em ; border-bottom-left-radius : . 4em ;
-moz-border-radius-topleft : . 4em ; -webkit-border-top-left-radius : . 4em ; border-top-left-radius : . 4em ; }
2012-12-07 20:41:52 +04:00
# quotatext { padding : .6 em 1 em ; }
2011-08-13 18:34:40 +04:00
div . jp-play-bar , div . jp-seek-bar { padding : 0 ; }
2011-08-13 17:32:00 +04:00
2011-10-04 23:39:13 +04:00
. pager { list-style : none ; float : right ; display : inline ; margin : .7 em 13 em 0 0 ; }
2011-08-21 13:14:57 +04:00
. pager li { display : inline-block ; }
2011-08-20 07:07:58 +04:00
2012-12-07 20:41:52 +04:00
. ui-state-default , . ui-widget-content . ui-state-default , . ui-widget-header . ui-state-default { overflow : hidden ; text-overflow : ellipsis ; }
2013-04-15 23:07:45 +04:00
. hint { background-image : url ( '../img/actions/info.png' ) ; background-repeat : no-repeat ; color : #777 ; padding-left : 25 px ; background-position : 0 0.3 em ; }
2012-12-07 20:41:52 +04:00
. separator { display : inline ; border-left : 1 px solid #d3d3d3 ; border-right : 1 px solid #fff ; height : 10 px ; width : 0 px ; margin : 4 px ; }
2012-02-28 03:20:40 +04:00
2012-12-07 20:41:52 +04:00
a . bookmarklet { background-color : #ddd ; border : 1 px solid #ccc ; padding : 5 px ; padding-top : 0 px ; padding-bottom : 2 px ; text-decoration : none ; margin-top : 5 px }
2012-03-30 01:16:19 +04:00
2013-04-15 23:07:45 +04:00
. exception { color : #000 ; }
2012-12-07 20:41:52 +04:00
. exception textarea { width : 95 % ; height : 200 px ; background : #ffe ; border : 0 ; }
2012-04-02 21:39:24 +04:00
2013-04-02 13:52:57 +04:00
. ui-icon-circle-triangle-e { background-image : url ( '../img/actions/play-next.svg' ) ; }
. ui-icon-circle-triangle-w { background-image : url ( '../img/actions/play-previous.svg' ) ; }
2013-04-15 23:07:45 +04:00
. ui-datepicker-prev , . ui-datepicker-next { border : 1 px solid #ddd ; background : #fff ; }
2012-09-19 20:51:20 +04:00
2012-04-13 19:23:56 +04:00
/* ---- DIALOGS ---- */
2013-05-17 08:16:51 +04:00
# oc-dialog-filepicker-content . dirtree { width : 92 % ; overflow : hidden ; }
2013-05-17 18:18:40 +04:00
# oc-dialog-filepicker-content . dirtree . home {
background-image : url ( '../img/places/home.svg' ) ;
background-repeat : no-repeat ;
background-position : left center ;
}
2013-05-17 08:16:51 +04:00
# oc-dialog-filepicker-content . dirtree span : not ( : last-child ) { cursor : pointer ; }
# oc-dialog-filepicker-content . dirtree span : last-child { font-weight : bold ; }
# oc-dialog-filepicker-content . dirtree span : not ( : last-child ) :: after { content : '>' ; padding : 3 px ; }
2013-06-02 23:52:59 +04:00
# oc-dialog-filepicker-content . filelist {
overflow-y : auto ;
2013-06-03 04:11:01 +04:00
max-height : 300px ;
2013-06-02 23:52:59 +04:00
background-color : white ;
width : 100 % ;
}
2013-05-17 06:54:08 +04:00
# oc-dialog-filepicker-content . filelist img { margin : 2 px 1 em 0 4 px ; }
# oc-dialog-filepicker-content . filelist . date { float : right ; margin-right : 1 em ; }
# oc-dialog-filepicker-content . filepicker_element_selected { background-color : lightblue ; }
2013-04-06 12:07:12 +04:00
. ui-dialog { position : fixed !important ; }
span . ui-icon { float : left ; margin : 3 px 7 px 30 px 0 ; }
2013-05-16 02:23:05 +04:00
. loading { background : url ( '../img/loading.gif' ) no-repeat center ; cursor : wait ; }
2012-04-13 19:23:56 +04:00
/* ---- CATEGORIES ---- */
2012-12-07 20:41:52 +04:00
# categoryform . scrollarea { position : absolute ; left : 10 px ; top : 10 px ; right : 10 px ; bottom : 50 px ; overflow : auto ; border : 1 px solid #ddd ; background : #f8f8f8 ; }
# categoryform . bottombuttons { position : absolute ; bottom : 10 px ; }
# categoryform . bottombuttons * { float : left ; }
2012-04-13 19:23:56 +04:00
/*#categorylist { border:1px solid #ddd;}*/
# categorylist li { background : #f8f8f8 ; padding : .3 em .8 em ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; -webkit- transition : background-color 500 ms ; -moz- transition : background-color 500 ms ; -o- transition : background-color 500 ms ; transition : background-color 500 ms ; }
2012-10-02 01:42:45 +04:00
# categorylist li : hover , # categorylist li : active { background : #eee ; }
2012-12-07 20:41:52 +04:00
# category_addinput { width : 10 em ; }
2012-07-31 14:21:06 +04:00
/* ---- APP SETTINGS ---- */
2013-04-15 23:07:45 +04:00
. popup { background-color : white ; border-radius : 10 px 10 px 10 px 10 px ; box-shadow : 0 0 20 px #888 ; color : #333 ; padding : 10 px ; position : fixed !important ; z-index : 200 ; }
2012-12-07 20:41:52 +04:00
. popup . topright { top : 7 em ; right : 1 em ; }
. popup . bottomleft { bottom : 1 em ; left : 33 em ; }
2013-04-02 13:52:57 +04:00
. popup . close { position : absolute ; top : 0.2 em ; right : 0.2 em ; height : 20 px ; width : 20 px ; background : url ( '../img/actions/delete.svg' ) no-repeat center ; }
2012-12-07 20:41:52 +04:00
. popup h2 { font-weight : bold ; font-size : 1.2 em ; }
. arrow { border-bottom : 10 px solid white ; border-left : 10 px solid transparent ; border-right : 10 px solid transparent ; display : block ; height : 0 ; position : absolute ; width : 0 ; z-index : 201 ; }
. arrow . left { left : -13 px ; bottom : 1.2 em ; -webkit- transform : rotate ( 270 deg ) ; -moz- transform : rotate ( 270 deg ) ; -o- transform : rotate ( 270 deg ) ; -ms- transform : rotate ( 270 deg ) ; transform : rotate ( 270 deg ) ; }
. arrow . up { top : -8 px ; right : 2 em ; }
. arrow . down { -webkit- transform : rotate ( 180 deg ) ; -moz- transform : rotate ( 180 deg ) ; -o- transform : rotate ( 180 deg ) ; -ms- transform : rotate ( 180 deg ) ; transform : rotate ( 180 deg ) ; }
2013-02-09 14:34:25 +04:00
. help-includes { overflow : hidden ; width : 100 % ; height : 100 % ; -moz- box-sizing : border-box ; box-sizing : border-box ; padding-top : 2.8 em ; }
. help-iframe { width : 100 % ; height : 100 % ; margin : 0 ; padding : 0 ; border : 0 ; overflow : auto ; }
2012-09-09 04:59:43 +04:00
2013-06-11 16:51:29 +04:00
2012-09-09 04:59:43 +04:00
/* ---- BREADCRUMB ---- */
2013-04-02 13:52:57 +04:00
div . crumb { float : left ; display : block ; background : url ( '../img/breadcrumb.svg' ) no-repeat right 0 ; padding : .75 em 1.5 em 0 1 em ; height : 2.9 em ; -moz- box-sizing : border-box ; box-sizing : border-box ; }
2012-10-28 20:10:31 +04:00
div . crumb : first-child { padding : 10 px 20 px 10 px 5 px ; }
div . crumb . last { font-weight : bold ; background : none ; padding-right : 10 px ; }
2012-10-28 19:05:31 +04:00
div . crumb a { padding : 0.9 em 0 0.7 em 0 ; }
2013-02-14 20:40:29 +04:00
2013-06-11 16:51:29 +04:00
/* some feedback for hover/tap on breadcrumbs */
div . crumb : hover ,
div . crumb : focus ,
div . crumb : active {
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ;
filter : alpha ( opacity = 70 ) ;
opacity : . 7 ;
}
2013-02-14 20:40:29 +04:00
2013-03-27 19:14:17 +04:00
2013-02-14 20:40:29 +04:00
/* ---- APP STYLING ---- */
2013-03-27 19:14:17 +04:00
# app {
height : 100 % ;
width : 100 % ;
}
2013-02-14 20:40:29 +04:00
/* Navigation: folder like structure */
# app-navigation {
2013-03-27 19:14:17 +04:00
width : 250px ;
height : 100 % ;
float : left ;
padding-bottom : 32px ;
2013-02-14 20:40:29 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
2013-03-27 19:14:17 +04:00
background-color : # f8f8f8 ;
border-right : 1px solid # ccc ;
2013-02-14 20:40:29 +04:00
}
# app-navigation > ul {
2013-03-27 19:14:17 +04:00
height : 100 % ;
overflow : auto ;
2013-02-14 20:40:29 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
}
# app-navigation li {
2013-03-27 19:14:17 +04:00
position : relative ;
width : 100 % ;
2013-02-14 20:40:29 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
2013-03-27 19:14:17 +04:00
text-shadow : 0 1px 0 rgba ( 255 , 255 , 255 , . 9 ) ;
}
2013-04-15 22:29:45 +04:00
# app-navigation . active ,
# app-navigation . active a { /* active navigation entry or folder */
2013-03-27 20:11:40 +04:00
background-color : # ddd ;
2013-03-27 19:14:17 +04:00
text-shadow : 0 1px 0 rgba ( 255 , 255 , 255 , . 7 ) ;
2013-02-14 20:40:29 +04:00
}
2013-03-27 19:14:17 +04:00
/* special rules for first-level entries and folders */
2013-02-14 20:40:29 +04:00
# app-navigation > ul > li {
background-color : # eee ;
2013-03-27 19:14:17 +04:00
border-top : 1px solid # fff ;
border-bottom : 1px solid # ddd ;
}
2013-03-27 20:39:09 +04:00
# app-navigation > ul > . active {
2013-03-27 19:14:17 +04:00
border-top : 1px solid # ccc ;
border-bottom : 1px solid # ccc ;
2013-02-14 20:40:29 +04:00
}
2013-03-27 20:39:09 +04:00
# app-navigation . with-icon a {
2013-02-14 20:40:29 +04:00
padding-left : 32px ;
2013-03-27 19:14:17 +04:00
background-size : 16px 16px ; background-position : 10px center ; background-repeat : no-repeat ;
2013-02-14 20:40:29 +04:00
}
# app-navigation li > a {
2013-03-27 19:14:17 +04:00
display : block ;
width : 100 % ;
padding : 0 16px ;
overflow : hidden ;
2013-02-14 20:40:29 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
2013-03-27 19:14:17 +04:00
line-height : 32px ;
white-space : nowrap ;
text-overflow : ellipsis ;
color : # 333 ;
}
# app-navigation li : hover > a {
2013-03-27 20:11:40 +04:00
background-color : # ddd ;
2013-03-27 19:14:17 +04:00
}
# app-navigation > ul > li : hover {
border-top : 1px solid # ccc ;
border-bottom : 1px solid # ccc ;
2013-02-14 20:40:29 +04:00
}
2013-03-27 20:39:09 +04:00
# app-navigation . collapse {
display : none ; /* hide collapse button intially */
}
# app-navigation . collapsible > . collapse {
2013-03-27 19:14:17 +04:00
position : absolute ;
left : 6px ;
top : 5px ;
height : 16px ;
width : 16px ;
2013-04-02 13:52:57 +04:00
background : none ; background-image : url ( '../img/actions/triangle-s.svg' ) ;
2013-03-27 19:14:17 +04:00
background-size : 16px 16px ; background-repeat : no-repeat ;
border : none ;
border-radius : 0 ;
outline : none ! important ;
2013-02-14 20:40:29 +04:00
box-shadow : none ;
}
2013-03-27 20:39:09 +04:00
# app-navigation . collapsible : hover > a {
2013-03-27 19:14:17 +04:00
background-image : none ;
}
2013-03-27 20:39:09 +04:00
# app-navigation . collapsible : hover > . collapse {
2013-03-27 19:14:17 +04:00
display : block ;
}
2013-02-14 20:40:29 +04:00
2013-03-27 20:39:09 +04:00
# app-navigation . collapsible . collapse {
2013-02-14 20:40:29 +04:00
-moz-transform : rotate ( -90deg ) ;
-webkit-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
-o-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
}
2013-03-27 20:39:09 +04:00
# app-navigation . collapsible . open . collapse {
2013-02-14 20:40:29 +04:00
-moz-transform : rotate ( 0 ) ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
-o-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
}
/* Second level nesting for lists */
2013-03-27 19:14:17 +04:00
# app-navigation > ul ul {
display : none ;
}
# app-navigation > ul ul li > a {
padding-left : 32px ;
}
2013-03-27 20:39:09 +04:00
# app-navigation > . with-icon ul li > a {
2013-03-27 19:14:17 +04:00
padding-left : 48px ;
background-position : 24px center ;
}
2013-02-14 20:40:29 +04:00
# app-navigation . open {
background-image : linear-gradient ( top , rgb ( 238 , 238 , 238 ) 0 % , rgb ( 245 , 245 , 245 ) 100 % ) ;
background-image : -o-linear-gradient ( top , rgb ( 238 , 238 , 238 ) 0 % , rgb ( 245 , 245 , 245 ) 100 % ) ;
background-image : -moz-linear-gradient ( top , rgb ( 238 , 238 , 238 ) 0 % , rgb ( 245 , 245 , 245 ) 100 % ) ;
background-image : -webkit-linear-gradient ( top , rgb ( 238 , 238 , 238 ) 0 % , rgb ( 245 , 245 , 245 ) 100 % ) ;
background-image : -ms-linear-gradient ( top , rgb ( 238 , 238 , 238 ) 0 % , rgb ( 245 , 245 , 245 ) 100 % ) ;
}
2013-03-27 20:39:09 +04:00
# app-navigation > ul . open : hover {
2013-03-27 19:14:17 +04:00
-moz-box-shadow : inset 0 0 3px # ccc ; -webkit-box-shadow : inset 0 0 3px # ccc ; box-shadow : inset 0 0 3px # ccc ;
2013-02-14 20:40:29 +04:00
border-top : 1px solid # ccc ;
}
2013-03-27 20:39:09 +04:00
# app-navigation > ul . open ul {
2013-03-27 19:14:17 +04:00
display : block ;
}
2013-02-14 20:40:29 +04:00
/* drag and drop */
# app-navigation . drag-and-drop {
-moz-transition : padding-bottom 500ms ease 0s ;
-o-transition : padding-bottom 500ms ease 0s ;
-webkit-transition : padding-bottom 500ms ease 0s ;
-ms-transition : padding-bottom 500ms ease 0s ;
transition : padding-bottom 500ms ease 0s ;
padding-bottom : 40px ;
}
2013-03-27 19:14:17 +04:00
# app-navigation . personalblock > legend { /* TODO @Raydiation: still needed? */
padding : 10px 0 ; margin : 0 ;
}
# app-navigation . error {
color : # dd1144 ;
}
2013-02-14 20:40:29 +04:00
/* Part where the content will be loaded into */
2013-03-27 19:14:17 +04:00
# app-content {
height : 100 % ;
overflow-y : auto ;
}
2013-02-14 20:40:29 +04:00
/* settings area */
2013-03-27 19:14:17 +04:00
# app-settings {
position : fixed ;
width : 249px ;
bottom : 0 ;
border-top : 1px solid # ccc ;
}
# app-settings-header {
background-color : # eee ;
}
# app-settings-content {
display : none ;
padding : 10px ;
background-color : # eee ;
}
# app-settings . open # app-settings-content {
display : block ;
}
2013-02-14 20:40:29 +04:00
. settings-button {
2013-03-27 19:14:17 +04:00
display : block ;
height : 32px ;
width : 100 % ;
padding : 0 ;
margin : 0 ;
2013-04-02 13:52:57 +04:00
background-color : transparent ; background-image : url ( '../img/actions/settings.svg' ) ;
2013-03-27 19:14:17 +04:00
background-position : 10px center ; background-repeat : no-repeat ;
2013-02-14 20:40:29 +04:00
box-shadow : none ;
2013-03-27 19:14:17 +04:00
border : 0 ;
border-radius : 0 ;
}
. settings-button : hover {
background-color : # ddd ;
2013-02-14 20:40:29 +04:00
}
/* icons */
2013-04-02 13:52:57 +04:00
. folder-icon { background-image : url ( '../img/places/folder.svg' ) ; }
. delete-icon { background-image : url ( '../img/actions/delete.svg' ) ; }
. delete-icon : hover { background-image : url ( '../img/actions/delete-hover.svg' ) ; }
. edit-icon { background-image : url ( '../img/actions/rename.svg' ) ; }
2013-02-14 20:40:29 +04:00
/* buttons */
button . loading {
2013-04-02 13:52:57 +04:00
background-image : url ( '../img/loading.gif' ) ;
2013-03-27 19:14:17 +04:00
background-position : right 10px center ; background-repeat : no-repeat ;
2013-02-14 20:40:29 +04:00
padding-right : 30px ;
2013-03-17 00:19:57 +04:00
}
2013-06-14 16:08:04 +04:00
/* ---- BROWSER-SPECIFIC FIXES ---- */
:: -moz-focus-inner {
border : 0 ; /* remove dotted outlines in Firefox */
}