From a6d3b66c751d4775f0b21015af332fbe59a7a80a Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:40:29 +0100 Subject: [PATCH 1/4] added app stylings to core --- core/css/styles.css | 136 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) diff --git a/core/css/styles.css b/core/css/styles.css index b41c205c21b..452a90c2270 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -334,3 +334,139 @@ div.crumb { float:left; display:block; background:url('../img/breadcrumb.svg') n div.crumb:first-child { padding:10px 20px 10px 5px; } div.crumb.last { font-weight:bold; background:none; padding-right:10px; } div.crumb a{ padding: 0.9em 0 0.7em 0; } + + +/* ---- 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; } + +#app-navigation li.collapsible > button.collapse { + display: none; position: absolute; left: 6px; top: 5px; height: 16px; width: 16px; + background: none; background-image: url('%webroot%/core/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('%webroot%/core/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('%webroot%/core/img/places/folder.png'); } +.delete-icon { background-image: url('%webroot%/core/img/actions/delete.svg'); } +.delete-icon:hover { background-image: url('%webroot%/core/img/actions/delete-hover.svg'); } +.edit-icon { background-image: url('%webroot%/core/img/actions/rename.svg'); } + +/* buttons */ +button.loading { + background-image: url('%webroot%/core/img/loading.gif'); + background-position: right 10px center; + background-repeat: no-repeat; + padding-right: 30px; +} \ No newline at end of file From ab8c97e9c60307d25b83c71d2ea210b40e836382 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:52:55 +0100 Subject: [PATCH 2/4] small fixes --- core/css/styles.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 452a90c2270..b441b5477a9 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -378,7 +378,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } #app-navigation li.collapsible > button.collapse { display: none; position: absolute; left: 6px; top: 5px; height: 16px; width: 16px; - background: none; background-image: url('%webroot%/core/img/actions/triangle-s.svg'); + 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; @@ -449,7 +449,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } .settings-button { height: 32px; width: 100%; padding: 0; margin: 0; display: block; - background-image: url('%webroot%/core/img/actions/settings.png'); + background-image: url('../img/actions/settings.png'); background-repeat: no-repeat; background-position: 10px center; background-color: transparent; box-shadow: none; @@ -458,14 +458,14 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } .settings-button:hover { background-color: #ddd; } /* icons */ -.folder-icon { background-image: url('%webroot%/core/img/places/folder.png'); } -.delete-icon { background-image: url('%webroot%/core/img/actions/delete.svg'); } -.delete-icon:hover { background-image: url('%webroot%/core/img/actions/delete-hover.svg'); } -.edit-icon { background-image: url('%webroot%/core/img/actions/rename.svg'); } +.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('%webroot%/core/img/loading.gif'); + background-image: url('../img/loading.gif'); background-position: right 10px center; background-repeat: no-repeat; padding-right: 30px; From 4205f8243982f9ee570c85581cb86c7412436782 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:57:38 +0100 Subject: [PATCH 3/4] also make bottom border grey on first level hover --- core/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/styles.css b/core/css/styles.css index b441b5477a9..ef619fac551 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -374,7 +374,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } 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; } +#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; From 07df7b3de72150671cf6a6fe50054f27141fbd9d Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Sat, 16 Mar 2013 21:19:57 +0100 Subject: [PATCH 4/4] added %webroot% instead of relative path --- core/css/styles.css | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index ef619fac551..1b426e7c7c2 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -95,7 +95,7 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu #body-login input[type="text"], #body-login input[type="password"] { width:13em; } #body-login input.login { width:auto; float:right; padding:7px 9px 6px; } #remember_login { margin:.8em .2em 0 1em; vertical-align:text-bottom; } -.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; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; } +.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('%webroot%/core/img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; } input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; } #select_all{ margin-top:.4em !important;} @@ -227,7 +227,7 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } /* NAVIGATION ------------------------------------------------------------- */ #navigation { position:fixed; top:3.5em; float:left; width:64px; padding:0; z-index:75; height:100%; - background:#383c43 url('../img/noise.png') repeat; border-right:1px #333 solid; + background:#383c43 url('%webroot%/core/img/noise.png') repeat; border-right:1px #333 solid; -moz-box-shadow:0 0 7px #000; -webkit-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; overflow-x:scroll; } @@ -288,7 +288,7 @@ div.jp-play-bar, div.jp-seek-bar { padding:0; } li.update, li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; cursor:default; } .error { color:#FF3B3B; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { overflow:hidden; text-overflow:ellipsis; } -.hint { background-image:url('../img/actions/info.png'); background-repeat:no-repeat; color:#777777; padding-left:25px; background-position:0 0.3em;} +.hint { background-image:url('%webroot%/core/img/actions/info.png'); background-repeat:no-repeat; color:#777777; padding-left:25px; background-position:0 0.3em;} .separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px solid #fff; height:10px; width:0px; margin:4px; } a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;padding-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px } @@ -296,8 +296,8 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .exception{color:#000000;} .exception textarea{width:95%;height:200px;background:#ffe;border:0;} -.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'); } +.ui-icon-circle-triangle-e{ background-image:url('%webroot%/core/img/actions/play-next.svg'); } +.ui-icon-circle-triangle-w{ background-image:url('%webroot%/core/img/actions/play-previous.svg'); } .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#ffffff; } /* ---- DIALOGS ---- */ @@ -320,7 +320,7 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .popup { background-color:white; border-radius:10px 10px 10px 10px; box-shadow:0 0 20px #888888; color:#333333; padding:10px; position:fixed !important; z-index:200; } .popup.topright { top:7em; right:1em; } .popup.bottomleft { bottom:1em; left:33em; } -.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/delete.svg') no-repeat center; } +.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('%webroot%/core/img/actions/delete.svg') no-repeat center; } .popup h2 { font-weight:bold; font-size:1.2em; } .arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; } .arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } @@ -330,7 +330,7 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .help-iframe {width: 100%; height: 100%; margin: 0;padding: 0; border: 0; overflow: auto;} /* ---- BREADCRUMB ---- */ -div.crumb { float:left; display:block; background:url('../img/breadcrumb.svg') no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; -moz-box-sizing:border-box; box-sizing:border-box; } +div.crumb { float:left; display:block; background:url('%webroot%/core/img/breadcrumb.svg') no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; -moz-box-sizing:border-box; box-sizing:border-box; } div.crumb:first-child { padding:10px 20px 10px 5px; } div.crumb.last { font-weight:bold; background:none; padding-right:10px; } div.crumb a{ padding: 0.9em 0 0.7em 0; } @@ -378,7 +378,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } #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: none; background-image: url('%webroot%/core/img/actions/triangle-s.svg'); background-repeat: no-repeat; background-size: 16px 16px; border: none; border-radius: 0; outline: none !important; box-shadow: none; @@ -449,7 +449,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } .settings-button { height: 32px; width: 100%; padding: 0; margin: 0; display: block; - background-image: url('../img/actions/settings.png'); + background-image: url('%webroot%/core/img/actions/settings.png'); background-repeat: no-repeat; background-position: 10px center; background-color: transparent; box-shadow: none; @@ -458,14 +458,14 @@ div.crumb a{ padding: 0.9em 0 0.7em 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'); } +.folder-icon { background-image: url('%webroot%/core/img/places/folder.png'); } +.delete-icon { background-image: url('%webroot%/core/img/actions/delete.svg'); } +.delete-icon:hover { background-image: url('%webroot%/core/img/actions/delete-hover.svg'); } +.edit-icon { background-image: url('%webroot%/core/img/actions/rename.svg'); } /* buttons */ button.loading { - background-image: url('../img/loading.gif'); + background-image: url('%webroot%/core/img/loading.gif'); background-position: right 10px center; background-repeat: no-repeat; padding-right: 30px;