Dialog styling W.I.P.:

- Get all buttons fit into footer toolbar for calendar edit - Fix tabs flicker when switching between tabs - Fix padding right for td - Fix general styling for buttons
2025-01-12 00:48:26 +01:00 · 2016-04-07 12:42:27 +00:00 · 2016-04-07 12:42:27 +00:00 · e75a1b6348
commit e75a1b6348
parent 6e3da3d7e3
15 changed files with 118 additions and 141 deletions
--- a/calendar/inc/class.calendar_hooks.inc.php
+++ b/calendar/inc/class.calendar_hooks.inc.php
@ -31,8 +31,8 @@ class calendar_hooks
 				'menuaction' => 'calendar.calendar_uiforms.edit',
 			),
 			'view_id'    => 'cal_id',
-			'view_popup' => '750x400',
-			'edit_popup' => '750x400',
+			'view_popup' => '790x400',
+			'edit_popup' => '790x400',
 			'list'  => array(
 				'menuaction' => 'calendar.calendar_uiviews.index',
 				'view' => 'listview',
@ -43,7 +43,7 @@ class calendar_hooks
 			),
 			'add_app'    => 'link_app',
 			'add_id'     => 'link_id',
-			'add_popup'  => '750x400',
+			'add_popup'  => '790x400',
 			'file_access' => 'calendar.calendar_bo.file_access',
 			'file_access_user' => true,	// file_access supports 4th parameter $user
 			'mime' => array(
@ -51,7 +51,7 @@ class calendar_hooks
 					'menuaction' => 'calendar.calendar_uiforms.edit',
 					'mime_data' => 'ical_data',
 					'mime_url' => 'ical_url',
-					'mime_popup' => '750x400',
+					'mime_popup' => '790x400',
 					'mime_target' => '_blank'
 				),
 			),
@ -826,7 +826,7 @@ END:VALARM';
 		unset($data);	// not used, but in function signature for hooks
 		return true;
 	}
-	
+
 	/**
 	 * Mail integration hook to import mail message contents into a calendar entry
 	 *
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@ -1302,9 +1302,6 @@ img.calendar_print_button, img.calendar_print_appicon {
 	display: none;
 }

-#calendar-edit select#calendar-edit_duration {
-	width: 133px;
-}
 #calendar-edit_account + .chzn-container .chzn-results {
 	max-height: 195px;
 }
--- a/calendar/templates/default/edit.xet
+++ b/calendar/templates/default/edit.xet
@ -43,15 +43,7 @@
 		</grid>
 	</template>
 	<template id="calendar.edit.participants" template="" lang="" group="0" version="1.9.001">
-		<hbox disabled="@no_add" height="60">
-			<button id="add" image="add" background_image="1" novalidate="1"/>
-			<calendar-owner id="participant" allowFreeEntries="true" empty_label="Add new participants or resource" width="40%"/>
-			<textbox type="integer" label="Quantity" id="quantity" min="1" size="3"/>
-			<menulist>
-				<menupopup label="Role" class="selectRole" id="role"/>
-			</menulist>
-		</hbox>
-		<grid width="99%" id="participants" class="egwGridView_grid">
+		<grid width="99%" id="participants">
 			<columns>
 				<column width="85"/>
 				<column/>
@ -61,7 +53,16 @@
 				<column/>
 			</columns>
 			<rows>
-				<row class="th">
+				<row class="th"></row>
+				<row disabled="@no_add" height="35">
+					<button align="center" id="add" image="add" background_image="1" novalidate="1"/>
+					<calendar-owner id="participant" allowFreeEntries="true" span="2" empty_label="Add new participants or resource"/>
+					<textbox type="integer" align="center" id="quantity" min="1" size="3"/>
+					<menulist>
+						<menupopup class="selectRole" id="role"/>
+					</menulist>
+				</row>
+				<row class="th thb">
 					<description value="Type"/>
 					<description value="Participants"/>
 					<description align="center" value="Quantity"/>
@ -88,10 +89,11 @@
 	<template id="calendar.edit.recurrence" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
 			<columns>
+				<column width="110"/>
+				<column width="208"/>
 				<column width="95"/>
+				<column width="208"/>
 				<column/>
-				<column/>
-				<column width="50%"/>
 			</columns>
 			<rows>
 				<row class="th">
@ -102,28 +104,31 @@
 					<date-time id="recurrence" readonly="true"/>
 					<description id="reference" />
 					<description id="uid" />
+					<label/>
 				</row>
 				<row height="12">
 					<description for="recur_type" value="Repeat type"/>
-					<menulist>
+					<menulist class="et2_fullWidth">
 						<menupopup id="recur_type" onchange="app.calendar.check_recur_type"/>
 					</menulist>
 					<description for="recur_interval" value="Interval"/>
-					<menulist>
+					<menulist class="et2_fullWidth">
 						<menupopup type="select-number" statustext="repeating interval, eg. 2 to repeat every second week" id="recur_interval" options="None,2,31"/>
 					</menulist>
+					<label/>
 				</row>
 				<row height="12">
 					<description for="recur_enddate" value="End date"/>
-					<date statustext="repeat the event until which date (empty means unlimited)" id="recur_enddate"/>
+					<date statustext="repeat the event until which date (empty means unlimited)" id="recur_enddate" class="et2_fullWidth"/>
 					<description for="tzid" value="Timezone"/>
-					<menulist>
+					<menulist class="et2_fullWidth">
 						<menupopup type="select-timezone" statustext="Timezone in which recurrences have identical time" id="tzid"/>
 					</menulist>
+					<label/>
 				</row>
 				<row valign="top">
 					<description for="recur_data" value="Repeat days"/>
-					<listbox type="select-dow" statustext="Days of the week for a weekly repeated event" id="recur_data" rows="6" options="1"/>
+					<listbox type="select-dow" class="et2_fullWidth" statustext="Days of the week for a weekly repeated event" id="recur_data" rows="6" options="1"/>
 					<vbox>
 						<description value="Exceptions"/>
 						<button statustext="Create an exception for the given date" label="@exception_label" id="button[exception]" no_lang="1" />
@ -140,6 +145,7 @@
 							</row>
 						</rows>
 					</grid>
+					<label/>
 				</row>
 			</rows>
 		</grid>
--- a/calendar/templates/mobile/app.css
+++ b/calendar/templates/mobile/app.css
@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar {
 * @package calendar
 * @version $Id$
 */
