From 754c3c223bf10864c499f3e8a3f844452c56205c Mon Sep 17 00:00:00 2001 From: Stefan Reinhardt Date: Thu, 24 Jul 2014 08:27:05 +0000 Subject: [PATCH] pixelegg / app # new update + security-update images ## css styles for them # reorganize the "layout_rster.less" file in different files --- pixelegg/css/pixelegg.css | 1587 ++++++++++--------- pixelegg/images/security-update.png | Bin 0 -> 1953 bytes pixelegg/images/update.jpg | Bin 0 -> 2551 bytes pixelegg/images/update.png | Bin 0 -> 1972 bytes pixelegg/less/def_buttons.less | 2 +- pixelegg/less/def_colors.less | 2 +- pixelegg/less/layout_admin.less | 36 + pixelegg/less/layout_definitions.less | 15 +- pixelegg/less/layout_loginPage.less | 41 +- pixelegg/less/layout_raster.less | 1380 ---------------- pixelegg/less/layout_raster_buttons.less | 266 ++++ pixelegg/less/layout_raster_header.less | 267 ++++ pixelegg/less/layout_raster_main.less | 253 +++ pixelegg/less/layout_raster_scrollarea.less | 99 ++ pixelegg/less/layout_raster_sidebar.less | 550 +++++++ 15 files changed, 2353 insertions(+), 2145 deletions(-) create mode 100644 pixelegg/images/security-update.png create mode 100644 pixelegg/images/update.jpg create mode 100644 pixelegg/images/update.png create mode 100644 pixelegg/less/layout_admin.less create mode 100644 pixelegg/less/layout_raster_buttons.less create mode 100644 pixelegg/less/layout_raster_header.less create mode 100644 pixelegg/less/layout_raster_main.less create mode 100644 pixelegg/less/layout_raster_scrollarea.less create mode 100644 pixelegg/less/layout_raster_sidebar.less diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 79b86a793a..ddc5ffff7f 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -2104,6 +2104,303 @@ body { line-height: 1.28; font-weight: normal; } +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for login page + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package pixelegg + * @version $Id$ + */ +@import-once "def_colors.less"; +/* ################################################################################## + * login page + */ +#loginMainDiv { + padding: 0px; + min-height: 720px; + height: 100%; + width: auto; + border-bottom: 0px solid #7E7E7E; + margin: 0 -2%; + background-color: #408dd2; +} +#loginMainDiv #divAppIconBar { + margin-left: auto; + margin-right: auto; + background: transparent; + width: 100%; + text-align: center; +} +#loginMainDiv #divAppIconBar #divLogo { + margin-left: -2%; + margin-right: -2%; + margin-bottom: 2em; + position: relative; + top: 1px; + background-color: #408dd2; +} +#loginMainDiv #divAppIconBar #divLogo img { + /*width: 70%;*/ + /*margin-left: 15%;*/ + margin: 0 auto; + max-width: 400px; +} +#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { + width: 70%; + max-width: 2560px; + background-color: #408dd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDA4ZGQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNDA4ZGQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #408dd2, #408dd2); + background-image: -ms-linear-gradient(top, #408dd2, #408dd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#408dd2), to(#408dd2)); + background-image: -webkit-linear-gradient(top, #408dd2, #408dd2); + background-image: -o-linear-gradient(top, #408dd2, #408dd2); + background-image: linear-gradient(top, #408dd2, #408dd2); + background-repeat: repeat-x; +} +#loginMainDiv div#centerBox { + margin: 0% auto; + width: 57em; + background-color: #ffffff; + z-index: 100; + padding: 25px 10px 10px; + -webkit-border-top-right-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -webkit-border-top-left-radius: 50px; + -moz-border-radius-topright: 5px; + -moz-border-radius-bottomright: 5px; + -moz-border-radius-bottomleft: 5px; + -moz-border-radius-topleft: 50px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-top-left-radius: 50px; + /*.background-clip(padding-box);*/ + background-color: #4385c0; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #0c5da5); + background-image: -ms-linear-gradient(top, #679fd2, #0c5da5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#0c5da5)); + background-image: -webkit-linear-gradient(top, #679fd2, #0c5da5); + background-image: -o-linear-gradient(top, #679fd2, #0c5da5); + background-image: linear-gradient(top, #679fd2, #0c5da5); + background-repeat: repeat-x; + border-top: solid 1px #0c5da5; + border-left: solid 1px #0c5da5; + border-right: solid 1px #0c5da5; + border-bottom: solid 1px #679fd2; + border-width: 1px; +} +#loginMainDiv div#centerBox #loginScreenMessage { + margin: 1em; +} +#loginMainDiv div#centerBox #loginCdMessage { + margin: 1em; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 10px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 10px; + border-radius: 3px; + border-top-left-radius: 10px; + color: red; + text-align: center; + padding-top: 1em; +} +#loginMainDiv div#centerBox #loginCdMessage span { + padding: 0.5em; + font-size: 1.2em; + color: #189800; + text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050; + width: 100%; +} +#loginMainDiv div#centerBox form { + margin: 1em; +} +#loginMainDiv div#centerBox form table.divLoginbox { + background-color: transparent; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 10px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 10px; + border-radius: 3px; + border-top-left-radius: 10px; +} +#loginMainDiv div#centerBox form table.divLoginbox td { + padding: 0.5em; + font-weight: bold; + color: #ffc200; +} +#loginMainDiv div#centerBox form table.divLoginbox select { + /*.box_shadow_standard_light;*/ + width: auto; + padding: 3px; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + margin: 5px 0em 5px 0px; +} +#loginMainDiv div#centerBox form table.divLoginbox select:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#loginMainDiv div#centerBox form table.divLoginbox input { + border: 1px solid rgba(0, 0, 0, 0.15); + border-color: #b4b4b4; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + width: auto; + /*margin: 0.5em 0em 0.5em 0;*/ + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + width: 250px; +} +#loginMainDiv div#centerBox form table.divLoginbox input:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#loginMainDiv div#centerBox form table.divLoginbox input:focus { + outline: 0; + border-width: 1px; + border-style: solid; + border-color: #b4b4b4; + -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); +} +#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { + background-color: #ffc200; + color: #000000; + font-size: 19.8px; +} +#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"]:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + background-color: #189800 !important; +} +#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"]:focus { + outline: 0; + border-width: 1px; + border-style: solid; + border-color: #b4b4b4; + -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); +} +#wrap { + /* float: left; + z-index: -1; + margin: 0 auto; + background-color:transparent; + width: 100%;*/ +} +#wrap div.animation_login { + margin: 0.3em; + position: fixed; + width: 100%; + bottom: 0; +} +#wrap img[src$="svg"], +#wrap background-image[url$="svg"] { + background-color: #679fd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #679fd2); + background-image: -ms-linear-gradient(top, #679fd2, #679fd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); + background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); + background-image: -o-linear-gradient(top, #679fd2, #679fd2); + background-image: linear-gradient(top, #679fd2, #679fd2); + background-repeat: repeat-x; +} +#img1, +#img2, +#img3, +#img4, +#img5, +#img6, +#img7, +#img8 { + width: 12%; + /*height:100%;*/ + /*position:fixed;*/ + /*top: 10em;*/ + z-index: -1; + animation-name: test; + animation-duration: 8s; + animation-iteration-count: infinite; + -webkit-animation-name: test; + -webkit-animation-duration: 8s; + -webkit-animation-iteration-count: infinite; + opacity: 0; +} +#img1 { + animation-delay: 0s; + -webkit-animation-delay: 0s; +} +#img2 { + animation-delay: 3s; + -webkit-animation-delay: 3s; +} +#img3 { + animation-delay: 6s; + -webkit-animation-delay: 6s; +} +#img4 { + animation-delay: 9s; + -webkit-animation-delay: 9s; +} +#img5 { + animation-delay: 12s; + -webkit-animation-delay: 12s; +} +#img6 { + animation-delay: 15s; + -webkit-animation-delay: 15s; +} +#img7 { + animation-delay: 18s; + -webkit-animation-delay: 18s; +} +#img8 { + animation-delay: 21s; + -webkit-animation-delay: 21s; +} +@-webkit-keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} /** * EGroupware: Stylite Pixelegg template * @@ -3557,285 +3854,6 @@ td.lettersearch { border: none !important; width: 99% !important; }*/ -/** - * EGroupware: Stylite Pixelegg template - * - * Definitions for login page - * - * Please do NOT change css-files directly, instead change less-files and compile them! - * - * @link http://www.egroupware.org - * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License - * @author Stefan Reinhard - * @package pixelegg - * @version $Id$ - */ -/* ################################################################################## - * login page - * - * ################################################################################## - * - * - */ -#loginMainDiv { - padding: 0px; - min-height: 720px; - height: 100%; - width: auto; - border-bottom: 0px solid #7E7E7E; - margin: 0 -2%; - background-color: #679fd2; -} -#loginMainDiv #divAppIconBar { - margin-left: auto; - margin-right: auto; - background: transparent; - width: 100%; - text-align: center; -} -#loginMainDiv #divAppIconBar #divLogo { - margin-left: -2%; - margin-right: -2%; - margin-bottom: 2em; - position: relative; - top: 1px; - background-color: #679fd2; -} -#loginMainDiv #divAppIconBar #divLogo img { - /*width: 70%;*/ - /*margin-left: 15%;*/ - margin: 0 auto; - max-width: 400px; -} -#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { - width: 70%; - max-width: 2560px; - background-color: #679fd2; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); - background-image: -moz-linear-gradient(top, #679fd2, #679fd2); - background-image: -ms-linear-gradient(top, #679fd2, #679fd2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); - background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); - background-image: -o-linear-gradient(top, #679fd2, #679fd2); - background-image: linear-gradient(top, #679fd2, #679fd2); - background-repeat: repeat-x; -} -#loginMainDiv div#centerBox { - margin: 0% auto; - width: 444px; - background-color: #ffffff; - z-index: 100; - -webkit-border-top-right-radius: 5px; - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - -webkit-border-top-left-radius: 25px; - -moz-border-radius-topright: 5px; - -moz-border-radius-bottomright: 5px; - -moz-border-radius-bottomleft: 5px; - -moz-border-radius-topleft: 25px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - border-top-left-radius: 25px; - /*.background-clip(padding-box);*/ - /*.bordered (@egw_color_1_a, @egw_color_1_a, @egw_color_2_e, @egw_color_2_e );*/ - border-width: 14px; -} -#loginMainDiv div#centerBox #loginScreenMessage { - margin: 1em; -} -#loginMainDiv div#centerBox #loginCdMessage { - margin: 1em; - -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 10px; - -moz-border-radius: 3px; - -moz-border-radius-topleft: 10px; - border-radius: 3px; - border-top-left-radius: 10px; - color: red; - text-align: center; - padding-top: 1em; -} -#loginMainDiv div#centerBox #loginCdMessage span { - padding: 0.5em; - font-size: 1.2em; - color: #189800; - text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050; - width: 100%; -} -#loginMainDiv div#centerBox form { - margin: 1em; -} -#loginMainDiv div#centerBox form table.divLoginbox { - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 10px; - -moz-border-radius: 3px; - -moz-border-radius-topleft: 10px; - border-radius: 3px; - border-top-left-radius: 10px; -} -#loginMainDiv div#centerBox form table.divLoginbox td { - padding: 0.5em; -} -#loginMainDiv div#centerBox form table.divLoginbox select { - /*.box_shadow_standard_light;*/ - width: auto; - margin: 5px 0em 5px 5px; - padding: 3px; - outline: none; - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; -} -#loginMainDiv div#centerBox form table.divLoginbox select:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -} -#loginMainDiv div#centerBox form table.divLoginbox input { - border: 1px solid rgba(0, 0, 0, 0.15); - border-color: #b4b4b4; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - width: auto; - /*margin: 0.5em 0em 0.5em 0;*/ - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -#loginMainDiv div#centerBox form table.divLoginbox input:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -} -#loginMainDiv div#centerBox form table.divLoginbox input:focus { - outline: 0; - border-width: 1px; - border-style: solid; - border-color: #b4b4b4; - -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); -} -#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { - background-color: #ffc200 !important; - color: #000000; -} -#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"]:focus { - outline: 0; - border-width: 1px; - border-style: solid; - border-color: #b4b4b4; - -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); -} -#wrap { - /* float: left; - z-index: -1; - margin: 0 auto; - background-color:transparent; - width: 100%;*/ -} -#wrap div.animation_login { - margin: 0.3em; - position: fixed; - width: 100%; - bottom: 0; -} -#wrap img[src$="svg"], -#wrap background-image[url$="svg"] { - background-color: #679fd2; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); - background-image: -moz-linear-gradient(top, #679fd2, #679fd2); - background-image: -ms-linear-gradient(top, #679fd2, #679fd2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); - background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); - background-image: -o-linear-gradient(top, #679fd2, #679fd2); - background-image: linear-gradient(top, #679fd2, #679fd2); - background-repeat: repeat-x; -} -#img1, -#img2, -#img3, -#img4, -#img5, -#img6, -#img7, -#img8 { - width: 12%; - /*height:100%;*/ - /*position:fixed;*/ - /*top: 10em;*/ - z-index: -1; - animation-name: test; - animation-duration: 8s; - animation-iteration-count: infinite; - -webkit-animation-name: test; - -webkit-animation-duration: 8s; - -webkit-animation-iteration-count: infinite; - opacity: 0; -} -#img1 { - animation-delay: 0s; - -webkit-animation-delay: 0s; -} -#img2 { - animation-delay: 3s; - -webkit-animation-delay: 3s; -} -#img3 { - animation-delay: 6s; - -webkit-animation-delay: 6s; -} -#img4 { - animation-delay: 9s; - -webkit-animation-delay: 9s; -} -#img5 { - animation-delay: 12s; - -webkit-animation-delay: 12s; -} -#img6 { - animation-delay: 15s; - -webkit-animation-delay: 15s; -} -#img7 { - animation-delay: 18s; - -webkit-animation-delay: 18s; -} -#img8 { - animation-delay: 21s; - -webkit-animation-delay: 21s; -} -@-webkit-keyframes test { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes test { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} /** * EGroupware: CSS with less preprocessor * @@ -4017,6 +4035,23 @@ td.message span.message { overflow-y: auto; overflow-x: hidden; } +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ #egw_fw_header { width: 100%; float: left; @@ -4231,291 +4266,239 @@ td.message span.message { height: 20px; display: block; } -/*################################################# - Add / Print / Logout / - - Name / Date -###################################################*/ -/*#egw_fw_topmenu_addons{}*/ -#egw_fw_logout { - background-image: url(../images/logout.png); - background-size: 16px 16px; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 16px; - height: 16px; - /*.border_normal;*/ - /*.box_shadow_standard_light;*/ - /*.border_radius_button_normal;*/ - padding: 0.5em; - top: 5px; - position: fixed; - right: 0px; +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ +/* ################################################################################################## +* Main +// ################################################################################## +// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # +// ## ## # +// ################################################################################## +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## SIDEBAR ## MAIN # +// ## ## #egw_fw_main # +// ## ## # +// ## ## # +// ## ## # +/* ##################################################################################################### +*/ +#egw_fw_main { + padding: 0; + width: auto; + /* @media screen and (-webkit-min-device-pixel-ratio:0) { + #egw_fw_tabs { + Chrome needs margin-top + margin-top: 3px; + } + }*/ } -#egw_fw_logout:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -} -#egw_fw_logout:active { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -#egw_fw_logout:focus { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -#egw_fw_print { - background-image: url(../images/print.png); - background-size: 16px 16px; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - display: inline-block; - float: right; - margin-right: 5px; - margin-top: 0px; - position: fixed; - width: 16px; - height: 16px; - /*.border_normal;*/ - /*.box_shadow_standard_light;*/ - /*.border_radius_button_normal;*/ - padding: 0.5em; - top: 5px; - right: 40px; - z-index: 200; -} -#egw_fw_print:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -} -#egw_fw_print:active { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -#egw_fw_print:focus { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -/*################################################# -/* Second Line -/* e.g. Name / Datum / angemeldete User -###################################################*/ -#egw_fw_topmenu_info_items { - /* bottom: 0px; - right: 0px; - padding-right: 0px; - position: relative; - z-index: 1000; - margin-right: 4px; - - float: right; - - display: flex; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - - flex-direction: row; - justify-content: flex-start; - - -webkit-flex-direction: row; - -webkit-justify-content: flex-start; - -ms-flex-direction: row; - -ms-justify-content: flex-start;*/ - position: fixed; - z-index: 1000; - bottom: 2px; - right: 5px; - padding-right: 20px; - /*Notification*/ - /*user info*/ - /*current user info*/ - /*current user info*/ - /*time zone*/ - /*quick*/ - /* Firefox */ - /* Webkit */ - /* IE */ - /* Opera and prob css3 final iteration */ -} -#egw_fw_topmenu_info_items .topmenu_info_item { - overflow: visible; -} -#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(2) { - /*float: right;*/ - margin-top: 0; - font-size: 1em; - padding-right: 5px; -} -#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3) { +#egw_fw_main #egw_fw_tabs { position: relative; - top: 0px; + background-color: transparent; + float: left; + width: 100%; + margin-top: 3px; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { + margin: 0px 0 0 0; + padding: 1px 1px 0px 0px; + background-position: bottom; + background-repeat: repeat-x; + background-color: transparent; + height: 34px; + /*aktive Tabs*/ +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { + /*float: left;*/ + display: inline; + width: 100%; + text-align: center; + -webkit-margin-before: 0; + -webkit-margin-after: 0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header img { + text-align: center; + float: none; + margin: 0 auto; + width: 16px; + height: 16px; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header { + padding-left: 0; + position: relative; + -webkit-border-top-right-radius: 5px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 5px; + -moz-border-radius-topright: 5px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 5px; + border-top-right-radius: 5px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 5px; + /*.background-clip(padding-box);*/ + background: transparent; display: inline-block; - /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0px 5px 0px 0px; + padding: 2px 5px 7px 2px; + cursor: pointer; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: #b4b4b4; + background-repeat: repeat-x; + height: 24px; } -#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3):hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover { + /*.background_color_20_gray ;*/ + background-color: #ffdd73; } -#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3):focus { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { + /*font-size: 100%;*/ + font-size: 11px; + line-height: 1em; + margin: 0 15px 2px 2px; + vertical-align: super; } -#egw_fw_topmenu_info_items #topmenu_info_user_info { +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { display: inline-block; + width: 16px; + height: 16px; + margin: 5px 1px 0 1em; + /*filter grey*/ + filter: url("data:image/svg+xml;utf8,#grayscale"); + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(0%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + /*filter: url(grayscale.svg); Firefox 4+ */ + filter: gray; + /* IE 6-9 */ } -#egw_fw_topmenu_info_items form { - height: 0px; +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header object { + width: 16px; + height: 16px; + /*background-color: @gray_0;*/ + margin: 8px 1px 0 5px; + -webkit-border-top-right-radius: 5px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 5px; + -moz-border-radius-topright: 5px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 5px; + border-top-right-radius: 5px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 5px; + /*.background-clip(padding-box);*/ } -#egw_fw_topmenu_info_items form select { - padding: 0px; +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active { + border-width: 1px 1px 0px 1px !important; + /*padding: 0 0 5px !important;*/ + background-color: #b3b3b3 !important; + background-image: none !important; + /*aktive Objekte*/ } -#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add { - /*border: 1px solid rgba(0, 0, 0, 0.15);*/ - /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ - float: right; - padding: 0.5em; - position: fixed; - right: 80px; - top: 5px; - background-image: url(../images/add.png); +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active:hover { + background-color: #bfbfbf; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active img.egw_fw_ui_tab_icon { + display: inline-block; + width: 16px; + height: 16px; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active object { + width: 24px; + height: 24px; + margin: 0px 1px 0 5px; + -webkit-border-top-right-radius: 2px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 2px; + -moz-border-radius-topright: 2px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 2px; + /*.background-clip(padding-box);*/ + background-color: #b4b4b4; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button { + right: 3px; + top: 1px; + display: inline-block; + width: 12px; + height: 12px; + margin-left: 0px; background-repeat: no-repeat; - background-size: 20px 20px; - background-position: 4px 4px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - width: 16px; - height: 16px; + background-position: center; + background-image: url(../images/close_button.png); + background-size: 10px 10px; + position: absolute; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:before { - content: " "; - font-size: 2em; - color: #0c5da5; - line-height: 0.6em; - background-color: white; +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button :hover { + background-image: url(../images/close_button_hover.png); } -#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +#egw_fw_main .egw_fw_ui_tab_header_hover { + background-color: #ffdd73; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:focus { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +#egw_fw_main .egw_fw_ui_tab_content { + width: 100%; + padding: 0px; + margin: 0; + overflow-x: hidden; + overflow-y: hidden; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { - visibility: hidden; - border: medium none; - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - position: relative !important; - right: 1px !important; - top: -3px; - left: 35px; -} -#egw_fw_topmenu_info_items img#topmenu_info_error { - width: 16px; - height: 16px; - position: fixed; - /*.Button_size_square_16;*/ - border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); - padding: 5px; - top: 6px; - right: 112px; - z-index: 200; - background-color: #ff0000; - -moz-transition: all 1s ease-in-out; - -webkit-transition: all 1s ease-in-out; - -o-transition: all 1s ease-in-out; - -ms-transition: all 1s ease-in-out; - transition: all 1s ease-in-out; - /* order: name, direction, duration, iteration-count, timing-function */ - -moz-animation: blink normal 2s infinite ease-in-out; - /* Firefox */ - -webkit-animation: blink normal 2s infinite ease-in-out; - /* Webkit */ - -ms-animation: blink normal 2s infinite ease-in-out; - /* IE */ - animation: blink normal 2s infinite ease-in-out; - /* Opera and prob css3 final iteration */ -} -#egw_fw_topmenu_info_items img#topmenu_info_error:hover { - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -} -#egw_fw_topmenu_info_items img#topmenu_info_error:active { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -#egw_fw_topmenu_info_items img#topmenu_info_error:focus { - -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); - box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -} -@-moz-keyframes blink { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-webkit-keyframes blink { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes blink { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes blink { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } +#egw_fw_main .egw_fw_ui_tab_content > div { + width: 100%; + padding: 0 0 0 0; } +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ /* ################################################################################################################ * Sidebar * ################################################################################################################*/ @@ -4992,6 +4975,23 @@ td.message span.message { border-radius: 3px; color: #ffffff; } +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ .egw_fw_ui_scrollarea { overflow: hidden; z-index: 0; @@ -5046,205 +5046,312 @@ td.message span.message { background-position: center; background-repeat: no-repeat; } -/* ################################################################################################## -* Main -// ################################################################################## -// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # -// ## ## # -// ################################################################################## -// ## ## # -// ## ## # -// ## ## # -// ## ## # -// ## ## # -// ## SIDEBAR ## MAIN # -// ## ## #egw_fw_main # -// ## ## # -// ## ## # -// ## ## # -/* ##################################################################################################### +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt */ -#egw_fw_main { - padding: 0; - width: auto; - /* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ -} -#egw_fw_main #egw_fw_tabs { - position: relative; - background-color: transparent; - float: left; - width: 100%; - margin-top: 3px; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { - margin: 0px 0 0 0; - padding: 1px 1px 0px 0px; - background-position: bottom; - background-repeat: repeat-x; - background-color: transparent; - height: 34px; - /*aktive Tabs*/ -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { - /*float: left;*/ - display: inline; - width: 100%; - text-align: center; - -webkit-margin-before: 0; - -webkit-margin-after: 0; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header img { - text-align: center; - float: none; - margin: 0 auto; - width: 16px; - height: 16px; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header { - padding-left: 0; - position: relative; - -webkit-border-top-right-radius: 5px; - -webkit-border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topright: 5px; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-topleft: 5px; - border-top-right-radius: 5px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 5px; - /*.background-clip(padding-box);*/ - background: transparent; - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin: 0px 5px 0px 0px; - padding: 2px 5px 7px 2px; - cursor: pointer; - border-width: 1px 1px 0 1px; - border-style: solid; - border-color: #b4b4b4; - background-repeat: repeat-x; - height: 24px; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover { - /*.background_color_20_gray ;*/ - background-color: #ffdd73; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { - /*font-size: 100%;*/ - font-size: 11px; - line-height: 1em; - margin: 0 15px 2px 2px; - vertical-align: super; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { - display: inline-block; - width: 16px; - height: 16px; - margin: 5px 1px 0 1em; - /*filter grey*/ - filter: url("data:image/svg+xml;utf8,#grayscale"); - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(0%); - -o-filter: grayscale(100%); - filter: grayscale(100%); - /*filter: url(grayscale.svg); Firefox 4+ */ - filter: gray; - /* IE 6-9 */ -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header object { - width: 16px; - height: 16px; - /*background-color: @gray_0;*/ - margin: 8px 1px 0 5px; - -webkit-border-top-right-radius: 5px; - -webkit-border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topright: 5px; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-topleft: 5px; - border-top-right-radius: 5px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 5px; - /*.background-clip(padding-box);*/ -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active { - border-width: 1px 1px 0px 1px !important; - /*padding: 0 0 5px !important;*/ - background-color: #b3b3b3 !important; - background-image: none !important; - /*aktive Objekte*/ -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active:hover { - background-color: #bfbfbf; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active img.egw_fw_ui_tab_icon { - display: inline-block; - width: 16px; - height: 16px; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active object { - width: 24px; - height: 24px; - margin: 0px 1px 0 5px; - -webkit-border-top-right-radius: 2px; - -webkit-border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 2px; - -moz-border-radius-topright: 2px; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-topleft: 2px; - border-top-right-radius: 2px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 2px; - /*.background-clip(padding-box);*/ - background-color: #b4b4b4; -} -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button { - right: 3px; - top: 1px; - display: inline-block; - width: 12px; - height: 12px; - margin-left: 0px; +/*################################################# + Add / Print / Logout / + - Name / Date +###################################################*/ +/*#egw_fw_topmenu_addons{}*/ +#egw_fw_logout { + background-image: url(../images/logout.png); + background-size: 16px 16px; + background-position: center center; background-repeat: no-repeat; - background-position: center; - background-image: url(../images/close_button.png); - background-size: 10px 10px; - position: absolute; + cursor: pointer; + display: inline-block; + float: right; + margin-right: 1em; + margin-top: 0px; + z-index: 200; + width: 16px; + height: 16px; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.border_radius_button_normal;*/ + padding: 0.5em; + top: 5px; + position: fixed; + right: 0px; } -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button :hover { - background-image: url(../images/close_button_hover.png); +#egw_fw_logout:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } -#egw_fw_main .egw_fw_ui_tab_header_hover { - background-color: #ffdd73; +#egw_fw_logout:active { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); } -#egw_fw_main .egw_fw_ui_tab_content { - width: 100%; +#egw_fw_logout:focus { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +#egw_fw_print { + background-image: url(../images/print.png); + background-size: 16px 16px; + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + display: inline-block; + float: right; + margin-right: 5px; + margin-top: 0px; + position: fixed; + width: 16px; + height: 16px; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.border_radius_button_normal;*/ + padding: 0.5em; + top: 5px; + right: 40px; + z-index: 200; +} +#egw_fw_print:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#egw_fw_print:active { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +#egw_fw_print:focus { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +/*################################################# +/* Second Line +/* e.g. Name / Datum / angemeldete User +###################################################*/ +#egw_fw_topmenu_info_items { + position: fixed; + z-index: 1000; + bottom: 2px; + right: 5px; + padding-right: 20px; + /*Notification*/ + /*user info*/ + /*current user info*/ + /*current user info*/ + /*time zone*/ + /*quick*/ + /* Firefox */ + /* Webkit */ + /* IE */ + /* Opera and prob css3 final iteration */ +} +#egw_fw_topmenu_info_items .topmenu_info_item { + overflow: visible; +} +#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(2) { + /*float: right;*/ + margin-top: 0; + font-size: 1em; + padding-right: 5px; +} +#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3) { + position: relative; + top: 0px; + display: inline-block; + /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/ +} +#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3):hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#egw_fw_topmenu_info_items .topmenu_info_item:nth-child(3):focus { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +#egw_fw_topmenu_info_items #topmenu_info_user_info { + display: inline-block; +} +#egw_fw_topmenu_info_items form { + height: 0px; +} +#egw_fw_topmenu_info_items form select { padding: 0px; - margin: 0; - overflow-x: hidden; - overflow-y: hidden; } -#egw_fw_main .egw_fw_ui_tab_content > div { - width: 100%; - padding: 0 0 0 0; +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add { + /*border: 1px solid rgba(0, 0, 0, 0.15);*/ + /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ + float: right; + padding: 0.5em; + position: fixed; + right: 80px; + top: 5px; + background-image: url(../images/add.png); + background-repeat: no-repeat; + background-size: 20px 20px; + background-position: 4px 4px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + width: 16px; + height: 16px; } +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:before { + content: " "; + font-size: 2em; + color: #0c5da5; + line-height: 0.6em; + background-color: white; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:focus { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { + visibility: hidden; + border: medium none; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + position: relative !important; + right: 1px !important; + top: -3px; + left: 35px; +} +#egw_fw_topmenu_info_items img#topmenu_info_error { + width: 16px; + height: 16px; + position: fixed; + /*.Button_size_square_16;*/ + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + padding: 5px; + top: 6px; + right: 112px; + z-index: 200; + background-color: #ff0000; + -moz-transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; + /* order: name, direction, duration, iteration-count, timing-function */ + -moz-animation: blink normal 2s infinite ease-in-out; + /* Firefox */ + -webkit-animation: blink normal 2s infinite ease-in-out; + /* Webkit */ + -ms-animation: blink normal 2s infinite ease-in-out; + /* IE */ + animation: blink normal 2s infinite ease-in-out; + /* Opera and prob css3 final iteration */ +} +#egw_fw_topmenu_info_items img#topmenu_info_error:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#egw_fw_topmenu_info_items img#topmenu_info_error:active { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +#egw_fw_topmenu_info_items img#topmenu_info_error:focus { + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); +} +@-moz-keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-ms-keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +div#topmenu_info_update { + display: inline-block; +} +div#topmenu_info_update img { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id$ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ /* ################################################################## * ADMIN INDEX Tree /* ################################################################## @@ -5283,7 +5390,7 @@ button.image_button { .sbHolder { /*.box_shadow_standard_light;*/ width: auto; - margin: 5px 0em 5px 5px; + margin: 5px 0em 5px 0px; padding: 3px; outline: none; display: inline-block; diff --git a/pixelegg/images/security-update.png b/pixelegg/images/security-update.png new file mode 100644 index 0000000000000000000000000000000000000000..55ea64c8c49a0328803025e62440cfd4205ffc4f GIT binary patch literal 1953 zcmah~3s4hx9^M!T1h7U04mf+Rp+&rsWH%wtCWJspi<2ORM?$aHlE(rOlMP9bBvL}O z0#-UkOl52l=_%H#MZlY@XorVFm9q}cT~7`lgjgR`EqVyOsKngHg1x!v^mb-v|G)oy z-}n1|kD1+`oAbuvh=d3L02XJzDVAejF!+Wq0s!2OmDibA5O2v+TJq2mOO?um03t1_ zM!;;nsuYnUDy^+z7~ul|o~+APT9h&=PlM{Isvw4H)f+K30PuxYqe@ebSU@#Wsxt`4 z4^H=yL7i4WRxo9d%$SLk>E5)PkUV=%zQ$gz;cCgkG>~uQVFG%@q5`e@jRrH%Dj+}C z{i$;FcSTv#L^msu=E9*tI2RYk30P*GDU4d!yWK@B>cf*~koo57;8 zQVizA1qCr;)|hlgiw-q_K}D4st+WWpnA4w1&>Lm47s3Yfe50_I(X1*X4W>dgy*^mi zbF|qaM}D^Pi)eGc&4|$Ch#9RkX|Q>eBrcG#-u-%_AP{rI6Qi0+Jz}tAiv?uthN{(R zc`zrH2}>AkD1)8_!&#{r9EK=MB4KbcMPd$}L0{lz8_X7!L4z!Cbw6`izsluhnh=!* zHRYq|#)awSmZ28ZT!tFK%seJ2Q)zUDU>t1iyi>%a+k|K(CR7hT?+s7)Kly{+C2Y0? zhS{kQn+~x!Ff078wkLRev9?(7 zV(}3Jw(TZtt!w&klK~(kCR;4Zw_Z`tjevsyUP`+A(eB0g)nWMD+m@R6_qF0e0x7+5 z(%!vw-v{`Yol$#^b`8*e=TT{p&3cq5zl|QnM~_>55$S+ay7fS}t259dC$aL$iIA_a z8+QFmK60pE7@qv$rKQCWfYr`$m4EMCbog2AjTIn~l%715L690R58U@DR`pIUOJAQP z`TBz;BkyK~WFWPYm(NrA?!1sL#`y3pL`-)LEOLKWq6%F@jN~M)X*%2gu)!&6+_#T7 z6?J%bYagz{@l31k$F(g}Hy_7e#C5&2!r1_Xka8Sz-kZgbAMfybgsBy=()M)P7w^qV zYq!l_-MJFEKd1ifmyGIwQ$TR8Rirsqta-Kcv>!Zs{ps5_#hyRE!i{T>81FG&lo3?q1fB}Qy0!eO)q&g;`s;vjQZY}qJ3In<)?y_BUh*` zYLa40Qdbo^iW@u1D&C&R@%=j>EM(=Zdt@{vRojLpkRj89uZ4}dXX1~Y1k!vAYjr~ZdKXD_@9YZV!j&$t08RPwp(m(yZYTah3Kw5U>wZW6to|Dt@+^s_g z3;B-sKd%ohVkWP8_|SbK5?H<^4qBx>M|1qxF!1;BO|Rpj_O{pr`&$Tk#Ug(4Fd@$G zZR)4c>d~)rmvRDbjDgk(Q44E~Ue6 z$J1S2f7s#O(=#%#@do~M+)a1H}y9yMoBE>uPd$)JieLmHD z{%yF}*K5yQKTQaSnwYK#WrHF@nm($RIioH{jt&_-8sA)KPxXQGVWb1i<2?fd=fb4# zv;^Yk+HZa9sg8dAJ*RifJa?JY38-h9u8xk`Y}{x5u#Y2CMqNE2UkvDQgOl6X$4%3Z za2F$7d+I-#U0XnGjy}Xxrqsp>0#A^fnwqv}U{UC?C)@Mu)Hw0TSLMyMc3+XQ`V}o_ zZ_xy?aB7fSw{yR}Q$(7esEA6l0E*Id6)VCftl&HEc=qj_bI-YVX1@7m=FW^g9D53w zc_{en0D#3>1n2|bWvm}SGd6GqF#rP4(WrR%3JHfRfaPE)9L5*9V1`O6Fd(1jg7GJN5xgYsa5#TStQ7W%UGB?`6>uGS z7}wuGX9Z0mln7xt2UG|nL^7Jf1v4I;rnzg?cnmo1A{V$|=vr1Vz-uMwE|$U|8Arf! z2^0cIfp8GXo=T$MmWJUWM@L6(3?dP$@xaPrL~@P-E0S4FL}0)&u9Pp4^Ti@i8<7(#-XM3uXfpk) z1fj&sYclW;yCoEA>l*i#$=UGtG=AtU^No?fcs48(Z;*0fjl0zZSkt?|C(=4IYXcGi#6K70cR@|c zH#ic3&{#ER((q3&V^;yRJ^%tB3V{ZYXaow47^?!3H9L+(ecycm(AS-UL>Y{0QHbvb zeFGh>LC1LLrbkx_VRe0W@S}Y+^c(6KP;&JxjxZKp}NCh$(*sK_F3R ztsgKCGSa6Tdq~?=QYvm?%0M|ZVBGIeXq?Kf<>EQ_jwO4ivxsP@jm`XhdhN~UR| zh26;EH#RORY92l@JvjSu`K@Nz&W+?uokmM7;-R z6D?W2w8kszy<>tPtEG55xR~8_W3K7&PieG+uS8A*QGZnaj>m2H{~fi_-qk#CiQVR$ zfI0a-g!ZypRa52|AhcZ&#apm&6qWg5?g(9PTXX7EOWX36lA!Rw{%I8sa~iwvce?V^ z+)gYLTc4>WXIrccxYOeoI#hZ(1!3)nZK~=q*YEa83wT?aevAc=u738xN)Y8b8WtAW zk}14UaSJv@-O2j% z>|@2}xJKNB|2VW4?z&bd3E16Jb^LY4?56gw%C8o3p^y~krMMT=y6kOI`L$xdtO z!s$i?mtEFG-JXZn)ApC#K5jo)^tsH*`a*0Ls9dCj`FRkr_mpixsI7PFtn$1&=W9CM zIKj%wihEtS*&!@;6N*}S8{`$$L@ep-ELv4oHemN4_lkXn&F+-J;P(<7Go5d{|Zg;yA8yOWTn=j2+bN%C|c-@wO zCsde#T(#mS-v}FV&4E*GIj*SF!$}z|t9$0b88k<);ME-~M3$+Gi*__YsOASLxDUq3 zbu%AX2;!1Lvb)3IeTqh{C`rhe|5EwBj_8niO?7A*+sdp(b>c;9%zFGfGTOK#&Hs-w z%2)FKn_(3qvyzG}1HuA5(r9@6&$b*M{oNTo)4*L8x=U`!n<$jz{5T7F#Qu-?(HBhHEQJUu}jLf)v74&`~~Dy-7}{g^7QSQ_S7sLnpV zgVTIDKAUMmUUm6O_6DCf-gc>oPZF=dXOP2lyi$E}%WWUa@Whe&g0mL1x0V5~ZCjl= zj~?MM2DK^v<;H9tv)T7bqUy$30kJDRt72i@xt+#wZE=!nV{Cqir$th2A=oy3^MM9Z zb&F3?Hn)GUv!9&ZFc@;6?s?9|(#wY{Eo5Sw3Q}!C{vKvy>lwNqTm7PUp=;lo6ZZof z`MA^fK244DROHb+I;}%)7>2JhGu&4IZhKjky{Aib?W*I9O^p7ITP~`-`@L7c(o+!@ zjo7E;?vHIqQV(tPxYk$q#;1Fk?`W>s3Hr;c UL-P#x-Ij#U0f*3*o5vpg302P5OaK4? literal 0 HcmV?d00001 diff --git a/pixelegg/images/update.png b/pixelegg/images/update.png new file mode 100644 index 0000000000000000000000000000000000000000..b635900ce2aa5a55d3812bfc40c7d06d88443a4c GIT binary patch literal 1972 zcmah~3s4hx9$rFt7UXftODjwC01wDM0t9k|M+m90gknq~j27J_3#5>2Ocn`i=~F75I`#QgR!SMHXOM97s?QG8`1D zuxwn6V~WDvy?6`&*fNw7DJc~tbL51IiCHmBy-Gu|0U#z$ufgQGI0?$|Y^9pZn7nRg zfJz0Ikscv}MVdrBN4dF3i*GARk;sd3<8)T!w@!yg>qmR zTz(i-HmxFyBjyX1b5RkOkwcOi4g?hx6fg@|OhTItA<@y%Rt*#lqYz=bLN$r$!_>MB zD++vEC)X-9q>@mBRz*xkDr;RY&^l6# z|77E5(K<y-_sd;2=SRqrr`{hJdAmxU`C*=7mTulo3Tn2T+R45f3Bq}@t z5wKV=4^2Xlq;OsoD!(lcG zM@At?LP8|WN0K7gd;u?#$BSeva}_^R_y6TWlo`l6*#8>z$`!Re*5k{yrGl4>kE^L| z*HUZUb8ssT0Q6uXKS84ZO15AuvsrZt9B8qmxFpwteKq~FGShrtak8ABX73(vdR%nT z+s^yEBOR5t8Y=dE{{&gPc5KY@H2JHcqn3r)`R@kZw)T_)HU}Gw~T^h0M3E`t|G^Xel z*wf!fFR&jFZs|`LGRD>T_)J~fVwyqkt#cpivMFw?HOAY0hcKyb# zi2QCMomL#$F#;XMyyvfbcn(SPfH~d6WB;nm6n}Ja(AO}uZ)W@X;$vs)0U~Lg!;ZBQ z+thDAKljGc;(UK+=fdpm_CMZ_^Nn2(^mNvKcwBm_=79658beypRN3NNZuuu}JeSOG z%#nO}_ew`c;3|>q{P4Lk&usk-=kD1Gzt=RtWrvWp&CP{ZqJQ-VGYsq7;NkgaZrpb? z_90BbJ$_^EuFf^NSDG%A(Msd?o>?6Idq&52ywo-||1M4Ffi2y?p1IyIUjD&hCsF>* z9Y|(o>q2VJF7LKAgLU#J7%$B=*^#yo^RTUc+Sc?bTu}aS@Jz$ESV;@>bQn!iQJc5F zsFS;~TD9-UpATOR@MyZGc;6kWn`-wrx@A5OYIv~mrmk*uIKBDp_o^ok2+L>hRJHTO zf&cC#e3w2x+(Tx59D8u%ZXx*%womxU|T=2d&srx@W!yb7OF!E#0TrZ?j!!cZgkJ{n(`HfQzW|71?;Z?~*~l91gw+ z$fiH9D2Td}xw!bO`lRU2aBu2cPbz!{m4|lrPi;>G%RmA2rT+B0C#y?m>dYsn%@#}L zRWSF|_Zg*M(0>2fWS)1cxwrRb|6iX%9ln^?g)KLK{X3w#&}JCG0fWzbbfMY zQ^#%3@xW&0OqywS^^o6LyAIj2$1P3KEv*`@6VTFPzAy)fx85jTY-Nbtq(W9PXVoUB z{Sgx7d_a<&5&tV`hU}Z2bM2m+aXzuf;r(!2R*wJx!~{(bIF~)F O|50I53cr=NtK>fc)e>3& literal 0 HcmV?d00001 diff --git a/pixelegg/less/def_buttons.less b/pixelegg/less/def_buttons.less index cdac383f90..079f3828a0 100755 --- a/pixelegg/less/def_buttons.less +++ b/pixelegg/less/def_buttons.less @@ -195,7 +195,7 @@ .Complete_Button_select{ /*.box_shadow_standard_light;*/ width: auto; - margin: 5px 0em 5px 5px; + margin: 5px 0em 5px 0px; padding:3px; outline:none; display: inline-block; diff --git a/pixelegg/less/def_colors.less b/pixelegg/less/def_colors.less index 8b15113a22..e1a5020bd9 100644 --- a/pixelegg/less/def_colors.less +++ b/pixelegg/less/def_colors.less @@ -52,7 +52,7 @@ //Berechnung der EGW Farben -.background_color_egw_normal {background-color : @egw_color_1_a !important;} +.background_color_egw_normal {background-color : @egw_color_1_a;} .background_color_egw_light {background-color : @egw_color_1_d;} .background_color_egw_lighter {background-color : @egw_color_1_e;} .background_color_egw_dark {background-color : @egw_color_2_a;} diff --git a/pixelegg/less/layout_admin.less b/pixelegg/less/layout_admin.less new file mode 100644 index 0000000000..a6413bc8e3 --- /dev/null +++ b/pixelegg/less/layout_admin.less @@ -0,0 +1,36 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + +/* ################################################################## +* ADMIN INDEX Tree +/* ################################################################## +*/ + + +.standartTreeImage { + .img_filter_gray; + .dimension_width_height_s; +} + +// old image (only) buttons, which should only display an image, no button +button.image_button { + background: none; + border: none; +} \ No newline at end of file diff --git a/pixelegg/less/layout_definitions.less b/pixelegg/less/layout_definitions.less index 65b4c9aebd..1eff3da4d4 100644 --- a/pixelegg/less/layout_definitions.less +++ b/pixelegg/less/layout_definitions.less @@ -20,6 +20,11 @@ @import "layout_reset.less"; //then +@import "layout_loginPage.less"; + + + + @import "layout_ajaxLoader.less"; @import "layout_buttons.less"; @@ -40,14 +45,20 @@ @import "layout_lettersearch.less"; -@import "layout_loginPage.less"; @import "layout_messages.less"; @import "layout_overlay.less"; -@import "layout_raster.less"; +@import "layout_raster.less"; +@import "layout_raster_header.less"; +@import "layout_raster_main.less"; +@import "layout_raster_sidebar.less"; +@import "layout_raster_scrollarea.less"; +@import "layout_raster_buttons.less"; + +@import "layout_admin.less"; @import "layout_sbHolder.less"; diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index 61049c39e2..cdaf918a1b 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -13,20 +13,15 @@ */ @import (reference) "definitions.less"; + +@import-once "def_colors.less"; //############################################################################################################## /* ################################################################################## * login page - * - * ################################################################################## - * - * */ - - - #loginMainDiv { padding: 0px; min-height: 720px; @@ -34,7 +29,7 @@ width: auto; border-bottom: 0px solid #7E7E7E; margin: 0 -2%; - background-color: @egw_color_2_e; + background-color: @egw_color_2_d; // Logo Leiste #divAppIconBar{ @@ -51,7 +46,7 @@ margin-bottom: 2em; position: relative; top: 1px; - background-color: @egw_color_2_e; + background-color: @egw_color_2_d; img { /*width: 70%;*/ @@ -64,7 +59,7 @@ img[src$="svg"]{ width: 70%; max-width: 2560px; - .gradient_vertical (@egw_color_2_e, @egw_color_2_e); + .gradient_vertical (@egw_color_2_d, @egw_color_2_d); } } } @@ -73,13 +68,15 @@ // Anmeldefenster / Box mit Mesaage + Form div#centerBox{ margin: 0% auto; - width: 444px; + width: 57em; background-color: @gray_0; z-index: 100; - .border_radius (5px, 5px, 5px, 25px); + padding: 25px 10px 10px; + .border_radius (5px, 5px, 5px, 50px); + .gradient_vertical (@egw_color_2_e, @egw_color_2_a); - /*.bordered (@egw_color_1_a, @egw_color_1_a, @egw_color_2_e, @egw_color_2_e );*/ - border-width: 14px; + .bordered (@egw_color_2_a, @egw_color_2_a, @egw_color_2_e, @egw_color_2_a ); + border-width: 1px; @@ -117,19 +114,20 @@ margin: 1em; + // Table table.divLoginbox { - // background-color: red; - .box_shadow_standard_light; + background-color: transparent; .border_radius_button_lefttop; tr.divLoginboxHeader{} - td { padding: 0.5em;} + td { padding: 0.5em; font-weight: bold; color: @egw_color_1_a} select { .Complete_Button_select; + margin: 5px 0em 5px 0px; } select:hover { @@ -138,6 +136,7 @@ input { .Complete_Button_input; + width: 250px; } input:hover{ .Complete_Button_input_hover; @@ -151,13 +150,13 @@ .background_color_egw_normal; // Orange // Hintergrund in EGW Farbe .color_100_gray; + .fontsize_xxl; - + &:hover{.Complete_Button_select_hover; background-color: @color_positive_action !important;} + &:focus {.Complete_Button_input_focus;} } - input[type="submit"]:focus { - .Complete_Button_input_focus; - } + } diff --git a/pixelegg/less/layout_raster.less b/pixelegg/less/layout_raster.less index 98770d8f51..adc8fea852 100644 --- a/pixelegg/less/layout_raster.less +++ b/pixelegg/less/layout_raster.less @@ -39,1384 +39,4 @@ overflow-y: auto; overflow-x: hidden; } -#egw_fw_header{ - width: 100%; - float: left; - background-color: @egw_color_2_e; - - /* Logo EGW or Company - left top*/ - #egw_divLogo { - float: left; - width: 255px; - display: block; - margin-left: -8px; - text-align: center; - height: 45px; - /*.background_color_5_gray;*/ - - img { - max-width: 209px; - border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ - } - - } - - -/* ########################################################################################################################################### - Topmenu / Home / Einstellungen / Zugriff / Kategorien usw.. - ########################################################################################################################################### -*/ - - #egw_fw_topmenu ul, - #egw_fw_topmenu > * > ul > li, - .topmenu_info_item, - #egw_fw_topmenu_items, - #egw_fw_topmenu_info_items { - display: inline; - } - - #egw_fw_topmenu{ - - - - #egw_fw_topmenu_items { - float: left; - padding-top: 14px; - width: 70%; - - ul { - margin: 5px 2px; - - li{ - color: @gray_0; - /*.Button_size_square_32;*/ - padding: 8px 10px; - /*.Complete_Button_normal;*/ - /*background-color: @gray_10;*/ - - - &:hover{.Complete_Button_hover; color: @gray_0;} - &:active {.Complete_Button_active;} - .transition (0.2s, ease-out); - - a { - color: @gray_100; - text-decoration: none; - .dimension_height_l; - /*font-size: 1.1em;*/ - .fontsize_l; - line-height: 1.5em; - - - &:hover { - color: @gray_10; - border-color: @gray_50; - text-decoration: none !important; - } - - &:before { - /*.img_filter_gray;*/ - /*-webkit-filter: grayscale(100%) brightness(100%) contrast(100%);*/ - /*-webkit-filter: invert(100%);*/ - } - } - - } - - /*Home*/ - li:first-child{ - margin-left: 10px; - :before{border: none;} - } - - /*home*/ - a#topmenu_home { - margin-left: 0px; - &:before { - padding-right: 20px; - .fontsize_l; - content: " "; - background-image: url(../images/topmenu_items/home.png); - background-repeat: no-repeat; - background-size: 20px 20px; - .dimension_width_height_m; - } - - } - - - /*Setup / Einstellungen*/ - a#topmenu_prefs{ - margin-left: 0px; - &:before { - padding-right: 20px; - content: ""; - background-image: url(../images/topmenu_items/setup.png); - background-repeat: no-repeat; -/* background-size: 20px 20px;*/ - .dimension_width_height_xs; - } - } - - /*access / Zugriff */ - a#topmenu_acl{ - &:before { - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_xs; - background-image: url(../images/topmenu_items/access.png); - } - } - /*category*/ - a#topmenu_cats{ - &:before { - background-image: url(../images/topmenu_items/category.png); - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_xs; - } - } - /*password*/ - a#topmenu_preferences{ - &:before { - background-image: url(../images/topmenu_items/password.png); - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_xs; - } - } - /*help*/ - a#topmenu_manual{ - &:before { - background-image: url(../images/topmenu_items/help.png); - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_xs; - } - } - /*Search*/ - a#topmenu_search{ - &:before { - background-image: url(../images/topmenu_items/search.png); - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_xs; - } - } - /*logout*/ - a#topmenu_logout{ - &:before { - background-image: url(../images/topmenu_items/logout.png); - padding-right: 20px; - content: ""; - background-repeat: no-repeat; - .dimension_width_height_s; - } - } - } // Ende ul - - - } // Ende Items - - - } // Ende Topmenu - - -} // Ende Header - -/* ################################################### - Slide Effekt - ###################################################*/ - - -#egw_fw_topmenu_slide{ - width: auto; - text-align: center; - height: 15px; - float: left; - position: fixed; - left: 194px; - -} - - /*ICON List*/ -#egw_fw_topmenu_slide.slidedown{ - background-image: url("../images/list.png"); - background-position: center center; - height: 15px; - width: 15px; - display: block; - margin-left: 5px; - margin-top: 10px; - background-size: 15px 15px; - float: left; - position: relative; - left: -5px; - cursor: pointer; -} - -/*Icon ARROW UP*/ -#egw_fw_topmenu_slide.slideup{ - background-image: url("../images/slideup.png"); - background-position: center center; - height: 15px; - width: 15px; - display: block; - margin-top: -36px; - margin-left: 40px; - cursor: pointer; - -} - -#slidetoggle{ - width: 20px; - height: 20px; - display: block; -} - - - -/*################################################# - Add / Print / Logout / - - Name / Date -###################################################*/ -/*#egw_fw_topmenu_addons{}*/ - - - -// Button Logout -#egw_fw_logout { - background-image: url(../images/logout.png); - background-size: 16px 16px; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - .Button_size_square_16; - /*.border_normal;*/ - /*.box_shadow_standard_light;*/ - /*.border_radius_button_normal;*/ - padding: 0.5em; - top: 5px; - position: fixed; - right: 0px; - - - &:hover {.box_shadow_standard_light_hover;} - &:active {.Complete_Button_active;} - &:focus {.box_shadow_standard_light_inset;} -} - - - -// Button Print - -#egw_fw_print { - background-image: url(../images/print.png); - background-size: 16px 16px; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - display: inline-block; - float: right; - margin-right: 5px; - margin-top: 0px; - position: fixed; - .Button_size_square_16; - /*.border_normal;*/ - /*.box_shadow_standard_light;*/ - /*.border_radius_button_normal;*/ - padding: 0.5em; - top: 5px; - right: 40px; - z-index: 200; - &:hover {.box_shadow_standard_light_hover;} - &:active {.Complete_Button_active;} - &:focus {.box_shadow_standard_light_inset;} - -} - - -/*################################################# -/* Second Line -/* e.g. Name / Datum / angemeldete User -###################################################*/ - - -#egw_fw_topmenu_info_items { - -/* bottom: 0px; - right: 0px; - padding-right: 0px; - position: relative; - z-index: 1000; - margin-right: 4px; - - float: right; - - display: flex; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - - flex-direction: row; - justify-content: flex-start; - - -webkit-flex-direction: row; - -webkit-justify-content: flex-start; - -ms-flex-direction: row; - -ms-justify-content: flex-start;*/ - - - // move to bottom of the page - position: fixed; - z-index: 1000; - bottom: 2px; - right: 5px; - padding-right: 20px; - - - .topmenu_info_item { - - overflow: visible; - - // Info Bell - &:nth-child(1) { - } - - // Name - &:nth-child(2) { - /*float: right;*/ - margin-top: 0; - font-size: 1em; - padding-right: 5px; - - } - - // angemeldete User - &:nth-child(3) { - position: relative; - top: 0px; - display: inline-block; - - &:hover {.box_shadow_standard_light_hover;} - &:focus {.box_shadow_standard_light_inset;} - - /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/ - - } - - // Add - &:nth-child(4) { - - } - - } - - /*Notification*/ - #topmenu_info_notifications {} - - /*user info*/ - #topmenu_info_user_info { - display: inline-block; - } - - /*current user info*/ - #topmenu_info_current_users {} - - /*current user info*/ - #topmenu_info_current_users {} - - /*time zone*/ - form { height: 0px; - select {padding: 0px;} - } - - /*quick*/ - #topmenu_info_quick_add { - - // ############################################################################## - // quick_add - // Fist you see an ADD Icon, via Mouseover it expand right, to an select field - - span#quick_add { - /*border: 1px solid rgba(0, 0, 0, 0.15);*/ - /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ - float: right; - padding: 0.5em; - position: fixed; - right: 80px; - top: 5px; - - background-image: url(../images/add.png); - background-repeat: no-repeat; - background-size: 20px 20px; - background-position: 4px 4px; - - .border_radius_button_normal; - .dimension_width_height_s; - - &:before { - content: " "; - font-size: 2em; - color: @egw_color_2_a; - line-height: 0.6em; - background-color: white; - } - - &:hover {.box_shadow_standard_light_hover;} - &:focus {.box_shadow_standard_light_inset;} - } - - // ############################################################################## - // quick_add selectbox - // ADD different APPs - select#quick_add_selectbox { - - visibility: hidden; - border: medium none; - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - position: relative !important; - right: 1px !important; - top: -3px; - left: 35px; - - } - - } - - // ############################################################################## - // JS ERROR BUTTON - // blinking red IMG - img#topmenu_info_error{ - .dimension_width_height_s; - position: fixed; - - /*.Button_size_square_16;*/ - - .border_normal; - .box_shadow_standard_light; - padding: 5px; - top: 6px; - right: 112px; - z-index: 200; - &:hover {.box_shadow_standard_light_hover;} - &:active {.Complete_Button_active;} - &:focus {.box_shadow_standard_light_inset;} - - background-color: @color_warning; - - - //blinking - -moz-transition:all 1s ease-in-out; - -webkit-transition:all 1s ease-in-out; - -o-transition:all 1s ease-in-out; - -ms-transition:all 1s ease-in-out; - transition:all 1s ease-in-out; - /* order: name, direction, duration, iteration-count, timing-function */ - -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */ - -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */ - -ms-animation:blink normal 2s infinite ease-in-out; /* IE */ - animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */ - - } - - - - @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */ - @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */ - @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */ - @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */ - -} -// Ende items - - - - - -/* ################################################################################################################ - * Sidebar - * ################################################################################################################*/ - -// AREA UNDER LOGO -#egw_fw_sidebar { - position: fixed; - overflow: hidden; - top: 43px; - left: 0px; - bottom: 20px; - width: 225px; - /*.background_color_5_gray;*/ - - //SIDE AREA - #egw_fw_sidemenu { - position: absolute; - top: 0px; - bottom: 4px; - left: 4px; - right: 5px; - overflow: hidden; - z-index: 0; - padding-top: 0.6em; - font-size: 0.9em; - - // SIDE AREA - .egw_fw_ui_scrollarea_outerdiv{ - .background_color_5_gray; - - - //#################################################### - // AREA for - // DRAG AND DROP - div.ui-sortable { - - div { - padding: 3px 0 1px 3px; - cursor: pointer; - } - } - - - //#################################################### - // All Tabs - // DRAG AND DROP - .egw_fw_ui_sidemenu_entry_header { - display: block; - margin: 0 0; - /*padding: 0px 5px 5px 10px;*/ - - &:hover { - .background_color_15_gray; - .rounded(5px); - } - - &:active {.box_shadow_standard_light_inset;} - - - h1 { - margin: 0 0 10px 0; - padding-top: 0.31em; - padding-left: 3em; - .color_40_gray; - /*font-size: 12px;*/ - .fontsize_l; - line-height: 17px; - } - - object {background-color: @gray_0; .dimension_width_height_m;} - - } - - - - // #################################### - // #### # - // ### IMG | ADD NAME # - // ### # - // ### # - //########################################### - // aktive APP - // aktiver Tab - // rounded Corner Left Top - .egw_fw_ui_sidemenu_entry_header_active { - // - cursor: pointer; - background-image: url("../images/clear.png"); - background-position: 95% -3000px; - background-repeat: no-repeat; - - .background_color_10_gray; - .border_radius ( 5px, 0px, 0px, 27px ); - .bordered (@gray_30, @gray_30, @gray_30, @gray_30); - - margin: 0 0 0 0; - border-bottom: none; - height: 33px; - - - img {padding-left: 9px; padding-top: 6px; height: 18px;} - - h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;} - - &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );} - &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );} - - &:focus { - background-image: url("../images/ajax-loader.gif"); - background-repeat: no-repeat; - background-position: 90% 50%; - .Complete_Button_active; - - .background_color_25_gray; - } - - object { - margin-left: 14px; - margin-top: 8px; - .rounded (3px;); - .dimension_width_height_s; - } - - .egw_fw_ui_ajaxloader {margin-top: -26px;} - - } - - //#################################################### - // Rahmen um APP Einstellungen - // egw_fw_ui_sidemenu_entry_content - // ######################################## - // ## ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - // ######################################## - // ## div.egw_fw_ui_category ## - // ## &:nth-last-of-type(-n+3) ## - // ##################################### - - - - - - .egw_fw_ui_sidemenu_entry_content { - display: block; - background-image: none; - .border_radius (0, 0, 27px, 0); - border-color: @gray_30; - border-style: solid; - border-width: 0px; - margin: 0 0 2em 0; - - - // rounded Corner on bottom - &:nth-last-of-type(-n+3) { - padding: 5px 0.3em 1.5em 0.3em; - margin: 0 0 10px 0; - .background_color_30_gray; - .border_radius (0, 0, 24px, 0); - border-color: @gray_30; - } - - & > div {.background_color_30_gray;} - - //################################################### - // *letztes Element */ - // has round corners - div.egw_fw_ui_category:nth-last-of-type(-n+3) { - .border_radius (0, 0, 15px, 0); - } - - //################################################### - // Schaltflächen - Elements - // Normal - .egw_fw_ui_category { - margin: 4px 5px 5px 5px; - padding: 0.5em 1em 0.5em 0; - cursor: pointer; - // border-top: 7px solid; - border-color: @gray_30; - background-color: @gray_10; - - /*background-color: @egw_color_2_d;*/ - - .border_radius(3px,3px,3px,3px); - - h1 { - margin: 5px 0px 3px 5px; - padding: 0px 0px 0px 15px; - line-height: 1em; - .fontsize_l; - background-image:url(../images/arrow_left.png); - background-repeat:no-repeat; - background-position:left center; - } - - div.egw_fw_ui_category:nth-last-of-type(-n+3) { - img.egw_fw_ui_sidemenu_listitem_icon { - display: block; - } - } - - } - - //################################# - // Hover - // on Mouse over change color - .egw_fw_ui_category:hover { - .background_color_40_gray; - padding: 0.5em 1em 0.5em 0; - } - - - - /*######################*/ - // Active State - // change Background color in Blue - // See all Elements - .egw_fw_ui_category_active { - border-bottom-width: 0px; - margin-top: 4px; - - background-color: @egw_color_2_a; - - /*.background-color-50-gray;*/ - .color_5_gray; - .border_radius(3px,3px,3px,3px) !important; - - h1 { - background-image:url(../images/arrow_down.png); - line-height: 1em; - font-size: 12px; - - a { - color: #FFF; - - - img {.dimension_width_height_s;} - - &:hover { - padding: 5px 30px 5px 0px; - width: 200px; - .background_color_10_gray; - .color_50_gray; - .Complete_Button_hover; - } - } - - } - - &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);} - } - - - - - - } - - .egw_fw_ui_sidemenu_entry_content_bottom { - border-width: 0px 1px 1px 1px; - } - .egw_fw_ui_sidemenu_entry_header_bottom { - border-width: 0px; - border-color: @gray_0; - } - - .egw_fw_ui_sidemenu_entry_icon { - display: inline-block; - .dimension_height_m; - - padding-left: 0; - padding-right: 0px; - float: left; - - /*filter grey*/ - .img_filter_gray; - } - } - - - } // SIDEMENU ENDE - - - /*#################################*/ - // Trenner (Splitter) - #egw_fw_splitter { - position: absolute; - .background_color_30_gray; - width: 5px; - top: 40px; - bottom: 3px; - right: 0px; - - &:hover {background-color: @egw_color_1;} - } - // Ende Sidebar - -// Menu Seite links -} - - -/** DON"T MOVE THIS **/ -.egw_fw_ui_splitter_vertical { - background-image: url(../images/splitter_vert.png); - background-position: center; - background-repeat: no-repeat; - .background_color_30_gray; - position: absolute; - width: 5px; - height: 100%; - cursor: col-resize; -} - - - - - //#################################################### - // Submenu / Unterpunkte in der Seitenleiste - - // ######################################## - // ## ## - // ## ## - // ## ############################# ## - // ## #.egw_fw_ui_category_content# ## - // ## ############################# ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - - -.egw_fw_ui_category_content { - .background_color_0_gray; - border-top-width: 0; - border-left: 0px solid; - border-bottom: 0px solid; - margin-left: 4px; - margin-top: 0px; - padding-bottom: 5px; - padding-left: 0px; - padding-top: 3px; - margin-right: 5px; - /*min-height: 50px;*/ - - // Last Element rounded - &:last-of-type{ - .border_radius (0, 0, 10px, 0); - border-color: @gray_30; - } - - img { .dimension_height_s; vertical-align: middle;} - - &:hover { - .background_color_0_gray; - border-color: @gray_50; - } - - input#uical_select_owner_multiple{ - .dimension_height_s; - vertical-align: middle; - } - - // Favoriten anlegen und löschen - .sidebox-favorites{} // ist in etemplate2.less definiert - - -} - - - //#################################################### - // Submenu / Unterpunkte in der Seitenleiste - - // ######################################## - // ## ## - // ## ## - // ## ############################# ## - // ## #.egw_fw_ui_category_content# ## - // ## ############################# ## - // ## # # ## - // ## # .egw_fw_ui_sidemenu_listitem ## - // ## # # ## - // ## ############################# ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - // ######################################## - // ## ## - // ## ## - // ######################################## - - - -// Sub Sub Menu Item - -.egw_fw_ui_sidemenu_listitem { - - padding: 9px 0px 0px 0px; - margin: 0px 0 1px 0px; - position: relative; - min-height: 18px; - background-color: @gray_0; - - // Submenu Hover Item - gelb - &:hover{ - .color_100_gray; - background-color: @egw_color_1_e; - - } - - - // Icon before - img.egw_fw_ui_sidemenu_listitem_icon { - /*display: none;*/ - .dimension_width_height_xs; - padding: 0px; - margin: 0px 5px; - float: left; - - } - - input { - height: 16px; - width: 81% !important; - } - - input[type="image"] { - height: 10px; - width: 10px !important; - margin-left: 1px; - } // mehrere Benutzer auswählen - - select { max-width: 85% !important; } - - // Icon rechts der Liste - Auswahl Button - img { - height: 9px; - width: 9px; - padding: 0px; - float: right; - } - - // normale Links - a { - // .Complete_Button_text; - padding: 5px 0px 5px 5px; - text-decoration: none; - min-width: 5em; - vertical-align: bottom; - - &:hover{ - .color_100_gray; - } - - &:active { - .box_shadow_standard_light_inset; - } - } - - - div { - a:first-child{ - .Complete_Button_text; - // padding: 2px; - // padding: 5px 30px 5px 0px; - width: 72% !important; - // background-color: red; - } - - a:first-child:hover { - // .Complete_Button_text_hover; - // .background-color-30-gray; - // padding: 5px 30px 5px 0px; - // width: 200px; - } - - //löschen - a:nth-child(2){ - position: absolute; - right: 0; - top: 0; - background: transparent; - padding: 0px 2px 0 2px; - width: 10px; - min-width: 5px; - - img { - margin: 0 0 0 0; - padding: 0em 0em 0 0em; - height: 10px; - width: 10px; - } - } - - a:nth-child(2):hover { - background-color: @color_warning; - .Complete_Button_Icon_hover ; - .color_0_gray; - // width: auto; - } - } - - -} // .egw_fw_ui_sidemenu_listitem - - - - - -// ############################################################## -// ## ## -// ## ## -// Scrollarea - -.egw_fw_ui_scrollarea -{ - overflow: hidden; - z-index: 0; -} - -.egw_fw_ui_scrollarea_button -{ - position: absolute; - display: block; - width: 100%; - height: 12px; - z-index: 2; -} - -.egw_fw_ui_scrollarea_button_up.egw_fw_ui_scrollarea_button_hover, -.egw_fw_ui_scrollarea_button_down.egw_fw_ui_scrollarea_button_hover -{ - background-image:url(../images/scroll_hover.png); -} - -.egw_fw_ui_scrollarea_button_disabled -{ - display: none !important; -} - -.egw_fw_ui_scrollarea_button_up, .egw_fw_ui_scrollarea_button_down -{ - height: 14px; - background-image:url(../images/scroll.png); - background-color: white; - background-repeat: no-repeat; - background-position: center; -} - -.egw_fw_ui_scrollarea_button_up -{ - top: 0px; -} - -.egw_fw_ui_scrollarea_button_down -{ - bottom: 0px; -} - -.egw_fw_ui_scrollarea_outerdiv -{ - height: 100%; -} - - - - - -.egw_fw_content_browser_div { - display: block; - overflow-x: hidden; - overflow-y: auto; - padding: 0 10px; - background-color: @gray_20; - /* background-color: RGB(240, 240, 255);*/ -} - -.egw_fw_content_browser_div_loading { - position: absolute; - z-index: 1000; - top: 0px; - left: 0px; - .dimension_width_height_s; - background-image: url(../images/ajax-loader.gif); - background-position: center; - background-repeat: no-repeat; -} - - - - - -/* ################################################################################################## -* Main -// ################################################################################## -// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # -// ## ## # -// ################################################################################## -// ## ## # -// ## ## # -// ## ## # -// ## ## # -// ## ## # -// ## SIDEBAR ## MAIN # -// ## ## #egw_fw_main # -// ## ## # -// ## ## # -// ## ## # -/* ##################################################################################################### -*/ - -#egw_fw_main { - padding: 0; - width: auto; - - // ######################################## - // APPS - // CHrome hack -/* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ - - // ####################################### - // AREA for Content - #egw_fw_tabs{ - position: relative; - background-color: transparent; - float: left; - width: 100%; - margin-top: 3px; - - - // ############################################################ - // Tabnavigation - // Statusmeldung - // definiert in layout_messages.less - // .egw_fw_ui_app_header_container { } - - - - // ######################tabs header ########################## - // # # # # # # # # # #### - // # # # # # # # # # #### - // # tab header # # # # # # # #### - // # # # # # # # # # #### - // ############################################################ - // Div um Tabs - - .egw_fw_ui_tabs_header { - margin: 0px 0 0 0; - padding: 1px 1px 0px 0px; - background-position: bottom; - background-repeat: repeat-x; - background-color: transparent; - height: 34px; - - h1 { - /*float: left;*/ - display: inline; - width: 100%; - text-align: center; - -webkit-margin-before: 0; - -webkit-margin-after: 0; - } - - img{ - text-align:center; - float: none; - margin: 0 auto; - .dimension_width_height_s; - } - - // Tab - // ########## - // # # - // # # - // ########## - // inaktive - - .egw_fw_ui_tab_header { - padding-left: 0; - position: relative; - .border_radius(5px,0, 0, 5px); - background: transparent; - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin: 0px 5px 0px 0px; - padding: 2px 5px 7px 2px; - cursor: pointer; - border-width: 1px 1px 0 1px; - border-style: solid; - border-color: @gray_30;; - background-repeat:repeat-x; - height: 24px; - - &:hover { - /*.background_color_20_gray ;*/ - background-color: @egw_color_1_e; - } - - // APP Name - h1 { - /*font-size: 100%;*/ - .fontsize_m; - line-height: 1em; - margin:0 15px 2px 2px; - vertical-align: super; - } - - // Images - img.egw_fw_ui_tab_icon { - display: inline-block; - .dimension_width_height_s; - margin: 5px 1px 0 1em; - - .img_filter_gray; - } - - // FOR SVG IMG - object { - .dimension_width_height_s; - /*background-color: @gray_0;*/ - margin: 8px 1px 0 5px; - .border_radius(5px,0, 0, 5px); - - - } - - - } - - // ########## - // # # - // # # - // ########## - /*aktive Tabs*/ - .egw_fw_ui_tab_header_active { - border-width: 1px 1px 0px 1px !important; - /*padding: 0 0 5px !important;*/ - .background_color_30_gray ; - background-image:none !important; - - &:hover {.background_color_25_gray ;} - - - // aktive Bilder - img.egw_fw_ui_tab_icon { - display: inline-block; - .dimension_width_height_s; - } - /*aktive Objekte*/ - object { - .dimension_width_height_m; - margin: 0px 1px 0 5px; - .border_radius(2px,0, 0, 2px); - - background-color: @gray_30; - } - } - } - - // ################# - // # close x # - // # # - // ################# - .egw_fw_ui_tab_close_button { - right: 3px; - top: 1px; - - display: inline-block; - .dimension_width_height_xs; - margin-left: 0px; - background-repeat: no-repeat; - background-position: center; - background-image: url(../images/close_button.png); - background-size: 10px 10px; - position: absolute; - - :hover { - background-image: url(../images/close_button_hover.png); - } - } - // Ende Tabs - } - - - // ################################ - // Hover - // no effect ? - .egw_fw_ui_tab_header_hover{ - background-color: @egw_color_1_e; - } - - // Der eigentliche Inhalt der APP - // ############################################################ - // # # # # # # # # # #### - // # # # # # # # # # #### - // ############################################################ - // - // Content / Inhalt - // - // ############################################################ - - .egw_fw_ui_tab_content { - - - width: 100%; - padding: 0px; - margin: 0; - overflow-x: hidden; - overflow-y: hidden; - - - > div { - width: 100%; - padding: 0 0 0 0; - }; - } - // Ende Main -} - -/* ################################################################## -* ADMIN INDEX Tree -/* ################################################################## -*/ - - -.standartTreeImage { - .img_filter_gray; - .dimension_width_height_s; -} - -// old image (only) buttons, which should only display an image, no button -button.image_button { - background: none; - border: none; -} - - -// \ No newline at end of file diff --git a/pixelegg/less/layout_raster_buttons.less b/pixelegg/less/layout_raster_buttons.less new file mode 100644 index 0000000000..565d56b2ab --- /dev/null +++ b/pixelegg/less/layout_raster_buttons.less @@ -0,0 +1,266 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + + +/*################################################# + Add / Print / Logout / + - Name / Date +###################################################*/ +/*#egw_fw_topmenu_addons{}*/ + + + +// Button Logout +#egw_fw_logout { + background-image: url(../images/logout.png); + background-size: 16px 16px; + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + display: inline-block; + float: right; + margin-right: 1em; + margin-top: 0px; + z-index: 200; + .Button_size_square_16; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.border_radius_button_normal;*/ + padding: 0.5em; + top: 5px; + position: fixed; + right: 0px; + + + &:hover {.box_shadow_standard_light_hover;} + &:active {.Complete_Button_active;} + &:focus {.box_shadow_standard_light_inset;} +} + + + +// Button Print + +#egw_fw_print { + background-image: url(../images/print.png); + background-size: 16px 16px; + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + display: inline-block; + float: right; + margin-right: 5px; + margin-top: 0px; + position: fixed; + .Button_size_square_16; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.border_radius_button_normal;*/ + padding: 0.5em; + top: 5px; + right: 40px; + z-index: 200; + &:hover {.box_shadow_standard_light_hover;} + &:active {.Complete_Button_active;} + &:focus {.box_shadow_standard_light_inset;} + +} + + +/*################################################# +/* Second Line +/* e.g. Name / Datum / angemeldete User +###################################################*/ + + +#egw_fw_topmenu_info_items { + + // move to bottom of the page + position: fixed; + z-index: 1000; + bottom: 2px; + right: 5px; + padding-right: 20px; + + + .topmenu_info_item { + + overflow: visible; + + // Info Bell + &:nth-child(1) { + } + + // Name + &:nth-child(2) { + /*float: right;*/ + margin-top: 0; + font-size: 1em; + padding-right: 5px; + + } + + // angemeldete User + &:nth-child(3) { + position: relative; + top: 0px; + display: inline-block; + + &:hover {.box_shadow_standard_light_hover;} + &:focus {.box_shadow_standard_light_inset;} + + /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/ + + } + + // Add + &:nth-child(4) { + + } + + } + + /*Notification*/ + #topmenu_info_notifications {} + + /*user info*/ + #topmenu_info_user_info { + display: inline-block; + } + + /*current user info*/ + #topmenu_info_current_users {} + + /*current user info*/ + #topmenu_info_current_users {} + + /*time zone*/ + form { height: 0px; + select {padding: 0px;} + } + + /*quick*/ + #topmenu_info_quick_add { + + // ############################################################################## + // quick_add + // Fist you see an ADD Icon, via Mouseover it expand right, to an select field + + span#quick_add { + /*border: 1px solid rgba(0, 0, 0, 0.15);*/ + /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ + float: right; + padding: 0.5em; + position: fixed; + right: 80px; + top: 5px; + + background-image: url(../images/add.png); + background-repeat: no-repeat; + background-size: 20px 20px; + background-position: 4px 4px; + + .border_radius_button_normal; + .dimension_width_height_s; + + &:before { + content: " "; + font-size: 2em; + color: @egw_color_2_a; + line-height: 0.6em; + background-color: white; + } + + &:hover {.box_shadow_standard_light_hover;} + &:focus {.box_shadow_standard_light_inset;} + } + + // ############################################################################## + // quick_add selectbox + // ADD different APPs + select#quick_add_selectbox { + + visibility: hidden; + border: medium none; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + position: relative !important; + right: 1px !important; + top: -3px; + left: 35px; + + } + + } + + // ############################################################################## + // JS ERROR BUTTON + // blinking red IMG + img#topmenu_info_error{ + .dimension_width_height_s; + position: fixed; + + /*.Button_size_square_16;*/ + + .border_normal; + .box_shadow_standard_light; + padding: 5px; + top: 6px; + right: 112px; + z-index: 200; + &:hover {.box_shadow_standard_light_hover;} + &:active {.Complete_Button_active;} + &:focus {.box_shadow_standard_light_inset;} + + background-color: @color_warning; + + + //blinking + -moz-transition:all 1s ease-in-out; + -webkit-transition:all 1s ease-in-out; + -o-transition:all 1s ease-in-out; + -ms-transition:all 1s ease-in-out; + transition:all 1s ease-in-out; + /* order: name, direction, duration, iteration-count, timing-function */ + -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */ + -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */ + -ms-animation:blink normal 2s infinite ease-in-out; /* IE */ + animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */ + + } + + + + @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */ + @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */ + @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */ + @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */ + +} + + +// Update images +div#topmenu_info_update{ + + display: inline-block; + + img{ .rounded(5px);} + + +} \ No newline at end of file diff --git a/pixelegg/less/layout_raster_header.less b/pixelegg/less/layout_raster_header.less new file mode 100644 index 0000000000..653e459168 --- /dev/null +++ b/pixelegg/less/layout_raster_header.less @@ -0,0 +1,267 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + + +// Header +#egw_fw_header{ + + width: 100%; + float: left; + background-color: @egw_color_2_e; + + /* Logo EGW or Company - left top*/ + #egw_divLogo { + float: left; + width: 255px; + display: block; + margin-left: -8px; + text-align: center; + height: 45px; + /*.background_color_5_gray;*/ + + img { + max-width: 209px; + border: none; + position: absolute; + top: 0.1em; + left: 1em; + height: 40px; + /*.background_color_5_gray;*/ + } + + } + + +/* ########################################################################################################################################### + Topmenu / Home / Einstellungen / Zugriff / Kategorien usw.. + ########################################################################################################################################### +*/ + + #egw_fw_topmenu ul, + #egw_fw_topmenu > * > ul > li, + .topmenu_info_item, + #egw_fw_topmenu_items, + #egw_fw_topmenu_info_items { + display: inline; + } + + #egw_fw_topmenu{ + + + + #egw_fw_topmenu_items { + float: left; + padding-top: 14px; + width: 70%; + + ul { + margin: 5px 2px; + + li{ + color: @gray_0; + /*.Button_size_square_32;*/ + padding: 8px 10px; + /*.Complete_Button_normal;*/ + /*background-color: @gray_10;*/ + + + &:hover{.Complete_Button_hover; color: @gray_0;} + &:active {.Complete_Button_active;} + .transition (0.2s, ease-out); + + a { + color: @gray_100; + text-decoration: none; + .dimension_height_l; + /*font-size: 1.1em;*/ + .fontsize_l; + line-height: 1.5em; + + + &:hover { + color: @gray_10; + border-color: @gray_50; + text-decoration: none !important; + } + + &:before { + /*.img_filter_gray;*/ + /*-webkit-filter: grayscale(100%) brightness(100%) contrast(100%);*/ + /*-webkit-filter: invert(100%);*/ + } + } + + } + + /*Home*/ + li:first-child{ + margin-left: 10px; + :before{border: none;} + } + + /*home*/ + a#topmenu_home { + margin-left: 0px; + &:before { + padding-right: 20px; + .fontsize_l; + content: " "; + background-image: url(../images/topmenu_items/home.png); + background-repeat: no-repeat; + background-size: 20px 20px; + .dimension_width_height_m; + } + + } + + + /*Setup / Einstellungen*/ + a#topmenu_prefs{ + margin-left: 0px; + &:before { + padding-right: 20px; + content: ""; + background-image: url(../images/topmenu_items/setup.png); + background-repeat: no-repeat; +/* background-size: 20px 20px;*/ + .dimension_width_height_xs; + } + } + + /*access / Zugriff */ + a#topmenu_acl{ + &:before { + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_xs; + background-image: url(../images/topmenu_items/access.png); + } + } + /*category*/ + a#topmenu_cats{ + &:before { + background-image: url(../images/topmenu_items/category.png); + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_xs; + } + } + /*password*/ + a#topmenu_preferences{ + &:before { + background-image: url(../images/topmenu_items/password.png); + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_xs; + } + } + /*help*/ + a#topmenu_manual{ + &:before { + background-image: url(../images/topmenu_items/help.png); + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_xs; + } + } + /*Search*/ + a#topmenu_search{ + &:before { + background-image: url(../images/topmenu_items/search.png); + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_xs; + } + } + /*logout*/ + a#topmenu_logout{ + &:before { + background-image: url(../images/topmenu_items/logout.png); + padding-right: 20px; + content: ""; + background-repeat: no-repeat; + .dimension_width_height_s; + } + } + } // Ende ul + + + } // Ende Items + + + } // Ende Topmenu + + +} // Ende Header + +/* ################################################### + Slide Effekt + ###################################################*/ + + +#egw_fw_topmenu_slide{ + width: auto; + text-align: center; + height: 15px; + float: left; + position: fixed; + left: 194px; + +} + + /*ICON List*/ +#egw_fw_topmenu_slide.slidedown{ + background-image: url("../images/list.png"); + background-position: center center; + height: 15px; + width: 15px; + display: block; + margin-left: 5px; + margin-top: 10px; + background-size: 15px 15px; + float: left; + position: relative; + left: -5px; + cursor: pointer; +} + +/*Icon ARROW UP*/ +#egw_fw_topmenu_slide.slideup{ + background-image: url("../images/slideup.png"); + background-position: center center; + height: 15px; + width: 15px; + display: block; + margin-top: -36px; + margin-left: 40px; + cursor: pointer; + +} + +#slidetoggle{ + width: 20px; + height: 20px; + display: block; +} \ No newline at end of file diff --git a/pixelegg/less/layout_raster_main.less b/pixelegg/less/layout_raster_main.less new file mode 100644 index 0000000000..04782f5808 --- /dev/null +++ b/pixelegg/less/layout_raster_main.less @@ -0,0 +1,253 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + +/* ################################################################################################## +* Main +// ################################################################################## +// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # +// ## ## # +// ################################################################################## +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## SIDEBAR ## MAIN # +// ## ## #egw_fw_main # +// ## ## # +// ## ## # +// ## ## # +/* ##################################################################################################### +*/ + +#egw_fw_main { + padding: 0; + width: auto; + + // ######################################## + // APPS + // CHrome hack +/* @media screen and (-webkit-min-device-pixel-ratio:0) { + #egw_fw_tabs { + Chrome needs margin-top + margin-top: 3px; + } + }*/ + + // ####################################### + // AREA for Content + #egw_fw_tabs{ + position: relative; + background-color: transparent; + float: left; + width: 100%; + margin-top: 3px; + + + // ############################################################ + // Tabnavigation + // Statusmeldung + // definiert in layout_messages.less + // .egw_fw_ui_app_header_container { } + + + + // ######################tabs header ########################## + // # # # # # # # # # #### + // # # # # # # # # # #### + // # tab header # # # # # # # #### + // # # # # # # # # # #### + // ############################################################ + // Div um Tabs + + .egw_fw_ui_tabs_header { + margin: 0px 0 0 0; + padding: 1px 1px 0px 0px; + background-position: bottom; + background-repeat: repeat-x; + background-color: transparent; + height: 34px; + + h1 { + /*float: left;*/ + display: inline; + width: 100%; + text-align: center; + -webkit-margin-before: 0; + -webkit-margin-after: 0; + } + + img{ + text-align:center; + float: none; + margin: 0 auto; + .dimension_width_height_s; + } + + // Tab + // ########## + // # # + // # # + // ########## + // inaktive + + .egw_fw_ui_tab_header { + padding-left: 0; + position: relative; + .border_radius(5px,0, 0, 5px); + background: transparent; + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0px 5px 0px 0px; + padding: 2px 5px 7px 2px; + cursor: pointer; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: @gray_30;; + background-repeat:repeat-x; + height: 24px; + + &:hover { + /*.background_color_20_gray ;*/ + background-color: @egw_color_1_e; + } + + // APP Name + h1 { + /*font-size: 100%;*/ + .fontsize_m; + line-height: 1em; + margin:0 15px 2px 2px; + vertical-align: super; + } + + // Images + img.egw_fw_ui_tab_icon { + display: inline-block; + .dimension_width_height_s; + margin: 5px 1px 0 1em; + + .img_filter_gray; + } + + // FOR SVG IMG + object { + .dimension_width_height_s; + /*background-color: @gray_0;*/ + margin: 8px 1px 0 5px; + .border_radius(5px,0, 0, 5px); + + + } + + + } + + // ########## + // # # + // # # + // ########## + /*aktive Tabs*/ + .egw_fw_ui_tab_header_active { + border-width: 1px 1px 0px 1px !important; + /*padding: 0 0 5px !important;*/ + .background_color_30_gray ; + background-image:none !important; + + &:hover {.background_color_25_gray ;} + + + // aktive Bilder + img.egw_fw_ui_tab_icon { + display: inline-block; + .dimension_width_height_s; + } + /*aktive Objekte*/ + object { + .dimension_width_height_m; + margin: 0px 1px 0 5px; + .border_radius(2px,0, 0, 2px); + + background-color: @gray_30; + } + } + } + + // ################# + // # close x # + // # # + // ################# + .egw_fw_ui_tab_close_button { + right: 3px; + top: 1px; + + display: inline-block; + .dimension_width_height_xs; + margin-left: 0px; + background-repeat: no-repeat; + background-position: center; + background-image: url(../images/close_button.png); + background-size: 10px 10px; + position: absolute; + + :hover { + background-image: url(../images/close_button_hover.png); + } + } + // Ende Tabs + } + + + // ################################ + // Hover + // no effect ? + .egw_fw_ui_tab_header_hover{ + background-color: @egw_color_1_e; + } + + // Der eigentliche Inhalt der APP + // ############################################################ + // # # # # # # # # # #### + // # # # # # # # # # #### + // ############################################################ + // + // Content / Inhalt + // + // ############################################################ + + .egw_fw_ui_tab_content { + + + width: 100%; + padding: 0px; + margin: 0; + overflow-x: hidden; + overflow-y: hidden; + + + > div { + width: 100%; + padding: 0 0 0 0; + }; + } + // Ende Main +} \ No newline at end of file diff --git a/pixelegg/less/layout_raster_scrollarea.less b/pixelegg/less/layout_raster_scrollarea.less new file mode 100644 index 0000000000..46f153b4f4 --- /dev/null +++ b/pixelegg/less/layout_raster_scrollarea.less @@ -0,0 +1,99 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + +// ############################################################## +// ## ## +// ## ## +// Scrollarea + +.egw_fw_ui_scrollarea +{ + overflow: hidden; + z-index: 0; +} + +.egw_fw_ui_scrollarea_button +{ + position: absolute; + display: block; + width: 100%; + height: 12px; + z-index: 2; +} + +.egw_fw_ui_scrollarea_button_up.egw_fw_ui_scrollarea_button_hover, +.egw_fw_ui_scrollarea_button_down.egw_fw_ui_scrollarea_button_hover +{ + background-image:url(../images/scroll_hover.png); +} + +.egw_fw_ui_scrollarea_button_disabled +{ + display: none !important; +} + +.egw_fw_ui_scrollarea_button_up, .egw_fw_ui_scrollarea_button_down +{ + height: 14px; + background-image:url(../images/scroll.png); + background-color: white; + background-repeat: no-repeat; + background-position: center; +} + +.egw_fw_ui_scrollarea_button_up +{ + top: 0px; +} + +.egw_fw_ui_scrollarea_button_down +{ + bottom: 0px; +} + +.egw_fw_ui_scrollarea_outerdiv +{ + height: 100%; +} + + + + + +.egw_fw_content_browser_div { + display: block; + overflow-x: hidden; + overflow-y: auto; + padding: 0 10px; + background-color: @gray_20; + /* background-color: RGB(240, 240, 255);*/ +} + +.egw_fw_content_browser_div_loading { + position: absolute; + z-index: 1000; + top: 0px; + left: 0px; + .dimension_width_height_s; + background-image: url(../images/ajax-loader.gif); + background-position: center; + background-repeat: no-repeat; +} + diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less new file mode 100644 index 0000000000..c9ec6134db --- /dev/null +++ b/pixelegg/less/layout_raster_sidebar.less @@ -0,0 +1,550 @@ +/** + * EGroupware: Stylite Pixelegg template + * + * Definitions for layout and raster + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package pixelegg + * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ + */ +/* + Created on : 23.07.2014, 13:25:11 + Author : stefanreinhardt +*/ + +@import (reference) "definitions.less"; + +/* ################################################################################################################ + * Sidebar + * ################################################################################################################*/ + +// AREA UNDER LOGO +#egw_fw_sidebar { + position: fixed; + overflow: hidden; + top: 43px; + left: 0px; + bottom: 20px; + width: 225px; + /*.background_color_5_gray;*/ + + //SIDE AREA + #egw_fw_sidemenu { + position: absolute; + top: 0px; + bottom: 4px; + left: 4px; + right: 5px; + overflow: hidden; + z-index: 0; + padding-top: 0.6em; + font-size: 0.9em; + + // SIDE AREA + .egw_fw_ui_scrollarea_outerdiv{ + .background_color_5_gray; + + + //#################################################### + // AREA for + // DRAG AND DROP + div.ui-sortable { + + div { + padding: 3px 0 1px 3px; + cursor: pointer; + } + } + + + //#################################################### + // All Tabs + // DRAG AND DROP + .egw_fw_ui_sidemenu_entry_header { + display: block; + margin: 0 0; + /*padding: 0px 5px 5px 10px;*/ + + &:hover { + .background_color_15_gray; + .rounded(5px); + } + + &:active {.box_shadow_standard_light_inset;} + + + h1 { + margin: 0 0 10px 0; + padding-top: 0.31em; + padding-left: 3em; + .color_40_gray; + /*font-size: 12px;*/ + .fontsize_l; + line-height: 17px; + } + + object {background-color: @gray_0; .dimension_width_height_m;} + + } + + + + // #################################### + // #### # + // ### IMG | ADD NAME # + // ### # + // ### # + //########################################### + // aktive APP + // aktiver Tab + // rounded Corner Left Top + .egw_fw_ui_sidemenu_entry_header_active { + // + cursor: pointer; + background-image: url("../images/clear.png"); + background-position: 95% -3000px; + background-repeat: no-repeat; + + .background_color_10_gray; + .border_radius ( 5px, 0px, 0px, 27px ); + .bordered (@gray_30, @gray_30, @gray_30, @gray_30); + + margin: 0 0 0 0; + border-bottom: none; + height: 33px; + + + img {padding-left: 9px; padding-top: 6px; height: 18px;} + + h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;} + + &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );} + &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );} + + &:focus { + background-image: url("../images/ajax-loader.gif"); + background-repeat: no-repeat; + background-position: 90% 50%; + .Complete_Button_active; + + .background_color_25_gray; + } + + object { + margin-left: 14px; + margin-top: 8px; + .rounded (3px;); + .dimension_width_height_s; + } + + .egw_fw_ui_ajaxloader {margin-top: -26px;} + + } + + //#################################################### + // Rahmen um APP Einstellungen + // egw_fw_ui_sidemenu_entry_content + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## div.egw_fw_ui_category ## + // ## &:nth-last-of-type(-n+3) ## + // ##################################### + + + + + + .egw_fw_ui_sidemenu_entry_content { + display: block; + background-image: none; + .border_radius (0, 0, 27px, 0); + border-color: @gray_30; + border-style: solid; + border-width: 0px; + margin: 0 0 2em 0; + + + // rounded Corner on bottom + &:nth-last-of-type(-n+3) { + padding: 5px 0.3em 1.5em 0.3em; + margin: 0 0 10px 0; + .background_color_30_gray; + .border_radius (0, 0, 24px, 0); + border-color: @gray_30; + } + + & > div {.background_color_30_gray;} + + //################################################### + // *letztes Element */ + // has round corners + div.egw_fw_ui_category:nth-last-of-type(-n+3) { + .border_radius (0, 0, 15px, 0); + } + + //################################################### + // Schaltflächen - Elements + // Normal + .egw_fw_ui_category { + margin: 4px 5px 5px 5px; + padding: 0.5em 1em 0.5em 0; + cursor: pointer; + // border-top: 7px solid; + border-color: @gray_30; + background-color: @gray_10; + + /*background-color: @egw_color_2_d;*/ + + .border_radius(3px,3px,3px,3px); + + h1 { + margin: 5px 0px 3px 5px; + padding: 0px 0px 0px 15px; + line-height: 1em; + .fontsize_l; + background-image:url(../images/arrow_left.png); + background-repeat:no-repeat; + background-position:left center; + } + + div.egw_fw_ui_category:nth-last-of-type(-n+3) { + img.egw_fw_ui_sidemenu_listitem_icon { + display: block; + } + } + + } + + //################################# + // Hover + // on Mouse over change color + .egw_fw_ui_category:hover { + .background_color_40_gray; + padding: 0.5em 1em 0.5em 0; + } + + + + /*######################*/ + // Active State + // change Background color in Blue + // See all Elements + .egw_fw_ui_category_active { + border-bottom-width: 0px; + margin-top: 4px; + + background-color: @egw_color_2_a; + + /*.background-color-50-gray;*/ + .color_5_gray; + .border_radius(3px,3px,3px,3px) !important; + + h1 { + background-image:url(../images/arrow_down.png); + line-height: 1em; + font-size: 12px; + + a { + color: #FFF; + + + img {.dimension_width_height_s;} + + &:hover { + padding: 5px 30px 5px 0px; + width: 200px; + .background_color_10_gray; + .color_50_gray; + .Complete_Button_hover; + } + } + + } + + &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);} + } + + + + + + } + + .egw_fw_ui_sidemenu_entry_content_bottom { + border-width: 0px 1px 1px 1px; + } + .egw_fw_ui_sidemenu_entry_header_bottom { + border-width: 0px; + border-color: @gray_0; + } + + .egw_fw_ui_sidemenu_entry_icon { + display: inline-block; + .dimension_height_m; + + padding-left: 0; + padding-right: 0px; + float: left; + + /*filter grey*/ + .img_filter_gray; + } + } + + + } // SIDEMENU ENDE + + + /*#################################*/ + // Trenner (Splitter) + #egw_fw_splitter { + position: absolute; + .background_color_30_gray; + width: 5px; + top: 40px; + bottom: 3px; + right: 0px; + + &:hover {background-color: @egw_color_1;} + } + // Ende Sidebar + +// Menu Seite links +} + + +/** DON"T MOVE THIS **/ +.egw_fw_ui_splitter_vertical { + background-image: url(../images/splitter_vert.png); + background-position: center; + background-repeat: no-repeat; + .background_color_30_gray; + position: absolute; + width: 5px; + height: 100%; + cursor: col-resize; +} + + + + + //#################################################### + // Submenu / Unterpunkte in der Seitenleiste + + // ######################################## + // ## ## + // ## ## + // ## ############################# ## + // ## #.egw_fw_ui_category_content# ## + // ## ############################# ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + + +.egw_fw_ui_category_content { + .background_color_0_gray; + border-top-width: 0; + border-left: 0px solid; + border-bottom: 0px solid; + margin-left: 4px; + margin-top: 0px; + padding-bottom: 5px; + padding-left: 0px; + padding-top: 3px; + margin-right: 5px; + /*min-height: 50px;*/ + + // Last Element rounded + &:last-of-type{ + .border_radius (0, 0, 10px, 0); + border-color: @gray_30; + } + + img { .dimension_height_s; vertical-align: middle;} + + &:hover { + .background_color_0_gray; + border-color: @gray_50; + } + + input#uical_select_owner_multiple{ + .dimension_height_s; + vertical-align: middle; + } + + // Favoriten anlegen und löschen + .sidebox-favorites{} // ist in etemplate2.less definiert + + +} + + + //#################################################### + // Submenu / Unterpunkte in der Seitenleiste + + // ######################################## + // ## ## + // ## ## + // ## ############################# ## + // ## #.egw_fw_ui_category_content# ## + // ## ############################# ## + // ## # # ## + // ## # .egw_fw_ui_sidemenu_listitem ## + // ## # # ## + // ## ############################# ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + + +// Sub Sub Menu Item + +.egw_fw_ui_sidemenu_listitem { + + padding: 9px 0px 0px 0px; + margin: 0px 0 1px 0px; + position: relative; + min-height: 18px; + background-color: @gray_0; + + // Submenu Hover Item - gelb + &:hover{ + .color_100_gray; + background-color: @egw_color_1_e; + + } + + + // Icon before + img.egw_fw_ui_sidemenu_listitem_icon { + /*display: none;*/ + .dimension_width_height_xs; + padding: 0px; + margin: 0px 5px; + float: left; + + } + + input { + height: 16px; + width: 81% !important; + } + + input[type="image"] { + height: 10px; + width: 10px !important; + margin-left: 1px; + } // mehrere Benutzer auswählen + + select { max-width: 85% !important; } + + // Icon rechts der Liste - Auswahl Button + img { + height: 9px; + width: 9px; + padding: 0px; + float: right; + } + + // normale Links + a { + // .Complete_Button_text; + padding: 5px 0px 5px 5px; + text-decoration: none; + min-width: 5em; + vertical-align: bottom; + + &:hover{ + .color_100_gray; + } + + &:active { + .box_shadow_standard_light_inset; + } + } + + + div { + a:first-child{ + .Complete_Button_text; + // padding: 2px; + // padding: 5px 30px 5px 0px; + width: 72% !important; + // background-color: red; + } + + a:first-child:hover { + // .Complete_Button_text_hover; + // .background-color-30-gray; + // padding: 5px 30px 5px 0px; + // width: 200px; + } + + //löschen + a:nth-child(2){ + position: absolute; + right: 0; + top: 0; + background: transparent; + padding: 0px 2px 0 2px; + width: 10px; + min-width: 5px; + + img { + margin: 0 0 0 0; + padding: 0em 0em 0 0em; + height: 10px; + width: 10px; + } + } + + a:nth-child(2):hover { + background-color: @color_warning; + .Complete_Button_Icon_hover ; + .color_0_gray; + // width: auto; + } + } + + +} // .egw_fw_ui_sidemenu_listitem +