diff --git a/src/plugins/Screencast.js b/src/plugins/Screencast.js
index a23b881b..7a876cfc 100644
--- a/src/plugins/Screencast.js
+++ b/src/plugins/Screencast.js
@@ -247,7 +247,7 @@ module.exports = class Screencast extends OverlayPlugin {
this.screenshotBtn = document.createElement('div');
this.screenshotBtn.className = 'gm-action gm-screencast-screenshot';
screenshot.onclick = this.onScreenshotClick.bind(this);
- screenshot.className = 'gm-horizontal gm-screenshot';
+ screenshot.className = 'gm-screenshot';
const screenshotLabel = this.i18n.SCREENCAST_SCREENSHOT || 'Screenshot';
screenshot.innerHTML = '';
@@ -260,7 +260,7 @@ module.exports = class Screencast extends OverlayPlugin {
this.screencastBtn.className = 'gm-action gm-screencast-screencast';
this.screencast.onclick = this.onScreencastClick.bind(this);
- this.screencast.className = 'gm-horizontal gm-screencast';
+ this.screencast.className = 'gm-screencast';
const screencastLabel = this.i18n.SCREENCAST_SCREENCAST || 'Screencast';
this.screencast.innerHTML = '';
diff --git a/src/scss/components/_screencast.scss b/src/scss/components/_screencast.scss
index 3825f75a..54e144a5 100644
--- a/src/scss/components/_screencast.scss
+++ b/src/scss/components/_screencast.scss
@@ -24,33 +24,43 @@
pointer-events: none;
}
+ .gm-inputs {
+ display: flex;
+ }
+
.gm-screenshot,
.gm-screencast {
display: inline-block;
width: auto;
margin-right: 50px;
+ display: flex;
+ flex-direction: row-reverse;
.gm-action {
width: 32px;
min-height: 32px;
cursor: pointer;
display: block;
- float: left;
- background-size: 26px;
- background-repeat: no-repeat;
- background-position: center;
+ -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);
}
}
.gm-screenshot .gm-action {
- background-image: url('../assets/images/ic-screenshot_default.svg');
+ mask-image: url('../assets/images/ic_screenshot.svg');
+ --webkit-mask-image: url('../assets/images/ic_screenshot.svg');
}
.gm-screencast .gm-action {
- background-image: url('../assets/images/ic-screencast_default.svg');
+ mask-image: url('../assets/images/ic_screencast.svg');
+ --webkit-mask-image: url('../assets/images/ic_screencast.svg');
.disabled {
- background-image: url('../assets/images/ic-screencast_disabled.svg');
color: var(--gm-btn-bg-color-disabled);
}
}
diff --git a/src/scss/components/_widgetwindow.scss b/src/scss/components/_widgetwindow.scss
index f73ccbcf..3be8508d 100644
--- a/src/scss/components/_widgetwindow.scss
+++ b/src/scss/components/_widgetwindow.scss
@@ -47,21 +47,6 @@
margin-bottom: 30px;
}
- // TODO delete when screencast will be reworked
- .gm-horizontal {
- margin: 15px 0;
-
- label,
- input,
- button {
- display: inline-block;
- }
-
- label {
- width: 50%;
- }
- }
-
button {
color: var(--gm-btn-text-color);
background-color: var(--gm-btn-bg-color);