-/* $Id: app.css 55640 2016-04-05 21:38:49Z nathangray $ */
+/* $Id: app.css 55652 2016-04-06 16:43:51Z hnategh $ */
 /*Media print classes*/
@media print {
  #calendar-view.et2_container,
@ -1402,9 +1402,6 @@ img.calendar_print_appicon {
 .calendar_favorite_portlet .calendar_plannerScale a img {
  display: none;
 }
-#calendar-edit select#calendar-edit_duration {
-  width: 133px;
-}
 #calendar-edit_account + .chzn-container .chzn-results {
  max-height: 195px;
 }
@ -1774,26 +1771,6 @@ div.calendar {
 #calendar-edit .et2_tabheader {
  background-color: transparent;
 }
-#calendar-edit input.hasDatepicker,
-#calendar-edit #calendar-edit_start {
-  width: 129px;
-}
-#calendar-edit #calendar-edit_whole_day {
-  margin: 0 0.8em 0 23px;
-}
-#calendar-edit label.et2_label#calendar-edit_calendar_edit_duration {
-  /*margin-left: 20px;*/
-  /*margin-right: 49px;*/
-}
-#calendar-edit select#calendar-edit_duration {
-  width: 133px;
-}
-#calendar-edit button#calendar-edit_freetime {
-  height: 16px;
-  background-size: 12px auto !important;
-  margin-left: 32px;
-  padding-top: 0px;
-}
 #calendar-edit #calendar-edit_id {
  float: right;
  margin-right: 5px;
@ -2185,7 +2162,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  width: 16px;
  height: 16px;
 }
@ -2433,7 +2410,7 @@ button#series {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2490,7 +2467,7 @@ button#exception {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@ -1272,9 +1272,6 @@ img.calendar_print_appicon {
 .calendar_favorite_portlet .calendar_plannerScale a img {
  display: none;
 }
-#calendar-edit select#calendar-edit_duration {
-  width: 133px;
-}
 #calendar-edit_account + .chzn-container .chzn-results {
  max-height: 195px;
 }
@ -1644,20 +1641,6 @@ div.calendar {
 #calendar-edit .et2_tabheader {
  background-color: transparent;
 }
-#calendar-edit input.hasDatepicker,
-#calendar-edit #calendar-edit_start {
-  width: 129px;
-}
-#calendar-edit #calendar-edit_whole_day {
-  margin: 0 0.8em 0 23px;
-}
-#calendar-edit label.et2_label#calendar-edit_calendar_edit_duration {
-  /*margin-left: 20px;*/
-  /*margin-right: 49px;*/
-}
-#calendar-edit select#calendar-edit_duration {
-  width: 133px;
-}
 #calendar-edit #calendar-edit_id {
  float: right;
  margin-right: 5px;
@ -2049,7 +2032,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  width: 16px;
  height: 16px;
 }
@ -2297,7 +2280,7 @@ button#series {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2354,7 +2337,7 @@ button#exception {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@ -401,22 +401,6 @@ div.calendar { position: relative; }
        background-color: transparent;
    }

