tokono.ma / diffuse
A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

Better volume control & remove equalizer entirely

Steven Vandevelde cdcfd481 1cdbbe03

+193 -482
+5 -11
src/Applications/UI.elm
··· 135 135 ----------------------------------------- 136 136 -- Equalizer 137 137 ----------------------------------------- 138 - , eqKnobOperation = Nothing 139 138 , eqSettings = Equalizer.defaultSettings 139 + , showVolumeSlider = False 140 140 141 141 ----------------------------------------- 142 142 -- Instances ··· 306 306 ----------------------------------------- 307 307 -- Equalizer 308 308 ----------------------------------------- 309 - ActivateKnob a b -> 310 - Equalizer.activateKnob a b 311 - 312 - AdjustKnob a -> 313 - Equalizer.adjustKnob a 314 - 315 - DeactivateKnob _ -> 316 - Equalizer.deactivateKnob 309 + AdjustVolume a -> 310 + Equalizer.adjustVolume a 317 311 318 - ResetKnob a -> 319 - Equalizer.resetKnob a 312 + ToggleVolumeSlider a -> 313 + Equalizer.toggleVolumeSlider a 320 314 321 315 ----------------------------------------- 322 316 -- Interface
-6
src/Applications/UI/Adjunct.elm
··· 108 108 [ Keyboard.Character "3", Keyboard.Control ] -> 109 109 Common.changeUrlUsingPage (Page.Queue Queue.Index) m 110 110 111 - [ Keyboard.Character "4", Keyboard.Control ] -> 112 - Common.changeUrlUsingPage Page.Equalizer m 113 - 114 111 [ Keyboard.Character "8", Keyboard.Control ] -> 115 112 Common.changeUrlUsingPage (Page.Sources Sources.Index) m 116 113 ··· 133 130 134 131 else 135 132 case m.page of 136 - Page.Equalizer -> 137 - Return.singleton { m | page = Page.Index } 138 - 139 133 Page.Playlists Playlists.Index -> 140 134 Return.singleton { m | page = Page.Index } 141 135
+15 -125
src/Applications/UI/Equalizer/State.elm
··· 1 1 module UI.Equalizer.State exposing (..) 2 2 3 - import Coordinates 3 + import Common exposing (Switch(..)) 4 4 import Equalizer exposing (..) 5 - import Html.Events.Extra.Pointer as Pointer 6 - import Return exposing (andThen, return) 5 + import Return exposing (return) 7 6 import UI.Ports as Ports 8 7 import UI.Types exposing (..) 9 - import UI.User.State.Export as User 10 8 11 9 12 10 13 11 -- 📣 14 12 15 13 16 - activateKnob : Knob -> Pointer.Event -> Manager 17 - activateKnob theKnob { pointer } model = 18 - { knob = theKnob 19 - , startingPosition = Coordinates.fromTuple pointer.clientPos 20 - } 21 - |> (\m -> { model | eqKnobOperation = Just m }) 22 - |> Return.singleton 23 - 24 - 25 - adjustKnob : Pointer.Event -> Manager 26 - adjustKnob { pointer } model = 14 + adjustVolume : Float -> Manager 15 + adjustVolume volume model = 27 16 let 28 - start = 29 - case model.eqKnobOperation of 30 - Just { startingPosition } -> 31 - startingPosition 32 - 33 - Nothing -> 34 - { x = 0, y = 0 } 35 - 36 - end = 37 - (\( a, b ) -> { x = a, y = b }) 38 - pointer.clientPos 39 - 40 - x = 41 - end.x - start.x 42 - 43 - y = 44 - start.y - end.y 45 - 46 - distance = 47 - sqrt (x ^ 2 + y ^ 2) 48 - 49 - angle = 50 - atan2 x y 51 - * (180 / pi) 52 - |> max (maxAngle * -1) 53 - |> min maxAngle 54 - 55 - value = 56 - case ( distance > 10, Maybe.map .knob model.eqKnobOperation ) of 57 - ( True, Just Volume ) -> 58 - Just ( Volume, (maxAngle + angle) / (maxAngle * 2) ) 59 - 60 - ( True, Just knobType ) -> 61 - Just ( knobType, angle / maxAngle ) 62 - 63 - _ -> 64 - Nothing 65 - 66 17 settings = 67 18 model.eqSettings 68 - 69 - newSettings = 70 - case value of 71 - Just ( Low, v ) -> 72 - { settings | low = v } 73 - 74 - Just ( Mid, v ) -> 75 - { settings | mid = v } 76 - 77 - Just ( High, v ) -> 78 - { settings | high = v } 79 - 80 - Just ( Volume, v ) -> 81 - { settings | volume = v } 82 - 83 - Nothing -> 84 - settings 85 19 in 86 - case value of 87 - Just ( knobType, v ) -> 88 - return { model | eqSettings = newSettings } (adjustKnobUsingPort knobType v) 20 + return 21 + { model | eqSettings = { settings | volume = volume } } 22 + (adjustKnobUsingPort Volume volume) 89 23 90 - Nothing -> 91 - Return.singleton { model | eqSettings = newSettings } 92 24 25 + toggleVolumeSlider : Switch -> Manager 26 + toggleVolumeSlider switch model = 27 + case switch of 28 + On -> 29 + Return.singleton { model | showVolumeSlider = True } 93 30 94 - deactivateKnob : Manager 95 - deactivateKnob model = 96 - User.saveEnclosedUserData { model | eqKnobOperation = Nothing } 97 - 98 - 99 - resetKnob : Knob -> Manager 100 - resetKnob knob model = 101 - model 102 - |> resetKnobOrganizer knob 103 - |> andThen User.saveEnclosedUserData 31 + Off -> 32 + Return.singleton { model | showVolumeSlider = False } 104 33 105 34 106 35 ··· 129 58 130 59 adjustAllKnobs : Settings -> Cmd Msg 131 60 adjustAllKnobs eqSettings = 132 - Cmd.batch 133 - [ adjustKnobUsingPort Low eqSettings.low 134 - , adjustKnobUsingPort Mid eqSettings.mid 135 - , adjustKnobUsingPort High eqSettings.high 136 - , adjustKnobUsingPort Volume eqSettings.volume 137 - ] 138 - 139 - 140 - 141 - -- ㊙️ 142 - 143 - 144 - resetKnobOrganizer : Knob -> Manager 145 - resetKnobOrganizer knob model = 146 - let 147 - d = 148 - defaultSettings 149 - 150 - s = 151 - model.eqSettings 152 - in 153 - case knob of 154 - Low -> 155 - reset Low { s | low = d.low } d.low model 156 - 157 - Mid -> 158 - reset Mid { s | mid = d.mid } d.mid model 159 - 160 - High -> 161 - reset High { s | high = d.high } d.high model 162 - 163 - Volume -> 164 - reset Volume { s | volume = d.volume } d.volume model 165 - 166 - 167 - reset : Knob -> Equalizer.Settings -> Float -> Manager 168 - reset knobType newSettings value model = 169 - ( { model | eqSettings = newSettings } 170 - , adjustKnobUsingPort knobType value 171 - ) 61 + adjustKnobUsingPort Volume eqSettings.volume
-230
src/Applications/UI/Equalizer/View.elm
··· 1 - module UI.Equalizer.View exposing (view) 2 - 3 - import Chunky exposing (..) 4 - import Common 5 - import Equalizer exposing (..) 6 - import Html exposing (Html) 7 - import Html.Attributes as A 8 - import Html.Events 9 - import Html.Events.Extra.Pointer as Pointer 10 - import Json.Decode as Decode 11 - import Material.Icons.Round as Icons 12 - import Svg 13 - import Svg.Attributes 14 - import UI.Kit 15 - import UI.Navigation exposing (..) 16 - import UI.Page 17 - import UI.Types exposing (Msg(..)) 18 - 19 - 20 - 21 - -- 🗺 22 - 23 - 24 - view : Settings -> Html Msg 25 - view settings = 26 - UI.Kit.receptacle 27 - { scrolling = True } 28 - [ ----------------------------------------- 29 - -- Navigation 30 - ----------------------------------------- 31 - UI.Navigation.local 32 - [ ( Icon Icons.arrow_back 33 - , Label Common.backToIndex Hidden 34 - , NavigateToPage UI.Page.Index 35 - ) 36 - ] 37 - 38 - ----------------------------------------- 39 - -- Content 40 - ----------------------------------------- 41 - , chunk 42 - [ "relative", "select-none" ] 43 - [ chunk 44 - [ "absolute", "left-0", "top-0" ] 45 - [ UI.Kit.canister [ UI.Kit.h1 "Volume" ] 46 - ] 47 - ] 48 - 49 - -- 50 - , UI.Kit.centeredContent 51 - [ eqView settings ] 52 - ] 53 - 54 - 55 - eqView : Settings -> Html Msg 56 - eqView settings = 57 - chunk 58 - [ "equalizer" 59 - 60 - -- 61 - , "text-center" 62 - ] 63 - [ chunk 64 - [ "border" 65 - , "border-black-05" 66 - , "rounded" 67 - , "flex" 68 - 69 - -- Dark mode 70 - ------------ 71 - , "dark:border-base00" 72 - ] 73 - [ knob Volume settings.volume 74 - ] 75 - ] 76 - 77 - 78 - 79 - -- KNOB 80 - 81 - 82 - knob : Knob -> Float -> Html Msg 83 - knob knobType value = 84 - chunk 85 - [ "border-black-05" 86 - , "border-r" 87 - , "flex-grow" 88 - , "flex-shrink-0" 89 - , "px-10" 90 - , "py-4" 91 - 92 - -- 93 - , "last:border-r-0" 94 - 95 - -- 96 - , "sm:px-12" 97 - , "md:px-16" 98 - ] 99 - [ knob_ knobType value 100 - , knobLines 101 - , knobLabel knobType 102 - ] 103 - 104 - 105 - knob_ : Knob -> Float -> Html Msg 106 - knob_ knobType value = 107 - let 108 - angle = 109 - case knobType of 110 - Volume -> 111 - (value * maxAngle * 2) - maxAngle 112 - 113 - _ -> 114 - value * maxAngle 115 - 116 - resetDecoder = 117 - Decode.succeed 118 - { message = ResetKnob knobType 119 - , stopPropagation = True 120 - , preventDefault = True 121 - } 122 - in 123 - brick 124 - [ A.style "transform" ("rotate(" ++ String.fromFloat angle ++ "deg)") 125 - 126 - -- 127 - , Html.Events.custom "dblclick" resetDecoder 128 - , Html.Events.custom "dbltap" resetDecoder 129 - 130 - -- 131 - , knobType 132 - |> ActivateKnob 133 - |> Pointer.onDown 134 - ] 135 - [ "knob" 136 - 137 - -- 138 - , "cursor-pointer" 139 - , "mx-auto" 140 - , "overflow-hidden" 141 - , "relative" 142 - , "rounded-full" 143 - ] 144 - [ Html.map never knob__ ] 145 - 146 - 147 - knob__ : Html Never 148 - knob__ = 149 - Html.div 150 - [] 151 - [ decagonSvg 152 - , chunk 153 - [ "layer-a" 154 - 155 - -- 156 - , "absolute" 157 - , "inset-0" 158 - , "rounded-full" 159 - , "z-10" 160 - ] 161 - [ chunk 162 - [ "layer-b" 163 - 164 - -- 165 - , "mx-auto" 166 - ] 167 - [] 168 - ] 169 - ] 170 - 171 - 172 - knobLabel : Knob -> Html Msg 173 - knobLabel knobType = 174 - chunk 175 - [ "knob-label" 176 - 177 - -- 178 - , "font-semibold" 179 - , "mt-3" 180 - , "opacity-70" 181 - , "tracking-wide" 182 - ] 183 - [ case knobType of 184 - Low -> 185 - Html.text "LOW" 186 - 187 - Mid -> 188 - Html.text "MID" 189 - 190 - High -> 191 - Html.text "HIGH" 192 - 193 - Volume -> 194 - Html.text "VOLUME" 195 - ] 196 - 197 - 198 - knobLines : Html Msg 199 - knobLines = 200 - chunk 201 - [ "knob-lines" 202 - 203 - -- 204 - , "mx-auto" 205 - , "relative" 206 - ] 207 - [ chunk [ "absolute", "left-0", "top-0" ] [] 208 - , chunk [ "absolute", "right-0", "top-0" ] [] 209 - ] 210 - 211 - 212 - 213 - -- DECAGON 214 - 215 - 216 - decagonSvg : Svg.Svg msg 217 - decagonSvg = 218 - Svg.svg 219 - [ Svg.Attributes.class "mx-auto" 220 - , Svg.Attributes.fill "transparent" 221 - , Svg.Attributes.height "200" 222 - , Svg.Attributes.strokeLinejoin "miter" 223 - , Svg.Attributes.strokeWidth "7px" 224 - , Svg.Attributes.viewBox "0 0 200 200" 225 - , Svg.Attributes.width "200" 226 - ] 227 - [ Svg.polygon 228 - [ Svg.Attributes.points "129.665631459995,191.301425564335 70.3343685400051,191.301425564335 22.3343685400051,156.427384220077 4,100 22.334368540005,43.5726157799226 70.334368540005,8.69857443566526 129.665631459995,8.69857443566525 177.665631459995,43.5726157799226 196,100 177.665631459995,156.427384220077" ] 229 - [] 230 - ]
+1 -11
src/Applications/UI/Page.elm
··· 17 17 18 18 19 19 type Page 20 - = Equalizer 21 - | Index 20 + = Index 22 21 | Queue Queue.Page 23 22 | Playlists Playlists.Page 24 23 | Settings Settings.Page ··· 70 69 toString_ : Page -> String 71 70 toString_ page = 72 71 case page of 73 - Equalizer -> 74 - "equalizer" 75 - 76 72 Index -> 77 73 "" 78 74 ··· 151 147 ( Sources _, Sources _ ) -> 152 148 True 153 149 154 - ( Index, Equalizer ) -> 155 - True 156 - 157 150 ( Index, Playlists _ ) -> 158 151 True 159 152 ··· 186 179 route = 187 180 oneOf 188 181 [ map Index top 189 - 190 - -- 191 - , map Equalizer (s "equalizer") 192 182 193 183 ----------------------------------------- 194 184 -- Playlists
+65 -8
src/Applications/UI/Tracks/View.elm
··· 2 2 3 3 import Chunky exposing (..) 4 4 import Color exposing (Color) 5 + import Common exposing (Switch(..)) 5 6 import Conditional exposing (ifThenElse) 6 7 import Html exposing (Html, text) 7 - import Html.Attributes exposing (attribute, href, placeholder, style, tabindex, target, title, value) 8 - import Html.Events exposing (onBlur, onClick, onInput) 8 + import Html.Attributes as A exposing (attribute, href, placeholder, style, tabindex, target, title, value) 9 + import Html.Events as E exposing (onBlur, onClick, onInput) 9 10 import Html.Events.Extra.Mouse as Mouse 10 11 import Html.Ext exposing (onEnterKey) 11 12 import Html.Lazy exposing (..) 12 13 import Material.Icons.Round as Icons 13 14 import Material.Icons.Types exposing (Coloring(..)) 15 + import Maybe.Extra as Maybe 14 16 import Playlists exposing (Playlist) 15 17 import Tracks exposing (..) 16 18 import UI.Kit ··· 37 39 in 38 40 chunk 39 41 viewClasses 40 - [ lazy7 42 + [ lazy8 41 43 navigation 42 44 model.grouping 43 45 model.favouritesOnly ··· 46 48 isOnIndexPage 47 49 model.extractedBackdropColor 48 50 model.scene 51 + ( model.showVolumeSlider 52 + , model.eqSettings.volume 53 + ) 49 54 50 55 -- 51 56 , if List.isEmpty model.tracks.harvested then ··· 111 116 [ "flex" 112 117 , "flex-col" 113 118 , "flex-grow" 119 + , "relative" 114 120 ] 115 121 116 122 117 - navigation : Maybe Grouping -> Bool -> Maybe String -> Maybe Playlist -> Bool -> Maybe Color -> Scene -> Html UI.Msg 118 - navigation maybeGrouping favouritesOnly searchTerm selectedPlaylist isOnIndexPage bgColor scene = 123 + navigation : Maybe Grouping -> Bool -> Maybe String -> Maybe Playlist -> Bool -> Maybe Color -> Scene -> ( Bool, Float ) -> Html UI.Msg 124 + navigation maybeGrouping favouritesOnly searchTerm selectedPlaylist isOnIndexPage bgColor scene ( showVolumeSlider, volume ) = 119 125 let 120 126 tabindex_ = 121 127 ifThenElse isOnIndexPage 0 -1 122 128 in 123 129 chunk 124 - [ "sm:flex" ] 130 + [ "relative", "sm:flex" ] 125 131 [ ----------------------------------------- 126 132 -- Part 1 127 133 ----------------------------------------- ··· 339 345 , Label "Queue" Hidden 340 346 , NavigateToPage (Page.Queue UI.Queue.Page.Index) 341 347 ) 342 - , ( Icon Icons.volume_up 348 + , ( if volume == 0 then 349 + Icon Icons.volume_off 350 + 351 + else if volume < 0.5 then 352 + Icon Icons.volume_down 353 + 354 + else 355 + Icon Icons.volume_up 343 356 , Label "Volume" Hidden 344 - , NavigateToPage Page.Equalizer 357 + , PerformMsg (ToggleVolumeSlider <| ifThenElse showVolumeSlider Off On) 345 358 ) 346 359 ] 360 + , ----------------------------------------- 361 + -- Part 3 362 + ----------------------------------------- 363 + if showVolumeSlider then 364 + chunk 365 + [ "absolute" 366 + , "bg-white" 367 + , "px-4" 368 + , "py-3" 369 + , "right-0" 370 + , "rounded-bl" 371 + , "shadow-lg" 372 + , "top-full" 373 + , "z-30" 374 + 375 + -- Dark mode 376 + ------------ 377 + , "dark:bg-darkest-hour" 378 + ] 379 + [ chunk 380 + [ "leading-[0px]" 381 + , "my-1" 382 + , "pt-px" 383 + , "text-[0px]" 384 + ] 385 + [ slab 386 + Html.input 387 + [ A.type_ "range" 388 + , A.min "0" 389 + , A.max "1" 390 + , A.step "0.0125" 391 + , A.value (String.fromFloat volume) 392 + 393 + -- 394 + , E.onBlur SaveEnclosedUserData 395 + , E.onInput (String.toFloat >> Maybe.unwrap Bypass AdjustVolume) 396 + ] 397 + [ "range-slider" ] 398 + [] 399 + ] 400 + ] 401 + 402 + else 403 + nothing 347 404 ] 348 405 349 406
+3 -5
src/Applications/UI/Types.elm
··· 102 102 ----------------------------------------- 103 103 -- Equalizer 104 104 ----------------------------------------- 105 - , eqKnobOperation : Maybe Equalizer.KnobOperation 106 105 , eqSettings : Equalizer.Settings 106 + , showVolumeSlider : Bool 107 107 108 108 ----------------------------------------- 109 109 -- Instances ··· 213 213 ----------------------------------------- 214 214 -- Equalizer 215 215 ----------------------------------------- 216 - | ActivateKnob Knob Pointer.Event 217 - | AdjustKnob Pointer.Event 218 - | DeactivateKnob Pointer.Event 219 - | ResetKnob Knob 216 + | AdjustVolume Float 217 + | ToggleVolumeSlider Switch 220 218 ----------------------------------------- 221 219 -- Interface 222 220 -----------------------------------------
+3 -10
src/Applications/UI/View.elm
··· 3 3 import Alfred exposing (Alfred) 4 4 import Browser 5 5 import Chunky exposing (..) 6 + import Common exposing (Switch(..)) 6 7 import Conditional exposing (..) 7 8 import ContextMenu exposing (ContextMenu) 8 9 import Html exposing (Html, section) 9 10 import Html.Attributes exposing (class, style) 10 11 import Html.Events exposing (on) 11 - import Html.Events.Extra.Pointer as Pointer 12 12 import Html.Lazy as Lazy 13 13 import Json.Decode 14 14 import Maybe.Extra as Maybe ··· 19 19 import UI.Backdrop as Backdrop 20 20 import UI.Console 21 21 import UI.ContextMenu 22 - import UI.Equalizer.View as Equalizer 23 22 import UI.Navigation as Navigation 24 23 import UI.Notifications 25 24 import UI.Page as Page ··· 52 51 (if Maybe.isJust model.contextMenu || Maybe.isJust model.alfred then 53 52 [ on "tap" (Json.Decode.succeed HideOverlay) ] 54 53 55 - else if Maybe.isJust model.eqKnobOperation then 56 - [ Pointer.onMove AdjustKnob 57 - , Pointer.onUp DeactivateKnob 58 - , Pointer.onCancel DeactivateKnob 59 - ] 54 + else if model.showVolumeSlider then 55 + [ on "tap" (Json.Decode.succeed <| ToggleVolumeSlider Off) ] 60 56 61 57 else if model.isDragging then 62 58 [ class "dragging-something" ··· 157 153 -- Pages 158 154 -------- 159 155 , case model.page of 160 - Page.Equalizer -> 161 - Lazy.lazy Equalizer.view model.eqSettings 162 - 163 156 Page.Index -> 164 157 nothing 165 158
+101 -16
src/Css/Application.css
··· 8 8 @import "tailwindcss/components"; 9 9 @import "tailwindcss/utilities"; 10 10 11 - @import "Equalizer.css"; 12 11 @import "Fonts.css"; 13 12 @import "Logo.css"; 14 13 @import "Notifications.css"; ··· 22 21 .scrolling-touch { 23 22 -webkit-overflow-scrolling: touch; 24 23 } 24 + 25 25 .scrolling-auto { 26 26 -webkit-overflow-scrolling: auto; 27 27 } ··· 32 32 /* Base 33 33 ---- */ 34 34 35 - html, body { 35 + html, 36 + body { 36 37 height: calc(var(--vh, 1vh) * 100); 37 38 overflow: hidden; 38 39 overscroll-behavior: none; ··· 53 54 outline: none; 54 55 } 55 56 56 - .align-sub { vertical-align: sub } 57 - .all-small-caps { font-variant-caps: all-small-caps } 58 - .flex-basis-0 { flex-basis: 0 } 59 - .smooth-scrolling { scroll-behavior: smooth } 57 + .align-sub { 58 + vertical-align: sub 59 + } 60 + 61 + .all-small-caps { 62 + font-variant-caps: all-small-caps 63 + } 64 + 65 + .flex-basis-0 { 66 + flex-basis: 0 67 + } 68 + 69 + .smooth-scrolling { 70 + scroll-behavior: smooth 71 + } 60 72 61 73 @screen dark { 62 - body { @apply text-gray-600; } 74 + body { 75 + @apply text-gray-600; 76 + } 63 77 } 64 78 65 79 ··· 114 128 } 115 129 116 130 @screen dark { 131 + 117 132 input::placeholder, 118 133 textarea::placeholder { 119 134 @apply text-base03; ··· 137 152 138 153 .loading-animation__circle { 139 154 animation: loading-dash 1.5s ease-in-out infinite, 140 - loading-colors 6s ease-in-out infinite; 155 + loading-colors 6s ease-in-out infinite; 141 156 stroke-dasharray: 1, 86.25; 142 157 stroke-dashoffset: 0; 143 158 transform-origin: center; 144 159 } 145 160 146 161 @keyframes loading-rotator { 147 - 0% { transform: rotate(0deg); } 148 - 100% { transform: rotate(360deg); } 162 + 0% { 163 + transform: rotate(0deg); 164 + } 165 + 166 + 100% { 167 + transform: rotate(360deg); 168 + } 149 169 } 150 170 151 171 @keyframes loading-colors { 152 - 0% { stroke: rgb(248, 164, 167); } 153 - 25% { stroke: rgb(254, 196, 24); } 154 - 50% { stroke: rgb(72, 182, 133); } 155 - 75% { stroke: rgb(6, 182, 239); } 156 - 100% { stroke: rgb(248, 164, 167); } 172 + 0% { 173 + stroke: rgb(248, 164, 167); 174 + } 175 + 176 + 25% { 177 + stroke: rgb(254, 196, 24); 178 + } 179 + 180 + 50% { 181 + stroke: rgb(72, 182, 133); 182 + } 183 + 184 + 75% { 185 + stroke: rgb(6, 182, 239); 186 + } 187 + 188 + 100% { 189 + stroke: rgb(248, 164, 167); 190 + } 157 191 } 158 192 159 193 @keyframes loading-dash { ··· 161 195 stroke-dasharray: 1, 86.25; 162 196 stroke-dashoffset: 0; 163 197 } 198 + 164 199 50% { 165 200 stroke-dasharray: 64.6875, 86.25; 166 201 stroke-dashoffset: -21.5625; 167 202 } 203 + 168 204 100% { 169 205 stroke-dasharray: 64.6875, 86.25; 170 206 stroke-dashoffset: -86.25; ··· 176 212 /* Overrides 177 213 --------- */ 178 214 179 - .no-tracks-view > div { 215 + .no-tracks-view>div { 180 216 /* CSS fix for a scrolling issue: 181 217 Element would appear scrolled even though it's not (virtual-dom issue probably) 182 218 */ 183 219 overflow: visible !important; 184 220 } 221 + 222 + 223 + 224 + /* Range slider 225 + ------------ */ 226 + 227 + .range-slider { 228 + @apply appearance-none bg-gray-400 rounded w-24; 229 + height: 4px; 230 + } 231 + 232 + .range-slider::-webkit-slider-thumb { 233 + @apply appearance-none bg-base02; 234 + border-radius: 100%; 235 + height: 10px; 236 + width: 10px 237 + } 238 + 239 + .range-slider::-moz-range-thumb { 240 + @apply appearance-none bg-darkest-hour; 241 + border-radius: 100%; 242 + height: 10px; 243 + width: 10px 244 + } 245 + 246 + .range-slider::-ms-thumb { 247 + @apply appearance-none bg-darkest-hour; 248 + border-radius: 100%; 249 + height: 10px; 250 + width: 10px 251 + } 252 + 253 + @screen dark { 254 + .range-slider { 255 + @apply bg-base01; 256 + } 257 + 258 + .range-slider::-webkit-slider-thumb { 259 + @apply bg-base07; 260 + } 261 + 262 + .range-slider::-moz-range-thumb { 263 + @apply bg-base07; 264 + } 265 + 266 + .range-slider::-ms-thumb { 267 + @apply bg-base07; 268 + } 269 + }
-60
src/Css/Equalizer.css
··· 1 - :root { 2 - --knob-size: 36px; 3 - } 4 - 5 - 6 - 7 - /* Knob 8 - ---- */ 9 - 10 - .equalizer .knob { 11 - box-shadow: inset 0 0 5px 1px rgba(119, 119, 119, 0.35); 12 - height: var(--knob-size); 13 - width: var(--knob-size); 14 - } 15 - 16 - .equalizer .knob svg { 17 - height: calc(100% - 8px); 18 - margin-top: 4px; 19 - stroke: rgba(119, 119, 119, 0.7); 20 - width: calc(100% - 8px); 21 - } 22 - 23 - .equalizer .knob .layer-a { 24 - box-shadow: 0 0 6px 1px rgba(119, 119, 119, 1); 25 - margin: 8px; 26 - } 27 - 28 - .equalizer .knob .layer-b { 29 - background-color: rgba(119, 119, 119, 0.8); 30 - height: 9px; 31 - width: 2px; 32 - } 33 - 34 - 35 - 36 - /* Knob Label 37 - ---------- */ 38 - 39 - .equalizer .knob-label { 40 - font-size: 9.5px; 41 - } 42 - 43 - 44 - 45 - /* Knob Lines 46 - ---------- */ 47 - 48 - .equalizer .knob-lines { 49 - top: calc(var(--knob-size) / -4.5); 50 - width: var(--knob-size); 51 - } 52 - 53 - .equalizer .knob-lines > div { 54 - background-color: rgba(119, 119, 119, 0.8); 55 - height: 9px; 56 - width: 1px; 57 - } 58 - 59 - .equalizer .knob-lines > div:first-child { transform: rotate(45deg) } 60 - .equalizer .knob-lines > div:last-child { transform: rotate(-45deg) }