mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-20 20:59:07 +00:00
update / refactor styles a bit
This commit is contained in:
parent
9994713e55
commit
7c2fbea06f
4 changed files with 41 additions and 24 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -28,10 +28,5 @@
|
|||
padding: 0px;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
& svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue