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