Resolve Mathieu's comments

src/components/button/options/style.scss

@@ -5,7 +5,7 @@
       --fw-bg-color: transparent !important;
     }
 
-    transform: translateX(0);
+    will-change: transform;
     transition: all .2s ease;
     font-size: 0.6rem;
 

src/components/button/play/style.scss

@@ -3,16 +3,22 @@
     --fw-bg-color: #fff !important;
     --fw-text-color: var(--fw-grey-600) !important;
 
-    transform: translateX(0);
-    transition: all .2s ease;
-    font-size: 0.6rem;
+    will-change: transform;
+    font-size: 0.6rem !important;
+    padding: 0.625em !important;
+    border: 0px !important;
 
     i {
       font-size: 2rem;
+
+      &::before {
+        transform: translateX(1px);
+      }
     }
 
     &:hover {
       --fw-text-color: var(--fw-pastel-4, var(--fw-primary)) !important;
+      --fw-scale: 1.091;
     }
   }
 }

src/components/button/style.scss

@@ -9,14 +9,18 @@
 
     font-family: $font-main;
     font-weight: 900;
+    font-size: 0.875em;
 
     line-height: 1em;
 
-    padding: 0.5em;
+    padding: 0.642857142857em;
 
     border-radius: var(--fw-border-radius);
     margin: 0 0.5ch;
 
+    transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
+    transition: all .2s ease;
+
     &.is-shadow {
       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     }

src/components/card/album/style.scss

 .funkwhale {
   &.card.album-card {
+    --fw-border-radius: 12px;
     --fw-card-width: 208px;
     --fw-card-image-width: var(--fw-card-width);
     --fw-card-padding: 16px;

src/components/card/artist/style.scss

 .funkwhale {
   &.card.artist-card {
+    --fw-border-radius: 12px;
     --fw-card-width: 208px;
     --fw-card-image-width: calc(var(--fw-card-width) - 16px);
     --fw-card-padding: 16px;

src/components/card/playlist/style.scss

 .funkwhale {
   &.card.playlist-card {
+    --fw-border-radius: 12px;
     --fw-card-width: 208px;
     --fw-card-image-width: var(--fw-card-width);
     --fw-card-padding: 16px;

src/components/card/podcast/style.scss

 .funkwhale {
   &.card.podcast-card {
+    --fw-border-radius: 12px;
     --fw-card-width: 208px;
     --fw-card-image-width: var(--fw-card-width);
     --fw-card-padding: 16px;
 
+    > .card-image {
+      --fw-border-radius: 10px;
+    }
+
     > .card-title {
       font-size: 1rem;
       text-align: left !important;

src/components/card/radio/style.scss

 .funkwhale {
   &.card.radio-card {
+    --fw-border-radius: 12px;
     --fw-card-width: 208px;
     --fw-card-image-width: var(--fw-card-width);
     --fw-card-padding: 0;

src/components/card/style.scss

@@ -32,6 +32,7 @@
       line-height: 1.3em;
       font-size: 1.125em;
       font-weight: bold;
+      padding-top: 8px;
 
       text-overflow: ellipsis;
       white-space: pre;
@@ -45,6 +46,7 @@
     &.is-category {
       > .card-title {
         font-size: 1.75em;
+        padding-top: 0;
       }
     }
 
@@ -52,7 +54,7 @@
       text-align: center;
 
       > .card-title {
-        padding: 22px 0 0;
+        padding: 32px 0 0;
       }
     }
 
@@ -108,6 +110,7 @@
 
     // Buttons
     .play-button {
+      --fw-translate-x: 6px;
       position: absolute;
       right: calc(var(--fw-play-button-offset) + 6px);
       top: calc(var(--fw-card-image-width) - var(--fw-play-button-offset) - 44px);
@@ -116,6 +119,7 @@
     }
 
     .options-button {
+      --fw-translate-x: 6px;
       transition-delay: .1s;
       opacity: 0;
     }
@@ -123,12 +127,12 @@
     &:hover {
       .play-button {
         opacity: 1 !important;
-        transform: translateX(6px) !important;
+        --fw-translate-x: 0;
       }
 
       .options-button {
         opacity: 1 !important;
-        transform: translate(6px) !important;
+        --fw-translate-x: 0;
       }
     }
   }

src/components/input/style.scss

@@ -24,6 +24,10 @@
       border-radius: var(--fw-border-radius);
       box-shadow: inset 0 0 0 4px var(--fw-border-color);
 
+      &::placeholder {
+        color: var(--fw-grey-600);
+      }
+
       &:hover {
         --fw-border-color: var(--fw-grey-300);
       }
@@ -31,6 +35,7 @@
       &:active,
       &:focus {
         --fw-border-color: var(--fw-primary);
+        --fw-bg-color: var(--fw-blue-010);
       }
     }
 
@@ -41,6 +46,7 @@
       bottom: 0;
       display: flex;
       align-items: center;
+      color: var(--fw-grey-600);
     }
 
     .prefix {

src/components/pagination/style.scss

@@ -23,6 +23,20 @@
         height: 34px;
         padding-top: 0;
         padding-bottom: 0;
+
+        &:first-child,
+        &:last-child {
+          min-width: 94px;
+          text-align: center;
+        }
+
+        &:first-child span > span {
+          padding-left: 0.5ch;
+        }
+
+        &:last-child span > span {
+          padding-right: 0.5ch;
+        }
       }
 
       > div {

src/components/popover/style.scss

@@ -18,12 +18,12 @@
     will-change: transform;
     pointer-events: none;
     opacity: 0;
-    transform: scale(0.97);
+    --fw-scale: 0.97;
 
     &.is-open {
       pointer-events: auto;
       opacity: 1;
-      transform: scale(1);
+      --fw-scale: 1;
     }
 
     > .item {

src/styles/colors.scss

 :root {
   // Blue
+  --fw-blue-010: #fdfdff;
   --fw-blue-100: #65a2bb;
   --fw-blue-500: #067cae;
   --fw-blue-600: #05719e;

src/styles/funkwhale.scss

@@ -3,10 +3,16 @@
 
 body {
   font-family: $font-main;
-  font-size: 14px;
+  font-size: 16px;
   // background-color: var(--fw-bg-color);
 }
 
 .has-background-light {
   background-color: var(--fw-grey-100);
 }
+
+* {
+  --fw-translate-x: 0;
+  --fw-translate-y: 0;
+  --fw-scale: 1;
+}