diff --git a/src/components/button/options/style.scss b/src/components/button/options/style.scss
index 10f5d9f94d192b2059414b0ea25671f19c321943..8ed665f8158ada7fca969ae050a8f9d70a1a7d16 100644
--- a/src/components/button/options/style.scss
+++ b/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;
diff --git a/src/components/button/play/style.scss b/src/components/button/play/style.scss
index 9f1f49c1f78353c679143a20cac246b151a36dc7..0b6e9cefd129db2bf09c72b391ec759bea3f19f5 100644
--- a/src/components/button/play/style.scss
+++ b/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;
}
}
}
diff --git a/src/components/button/style.scss b/src/components/button/style.scss
index f8775e4de07b5216089d074ff2c7dcf664f210e7..bdef74a2c8abb51fb400fa580bed6e1b60eddb1a 100644
--- a/src/components/button/style.scss
+++ b/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);
}
diff --git a/src/components/card/album/style.scss b/src/components/card/album/style.scss
index c70250cc7eda45611129dff489505c8715be0f55..4a3704529a3c4d428cac76a67796f132b7f856d3 100644
--- a/src/components/card/album/style.scss
+++ b/src/components/card/album/style.scss
@@ -1,5 +1,6 @@
.funkwhale {
&.card.album-card {
+ --fw-border-radius: 12px;
--fw-card-width: 208px;
--fw-card-image-width: var(--fw-card-width);
--fw-card-padding: 16px;
diff --git a/src/components/card/artist/style.scss b/src/components/card/artist/style.scss
index dba3a38a2286b48a5bd0f5218acc999c08d7769e..6219103c6ca64cb5056433b97d29600e75938f00 100644
--- a/src/components/card/artist/style.scss
+++ b/src/components/card/artist/style.scss
@@ -1,5 +1,6 @@
.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;
diff --git a/src/components/card/playlist/style.scss b/src/components/card/playlist/style.scss
index 7c347339868c0255e9dd3059cda6e105e26656c2..6cb04b0ff2dc4e3a39decf0caa41f697e0025203 100644
--- a/src/components/card/playlist/style.scss
+++ b/src/components/card/playlist/style.scss
@@ -1,5 +1,6 @@
.funkwhale {
&.card.playlist-card {
+ --fw-border-radius: 12px;
--fw-card-width: 208px;
--fw-card-image-width: var(--fw-card-width);
--fw-card-padding: 16px;
diff --git a/src/components/card/podcast/style.scss b/src/components/card/podcast/style.scss
index dd415e3673ac40358f1541508a3f0db0a7c0cdf4..706a77ed19be56df0c74c0d141d16a22774bd6b3 100644
--- a/src/components/card/podcast/style.scss
+++ b/src/components/card/podcast/style.scss
@@ -1,9 +1,14 @@
.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;
diff --git a/src/components/card/radio/style.scss b/src/components/card/radio/style.scss
index 4eb71d8bd4c2691c01c2037f5e9b8a8ebd350a4e..9d31a7866dd6654fc8b7fed3017735fde06301d2 100644
--- a/src/components/card/radio/style.scss
+++ b/src/components/card/radio/style.scss
@@ -1,5 +1,6 @@
.funkwhale {
&.card.radio-card {
+ --fw-border-radius: 12px;
--fw-card-width: 208px;
--fw-card-image-width: var(--fw-card-width);
--fw-card-padding: 0;
diff --git a/src/components/card/style.scss b/src/components/card/style.scss
index 572d25e95d5b6c7f22784ecd688c9749dc3807e5..23448ed0cd490aba85b90d8bc2d37919669e316d 100644
--- a/src/components/card/style.scss
+++ b/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;
}
}
}
diff --git a/src/components/input/style.scss b/src/components/input/style.scss
index 3d752edae6d3ff0c2b7b472eb38db092ea295917..300b260d512e3642eefee25e8a5b901b3537c399 100644
--- a/src/components/input/style.scss
+++ b/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 {
diff --git a/src/components/pagination/style.scss b/src/components/pagination/style.scss
index 8b65bd01fc1b4a6f223f27ea143b2f348d19d689..d65eae511a30f66a36e8f7aa133289502737636f 100644
--- a/src/components/pagination/style.scss
+++ b/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 {
diff --git a/src/components/popover/style.scss b/src/components/popover/style.scss
index a8593eedda20ceef342a0830290a03ff8e7ae9c0..b1f612003e23d7d3d2b3ba8fb82702958d555e88 100644
--- a/src/components/popover/style.scss
+++ b/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 {
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 565c794bce334235706de53877f4056be841e605..114a299e636aaddf5ead69f4206fe688a5955e21 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,5 +1,6 @@
:root {
// Blue
+ --fw-blue-010: #fdfdff;
--fw-blue-100: #65a2bb;
--fw-blue-500: #067cae;
--fw-blue-600: #05719e;
diff --git a/src/styles/funkwhale.scss b/src/styles/funkwhale.scss
index 4554cb3e3eef6e5d5c1f02a9535b69e0a2264553..32a3daffca8304c924fb0bc562bbe5ca99e74c10 100644
--- a/src/styles/funkwhale.scss
+++ b/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;
+}