From a6d3b66c751d4775f0b21015af332fbe59a7a80a Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:40:29 +0100 Subject: [PATCH 01/14] 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 02/14] 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 03/14] 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 04/14] 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; From 5d3e3a0a757abb1a5f220762806bec2b56705753 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:40:29 +0100 Subject: [PATCH 05/14] 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 e7c509e3409..c6eab8ae6a7 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -360,3 +360,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 adaf1d1959c6ed43f11a89b43ff4cccec6a90a5d Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:52:55 +0100 Subject: [PATCH 06/14] 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 c6eab8ae6a7..c84afa5d538 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -404,7 +404,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; @@ -475,7 +475,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; @@ -484,14 +484,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 bee9f7ebc6bf9601c5dd8880e1c840af57823687 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Thu, 14 Feb 2013 17:57:38 +0100 Subject: [PATCH 07/14] 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 c84afa5d538..11988c425f1 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -400,7 +400,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 c022dbe5c8c9ad72dfe8e30cfcfbb541fd548bf3 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Sat, 16 Mar 2013 21:19:57 +0100 Subject: [PATCH 08/14] added %webroot% instead of relative path --- core/css/styles.css | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 11988c425f1..951b3eb1b07 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -109,7 +109,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;} @@ -243,7 +243,7 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } /* NAVIGATION ------------------------------------------------------------- */ #navigation { position:fixed; float:left; width:64px; padding-top:3.5em; 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:hidden; box-sizing:border-box; -moz-box-sizing:border-box; } @@ -314,7 +314,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 } @@ -322,8 +322,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 ---- */ @@ -346,7 +346,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); } @@ -356,7 +356,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; } @@ -404,7 +404,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; @@ -475,7 +475,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; @@ -484,15 +484,15 @@ 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; -} \ No newline at end of file +} From e167ccc5c6ab3abae8d9a16fb794d12b7925e8b6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 27 Mar 2013 16:14:17 +0100 Subject: [PATCH 09/14] modify app styles to adhere to coming CSS coding guidelines --- core/css/styles.css | 157 ++++++++++++++++++++++++++++++++------------ 1 file changed, 114 insertions(+), 43 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 951b3eb1b07..fadfd67be2d 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -362,56 +362,95 @@ 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%; } +#app { + height: 100%; + width: 100%; +} + /* Navigation: folder like structure */ #app-navigation { - width: 250px; height: 100%; float: left; padding-bottom: 32px; + 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; + background-color: #f8f8f8; + border-right: 1px solid #ccc; } #app-navigation > ul { - height: 100%; overflow: auto; + height: 100%; + overflow: auto; -moz-box-sizing: border-box; box-sizing: border-box; } #app-navigation li { - width: 100%; position: relative; + position: relative; + width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; - text-shadow: 0 1px 0 rgba(255, 255, 255, .9); + 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 li.active { background-color: #ccc; text-shadow: 0 1px 0 rgba(255,255,255,.7); } +/* special rules for first-level entries and folders */ #app-navigation > ul > li { - border-bottom: 1px solid #ddd; - border-top: 1px solid #fff; background-color: #eee; + border-top: 1px solid #fff; + border-bottom: 1px solid #ddd; +} +#app-navigation > ul > li.active { + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; } -#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; + background-size: 16px 16px; background-position: 10px center; background-repeat: no-repeat; } #app-navigation li > a { - display: block; width: 100%; padding: 0 16px; overflow: hidden; line-height: 32px; + display: block; + width: 100%; + padding: 0 16px; + overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; - white-space: nowrap; text-overflow: ellipsis; color: #333; + line-height: 32px; + 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: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; + 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; + background-size: 16px 16px; background-repeat: no-repeat; + 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:hover > a { + background-image: none; +} +#app-navigation li.collapsible:hover > button.collapse { + display: block; +} #app-navigation li.collapsible button.collapse { -moz-transform: rotate(-90deg); @@ -420,7 +459,6 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } -o-transform:rotate(-90deg); transform: rotate(-90deg); } - #app-navigation li.collapsible.open button.collapse { -moz-transform: rotate(0); -webkit-transform: rotate(0); @@ -430,9 +468,16 @@ div.crumb a{ padding: 0.9em 0 0.7em 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 > 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%); @@ -443,12 +488,13 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } } #app-navigation > ul li.open:hover { - -webkit-box-shadow: inset 0 0 3px #cccccc; - box-shadow: inset 0 0 3px #cccccc; + -moz-box-shadow: inset 0 0 3px #ccc; -webkit-box-shadow: inset 0 0 3px #ccc; box-shadow: inset 0 0 3px #ccc; border-top: 1px solid #ccc; } -#app-navigation > ul li.open ul { display: block; } +#app-navigation > ul li.open ul { + display: block; +} /* drag and drop */ #app-navigation .drag-and-drop { @@ -459,29 +505,55 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } transition: padding-bottom 500ms ease 0s; padding-bottom: 40px; } -#app-navigation .personalblock > legend { padding: 10px 0; margin: 0; } -#app-navigation .error { color: #DD1144; } +#app-navigation .personalblock > legend { /* TODO @Raydiation: still needed? */ + 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; } +#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; } +#app-settings { + position: fixed; + width: 249px; + bottom: 0; + border-top: 1px solid #ccc; +} +#app-settings-header { + background-color: #eee; +} +#app-settings-content { + display: none; + padding: 10px; + background-color: #eee; +} +#app-settings.open #app-settings-content { + display: block; +} .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; + display: block; + height: 32px; + width: 100%; + padding: 0; + margin: 0; + background-color: transparent; background-image: url('%webroot%/core/img/actions/settings.png'); + background-position: 10px center; background-repeat: no-repeat; box-shadow: none; - border-radius: 0; border: 0; + border: 0; + border-radius: 0; +} +.settings-button:hover { + background-color: #ddd; } -.settings-button:hover { background-color: #ddd; } /* icons */ .folder-icon { background-image: url('%webroot%/core/img/places/folder.png'); } @@ -492,7 +564,6 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } /* buttons */ button.loading { background-image: url('%webroot%/core/img/loading.gif'); - background-position: right 10px center; - background-repeat: no-repeat; + background-position: right 10px center; background-repeat: no-repeat; padding-right: 30px; } From bcf1b6f9f809392cfea5f1f225e86edad833debf Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 27 Mar 2013 17:11:40 +0100 Subject: [PATCH 10/14] soften highlight for navigation entries --- core/css/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index fadfd67be2d..32a7f562df6 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -391,7 +391,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } text-shadow: 0 1px 0 rgba(255,255,255,.9); } #app-navigation li.active { - background-color: #ccc; + background-color: #ddd; text-shadow: 0 1px 0 rgba(255,255,255,.7); } @@ -423,7 +423,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } color: #333; } #app-navigation li:hover > a { - background-color: #ccc; + background-color: #ddd; } #app-navigation > ul > li:hover { border-top: 1px solid #ccc; From 5aa1ca588288815a91c9f4941e45e73636ae3f22 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 27 Mar 2013 17:32:37 +0100 Subject: [PATCH 11/14] use SVG for folder image --- 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 32a7f562df6..847e785c42d 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -556,7 +556,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } } /* icons */ -.folder-icon { background-image: url('%webroot%/core/img/places/folder.png'); } +.folder-icon { background-image: url('%webroot%/core/img/places/folder.svg'); } .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'); } From 0b1dc7b0ccc083e9cc1bc444853d4f47bc8c8bf8 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 27 Mar 2013 17:33:25 +0100 Subject: [PATCH 12/14] also use SVG for settings cog --- 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 847e785c42d..51550135a85 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -545,7 +545,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } width: 100%; padding: 0; margin: 0; - background-color: transparent; background-image: url('%webroot%/core/img/actions/settings.png'); + background-color: transparent; background-image: url('%webroot%/core/img/actions/settings.svg'); background-position: 10px center; background-repeat: no-repeat; box-shadow: none; border: 0; From 994a8797e4c9a5224297520129228e2bb0bbc4c5 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 27 Mar 2013 17:39:09 +0100 Subject: [PATCH 13/14] remove extra type selector qualification for ID and class names --- core/css/styles.css | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 51550135a85..5d3b348987f 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -390,7 +390,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } -moz-box-sizing: border-box; box-sizing: border-box; text-shadow: 0 1px 0 rgba(255,255,255,.9); } -#app-navigation li.active { +#app-navigation .active { /* active navigation entry or folder */ background-color: #ddd; text-shadow: 0 1px 0 rgba(255,255,255,.7); } @@ -401,12 +401,12 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } border-top: 1px solid #fff; border-bottom: 1px solid #ddd; } -#app-navigation > ul > li.active { +#app-navigation > ul > .active { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } -#app-navigation ul.with-icon a { +#app-navigation .with-icon a { padding-left: 32px; background-size: 16px 16px; background-position: 10px center; background-repeat: no-repeat; } @@ -430,8 +430,10 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } border-bottom: 1px solid #ccc; } -#app-navigation li.collapsible > button.collapse { - display: none; +#app-navigation .collapse { + display: none; /* hide collapse button intially */ +} +#app-navigation .collapsible > .collapse { position: absolute; left: 6px; top: 5px; @@ -444,22 +446,21 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } outline: none !important; box-shadow: none; } - -#app-navigation li.collapsible:hover > a { +#app-navigation .collapsible:hover > a { background-image: none; } -#app-navigation li.collapsible:hover > button.collapse { +#app-navigation .collapsible:hover > .collapse { display: block; } -#app-navigation li.collapsible button.collapse { +#app-navigation .collapsible .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 { +#app-navigation .collapsible.open .collapse { -moz-transform: rotate(0); -webkit-transform: rotate(0); -ms-transform:rotate(0); @@ -474,7 +475,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } #app-navigation > ul ul li > a { padding-left: 32px; } -#app-navigation > ul.with-icon ul li > a { +#app-navigation > .with-icon ul li > a { padding-left: 48px; background-position: 24px center; } @@ -487,12 +488,12 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%); } -#app-navigation > ul li.open:hover { +#app-navigation > ul .open:hover { -moz-box-shadow: inset 0 0 3px #ccc; -webkit-box-shadow: inset 0 0 3px #ccc; box-shadow: inset 0 0 3px #ccc; border-top: 1px solid #ccc; } -#app-navigation > ul li.open ul { +#app-navigation > ul .open ul { display: block; } From c94580ba29c8208294374660c6441ceda6517562 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 2 Apr 2013 11:52:57 +0200 Subject: [PATCH 14/14] revert the untested not-working webroot stuff again ... grrr @Raydiation @stefannagtegaal --- 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 5d3b348987f..5456475b316 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -109,7 +109,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('%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; } +.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; } 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;} @@ -243,7 +243,7 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } /* NAVIGATION ------------------------------------------------------------- */ #navigation { position:fixed; float:left; width:64px; padding-top:3.5em; z-index:75; height:100%; - background:#383c43 url('%webroot%/core/img/noise.png') repeat; border-right:1px #333 solid; + background:#383c43 url('../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:hidden; box-sizing:border-box; -moz-box-sizing:border-box; } @@ -314,7 +314,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('%webroot%/core/img/actions/info.png'); background-repeat:no-repeat; color:#777777; padding-left:25px; background-position:0 0.3em;} +.hint { background-image:url('../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 } @@ -322,8 +322,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('%webroot%/core/img/actions/play-next.svg'); } -.ui-icon-circle-triangle-w{ background-image:url('%webroot%/core/img/actions/play-previous.svg'); } +.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-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#ffffff; } /* ---- DIALOGS ---- */ @@ -346,7 +346,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('%webroot%/core/img/actions/delete.svg') no-repeat center; } +.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../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); } @@ -356,7 +356,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('%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 { 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: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; } @@ -439,7 +439,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } 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-size: 16px 16px; background-repeat: no-repeat; border: none; border-radius: 0; @@ -546,7 +546,7 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } width: 100%; padding: 0; margin: 0; - background-color: transparent; background-image: url('%webroot%/core/img/actions/settings.svg'); + background-color: transparent; background-image: url('../img/actions/settings.svg'); background-position: 10px center; background-repeat: no-repeat; box-shadow: none; border: 0; @@ -557,14 +557,14 @@ div.crumb a{ padding: 0.9em 0 0.7em 0; } } /* icons */ -.folder-icon { background-image: url('%webroot%/core/img/places/folder.svg'); } -.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.svg'); } +.delete-icon { background-image: url('../img/actions/delete.svg'); } +.delete-icon:hover { background-image: url('../img/actions/delete-hover.svg'); } +.edit-icon { background-image: url('../img/actions/rename.svg'); } /* 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; }