diff --git a/package.json b/package.json index 473f80a4..f48a1940 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,8 @@ }, "dependencies": { "@biomejs/biome": "^1.8.3", - "chroma-js": "^2.6.0", - "i18next": "^23.12.2", + "chroma-js": "^3.0.0", + "i18next": "^23.14.0", "i18next-browser-languagedetector": "^8.0.0", "prismjs": "^1.29.0", "react-beautiful-dnd": "^13.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58a53f5a..9bdeddd6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,11 +12,11 @@ importers: specifier: ^1.8.3 version: 1.8.3 chroma-js: - specifier: ^2.6.0 - version: 2.6.0 + specifier: ^3.0.0 + version: 3.0.0 i18next: - specifier: ^23.12.2 - version: 23.12.2 + specifier: ^23.14.0 + version: 23.14.0 i18next-browser-languagedetector: specifier: ^8.0.0 version: 8.0.0 @@ -31,7 +31,7 @@ importers: version: 1.11.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-i18next: specifier: ^15.0.0 - version: 15.0.0(i18next@23.12.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + version: 15.0.0(i18next@23.14.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-simple-code-editor: specifier: ^0.14.1 version: 0.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -213,8 +213,8 @@ packages: resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} engines: {node: '>= 8.10.0'} - chroma-js@2.6.0: - resolution: {integrity: sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==} + chroma-js@3.0.0: + resolution: {integrity: sha512-ZFn4qxtZTvRJ7XatOLgaHGJYN10LoS6T0EMsu7IVayFG5+b6Yw8wCGQL5qLgo4B+wrRZ9niCrozOQ4a584bvaA==} classnames@2.3.2: resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} @@ -523,8 +523,8 @@ packages: i18next-browser-languagedetector@8.0.0: resolution: {integrity: sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==} - i18next@23.12.2: - resolution: {integrity: sha512-XIeh5V+bi8SJSWGL3jqbTEBW5oD6rbP5L+E7dVQh1MNTxxYef0x15rhJVcRb7oiuq4jLtgy2SD8eFlf6P2cmqg==} + i18next@23.14.0: + resolution: {integrity: sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==} iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} @@ -1185,7 +1185,7 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - chroma-js@2.6.0: {} + chroma-js@3.0.0: {} classnames@2.3.2: {} @@ -1450,9 +1450,9 @@ snapshots: dependencies: '@babel/runtime': 7.24.1 - i18next@23.12.2: + i18next@23.14.0: dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.25.0 iconv-lite@0.6.3: dependencies: @@ -1711,11 +1711,11 @@ snapshots: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-i18next@15.0.0(i18next@23.12.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + react-i18next@15.0.0(i18next@23.14.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: '@babel/runtime': 7.25.0 html-parse-stringify: 3.0.1 - i18next: 23.12.2 + i18next: 23.14.0 react: 18.2.0 optionalDependencies: react-dom: 18.2.0(react@18.2.0) @@ -1726,7 +1726,7 @@ snapshots: react-redux@7.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.25.0 '@types/react-redux': 7.1.33 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -1768,7 +1768,7 @@ snapshots: redux@4.2.1: dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.25.0 regenerator-runtime@0.14.0: {} diff --git a/resources/snippets.json b/resources/snippets.json index 30800fc0..494fe552 100644 --- a/resources/snippets.json +++ b/resources/snippets.json @@ -176,7 +176,7 @@ { "title": "Rotating Cover Art", "description": "Adds circular mask to cover art and rotation", - "code": "@keyframes rotating {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.cover-art, .main-nowPlayingView-coverArtContainer::after, .main-nowPlayingView-coverArtContainer::before {animation: rotating 10s linear infinite;border-radius: 50%;}.cover-art {clip-path: circle(50% at 50% 50%);}", + "code": "@keyframes rotating {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.cover-art, .main-nowPlayingView-coverArtContainer::after, .main-nowPlayingView-coverArtContainer::before {animation: rotating 10s linear infinite;border-radius: 50%;}.cover-art {clip-path: circle(50% at 50% 50%);} .main-nowPlayingBar-left button {background: transparent;}", "preview": "resources/assets/snippets/rotating-coverart.png" }, { @@ -422,7 +422,7 @@ { "title": "Spinning CD Cover Art", "description": "Converts the cover art of the currently playing song to a slowly spinning CD.", - "code": "@keyframes rotating {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.cover-art {animation: rotating 360s linear infinite;clip-path: circle(50% at 50% 50%);position: relative;}.cover-art::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 22%;height: 22%;background: radial-gradient( circle at center, rgba(24, 22, 35, 0.9) 0%, rgba(24, 22, 35, 0.9) 38%, rgba(255, 255, 255, 0.1) 38%, rgba(255, 255, 255, 0.1) 40%, rgba(24, 22, 35, 0.9) 40%, rgba(24, 22, 35, 0.9) 100% ), repeating-radial-gradient( circle at center, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 4px );border-radius: 50%;pointer-events: none;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset, 0 0 20px rgba(255, 255, 255, 0.1);}.cover-art::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6%;height: 6%;background: rgba(24, 22, 35, 1);border-radius: 50%;box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);z-index: 1;}", + "code": "@keyframes rotating {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.cover-art {animation: rotating 360s linear infinite;clip-path: circle(50% at 50% 50%);position: relative;}.cover-art::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 22%;height: 22%;background: radial-gradient( circle at center, rgba(24, 22, 35, 0.9) 0%, rgba(24, 22, 35, 0.9) 38%, rgba(255, 255, 255, 0.1) 38%, rgba(255, 255, 255, 0.1) 40%, rgba(24, 22, 35, 0.9) 40%, rgba(24, 22, 35, 0.9) 100% ), repeating-radial-gradient( circle at center, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 4px );border-radius: 50%;pointer-events: none;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset, 0 0 20px rgba(255, 255, 255, 0.1);}.cover-art::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6%;height: 6%;background: rgba(24, 22, 35, 1);border-radius: 50%;box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);z-index: 1;} .main-nowPlayingBar-left button {background: transparent;}", "preview": "resources/assets/snippets/Spinning-CD-Cover-Art.jpg" }, { diff --git a/src/styles/components/_dropdown.scss b/src/styles/components/_dropdown.scss index ec6cdc8a..fd7dc81a 100644 --- a/src/styles/components/_dropdown.scss +++ b/src/styles/components/_dropdown.scss @@ -1,143 +1,144 @@ -@use '../constants.scss'; - -$dropdown-text: rgba(var(--spice-rgb-text), .7); -$dropdown-text-hover: rgb(var(--spice-rgb-text)); -$dropdown-bg: var(--spice-sidebar); -$dropdown-radius: constants.$btn-radius; - -.arrow-closed, .arrow-open { - border: solid $dropdown-text; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 4px; - position: absolute; - right: 10px; -} - -.arrow-closed { - top: 10px; - transform: rotate(45deg); - -webkit-transform: rotate(45deg); -} - -.arrow-open { - top: 14px; - transform: rotate(-135deg); - -webkit-transform: rotate(-135deg); -} - -.Dropdown-root { - position: relative; - - &.is-open { - .Dropdown-control { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - &:hover .Dropdown-arrow { - border-color: transparent transparent $dropdown-text-hover; - } - } - .Dropdown-arrow { - border-color: transparent transparent $dropdown-text; - border-width: 0 5px 5px; - } - .Dropdown-menu { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } -} - -// The button (collapsed) -.Dropdown-control { - position: relative; - overflow: hidden; - background-color: $dropdown-bg; - border: 0; - border-radius: $dropdown-radius; - box-sizing: border-box; - color: $dropdown-text; - cursor: default; - outline: none; - padding: 8px 36px 8px 16px; - transition: all constants.$transition-default ease; - - &:hover { - color: $dropdown-text-hover; - background-color: var(--spice-button-disabled); - - .Dropdown-arrow { - border-color: $dropdown-text-hover transparent transparent; - } - } -} - -.Dropdown-arrow { - border-color: $dropdown-text transparent transparent; - border-style: solid; - border-width: 5px 5px 0; - content: ' '; - display: block; - height: 0; - margin-top: -ceil(2.5); - position: absolute; - right: 16px; - top: 18px; - width: 0 -} - -// The expanded list -.Dropdown-menu { - background-color: $dropdown-bg; - border: 0; - border-radius: $dropdown-radius; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); - box-sizing: border-box; - margin-top: -1px; - max-height: 200px; - overflow-y: auto; - position: absolute; - top: 100%; - width: 100%; - z-index: 1000; - -webkit-overflow-scrolling: touch; - - .Dropdown-group > .Dropdown-title { - padding: 8px 10px; - color: rgba(51, 51, 51, 1.2); - font-weight: bold; - text-transform: capitalize; - } -} - -.Dropdown-option { - box-sizing: border-box; - color: $dropdown-text; - cursor: pointer; - display: block; - padding: 8px 10px; - - &:last-child { - border-bottom-right-radius: $dropdown-radius; - border-bottom-left-radius: $dropdown-radius; - } - - &.is-selected { - background-color: $dropdown-text; - color: $dropdown-bg; - } - - &:hover { - background-color: $dropdown-text-hover; - color: $dropdown-bg; - } -} - -.Dropdown-noresults { - box-sizing: border-box; - color: #ccc; - cursor: default; - display: block; - padding: 8px 10px; -} +@use '../constants.scss'; + +$dropdown-text: rgba(var(--spice-rgb-text), .7); +$dropdown-text-hover: rgb(var(--spice-rgb-text)); +$dropdown-bg: var(--spice-sidebar); +$dropdown-radius: constants.$btn-radius; + +.arrow-closed, .arrow-open { + border: solid $dropdown-text; + border-width: 0 2px 2px 0; + display: inline-block; + padding: 4px; + position: absolute; + right: 10px; +} + +.arrow-closed { + top: 10px; + transform: rotate(45deg); + -webkit-transform: rotate(45deg); +} + +.arrow-open { + top: 14px; + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); +} + +.Dropdown-root { + position: relative; + + &.is-open { + .Dropdown-control { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + &:hover .Dropdown-arrow { + border-color: transparent transparent $dropdown-text-hover; + } + } + .Dropdown-arrow { + border-color: transparent transparent $dropdown-text; + border-width: 0 5px 5px; + } + .Dropdown-menu { + border-top-left-radius: 0; + border-top-right-radius: 0; + width: max-content; + } + } +} + +// The button (collapsed) +.Dropdown-control { + position: relative; + overflow: hidden; + background-color: $dropdown-bg; + border: 0; + border-radius: $dropdown-radius; + box-sizing: border-box; + color: $dropdown-text; + cursor: default; + outline: none; + padding: 8px 36px 8px 16px; + transition: all constants.$transition-default ease; + + &:hover { + color: $dropdown-text-hover; + background-color: var(--spice-button-disabled); + + .Dropdown-arrow { + border-color: $dropdown-text-hover transparent transparent; + } + } +} + +.Dropdown-arrow { + border-color: $dropdown-text transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + content: ' '; + display: block; + height: 0; + margin-top: -ceil(2.5); + position: absolute; + right: 16px; + top: 18px; + width: 0 +} + +// The expanded list +.Dropdown-menu { + background-color: $dropdown-bg; + border: 0; + border-radius: $dropdown-radius; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + overflow-y: auto; + position: absolute; + top: 100%; + width: 100%; + z-index: 1000; + -webkit-overflow-scrolling: touch; + + .Dropdown-group > .Dropdown-title { + padding: 8px 10px; + color: rgba(51, 51, 51, 1.2); + font-weight: bold; + text-transform: capitalize; + } +} + +.Dropdown-option { + box-sizing: border-box; + color: $dropdown-text; + cursor: pointer; + display: block; + padding: 8px 10px; + + &:last-child { + border-bottom-right-radius: $dropdown-radius; + border-bottom-left-radius: $dropdown-radius; + } + + &.is-selected { + background-color: $dropdown-text; + color: $dropdown-bg; + } + + &:hover { + background-color: $dropdown-text-hover; + color: $dropdown-bg; + } +} + +.Dropdown-noresults { + box-sizing: border-box; + color: #ccc; + cursor: default; + display: block; + padding: 8px 10px; +}