-    input.hasDatepicker,
-    #calendar-edit_start{width: 129px;}
-
-    //whole day
-    #calendar-edit_whole_day{
-        margin: 0 0.8em 0 23px;
-    }
-
-    //duration
-    label.et2_label#calendar-edit_calendar_edit_duration{
-            /*margin-left: 20px;*/
-            /*margin-right: 49px;*/
-
-        }
-    select#calendar-edit_duration{width: 133px;}
-
   // ID
   #calendar-edit_id{float: right;margin-right: 5px;}

--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@ -158,7 +158,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
  }
  .et2_button_icon {
    height: 16px;
@ -362,7 +362,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
@ -960,7 +960,7 @@
  }
  textarea,
  textarea.description {
-    background-color: rgba(255, 221, 115, 0.1);
+    background-color: #fafafa;
    padding: 0.3em 0 0 0.3em;
    border: none;
    height: auto;
@ -1451,7 +1451,7 @@ span.ui-icon-search {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2140,7 +2140,6 @@ button.et2_button_with_image {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-size: 20px auto;
@ -2197,7 +2196,7 @@ button.et2_button_delete {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2236,7 +2235,7 @@ button.et2_button_delete:hover {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2274,7 +2273,7 @@ button.et2_button_delete:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2344,7 +2343,7 @@ button#filemanager-select_button[ok]:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2409,7 +2408,7 @@ button#cancel {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2453,7 +2452,7 @@ button#cancel:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2516,7 +2515,7 @@ button[id="add"] {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2745,8 +2744,8 @@ input,
 button {
  color: #000000;
  /*font-size:99%;*/
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
  padding-right: 0;
  border-width: 1px;
  border-style: solid;
@ -3082,6 +3081,8 @@ tr.dialogHeader4 .et2_label {
  -moz-user-select: none;
  user-select: none;
  min-width: 73px;
+  border-bottom: 3px solid #e6e6e6;
+  margin-bottom: -3px;
 }
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
@ -3506,7 +3507,7 @@ td.lettersearch {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  height: 24px;
  padding: 0 5px;
 }
@ -5271,6 +5272,12 @@ button.image_button {
 .th {
  border-bottom: 1px solid #e6e6e6;
 }
+.th.thb {
+  border-color: darkgray;
+}
+.th.thb td {
+  padding-top: 10px;
+}
 .innerContainer {
  overflow: hidden;
  /*padding: 0;*/
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@ -147,7 +147,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
  }
  .et2_button_icon {
    height: 16px;
@ -351,7 +351,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
@ -949,7 +949,7 @@
  }
  textarea,
  textarea.description {
-    background-color: rgba(255, 221, 115, 0.1);
+    background-color: #fafafa;
    padding: 0.3em 0 0 0.3em;
    border: none;
    height: auto;
@ -1440,7 +1440,7 @@ span.ui-icon-search {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2129,7 +2129,6 @@ button.et2_button_with_image {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-size: 20px auto;
@ -2186,7 +2185,7 @@ button.et2_button_delete {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2225,7 +2224,7 @@ button.et2_button_delete:hover {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2263,7 +2262,7 @@ button.et2_button_delete:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2333,7 +2332,7 @@ button#filemanager-select_button[ok]:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2398,7 +2397,7 @@ button#cancel {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2442,7 +2441,7 @@ button#cancel:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2505,7 +2504,7 @@ button[id="add"] {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2734,8 +2733,8 @@ input,
 button {
  color: #000000;
  /*font-size:99%;*/
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
  padding-right: 0;
  border-width: 1px;
  border-style: solid;
@ -3071,6 +3070,8 @@ tr.dialogHeader4 .et2_label {
  -moz-user-select: none;
  user-select: none;
  min-width: 73px;
+  border-bottom: 3px solid #e6e6e6;
+  margin-bottom: -3px;
 }
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
@ -3495,7 +3496,7 @@ td.lettersearch {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  height: 24px;
  padding: 0 5px;
 }
@ -5260,6 +5261,12 @@ button.image_button {
 .th {
  border-bottom: 1px solid #e6e6e6;
 }
+.th.thb {
+  border-color: darkgray;
+}
+.th.thb td {
+  padding-top: 10px;
+}
 .innerContainer {
  overflow: hidden;
  /*padding: 0;*/
--- a/pixelegg/less/def_buttons.less
+++ b/pixelegg/less/def_buttons.less
@ -41,7 +41,7 @@
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
-    background-color: @gray_30;
+    background-color: @gray_10;

 }

@ -132,7 +132,7 @@
    /*background-color: @color_negative_action_hover !important;*/
    background-image:url('../images/delete.png');
    margin-left: 3em;
-    background-color: @gray_30;
+    background-color: @gray_10;
    .Complete_Button_text_icon_before;
    /*background-color: @color-negative-action !important;*/
    /*color: @gray_0 !important;*/
--- a/pixelegg/less/etemplate2.less
+++ b/pixelegg/less/etemplate2.less
@ -921,7 +921,7 @@ textarea.et2_textbox {
 }
 textarea,
 textarea.description {
-    background-color: @color_optional;
+    .background_color_5_gray;
    padding: 0.3em 0 0 0.3em;
    border: none;
 	height: auto;
--- a/pixelegg/less/layout_content_elements.less
+++ b/pixelegg/less/layout_content_elements.less
--- a/pixelegg/less/layout_dialog.less
+++ b/pixelegg/less/layout_dialog.less
@ -253,6 +253,8 @@ tr.dialogHeader4{
    -moz-user-select: none;
    user-select: none;
    min-width: 73px;
+	border-bottom:3px solid @gray_10;
+	margin-bottom:-3px;
   &:hover {
        .background_color_egw_lighter;
 		border:none;
--- a/pixelegg/less/layout_table.less
+++ b/pixelegg/less/layout_table.less
@ -33,7 +33,10 @@ table.et2_grid {
 .th {
    border-bottom: 1px solid @gray_10;
 }
-
+.th.thb {
+	border-color:darkgray;
+	td {padding-top:10px;}
+}
 .innerContainer{
    overflow: hidden;
    /*padding: 0;*/
--- a/pixelegg/less/layout_tutorials.css
+++ b/pixelegg/less/layout_tutorials.css
@ -80,6 +80,10 @@ span.egw_tutorial_title {
 [id^="egw_tutorial_"][id$="sidebox_list"] {
  overflow-x: hidden;
  overflow-y: auto;
+  max-height: 200px;
+}
+#list_grid_wrapper {
+  max-height: 200px;
 }
 #home-tutorial_list {
  float: left;
@ -113,8 +117,8 @@ span.egw_tutorial_title {
 }
 div.tutorial_iframe_wrapper {
  position: absolute;
-  left: 211px;
-  right: 2px;
+  left: 225px;
+  right: 12px;
  height: 90%;
 }
 span.egw_tutorial_title {
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@ -169,7 +169,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
  }
  .et2_button_icon {
    height: 16px;
@ -373,7 +373,7 @@
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
-    background-color: #b4b4b4;
+    background-color: #e6e6e6;
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
@ -971,7 +971,7 @@
  }
  textarea,
  textarea.description {
-    background-color: rgba(255, 221, 115, 0.1);
+    background-color: #fafafa;
    padding: 0.3em 0 0 0.3em;
    border: none;
    height: auto;
@ -1462,7 +1462,7 @@ span.ui-icon-search {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2151,7 +2151,6 @@ button.et2_button_with_image {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-size: 20px auto;
@ -2208,7 +2207,7 @@ button.et2_button_delete {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2247,7 +2246,7 @@ button.et2_button_delete:hover {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2285,7 +2284,7 @@ button.et2_button_delete:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2355,7 +2354,7 @@ button#filemanager-select_button[ok]:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2420,7 +2419,7 @@ button#cancel {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2464,7 +2463,7 @@ button#cancel:active {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2527,7 +2526,7 @@ button[id="add"] {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  padding-left: 30px;
  background-position: 6px center;
  background-repeat: no-repeat;
@ -2756,8 +2755,8 @@ input,
 button {
  color: #000000;
  /*font-size:99%;*/
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
  padding-right: 0;
  border-width: 1px;
  border-style: solid;
@ -2911,7 +2910,7 @@ div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package pixelegg
- * @version $Id: layout_dialog.less 55652 2016-04-06 16:43:51Z hnategh $
+ * @version $Id: layout_dialog.less 55667 2016-04-07 09:13:26Z hnategh $
 */
 /*body {
    background-color: @gray_0;
@ -3093,6 +3092,8 @@ tr.dialogHeader4 .et2_label {
  -moz-user-select: none;
  user-select: none;
  min-width: 73px;
+  border-bottom: 3px solid #e6e6e6;
+  margin-bottom: -3px;
 }
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
@ -3517,7 +3518,7 @@ td.lettersearch {
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
-  background-color: #b4b4b4;
+  background-color: #e6e6e6;
  height: 24px;
  padding: 0 5px;
 }
@ -5271,7 +5272,7 @@ button.image_button {
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package pixelegg
- * @version $Id: layout_table.less 55652 2016-04-06 16:43:51Z hnategh $
+ * @version $Id: layout_table.less 55667 2016-04-07 09:13:26Z hnategh $
 */
 /** #####################################################################################
 * et2
@ -5282,6 +5283,12 @@ button.image_button {
 .th {
  border-bottom: 1px solid #e6e6e6;
 }
+.th.thb {
+  border-color: darkgray;
+}
+.th.thb td {
+  padding-top: 10px;
+}
 .innerContainer {
  overflow: hidden;
  /*padding: 0;*/