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%; } }