diff --git a/src/app/components/floating-column/floating-column.component.html b/src/app/components/floating-column/floating-column.component.html
index 4c697f53..507e96ff 100644
--- a/src/app/components/floating-column/floating-column.component.html
+++ b/src/app/components/floating-column/floating-column.component.html
@@ -10,7 +10,7 @@
diff --git a/src/app/components/floating-column/floating-column.component.scss b/src/app/components/floating-column/floating-column.component.scss
index efe59b60..82a6a6a2 100644
--- a/src/app/components/floating-column/floating-column.component.scss
+++ b/src/app/components/floating-column/floating-column.component.scss
@@ -29,9 +29,20 @@
}
.close-button {
+ // outline: 1px dotted orange;
+
display: block;
float: right;
font-size: 14px;
color: white;
- margin: 10px 16px 0 0;
+ margin: 5px 5px 0 0;
+
+ width: 40px;
+ height: 34px;
+
+ &__icon {
+ position: relative;
+ top: 6px;
+ left: 17px;
+ }
}
\ No newline at end of file
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.html b/src/app/components/stream/stream-overlay/stream-overlay.component.html
index 0ced8ea6..42f9e0fb 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.html
+++ b/src/app/components/stream/stream-overlay/stream-overlay.component.html
@@ -1,9 +1,5 @@
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.scss b/src/app/components/stream/stream-overlay/stream-overlay.component.scss
index 84cb7962..a33eb851 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.scss
+++ b/src/app/components/stream/stream-overlay/stream-overlay.component.scss
@@ -11,7 +11,9 @@ $header-content-height: 40px;
width: calc(100%);
height: $header-content-height;
background-color: $column-header-background-color;
- border-bottom: 1px solid #222736;
+ border-bottom: 1px solid #222736;
+
+ display: flex;
}
&__content-wrapper {
transition: all .2s;
@@ -44,11 +46,17 @@ $header-content-height: 40px;
}
&__button {
+ // outline: 1px dotted orange;
+
width: 25px;
height: 25px;
+
+ width: $header-content-height;
+ height: $header-content-height;
+
color: #354060;
transition: all .2s;
- margin: 8px 0 0 8px;
+
&:hover {
color: #536599;
color: #7a8dc7;
@@ -68,19 +76,8 @@ $header-content-height: 40px;
&__icon {
position: relative;
- left: 7px;
- top: -1px
- }
- }
- &-next {
- display: block;
- float: left;
- font-size: 18px;
-
- &__icon {
- position: relative;
- left: 8px;
- top: -1px
+ left: 17px;
+ top: 7px
}
}
&-refresh {
@@ -90,29 +87,38 @@ $header-content-height: 40px;
&__icon {
position: relative;
- left: 5px;
- top: 1px
+ left: 13px;
+ top: 9px
+ }
+ }
+ &-next {
+ display: block;
+ float: left;
+ font-size: 18px;
+
+ &__icon {
+ position: relative;
+ left: 13px;
+ top: 7px
}
}
&-gototop {
- position: absolute;
- top: 0;
- left: 110px;
- right: 40px;
+ // outline: 1px dotted orange;
+
+ flex-grow: 1;
+
display: block;
height: $header-content-height;
}
&-close {
display: block;
- float: right;
font-size: 13px;
color: white;
- margin-right: 8px;
&__icon {
position: relative;
- left: 7px;
- top: 1px
+ left: 15px;
+ top: 9px
}
}
}