nixos/Droidnix/generated/.config/swaync/style.css

/* --- This file has been auto-generated. For permanent changes alter the appropriate block in the README.org. --- */
@import url("~/.config/shared/Colors.css");

   * {
  all: unset;
  font-size: 13px;
  font-family: sans-serif;
  transition: 200ms;
}

/* ── Gradient border mixin via background-image trick ──────────────────────
   Elements that need a gradient border get:
     background-image: linear-gradient(@base, @base),
                       linear-gradient(45deg, @blue, @green);
     background-clip: padding-box, border-box;
     background-origin: padding-box, border-box;
     border: 1px solid transparent;
   This paints the gradient behind the element, clipped to the border area.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Notification rows ─────────────────────────────────────────────────── */

.notification-row {
  outline: none;
  margin: 4px 0;
}

.notification-row:focus,
.notification-row:hover {
  opacity: 0.85;
}

/* ── Individual notification ───────────────────────────────────────────── */

.notification {
  border-radius: 12px;
  padding: 8px;
  margin: 4px 8px;
  color: @text;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* gradient border */
  border: 1px solid transparent;
  background-image:
    linear-gradient(@base-alpha, @base-alpha),
    linear-gradient(45deg, @blue, @green);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.notification-content {
  padding: 4px;
}

.notification-default-action {
  border-radius: 12px;
}

.notification-default-action:hover {
  background: alpha(@blue, 0.1);
}

/* ── Text elements ─────────────────────────────────────────────────────── */

.summary {
  font-size: 13px;
  font-weight: bold;
  color: @text;
}

.time {
  font-size: 11px;
  color: @overlay0;
}

.body {
  font-size: 12px;
  color: @subtext1;
}

/* ── Control center ────────────────────────────────────────────────────── */

.control-center {
  border-radius: 16px;
  padding: 8px;
  margin: 8px;
  color: @text;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);

  /* gradient border */
  border: 1px solid transparent;
  background-image:
    linear-gradient(@mantle, @mantle),
    linear-gradient(45deg, @blue, @green);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.control-center-list {
  background: transparent;
}

.control-center-list-placeholder {
  opacity: 0.4;
  font-size: 14px;
}

/* ── Misc windows ──────────────────────────────────────────────────────── */

.floating-notifications {
  background: transparent;
}

.blank-window {
  background: transparent;
}

/* ── Widget: title ─────────────────────────────────────────────────────── */

.widget-title {
  font-size: 14px;
  font-weight: bold;
  color: @blue;
  padding: 8px 4px 4px 4px;
}

.widget-title > button {
  font-size: 12px;
  color: @overlay0;
  background: alpha(@blue, 0.1);
  border-radius: 8px;
  padding: 2px 8px;
}

.widget-title > button:hover {
  background: alpha(@blue, 0.2);
  color: @text;
}

/* ── Widget: Do Not Disturb ────────────────────────────────────────────── */

.widget-dnd {
  padding: 4px;
}

.widget-dnd > switch {
  border-radius: 20px;
  background: alpha(@surface1, 0.3);

  /* gradient border */
  border: 1px solid transparent;
  background-image:
    linear-gradient(alpha(@surface1, 0.3), alpha(@surface1, 0.3)),
    linear-gradient(45deg, @blue, @green);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.widget-dnd > switch:checked {
  background-image:
    linear-gradient(alpha(@blue, 0.5), alpha(@blue, 0.5)),
    linear-gradient(45deg, @blue, @green);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.widget-dnd > switch slider {
  border-radius: 20px;
  background: @text;
  min-width: 20px;
  min-height: 20px;
}

/* ── Widget: inhibitors ────────────────────────────────────────────────── */

.widget-inhibitors {
  padding: 4px;
  color: @red;
  font-size: 12px;
}

/* ── Close button ──────────────────────────────────────────────────────── */

.close-button {
  background: alpha(@red, 0.15);
  border-radius: 6px;
  color: @red;
  padding: 2px 6px;
  font-size: 11px;
}

.close-button:hover {
  background: alpha(@red, 0.3);
}