style: migrate to Adwaita CSS variables for theme integration

parent ba5bcaf5
.widget-backlight { .widget-backlight {
padding: 0px 10px;
margin: 5px 15px;
border-radius: var(--window-radius);
&.expanded {
background: var(--dialog-bg-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
}
}
.widget-backlight .image-button {
background: transparent;
} }
.widget-inhibitors { .widget-inhibitors {
& > label { background: transparent;
margin-right: $margin; padding: 0px;
margin: 10px 15px;
&>label {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: $margin;
} }
& > button { &>button {
background: var(--dialog-bg-color);
border-radius: 999px;
border: 1px solid var(--border-color);
margin-left: $margin; margin-left: $margin;
border-radius: var(--border-radius);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.5)");
border: 1px solid var(--accent-bg-color);
}
} }
} }
.widget-label { .widget-label {
& > label { margin: 5px 15px;
&>label {
font-size: 1.1rem; font-size: 1.1rem;
} }
} }
:root { :root {
--mpris-album-art-overlay: rgba(0, 0, 0, 0.55); --mpris-album-art-icon-size: 64px;
--mpris-button-hover: rgba(0, 0, 0, 0.5);
--mpris-album-art-icon-size: 96px;
--mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
} }
.widget-mpris { .widget-mpris {
padding: 0; padding: 0;
margin: 5px 10px;
/* The parent to all players */ carouselindicatordots {
.widget-mpris-player { margin: 0px;
margin: 16px 20px; padding: 0px;
border-radius: var(--border-radius); }
box-shadow: var(--mpris-album-art-shadow);
.flat.image-button {
margin: 0px;
padding: 0px;
}
.mpris-background { .mpris-background {
filter: blur(10px); background: transparent;
} }
.mpris-overlay { .widget-mpris-player {
padding: 16px; margin: 0 5px;
background-color: var(--mpris-album-art-overlay); border-radius: var(--window-radius);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
button:hover { .mpris-overlay {
/* The media player buttons (play, pause, next, etc...) */ background: var(--dialog-bg-color);
background: var(--noti-bg-hover); padding: 5px;
}
.widget-mpris-album-art { .widget-mpris-album-art {
border-radius: var(--border-radius); border-radius: var(--window-radius);
box-shadow: var(--mpris-album-art-shadow); margin: 3px;
box-shadow: none;
-gtk-icon-size: var(--mpris-album-art-icon-size); -gtk-icon-size: var(--mpris-album-art-icon-size);
} }
.widget-mpris-title { .widget-mpris-title {
font-weight: bold; font-weight: bold;
font-size: 1.25rem; font-size: 1.1rem;
} }
.widget-mpris-subtitle { .widget-mpris-subtitle {
font-size: 1.1rem; font-size: 0.9rem;
} }
&>box>button { .image-button {
padding: 0px 5px;
/* Change player control buttons */
&:hover { &:hover {
background-color: var(--mpris-button-hover); background: unquote("alpha(var(--window-bg-color), 0.3)");
} border: 0.5px solid var(--border-color);
} }
} }
} }
&>box>button {
/* Change player side buttons */
}
&>box>button:disabled {
/* Change player side buttons insensitive */
} }
} }
.widget-quick-settings { .widget-quick-settings {
padding: 0; padding: 0;
margin: 5px 15px;
} }
.quick-settings-row { .quick-settings-row {
...@@ -8,7 +9,30 @@ ...@@ -8,7 +9,30 @@
.quick-settings-tile { .quick-settings-tile {
border-radius: 999px; border-radius: 999px;
overflow: hidden; background: var(--dialog-bg-color);
box-shadow: 0px 0px 5px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.7)");
}
&.active {
background: var(--accent-bg-color);
color: var(--accent-fg-color);
&:hover {
background: unquote("alpha(var(--accent-bg-color), 0.85)");
}
.tile-arrow {
background: unquote("alpha(currentColor, 0.15)");
}
.tile-separator {
background: unquote("alpha(currentColor, 0.3)");
}
}
.tile-toggle { .tile-toggle {
padding: 4px 12px; padding: 4px 12px;
...@@ -17,17 +41,29 @@ ...@@ -17,17 +41,29 @@
background: transparent; background: transparent;
} }
.tile-separator {
background: unquote("alpha(currentColor, 0.3)");
}
.tile-arrow { .tile-arrow {
padding: 4px; padding: 4px;
min-width: 24px; min-width: 24px;
border: none; border: none;
box-shadow: none; box-shadow: none;
background: transparent; background: unquote("alpha(currentColor, 0.07)");
border-radius: 0 999px 999px 0;
&:hover {
background: unquote("alpha(currentColor, 0.2)");
}
} }
} }
.quick-settings-submenu { .quick-settings-submenu {
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin: 4px 0; margin: 5px 0;
padding: 4px; padding: 4px;
background: var(--dialog-bg-color);
border: 1px solid var(--border-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
} }
.widget-slider { .widget-slider {
label {
font-size: inherit;
}
} }
.widget-title { .widget-title {
& > label { background: transparent;
margin-right: $margin; padding: 0px;
margin: 10px 15px;
&>label {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: $margin;
} }
& > button { &>button {
background: var(--dialog-bg-color);
border-radius: 999px;
border: 1px solid var(--border-color);
margin-left: $margin; margin-left: $margin;
border-radius: var(--border-radius);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.5)");
border: 1px solid var(--accent-bg-color);
}
} }
} }
.widget-volume { .widget-volume {
padding: 0px 10px;
margin: 5px 15px;
border-radius: var(--window-radius);
&.expanded {
background: var(--dialog-bg-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
}
}
.widget-volume .image-button {
background: transparent;
}
.widget-volume>box {
margin: 0 0 0 3px;
} }
.widget-volume>box>button {} .widget-volume>box>button {}
.widget-volume revealer {
padding: 0;
margin: 0;
}
.per-app-volume { .per-app-volume {
background-color: var(--noti-bg-alt); background: transparent;
margin: $margin; padding: 0;
margin-bottom: 0; margin: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.per-app-volume row {
background: transparent;
}
...@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets { ...@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets {
// Multiple sources — collapsible layout // Multiple sources — collapsible layout
if (need_collapse) { if (need_collapse) {
add_css_class ("has-collapse");
var topbar = new Gtk.Box ( var topbar = new Gtk.Box (
Gtk.Orientation.HORIZONTAL, 6); Gtk.Orientation.HORIZONTAL, 6);
var topbar_icon = new Gtk.Image.from_icon_name ( var topbar_icon = new Gtk.Image.from_icon_name (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment