1/**
2 * EGroupware: Stylite Pixelegg template - mobile theme
3 *
4 * Please do NOT change css-files directly, instead change less-files and compile them!
5 *
6 * @link http://www.egroupware.org
7 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
8 * @author Hadi Nategh <hn@stylite.de>
9 * @package pixelegg
10 * @version $Id$
11 */
12
13@import "pixelegg.less";
14@import (reference) "../less/def_mobile.less";
15
16@keyframes fw-firstload {
17	0%, 20%, 50%, 80%, 100% {
18		transform:translateY(0);
19		-webkit-transform: translateY(0);
20		-moz-transform:translateY(0);
21	}
22	40% {
23		transform: translateY(-30px);
24		-webkit-transform: translateY(-30px);
25		-moz-transform: translateY(-30px);
26	}
27	60% {
28		transform: translateY(-15px);
29		-webkit-transform: translateY(-15px);
30		-moz-transform: translateY(-15px);
31	}
32}
33
34@media all {
35	body{
36
37		background-color: transparent;
38		// iOS appHeader class
39		div.egw_fw_mobile_iOS_popup_appHeader{
40			padding-top:15px;
41		}
42		div.egw_fw_mobile_popup_appHeader {
43			display: block !important;
44			height: 32px !important;
45			background-size	: 2px;
46			font-size: 150% !important;
47			border-bottom: 3px solid #679fd2 !important;
48			border-top: none !important;
49			width: 100%;
50			line-height: 32px !important;
51
52		}
53
54		#egw_fw_firstload {
55			position: absolute;
56			top: 0;
57			left: 0;
58			bottom: 0;
59			background: white;
60			height: 100%;
61			width: 100%;
62			&:before{
63				content:"";
64				display: inline-block;
65				position: absolute;
66				width: 100%;
67				height: 100%;
68				background-image: url(../../pixelegg/images/loading.svg);
69				background-position: center;
70				background-repeat: no-repeat;
71			}
72		}
73
74		//###################
75		//#					#
76		//#	 Grid & NM		#
77		//#					#
78		//###################
79		table.egwGridView_outer{
80			thead{
81				tr{
82					th{
83						font-size: small !important;
84					}
85				}
86			}
87			tbody{
88				tr{
89					touch-action:initial;
90					td time, td.et2_date , td.et2_date_ro{
91						float: right;
92						.mob-fontsize-s;
93					}
94					td {
95						position: relative;
96						.mobile_cat_col {
97							position: absolute;
98							min-height: 100%;
99							bottom:0;
100							top:0;
101							width:10px;
102							display: block;
103
104						}
105						span.cat_.mobile_cat_col {
106							background: #F5F5F5;
107						}
108					}
109				}
110			}
111		}
112		/*BOF close/back button styling*/
113		span.egw_fw_mobile_popup_close {
114			width: 50px;
115			height: 50px;
116			float:left;
117			background-image: url('../images/cancelled.png');/*url(../images/topmenu_items/mobile/menu_active.png);*/
118			-webkit-filter: contrast(2);
119			background-repeat: no-repeat;
120			z-index: 1000;
121			padding-right: 5px;
122			top:1px;
123			left: 15px;
124			background-position: 3px 7px;
125			position: fixed;
126		}
127
128		/*EOF close/back button styling*/
129
130		#egw_fw_basecontainer{
131			background:white;
132
133			#egw_fw_main {
134				margin-top:15px;
135				#egw_fw_tabs {
136					margin-top:-3px;
137				}
138			}
139			//###################
140			//#					#
141			//#		TOOLBAR		#
142			//#					#
143			//###################
144			#egw_fw_top_toolbar{
145				width:300px;
146				position:absolute;
147				.egw_fw_logout {
148					display:inline-block;
149					margin-left:60px;
150					a#topmenu_logout{
151						background-image: url(../images/logout.png);
152						background-repeat: no-repeat;
153						width: 50px;
154						height: 50px;
155						background-size: 24px 24px;
156						display: inline-block;
157						background-position: center;
158					}
159				}
160				#egw_fw_topmenu_info_items {
161					#topmenu_info_search {display: none;}
162				}
163				#egwpopup_fw_notifications {
164
165				}
166				#egw_fw_appsToggle {display: none;}
167				div.egw_fw_ui_tabs_header{
168					max-height: 60px;
169					width: 60%;
170					margin-left: 0;
171					overflow-x: scroll;
172					position: initial;
173					white-space: nowrap;
174					position: absolute;
175					left: 83%;
176					top: 15px;
177					height: 50px;
178					span{
179						margin:0;
180						overflow: visible;
181						height:38px;
182						width:50px;
183						border-width: 1px 1px 1px 1px;
184						border:none;
185						border-radius: 10px;
186
187						img{
188							height:32px !important;
189							width:32px !important;
190						}
191						h1{
192							display:none;
193						}
194					}
195				}
196			}
197
198			.egw_fw_top_toolbar>div:hover{
199				-webkit-box-shadow: none;
200				-moz-box-shadow: none;
201				box-shadow: none;
202			}
203
204
205			//FW Menu
206			div#egw_fw_menu{
207				background-image: url(../images/topmenu_items/mobile/menu_active.png);
208				cursor: pointer;
209				position: fixed;
210				width: 50px;
211				height: 50px;
212				background-size: 24px 24px;
213				background-repeat: no-repeat;
214				z-index: 999;
215				background-position:center;
216				margin-left:10px;
217				&:hover {
218					-webkit-box-shadow: none;
219					-moz-box-shadow: none;
220					box-shadow: none;
221				}
222				&:focus {
223					outline: none;
224				}
225			}
226			div#egw_fw_menu:active {
227				-webkit-box-shadow: none;
228				-moz-box-shadow: none;
229				box-shadow: none;
230			}
231			div#egw_fw_topmenu_items{
232				width: 100%;
233				display: block;
234				padding-top:50px;
235				select#rc_status_select {
236					width: 100%;
237					height: 40px;
238					box-shadow: none;
239					padding-right: 0;
240					padding-left: 28px;
241					background-size: auto;
242					border-left: 0;
243					border-right: 0;
244					border-radius: 0;
245				}
246				ul{
247					border-left: 6px solid silver;
248					display:inline-block;
249					padding:0;
250					margin:0;
251					list-style-type: none;
252					width:100%;
253					backgroud-color:white;
254					li{
255						display: -webkit-inline-box;
256						display: -moz-inline-box;
257						display: block;
258						padding:2px;
259						margin-left:20px;
260						width:90%;
261						&:hover {
262							-webkit-box-shadow: none;
263							-moz-box-shadow: none;
264							box-shadow: none;
265						}
266						a {
267							background-position: left;
268							padding-left: 3em;
269							color: #636363;;
270							font-size: 14px;
271							line-height: 30px;
272							text-decoration: none;
273							width:100%;
274							background-repeat: no-repeat;
275							background-size: 24px 24px;
276							display: inline-block;
277						}
278					}
279					a#topmenu_home {display: none;}
280					a#topmenu_home {
281						background-image: url(../images/topmenu_items/home.svg);
282						display: none;
283					}
284					a#topmenu_prefs {
285							background-image: url(../images/topmenu_items/setup.svg);
286					}
287					a#topmenu_acl {
288						background-image: url(../images/topmenu_items/access.svg);
289					}
290					a#topmenu_cats {
291						background-image: url(../images/topmenu_items/category.svg);
292					}
293					a#topmenu_password {
294						background-image: url(../images/topmenu_items/password.svg);
295					}
296					a#topmenu_search{
297							background-image: url(../images/topmenu_items/search.svg);
298					}
299					a#topmenu_acl {
300						background-image: url(../images/topmenu_items/access.svg);
301					}
302					a#topmenu_logout{
303						background-image: url(../images/logout.svg);
304					}
305					a#topmenu_current_user{
306						background-image: url(../images/users.png);
307					}
308				}
309			}
310			#egw_fw_userinfo {
311				height:50px;
312				z-index:1000;
313				display: inline-block;
314				float:right;
315				span.avatar {
316					display: inline-block;
317					float:left;
318					height: 35px;
319					width: 35px;
320					margin: 7px;
321					cursor: pointer;
322					img {width:35px}
323				}
324				span.user {
325					display: inline-block;
326					height: 50px;
327					margin-left: 8px;
328					font-size: 12pt;
329					overflow: hidden;
330					max-width: 225px;
331					text-overflow: ellipsis;
332					white-space: nowrap;
333					margin-top:17px;
334				}
335			}
336
337		}//End of toolbar
338
339		// ######################tabs header ##########################
340		// #      #      #     #     #     #     #     #     #     ####
341		// #      #      #     #     #     #     #     #     #     ####
342		// #  tab header #     #     #     #     #     #     #     ####
343		// #      #      #     #     #     #     #     #     #     ####
344		// ############################################################
345		// Div Tabs
346
347		.egw_fw_ui_tabs_header {
348			margin: 0px 0 0 0;
349			padding: 1px 1px 0px 0px;
350			background-position: bottom;
351			background-repeat: repeat-x;
352			background-color: transparent;
353			height: 34px;
354
355				h1 {
356					display: inline;
357					width: 100%;
358					text-align: center;
359					-webkit-margin-before: 0;
360					-webkit-margin-after: 0;
361				}
362
363				img{
364					text-align:center;
365					float: none;
366					margin: 0 auto;
367					.dimension_width_height_l;
368				}
369
370			// Tab
371			// ##########
372			// #        #
373			// #        #
374			// ##########
375			// Inactive
376
377
378
379			.egw_fw_ui_tab_header {
380				padding-left: 0;
381				position: relative;
382				background: transparent;
383				display: inline-block;
384				overflow: hidden;
385				white-space: nowrap;
386				text-overflow: ellipsis;
387				margin: 0px 5px 0px 0px;
388				padding: 2px 5px 7px 2px;
389				cursor: pointer;
390				background-repeat:repeat-x;
391				height: 38px;
392				width: 97%;
393				&:hover {
394					background-color: none !important;
395				 }
396				 &:active {
397					-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
398					-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
399					box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
400				 }
401				// APP Name
402				h1 {
403					.fontsize_xl;
404					line-height: 1em;
405					margin:0 15px 2px 2px;
406					vertical-align: super;
407					padding-left: 25px;
408				}
409
410				// Images
411				img.egw_fw_ui_tab_icon {
412					display: inline-block;
413					.dimension_width_height_l;
414					margin: 5px 1px 0 1em;
415
416					.img_filter_gray;
417				}
418
419				// FOR SVG IMG
420				object {
421				.dimension_width_height_l;
422				margin: 8px 1px 0 5px;
423				.border_radius(5px,0, 0, 5px);
424
425
426				}
427
428
429			}
430
431			// ##########
432			// #        #
433			// #        #
434			// ##########
435			/*Active Tabs*/
436			.egw_fw_ui_tab_header_active {
437				border-width: 1px 1px 0px 1px !important;
438				.background_color_egw_light;
439				&:hover {.background_color_egw_light ;}
440
441
442				// Active image
443				img.egw_fw_ui_tab_icon {
444					display: inline-block;
445					.dimension_width_height_l;
446					-webkit-filter: contrast(2);
447					-ms-filter:contrast(2);
448					-moz-filter:contrast(2);
449					-o-filter:contrast(2);
450				}
451				 /*Active object*/
452				 object {
453				.dimension_width_height_l;
454				margin: 0px 1px 0 5px;
455				.border_radius(2px,0, 0, 2px);
456
457				background-color: @gray_30;
458				}
459			}
460		}
461		//###################
462		//#					#
463		//#		SIDEBAR		#
464		//#					#
465		//###################
466		#egw_fw_sidebar.avatarSubmenu {top:325px;}
467		#egw_fw_sidebar{
468			background-color: white;
469			#egw_fw_sidemenu::-webkit-scrollbar {width: 1px;}
470			//SIDE AREA
471			#egw_fw_sidemenu {
472				overflow-y: auto;
473				.egw_fw_ui_sidemenu_entry_icon {filter:none;}
474				.egw_fw_ui_sidemenu_entry_apps {
475					.egw_fw_ui_sidemenu_entry_header
476					{
477						margin:0px 5px 0px 2px;
478						padding: 4px 10px 0 0px;
479						overflow: visible;
480						height:38px;
481						border:none;
482						img{
483							height:32px !important;
484							width:32px !important;
485						}
486						display: block;
487
488						&:hover {
489							.background_color_15_gray;
490							.rounded(0px);
491						}
492
493						&:active {.box_shadow_standard_light_inset;}
494
495						h1 {
496							margin: 6px 0 10px 0;
497							padding-top: 0.31em;
498							padding-left: 3em;
499							.color_40_gray;
500							.fontsize_xl;
501							line-height: 17px;
502						}
503
504						object {background-color: @gray_0; .dimension_width_height_m;}
505					}
506				}
507
508				.egw_fw_ui_sidemenu_entry_header_active {
509					//
510					cursor: pointer;
511					background-image: url("../images/clear.png");
512					background-position: 95% -3000px;
513					background-repeat: no-repeat;
514					.close {
515						background-image: url(/egroupware/pixelegg/images/close.svg);
516						width: 18px;
517						height: 33px;
518						display: inline-block;
519						float: right;
520						background-size: 18px;
521						background-repeat: no-repeat;
522						background-position: center;
523						margin-right: 5px;
524					}
525					.background_color_10_gray;
526					.bordered (@gray_30, @gray_30, @gray_30, @gray_30);
527
528					margin: 0 0 0 0;
529					border-bottom: none;
530					height: 33px;
531
532
533					img {padding-left: 9px; padding-top: 6px; height: 18px;}
534
535					h1 {
536						text-transform: uppercase;
537						font-size: 12px;
538						.color_100_gray;
539						padding-top: 4px;
540						padding-left:25px !important;
541						display: inline-block;
542					}
543
544					&:hover {
545						h1 {padding-left:70px !important};
546						.box_shadow_standard_light_hover;
547						border-radius: 0;
548						background-size: 22px;
549						background-position: 20px 6px;
550					}
551					&:active {.box_shadow_standard_light_active; border-radius: 0;}
552
553					&:focus {
554						background-image: url("../images/ajax-loader.gif");
555						background-repeat: no-repeat;
556						background-position: 90% 50%;
557						.Complete_Button_active;
558
559						.background_color_25_gray;
560					}
561
562					object {
563						margin-left: 14px;
564						margin-top: 8px;
565						.rounded (3px);
566						.dimension_width_height_s;
567					}
568
569					.egw_fw_ui_ajaxloader {margin-top: -26px;}
570
571				}
572
573				.egw_fw_ui_sidemenu_entry_content {
574
575
576					div.egw_fw_ui_category_content {
577
578					}
579				}
580
581				.egw_fw_ui_sidemenu_entry_content_bottom {
582					border-width: 0px 1px 1px 1px;
583				}
584			} // SIDEMENU End
585		}//End of Sidebar
586		//ToggleClass
587
588		.sidebar-toggle{
589			#egw_fw_top_toolbar {
590				div#egw_fw_menu {background-image:  url(../images/topmenu_items/mobile/menu.png);}
591				#egw_fw_topmenu_info_items, #egw_fw_topmenu, #egw_fw_userinfo, .egw_fw_logout, #egw_fw_appsToggle {display: none !important;}
592			}
593			#egw_fw_sidebar{
594				#egw_fw_sidemenu{
595					.egw_fw_ui_sidemenu_entry_content{
596						display:none !important;
597					}
598					.egw_fw_ui_sidemenu_entry_header_active {
599						.close {display: none;}
600						&:hover {
601							border-radius:0;
602							background-image: url("../images/ajax-loader.gif");
603						}
604						img{
605							padding:0;
606						}
607					}
608					.egw_fw_ui_sidemenu_entry_header{
609						margin:0px 0px 0px 2px;
610						padding: 4px 0px 0 0px;
611						overflow: visible;
612						height:38px;
613						width:50px;
614						border:none;
615						img{
616							height:32px !important;
617							width:32px !important;
618						}
619						h1{
620							display:none;
621						}
622					}
623				}
624			}
625			#egw_fw_topmenu_items {
626				display:none !important;
627			}
628		}
629
630		//###################################
631		//#									#
632		//#			FOOTER					#
633		//#									#
634		//###################################
635		#egw_fw_footer {
636			display:none;
637		}
638
639		//###################################
640		//#									#
641		//#			APP HEADER NAVIGATOR	#
642		//#									#
643		//###################################
644		.egw_fw_ui_app_header_container {
645			display:none;
646		}
647
648		.egw_fw_content_browser_div {
649			padding: 0;
650			background-color: white;
651		}
652
653		//###################################
654		//#									#
655		//#			POPUP FRAME				#
656		//#									#
657		//###################################
658		.egw_fw_mobile_popup_container{
659			width:100%;
660			height:100%;
661			position:absolute;
662			display: none;
663			z-index: 999;
664			background: rgba(192, 192, 192, 0.47);
665			.egw_fw_mobile_popupFrame {
666				width: 70%;
667				height: 70%;
668				visibility: hidden;
669				display: block;
670				background: #fff;
671				margin: 8% auto;
672				border: 1px solid silver;
673			}
674
675		}
676		//###################################
677		//#									#
678		//#		popup dialog headbar		#
679		//#									#
680		//###################################
681		.dialogHeadbar {
682			height: 50px;
683			box-shadow: 0px 4px 5px 2px silver;
684			position: fixed;
685			width: 100%;
686			background: #0c5da5;
687			top:0;
688			right:0;
689			z-index:1;
690			.et2_button_with_image, .et2_button_text {
691				height: 46px;
692				margin: 1px;
693				margin-left: 3px;
694			}
695			td {
696				margin-left:70px;
697				display: block;
698			}
699		}
700
701		//###################################
702		//#									#
703		//#		Mail App specific style		#
704		//#									#
705		//###################################
706		#mail-display {
707			min-height: initial !important;
708			.mailDisplayContainer {
709				top:140px;
710			}
711		}
712	}
713}
714