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 ; }
2014-03-19 19:45:10 +04:00
a , a * , input , input * , select , . button span , label { cursor : pointer ; }
2011-08-10 18:02:28 +04:00
ul { list-style : none ; }
2014-04-16 18:26:41 +04:00
body {
2014-08-01 17:37:36 +04:00
background-color : # ffffff ;
2014-06-03 21:07:08 +04:00
font-weight : normal ;
font-size : . 8em ;
line-height : 1 . 6em ;
2014-06-04 12:57:49 +04:00
font-family : 'Open Sans' , Frutiger , Calibri , 'Myriad Pro' , Myriad , sans-serif ;
2014-04-16 18:26:41 +04:00
color : # 000 ;
height : auto ;
}
2011-08-08 19:57:45 +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 */
2014-05-23 16:15:36 +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 */
2013-07-23 23:33:15 +04:00
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
2014-04-16 17:53:38 +04:00
2013-10-04 04:27:53 +04:00
2013-12-05 18:19:46 +04:00
# nojavascript {
2014-09-08 20:07:20 +04:00
position : fixed ;
2013-12-05 18:19:46 +04:00
top : 0 ;
bottom : 0 ;
2014-09-11 18:12:43 +04:00
height : 100 % ;
2013-12-05 18:19:46 +04:00
width : 100 % ;
2014-09-11 18:12:43 +04:00
z-index : 9000 ;
2013-12-05 18:19:46 +04:00
text-align : center ;
2014-09-08 19:55:53 +04:00
background-color : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
color : # fff ;
2013-12-05 18:19:46 +04:00
line-height : 125 % ;
2014-09-08 19:55:53 +04:00
font-size : 24px ;
2013-12-05 18:19:46 +04:00
}
# nojavascript div {
2014-09-08 19:55:53 +04:00
display : block ;
position : relative ;
2013-12-05 18:19:46 +04:00
width : 50 % ;
2014-09-08 20:07:20 +04:00
top : 35 % ;
2014-09-08 19:55:53 +04:00
margin : 0px auto ;
2013-12-05 18:19:46 +04:00
}
2013-12-05 21:06:20 +04:00
# nojavascript a {
2014-09-08 19:55:53 +04:00
color : # fff ;
border-bottom : 2px dotted # fff ;
2013-12-05 21:06:20 +04:00
}
2014-09-08 19:55:53 +04:00
# nojavascript a : hover ,
# nojavascript a : focus {
color : # ddd ;
2013-12-05 21:06:20 +04:00
}
2013-12-05 18:19:46 +04:00
2013-10-10 22:29:13 +04:00
2011-08-08 19:57:45 +04:00
/* INPUTS */
2013-11-18 19:14:13 +04:00
input [ type = "text" ] ,
input [ type = "password" ] ,
input [ type = "search" ] ,
input [ type = "number" ] ,
input [ type = "email" ] ,
input [ type = "url" ] ,
input [ type = "time" ] ,
2014-08-28 18:53:19 +04:00
input [ type = "date" ] ,
2013-11-18 19:14:13 +04:00
textarea ,
select ,
2013-04-03 19:55:31 +04:00
button , . button ,
2014-03-31 14:27:26 +04:00
input [ type = "submit" ] ,
input [ type = "button" ] ,
2013-11-18 19:14:13 +04:00
# quota ,
. pager li a {
2014-03-27 20:13:36 +04:00
width : 130px ;
margin : 3px 3px 3px 0 ;
padding : 7px 6px 5px ;
font-size : 13px ;
2014-04-06 02:16:14 +04:00
background-color : # fff ;
2014-03-27 20:13:36 +04:00
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
}
2013-11-18 19:14:13 +04:00
input [ type = "hidden" ] {
height : 0 ;
width : 0 ;
}
input [ type = "text" ] ,
input [ type = "password" ] ,
input [ type = "search" ] ,
input [ type = "number" ] ,
input [ type = "email" ] ,
input [ type = "url" ] ,
input [ type = "time" ] ,
2013-11-18 17:51:43 +04:00
textarea {
2013-10-20 22:22:41 +04:00
background : # fff ;
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-11-18 19:14:13 +04:00
input [ type = "text" ] ,
input [ type = "password" ] ,
input [ type = "search" ] ,
input [ type = "number" ] ,
input [ type = "email" ] ,
input [ type = "url" ] ,
input [ type = "time" ] {
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-11-18 17:51:43 +04:00
input [ type = "time" ] : hover , input [ type = "time" ] : focus , input [ type = "time" ] : active ,
2013-03-06 15:38:43 +04:00
textarea : hover , textarea : focus , textarea : active {
2013-10-20 23:38:14 +04:00
color : # 333 ;
2013-03-06 15:38:43 +04:00
-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-11-18 17:51:43 +04:00
input [ type = "time" ] {
2013-11-18 22:44:56 +04:00
width : initial ;
height : 31px ;
2013-11-18 17:51:43 +04:00
-moz-box-sizing : border-box ; box-sizing : border-box ;
}
2014-05-02 17:24:23 +04:00
/* correctly align images inside of buttons */
input img , button img , . button img {
vertical-align : text-bottom ;
}
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 */
2014-05-23 19:43:20 +04:00
:: -webkit-scrollbar {
width : 8px ;
}
:: -webkit-scrollbar-track-piece {
background-color : transparent ;
}
:: -webkit-scrollbar-thumb {
background : # ccc ;
}
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 ;
2014-06-04 18:24:39 +04:00
min-width : 25px ;
2014-03-31 14:27:26 +04:00
padding : 5px ;
2013-10-03 17:35:42 +04:00
background-color : rgba ( 240 , 240 , 240 , . 9 ) ;
font-weight : bold ;
color : # 555 ;
border : 1px solid rgba ( 190 , 190 , 190 , . 9 ) ;
cursor : pointer ;
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 ,
2013-11-12 14:31:58 +04:00
a . disabled , a . disabled : hover , a . disabled : focus ,
textarea : disabled {
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 ;
2014-03-03 17:07:44 +04:00
background-color : # 35537a ;
2013-07-23 19:10:36 +04:00
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 ;
2014-03-03 17:07:44 +04:00
background-color : # 304d76 ;
2013-07-23 19:10:36 +04:00
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 ;
2014-03-03 17:07:44 +04:00
background-color : # 1d2d44 ;
2013-07-23 19:10:36 +04:00
color : # bbb ;
2012-12-10 18:08:58 +04:00
}
2012-12-05 03:37:00 +04:00
2014-02-20 14:33:46 +04:00
/* Searchbox */
2013-10-03 17:35:42 +04:00
. searchbox input [ type = "search" ] {
2014-02-20 14:33:46 +04:00
position : relative ;
2013-10-03 17:35:42 +04:00
font-size : 1 . 2em ;
2014-02-20 14:33:46 +04:00
padding-left : 1 . 5em ;
2013-10-03 17:35:42 +04:00
background : # fff url ( '../img/actions/search.svg' ) no-repeat . 5em center ;
border : 0 ;
2014-02-20 14:33:46 +04:00
border-radius : 2em ;
2013-10-03 17:35:42 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ; filter : alpha ( opacity = 70 ) ; opacity : . 7 ;
2014-02-20 14:33:46 +04:00
margin-top : 6px ;
2013-10-03 17:35:42 +04:00
float : right ;
}
2014-02-20 14:33:46 +04:00
2013-10-03 17:35:42 +04:00
input [ type = "submit" ] . enabled {
2014-03-03 17:07:44 +04:00
background-color : # 66f866 ;
2013-10-03 17:35:42 +04:00
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 ;
2014-06-06 14:22:09 +04:00
top : 45px ;
2013-11-29 00:36:43 +04:00
right : 0 ;
2014-06-06 14:22:09 +04:00
left : 0 ;
2013-10-04 09:41:16 +04:00
height : 44px ;
2013-11-19 18:53:49 +04:00
width : 100 % ;
padding : 0 ;
2013-08-30 12:20:39 +04:00
margin : 0 ;
2014-07-02 17:26:38 +04:00
background-color : rgba ( 255 , 255 , 255 , . 95 ) ;
2013-08-30 12:20:39 +04:00
z-index : 50 ;
2014-06-05 15:12:07 +04:00
-webkit-user-select : none ;
-moz-user-select : none ;
-ms-user-select : none ;
user-select : none ;
2013-08-30 12:20:39 +04:00
}
2014-06-06 14:22:09 +04:00
/* position controls for apps with app-navigation */
# app-navigation + # app-content # controls {
left : 250px ;
}
2014-06-18 22:10:28 +04:00
. viewer-mode # app-navigation + # app-content # controls {
left : 0 ;
}
2014-06-06 14:22:09 +04:00
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
2013-10-28 23:22:06 +04:00
# controls . button . hidden {
display : none ;
}
2014-06-05 15:12:07 +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 {
2014-06-05 15:12:07 +04:00
position : absolute ;
height : 100 % ;
width : 100 % ;
2014-07-03 00:46:08 +04:00
overflow-x : hidden ; /* prevent horizontal scrollbar */
2014-06-05 15:12:07 +04:00
padding-top : 45px ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
2012-10-27 21:42:25 +04:00
}
2014-08-28 20:17:50 +04:00
/* allow horizontal scrollbar for personal and admin settings */
# body-settings : not ( . snapjs-left ) . app-settings {
overflow-x : auto ;
}
2011-03-02 01:20:16 +03:00
2013-08-31 19:12:07 +04:00
# emptycontent {
2014-06-05 13:29:56 +04:00
font-size : 16px ;
2013-10-03 17:35:42 +04:00
color : # 888 ;
2013-08-31 19:25:11 +04:00
position : absolute ;
text-align : center ;
2014-06-07 14:08:12 +04:00
top : 30 % ;
2013-08-31 19:25:11 +04:00
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
# body-login {
2014-05-12 15:40:04 +04:00
background-attachment : fixed ; /* fix background gradient */
height : 100 % ; /* fix sticky footer */
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 ,
2013-10-07 19:38:27 +04:00
# body-login form fieldset . warning-info ,
2013-07-23 17:47:07 +04:00
# 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
}
2014-05-28 13:29:22 +04:00
# body-login . update h2 {
2014-05-27 18:36:21 +04:00
font-weight : bold ;
font-size : 18px ;
margin-bottom : 30px ;
}
# body-login . infogroup {
margin-bottom : 15px ;
}
2013-11-28 00:58:38 +04:00
# body-login p # message img {
vertical-align : middle ;
padding : 5px ;
}
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-10-06 23:35:24 +04:00
padding : 13px ;
margin : -13px ;
2013-07-22 13:58:26 +04:00
}
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 ;
}
2013-03-13 14:03:52 +04:00
# body-login form # adminaccount { margin-bottom : 15 px ; }
2013-07-22 13:58:26 +04:00
# 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
}
2013-03-13 14:03:52 +04:00
/* strengthify wrapper */
# body-login . strengthify-wrapper {
display : inline-block ;
position : relative ;
left : 15px ;
top : -21px ;
width : 252px ;
}
/* tipsy for the strengthify wrapper looks better with following font settings */
# body-login . tipsy-inner {
font-weight : bold ;
color : # ccc ;
}
2012-12-11 21:54:43 +04:00
/* Icons for username and password fields to better recognize them */
2014-04-16 19:43:15 +04:00
# adminlogin ,
# adminpass ,
input [ name = 'adminpass-clone' ] ,
# user ,
# password ,
input [ name = 'password-clone' ] {
2014-04-01 19:18:03 +04:00
width : 223px ! important ;
padding-left : 36px ! important ;
}
2014-06-03 01:39:27 +04:00
# adminlogin + label + img ,
2014-04-01 19:18:03 +04:00
# adminpass-icon ,
2014-06-03 01:39:27 +04:00
# user + label + img ,
2014-04-01 19:18:03 +04:00
# password-icon {
position : absolute ;
2014-05-06 14:07:53 +04:00
left : 16px ;
2014-07-04 15:38:30 +04:00
top : 22px ;
2014-04-01 19:18:03 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" ;
filter : alpha ( opacity = 30 ) ;
opacity : . 3 ;
}
# adminpass-icon , # password-icon {
2014-07-04 15:38:30 +04:00
top : 17px ;
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" ] ,
2014-02-27 15:13:09 +04:00
# body-login input [ type = "email" ] ,
# body-login input [ type = "submit" ] {
border : none ;
2013-10-04 18:37:20 +04:00
border-radius : 5px ;
}
2013-07-23 19:03:44 +04:00
2012-12-10 18:08:58 +04:00
/* Nicely grouping input field sets */
2014-05-06 14:07:53 +04:00
. grouptop ,
. groupmiddle ,
. groupbottom {
position : relative ;
}
2014-07-24 16:03:40 +04:00
# body-login . grouptop input ,
. 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
}
2014-07-24 16:03:40 +04:00
# body-login . groupmiddle input ,
. 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
}
2014-07-24 16:03:40 +04:00
# body-login . groupbottom input ,
. 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
2014-05-06 14:07:53 +04:00
/* keep the labels for screen readers but hide them since we use placeholders */
label . infield {
display : none ;
2013-02-09 20:13:02 +04:00
}
2014-05-06 14:07:53 +04:00
2013-07-22 13:58:26 +04:00
# body-login form input [ type = "checkbox" ] + label {
position : relative ;
margin : 0 ;
2013-07-22 15:28:30 +04:00
padding : 14px ;
padding-left : 28px ;
margin-left : -28px ;
2014-07-04 15:39:50 +04:00
vertical-align : middle ;
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 {
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 ;
}
2014-06-03 00:56:50 +04:00
# body-login footer . 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 ;
2014-05-06 14:14:11 +04:00
height : 20px ;
2013-07-22 16:20:32 +04:00
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 {
2014-05-06 14:44:16 +04:00
height : 14px ;
margin-top : 14px ;
margin-left : -36px ;
2013-07-22 16:20:32 +04:00
}
# 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 ;
background-color : rgba ( 0 , 0 , 0 , . 3 ) ;
2014-08-15 12:51:39 +04:00
color : # fff ;
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
2013-10-24 19:46:52 +04:00
# body-login . update {
2014-07-02 18:15:13 +04:00
width : inherit ;
2013-10-24 19:46:52 +04:00
text-align : center ;
color : # ccc ;
}
2014-07-02 18:15:13 +04:00
# body-login . v-align {
width : inherit ;
}
2013-11-28 02:07:19 +04:00
# body-login . update img . float-spinner {
float : left ;
}
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 {
2014-08-18 18:40:32 +04:00
color : # fff ! important ;
2014-08-15 12:51:39 +04:00
font-weight : bold ! important ;
2013-07-22 16:55:39 +04:00
}
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 {
2014-04-16 17:31:15 +04:00
width : 700px ;
margin-left : -200px ! important ;
2013-08-16 02:56:09 +04:00
}
2014-08-22 00:22:35 +04:00
. error-wide . button {
color : black ! important ;
}
2014-08-14 20:48:34 +04:00
. warning-input {
border-color : # cc3333 ! important ;
}
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 ;
}
2014-06-24 10:39:43 +04:00
/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
# body-login . updateProgress . error {
margin-top : 10px ;
margin-bottom : 10px ;
}
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 {
2014-04-01 19:18:03 +04:00
font-size : 20px ;
margin : 5px ;
2014-06-03 12:02:11 +04:00
padding : 11px 10px 9px ;
2013-07-22 15:50:35 +04:00
}
# body-login input [ type = "text" ] ,
# body-login input [ type = "password" ] {
2014-04-01 19:18:03 +04:00
width : 249px ;
2013-07-22 15:50:35 +04:00
}
# 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 {
2014-04-01 19:18:03 +04:00
margin : 24px 5px 0 16px ! important ;
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 ;
2014-09-16 13:22:54 +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-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
2014-07-30 20:00:46 +04:00
# notification-container {
position : absolute ;
top : 0 ;
width : 100 % ;
text-align : center ;
}
2013-10-03 17:35:42 +04:00
# notification , # update-notification {
2014-07-30 20:02:53 +04:00
margin : 0 auto ;
2014-07-30 20:16:32 +04:00
max-width : 60 % ;
2014-09-11 16:12:29 +04:00
z-index : 8000 ;
2013-10-03 17:35:42 +04:00
background-color : # fc4 ;
border : 0 ;
2014-07-30 20:02:53 +04:00
padding : 1px 8px ;
2013-10-03 17:35:42 +04:00
display : none ;
position : relative ;
top : 0 ;
border-bottom-left-radius : 3px ;
border-bottom-right-radius : 3px ;
2014-07-30 20:02:53 +04:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)" ;
filter : alpha ( opacity = 90 ) ;
opacity : . 9 ;
}
# notification span , # update-notification span {
cursor : pointer ;
font-weight : bold ;
margin-left : 1em ;
2013-10-03 17:35:42 +04:00
}
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 ; }
2012-12-07 20:41:52 +04:00
code { font-family : "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , monospace ; }
2011-08-13 17:32:00 +04:00
2014-03-27 19:42:08 +04:00
# quota {
position : relative ;
padding : 0 ;
}
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 ;
2014-08-29 18:31:43 +04:00
border-top-left-radius : 3px ;
2014-08-29 18:52:41 +04:00
min-width : 1 % ;
2014-08-29 18:31:43 +04:00
max-width : 100 % ;
}
2012-12-07 20:41:52 +04:00
# quotatext { padding : .6 em 1 em ; }
2011-08-13 17:32:00 +04:00
2014-08-29 19:50:59 +04:00
# quota div . quota-warning {
background-color : # fc4 ;
}
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 ;
2014-07-31 18:56:19 +04:00
max-width : 60 % ;
overflow : hidden ;
white-space : nowrap ;
text-overflow : ellipsis ;
2013-08-31 21:21:51 +04:00
}
# oc-dialog-filepicker-content . filelist img {
margin : 2px 1em 0 4px ;
}
# oc-dialog-filepicker-content . filelist . date {
float : right ;
2014-07-31 18:57:44 +04:00
margin-right : 10px ;
margin-top : 0 ;
padding-top : 9px ;
2013-08-31 21:21:51 +04:00
}
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-10-11 14:36:30 +04:00
. loading-small { background : url ( '../img/loading-small.gif' ) no-repeat center ; cursor : wait ; }
2013-06-17 15:20:02 +04:00
. move2trash { /* decrease spinner size */
width : 16px ;
height : 16px ;
}
2014-08-27 13:28:31 +04:00
/* ---- TOOLTIPS ---- */
. extra-data {
padding-right : 5px ! important ;
}
2014-09-16 10:45:28 +04:00
. tipsy-inner {
max-width : 400px ! important ;
overflow : hidden ;
text-overflow : ellipsis ;
}
2014-08-27 13:28:31 +04:00
2013-10-04 19:21:52 +04:00
/* ---- TAGS ---- */
# tagsdialog . content {
width : 100 % ; height : 280px ;
}
# tagsdialog . scrollarea {
overflow : auto ; border : 1px solid # ddd ;
width : 100 % ; height : 240px ;
}
# tagsdialog . bottombuttons {
width : 100 % ; height : 30px ;
}
# tagsdialog . bottombuttons * { float : left ; }
# tagsdialog . taglist 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 ; }
# tagsdialog . taglist li : hover , # tagsdialog . taglist li : active { background : #eee ; }
# tagsdialog . addinput { width : 90 % ; clear : both ; }
2012-07-31 14:21:06 +04:00
2013-11-20 19:29:00 +04:00
/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
. popup {
background-color : # fff ;
border-radius : 3px ;
2013-12-09 15:21:37 +04:00
box-shadow : 0 0 10px # aaa ;
2013-11-20 19:29:00 +04:00
color : # 333 ;
padding : 10px ;
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 ) ; }
2013-12-09 15:21:37 +04:00
. arrow . up { top : -8 px ; right : 6 px ; }
2012-12-07 20:41:52 +04:00
. 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 ) ; }
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 ;
2014-07-04 19:45:43 +04:00
background-size : auto 24px ;
2013-10-04 09:41:16 +04:00
}
2013-10-28 23:22:06 +04:00
div . crumb . hidden {
display : none ;
}
2013-10-17 22:22:55 +04:00
div . crumb a ,
div . crumb span {
2013-10-04 09:41:16 +04:00
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 ;
}
2014-09-05 22:54:53 +04:00
div . crumb a . ellipsislink {
padding : 0 ! important ;
position : relative ;
top : 8px ! important ;
}
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 ;
}
2014-02-03 21:00:39 +04:00
. appear {
opacity : 1 ;
transition : opacity 500ms ease 0s ;
-moz-transition : opacity 500ms ease 0s ;
-ms-transition : opacity 500ms ease 0s ;
-o-transition : opacity 500ms ease 0s ;
-webkit-transition : opacity 500ms ease 0s ;
}
. appear . transparent {
opacity : 0 ;
}
2014-07-07 14:21:48 +04:00
/* public footer */
# body-public footer {
margin-top : 65px ;
text-align : center ;
}
# body-public footer . info {
color : # 777 ;
text-align : center ;
margin : 0 auto ;
padding : 20px 0 ;
}
# body-public footer . info a {
color : # 777 ;
font-weight : bold ;
padding : 13px ;
margin : -13px ;
}
2014-07-05 12:06:26 +04:00
/* LEGACY FIX only - do not use fieldsets for settings */
2014-07-08 01:33:20 +04:00
fieldset . warning legend , fieldset . update legend {
top : 18px ;
2014-07-05 12:06:26 +04:00
position : relative ;
}
2014-07-08 01:33:20 +04:00
fieldset . warning legend + p , fieldset . update legend + p {
2014-07-05 12:06:26 +04:00
margin-top : 12px ;
}
2014-02-20 21:14:40 +04:00
/* for IE10 */
@ -ms-viewport {
width : device-width ;
}