ediblerope
b5937e5fe9
Replace custom Discord CSS selectors with Midnight theme (loaded via online URL) and simple color variable overrides from matugen. Also add wallpaper-colored focus rings, edit button, and running dot to GNOME shell app grid. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
367 lines
12 KiB
CSS
367 lines
12 KiB
CSS
/* Wallpaper-based GNOME Shell colors generated by matugen */
|
|
|
|
/* Override system accent color variables */
|
|
stage {
|
|
-st-accent-color: {{colors.primary_container.default.hex}} !important;
|
|
-st-accent-fg-color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
#panel {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
#panel .panel-button {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
#panel .panel-button:hover, #panel .panel-button:focus {
|
|
background-color: transparent !important;
|
|
box-shadow: inset 0 0 0 100px {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
#panel .panel-button:active, #panel .panel-button:checked,
|
|
#panel .panel-button:checked:hover {
|
|
background-color: transparent !important;
|
|
box-shadow: inset 0 0 0 100px {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.quick-settings {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-settings-grid .quick-toggle {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Checked toggles — override accent color */
|
|
.quick-toggle:checked {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle:checked:hover {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle:checked:active {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* Quick toggle icons */
|
|
.quick-toggle .quick-toggle-icon {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle:checked .quick-toggle-icon {
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* Chevron/arrow menu button (the > on Wired, Power Mode etc) */
|
|
.quick-toggle-has-menu .quick-toggle-menu-button {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-has-menu .quick-toggle-menu-button:checked {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-has-menu .quick-toggle-menu-button:checked:hover {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-has-menu .quick-toggle-separator {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Icons and arrows inside quick toggles */
|
|
.quick-toggle StIcon {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle:checked StIcon {
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-menu-button StIcon {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-menu-button:checked StIcon {
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* Icon buttons in quick settings header */
|
|
.quick-settings .icon-button {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-settings .icon-button StIcon {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Sliders (volume, brightness) */
|
|
.slider {
|
|
color: {{colors.primary.default.hex}} !important;
|
|
-barlevel-active-background-color: {{colors.primary.default.hex}} !important;
|
|
-barlevel-background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
/* Quick toggle sub-menus (e.g. Wired Connections dropdown) */
|
|
.quick-toggle-menu {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-menu .header .title {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Active icon in sub-menu header (e.g. Wired Connections circle icon) */
|
|
.quick-toggle-menu .header .icon.active {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-menu .header .icon {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-toggle-menu .popup-menu-item {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.popup-menu-content {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
}
|
|
|
|
.popup-sub-menu .popup-menu-item {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.notification-banner {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Calendar / date menu panel */
|
|
.calendar, .datemenu-today-button, .events-button,
|
|
.world-clocks-button, .weather-button, .message {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-month-header .pager-button {
|
|
background-color: transparent !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-month-header .pager-button:hover {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-month-header .calendar-month-label {
|
|
background-color: transparent !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-day-heading, .calendar .calendar-day {
|
|
background-color: transparent !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-day:hover {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.calendar .calendar-day.calendar-today {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* Notification / message list */
|
|
.message-list-placeholder {
|
|
color: {{colors.on_surface_variant.default.hex}} !important;
|
|
}
|
|
|
|
.message-list-controls {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Round icon buttons in quick settings header (settings gear, lock, power etc) */
|
|
.quick-settings .icon-button {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.quick-settings .icon-button:hover {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.quick-settings .icon-button:active {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
/* Overview background */
|
|
#overview {
|
|
background-color: rgba({{colors.surface.default.red}}, {{colors.surface.default.green}}, {{colors.surface.default.blue}}, 0.85) !important;
|
|
}
|
|
|
|
/* Dash (app dock at bottom of overview) */
|
|
#dash .dash-background {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
}
|
|
|
|
#dash .show-apps .overview-icon {
|
|
background-color: transparent !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Search bar in overview */
|
|
.search-entry {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.search-entry:focus {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
border-color: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
/* Search results section */
|
|
.search-section-content {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Search result items */
|
|
.list-search-result, .search-provider-icon {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.list-search-result:hover, .search-provider-icon:hover {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
/* Search result tiles (scoped to search section to avoid dash) */
|
|
.search-section-content .overview-tile,
|
|
.search-section-content .grid-search-result {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.search-section-content .overview-tile:hover,
|
|
.search-section-content .grid-search-result:hover {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
.search-section-content .overview-tile:focus,
|
|
.search-section-content .grid-search-result:focus {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
/* App grid / app drawer */
|
|
.app-folder {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
.app-folder-dialog {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.app-folder-dialog .folder-name-entry {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Popup menus */
|
|
.popup-menu {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Window close button in overview */
|
|
.window-close {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.window-close:hover {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* Page navigation arrows (next/prev page in app drawer) */
|
|
.page-navigation-arrow {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.page-navigation-arrow:hover {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.app-folder-dialog .page-navigation-arrow {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Dash app icon highlights (hover/focus/active) */
|
|
#dash .dash-item-container .overview-tile .overview-icon,
|
|
#dash .dash-item-container .grid-search-result .overview-icon {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#dash .dash-item-container .overview-tile:hover .overview-icon,
|
|
#dash .dash-item-container .grid-search-result:hover .overview-icon {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
#dash .dash-item-container .overview-tile:active .overview-icon,
|
|
#dash .dash-item-container .grid-search-result:active .overview-icon {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
#dash .dash-item-container .overview-tile:focus .overview-icon,
|
|
#dash .dash-item-container .grid-search-result:focus .overview-icon {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
/* App grid edit mode button (pencil icon) */
|
|
.icon-button.edit-button,
|
|
.app-grid-edit-button {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
.icon-button.edit-button:hover,
|
|
.app-grid-edit-button:hover {
|
|
background-color: {{colors.surface_container_highest.default.hex}} !important;
|
|
}
|
|
|
|
.icon-button.edit-button:checked,
|
|
.app-grid-edit-button:checked {
|
|
background-color: {{colors.primary_container.default.hex}} !important;
|
|
color: {{colors.on_primary_container.default.hex}} !important;
|
|
}
|
|
|
|
/* App grid focused/selected app highlight ring */
|
|
.overview-tile:focus,
|
|
.overview-tile:selected {
|
|
outline-color: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
/* Global focus/keyboard-navigation highlight */
|
|
*:focus {
|
|
outline-color: {{colors.primary.default.hex}} !important;
|
|
border-color: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
/* App icon active/running indicator dot */
|
|
.app-well-app .overview-icon .app-running-dot {
|
|
background-color: {{colors.primary.default.hex}} !important;
|
|
}
|