/** * EGroupware: Stylite Pixelegg template - mobile theme * * 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 pixelegg */ @import "pixelegg.less"; @import (reference) "../less/def_mobile.less"; @keyframes fw-firstload { 0%, 20%, 50%, 80%, 100% { transform:translateY(0); -webkit-transform: translateY(0); -moz-transform:translateY(0); } 40% { transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); } 60% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); } } @media all { :host{ --et2-favorites-left: .7em; } body{ background-color: transparent; // iOS appHeader class div.egw_fw_mobile_iOS_popup_appHeader{ padding-top:15px; } div.egw_fw_mobile_popup_appHeader { display: block !important; height: 32px !important; background-size : 2px; font-size: 150% !important; border-bottom: 3px solid #679fd2 !important; border-top: none !important; width: 100%; line-height: 32px !important; } //################### //# # //# Grid & NM # //# # //################### table.egwGridView_outer{ thead{ tr{ th{ font-size: small !important; } } } tbody{ tr{ touch-action:initial; td time, td.et2_date , td.et2_date_ro{ float: right; .mob-fontsize-s; } td { position: relative; .mobile_cat_col { position: absolute; min-height: 100%; top:0; left: 0px; width:10px; display: block; background-color: var(--category-color); } span.cat_.mobile_cat_col { background: #F5F5F5; } } } } } /*BOF close/back button styling*/ span.egw_fw_mobile_popup_close { width: 50px; height: 50px; float:left; background-image: url('../../node_modules/bootstrap-icons/icons/x-lg.svg'); -webkit-filter: contrast(2); background-repeat: no-repeat; z-index: 1000; padding-right: 5px; top:1px; left: 15px; background-position: 3px 7px; position: fixed; } /*EOF close/back button styling*/ #egw_fw_basecontainer{ background:white; #egw_fw_main { margin-top:15px; #egw_fw_tabs { margin-top:-3px; } } //################### //# # //# TOOLBAR # //# # //################### #egw_fw_top_toolbar{ width:300px; position:absolute; .egw_fw_logout { display:inline-block; margin-left:60px; a#topmenu_logout{ background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); background-repeat: no-repeat; width: 50px; height: 50px; background-size: 24px 24px; display: inline-block; background-position: center; } } #egw_fw_topmenu_info_items { #topmenu_info_search {display: none;} } #egwpopup_fw_notifications { } #egw_fw_appsToggle {display: none;} div.egw_fw_ui_tabs_header{ max-height: 60px; width: 60%; margin-left: 0; overflow-x: scroll; position: initial; white-space: nowrap; position: absolute; left: 83%; top: 15px; height: 50px; span{ margin:0; overflow: visible; height:38px; width:50px; border-width: 1px 1px 1px 1px; border:none; border-radius: 10px; img{ height:32px !important; width:32px !important; } h1{ display:none; } } } } .egw_fw_top_toolbar>div:hover{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } //FW Menu div#egw_fw_menu{ background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg); cursor: pointer; position: fixed; width: 50px; height: 50px; background-size: 24px 24px; background-repeat: no-repeat; z-index: 999; background-position:center; margin-left:10px; &:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } &:focus { outline: none; } } div#egw_fw_menu:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } div#egw_fw_topmenu_items{ width: 100%; display: block; padding-top:50px; select#rc_status_select { width: 100%; height: 40px; box-shadow: none; padding-right: 0; padding-left: 28px; background-size: auto; border-left: 0; border-right: 0; border-radius: 0; } ul{ border-left: 6px solid silver; display:inline-block; padding:0; margin:0; list-style-type: none; width:100%; backgroud-color:white; li{ display: -webkit-inline-box; display: -moz-inline-box; display: block; padding:2px; margin-left:20px; width:90%; &:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } a { background-position: left; padding-left: 3em; color: #636363;; font-size: 14px; line-height: 30px; text-decoration: none; width:100%; background-repeat: no-repeat; background-size: 24px 24px; display: inline-block; } } a#topmenu_home {display: none;} a#topmenu_prefs { background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); et2-image { display: none; } } a#topmenu_acl { background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); et2-image { display: none; } } a#topmenu_cats { background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg); et2-image { display: none; } } a#topmenu_password { background-image: url(../../node_modules/bootstrap-icons/icons/key.svg); et2-image { display: none; } } a#topmenu_search { background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); et2-image { display: none; } } a#topmenu_logout { background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); et2-image { display: none; } } a#topmenu_current_user{ background-image: url(../../node_modules/bootstrap-icons/icons/people.svg); et2-image { display: none; } } /*darkmode*/ a#topmenu_darkmode { background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg); et2-image { display: none; } } a#topmenu_darkmode.darkmode_on { background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg); et2-image { display: none; } } } } #egw_fw_userinfo { height:50px; z-index:1000; display: inline-block; float:right; span.avatar { display: inline-block; float:left; height: 35px; width: 35px; margin: 7px; cursor: pointer; img {width:35px} } span.user { display: inline-block; height: 50px; margin-left: 8px; font-size: 12pt; overflow: hidden; max-width: 225px; text-overflow: ellipsis; white-space: nowrap; margin-top:17px; } } }//End of toolbar // ######################tabs header ########################## // # # # # # # # # # #### // # # # # # # # # # #### // # tab header # # # # # # # #### // # # # # # # # # # #### // ############################################################ // Div 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 { 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_l; } // Tab // ########## // # # // # # // ########## // Inactive .egw_fw_ui_tab_header { padding-left: 0; position: relative; 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; background-repeat:repeat-x; height: 38px; width: 97%; &:hover { background-color: none !important; } &:active { -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); } // APP Name h1 { .fontsize_xl; line-height: 1em; margin:0 15px 2px 2px; vertical-align: super; padding-left: 25px; } // Images img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_l; margin: 5px 1px 0 1em; .img_filter_gray; } // FOR SVG IMG object { .dimension_width_height_l; margin: 8px 1px 0 5px; .border_radius(5px,0, 0, 5px); } } // ########## // # # // # # // ########## /*Active Tabs*/ .egw_fw_ui_tab_header_active { border-width: 1px 1px 0px 1px !important; .background_color_egw_light; &:hover {.background_color_egw_light ;} // Active image img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_l; -webkit-filter: contrast(2); -ms-filter:contrast(2); -moz-filter:contrast(2); -o-filter:contrast(2); } /*Active object*/ object { .dimension_width_height_l; margin: 0px 1px 0 5px; .border_radius(2px,0, 0, 2px); background-color: @gray_30; } } } //################### //# # //# SIDEBAR # //# # //################### #egw_fw_sidebar.avatarSubmenu {top:325px;} #egw_fw_sidebar{ background-color: white; #egw_fw_sidemenu::-webkit-scrollbar {width: 1px;} //SIDE AREA #egw_fw_sidemenu { overflow-y: auto; .egw_fw_ui_sidemenu_entry_icon {filter:none;} .egw_fw_ui_sidemenu_entry_apps { .egw_fw_ui_sidemenu_entry_header { margin:0px 5px 0px 2px; padding: 4px 10px 0 0px; overflow: visible; height:38px; border:none; img{ height:32px !important; width:32px !important; } display: block; &:hover { .background_color_15_gray; .rounded(0px); } &:active {.box_shadow_standard_light_inset;} h1,h2 { margin: 6px 0 10px 0; padding-top: 0.31em; padding-left: 3em; .color_40_gray; .fontsize_xl; line-height: 17px; } object {background-color: @gray_0; .dimension_width_height_m;} } } .egw_fw_ui_sidemenu_entry_header_active { // cursor: pointer; /*background-image: url("../../node_modules/bootstrap-icons/icons/clear.png");*/ background-position: 95% -3000px; background-repeat: no-repeat; .close { background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg); width: 18px; height: 33px; display: inline-block; float: right; background-size: 18px; background-repeat: no-repeat; background-position: center; margin-right: 5px; } .background_color_10_gray; .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,h2 { text-transform: uppercase; font-size: 12px; .color_100_gray; padding-top: 4px; padding-left:25px !important; display: inline-block; } &:hover { h1 {padding-left:70px !important}; .box_shadow_standard_light_hover; border-radius: 0; background-size: 22px; background-position: 20px 6px; } &:active {.box_shadow_standard_light_active; border-radius: 0;} &:focus { background-image: url("../../api/templates/default/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;} } .egw_fw_ui_sidemenu_entry_content { ul.egw_fw_ui_category_content { } } .egw_fw_ui_sidemenu_entry_content_bottom { border-width: 0px 1px 1px 1px; } } // SIDEMENU End }//End of Sidebar //ToggleClass .sidebar-toggle{ #egw_fw_top_toolbar { div#egw_fw_menu {background-image: url(../../node_modules/bootstrap-icons/icons/list.svg);} #egw_fw_topmenu_info_items, #egw_fw_topmenu, #egw_fw_userinfo, .egw_fw_logout, #egw_fw_appsToggle {display: none !important;} } #egw_fw_sidebar{ #egw_fw_sidemenu{ .egw_fw_ui_sidemenu_entry_content{ display:none !important; } .egw_fw_ui_sidemenu_entry_header_active { .close {display: none;} &:hover { border-radius:0; background-image: url("../../api/templates/default/images/ajax-loader.gif"); } img{ padding:0; } } .egw_fw_ui_sidemenu_entry_header{ margin:0px 0px 0px 2px; padding: 4px 0px 0 0px; overflow: visible; height:38px; width:50px; border:none; img{ height:32px !important; width:32px !important; } h1{ display:none; } } } } #egw_fw_topmenu_items { display:none !important; } } //################################### //# # //# FOOTER # //# # //################################### #egw_fw_footer { display:none; } //################################### //# # //# APP HEADER NAVIGATOR # //# # //################################### .egw_fw_ui_app_header_container { display:none; } .egw_fw_content_browser_div { padding: 0; background-color: white; } //################################### //# # //# POPUP FRAME # //# # //################################### .egw_fw_mobile_popup_container{ width:100%; height:100%; position:absolute; display: none; z-index: 999; background: rgba(192, 192, 192, 0.47); .egw_fw_mobile_popupFrame { width: 70%; height: 70%; visibility: hidden; display: block; background: #fff; margin: 8% auto; border: 1px solid silver; } } //################################### //# # //# popup dialog headbar # //# # //################################### .dialogHeadbar { height: 50px; box-shadow: 0px 4px 5px 2px silver; position: fixed; width: 100%; background: #0c5da5; top:0; right:0; z-index:1; .et2_button_with_image, .et2_button_text { height: 46px; margin: 1px; margin-left: 3px; } td { margin-left:70px; display: block; } } //################################### //# # //# Mail App specific style # //# # //################################### #mail-display { min-height: initial !important; .mailDisplayContainer { top:140px; } } } }