diff --git a/src/styles/ContextMenu.scss b/src/styles/ContextMenu.scss index acc5ee5..1034704 100644 --- a/src/styles/ContextMenu.scss +++ b/src/styles/ContextMenu.scss @@ -14,7 +14,6 @@ background-color: spiceColor("main", 0.75, -0.1) !important; backdrop-filter: blur(10px); border-radius: var(--main-corner-radius); - box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1); @include spiceShadow(); } @@ -24,7 +23,6 @@ color: spiceColor("subtext") !important; &:hover, - &:focus, &:active, &[aria-expanded="true"] { background-color: spiceColor("subtext", 0.1, 0.3); diff --git a/src/styles/Fonts.scss b/src/styles/Fonts.scss index 291e591..be5531a 100644 --- a/src/styles/Fonts.scss +++ b/src/styles/Fonts.scss @@ -49,7 +49,7 @@ $font-weights: ( } // set font variables -body { +:root { --glue-font-family: #{map-get($font-names, "glue")}, #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; --info-font-family: #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; font-family: var(--glue-font-family); diff --git a/src/styles/Info.scss b/src/styles/Info.scss index bfe3284..68fb9cc 100644 --- a/src/styles/Info.scss +++ b/src/styles/Info.scss @@ -28,10 +28,5 @@ padding: 0px; aspect-ratio: 1/1; } - - & svg { - width: 1em; - height: 1em; - } } } diff --git a/src/styles/Inputs.scss b/src/styles/Inputs.scss index 9ea4970..420c416 100644 --- a/src/styles/Inputs.scss +++ b/src/styles/Inputs.scss @@ -1,24 +1,48 @@ -button.main-button-primary { - background-color: spiceColor("selected-row", 0.4) !important; +button.main-button { + &-primary { + $color: spiceColor("subtext"); + color: $color; + background-color: spiceColor("selected-row", 0.4) !important; - &:hover, - &:active { - background-color: spiceColor("selected-row", 0.6) !important; + &:hover, + &:active { + background-color: spiceColor("selected-row", 0.6) !important; + } + + span { + color: $color !important; + } } - span { - color: spiceColor("subtext") !important; - } -} + // ? Don't know if this exists + // &-secondary { + // $color: spiceColor("subtext"); + // color: $color; + // background-color: spiceColor("selected-row", 0.4) !important; -// Modals -.GenericModal button.main-button-primary { - background-color: spiceColor("subtext", 0.6) !important; - color: spiceColor("main") !important; + // &:hover, + // &:active { + // background-color: spiceColor("selected-row", 0.6) !important; + // } - &:hover, - &:active { - background-color: spiceColor("subtext") !important; + // span { + // color: $color !important; + // } + // } + + &-tertiary { + $color: spiceColor("subtext"); + color: $color; + background-color: spiceColor("selected-row", 0.2, 0.05) !important; + + &:hover, + &:active { + background-color: spiceColor("selected-row", 0.6) !important; + } + + span { + color: $color !important; + } } }