swaync icon indicating copy to clipboard operation
swaync copied to clipboard
verified publisher icon catppuccin

Update for newer features

Open matthis-k opened this issue 1 year ago • 1 comments

I just wanted to ask if it is planned to support the new swaync features, such as the button menu, button grid, volume, and backlight. I extended and modified the CSS here a bit for myself, but wanted to share it, in case it might help to update this, if it is planned.

Here this can look as example: image

NOTE: I use NixOS and have it automatically replace the @color-name@ with the hex code, but it since the name is the same it should be fast to replace.

* {
  all: unset;
  font-size: 14px;
  font-family: "Hack Nerd Font Mono";
  transition: 200ms;
}

trough highlight {
    background: @txt@;
}

scale trough {
    margin: 0rem 1rem;
    background-color: @surface0@;
    min-height: 8px;
    min-width: 70px;
}

slider {
    background-color: @blue;
}

.floating-notifications.background .notification-row .notification-background {
  border: 1px solid @surface0@;
  margin: 18px;
  background-color: @base@;
  color: @txt@;
  padding: 0px;
}

.floating-notifications.background .notification-row .notification-background .notification {
  padding: 7px;
}

.floating-notifications.background .notification-row .notification-background .notification.critical {
  border: 1px solid @red@;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content {
  margin: 7px;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
  color: @txt@;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
  color: @subtext0@;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
  color: @txt@;
}

.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* {
  min-height: 3.4rem;
}

.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action {
  color: @txt@;
  background-color: @surface0@;
  border: 1px solid @surface1@;
  margin: 7px;
}

.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover {
  border: 1px solid @surface1@;
  background-color: @surface0@;
  color: @txt@;
}

.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active {
  border-color: @surface1@;
  background-color: @sapphire@;
  color: @txt@;
}

.floating-notifications.background .notification-row .notification-background .close-button {
  margin: 7px;
  border-radius: 1rem;
  color: @base@;
  background-color: @red@;
}

.floating-notifications.background .notification-row .notification-background .close-button:hover {
  background-color: @maroon@;
  color: @base@;
}

.floating-notifications.background .notification-row .notification-background .close-button:active {
  background-color: @red@;
  color: @base@;
}

.control-center {
  border: 1px solid @surface0@;
  background-color: @base@;
  color: @txt@;
  padding: 14px;
}

.control-center .widget-title>label {
  color: @txt@;
  font-size: 2rem;
}

.control-center .widget-title button {
  color: @txt@;
  background-color: @surface0@;
  border: 1px solid @surface1@;
  padding: 8px;
}

.control-center .widget-title button:hover {
  border: 1px solid @surface1@;
  background-color: @surface2@;
  color: @txt@;
}

.control-center .widget-title button:active {
  border: 1px solid @surface1@;
  background-color: @sapphire@;
  color: @base@;
}

.control-center .notification-row .notification-background {
  color: @txt@;
  background-color: @surface0@;
  border: 1px solid @surface1@;
  margin-top: 14px;
}

.control-center .notification-row .notification-background .notification {
  padding: 7px;
}

.control-center .notification-row .notification-background .notification.critical {
  border: 1px solid @red@;
}

.control-center .notification-row .notification-background .notification .notification-content {
  margin: 7px;
}

.control-center .notification-row .notification-background .notification .notification-content .summary {
  color: @txt@;
}

.control-center .notification-row .notification-background .notification .notification-content .time {
  color: @subtext0@;
}

.control-center .notification-row .notification-background .notification .notification-content .body {
  color: @txt@;
}

.control-center .notification-row .notification-background .notification>*:last-child>* {
  min-height: 3.4rem;
}

.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action {
  color: @txt@;
  background-color: @crust@;
  border: 1px solid @surface1@;
  margin: 7px;
}

.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover {
  border: 1px solid @surface1@;
  background-color: @surface0@;
  color: @txt@;
}

.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active {
  border: 1px solid @surface1@;
  background-color: @sapphire@;
  color: @txt@;
}

.control-center .notification-row .notification-background .close-button {
  margin: 7px;
  padding: 2px;
  color: @base@;
  background-color: @maroon@;
}

.close-button {
  border-radius: 6.3px;
}

.control-center .notification-row .notification-background .close-button:hover {
  background-color: @red@;
  color: @base@;
}

.control-center .notification-row .notification-background .close-button:active {
  background-color: @red@;
  color: @base@;
}

.control-center .notification-row .notification-background:hover {
  border: 1px solid @surface1@;
  background-color: @overlay1@;
  color: @txt@;
}

.control-center .notification-row .notification-background:active {
  border: 1px solid @surface1@;
  background-color: @sapphire@;
  color: @txt@;
}

.notification.critical progress {
  background-color: @red@;
}

.notification.low progress,
.notification.normal progress {
  background-color: @blue@;
}

.control-center-dnd {
  margin-top: 5px;
  background: @surface0@;
  border: 1px solid @surface1@;
}

.control-center-dnd:checked {
  background: @surface0@;
}

.control-center-dnd slider {
  background: @surface1@;
}

.widget-dnd {
  margin: 0px;
  font-size: 1.1rem;
}

.widget-dnd>switch {
  font-size: initial;
  background: @surface0@;
  border: 1px solid @surface1@;
}

.widget-dnd>switch:checked {
  background: @surface0@;
}

.widget-dnd>switch slider {
  background: @surface1@;
  border: 1px solid @overlay0@;
}

.widget-mpris .widget-mpris-player {
    background: @surface0@;
    padding: 7px;
}

.widget-mpris .widget-mpris-title {
    font-size: 1.2rem;
}

.widget-mpris .widget-mpris-subtitle {
    font-size: 0.8rem;
}

.widget-menubar>box>.menu-button-bar>button>label {
    font-size: 3rem;
    padding: 0.5rem 2rem;
}

.widget-menubar>box>.menu-button-bar>:last-child {
    color: @red@;
}

.power-buttons,
.powermode-buttons,
.screenshot-buttons {
    
}
.power-buttons button:hover,
.powermode-buttons button:hover,
.screenshot-buttons button:hover {
    background: @surface0@;
}

.control-center .widget-label>label {
  color: @txt@;
  font-size: 2rem;
}

.widget-buttons-grid {
    padding-top: 1rem;
}

.widget-buttons-grid>flowbox>flowboxchild>button label {
    font-size: 2.5rem;
}

.widget-volume {
    padding-top: 1rem;
}

.widget-volume label {
    font-size: 1.5rem;
    color: @sapphire@;
}

.widget-volume trough highlight {
    background: @sapphire@;
}

.widget-backlight trough highlight {
    background: @yellow@;
}
.widget-backlight scale {
    margin-right: 1rem;
}

.widget-backlight label {
    font-size: 1.5rem;
    color: @yellow@;
}

matthis-k avatar Mar 03 '24 08:03 matthis-k

I'd be happy to work on them, but seeing as you already have done alot of the work feel free to make a PR if you would prefer.

isabelroses avatar Mar 03 '24 08:03 isabelroses

This can be closed as https://github.com/catppuccin/swaync/pull/8 is merged :slightly_smiling_face:

flexiondotorg avatar Aug 26 '24 12:08 flexiondotorg