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 ; }
2013-07-23 18:00:28 +04:00
html , body { height : 100 % ; }
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 ;
2013-07-02 01:47:59 +04:00
}
2013-07-09 20:02:51 +04:00
# body-login {
2013-07-23 23:33:15 +04:00
text-align : center ;
background : # 1d2d44 ; /* Old browsers */
background : url ( '../img/noise.png' ) , -moz-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* FF3.6+ */
background : url ( '../img/noise.png' ) , -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 % , # 35537a ) , color-stop ( 100 % , # 1d2d44 ) ) ; /* Chrome,Safari4+ */
background : url ( '../img/noise.png' ) , -webkit-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* Chrome10+,Safari5.1+ */
background : url ( '../img/noise.png' ) , -o-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* Opera11.10+ */
background : url ( '../img/noise.png' ) , -ms-linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* IE10+ */
background : url ( '../img/noise.png' ) , linear-gradient ( top , # 35537a 0 % , # 1d2d44 100 % ) ; /* W3C */
filter : progid : DXImageTransform . Microsoft . gradient ( startColorstr = '#35537a' , endColorstr = '#1d2d44' , GradientType = 0 ) ; /* IE6-9 */
2013-07-09 20:02:51 +04:00
}
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-09-03 18:52:15 +04:00
# header . avatardiv {
2013-09-03 23:44:32 +04:00
float : left ;
display : inline-block ;
2013-08-02 10:03:51 +04:00
}
2013-03-06 15:38:43 +04:00
2013-10-04 04:27:53 +04:00
# header . avatardiv img {
opacity : 1 ;
}
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 ,
2013-08-15 15:05:26 +04:00
# quota , . 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 ;
2013-10-03 17:35:42 +04:00
border-radius : 3px ;
2012-12-05 03:25:58 +04:00
}
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 ; }
2013-10-04 19:35:46 +04:00
# quota {
cursor : default ;
margin : 30px ;
}
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 ,
2013-08-15 15:05:26 +04:00
# quota , select , . pager li a {
2013-10-03 17:35:42 +04:00
width : auto ;
padding : . 4em ;
background-color : rgba ( 240 , 240 , 240 , . 9 ) ;
font-weight : bold ;
color : # 555 ;
border : 1px solid rgba ( 190 , 190 , 190 , . 9 ) ;
cursor : pointer ;
border-radius : 3px ;
2012-12-05 03:25:58 +04:00
}
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-10-03 17:35:42 +04:00
# header . button {
border : 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-10-04 21:21:36 +04:00
background-color : rgba ( 230 , 230 , 230 , . 9 ) ;
2013-04-03 20:45:03 +04:00
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 {
2013-07-23 19:10:36 +04:00
border : 1px solid # 1d2d44 ;
background : # 35537a ;
color : # ddd ;
2012-12-10 18:08:58 +04:00
}
. 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 {
2013-07-23 19:10:36 +04:00
border : 1px solid # 1d2d44 ;
background : # 304d76 ;
color : # fff ;
2012-12-10 18:08:58 +04:00
}
. primary : active , input [ type = "submit" ] . primary : active , input [ type = "button" ] . primary : active , button . primary : active , . button . primary : active {
2013-07-23 19:10:36 +04:00
border : 1px solid # 1d2d44 ;
background : # 1d2d44 ;
color : # bbb ;
2012-12-10 18:08:58 +04:00
}
2012-12-05 03:37:00 +04:00
2013-10-03 17:35:42 +04:00
. searchbox input [ type = "search" ] {
font-size : 1 . 2em ;
padding : . 2em . 5em . 2em 1 . 5em ;
background : # fff url ( '../img/actions/search.svg' ) no-repeat . 5em center ;
border : 0 ;
border-radius : 1em ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ; filter : alpha ( opacity = 70 ) ; opacity : . 7 ;
margin-top : 10px ;
float : right ;
}
input [ type = "submit" ] . enabled {
background : # 66f866 ;
border : 1px solid # 5e5 ;
}
2013-08-14 22:41:20 +04:00
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 {
2013-10-04 09:41:16 +04:00
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
2013-08-30 12:20:39 +04:00
position : fixed ;
2013-10-04 09:41:16 +04:00
height : 44px ;
2013-08-30 12:20:39 +04:00
width : 100 % ;
2013-10-04 09:41:16 +04:00
padding-right : 75px ;
2013-08-30 12:20:39 +04:00
margin : 0 ;
background : # eee ;
border-bottom : 1px solid # e7e7e7 ;
z-index : 50 ;
}
2013-10-04 09:41:16 +04:00
# controls . button ,
# controls button ,
# controls input [ type = 'submit' ] ,
# controls input [ type = 'text' ] ,
# controls input [ type = 'password' ] ,
# controls select {
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
2013-08-30 12:20:39 +04:00
display : inline-block ;
2013-10-04 09:41:16 +04:00
height : 36px ;
padding : 7px 10px
2013-02-04 21:30:49 +04:00
}
2013-01-18 16:58:50 +04:00
# content { position : relative ; height : 100 % ; width : 100 % ; }
2013-10-04 09:41:16 +04:00
# content . hascontrols {
position : relative ;
top : 45px ;
}
2013-01-18 16:58:50 +04:00
# content-wrapper {
2013-07-09 22:19:25 +04:00
position : absolute ; height : 100 % ; width : 100 % ; padding-top : 3 . 5em ; padding-left : 80px ;
2013-01-18 16:58:50 +04:00
-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
2013-08-31 19:12:07 +04:00
# emptycontent {
2013-10-03 17:35:42 +04:00
font-size : 1 . 5em ;
font-weight : bold ;
color : # 888 ;
2013-08-31 19:25:11 +04:00
position : absolute ;
text-align : center ;
top : 50 % ;
width : 100 % ;
2013-08-31 19:12:07 +04:00
}
2013-07-23 17:47:07 +04:00
2011-04-19 04:00:15 +04:00
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
2013-07-23 17:47:07 +04:00
/* Some whitespace to the top */
2013-07-22 15:16:01 +04:00
# body-login # header {
padding-top : 100px ;
}
2013-07-23 18:00:28 +04:00
/* Fix background gradient */
# body-login {
2013-07-23 23:25:07 +04:00
background-attachment : fixed ;
2013-07-23 18:00:28 +04:00
}
2013-07-23 17:47:07 +04:00
/* Dark subtle label text */
# body-login p . info ,
# body-login form fieldset legend ,
# body-login # datadirContent label ,
# body-login form input [ type = "checkbox" ] + label {
text-align : center ;
2013-08-17 12:26:30 +04:00
color : # ccc ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" ;
filter : alpha ( opacity = 60 ) ;
opacity : . 6 ;
2013-07-23 17:47:07 +04:00
}
2012-12-07 20:41:52 +04:00
# body-login div . buttons { text-align : center ; }
2013-07-22 13:58:26 +04:00
# body-login p . info {
width : 22em ;
2013-07-22 15:16:01 +04:00
margin : 0 auto ;
2013-07-23 19:13:03 +04:00
padding-top : 20px ;
2013-07-22 13:58:26 +04:00
}
# body-login p . info a {
font-weight : bold ;
}
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
2013-07-22 13:58:26 +04:00
# body-login form { width : 22 em ; margin : 2 em auto 2 em ; padding : 0 ; }
# body-login form fieldset {
margin-bottom : 20px ;
text-align : left ;
}
# body-login form # adminaccount { margin-bottom : 5 px ; }
# body-login form fieldset legend , # datadirContent label {
2013-07-23 17:47:07 +04:00
width : 100 % ;
font-weight : bold ;
}
# body-login # datadirContent label {
display : block ;
margin : 0 ;
}
# body-login form # datadirField legend {
margin-bottom : 15px ;
}
# body-login # showAdvanced {
padding : 13px ; /* increase clickable area of Advanced dropdown */
}
# body-login # showAdvanced img {
vertical-align : bottom ; /* adjust position of Advanced dropdown arrow */
margin-left : -4px ;
2012-12-10 18:08:58 +04:00
}
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
2013-07-23 19:03:44 +04:00
/* General new input field look */
# body-login input [ type = "text" ] ,
# body-login input [ type = "password" ] ,
# body-login input [ type = "email" ] {
2013-07-23 20:14:37 +04:00
border : 1px solid # 323233 ;
2013-10-03 17:35:42 +04:00
border-radius : 5px ;
2013-07-23 19:03:44 +04:00
}
2013-10-04 18:37:20 +04:00
# body-login input [ type = 'submit' ] {
border-radius : 5px ;
}
2013-07-23 19:03:44 +04:00
2012-12-10 18:08:58 +04:00
/* Nicely grouping input field sets */
2013-07-23 19:03:44 +04:00
# body-login . grouptop input {
2013-07-22 14:40:28 +04:00
margin-bottom : 0 ;
border-bottom : 0 ;
border-bottom-left-radius : 0 ;
border-bottom-right-radius : 0 ;
2012-12-10 18:08:58 +04:00
}
2013-07-23 19:03:44 +04:00
# body-login . groupmiddle input {
2013-07-22 14:40:28 +04:00
margin-top : 0 ;
margin-bottom : 0 ;
border-top : 0 ;
border-bottom : 0 ;
border-radius : 0 ;
2013-10-03 17:35:42 +04:00
box-shadow : 0 1px 0 rgba ( 0 , 0 , 0 , . 1 ) inset ! important ;
2012-12-10 18:08:58 +04:00
}
2013-07-23 19:03:44 +04:00
# body-login . groupbottom input {
2013-07-22 14:40:28 +04:00
margin-top : 0 ;
border-top : 0 ;
border-top-right-radius : 0 ;
border-top-left-radius : 0 ;
2013-10-03 17:35:42 +04:00
box-shadow : 0 1px 0 rgba ( 0 , 0 , 0 , . 1 ) inset ! important ;
2012-12-10 18:08:58 +04:00
}
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. */
2013-07-22 13:58:26 +04:00
# body-login . groupmiddle label , # body-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-07-22 13:58:26 +04:00
# body-login form label . infield { /* labels are ellipsized when too long, keep them short */
2013-02-09 20:13:02 +04:00
position : absolute ; width : 90 % ; padding-left : 1 . 4em ;
font-size : 19px ; color : # aaa ;
white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ;
}
2013-07-22 13:58:26 +04:00
# body-login # databaseField . infield { padding-left : 0 ; }
# body-login form input [ type = "checkbox" ] + label {
position : relative ;
margin : 0 ;
font-size : 1em ;
2013-07-22 15:28:30 +04:00
padding : 14px ;
padding-left : 28px ;
margin-left : -28px ;
2013-07-22 13:58:26 +04:00
}
# body-login form . errors { background : #fed7d7 ; border : 1 px solid #f00 ; list-style-indent : inside ; margin : 0 0 2 em ; padding : 1 em ; }
# body-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-08-17 12:26:30 +04:00
# body-login # remember_login : hover + label ,
# body-login # remember_login : focus + label {
color : # fff ! important ;
}
# body-login # showAdvanced > img {
height : 16px ;
width : 16px ;
padding : 4px ;
box-sizing : border-box ;
}
2013-08-17 13:56:52 +04:00
# body-login p . info a , # body-login # showAdvanced {
2013-08-17 12:26:30 +04:00
color : # ccc ;
}
2013-08-17 13:56:52 +04:00
# body-login p . info a : hover , # body-login p . info a : focus {
2013-08-17 12:26:30 +04:00
color : # fff ;
}
2013-08-17 13:56:52 +04:00
# body-login p . info {
2013-08-17 12:26:30 +04:00
white-space : nowrap ;
}
2013-02-07 20:04:03 +04:00
/* Show password toggle */
2013-07-22 16:20:32 +04:00
# show , # dbpassword {
position : absolute ;
right : 1em ;
top : . 8em ;
float : right ;
}
# show , # dbpassword , # personal-show {
display : none ;
}
# show + label , # dbpassword + label {
right : 21px ;
top : 15px ! important ;
margin : -14px ! important ;
padding : 14px ! 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 ;
}
2013-04-13 08:15:30 +04:00
# show + label , # dbpassword + label , # personal-show + label {
2013-07-22 16:20:32 +04:00
position : absolute ! important ;
height : 14px ;
width : 24px ;
background-image : url ( "../img/actions/toggle.png" ) ;
background-repeat : no-repeat ;
background-position : center ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" ;
filter : alpha ( opacity = 30 ) ;
opacity : . 3 ;
}
# pass2 , input [ name = "personal-password-clone" ] {
padding : . 6em 2 . 5em . 4em . 4em ;
width : 8em ;
}
# personal-show + label {
margin-top : 1em ;
margin-left : -3em ;
}
# passwordbutton {
margin-left : . 5em ;
2013-02-07 20:04:03 +04:00
}
2013-02-07 20:02:43 +04:00
/* Database selector */
2013-07-24 19:06:52 +04:00
# body-login form # selectDbType { text-align : center ; white-space : nowrap ; }
2013-07-22 13:58:26 +04:00
# body-login form # selectDbType label {
2012-12-10 18:08:58 +04:00
position : static ; margin : 0 -3px 5px ; padding : . 4em ;
font-size : 12px ; font-weight : bold ; background : # f8f8f8 ; color : # 888 ; cursor : pointer ;
2013-10-03 17:35:42 +04:00
border : 1px solid # ddd ;
2012-12-10 18:08:58 +04:00
}
2013-07-22 13:58:26 +04:00
# body-login form # selectDbType label . ui-state-hover , # body-login form # selectDbType label . ui-state-active { color : #000 ; background-color : #e8e8e8 ; }
2012-12-10 18:08:58 +04:00
2013-07-22 16:55:39 +04:00
/* Warnings and errors are the same */
2013-08-18 19:37:22 +04:00
# body-login . warning , # body-login . update , # body-login . error {
2013-04-17 19:15:34 +04:00
display : block ;
2013-07-22 16:55:39 +04:00
padding : 10px ;
2013-10-03 17:55:42 +04:00
color : # d2322d ;
2013-07-22 16:55:39 +04:00
background-color : rgba ( 0 , 0 , 0 , . 3 ) ;
2013-10-07 20:06:27 +04:00
text-align : left ;
2013-10-03 17:35:42 +04:00
border-radius : 3px ;
2013-07-22 16:55:39 +04:00
cursor : default ;
2012-12-10 18:08:58 +04:00
}
2013-08-18 19:37:22 +04:00
# body-user . warning , # body-settings . warning {
2013-10-03 17:35:42 +04:00
margin-top : 8px ;
padding : 5px ;
background : # fdd ;
border-radius : 3px ;
2013-08-18 19:37:22 +04:00
}
2013-04-17 19:15:34 +04:00
. warning legend ,
2013-07-22 16:55:39 +04:00
. warning a ,
. error a {
2013-10-03 17:55:42 +04:00
color : # d2322d ! important ;
2013-07-22 16:55:39 +04:00
font-weight : bold ;
}
2013-07-31 20:08:29 +04:00
. error pre {
white-space : pre-wrap ;
text-align : left ;
}
2013-08-16 02:56:09 +04:00
. error-wide {
width : 800px ;
2013-08-18 12:30:21 +04:00
margin-left : -250px ;
2013-08-16 02:56:09 +04:00
}
2013-07-22 16:55:39 +04:00
/* Fixes for log in page, TODO should be removed some time */
# body-login . update ,
# body-login . error {
margin : 35px auto ;
}
# body-login . warning {
margin : 0 7px 5px ;
2013-04-17 19:15:34 +04:00
}
2013-07-23 17:47:07 +04:00
# body-login . warning legend {
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ;
filter : alpha ( opacity = 100 ) ;
opacity : 1 ;
}
2013-07-22 16:55:39 +04:00
# body-login a . warning {
cursor : pointer ;
}
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 ; }
2013-07-22 15:50:35 +04:00
/* Log in and install button */
# body-login input {
font-size : 1 . 5em ;
}
# body-login input [ type = "text" ] ,
# body-login input [ type = "password" ] {
width : 13em ;
}
# body-login input . login {
width : auto ;
float : right ;
2013-07-23 19:17:29 +04:00
}
# body-login input [ type = "submit" ] {
padding : 10px 20px ; /* larger log in and installation buttons */
2013-07-22 15:50:35 +04:00
}
# remember_login {
2013-07-22 15:53:00 +04:00
margin : 18px 5px 0 18px ;
2013-07-22 15:50:35 +04:00
vertical-align : text-bottom ;
}
2013-07-22 15:16:01 +04:00
/* Sticky footer */
# body-login . wrapper {
min-height : 100 % ;
2013-07-23 19:13:03 +04:00
margin : 0 auto -70px ;
2013-07-22 16:55:39 +04:00
width : 300px ;
2013-07-22 15:16:01 +04:00
}
# body-login footer , # body-login . push {
2013-07-23 19:13:03 +04:00
height : 70px ;
2013-07-23 18:00:28 +04:00
}
2013-07-22 15:16:01 +04:00
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-07-09 22:19:25 +04:00
position : fixed ;
float : left ;
width : 80px ;
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-03-21 21:46:59 +04:00
overflow : hidden ; box-sizing : border-box ; -moz-box-sizing : border-box ;
2013-07-10 00:02:39 +04:00
/* prevent ugly selection effect on accidental selection */
-webkit-user-select : none ; -moz-user-select : none ; -ms-user-select : none ; user-select : none ;
2013-01-31 17:14:12 +04:00
}
2013-07-09 22:19:25 +04:00
# navigation : hover {
overflow-y : auto ; /* show scrollbar only on hover */
2013-01-31 17:14:12 +04:00
}
2013-08-30 13:17:31 +04:00
# apps {
height : 100 % ;
}
2013-04-10 17:44:50 +04:00
# navigation a span {
2013-07-09 22:19:25 +04:00
display : block ;
text-decoration : none ;
font-size : 11px ;
text-align : center ;
color : # fff ;
2013-04-05 03:17:52 +04:00
white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; /* ellipsize long app names */
2013-07-09 23:21:29 +04:00
padding-bottom : 10px ;
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-10 18:00:28 +04:00
# navigation . icon {
2013-07-09 22:19:25 +04:00
display : block ;
width : 32px ;
height : 32px ;
margin-left : 24px ;
2013-07-09 23:21:29 +04:00
padding : 10px 0 4px ;
}
# navigation li : first-child . icon { /* special rule for Files icon as it's first */
padding-top : 20px ;
2013-04-10 18:00:28 +04:00
}
2013-02-14 20:06:08 +04:00
2013-08-30 13:17:31 +04:00
/* Apps management as sticky footer, less obtrusive in the list */
# navigation . wrapper {
min-height : 100 % ;
margin : 0 auto -72px ;
}
# apps-management , # navigation . push {
height : 70px ;
}
2013-08-07 20:18:09 +04:00
# apps-management {
2013-08-30 13:17:31 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" ;
filter : alpha ( opacity = 60 ) ;
2013-08-07 20:18:09 +04:00
opacity : . 6 ;
}
2013-08-30 13:17:31 +04:00
# apps-management . icon {
padding-bottom : 0 ;
}
2013-08-07 20:18:09 +04:00
2013-02-14 20:06:08 +04:00
/* USER MENU */
2013-09-03 23:44:32 +04:00
# settings {
float : right ;
margin-top : 7px ;
margin-left : 10px ;
color : # bbb ;
}
# expand {
padding : 15px 15px 15px 5px ;
cursor : pointer ;
font-weight : bold ;
}
2012-10-27 20:58:16 +04:00
# 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-10-03 17:35:42 +04:00
box-shadow : 0 0 7px rgb ( 29 , 45 , 68 ) ;
2013-07-09 23:57:47 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
2013-07-10 00:02:39 +04:00
/* prevent ugly selection effect on accidental selection */
-webkit-user-select : none ; -moz-user-select : none ; -ms-user-select : none ; user-select : none ;
2013-02-06 19:03:01 +04:00
}
2013-02-14 13:59:30 +04:00
# expanddiv a {
2013-07-09 23:57:47 +04:00
display : block ;
height : 40px ;
color : # fff ;
padding : 4px 12px 0 ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ;
filter : alpha ( opacity = 70 ) ;
opacity : . 7 ;
2013-08-16 01:25:20 +04:00
-moz-box-sizing : border-box ;
box-sizing : border-box ;
2013-07-09 23:57:47 +04:00
}
# expanddiv a img {
margin-bottom : -3px ;
margin-right : 6px ;
2013-02-14 13:59:30 +04:00
}
2013-07-02 01:47:59 +04:00
# expanddiv a : hover , # expanddiv a : focus , # expanddiv a : active {
2013-07-09 23:57:47 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ;
filter : alpha ( opacity = 100 ) ;
opacity : 1 ;
2013-07-02 01:47:59 +04:00
}
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 ; }
2013-07-29 13:34:38 +04:00
. inlineblock { display : inline-block ; }
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-10-03 17:35:42 +04:00
# notification , # update-notification {
z-index : 101 ;
background-color : # fc4 ;
border : 0 ;
padding : 0 . 7em . 3em ;
display : none ;
position : relative ;
top : 0 ;
border-bottom-left-radius : 3px ;
border-bottom-right-radius : 3px ;
}
2013-04-24 22:17:39 +04:00
# 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-10-04 19:35:46 +04:00
# body-settings h2 {
font-size : 20px ;
font-weight : normal ;
margin-bottom : 7px ;
}
2013-06-11 16:51:06 +04:00
# body-settings . personalblock , # body-settings . helpblock {
2013-10-04 19:35:46 +04:00
padding : 30px ;
2013-06-11 16:51:06 +04:00
color : # 555 ;
2013-10-04 19:35:46 +04:00
border-top : 1px solid # ddd ;
2013-06-11 16:51:06 +04:00
}
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-08-15 15:05:26 +04:00
# quota div {
2013-06-11 16:51:06 +04:00
padding : 0 ;
background-color : rgb ( 220 , 220 , 220 ) ;
font-weight : normal ;
white-space : nowrap ;
2013-10-03 17:35:42 +04:00
border-bottom-left-radius : 3px ;
border-top-left-radius : 3px ; }
2012-12-07 20:41:52 +04:00
# quotatext { padding : .6 em 1 em ; }
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 ; }
. 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-08-31 21:21:51 +04:00
# oc-dialog-filepicker-content . filelist li {
position : relative ;
}
# oc-dialog-filepicker-content . filelist . filename {
position : absolute ;
top : 8px ;
}
# oc-dialog-filepicker-content . filelist img {
margin : 2px 1em 0 4px ;
}
# oc-dialog-filepicker-content . filelist . date {
float : right ;
margin-right : 1em ;
margin-top : 8px ;
}
2013-05-17 06:54:08 +04:00
# 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-06-17 15:20:02 +04:00
2013-05-16 02:23:05 +04:00
. loading { background : url ( '../img/loading.gif' ) no-repeat center ; cursor : wait ; }
2013-06-17 15:20:02 +04:00
. move2trash { /* decrease spinner size */
width : 16px ;
height : 16px ;
}
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-07-30 16:43:48 +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 : 100 ; }
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-07-10 06:39:22 +04:00
. popup . close { position : absolute ; top : 0.2 em ; right : 0.2 em ; height : 20 px ; width : 20 px ; background : url ( '../img/actions/close.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-10-04 09:41:16 +04:00
. help-includes {
overflow : hidden ;
width : 100 % ;
height : 100 % ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
padding-top : 44px ;
}
2013-02-09 14:34:25 +04:00
. 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-10-04 09:41:16 +04:00
div . crumb {
float : left ;
display : block ;
background : url ( '../img/breadcrumb.svg' ) no-repeat right center ;
height : 44px ;
}
div . crumb a {
position : relative ;
top : 12px ;
padding : 14px 24px 14px 17px ;
color : # 555 ;
}
div . crumb : first-child a {
position : relative ;
top : 13px ;
}
div . crumb . last {
font-weight : bold ;
margin-right : 10px ;
}
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 ;
}