SwayNotificationCenter中自定义MPRIS播放器按钮样式指南

2025-07-10 12:59:14作者：齐添朝

概述

SwayNotificationCenter是一个功能强大的通知中心工具，它提供了对MPRIS(Media Player Remote Interfacing Specification)播放器的支持。本文将详细介绍如何自定义MPRIS播放器控制按钮的样式，特别是如何修改按钮颜色等视觉元素。

MPRIS播放器按钮结构分析

在SwayNotificationCenter中，MPRIS播放器的控制按钮位于播放器信息下方，通常包括"上一曲"、"播放/暂停"和"下一曲"三个主要按钮。这些按钮的HTML/CSS结构如下：

.widget-mpris-player
└── box
    └── button (多个)

自定义按钮样式

要修改这些控制按钮的样式，我们需要针对特定的CSS选择器进行样式定义。以下是几种常见的自定义场景：

1. 修改按钮默认颜色

.widget-mpris-player > box > button {
    color: #ffffff; /* 白色文本/图标 */
    background-color: transparent; /* 透明背景 */
}

2. 修改悬停状态样式

.widget-mpris-player > box > button:hover {
    color: #f0f0f0; /* 悬停时稍亮的白色 */
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
}

3. 修改活动状态样式(按钮按下时)

.widget-mpris-player > box > button:active {
    color: #d0d0d0; /* 按下时稍暗的白色 */
}

完整样式示例

以下是一个完整的MPRIS播放器样式自定义示例，包含了播放器信息和按钮的全面样式设置：

.widget-mpris {
    /* 播放器容器样式 */
    margin: 10px 0;
}

.widget-mpris-player {
    /* 单个播放器实例样式 */
    padding: 8px 12px;
    margin: 8px;
    border-radius: 8px;
    background-color: rgba(40, 40, 40, 0.8);
}

.widget-mpris-title {
    /* 歌曲标题样式 */
    font-weight: 500;
    color: #ffffff;
    font-size: 1.1rem;
}

.widget-mpris-subtitle {
    /* 艺术家/专辑信息样式 */
    font-size: 0.85rem;
    color: #bbbbbb;
}

/* 控制按钮样式 */
.widget-mpris-player > box > button {
    color: #ffffff;
    background: none;
    border: none;
    padding: 8px;
    margin: 0 4px;
    border-radius: 50%;
}

.widget-mpris-player > box > button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.widget-mpris-player > box > button:active {
    background-color: rgba(255, 255, 255, 0.3);
}