diff --git a/src/assets/images/ic_close-modal.svg b/src/assets/images/ic_close-modal.svg deleted file mode 100644 index 0779100e..00000000 --- a/src/assets/images/ic_close-modal.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/src/assets/images/ic_close.svg b/src/assets/images/ic_close.svg new file mode 100644 index 00000000..fe604523 --- /dev/null +++ b/src/assets/images/ic_close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/plugins/Battery.js b/src/plugins/Battery.js index 4014c874..8ec0b925 100644 --- a/src/plugins/Battery.js +++ b/src/plugins/Battery.js @@ -74,7 +74,6 @@ module.exports = class Battery extends OverlayPlugin { */ renderWidget() { // Create elements - const {modal, container} = this.createTemplateModal({ title: this.i18n.BATTERY_TITLE || 'Battery', classes: 'gm-battery-plugin', @@ -184,7 +183,6 @@ module.exports = class Battery extends OverlayPlugin { this.chargeGroup.appendChild(sliderGroup); // Charge level input - const inputGroup = document.createElement('div'); this.chargeInput = textInput.createTextInput({ appendText: '%', value: '50', @@ -198,8 +196,7 @@ module.exports = class Battery extends OverlayPlugin { this.chargeInput.element.className = 'gm-charge-input'; - inputGroup.appendChild(this.chargeInput.element); - this.chargeGroup.appendChild(inputGroup); + this.chargeGroup.appendChild(this.chargeInput.element); return this.chargeGroup; } diff --git a/src/plugins/util/components.js b/src/plugins/util/components.js index bbfb7734..1444b5e1 100644 --- a/src/plugins/util/components.js +++ b/src/plugins/util/components.js @@ -181,8 +181,9 @@ const slider = (() => { */ const textInput = (() => { - const createTextInput = ({onChange = null, value = '', regexFilter, appendText = ''}) => { + const createTextInput = ({onChange = null, value = '', regexFilter, appendText = '', classes=''}) => { const inputDiv = document.createElement('div'); + inputDiv.className = classes; const inputDivContainer = document.createElement('div'); inputDivContainer.classList.add('text-input-container'); diff --git a/src/scss/base/_genymotion.scss b/src/scss/base/_genymotion.scss index fb975f63..0c476f6b 100644 --- a/src/scss/base/_genymotion.scss +++ b/src/scss/base/_genymotion.scss @@ -47,6 +47,13 @@ display: block; width: 30px; height: 30px; + + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; } &-video-overlay { @@ -213,7 +220,7 @@ .gm-separator { width: 100%; height: 1px; - background-color: color-mix(in srgb, var(--gm-modal-bg-color), grey 10%); + background-color: color-mix(in srgb, var(--gm-fourth-color), transparent 70%); margin: 10px 0; } diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index c4c56f34..56f1696c 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -55,4 +55,6 @@ $spacing-l: 20px; $spacing-xl: 30px; // Modal -$modal-x-padding: 40px; \ No newline at end of file +$modal-x-padding: 40px; +$modal-section-mb: $spacing-xl; +$modal-label-mb: $spacing-m; \ No newline at end of file diff --git a/src/scss/components/_battery.scss b/src/scss/components/_battery.scss index 99c8d141..09cbbab9 100644 --- a/src/scss/components/_battery.scss +++ b/src/scss/components/_battery.scss @@ -4,7 +4,6 @@ .device-renderer-instance .gm-battery-plugin { .gm { &-charging-group { - margin-top: 15px; display: flex; justify-content: space-between; align-items: center; @@ -46,7 +45,7 @@ display: flex; justify-content: space-around; align-items: center; - margin-bottom: 30px; + margin-bottom: $modal-section-mb; > div:nth-child(2) { flex-grow: 1; @@ -119,7 +118,7 @@ .gm-charge-input { width: 39px; - margin-bottom: 37px; + margin-top: -30px; } .gm-charge-slider { diff --git a/src/scss/components/_textInput.scss b/src/scss/components/_textInput.scss index 92a8e1f2..c632d1ae 100644 --- a/src/scss/components/_textInput.scss +++ b/src/scss/components/_textInput.scss @@ -3,6 +3,7 @@ color: var(--gm-input-text-color); display: flex; align-items: center; + height: 34px; &:has(.text-input:read-only) { border-bottom: 2px solid transparent; @@ -21,9 +22,9 @@ } &:read-only { - background: color-mix(in srgb, var(--gm-btn-bg-color-disabled), transparent 80%); //TODO + background: color-mix(in srgb, var(--gm-fourth-color), transparent 90%); border: none; - color: var(--gm-btn-bg-color-disabled) //TODO + color: var(--gm-fourth-color) } } } \ No newline at end of file diff --git a/src/scss/components/_toolbar.scss b/src/scss/components/_toolbar.scss index 3202f193..96601b94 100644 --- a/src/scss/components/_toolbar.scss +++ b/src/scss/components/_toolbar.scss @@ -5,12 +5,6 @@ .gm-toolbar { .gm { &-icon-button { - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; background-color: var(--gm-toolbar-icon-color); &:hover, diff --git a/src/scss/components/_widgetwindow.scss b/src/scss/components/_widgetwindow.scss index 095757a0..a5348869 100644 --- a/src/scss/components/_widgetwindow.scss +++ b/src/scss/components/_widgetwindow.scss @@ -177,6 +177,9 @@ label { color: var(--gm-primary-color); font-weight: bold; + margin-bottom: $modal-label-mb; + display: block; + } .gm-modal-header { display: flex; @@ -187,7 +190,7 @@ font-size: 16px; font-weight: bold; letter-spacing: 0.1em; - border-bottom: 2px solid color-mix(in srgb, var(--gm-modal-bg-color), grey 10%); + border-bottom: 1px solid color-mix(in srgb, var(--gm-fourth-color), transparent 70%); } .gm-modal-title { @@ -197,11 +200,11 @@ } .gm-modal-close-btn { - mask-image: url('../assets/images/ic_close-modal.svg'); + mask-image: url('../assets/images/ic_close.svg'); mask-repeat: no-repeat; mask-position: top center; mask-size: contain; - -webkit-mask-image: url('../assets/images/ic_close-modal.svg'); + -webkit-mask-image: url('../assets/images/ic_close.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; -webkit-mask-size: contain; @@ -221,5 +224,6 @@ .gm-separator { width: calc(100% + $modal-x-padding + $modal-x-padding); margin-left: -$modal-x-padding; + margin-bottom: $spacing-m; } }