moonset/resources/style.css
nevaforget 2ca572773e fix: elevate CSS priority to override GTK4 user theme (v0.7.2)
Colloid-Catppuccin theme loaded via ~/.config/gtk-4.0/gtk.css at
PRIORITY_USER (800) was overriding moonset's PRIORITY_APPLICATION (600),
causing action buttons to lose their circular border-radius.

- Use STYLE_PROVIDER_PRIORITY_USER for app CSS provider
- Replace border-radius: 50% with 9999px (GTK4 CSS percentage quirk)
2026-03-29 14:23:33 +02:00

118 lines
2.4 KiB
CSS

/* ABOUTME: GTK4 CSS stylesheet for the Moonset power menu. */
/* ABOUTME: Uses GTK theme colors for consistency with the active desktop theme. */
/* Main panel window background */
window.panel {
background-color: @theme_bg_color;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 250ms ease-in;
}
window.panel.visible {
opacity: 1;
}
/* Wallpaper-only window for secondary monitors */
window.wallpaper {
background-color: @theme_bg_color;
opacity: 0;
transition: opacity 250ms ease-in;
}
window.wallpaper.visible {
opacity: 1;
}
/* Round avatar image */
.avatar {
border-radius: 9999px;
min-width: 128px;
min-height: 128px;
background-color: @theme_selected_bg_color;
border: 3px solid alpha(white, 0.3);
}
/* Username label */
.username-label {
font-size: 24px;
font-weight: bold;
color: white;
margin-top: 12px;
margin-bottom: 40px;
}
/* Action button — circular card */
.action-button {
min-width: 120px;
min-height: 120px;
padding: 16px;
border-radius: 9999px;
background-color: alpha(@theme_base_color, 0.55);
color: @theme_fg_color;
border: none;
}
.action-button:hover {
background-color: alpha(@theme_base_color, 0.7);
}
/* Action icon inside button — request 48px from theme, scale up via CSS */
.action-icon {
color: @theme_fg_color;
-gtk-icon-size: 64px;
}
/* Action label below icon */
.action-label {
font-size: 14px;
color: @theme_unfocused_fg_color;
}
/* Confirmation box below action buttons */
.confirm-box {
padding: 16px 24px;
background-color: transparent;
}
/* Confirmation prompt text */
.confirm-label {
font-size: 16px;
color: @theme_fg_color;
margin-bottom: 4px;
}
/* Confirm "Yes" button */
.confirm-yes {
padding: 8px 24px;
border-radius: 8px;
background-color: @error_color;
color: @theme_bg_color;
border: none;
font-weight: bold;
}
.confirm-yes:hover {
background-color: lighter(@error_color);
}
/* Confirm "No/Cancel" button */
.confirm-no {
padding: 8px 24px;
border-radius: 8px;
background-color: @theme_unfocused_bg_color;
color: @theme_fg_color;
border: none;
}
.confirm-no:hover {
background-color: @theme_selected_bg_color;
}
/* Error message label */
.error-label {
color: @error_color;
font-size: 14px;
}