From 0e240ee8a0393d50156a3078b76b52ad58fb2eb9 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Fri, 15 Feb 2013 21:07:41 +0100 Subject: brought back styles which were moved to core --- css/owncloud.css | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 css/owncloud.css (limited to 'css') diff --git a/css/owncloud.css b/css/owncloud.css new file mode 100644 index 000000000..a4b18ee57 --- /dev/null +++ b/css/owncloud.css @@ -0,0 +1,134 @@ +/* ---- APP STYLING ---- */ +#app { height: 100%; width: 100%; } +/* Navigation: folder like structure */ +#app-navigation { + width: 250px; height: 100%; float: left; padding-bottom: 32px; + -moz-box-sizing: border-box; box-sizing: border-box; + border-right: 1px solid #ccc; background-color: #f8f8f8; +} +#app-navigation > ul { + height: 100%; overflow: auto; + -moz-box-sizing: border-box; box-sizing: border-box; +} +#app-navigation li { + width: 100%; position: relative; + -moz-box-sizing: border-box; box-sizing: border-box; + text-shadow: 0 1px 0 rgba(255, 255, 255, .9); +} +#app-navigation li.active { background-color: #ccc; text-shadow: 0 1px 0 rgba(255,255,255,.7); } + +#app-navigation > ul > li { + border-bottom: 1px solid #ddd; + border-top: 1px solid #fff; + background-color: #eee; +} +#app-navigation > ul > li.active { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } + +#app-navigation ul.with-icon a { + padding-left: 32px; + background-size: 16px 16px; background-repeat: no-repeat; + background-position: 10px center; +} + +#app-navigation li > a { + display: block; width: 100%; padding: 0 16px; overflow: hidden; line-height: 32px; + -moz-box-sizing: border-box; box-sizing: border-box; + white-space: nowrap; text-overflow: ellipsis; color: #333; +} +#app-navigation li:hover > a { background-color: #ccc; } +#app-navigation > ul > li:hover { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;} + +#app-navigation li.collapsible > button.collapse { + display: none; position: absolute; left: 6px; top: 5px; height: 16px; width: 16px; + background: none; background-image: url('../img/actions/triangle-s.svg'); + background-repeat: no-repeat; background-size: 16px 16px; + border: none; border-radius: 0; outline: none !important; + box-shadow: none; +} + +#app-navigation li.collapsible:hover > a { background-image: none; } +#app-navigation li.collapsible:hover > button.collapse { display: block; } + +#app-navigation li.collapsible button.collapse { + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -ms-transform:rotate(-90deg); + -o-transform:rotate(-90deg); + transform: rotate(-90deg); +} + +#app-navigation li.collapsible.open button.collapse { + -moz-transform: rotate(0); + -webkit-transform: rotate(0); + -ms-transform:rotate(0); + -o-transform:rotate(0); + transform: rotate(0); +} + +/* Second level nesting for lists */ +#app-navigation > ul ul { display: none; } +#app-navigation > ul ul li > a { padding-left: 32px; } +#app-navigation > ul.with-icon ul li > a { padding-left: 48px; background-position: 24px center; } + +#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%); +} + +#app-navigation > ul li.open:hover { + -webkit-box-shadow: inset 0 0 3px #cccccc; + box-shadow: inset 0 0 3px #cccccc; + border-top: 1px solid #ccc; +} + +#app-navigation > ul li.open ul { display: block; } + +/* 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; +} +#app-navigation .personalblock > legend { padding: 10px 0; margin: 0; } +#app-navigation .error { color: #DD1144; } + + + +/* Part where the content will be loaded into */ +#app-content { height: 100%; overflow-y: auto; } + +/* settings area */ +#app-settings { position: fixed; width: 249px; bottom: 0; border-top: 1px solid #ccc; } +#app-settings-header { background-color: #eee; } +#app-settings-content { background-color: #eee; display: none; padding: 10px; } +#app-settings.open #app-settings-content { display: block; } + +.settings-button { + height: 32px; width: 100%; padding: 0; margin: 0; display: block; + background-image: url('../img/actions/settings.png'); + background-repeat: no-repeat; background-position: 10px center; + background-color: transparent; + box-shadow: none; + border-radius: 0; border: 0; +} +.settings-button:hover { background-color: #ddd; } + +/* icons */ +.folder-icon { background-image: url('../img/places/folder.png'); } +.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'); } + +/* buttons */ +button.loading { + background-image: url('../img/loading.gif'); + background-position: right 10px center; + background-repeat: no-repeat; + padding-right: 30px; +} \ No newline at end of file -- cgit v1.2.3