Example CSS

[mochaaP]

/*
 * vim: ft=less 
 */

/* @import url("/usr/share/themes/Materia-nord/gtk-3.0/gtk.css"); */

.blank-window {
  background: alpha(@wm_unfocused_bg, 0.5);
}

.control-center {
  /* padding: 8px; */
  background: @theme_base_color;
  box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3), -1px 0 2px -1px rgba(0, 0, 0, 0.24), -1px 0 2px -0.6px rgba(0, 0, 0, 0.17), inset -1px 0 rgba(255, 255, 255, 0.05);
}


.widget-title {
  padding: 8px 8px;
}

.widget-title > label {
  font-weight: 300;
  font-size: 24pt;
}

.widget-title > button {
  border: none;
  font-size: 16px;
  min-width: 24px;
  padding: 6px;
  border-radius: 9999px;
  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
}

.widget-title > button:hover {
  color: rgba(255, 255, 255, 0.87);
  box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  background-color: #BF616A;
}


.widget-backlight {
  border-radius: 8px 8px 0 0;
  background-color: #424958;
  padding: 4px 0 8px 8px;
  margin: 0 8px;
}

.widget-volume {
  border-radius: 0 0 8px 8px;
  background-color: #424958;
  padding: 0 0 8px 8px;
  margin: 0 8px;
}

.widget-volume > box > label {
  font-size: 0px;
  min-width: 24px;
  background-image: -gtk-icontheme("audio-volume-high-symbolic");
  background-repeat: no-repeat;
  background-position: center;
}

.widget-backlight > label {
  font-size: 0px;
  min-width: 24px;
  background-image: -gtk-icontheme("display-brightness-symbolic");
  background-repeat: no-repeat;
  background-position: center;
}

.widget-volume > box > button {
  min-width: 24px;
  padding: 6px;
  border-radius: 9999px;
  font-size: 20px;
  color: rgba(229, 233, 240, 0.7);
  box-shadow: none;
  background-color: transparent;
}

.widget-volume > box > button:hover,
.widget-volume > box > button:focus
{
  background-color: rgba(229, 233, 240, 0.08);
}

.widget-mpris {
  background-color: #424958;
  margin: 8px;
  padding: 4px 0;
  border-radius: 8px;
}

.widget-mpris > box > button {
  min-width: 24px;
  margin: 54px 0;
  padding: 6px;
  border-radius: 9999px;
}

.widget-dnd {
  margin: 4px;
  padding: 0 8px;
}

.floating-notifications {
  background: transparent;
}


row {
  all: unset;
}

.control-center .notification-row {
  background-color: #2e3440;
  /* box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1); */
}

.notification-background {
  background: transparent;
  padding: 0;
}

.notification {
  background: #3b4252;
  transition: all 200ms ease;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
  /* box-shadow: none; */
  border-bottom: 1px rgba(0,0,0,0.12) solid;
  padding: 0;
  /* background-image: radial-gradient(circle, transparent 0%, transparent 0%); */
}

/* .notification-row:active:hover .notification { */
/*   background-image: radial-gradient(circle, rgba(229, 233, 240, 0.12) 100%, transparent 0%); */
/* } */

.notification-action {
  color: rgba(229, 233, 240, 0.7);
  box-shadow: none;
  background-color: transparent;
}

.notification-action:hover {
  box-shadow: none;
  background-color: rgba(229, 233, 240, 0.08);
}

.notification-action:focus {
  box-shadow: none;
  background-color: rgba(229, 233, 240, 0.08);
}

.notification-action:active {
  box-shadow: none;
  background-image: radial-gradient(circle, rgba(229, 233, 240, 0.12) 10%, transparent 0%);
}

.notification-action:disabled {
  background-color: transparent;
  color: rgba(229, 233, 240, 0.3);
}

.notification-action:checked {
  color: #5E81AC;
  box-shadow: none;
  background-color: rgba(94, 129, 172, 0.12);
}

.notification-action:checked:hover {
  box-shadow: none;
  background-color: rgba(94, 129, 172, 0.1904);
}

.notification-action:checked:focus {
  box-shadow: none;
  background-color: rgba(94, 129, 172, 0.1904);
}

.notification-action:checked:active {
  box-shadow: none;
  background-image: radial-gradient(circle, rgba(94, 129, 172, 0.12) 10%, transparent 0%);
}

.notification-action:checked:disabled {
  color: rgba(229, 233, 240, 0.3);
}

.notification-content {
  padding-bottom: 8px;
}

.notification-content .summary {
  color: #e5e9f0;
}

.notification-content .time {
  color: alpha(#e5e9f0, 0.53);
}

.notification-content .body {
  color: alpha(#e5e9f0, 0.54);
}

.notification-content .image {
  padding: 8px;
}