diff options
author | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-11 11:38:24 +0300 |
---|---|---|
committer | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-11 11:38:24 +0300 |
commit | ea165c479e875eead03ff770ba68290ae9af61db (patch) | |
tree | 0167fb3036debc777a08f9de4dc84a7fe9c66da0 /ui | |
parent | 0ad5887976e520733230dea22811bb928e091269 (diff) |
..F....... [DEV-2213] fixed checkboxes position; fixed range control height; fixed geomap widget filter paddings
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/partials/monitoring.problem.filter.php | 1 | ||||
-rw-r--r-- | ui/assets/styles/blue-theme.css | 96 | ||||
-rw-r--r-- | ui/assets/styles/dark-theme.css | 96 | ||||
-rw-r--r-- | ui/assets/styles/hc-dark.css | 96 | ||||
-rw-r--r-- | ui/assets/styles/hc-light.css | 96 |
5 files changed, 172 insertions, 213 deletions
diff --git a/ui/app/partials/monitoring.problem.filter.php b/ui/app/partials/monitoring.problem.filter.php index e0627962b8c..24d36d8bf48 100644 --- a/ui/app/partials/monitoring.problem.filter.php +++ b/ui/app/partials/monitoring.problem.filter.php @@ -118,7 +118,6 @@ $left_column ->setChecked($data['age_state'] == 1) ->setUncheckedValue(0) ->setId('age_state_#{uniqid}'), - (new CDiv())->addClass(ZBX_STYLE_FORM_INPUT_MARGIN), $filter_age, (new CDiv())->addClass(ZBX_STYLE_FORM_INPUT_MARGIN), _('days') diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css index 325d58710d4..f50c9564a0d 100644 --- a/ui/assets/styles/blue-theme.css +++ b/ui/assets/styles/blue-theme.css @@ -2896,7 +2896,6 @@ form.is-loading { box-shadow: inset 0 -1px 0 0 rgba(31, 44, 51, 0.1); color: #1f2c33; height: 22px; - line-height: 1; vertical-align: middle; white-space: nowrap; } .list-table.compact-view td [class*='icon-'] { @@ -3639,19 +3638,31 @@ select { .checkbox-radio { position: absolute !important; top: auto !important; + z-index: 1; width: 16px !important; height: 16px !important; - opacity: 0; - z-index: 1; } + opacity: 0; } + .checkbox-radio + label span { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + margin-right: 4px; + vertical-align: text-bottom; + background-color: #ffffff; + border: 1px solid #acbbc2; } + .checkbox-radio + label span:active { + border-color: #acbbc2; } + .checkbox-radio + label.label-pos-left span { + margin-left: 4px; + margin-right: 0; } .checkbox-radio:checked[readonly] + label span { transition: none; } .checkbox-radio:checked[readonly] + label span::after { border-color: #acbbc2 !important; } - .checkbox-radio[readonly], - .checkbox-radio[readonly] + label { + .checkbox-radio[readonly], .checkbox-radio[readonly] + label { pointer-events: none; } - .checkbox-radio[readonly] span, - .checkbox-radio[readonly] + label span { + .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span { transition: none; } .checkbox-radio[type="checkbox"] + label span { border-radius: 2px; } @@ -3682,20 +3693,6 @@ select { border-radius: 50%; } .checkbox-radio[type="radio"]:checked[disabled] + label span::after { background-color: #acbbc2 !important; } - .checkbox-radio + label span { - position: relative; - display: inline-block; - width: 14px; - height: 14px; - margin: -4px 4px 0 0; - bottom: -3px; - border: 1px solid #acbbc2; - background-color: #ffffff; } - .checkbox-radio + label span:active { - border-color: #acbbc2; } - .checkbox-radio + label.label-pos-left span { - margin-left: 6px; - margin-right: 1px; } .checkbox-radio:focus + label span { border-color: #02659f; } .checkbox-radio:checked:focus + label span { @@ -3707,7 +3704,7 @@ select { .checkbox-radio[disabled] + label span { transition: none; } -input[type="checkbox"], input[type="radio"] { +input[type="radio"] { margin: 0; padding: 0; border: 0; @@ -4211,8 +4208,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .radio-list-control input[type="radio"][disabled] + label, z-select[disabled] button, .z-select[disabled] button, z-select[readonly] button, -.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, -.checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { +.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { color: #acbbc2; background-color: #ebebeb !important; border-color: #ccd5d9; } @@ -5861,10 +5857,7 @@ svg { .checkbox-list li { overflow: hidden; text-overflow: ellipsis; - line-height: 20px; } - .checkbox-list li label { - line-height: 16px; - vertical-align: bottom; } + line-height: 24px; } .columns-wrapper { display: flex; @@ -6401,47 +6394,44 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control { position: relative; - display: inline-block; - vertical-align: middle; } + display: inline-flex; } .range-control input[type=range] { + width: calc(100% + 10px); + height: 20px; + margin: 2px -5px; + padding: 0; + vertical-align: top; + opacity: 0; cursor: pointer; -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ -moz-appearance: none; /* Hides the slider so that custom slider can be made */ - width: calc(100% + 10px); - opacity: 0; - vertical-align: middle; - margin: 0 -5px; - padding: 0; - height: 20px; /* Special styling for WebKit/Blink */ } .range-control input[type=range]:focus { outline: none; } .range-control input[type=range]::-webkit-slider-thumb, .range-control input[type=range]::-moz-range-thumb { - margin-top: 1px; - /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ height: 10px; width: 10px; + margin-top: 1px; + /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ opacity: 0; } .range-control input[type=range]::-webkit-slider-runnable-track { height: 10px; opacity: 0; } .range-control input[type=text] { - width: 31px; - float: right; } + width: 31px; } .range-control > div { position: relative; width: calc(100% - 10px - 31px); - margin: 2px 10px 0 0; - float: left; } + margin-right: 10px; } .range-control .range-control-track, .range-control .range-control-progress { position: absolute; top: 50%; - margin-top: -1px; left: 0; height: 2px; + margin-top: -1px; cursor: pointer; } .range-control .range-control-track { width: 100%; @@ -6451,12 +6441,12 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control .range-control-thumb { position: absolute; top: 50%; - margin-top: -5px; - margin-left: -5px; width: 10px; height: 10px; - border-radius: 50%; - background: #0275b8; } + margin-top: -5px; + margin-left: -5px; + background: #0275b8; + border-radius: 50%; } .range-control.range-control-focus .range-control-thumb { margin-top: -6.66667px; margin-left: -6.66667px; @@ -6473,15 +6463,15 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background: #c0c0c0; } .range-control datalist { position: absolute; + top: 50%; display: flex; width: 100%; - top: 50%; margin-top: -1px; } .range-control datalist option { - padding: 0; - font-size: 0; flex: 1 0 0; height: 2px; + padding: 0; + font-size: 0; border-left: 1px solid #ebeef0; } .graph-legend { @@ -6975,9 +6965,9 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), background-position: -117px -506px !important; } .geomap-filter { - border: 2px solid rgba(223, 228, 231, 0.4); + border: 1px solid #ccd5d9; background-color: #ffffff; - padding: 10px 30px 5px 10px; + padding: 5px 20px 5px 10px; position: absolute; margin-right: -2px; margin-top: 5px; @@ -6985,7 +6975,7 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), right: 0; } .geomap-filter.collapsed { - display: table; } + display: block; } .geomap-filter li { width: calc(100% + 20px); } diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css index aa7ec4fafe4..08a1d6b0927 100644 --- a/ui/assets/styles/dark-theme.css +++ b/ui/assets/styles/dark-theme.css @@ -2907,7 +2907,6 @@ form.is-loading { box-shadow: inset 0 -1px 0 0 rgba(242, 242, 242, 0.1); color: #f2f2f2; height: 22px; - line-height: 1; vertical-align: middle; white-space: nowrap; } .list-table.compact-view td [class*='icon-'] { @@ -3650,19 +3649,31 @@ select { .checkbox-radio { position: absolute !important; top: auto !important; + z-index: 1; width: 16px !important; height: 16px !important; - opacity: 0; - z-index: 1; } + opacity: 0; } + .checkbox-radio + label span { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + margin-right: 4px; + vertical-align: text-bottom; + background-color: #383838; + border: 1px solid #4f4f4f; } + .checkbox-radio + label span:active { + border-color: #4f4f4f; } + .checkbox-radio + label.label-pos-left span { + margin-left: 4px; + margin-right: 0; } .checkbox-radio:checked[readonly] + label span { transition: none; } .checkbox-radio:checked[readonly] + label span::after { border-color: #4f4f4f !important; } - .checkbox-radio[readonly], - .checkbox-radio[readonly] + label { + .checkbox-radio[readonly], .checkbox-radio[readonly] + label { pointer-events: none; } - .checkbox-radio[readonly] span, - .checkbox-radio[readonly] + label span { + .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span { transition: none; } .checkbox-radio[type="checkbox"] + label span { border-radius: 2px; } @@ -3693,20 +3704,6 @@ select { border-radius: 50%; } .checkbox-radio[type="radio"]:checked[disabled] + label span::after { background-color: #4f4f4f !important; } - .checkbox-radio + label span { - position: relative; - display: inline-block; - width: 14px; - height: 14px; - margin: -4px 4px 0 0; - bottom: -3px; - border: 1px solid #4f4f4f; - background-color: #383838; } - .checkbox-radio + label span:active { - border-color: #4f4f4f; } - .checkbox-radio + label.label-pos-left span { - margin-left: 6px; - margin-right: 1px; } .checkbox-radio:focus + label span { border-color: #768d99; } .checkbox-radio:checked:focus + label span { @@ -3718,7 +3715,7 @@ select { .checkbox-radio[disabled] + label span { transition: none; } -input[type="checkbox"], input[type="radio"] { +input[type="radio"] { margin: 0; padding: 0; border: 0; @@ -4222,8 +4219,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .radio-list-control input[type="radio"][disabled] + label, z-select[disabled] button, .z-select[disabled] button, z-select[readonly] button, -.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, -.checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { +.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { color: #525252; background-color: #2b2b2b !important; border-color: #3d3d3d; } @@ -5872,10 +5868,7 @@ svg { .checkbox-list li { overflow: hidden; text-overflow: ellipsis; - line-height: 20px; } - .checkbox-list li label { - line-height: 16px; - vertical-align: bottom; } + line-height: 24px; } .columns-wrapper { display: flex; @@ -6412,47 +6405,44 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control { position: relative; - display: inline-block; - vertical-align: middle; } + display: inline-flex; } .range-control input[type=range] { + width: calc(100% + 10px); + height: 20px; + margin: 2px -5px; + padding: 0; + vertical-align: top; + opacity: 0; cursor: pointer; -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ -moz-appearance: none; /* Hides the slider so that custom slider can be made */ - width: calc(100% + 10px); - opacity: 0; - vertical-align: middle; - margin: 0 -5px; - padding: 0; - height: 20px; /* Special styling for WebKit/Blink */ } .range-control input[type=range]:focus { outline: none; } .range-control input[type=range]::-webkit-slider-thumb, .range-control input[type=range]::-moz-range-thumb { - margin-top: 1px; - /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ height: 10px; width: 10px; + margin-top: 1px; + /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ opacity: 0; } .range-control input[type=range]::-webkit-slider-runnable-track { height: 10px; opacity: 0; } .range-control input[type=text] { - width: 31px; - float: right; } + width: 31px; } .range-control > div { position: relative; width: calc(100% - 10px - 31px); - margin: 2px 10px 0 0; - float: left; } + margin-right: 10px; } .range-control .range-control-track, .range-control .range-control-progress { position: absolute; top: 50%; - margin-top: -1px; left: 0; height: 2px; + margin-top: -1px; cursor: pointer; } .range-control .range-control-track { width: 100%; @@ -6462,12 +6452,12 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control .range-control-thumb { position: absolute; top: 50%; - margin-top: -5px; - margin-left: -5px; width: 10px; height: 10px; - border-radius: 50%; - background: #4796c4; } + margin-top: -5px; + margin-left: -5px; + background: #4796c4; + border-radius: 50%; } .range-control.range-control-focus .range-control-thumb { margin-top: -6.66667px; margin-left: -6.66667px; @@ -6484,15 +6474,15 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background: #c0c0c0; } .range-control datalist { position: absolute; + top: 50%; display: flex; width: 100%; - top: 50%; margin-top: -1px; } .range-control datalist option { - padding: 0; - font-size: 0; flex: 1 0 0; height: 2px; + padding: 0; + font-size: 0; border-left: 1px solid #0e1012; } .graph-legend { @@ -6986,9 +6976,9 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), background-position: -117px -506px !important; } .geomap-filter { - border: 2px solid rgba(48, 48, 48, 0.4); + border: 1px solid #383838; background-color: #2b2b2b; - padding: 10px 30px 5px 10px; + padding: 5px 20px 5px 10px; position: absolute; margin-right: -2px; margin-top: 5px; @@ -6996,7 +6986,7 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), right: 0; } .geomap-filter.collapsed { - display: table; } + display: block; } .geomap-filter li { width: calc(100% + 20px); } diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css index 6e9c33f7022..41998e58e00 100644 --- a/ui/assets/styles/hc-dark.css +++ b/ui/assets/styles/hc-dark.css @@ -2862,7 +2862,6 @@ form.is-loading { box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.1); color: #ffffff; height: 22px; - line-height: 1; vertical-align: middle; white-space: nowrap; } .list-table.compact-view td [class*='icon-'] { @@ -3605,19 +3604,31 @@ select { .checkbox-radio { position: absolute !important; top: auto !important; + z-index: 1; width: 16px !important; height: 16px !important; - opacity: 0; - z-index: 1; } + opacity: 0; } + .checkbox-radio + label span { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + margin-right: 4px; + vertical-align: text-bottom; + background-color: #383838; + border: 1px solid #666666; } + .checkbox-radio + label span:active { + border-color: #666666; } + .checkbox-radio + label.label-pos-left span { + margin-left: 4px; + margin-right: 0; } .checkbox-radio:checked[readonly] + label span { transition: none; } .checkbox-radio:checked[readonly] + label span::after { border-color: #666666 !important; } - .checkbox-radio[readonly], - .checkbox-radio[readonly] + label { + .checkbox-radio[readonly], .checkbox-radio[readonly] + label { pointer-events: none; } - .checkbox-radio[readonly] span, - .checkbox-radio[readonly] + label span { + .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span { transition: none; } .checkbox-radio[type="checkbox"] + label span { border-radius: 2px; } @@ -3648,20 +3659,6 @@ select { border-radius: 50%; } .checkbox-radio[type="radio"]:checked[disabled] + label span::after { background-color: #666666 !important; } - .checkbox-radio + label span { - position: relative; - display: inline-block; - width: 14px; - height: 14px; - margin: -4px 4px 0 0; - bottom: -3px; - border: 1px solid #666666; - background-color: #383838; } - .checkbox-radio + label span:active { - border-color: #666666; } - .checkbox-radio + label.label-pos-left span { - margin-left: 6px; - margin-right: 1px; } .checkbox-radio:focus + label span { border-color: #bbbbbb; } .checkbox-radio:checked:focus + label span { @@ -3673,7 +3670,7 @@ select { .checkbox-radio[disabled] + label span { transition: none; } -input[type="checkbox"], input[type="radio"] { +input[type="radio"] { margin: 0; padding: 0; border: 0; @@ -4177,8 +4174,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .radio-list-control input[type="radio"][disabled] + label, z-select[disabled] button, .z-select[disabled] button, z-select[readonly] button, -.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, -.checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { +.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { color: #7d7d7d; background-color: #000000 !important; border-color: #5a5a5a; } @@ -5818,10 +5814,7 @@ svg { .checkbox-list li { overflow: hidden; text-overflow: ellipsis; - line-height: 20px; } - .checkbox-list li label { - line-height: 16px; - vertical-align: bottom; } + line-height: 24px; } .columns-wrapper { display: flex; @@ -6358,47 +6351,44 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control { position: relative; - display: inline-block; - vertical-align: middle; } + display: inline-flex; } .range-control input[type=range] { + width: calc(100% + 10px); + height: 20px; + margin: 2px -5px; + padding: 0; + vertical-align: top; + opacity: 0; cursor: pointer; -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ -moz-appearance: none; /* Hides the slider so that custom slider can be made */ - width: calc(100% + 10px); - opacity: 0; - vertical-align: middle; - margin: 0 -5px; - padding: 0; - height: 20px; /* Special styling for WebKit/Blink */ } .range-control input[type=range]:focus { outline: none; } .range-control input[type=range]::-webkit-slider-thumb, .range-control input[type=range]::-moz-range-thumb { - margin-top: 1px; - /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ height: 10px; width: 10px; + margin-top: 1px; + /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ opacity: 0; } .range-control input[type=range]::-webkit-slider-runnable-track { height: 10px; opacity: 0; } .range-control input[type=text] { - width: 31px; - float: right; } + width: 31px; } .range-control > div { position: relative; width: calc(100% - 10px - 31px); - margin: 2px 10px 0 0; - float: left; } + margin-right: 10px; } .range-control .range-control-track, .range-control .range-control-progress { position: absolute; top: 50%; - margin-top: -1px; left: 0; height: 2px; + margin-top: -1px; cursor: pointer; } .range-control .range-control-track { width: 100%; @@ -6408,12 +6398,12 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control .range-control-thumb { position: absolute; top: 50%; - margin-top: -5px; - margin-left: -5px; width: 10px; height: 10px; - border-radius: 50%; - background: #f8f8f8; } + margin-top: -5px; + margin-left: -5px; + background: #f8f8f8; + border-radius: 50%; } .range-control.range-control-focus .range-control-thumb { margin-top: -6.66667px; margin-left: -6.66667px; @@ -6430,15 +6420,15 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background: #c0c0c0; } .range-control datalist { position: absolute; + top: 50%; display: flex; width: 100%; - top: 50%; margin-top: -1px; } .range-control datalist option { - padding: 0; - font-size: 0; flex: 1 0 0; height: 2px; + padding: 0; + font-size: 0; border-left: 1px solid #111111; } .graph-legend { @@ -6932,9 +6922,9 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), background-position: -117px -506px !important; } .geomap-filter { - border: 2px solid rgba(68, 68, 68, 0.4); + border: 1px solid #666666; background-color: #000000; - padding: 10px 30px 5px 10px; + padding: 5px 20px 5px 10px; position: absolute; margin-right: -2px; margin-top: 5px; @@ -6942,7 +6932,7 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), right: 0; } .geomap-filter.collapsed { - display: table; } + display: block; } .geomap-filter li { width: calc(100% + 20px); } diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css index bd628902053..cd685871f3f 100644 --- a/ui/assets/styles/hc-light.css +++ b/ui/assets/styles/hc-light.css @@ -2862,7 +2862,6 @@ form.is-loading { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); color: #000000; height: 22px; - line-height: 1; vertical-align: middle; white-space: nowrap; } .list-table.compact-view td [class*='icon-'] { @@ -3605,19 +3604,31 @@ select { .checkbox-radio { position: absolute !important; top: auto !important; + z-index: 1; width: 16px !important; height: 16px !important; - opacity: 0; - z-index: 1; } + opacity: 0; } + .checkbox-radio + label span { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + margin-right: 4px; + vertical-align: text-bottom; + background-color: #ffffff; + border: 1px solid #888888; } + .checkbox-radio + label span:active { + border-color: #888888; } + .checkbox-radio + label.label-pos-left span { + margin-left: 4px; + margin-right: 0; } .checkbox-radio:checked[readonly] + label span { transition: none; } .checkbox-radio:checked[readonly] + label span::after { border-color: #888888 !important; } - .checkbox-radio[readonly], - .checkbox-radio[readonly] + label { + .checkbox-radio[readonly], .checkbox-radio[readonly] + label { pointer-events: none; } - .checkbox-radio[readonly] span, - .checkbox-radio[readonly] + label span { + .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span { transition: none; } .checkbox-radio[type="checkbox"] + label span { border-radius: 2px; } @@ -3648,20 +3659,6 @@ select { border-radius: 50%; } .checkbox-radio[type="radio"]:checked[disabled] + label span::after { background-color: #888888 !important; } - .checkbox-radio + label span { - position: relative; - display: inline-block; - width: 14px; - height: 14px; - margin: -4px 4px 0 0; - bottom: -3px; - border: 1px solid #888888; - background-color: #ffffff; } - .checkbox-radio + label span:active { - border-color: #888888; } - .checkbox-radio + label.label-pos-left span { - margin-left: 6px; - margin-right: 1px; } .checkbox-radio:focus + label span { border-color: #000000; } .checkbox-radio:checked:focus + label span { @@ -3673,7 +3670,7 @@ select { .checkbox-radio[disabled] + label span { transition: none; } -input[type="checkbox"], input[type="radio"] { +input[type="radio"] { margin: 0; padding: 0; border: 0; @@ -4177,8 +4174,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .radio-list-control input[type="radio"][disabled] + label, z-select[disabled] button, .z-select[disabled] button, z-select[readonly] button, -.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, -.checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { +.z-select[readonly] button, .multiselect[aria-disabled], input[disabled], input[readonly], textarea[disabled], textarea[readonly], select option[disabled], select[disabled], select[readonly], .checkbox-radio[readonly] span, .checkbox-radio[readonly] + label span, .checkbox-radio[disabled] + label span, .macro-input-group button.btn-dropdown-toggle:disabled { color: #9f9f9f; background-color: #f0f0f0 !important; border-color: #9f9f9f; } @@ -5818,10 +5814,7 @@ svg { .checkbox-list li { overflow: hidden; text-overflow: ellipsis; - line-height: 20px; } - .checkbox-list li label { - line-height: 16px; - vertical-align: bottom; } + line-height: 24px; } .columns-wrapper { display: flex; @@ -6358,47 +6351,44 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control { position: relative; - display: inline-block; - vertical-align: middle; } + display: inline-flex; } .range-control input[type=range] { + width: calc(100% + 10px); + height: 20px; + margin: 2px -5px; + padding: 0; + vertical-align: top; + opacity: 0; cursor: pointer; -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ -moz-appearance: none; /* Hides the slider so that custom slider can be made */ - width: calc(100% + 10px); - opacity: 0; - vertical-align: middle; - margin: 0 -5px; - padding: 0; - height: 20px; /* Special styling for WebKit/Blink */ } .range-control input[type=range]:focus { outline: none; } .range-control input[type=range]::-webkit-slider-thumb, .range-control input[type=range]::-moz-range-thumb { - margin-top: 1px; - /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ height: 10px; width: 10px; + margin-top: 1px; + /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ opacity: 0; } .range-control input[type=range]::-webkit-slider-runnable-track { height: 10px; opacity: 0; } .range-control input[type=text] { - width: 31px; - float: right; } + width: 31px; } .range-control > div { position: relative; width: calc(100% - 10px - 31px); - margin: 2px 10px 0 0; - float: left; } + margin-right: 10px; } .range-control .range-control-track, .range-control .range-control-progress { position: absolute; top: 50%; - margin-top: -1px; left: 0; height: 2px; + margin-top: -1px; cursor: pointer; } .range-control .range-control-track { width: 100%; @@ -6408,12 +6398,12 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu .range-control .range-control-thumb { position: absolute; top: 50%; - margin-top: -5px; - margin-left: -5px; width: 10px; height: 10px; - border-radius: 50%; - background: #555555; } + margin-top: -5px; + margin-left: -5px; + background: #555555; + border-radius: 50%; } .range-control.range-control-focus .range-control-thumb { margin-top: -6.66667px; margin-left: -6.66667px; @@ -6430,15 +6420,15 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background: #c0c0c0; } .range-control datalist { position: absolute; + top: 50%; display: flex; width: 100%; - top: 50%; margin-top: -1px; } .range-control datalist option { - padding: 0; - font-size: 0; flex: 1 0 0; height: 2px; + padding: 0; + font-size: 0; border-left: 1px solid #ffffff; } .graph-legend { @@ -6932,9 +6922,9 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), background-position: -117px -506px !important; } .geomap-filter { - border: 2px solid rgba(159, 159, 159, 0.4); + border: 1px solid #383838; background-color: #ffffff; - padding: 10px 30px 5px 10px; + padding: 5px 20px 5px 10px; position: absolute; margin-right: -2px; margin-top: 5px; @@ -6942,7 +6932,7 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), right: 0; } .geomap-filter.collapsed { - display: table; } + display: block; } .geomap-filter li { width: calc(100% + 20px); } |