diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 80820cdd7a..089a94d018 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -5033,6 +5033,13 @@ td.message span.message { height: 16px; vertical-align: middle; } +.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper { + border-bottom-left-radius: 10px; + overflow-x: hidden !important; +} +.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label { + padding-bottom: 5px; +} .egw_fw_ui_sidemenu_listitem { padding: 9px 0px 0px 0px; margin: 0px 0 1px 0px; @@ -6257,6 +6264,139 @@ a.textSidebox { .pageGenTime > span:last-child:after { content: ""; } +/** + * EGroupware: Pixelegg styles + * + * Pixelegg definitions for tutorials + * + * 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 Hadi NAtegh + * @package phpgwapi + * @version $Id$ + */ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for tutorials + * + * 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 Hadi NAtegh + * @package phpgwapi + * @version $Id$ + */ +span.egw_tutorial_title { + color: black; + font-weight: bold; + text-align: left; + width: 95%; + background-color: #D6DEF0; + border: 1px solid #B3B3B3; + padding-top: 4px; + padding-left: 5px; + padding-bottom: 5px; + border-radius: 2px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; +} +.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn, +.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn { + background-color: #FF0000; + opacity: 0.68; +} +.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn > div, +.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn > div { + border-left-color: white; +} +.egw_tutorial_thumb { + background-repeat: no-repeat; + background-position: -2px; + border-radius: 5px; +} +[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn, +#home-tutorial_play.egw_tutorial_playBtn { + display: block; + margin: 10%; + border: 2px solid rgba(0, 0, 0, 0.7); + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + width: 40px; + height: 40px; + cursor: pointer; +} +[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn > div, +#home-tutorial_play.egw_tutorial_playBtn > div { + display: block; + position: relative; + top: 10px; + left: 45%; + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid rgba(0, 0, 0, 0.8); +} +[id^="egw_tutorial_"][id$="sidebox_list"] { + overflow-x: hidden; + overflow-y: auto; +} +#home-tutorial_list { + float: left; +} +#home-tutorial_list .egw_tutorial_thumb { + display: block; +} +#home-tutorial_list .th .et2_label { + font-size: 12px; + padding-left: 7px; +} +#home-tutorial_list .th #home-tutorial_apps { + margin-left: 5px; +} +#home-tutorial_list tbody td:first-child { + padding-top: 4px; +} +#home-tutorial_src { + border-left: 6px solid #E0E0E0; +} +.tutorial_popup { + background-color: white; + padding-top: 5px; + overflow-y: hidden; +} +.tutorial_videoList { + overflow-x: hidden; + overflow-y: auto; + height: 100%; + display: inline-block !important; +} +div.tutorial_iframe_wrapper { + position: absolute; + left: 211px; + right: 2px; + height: 90%; +} +span.egw_tutorial_title { + color: #FFFFFF; + font-weight: bold; + text-align: left; + width: 95%; + background-color: #434343; + border: 1px solid #B3B3B3; + padding-top: 4px; + padding-left: 5px; + border-radius: 2px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; +} /*@import "../less/layout_buttons_global.less";*/ /*@import "../less/layout_chosen.less";*/ /*@import "../less/layout_messages.less";*/ @@ -6833,7 +6973,7 @@ a.textSidebox { margin: 5px 0px 3px 5px; padding: 0px 0px 0px 15px; line-height: 1em; - font-size: 12.100000000000001px; + font-size: 12.1px; background-image: url(../images/arrow_left.png); background-repeat: no-repeat; background-position: left center; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 707fa4185a..7f61905104 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -5019,6 +5019,13 @@ td.message span.message { height: 16px; vertical-align: middle; } +.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper { + border-bottom-left-radius: 10px; + overflow-x: hidden !important; +} +.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label { + padding-bottom: 5px; +} .egw_fw_ui_sidemenu_listitem { padding: 9px 0px 0px 0px; margin: 0px 0 1px 0px; @@ -6243,6 +6250,139 @@ a.textSidebox { .pageGenTime > span:last-child:after { content: ""; } +/** + * EGroupware: Pixelegg styles + * + * Pixelegg definitions for tutorials + * + * 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 Hadi NAtegh + * @package phpgwapi + * @version $Id$ + */ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for tutorials + * + * 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 Hadi NAtegh + * @package phpgwapi + * @version $Id$ + */ +span.egw_tutorial_title { + color: black; + font-weight: bold; + text-align: left; + width: 95%; + background-color: #D6DEF0; + border: 1px solid #B3B3B3; + padding-top: 4px; + padding-left: 5px; + padding-bottom: 5px; + border-radius: 2px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; +} +.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn, +.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn { + background-color: #FF0000; + opacity: 0.68; +} +.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn > div, +.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn > div { + border-left-color: white; +} +.egw_tutorial_thumb { + background-repeat: no-repeat; + background-position: -2px; + border-radius: 5px; +} +[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn, +#home-tutorial_play.egw_tutorial_playBtn { + display: block; + margin: 10%; + border: 2px solid rgba(0, 0, 0, 0.7); + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + width: 40px; + height: 40px; + cursor: pointer; +} +[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn > div, +#home-tutorial_play.egw_tutorial_playBtn > div { + display: block; + position: relative; + top: 10px; + left: 45%; + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid rgba(0, 0, 0, 0.8); +} +[id^="egw_tutorial_"][id$="sidebox_list"] { + overflow-x: hidden; + overflow-y: auto; +} +#home-tutorial_list { + float: left; +} +#home-tutorial_list .egw_tutorial_thumb { + display: block; +} +#home-tutorial_list .th .et2_label { + font-size: 12px; + padding-left: 7px; +} +#home-tutorial_list .th #home-tutorial_apps { + margin-left: 5px; +} +#home-tutorial_list tbody td:first-child { + padding-top: 4px; +} +#home-tutorial_src { + border-left: 6px solid #E0E0E0; +} +.tutorial_popup { + background-color: white; + padding-top: 5px; + overflow-y: hidden; +} +.tutorial_videoList { + overflow-x: hidden; + overflow-y: auto; + height: 100%; + display: inline-block !important; +} +div.tutorial_iframe_wrapper { + position: absolute; + left: 211px; + right: 2px; + height: 90%; +} +span.egw_tutorial_title { + color: #FFFFFF; + font-weight: bold; + text-align: left; + width: 95%; + background-color: #434343; + border: 1px solid #B3B3B3; + padding-top: 4px; + padding-left: 5px; + border-radius: 2px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; +} /*@import "../less/layout_buttons_global.less";*/ /*@import "../less/layout_chosen.less";*/ /*@import "../less/layout_messages.less";*/ diff --git a/pixelegg/less/layout_definitions.less b/pixelegg/less/layout_definitions.less index 1eff3da4d4..afa82fa758 100644 --- a/pixelegg/less/layout_definitions.less +++ b/pixelegg/less/layout_definitions.less @@ -69,4 +69,5 @@ @import "layout_traditional.less"; +@import "layout_tutorials.less"; diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less index c9ec6134db..9774cf2ed6 100644 --- a/pixelegg/less/layout_raster_sidebar.less +++ b/pixelegg/less/layout_raster_sidebar.less @@ -404,7 +404,13 @@ // Favoriten anlegen und löschen .sidebox-favorites{} // ist in etemplate2.less definiert - + .egwTutorial div#list_grid_wrapper { + border-bottom-left-radius: 10px; + overflow-x:hidden !important; + .et2_label { + padding-bottom: 5px; + } + } } diff --git a/pixelegg/less/layout_tutorials.less b/pixelegg/less/layout_tutorials.less new file mode 100644 index 0000000000..6f5ea2d0e7 --- /dev/null +++ b/pixelegg/less/layout_tutorials.less @@ -0,0 +1,31 @@ +/** + * EGroupware: Pixelegg styles + * + * Pixelegg definitions for tutorials + * + * 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 Hadi NAtegh + * @package phpgwapi + * @version $Id$ + */ +@import (reference) "definitions.less"; +@import (less) "../../phpgwapi/templates/default/def_tutorials.css"; + +span.egw_tutorial_title { + color: #FFFFFF; + font-weight: bold; + text-align: left; + width: 95%; + background-color: #434343; + border: 1px solid #B3B3B3; + padding-top: 4px; + padding-left: 5px; + border-radius: 2px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; +} +