Merge pull request #2806 from metabrainz/ui-tweaks

UI improvements

Author: MonkeyDo

Diff for: frontend/css/brainzplayer.less

@@ -30,7 +30,7 @@
   box-shadow: 0px -4px 12px fade(black, 20%);
 
   padding: @brainzplayer-padding;
-  border-top: 1px solid #dbccc6;
+  border-top: 1px solid @gray-light;
   z-index: 5;
 
   > * {
@@ -211,38 +211,36 @@
       }
     }
 
-    .fa-heart,
-    .fa-heart-crack {
+    .love,
+    .hate {
       color: transparent;
       stroke: #8d8d8d;
     }
 
-    .fa-ellipsis-vertical {
-      //Thin down ellipsis icon
-      stroke: @white-background;
-    }
-
-    .fa-heart {
+    .love {
       &:hover {
         stroke: @love-color;
       }
-
       &.loved {
         stroke: transparent;
         color: @love-color;
       }
     }
 
-    .fa-heart-crack {
+    .hate {
       &:hover {
         stroke: @hate-color;
       }
-
       &.hated {
         stroke: transparent;
         color: @hate-color;
       }
     }
+
+    .fa-ellipsis-vertical {
+      //Thin down ellipsis icon
+      stroke: @white-background;
+    }
   }
 
   /** Progress **/
@@ -313,7 +311,7 @@
     list-style: none; // In case the elements are <li> items inside a <ul>
     font-size: 14px;
     background-color: @white-background;
-    border: 1px solid #ccc; // IE8 fallback
+    border: 1px solid @gray-light; // IE8 fallback
     border: 1px solid rgba(0, 0, 0, 0.15);
     background-clip: padding-box;
 
@@ -333,7 +331,7 @@
 
       &:hover {
         color: @white-background;
-        background-color: #eb743b;
+        background-color: @orange;
       }
     }
   }

Diff for: frontend/css/cbreviewmodal.less

@@ -28,7 +28,7 @@
 
         &:hover {
           color: #ffffff;
-          background-color: #eb743b;
+          background-color: @orange;
         }
       }
     }

Diff for: frontend/css/entity-pages.less

@@ -94,7 +94,7 @@
     .separator {
       width: 1px;
       height: 100%;
-      border-left: 1px solid @light;
+      border-left: 1px solid @gray-light;
     }
     .number {
       font-size: 1.5em;
@@ -193,7 +193,7 @@
     border-top: 1px solid @gray-light;
     height: 0;
     align-self: center;
-    margin-left: 0.5em;
+    margin: 0 0.5em;
   }
 }
 

Diff for: frontend/css/explore.less

@@ -26,7 +26,7 @@
 
 .explore-card-img {
   width: 100%;
-  border: 1px solid #e0e0e0;
+  border: 1px solid @gray-light;
   border-radius: 5px;
 }
 

Diff for: frontend/css/follow.less

@@ -6,8 +6,8 @@
   }
   font-family: "Sintony", sans-serif;
   color: @white;
-  background: @blue;
   border: 2px solid @blue;
+  background: @blue;
   font-weight: bold;
   padding: 5px 8px;
   border-radius: 4px;
@@ -57,7 +57,7 @@
 
   hr {
     margin: 0px 2em;
-    border-top: 1px solid #eee;
+    border-top: 1px solid @gray-light;
   }
 }
 
@@ -73,7 +73,7 @@
 .similar-users-list {
   max-height: 250px;
   padding: 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   border-radius: 2px;
   box-shadow: inset 0px 11px 8px -10px #ccc;
 
@@ -88,7 +88,7 @@
     }
 
     &:not(:first-child) {
-      border-top: 2px solid #ddd;
+      border-top: 1px solid @gray-light;
       padding-top: 12px;
     }
   }
@@ -98,3 +98,11 @@
 .similar-users-empty {
   padding: 10px 20px;
 }
+
+.musicbrainz-profile-button {
+  color: #fff;
+  background: @blue;
+  padding: 5px 8px;
+  border-radius: 4px;
+  transition: background 0.42s;
+}

Diff for: frontend/css/fresh-releases.less

@@ -251,7 +251,7 @@
 .release-card-grid-title::after {
   content: "";
   flex: 1;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid @gray-light;
 }
 
 .release-card-grid-title:not(:empty)::before {
@@ -317,7 +317,7 @@
   border-radius: 10px;
   height: max-content;
   max-height: 100vh;
-  overflow-y: scroll;
+  overflow-y: auto;
   z-index: 9998;
   right: 0;
 

Diff for: frontend/css/homepage.less

@@ -1,7 +1,7 @@
 @dark-grey: #46433a;
 @even-darker-grey: #353070;
 #homepage-container {
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100vh; // absolute fallback
   height: calc(var(--vh, 1vh) * 100px); // fallback if svh units not available
   height: 100svh; // using more modern css SVH unit
@@ -45,7 +45,6 @@
     }
 
     h1 {
-      margin-top: 0;
       color: #fafafa;
     }
 
@@ -349,7 +348,7 @@
 
       .homepage-upper-headphone {
         height: min(66%, 460px);
-        top: 150px;
+        top: min(150px, 18%);
       }
     }
 
@@ -444,6 +443,44 @@
       }
     }
   }
+  @media (max-height: 600px) {
+    .homepage-lower,
+    .homepage-upper {
+      .number-count-digit {
+        background: #383836;
+        color: #fafafa;
+        &::after {
+          background-color: #383836;
+        }
+      }
+      h1 {
+        font-size: calc(100vh / 13);
+        color: @dark-grey;
+      }
+      padding-left: 3em;
+      .listen-container {
+        top: 0;
+      }
+      .homepage-info {
+        bottom: 1.5em;
+        color: @dark-grey;
+        max-width: 50%;
+      }
+      .create-account-button {
+        right: 0;
+        position: absolute;
+        top: 1.7em;
+      }
+    }
+    .homepage-upper .homepage-upper-grey-box {
+      clip-path: polygon(58% 0%, 51% 100%, 0% 100%, 0% 0%);
+      height: 100%;
+    }
+    .homepage-lower .homepage-lower-grey-box {
+      clip-path: polygon(49% 0%, 58% 100%, 0% 100%, 0% 0%);
+      height: 100%;
+    }
+  }
 }
 
 @media (max-width: @screen-xs) {