Themes

[Elvyria]

This discussion thread contains custom themes.

[Elvyria]

Vertical oriented white variant from the screenshot in README.
Tested Version: 0.2.3
(Requires Sass feature to compile)

Tiger Lily

/* Please refer to GTK4 CSS specification */

/* https://docs.gtk.org/gtk4/css-properties.html */

$bg:     #F9F9F9;
$fg:     #474747;
$accent: #A3F0E4;

* {
    all: unset;
}

window {
    border: 1px #BBC1FD solid;
    border-radius: 10px;

    background-color: $bg;
}

.main {
    margin: 20px;
}

.client {
    color: $fg;
    font-family: 'Noto Sans';
    font-size: 1.0em;

    .icon {
  	  color: $fg;

  	  -gtk-icon-style: symbolic;
    }

    .volume {
  	  /* Numeric Volume Level */
  	  color: $fg;
    }

    scale {
  	  trough {
  		  /* Slider Bar */
  		  background-color: lighter($bg);
  		  border-radius: 10px;

  		  slider {
  			  /* Slider Knob */
  			  min-height: 14px;
  			  min-width: 14px;

  			  margin: -4px;

  			  border: none;
  			  border-radius: 10px;

  			  background-color: #CF8EF4;
  			  transition-duration: 400ms;
  		  }

  		  slider:hover {
  			  background-color: #F190F4;
  		  }

  		  highlight {
  			  /* Slider Bar Filled */
  			  border: none;
  			  border-radius: 10px;

  			  margin: 1px;

  			  transition: background 300ms;
  		  }

  		  fill {
  			  /* Slider Peak */
  			  border-radius: 10px;

  			  margin: 0px;
  		  }
  	  }
    }

    scale:active {
  	  trough slider {
  		  background-color: #F190F4;
  		  transform: scale(1.1);
  	  }
    }

    &.muted {
  	  .volume {
  		  /* Numeric Volume Level */
  		  text-decoration: line-through;
  	  }
    }
}

.main .client.muted {
    scale {
  	  trough {
  		  slider {
  			  /* Slider Knob */
  			  background: #7D7D7D;
  		  }

  		  highlight {
  			  /* Slider Bar Filled */
  			  background: #7D7D7D;
  		  }

  		  fill {
  			  /* Slider Peak */
  			  background: #7D7D7D;
  		  }
  	  }
    }
}

.client.horizontal {

    &.new {
        animation: client-add-horizontal 300ms ease;
    }

    &.removed {
        animation: client-remove-horizontal 300ms ease;
    }

    .icon {
  	  padding-right: 13px;

  	  -gtk-icon-size: 16px;
    }

    .volume {
  	  /* Numeric Volume Level */
  	  padding-left: 15px;
  	  padding-bottom: 2px;
    }

    scale {
  	  trough {
  		  /* Slider Bar */
  		  min-height: 4px;

  		  slider {
  			  /* Slider Knob */
  			  margin-top: -7px;
  			  margin-bottom: -7px;
  		  }

  		  highlight {
  			  /* Slider Bar Filled */
  			  background-image: linear-gradient(to left, #CF8EF4, #71C7EE);
  		  }

  		  fill {
  			  /* Slider Peak */
  			  background-image: linear-gradient(to left, rgba(#CF8EF4, 0.3), #71C7EE);
  		  }
  	  }
    }
}

@keyframes client-add-horizontal {
    from {
  	  transform: translateX(-200px);
  	  opacity: 0;
    }
    to {
  	  opacity: 1;
    }
}

@keyframes client-remove-horizontal {
    from {
  	  opacity: 1;
    }
    to {
  	  transform: translateX(-200px);
  	  opacity: 0;
    }
}

.client.vertical {
    &.new {
        animation: client-add-vertical 300ms ease;
    }

    &.removed {
        animation: client-remove-vertical 300ms ease;
    }

    .icon {
  	  padding-bottom: 5px;

  	  -gtk-icon-size: 20px;
    }

    .volume {
  	  /* Numeric Volume Level */
  	  padding-top: 10px;
    }

    scale {
  	  trough {
  		  /* Slider Bar */
  		  min-width: 4px;

  		  margin-top: 10px;

  		  slider {
  			  /* Slider Knob */
  			  margin-left: -7px;
  			  margin-right: -7px;
  		  }

  		  highlight {
  			  /* Slider Bar Filled */
  			  background-image: linear-gradient(to bottom, #CF8EF4, #71C7EE);
  		  }

  		  fill {
  			  /* Slider Peak */
  			  background-image: linear-gradient(to bottom, rgba(#CF8EF4, 0.3), #71C7EE);
  		  }
  	  }
    }
}

@keyframes client-add-vertical {
    from {
  	  transform: translateY(200px);
  	  opacity: 0;
    }
    to {
  	  opacity: 1;
    }
}

@keyframes client-remove-vertical {
    from {
  	  opacity: 1;
    }
    to {
  	  transform: translateY(200px);
  	  opacity: 0;
    }
}