From 07e45e8d63aa5e2a0c49ca3622e6587c893ff411 Mon Sep 17 00:00:00 2001 From: milan <mk@egroupware.org> Date: Thu, 28 Nov 2024 16:43:12 +0100 Subject: [PATCH] mobile styling changes according to ticket #100951 and some styling cleanup --- pixelegg/css/fancy.css | 2 +- pixelegg/css/mobile.css | 64 ++++++++++++++---- pixelegg/css/mobile.less | 65 +++++++++++++----- pixelegg/css/pixelegg.css | 2 +- pixelegg/less/layout_loginPage.less | 2 +- pixelegg/mobile/fw_mobile.css | 100 +++++++++++++++------------- pixelegg/mobile/fw_mobile.less | 35 +--------- 7 files changed, 156 insertions(+), 114 deletions(-) diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 808605d579..394f443ed9 100644 --- a/pixelegg/css/fancy.css +++ b/pixelegg/css/fancy.css @@ -2226,7 +2226,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg); } #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] { - height: 25px; + height: 25px !important; margin-top: 7px; width: auto; } diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index ca2e9d6bd2..a9c80683d4 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -2229,7 +2229,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg); } #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] { - height: 25px; + height: 25px !important; margin-top: 7px; width: auto; } @@ -4413,10 +4413,10 @@ body.scrollVertical { } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone span { width: 100%; - text-align: center; + text-align: left; display: inline-block; background-color: #fafafa; - padding: 5px 0px 5px 0px; + padding: 5px 0px 5px 10px; } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone select { width: calc(100% - 20px); @@ -6063,8 +6063,9 @@ table.egwGridView_grid img { height: 16px; } table.egwGridView_grid et2-image { - width: 16px; - font-size: 16px; + width: 1em; + font-size: 1.5em; + display: flex; } table.egwGridView_grid tbody { border-bottom: 1px solid #000000; @@ -6871,6 +6872,13 @@ table.egwGridView_grid img.et2_appicon { border-top-color: #003366; border-top-width: 4px !important; } +/** +Addressbook sidebox grid table + */ +#egw_fw_sidemenu table.addressbook_view { + table-layout: fixed; + width: 100%; +} #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { background-color: rgba(51, 51, 51, 0.3); border-left: 4px solid #333333 !important; @@ -7158,6 +7166,10 @@ img.et2_button_icon[src*="svg"]:hover { --et2-button-image-padding-left: 0; padding-inline-start: 0; } +/*New favorite hide groups if no rights */ +et2-dialog div#add_favorite et2-select-account_ro { + display: none; +} @keyframes fw-firstload { 0%, 20%, @@ -7356,6 +7368,7 @@ img.et2_button_icon[src*="svg"]:hover { list-style-type: none; width: 100%; backgroud-color: white; + /*darkmode*/ } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li { display: -webkit-inline-box; @@ -7385,37 +7398,60 @@ img.et2_button_icon[src*="svg"]:hover { body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home { display: none; } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home { - background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg); - display: none; - } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs { background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl { background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats { background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password { background-image: url(../../node_modules/bootstrap-icons/icons/key.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search { background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl { - background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); - } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_calls { - background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg); + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search et2-image { + display: none; } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout { background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user { background-image: url(../../node_modules/bootstrap-icons/icons/people.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user et2-image { + display: none; + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode { + background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg); + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode et2-image { + display: none; + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on { + background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg); + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on et2-image { + display: none; + } body #egw_fw_basecontainer #egw_fw_userinfo { height: 50px; z-index: 1000; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index c5cdf20b03..a804e5521d 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -259,36 +259,69 @@ } } a#topmenu_home {display: none;} - a#topmenu_home { - background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg); - display: none; - } + a#topmenu_prefs { - background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); + 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); - } + 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); + a#topmenu_search { + background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); + et2-image { + display: none; + } } - a#topmenu_acl { - background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); - } - a#topmenu_calls { - background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg); - } - a#topmenu_logout{ + + 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; + } } } } diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index f36ddb2ac8..74fda7ba79 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -2219,7 +2219,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg); } #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] { - height: 25px; + height: 25px !important; margin-top: 7px; width: auto; } diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index 76a706dd6b..399eb6b848 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -365,7 +365,7 @@ div#loginMainDiv.stockLoginBackground { span.field_icons.domain {background-image: url(../../node_modules/bootstrap-icons/icons/globe2.svg);} span.field_icons.language {background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);} input[type="checkbox"] { - height: 25px; + height: 25px !important; margin-top: 7px; width: auto; } diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 4c9cce28aa..f0efb9bca4 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -2239,7 +2239,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg); } #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] { - height: 25px; + height: 25px !important; margin-top: 7px; width: auto; } @@ -3227,6 +3227,7 @@ div#popupMainDiv { padding: 8px; background-color: #FFFFFF; background-repeat: repeat-x; + overflow: auto; } div#popupMainDiv > * { margin: 0px; @@ -4422,10 +4423,10 @@ body.scrollVertical { } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone span { width: 100%; - text-align: center; + text-align: left; display: inline-block; background-color: #fafafa; - padding: 5px 0px 5px 0px; + padding: 5px 0px 5px 10px; } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone select { width: calc(100% - 20px); @@ -6072,8 +6073,9 @@ table.egwGridView_grid img { height: 16px; } table.egwGridView_grid et2-image { - width: 16px; - font-size: 16px; + width: 1em; + font-size: 1.5em; + display: flex; } table.egwGridView_grid tbody { border-bottom: 1px solid #000000; @@ -6677,6 +6679,13 @@ span.egw_tutorial_title { border-top-color: #003366; border-top-width: 4px !important; } +/** +Addressbook sidebox grid table + */ +#egw_fw_sidemenu table.addressbook_view { + table-layout: fixed; + width: 100%; +} #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { background-color: rgba(51, 51, 51, 0.3); border-left: 4px solid #333333 !important; @@ -6964,6 +6973,10 @@ img.et2_button_icon[src*="svg"]:hover { --et2-button-image-padding-left: 0; padding-inline-start: 0; } +/*New favorite hide groups if no rights */ +et2-dialog div#add_favorite et2-select-account_ro { + display: none; +} @keyframes fw-firstload { 0%, 20%, @@ -7162,6 +7175,7 @@ img.et2_button_icon[src*="svg"]:hover { list-style-type: none; width: 100%; backgroud-color: white; + /*darkmode*/ } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li { display: -webkit-inline-box; @@ -7191,37 +7205,60 @@ img.et2_button_icon[src*="svg"]:hover { body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home { display: none; } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home { - background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg); - display: none; - } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs { background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl { background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats { background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password { background-image: url(../../node_modules/bootstrap-icons/icons/key.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search { background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl { - background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); - } - body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_calls { - background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg); + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search et2-image { + display: none; } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout { background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout et2-image { + display: none; + } body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user { background-image: url(../../node_modules/bootstrap-icons/icons/people.svg); } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user et2-image { + display: none; + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode { + background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg); + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode et2-image { + display: none; + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on { + background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg); + } + body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on et2-image { + display: none; + } body #egw_fw_basecontainer #egw_fw_userinfo { height: 50px; z-index: 1000; @@ -8224,39 +8261,8 @@ table.egwGridView_grid img.et2_appicon { margin-top: 4px; margin-left: 0px; } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul { - border-left: 6px solid silver; - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li { - /*darkmode*/ - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_logout { - background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_home { - background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_prefs { - background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_acl { - background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_cats { - background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_password { - background-image: url(../../node_modules/bootstrap-icons/icons/key.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_search { - background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode { - background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg); - } - body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode.darkmode_on { - background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg); - filter: invert(1) hue-rotate(180deg); + body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items { + /*in mobile.less*/ } body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu { background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg); diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index 9a34bed6ce..be5bbb0aa0 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -445,40 +445,7 @@ } } div#egw_fw_topmenu_items { - ul { - border-left: 6px solid silver; - li{ - a#topmenu_logout{ - background-image: url(../../node_modules/bootstrap-icons/icons/power.svg); - } - a#topmenu_home { - background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg); - } - a#topmenu_prefs { - background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg); - } - a#topmenu_acl { - background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg); - } - a#topmenu_cats { - background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg); - } - a#topmenu_password { - background-image: url(../../node_modules/bootstrap-icons/icons/key.svg); - } - a#topmenu_search { - background-image: url(../../node_modules/bootstrap-icons/icons/search.svg); - } - /*darkmode*/ - a#topmenu_darkmode { - background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg); - } - a#topmenu_darkmode.darkmode_on { - background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg); - filter:invert(1) hue-rotate(180deg); - } - } - } + /*in mobile.less*/ } div#egw_fw_menu { background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg);