TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 20:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

major redesign: move to rounded and extra spaceous UI

Browse Source 
+ fix `play next` bug
+ add new folder banner image
+ add new now playing component
+ move to gray4 for accent color
+ increase image sizes, for clean UI
This commit is contained in:
geoffrey45
2022-08-18 02:55:46 +03:00
parent a7dc2fa6bd
commit 5476575d10
40 changed files with 339 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/folderbg.svg
+98
View File
@@ -0,0 +1,98 @@
<svg width="1600" height="548" viewBox="0 0 1600 548" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7_2)" filter="url(#filter0_d_7_2)">
<path d="M1241.06 372.097L1280.6 358.972C1285.2 357.445 1286.98 353.889 1285.29 348.789L1277.15 324.265C1275.46 319.165 1271.88 317.39 1266.73 319.099L1244.64 326.433C1242.92 327.002 1241.77 326.961 1240.07 326.308L1238.37 325.655C1236.22 324.834 1234.83 324.793 1232.33 325.623L1225.58 327.862C1221.1 329.35 1219.33 332.85 1221 337.878L1230.64 366.93C1232.34 372.054 1235.91 373.806 1241.06 372.097ZM1225.87 336.709C1225.15 334.54 1225.99 332.993 1228.11 332.289L1232.64 330.785C1234.33 330.224 1235.47 330.297 1237.19 330.942L1238.9 331.619C1241.01 332.4 1242.45 332.449 1244.95 331.619L1268 323.968C1270.19 323.24 1271.79 323.981 1272.55 326.269L1273.01 327.675L1227.85 342.667L1225.87 336.709ZM1239.8 367.251C1237.6 367.979 1236.01 367.239 1235.24 364.927L1229.24 346.838L1274.4 331.846L1280.41 349.959C1281.17 352.247 1280.34 353.794 1278.14 354.522L1239.8 367.251Z" fill="#F2F2F2"/>
</g>
<g filter="url(#filter1_d_7_2)">
<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
</g>
<g filter="url(#filter2_d_7_2)">
<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
</g>
<g filter="url(#filter3_d_7_2)">
<path d="M784.959 386.222L825.55 376.844C830.272 375.753 832.379 372.38 831.169 367.144L825.353 341.967C824.143 336.731 820.745 334.63 815.46 335.851L792.779 341.091C791.017 341.498 789.875 341.35 788.245 340.541L786.615 339.732C784.55 338.714 783.17 338.543 780.601 339.137L773.677 340.736C769.077 341.799 766.983 345.118 768.176 350.281L775.066 380.106C776.282 385.366 779.674 387.443 784.959 386.222ZM773.141 349.572C772.626 347.345 773.603 345.882 775.78 345.379L780.429 344.305C782.166 343.904 783.29 344.082 784.944 344.886L786.58 345.719C788.61 346.694 790.044 346.878 792.613 346.284L816.273 340.818C818.524 340.298 820.043 341.184 820.585 343.533L820.919 344.976L774.554 355.688L773.141 349.572ZM784.152 381.28C781.901 381.8 780.382 380.914 779.834 378.541L775.543 359.97L821.908 349.258L826.204 367.853C826.747 370.202 825.77 371.665 823.52 372.185L784.152 381.28Z" fill="#F2F2F2"/>
</g>
<g clip-path="url(#clip1_7_2)" filter="url(#filter4_d_7_2)">
<path d="M1175.56 503.894L1196.91 519.989C1201.21 523.223 1205.14 522.634 1208.39 518.322L1222.1 500.132C1224.2 497.345 1224.8 495.789 1224.39 492.709L1221.93 474.066C1221.53 471.092 1220.45 469.648 1217.94 467.759L1208.27 460.475C1203.98 457.241 1200.05 457.829 1196.8 462.141L1174 492.404C1170.73 496.736 1171.26 500.66 1175.56 503.894ZM1178.84 500.205C1176.89 498.739 1176.7 496.991 1178.11 495.126L1200.55 465.344C1201.94 463.499 1203.69 463.181 1205.63 464.647L1214.18 471.085L1205.9 482.075C1203.73 484.943 1204.12 487.4 1206.96 489.546L1217.77 497.692L1204.64 515.119C1203.23 516.985 1201.48 517.267 1199.54 515.801L1178.84 500.205ZM1209.92 486.369C1209.1 485.749 1209.03 485.131 1209.65 484.309L1217.24 474.241L1219.83 493.834L1209.92 486.369Z" fill="#F2F2F2"/>
</g>
<g filter="url(#filter5_d_7_2)">
<path d="M1139.29 314.117C1132.34 317.228 1125.57 322.685 1121.15 328.736C1120.32 329.881 1120.52 331.249 1121.6 332.139C1120.46 334.001 1120.66 336.223 1122.27 338.113C1124.35 340.483 1127.29 340.653 1129.65 338.606L1139.05 330.428C1141.39 328.392 1141.58 325.5 1139.53 323.086C1138.67 322.072 1137.62 321.465 1136.52 321.272C1138.09 320.294 1139.7 319.406 1141.33 318.677C1153.86 313.061 1165.63 316.977 1170.78 328.458C1175.92 339.939 1171.02 351.354 1158.49 356.97C1156.86 357.7 1155.14 358.335 1153.35 358.832C1153.92 357.889 1154.16 356.708 1153.99 355.352C1153.56 352.243 1151.28 350.46 1148.2 350.847L1135.84 352.424C1132.71 352.808 1130.91 355.126 1131.29 358.233C1131.63 360.721 1133.16 362.348 1135.28 362.719C1135.25 364.134 1136.14 365.195 1137.55 365.333C1145.01 366.065 1153.6 364.665 1160.54 361.554C1175.83 354.705 1181.74 340.691 1175.34 326.415C1168.95 312.161 1154.57 307.268 1139.29 314.117Z" fill="#333333" fill-opacity="0.01"/>
</g>
<g filter="url(#filter6_d_7_2)">
<path d="M1021.88 49.7976L1032.05 74.5314C1034.09 79.5014 1037.78 81 1042.77 78.9465L1063.84 70.2835C1067.06 68.9559 1068.38 67.9266 1069.59 65.0655L1076.98 47.7724C1078.15 45.0097 1077.96 43.2162 1076.76 40.3132L1072.16 29.1191C1070.12 24.1491 1066.43 22.6505 1061.44 24.704L1026.39 39.1169C1021.38 41.18 1019.83 44.8276 1021.88 49.7976ZM1026.58 48.2971C1025.66 46.0444 1026.38 44.4425 1028.54 43.5542L1063.03 29.3706C1065.17 28.4919 1066.83 29.11 1067.76 31.3627L1071.83 41.2563L1059.1 46.4904C1055.78 47.8562 1054.86 50.1642 1056.21 53.462L1061.36 65.9799L1041.18 74.2799C1039.02 75.1682 1037.37 74.5173 1036.44 72.2646L1026.58 48.2971ZM1060.38 52.2372C1059.99 51.285 1060.24 50.7183 1061.2 50.3267L1072.85 45.532L1065.1 63.71L1060.38 52.2372Z" fill="#F2F2F2"/>
</g>
<defs>
<filter id="filter0_d_7_2" x="1199" y="294" width="109.13" height="109.13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter1_d_7_2" x="599" y="285" width="376.948" height="240.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-274" dy="138"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter2_d_7_2" x="873" y="285" width="106.948" height="106.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter3_d_7_2" x="748" y="312" width="103.955" height="103.955" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter4_d_7_2" x="1142" y="435" width="120.036" height="120.036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter5_d_7_2" x="1033" y="285" width="169.719" height="165.719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-60" dy="56"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<filter id="filter6_d_7_2" x="999" y="0" width="158.416" height="317.416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="50" dy="209"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
</filter>
<clipPath id="clip0_7_2">
<rect width="80" height="80" fill="white" transform="translate(1203 319.204) rotate(-18.3641)"/>
</clipPath>
<clipPath id="clip1_7_2">
<rect width="80" height="80" fill="white" transform="translate(1194.15 435) rotate(37)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

src/assets/images/folderbg.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

src/assets/scss/BottomBar/BottomBar.scss
-1
View File
@@ -1,6 +1,5 @@
.b-bar {
height: 100%;
padding: $small;
.grid {
background-color: $primary;
src/assets/scss/Global/app-grid.scss
+8 -7
View File
@@ -6,7 +6,7 @@
"l-sidebar nav search-input"
"l-sidebar content r-sidebar"
"l-sidebar content r-sidebar"
"l-sidebar content tabs";
"l-sidebar content bottombar";
max-width: 2720px;
height: calc(100vh - 1rem);
margin: 0 auto;
@@ -19,7 +19,11 @@
@include tablet-landscape {
grid-template-columns: min-content 1fr;
grid-template-areas:
"l-sidebar nav"
"l-sidebar content"
"l-sidebar content"
"l-sidebar bottombar";
.r-sidebar,
#tabs,
#gsearch-input {
@@ -32,7 +36,6 @@
grid-area: content;
max-width: 1955px;
overflow: hidden scroll;
margin-top: -$small;
.nav {
margin: $small;
@@ -48,7 +51,6 @@
.r-sidebar {
grid-area: r-sidebar;
margin-top: -$small;
}
#gsearch-input {
@@ -66,7 +68,6 @@
padding: 1rem;
}
.bottom-bar {
grid-area: bottom-bar;
height: 4rem;
.b-bar {
grid-area: bottombar;
}
src/assets/scss/Global/basic.scss
+11 -3
View File
@@ -24,9 +24,17 @@
}
.rounded {
border-radius: 1rem;
}
.rounded-sm {
border-radius: $small;
}
.rounded-md {
border-radius: $medium;
}
.circular {
border-radius: 20px;
}
@@ -36,7 +44,7 @@
}
.bg-black {
background-color: $black;
background-color: $gray4;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
@@ -58,8 +66,8 @@ button {
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
background-image: linear-gradient(70deg, $gray3, $gray2);
height: 2.25rem;
background: linear-gradient(70deg, $gray3, $gray2);
&:hover {
background-image: linear-gradient(70deg, #234ece, $darkblue);
src/assets/scss/Global/variants.scss
+1 -1
View File
@@ -3,7 +3,7 @@
padding: $smaller;
}
.pad-small {
.pad-sm {
padding: $small;
}
src/assets/scss/ProgressBar.scss
+5 -5
View File
@@ -4,8 +4,8 @@ input[type="range"] {
width: calc(100% - 2px);
height: 0.3rem;
border-radius: 5px;
background-size: 0 100%;
background: $gray linear-gradient($accent, $accent) no-repeat;
background: $gray linear-gradient(90deg, $accent, $accent) no-repeat;
background-size: 100% 100%;
&::-webkit-slider-thumb {
-webkit-appearance: none;
@@ -38,15 +38,15 @@ input[type="range"] {
/* Input Thumb */
input[type="range"]::-webkit-slider-thumb:hover {
background: $pink;
background: $accent;
}
input[type="range"]::-moz-range-thumb:hover {
background: $pink;
background: $accent;
}
input[type="range"]::-ms-thumb:hover {
background: $pink;
background: $accent;
}
/* Input Track */
src/assets/scss/_variables.scss
+2 -2
View File
@@ -39,7 +39,7 @@ $indigo: #5e5ce6;
$teal: rgb(64, 200, 224);
$primary: $gray4;
$accent: $red;
$accent: $gray1;
$secondary: $gray5;
$cta: $blue;
$danger: $red;
@@ -48,7 +48,7 @@ $context: $gray;
// SVG COLORS
$default: $accent;
$track-btn-svg: $red;
$track-btn-svg: $accent;
$side-nav-svg: $red;