diff --git a/app/index.html b/app/index.html
index 34dc3dc0..8c291b90 100644
--- a/app/index.html
+++ b/app/index.html
@@ -153,14 +153,14 @@
-
+
-
+
-
+
diff --git a/app/public/stylesheets/sass/_components/_config.scss b/app/public/stylesheets/sass/_components/_config.scss
index cc39663a..c04d34b2 100644
--- a/app/public/stylesheets/sass/_components/_config.scss
+++ b/app/public/stylesheets/sass/_components/_config.scss
@@ -7,6 +7,7 @@ $separatorDarkColor: #000;
$scColor: #f50;
$transitionValue: all 0.5s ease;
$transitionFastValue: all 0.25s ease;
+$transitionInstantValue: all 0.1s ease-out;
// HELPERS
.ui-db {
diff --git a/app/public/stylesheets/sass/_components/_following.scss b/app/public/stylesheets/sass/_components/_following.scss
index 028106f7..ba8caff7 100644
--- a/app/public/stylesheets/sass/_components/_following.scss
+++ b/app/public/stylesheets/sass/_components/_following.scss
@@ -1,4 +1,9 @@
-.following {}
+.following {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
.following_item {
display: inline-block;
diff --git a/app/public/stylesheets/sass/_components/_loader.scss b/app/public/stylesheets/sass/_components/_loader.scss
index 55f74d3e..193aa2f1 100644
--- a/app/public/stylesheets/sass/_components/_loader.scss
+++ b/app/public/stylesheets/sass/_components/_loader.scss
@@ -1,11 +1,12 @@
.box-loader {
display: block;
height: 35px;
- width: 250px;
+ width: 300px;
position: absolute;
+ text-align: center;
top: 50%;
left: 50%;
- margin-left: -125px;
+ margin-left: -150px;
margin-top: -17px;
& > h4 {
diff --git a/app/public/stylesheets/sass/_components/_player.scss b/app/public/stylesheets/sass/_components/_player.scss
index c1dcc193..1f18b911 100644
--- a/app/public/stylesheets/sass/_components/_player.scss
+++ b/app/public/stylesheets/sass/_components/_player.scss
@@ -29,7 +29,7 @@
.player_details {
width: 300px;
flex: 1;
- padding: 0 10px;
+ padding: 0 5px;
}
.player_user {
@@ -58,6 +58,9 @@
& .fa {
font-size: 20px;
color: #FFF;
+ &.thin::before {
+ -webkit-text-stroke: 1px #000;
+ }
}
}
@@ -144,8 +147,12 @@
box-sizing: content-box;
&:hover {
- & .player_progress_bar::before, & .player_progress_bar::after {
- opacity: 1;
+ & .player_progress_bar::before {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ & .player_progress_bar::after {
+ transform: scale(1);
}
}
@@ -161,10 +168,9 @@
display: block;
height: 4px;
width: 100%;
- background: rgba(255, 255, 255, 0.29);
+ background: rgba(0, 0, 0, 0.15);
z-index: -1;
- transition: $transitionFastValue;
- opacity: 0;
+ transition: $transitionInstantValue;
}
&::after {
@@ -179,8 +185,8 @@
background: rgb(255, 122, 0);
border-radius: 50%;
box-shadow: 0 0 2px 0 #000;
- opacity: 0;
- transition: $transitionFastValue;
+ transform: scale(0);
+ transition: $transitionInstantValue;
}
}
}
diff --git a/app/public/stylesheets/sass/_components/_topFrame.scss b/app/public/stylesheets/sass/_components/_topFrame.scss
index b4130e63..f9276dc4 100644
--- a/app/public/stylesheets/sass/_components/_topFrame.scss
+++ b/app/public/stylesheets/sass/_components/_topFrame.scss
@@ -21,13 +21,16 @@
}
.windowAction_item {
float: left;
- margin: 0 10px;
+ margin: 10px 10px 0;
font-size: 10px;
cursor: pointer;
border-radius: 15px;
padding: 2px 4px;
letter-spacing: 0;
- margin-top: 10px;
+
+ &:hover .fa {
+ color: $defaultColor;
+ }
& .fa {
cursor: pointer;
@@ -75,15 +78,22 @@
& li {
margin: 0;
- padding: 8px 10px 8px;
+ padding: 7px 10px 7px;
border-radius: 0;
&:hover {
- background: $separatorCleanColor;
+ background: #2C2C2C;
+ .fa {
+ color: #FFF;
+ }
}
}
+ & #minimizeApp {
+ padding: 10px 10px 4px;
+ }
+
& #closeApp {
- padding: 8px 15px 8px;
+ padding: 6px 20px 8px;
background: #390000;
&:hover {
background: #530000;
@@ -149,12 +159,12 @@
@media (max-width: 940px) {
.topbarSearch {
- width: 15%;
+ width: 25%;
}
}
@media (min-width: 940px) {
.topbarSearch {
- width: 25%;
+ width: 35%;
}
}