qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update Redmond DX style

Browse source
This commit is contained in:
Henry Jameson 2024-11-20 17:05:49 +02:00
parent d8a951dc52
commit 98a4b07ec1
1 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
static/styles/Redmond DX.piss
View file

@ -47,9 +47,10 @@ Root {
--bevelLight: color | $brightness(--bg 50); --bevelLight: color | $brightness(--bg 50);
--bevelDark: color | $brightness(--bg -20); --bevelDark: color | $brightness(--bg -20);
--bevelExtraDark: color | #404040; --bevelExtraDark: color | #404040;
--buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2); --buttonDefaultBevel: shadow | $borderSide(--bevelDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelExtraDark bottom-right 1 2);
--buttonPressedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner; --buttonPressedFocusedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
--defaultInputBevel: shadow | $borderSide(--bevelLight bottom-right 1), $borderSide(--bevelDark top-left 1 1), $borderSide(--bg bottom-right 1 2), $borderSide(--bevelExtraDark top-left 1 2); --buttonPressedBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2);
--defaultInputBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2), $borderSide(--bg bottom-right 1 2);
} }
Button:toggled { Button:toggled {
@ -80,12 +81,44 @@ Button:pressed:hover {
shadow: --buttonPressedBevel shadow: --buttonPressedBevel
} }
Button:hover:pressed:focused {
shadow: --buttonPressedFocusedBevel
}
Button:pressed:focused {
shadow: --buttonPressedFocusedBevel
}
Button:toggled:pressed {
shadow: --buttonPressedFocusedBevel
}
Input { Input {
background: $mod(--bg -80); background: $mod(--bg -80);
shadow: --defaultInputBevel; shadow: --defaultInputBevel;
roundness: 0 roundness: 0
} }
Input:focused {
shadow: inset 0 0 0 1 #000000 / 1, --defaultInputBevel
}
Input:focused:hover {
shadow: --defaultInputBevel
}
Input:focused:hover:disabled {
shadow: --defaultInputBevel
}
Input:hover {
shadow: --defaultInputBevel
}
Input:disabled {
shadow: --defaultInputBevel
}
Panel { Panel {
shadow: --buttonDefaultBevel; shadow: --buttonDefaultBevel;
roundness: 0 roundness: 0
@ -106,7 +139,8 @@ Tab:active {
} }
Tab:active:hover { Tab:active:hover {
background: --bg background: --bg;
shadow: --defaultButtonBevel
} }
Tab:active:hover:disabled { Tab:active:hover:disabled {
@ -125,3 +159,7 @@ Tab {
background: --bg; background: --bg;
shadow: --buttonDefaultBevel shadow: --buttonDefaultBevel
} }
Tab:hover:active {
shadow: --buttonDefaultBevel
}