From 69a6900031f4e1edcc08bc5ed7684eca048cfb4a Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 29 Sep 2017 16:44:56 +0200 Subject: [PATCH] Give et2_dialog a new look --- pixelegg/css/mobile.css | 61 ++++++++++++++++++++++++++++++++++- pixelegg/css/pixelegg.css | 61 ++++++++++++++++++++++++++++++++++- pixelegg/less/jquery-ui.less | 41 ++++++++++++++++++++--- pixelegg/mobile/fw_mobile.css | 61 ++++++++++++++++++++++++++++++++++- 4 files changed, 216 insertions(+), 8 deletions(-) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 18b01e4b0d..44e4b91c4b 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -1337,8 +1337,30 @@ span.ui-icon-search { } /*###########################################*/ /*Dialog: edit row*/ +.ui-widget-overlay { + background: #CDCDCD; +} +.ui-dialog { + box-shadow: -2px 1px 9px 3px #B4B4B4; +} +.ui-dialog .ui-dialog-buttonpane { + padding-left: .8em; + padding-right: .8em; + padding-top: 0.7em; +} +.ui-dialog .ui-dialog-titlebar { + padding-left: .8em; + padding-right: .8em; + font-size: 12pt; + border: none; + font-weight: normal; + background: white; +} +.ui-dialog .ui-dialog-titlebar-close { + right: .8em; +} .ui-widget-content { - border: 1px solid #0C5DA5; + border: 1px solid #B4B4B4; } .ui-widget-content .et2_selectbox button.et2_button_text, .ui-widget-content .et2_selectbox select.et2_selectbox { @@ -1351,6 +1373,43 @@ span.ui-icon-search { background-color: #189800; font-weight: normal; } +button.ui-button { + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #E6E6E6; + padding-left: 30px; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + /*.Button_size_h32_auto;*/ + height: 24px; + border-color: #B4B4B4; + outline: none; +} +button.ui-button:hover { + background-color: #B4B4B4; + color: #1E1E1E; +} +button.ui-button .ui-button-icon-primary:hover { + background-color: #B4B4B4; + color: #1E1E1E; + box-shadow: none; +} /*###########################################*/ /*Dialog: calendar edit series*/ .ui-dialog-buttonset button.ui-button-text-only { diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index c591132249..07aad74f94 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -1326,8 +1326,30 @@ span.ui-icon-search { } /*###########################################*/ /*Dialog: edit row*/ +.ui-widget-overlay { + background: #CDCDCD; +} +.ui-dialog { + box-shadow: -2px 1px 9px 3px #B4B4B4; +} +.ui-dialog .ui-dialog-buttonpane { + padding-left: .8em; + padding-right: .8em; + padding-top: 0.7em; +} +.ui-dialog .ui-dialog-titlebar { + padding-left: .8em; + padding-right: .8em; + font-size: 12pt; + border: none; + font-weight: normal; + background: white; +} +.ui-dialog .ui-dialog-titlebar-close { + right: .8em; +} .ui-widget-content { - border: 1px solid #0C5DA5; + border: 1px solid #B4B4B4; } .ui-widget-content .et2_selectbox button.et2_button_text, .ui-widget-content .et2_selectbox select.et2_selectbox { @@ -1340,6 +1362,43 @@ span.ui-icon-search { background-color: #189800; font-weight: normal; } +button.ui-button { + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #E6E6E6; + padding-left: 30px; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + /*.Button_size_h32_auto;*/ + height: 24px; + border-color: #B4B4B4; + outline: none; +} +button.ui-button:hover { + background-color: #B4B4B4; + color: #1E1E1E; +} +button.ui-button .ui-button-icon-primary:hover { + background-color: #B4B4B4; + color: #1E1E1E; + box-shadow: none; +} /*###########################################*/ /*Dialog: calendar edit series*/ .ui-dialog-buttonset button.ui-button-text-only { diff --git a/pixelegg/less/jquery-ui.less b/pixelegg/less/jquery-ui.less index ffc95f742a..3e3448c5d6 100755 --- a/pixelegg/less/jquery-ui.less +++ b/pixelegg/less/jquery-ui.less @@ -271,10 +271,31 @@ span.ui-icon-search { /*###########################################*/ /*Dialog: edit row*/ - +.ui-widget-overlay { + background: @gray_20; +} +.ui-dialog { + box-shadow: -2px 1px 9px 3px @gray_30; + .ui-dialog-buttonpane { + padding-left: .8em; + padding-right: .8em; + padding-top: 0.7em; + } + .ui-dialog-titlebar { + padding-left: .8em; + padding-right: .8em; + font-size: 12pt; + border: none; + font-weight: normal; + background: white; + } + .ui-dialog-titlebar-close { + right: .8em; + } +} .ui-widget-content { - border: 1px solid @egw_color_2_a; + border: 1px solid @gray_30; .et2_selectbox { button.et2_button_text, @@ -285,11 +306,21 @@ span.ui-icon-search { } } } - +button.ui-button { + .Complete_Button_text_icon_before; + border-color: @gray_30; + outline: none; + &:hover{ background-color: @gray_30; color: @gray_90;} + .ui-button-icon-primary { + &:hover{ + background-color: @gray_30; + color: @gray_90; + box-shadow: none; + } + } +} /*###########################################*/ /*Dialog: calendar edit series*/ -.ui-dialog-buttonpane {} - .ui-dialog-buttonset{ button.ui-button-text-only { background-color: @gray_20; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 1a974a1be0..364d31c930 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -1348,8 +1348,30 @@ span.ui-icon-search { } /*###########################################*/ /*Dialog: edit row*/ +.ui-widget-overlay { + background: #CDCDCD; +} +.ui-dialog { + box-shadow: -2px 1px 9px 3px #B4B4B4; +} +.ui-dialog .ui-dialog-buttonpane { + padding-left: .8em; + padding-right: .8em; + padding-top: 0.7em; +} +.ui-dialog .ui-dialog-titlebar { + padding-left: .8em; + padding-right: .8em; + font-size: 12pt; + border: none; + font-weight: normal; + background: white; +} +.ui-dialog .ui-dialog-titlebar-close { + right: .8em; +} .ui-widget-content { - border: 1px solid #0C5DA5; + border: 1px solid #B4B4B4; } .ui-widget-content .et2_selectbox button.et2_button_text, .ui-widget-content .et2_selectbox select.et2_selectbox { @@ -1362,6 +1384,43 @@ span.ui-icon-search { background-color: #189800; font-weight: normal; } +button.ui-button { + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #E6E6E6; + padding-left: 30px; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + /*.Button_size_h32_auto;*/ + height: 24px; + border-color: #B4B4B4; + outline: none; +} +button.ui-button:hover { + background-color: #B4B4B4; + color: #1E1E1E; +} +button.ui-button .ui-button-icon-primary:hover { + background-color: #B4B4B4; + color: #1E1E1E; + box-shadow: none; +} /*###########################################*/ /*Dialog: calendar edit series*/ .ui-dialog-buttonset button.ui-button-text-only {