[Solved] Swaync volume slider not showing when using all:unset
I always use all:unset in my css files and I did the same when configuring the swaync notification but somehow when using it inside global selector *{} it doesn’t show the volumeslider which is shows in a notification, related pictures will be attached. I wanna use all:unset and so I want to know how to re-enable volumeslider without removing all:unset. I’ve found this config to also use it but its in scss so I didn’t test it.
with all:unset using all:unset
without all:unset without all:unset
Full style.css ->
<span style="color:#63a35c;">* </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">all</span><span style="color:#323232;">: unset;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">font-family</span><span style="color:#323232;">: </span><span style="color:#183691;">"FiraMono Nerd Font"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">font-size</span><span style="color:#323232;">: </span><span style="color:#0086b3;">10</span><span style="font-weight:bold;color:#a71d5d;">pt</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">font-weight</span><span style="color:#323232;">: normal;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">notification </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#323232;">solid </span><span style="color:#ed6a43;">#504945</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">8</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">7</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">notification-content </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#ebdbb2</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">notification-row </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">margin</span><span style="color:#323232;">: </span><span style="color:#0086b3;">2</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">close-button </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#cc241d</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">50</span><span style="font-weight:bold;color:#a71d5d;">%</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#282828</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">close-button</span><span style="color:#323232;">:hover {
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#fb4934</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">transition</span><span style="color:#323232;">: all </span><span style="color:#0086b3;">0.15</span><span style="font-weight:bold;color:#a71d5d;">s </span><span style="color:#323232;">ease-in-out;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">time </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#98971a</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">font-size</span><span style="color:#323232;">: </span><span style="color:#0086b3;">9</span><span style="font-weight:bold;color:#a71d5d;">pt</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">margin-right</span><span style="color:#323232;">: </span><span style="color:#0086b3;">24</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">control-center </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#323232;">solid </span><span style="color:#ed6a43;">#504945</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">8</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">8</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">control-center-list-placeholder </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#7c6f64</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-title </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#ebdbb2</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-title </span><span style="color:#323232;">> </span><span style="color:#63a35c;">button </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#98971a</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#282828</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">4</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">2</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-title </span><span style="color:#323232;">> </span><span style="color:#63a35c;">button</span><span style="color:#323232;">:hover {
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#b8bb26</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#282828</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">transition</span><span style="color:#323232;">: all </span><span style="color:#0086b3;">0.15</span><span style="font-weight:bold;color:#a71d5d;">s </span><span style="color:#323232;">ease-in-out;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-dnd </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#3c3836</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#ebdbb2</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-dnd </span><span style="color:#323232;">> </span><span style="color:#63a35c;">switch </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#665c54</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">4</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-dnd </span><span style="color:#323232;">> </span><span style="color:#63a35c;">switch</span><span style="color:#323232;">:checked {
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#d65d0e</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.</span><span style="color:#795da3;">widget-dnd </span><span style="color:#323232;">> </span><span style="color:#63a35c;">switch</span><span style="color:#323232;"> slider {
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: </span><span style="color:#ed6a43;">#282828</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">4</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span>