diff --git a/light/gtk-3.0/_libhandy.scss b/light/gtk-3.0/_libhandy.scss
new file mode 100644
index 00000000..1a622f8e
--- /dev/null
+++ b/light/gtk-3.0/_libhandy.scss
@@ -0,0 +1,773 @@
+// libhandy styles, mostly borrowed from Zuki, which in turn borrowed from Yaru
+$menu_radius: 5px;
+
+@function hdyalpha($c, $a) {
+ @return unquote("alpha(#{$c}, #{$a})");
+ }
+
+ @function hdymix($c1, $c2, $r) {
+ @return unquote("mix(#{$c1}, #{$c2}, #{$r})");
+ }
+
+ $leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24));
+ $leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2));
+ $leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
+
+ @mixin background-shadow($direction) {
+ background-image:
+ linear-gradient($direction,
+ rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)),
+ rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px,
+ rgba(0, 0, 0, 0) 56px),
+ linear-gradient($direction,
+ rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)),
+ rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px,
+ rgba(0, 0, 0, 0) 24px);
+ }
+
+ // Makes the corners of the given border rounded.
+ // $border must be top, bottom, left, or right.
+ @mixin rounded-border($border) {
+ // The floors (top, bottom) and walls (left, right) of the corners matching
+ // $border. This is needed to easily form floor-wall pairs regardless of
+ // whether $border is a floor or a wall.
+ $corners: (
+ 'top': (('top'), ('left', 'right')),
+ 'bottom': (('bottom'), ('left', 'right')),
+ 'left': (('top', 'bottom'), ('left')),
+ 'right': (('top', 'bottom'), ('right')),
+ );
+
+ @if not map-get($corners, $border) {
+ @error "Unknown border type: #{$border}";
+ }
+
+ // Loop through the floors and walls of the corners of $border.
+ @each $floor in nth(map-get($corners, $border), 1) {
+ @each $wall in nth(map-get($corners, $border), 2) {
+ border-#{$floor}-#{$wall}-radius: 8px;
+ -gtk-outline-#{$floor}-#{$wall}-radius: 7px;
+ }
+ }
+ }
+
+ @mixin margin-start($margin) {
+ &:dir(ltr) {
+ margin-left: $margin;
+ }
+
+ &:dir(rtl) {
+ margin-right: $margin;
+ }
+ }
+
+ // Roundness on unified window decoration
+ // https://gitlab.gnome.org/GNOME/libhandy/-/issues/339
+ window.csd.unified:not(.solid-csd):not(.fullscreen) {
+ &:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) {
+ &,
+ > decoration,
+ > decoration-overlay {
+ border-radius: 7px;
+ }
+ }
+ }
+
+ // HdyComboRow
+ popover.combo {
+ padding: 0px;
+
+ list {
+ border-style: none;
+ background-color: transparent;
+ min-width: 200px;
+ margin-top: 6px;
+ margin-bottom: 6px;
+
+ > row {
+ padding: 0px 8px 0px 8px;
+ min-height: 50px;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid hdyalpha($borders_color, 0.5)
+ }
+
+ &:first-child {
+ @include rounded-border(top);
+ }
+
+ &:last-child {
+ @include rounded-border(bottom);
+ }
+ }
+ }
+
+ @each $border in top, bottom {
+ overshoot.#{$border} {
+ @include rounded-border($border);
+ }
+ }
+
+ scrollbar.vertical {
+ padding-top: 2px;
+ padding-bottom: 2px;
+
+ &:dir(ltr) {
+ @include rounded-border(right);
+ }
+
+ &:dir(rtl) {
+ @include rounded-border(left);
+ }
+ }
+ }
+
+ // HdyExpanderRow
+ row.expander {
+ padding: 0px;
+
+ image.expander-row-arrow {
+ @include margin-start(6px);
+ }
+ }
+
+ row.expander {
+ // Drop transparent background on expander rows to let nested rows handle it,
+ // avoiding double highlights.
+ background-color: transparent;
+
+ list.nested > row {
+ background-color: hdyalpha($bg_color, 0.5);
+ border-color: hdyalpha($borders_color, 0.7);
+ border-style: solid;
+ border-width: 1px 0px 0px 0px;
+ }
+
+ // HdyExpanderRow arrow rotation
+
+ image.expander-row-arrow {
+ transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ &:checked image.expander-row-arrow {
+ -gtk-icon-transform: rotate(0turn);
+ }
+
+ &:not(:checked) image.expander-row-arrow {
+ opacity: 0.55;
+ text-shadow: none;
+
+ &:dir(ltr) {
+ -gtk-icon-transform: rotate(-0.25turn);
+ }
+
+ &:dir(rtl) {
+ -gtk-icon-transform: rotate(0.25turn);
+ }
+ }
+
+ &:checked image.expander-row-arrow:not(:disabled) {
+ color: $selected_bg_color;
+ }
+
+ & image.expander-row-arrow:disabled {
+ color: $insensitive_fg_color;
+ }
+ }
+
+ // HdyKeypad
+ keypad {
+ .digit {
+ font-size: 200%;
+ font-weight: bold;
+ }
+ .letters {
+ font-size: 70%;
+ }
+ .symbol {
+ font-size: 160%;
+ }
+ }
+
+ // HdyViewSwitcher
+ viewswitcher {
+ &, & button {
+ margin: 0;
+ padding: 0;
+ }
+
+ button {
+ border-radius: 0;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ font-size: 1rem;
+ border-width: 0;
+
+ &:not(:checked):not(:hover) {
+ background: transparent;
+ }
+
+ &:not(:only-child):not(:last-child) {
+ border-right-width: 0px;
+ }
+
+ &:not(only-child):first-child:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
+ border-left-color: transparent;
+ }
+
+ &:not(only-child):last-child:not(:checked):not(:hover) {
+ border-right-color: transparent;
+ }
+
+ &:not(:checked):hover:not(:backdrop) {
+ @include button(hover);
+ }
+
+ &:not(only-child):first-child:not(:checked):hover,
+ &:not(:checked):hover + button:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):hover {
+ border-left-color: shade($borders_color, 1.15);
+ }
+
+ &:not(only-child):last-child:not(:checked):hover {
+ border-right-color: shade($borders_color, 1.15);
+ }
+
+ &:not(:checked):hover:backdrop {
+ @include button(hover);
+ }
+
+ // View switcher in a header bar
+ headerbar &:not(:checked) {
+ &:hover:not(:backdrop) {
+ @include button(hover);
+ }
+
+ &:not(only-child):first-child:hover,
+ &:hover + button:not(:checked):not(:hover),
+ &:not(:hover) + button:not(:checked):hover {
+ border-left-color: $borders_color;
+ }
+
+ &:not(only-child):last-child:hover {
+ border-right-color: $borders_color;
+ }
+
+ &:hover:backdrop {
+ @include button(hover);
+ }
+ }
+ &:checked, &:active {
+ @include button(active);
+ }
+
+ // View switcher button
+ > stack > box {
+ &.narrow {
+ font-size: 0.75rem;
+ padding-top: 7px;
+ padding-bottom: 5px;
+
+ image,
+ label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+ }
+
+ &.wide {
+ padding: 8px 12px;
+
+ image {
+ &:dir(ltr) {
+ padding-left: 7px;
+ }
+
+ &:dir(rtl) {
+ padding-right: 7px;
+ }
+ }
+
+ label {
+ &:dir(ltr) {
+ padding-right: 7px;
+ }
+
+ &:dir(rtl) {
+ padding-left: 7px;
+ }
+ }
+ }
+
+ label.active {
+ font-weight: bold;
+ }
+ }
+
+ &.needs-attention {
+ &:active > stack > box label,
+ &:checked > stack > box label {
+ animation: none;
+ background-image: none;
+ }
+
+ > stack > box label {
+ animation: needs_attention 150ms ease-in;
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent));
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+ background-position: right 0px, right 1px;
+
+ &:backdrop {
+ background-size: 6px 6px, 0 0;
+ }
+
+ &:dir(rtl) {
+ background-position: left 0px, left 1px;
+ }
+ }
+ }
+ }
+ }
+
+ // HdyViewSwitcherBar
+ viewswitcherbar actionbar > revealer > box {
+ padding: 0;
+ }
+
+ // HdyViewSwitcherTitle
+ viewswitchertitle viewswitcher {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+
+ // Lists
+ list.content {
+ background-color: $base_color;
+ color: $fg_color;
+ border: 1px solid $borders_color;
+ border-radius: $menu_radius;
+
+ > row {
+ margin: 0;
+ padding: 2px;
+ transition: 200ms $ease-out-quad;
+ // Add space around expanded rows
+ &.expander:checked:not(:first-child),
+ &.expander:checked + row {
+ margin-top: 6px;
+ }
+ &:not(:last-child) {
+ border-bottom: 1px solid if($variant == 'light', lighten($borders_color, 7%), transparentize($borders_color, 0.5));
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+ }
+ &:first-child {
+ border-top-left-radius: $menu_radius;
+ border-top-right-radius: $menu_radius;
+ -gtk-outline-radius: $menu_radius $menu_radius 0 0;
+ }
+ &:last-child {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: $menu_radius;
+ border-bottom-right-radius: $menu_radius;
+ -gtk-outline-radius: 0 0 $menu_radius $menu_radius;
+ }
+ &:only-child {
+ border-bottom: none;
+ border-radius: $menu_radius;
+ -gtk-outline-radius: $menu_radius;
+ }
+ &:not(:selected):hover {
+ background-color: if($variant == 'light', darken($base_color, 4%), lighten($base_color, 4%));
+ }
+ }
+ }
+
+ // Preferences
+ .preferences scrolledwindow {
+ background-color: $sidebar_bg_color;
+ }
+
+ // List button
+ button.list-button:not(:active):not(:checked):not(:hover) {
+ background: none;
+ border: 1px solid hdyalpha($borders_color, 0.5);
+ box-shadow: none;
+ }
+
+ // HdyStatusPage
+ statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
+ color: transparentize($fg_color, 0.5);
+
+ &:backdrop {
+ color: transparentize($backdrop_fg_color, 0.5);
+ }
+ }
+
+ statuspage > scrolledwindow > viewport > box {
+ margin: 36px 12px;
+
+ > clamp {
+ &:not(:last-child) > box {
+ margin-bottom: 36px;
+ }
+
+ > box {
+ > .icon:not(:last-child) {
+ margin-bottom: 36px;
+ }
+
+ > .title:not(:last-child) {
+ margin-bottom: 12px;
+ }
+ }
+ }
+ }
+
+ // HdyActionRow
+ row {
+ label.subtitle {
+ font-size: smaller;
+ opacity: 0.55;
+ text-shadow: none;
+ }
+
+ > box.header {
+ margin-left: 12px;
+ margin-right: 12px;
+ min-height: 50px;
+
+ > box.title {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+ }
+ }
+
+ // Hdy tabs
+ @mixin undershoot-gradient($dir) {
+ @if $variant == 'dark' {
+ background: linear-gradient(to #{$dir},
+ transparentize(black, .6),
+ transparentize(black, 1) 20px);
+ }
+ @else {
+ background: linear-gradient(to #{$dir},
+ transparentize(black, .93),
+ transparentize(black, 1) 20px);
+ }
+ }
+
+ @mixin need-attention-gradient($dir) {
+ background: linear-gradient(to #{$dir},
+ transparentize($selected_bg_color, .3),
+ transparentize($selected_bg_color, .5) 1px,
+ transparentize($selected_bg_color, 1) 20px);
+ }
+
+ tabbar {
+ .box {
+ min-height: 38px;
+ background: $dark_fill;
+ border-bottom: 1px solid $borders_color;
+
+ &:backdrop {
+ background-color: $backdrop_dark_fill;
+ border-color: $backdrop_borders_color;
+ }
+ }
+
+ scrolledwindow.pinned {
+ undershoot {
+ border: 0 solid $borders_color;
+ }
+
+ &:dir(rtl) undershoot.left {
+ border-left-width: 1px;
+ }
+
+ &:dir(ltr) undershoot.right {
+ border-right-width: 1px;
+ }
+
+ &:backdrop undershoot {
+ border-color: $backdrop_borders_color;
+ }
+
+ tabbox {
+ &:dir(ltr) {
+ padding-right: 1px;
+ box-shadow: inset -1px 0 $borders_color;
+
+ &:backdrop {
+ box-shadow: inset -1px 0 $backdrop_borders_color;
+ }
+ }
+
+ &:dir(rtl) {
+ padding-left: 1px;
+ box-shadow: inset 1px 0 $borders_color;
+
+ &:backdrop {
+ box-shadow: inset 1px 0 $backdrop_borders_color;
+ }
+ }
+ }
+ }
+
+ undershoot {
+ transition: none;
+
+ &.left {
+ @include undershoot-gradient("right");
+ }
+
+ &.right {
+ @include undershoot-gradient("left");
+ }
+ }
+
+ .needs-attention-left undershoot.left {
+ @include need-attention-gradient("right");
+ }
+
+ .needs-attention-right undershoot.right {
+ @include need-attention-gradient("left");
+ }
+
+ tab {
+ border-style: solid;
+ border-color: $borders_color;
+ border-width: 0 1px 0 1px;
+ transition: background 150ms ease-in-out;
+ background-color: $dark_fill;
+
+ &:checked {
+ background-color: $base_color;
+
+ &:hover {
+ background-color: $base_color;
+ }
+ }
+
+ &:hover {
+ background-color: darken($dark_fill, 3%);
+ }
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+
+ &:checked {
+ background-color: $backdrop_bg_color;
+ }
+ }
+ }
+
+ .start-action,
+ .end-action {
+ background: $dark_fill;
+ border-color: $borders_color;
+ border-style: solid;
+ transition: background 150ms ease-in-out;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ }
+
+ button {
+ border: none;
+ border-radius: 0;
+ }
+ }
+
+ .start-action:dir(ltr),
+ .end-action:dir(rtl) {
+ border-right-width: 1px;
+
+ > * {
+ margin-right: 1px;
+ }
+ }
+
+ .start-action:dir(rtl),
+ .end-action:dir(ltr) {
+ border-left-width: 1px;
+
+ > * {
+ margin-left: 1px;
+ }
+ }
+ }
+
+ .tab-drag-icon {
+ tab {
+ min-height: 26px;
+ background-color: $base_color;
+
+ $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+ box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
+ 0 0 0 1px $_wm_border, //doing borders with box-shadow
+ inset 0 1px $top_hilight;
+
+ margin: 25px;
+ }
+ }
+
+ tabbar,
+ .tab-drag-icon {
+ tab {
+ padding: 6px;
+
+ &.needs-attention {
+ background-image:
+ radial-gradient(ellipse at bottom,
+ transparentize(white, .2),
+ transparentize($selected_bg_color, .8) 15%,
+ transparentize($selected_bg_color, 1) 15%);
+ }
+
+ .tab-close-button,
+ .tab-indicator {
+ padding: 0;
+ margin: 0;
+ min-width: 24px;
+ min-height: 24px;
+ border-radius: 99px;
+
+ border: none;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ text-shadow: none;
+ background: none;
+ }
+
+ .tab-close-button,
+ .tab-indicator.clickable {
+ &:hover {
+ background: hdyalpha($fg_color, .15);
+ }
+
+ &:active {
+ background: hdyalpha(black, .2);
+ }
+ }
+ }
+ }
+
+ // Shadows
+ flap,
+ deck,
+ leaflet {
+ > dimming {
+ background: $leaflet_dimming;
+ }
+
+ > border {
+ min-width: 1px;
+ min-height: 1px;
+ background: $leaflet_border;
+ }
+
+ > shadow {
+ min-width: 56px;
+ min-height: 56px;
+
+ &.left { @include background-shadow(to right); }
+ &.right { @include background-shadow(to left); }
+ &.up { @include background-shadow(to bottom); }
+ &.down { @include background-shadow(to top); }
+ }
+
+ > outline {
+ min-width: 1px;
+ min-height: 1px;
+ background: $leaflet_outline;
+ }
+ }
+
+ // Avatar
+ avatar {
+ border-radius: 9999px;
+ -gtk-outline-radius: 9999px;
+ font-weight: bold;
+
+ // The list of colors to generate avatars.
+ // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+ // There are 8 different colors for avtars in the list if you change the number of them you
+ // need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
+ // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+ $avatarcolorlist: (
+ (#cfe1f5, #83b6ec, #337fdc), // blue
+ (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+ (#cef8d8, #8de6b1, #29ae74), // green
+ (#e6f9d7, #b5e98a, #6ab85b), // lime
+ (#f9f4e1, #f8e359, #d29d09), // yellow
+ (#ffead1, #ffcb62, #d68400), // gold
+ (#ffe5c5, #ffa95a, #ed5b00), // orange
+ (#f8d2ce, #f78773, #e62d42), // raspberry
+ (#fac7de, #e973ab, #e33b6a), // magenta
+ (#e7c2e8, #cb78d4, #9945b5), // purple
+ (#d5d2f5, #9e91e8, #7a59ca), // violet
+ (#f2eade, #e3cf9c, #b08952), // beige
+ (#e5d6ca, #be916d, #785336), // brown
+ (#d8d7d3, #c0bfbc, #6e6d71), // gray
+ );
+
+ @for $i from 1 through length($avatarcolorlist) {
+ &.color#{$i} {
+ $avatarcolor: nth($avatarcolorlist, $i);
+ background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+ color: nth($avatarcolor, 1);
+ }
+ }
+
+ &.contrasted { color: #fff; }
+
+ &.image { background: none; }
+ }
+
+ // Preferences
+ window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp,
+ preferencespage > scrolledwindow > viewport > clamp {
+ margin: 0 12px;
+
+ > list,
+ > box > preferencesgroup { margin-top: 24px; }
+ }
+
+ preferencesgroup > box {
+ // Add space between the description and the title.
+ > label:not(:first-child) {
+ margin-top: 6px;
+ }
+
+ // Add space between the box and the labels.
+ > box:not(:first-child) {
+ margin-top: 12px;
+ }
+ }
+
+ tabbar .tab-indicator:not(.clickable) {
+ background: none;
+ box-shadow: none;
+ border-color: transparent;
+ }
+
+ // window handle
+ .windowhandle {
+ &, & * {
+ // This is the most reliable way to enable window dragging
+ -GtkWidget-window-dragging: true;
+ }
+ }
\ No newline at end of file
diff --git a/light/gtk-3.0/gtk-dark.scss b/light/gtk-3.0/gtk-dark.scss
new file mode 100644
index 00000000..07fcb389
--- /dev/null
+++ b/light/gtk-3.0/gtk-dark.scss
@@ -0,0 +1,12 @@
+$variant: 'dark';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
+@import 'gnome-apps';
+@import 'lightdm-gtk-greeter';
+@import 'others';
+@import 'unity';
+@import 'xfce';
+@import 'libhandy';
\ No newline at end of file
diff --git a/light/gtk-3.0/gtk.scss b/light/gtk-3.0/gtk.scss
new file mode 100644
index 00000000..b83db920
--- /dev/null
+++ b/light/gtk-3.0/gtk.scss
@@ -0,0 +1,12 @@
+$variant: 'light';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
+@import 'gnome-apps';
+@import 'lightdm-gtk-greeter';
+@import 'others';
+@import 'unity';
+@import 'xfce';
+@import 'libhandy';
\ No newline at end of file
diff --git a/light/gtk-3.0/meson.build b/light/gtk-3.0/meson.build
new file mode 100644
index 00000000..df8438bf
--- /dev/null
+++ b/light/gtk-3.0/meson.build
@@ -0,0 +1,41 @@
+gtk3_dir = join_paths(theme_path, 'gtk-3.0')
+
+# theme sources .scss files
+
+# The files that need to be compiled
+gtk3_scss_sources = [
+ 'gtk',
+ 'gtk-dark'
+]
+
+# Dependencies of the files that need to be compiled
+gtk3_scss_dependencies = [
+ '_colors-public.scss',
+ '_colors.scss',
+ '_common.scss',
+ '_drawing.scss',
+ '_gnome-apps.scss',
+ '_lightdm-gtk-greeter.scss',
+ '_others.scss',
+ '_unity.scss',
+ '_xfce.scss',
+ '_libhandy.scss'
+]
+
+# Generate .css files and install
+gtk3_scss_dependencies = files(gtk3_scss_dependencies)
+#
+foreach f : gtk3_scss_sources
+ custom_target('greybird-generate_' + f,
+ input: f + '.scss',
+ output: f + '.css',
+ depend_files: gtk3_scss_dependencies,
+ command: [sassc, '-M', '-t', 'compact', '@INPUT@', '@OUTPUT@'],
+ build_by_default: true,
+ install: true,
+ install_dir: gtk3_dir,
+ )
+endforeach
+
+# Install asset files to themes/ThemeName/gtk-3.0/assets
+install_subdir('assets', install_dir : gtk3_dir, strip_directory : false)
\ No newline at end of file
diff --git a/light/gtk-4.0/Gemfile b/light/gtk-4.0/Gemfile
new file mode 100644
index 00000000..56af69e6
--- /dev/null
+++ b/light/gtk-4.0/Gemfile
@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem "sass", "~> 3.4.0"
diff --git a/light/gtk-4.0/README b/light/gtk-4.0/README
new file mode 100644
index 00000000..1e3f8051
--- /dev/null
+++ b/light/gtk-4.0/README
@@ -0,0 +1,35 @@
+Summary
+-------
+
+* Do not edit the CSS directly, edit the source SCSS files and process them with SASS (run
+ `./parse-sass.sh` when you have the required software installed, as described below)
+* To be able to use the latest/adequate version of sass, install ruby, gem, sass & bundler.
+ On Fedora F20, this is done with `sudo dnf install rubygems && gem install bundle && bundle install`
+ from the same directory this README resides in.
+
+How to tweak the theme
+----------------------
+
+Greybird is a complex theme (based on Adwaita), so to keep it maintainable it's written and processed
+in SASS.
+
+It is very likely your change will happen in the _common.scss file. That's where all the widget
+selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the
+right place for a drive by stylesheet fix:
+
+_colors.scss - global color definitions. We keep the number of defined colors to a necessary minimum,
+ most colors are derived form a handful of basics. It covers both the light variant and
+ the dark variant.
+
+_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party apps color mixing.
+
+_drawing.scss - drawing helper mixings/functions to allow easier definition of widget drawing under
+ specific context. This is why Adwaita isn't 15000 LOC.
+
+_common.scss - actual definitions of style for each widget. This is where you are likely to add/remove
+ your changes.
+
+You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the
+_common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you
+edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is
+missing, you can install it with `bundle install`.
diff --git a/light/gtk-4.0/_colors-public.scss b/light/gtk-4.0/_colors-public.scss
new file mode 100644
index 00000000..ebc64f71
--- /dev/null
+++ b/light/gtk-4.0/_colors-public.scss
@@ -0,0 +1,112 @@
+//apps rely on some named colors to be exported
+/* GTK NAMED COLORS
+ ----------------
+ use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using "" + $var
+/*
+widget text/foreground color */
+@define-color theme_fg_color #{"" +$fg_color};
+
+/*
+text color for entries, views and content in general */
+@define-color theme_text_color #{"" +$text_color};
+
+/*
+widget base background color */
+@define-color theme_bg_color #{"" +$bg_color};
+
+/*
+text widgets and the like base background color */
+@define-color theme_base_color #{"" +$base_color};
+
+/*
+base background color of selections */
+@define-color theme_selected_bg_color #{"" +$selected_bg_color};
+
+/*
+text/foreground color of selections */
+@define-color theme_selected_fg_color #{"" +$selected_fg_color};
+
+/*
+base background color of insensitive widgets */
+@define-color insensitive_bg_color #{"" +$insensitive_bg_color};
+
+/*
+text foreground color of insensitive widgets */
+@define-color insensitive_fg_color #{"" +$insensitive_fg_color};
+
+/*
+insensitive text widgets and the like base background color */
+@define-color insensitive_base_color #{"" +$base_color};
+
+/*
+widget text/foreground color on backdrop windows */
+@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color};
+
+/*
+text color for entries, views and content in general on backdrop windows */
+@define-color theme_unfocused_text_color #{"" +$text_color};
+
+/*
+widget base background color on backdrop windows */
+@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color};
+
+/*
+text widgets and the like base background color on backdrop windows */
+@define-color theme_unfocused_base_color #{"" +$backdrop_base_color};
+
+/*
+base background color of selections on backdrop windows */
+@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color};
+
+/*
+text/foreground color of selections on backdrop windows */
+@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
+
+/*
+widgets main borders color */
+@define-color borders #{"" +$borders_color};
+
+/*
+widgets main borders color on backdrop windows */
+@define-color unfocused_borders #{"" +$backdrop_borders_color};
+
+/*
+these are pretty self explicative */
+@define-color warning_color #{"" +$warning_color};
+@define-color error_color #{"" +$error_color};
+@define-color success_color #{"" +$success_color};
+//@define-color destructive_color #{$destructive_color}
+
+//WM
+
+$_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is
+ transparentize(black,1)); // done directly in the
+ // color definition
+
+/*
+these colors are exported for the window manager and shouldn't be used in applications,
+read if you used those and something break with a version upgrade you're on your own... */
+@define-color wm_title shade(#{$fg_color}, 1.8);
+@define-color wm_unfocused_title #{$backdrop_fg_color};
+@define-color wm_highlight #{"" + $_wm_highlight};
+@define-color wm_borders_edge #{"" + $borders_edge};
+
+@define-color wm_bg_a shade(#{$bg_color}, 1.2);
+@define-color wm_bg_b #{$bg_color};
+
+@define-color wm_shadow alpha(black, 0.35);
+@define-color wm_border alpha(black, 0.18);
+
+@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
+@define-color wm_button_hover_color_b #{$bg_color};
+@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
+@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
+@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
+
+//FIXME this is really an API
+
+@define-color content_view_bg #{"" + $base_color};
+
diff --git a/light/gtk-4.0/_colors.scss b/light/gtk-4.0/_colors.scss
new file mode 100644
index 00000000..81d7d36d
--- /dev/null
+++ b/light/gtk-4.0/_colors.scss
@@ -0,0 +1,72 @@
+// When color definition differs for dark and light variant
+// it gets @if ed depending on $variant
+
+
+$base_color: if($variant == 'light', #fcfcfc, #2d2e30);
+$text_color: if($variant == 'light', #212121, white);
+$bg_color: if($variant == 'light', #cecece, #3b3e3f);
+$fg_color: if($variant == 'light', #3c3c3c, #eeeeec);
+
+$selected_fg_color: #ffffff;
+$selected_bg_color: if($variant == 'light', #398ee7, darken(#398ee7,20%));
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%));
+$borders_color: if($variant == 'light', darken($bg_color,30%), darken($bg_color,12%));
+$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
+$link_color: if($variant == 'light', #2d71b8, lighten(#2d71b8,20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%));
+$top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 35%);
+$headerbar_color: if($variant == 'light', $bg_color, darken($bg_color, 3%));
+$menu_color: if($variant == 'light', lighten($bg_color, 18%), mix($bg_color, $base_color, 20%));
+$popover_bg_color: lighten($bg_color, 18%);
+$popover_hover_color: $selected_bg_color;
+
+$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
+$scrollbar_slider_color: $bg_color;
+$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
+$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
+
+$warning_color: #f57900;
+$error_color: #cc0000;
+$success_color: if($variant == 'light', #4e9a06, darken(#4e9a06,10%));
+$destructive_color: if($variant == 'light', #ef2929, darken(#ef2929,10%));
+
+$osd_fg_color: #eeeeee;
+$osd_text_color: white;
+$osd_bg_color: transparentize(#222, 0.2);
+$osd_insensitive_bg_color: transparentize(#222, 0.2);
+$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_borders_color: transparentize(black, 0.3);
+
+$sidebar_bg_color: if($variant == 'light', #dae0e6, #222);
+$base_hover_color: transparentize($fg_color, 0.95);
+
+$tooltip_borders_color: transparentize(white, 0.9);
+$shadow_color: transparentize(black, 0.9);
+
+$drop_target_color: #4e9a06;
+
+$panel_bg_color: #686868;
+$panel_fg_color: #fcfcfc;
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
+$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
+$backdrop_bg_color: $bg_color;
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
+$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
+$backdrop_selected_fg_color: if($variant == 'light', darken($base_color, 50%), $backdrop_text_color);
+$backdrop_selected_bg_color: if($variant == 'light', darken($base_color, 17%), lighten($bg_color, 17%));
+$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
+$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
+
+$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
+$backdrop_scrollbar_slider_color: lighten($scrollbar_slider_color, 35%);
+
+$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
diff --git a/light/gtk-4.0/_common.scss b/light/gtk-4.0/_common.scss
new file mode 100755
index 00000000..c9a7199b
--- /dev/null
+++ b/light/gtk-4.0/_common.scss
@@ -0,0 +1,4786 @@
+@function gtkalpha($c,$a) {
+ @return unquote("alpha(#{$c},#{$a})");
+}
+
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', '');
+$backdrop_transition: 200ms ease-out;
+$button_transition: all 200ms $ease-out-quad;
+$button_radius: 3px;
+$menu_radius: 5px;
+$menu_margin: $menu_radius; //margin around menuitems & sidebar items
+$window_radius: $button_radius + 4;
+$popover_radius: $button_radius + 5;
+
+selection { @extend %selected_items; }
+
+/***************
+ * Base States *
+ ***************/
+.background {
+ color: $fg_color;
+ background-color: $bg_color;
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ background-color: $backdrop_bg_color;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+dnd {
+ color: $fg-color;
+}
+
+.normal-icons {
+ -gtk-icon-size: 16px;
+}
+
+.large-icons {
+ -gtk-icon-size: 32px;
+}
+
+image:disabled {
+ -gtk-icon-filter: opacity(0.5);
+}
+
+.view,
+%view {
+ color: $text_color;
+ background-color: $base_color;
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ background-color: $backdrop_base_color;
+ &:disabled { color: $backdrop_insensitive_color; }
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ background-color: $insensitive_bg_color;
+ }
+
+ &:selected {
+ @extend %selected_items;
+ &:focus, & {
+ border-radius: 3px;
+ }
+ }
+}
+
+.view,
+textview {
+ text {
+ @extend %view;
+ }
+}
+
+textview border { background-color: mix($bg_color, $base_color, 50%); }
+
+iconview { @extend .view; }
+
+.rubberband,
+rubberband {
+ border: 1px solid darken($selected_bg_color, 10%);
+ background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+}
+
+flowbox {
+ rubberband { @extend rubberband; }
+
+ flowboxchild {
+ padding: 3px;
+ border-radius: 3px;
+
+ &:selected {
+ @extend %selected_items;
+
+ outline-offset: -2px;
+ }
+ }
+}
+
+.content-view .tile {
+ margin: 2px;
+ background-color: if($variant=='light', transparent, black);
+ border-radius: 0;
+ padding: 0;
+
+ &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
+ &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
+ &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
+}
+
+label {
+ caret-color: currentColor; // this shouldn't be needed.
+
+ &.separator {
+ @extend .dim-label;
+
+ color: $fg_color;
+
+ &:backdrop { color: $backdrop_fg_color; }
+ }
+
+ row:selected &,
+ &:selected { @extend %nobg_selected_items; }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ button & { color: inherit; }
+
+ &:backdrop {
+ color: $backdrop_insensitive_color;
+
+ button & { color: inherit; }
+ }
+
+ selection { @extend %selected_items:disabled; }
+ }
+
+ // Special case for selections in labels.
+ // (because `selection:backdrop` does not apply)
+ &:backdrop selection {
+ color: $backdrop_selected_fg_color;
+ background-color: $backdrop_selected_bg_color;
+ }
+}
+
+.dim-label {
+ opacity: 0.55;
+ text-shadow: none;
+}
+
+assistant {
+ .sidebar {
+ background-color: $base_color;
+ border-top: 1px solid $borders_color;
+
+ &:backdrop {
+ background-color: $backdrop_base_color;
+ border-color: $backdrop_borders_color;
+ }
+ }
+
+ &.csd .sidebar { border-top-style: none; }
+
+ .sidebar label { padding: 6px 12px; }
+
+ .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
+}
+
+%osd,
+.osd {
+ color: $osd_fg_color;
+ border: none;
+ background-color: $osd_bg_color;
+ background-clip: padding-box;
+ outline-color: transparentize($osd_fg_color, 0.7);
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:backdrop {
+ color: shade($osd_fg_color, 1.2);
+ background-color: shade($osd_bg_color, 1.6);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+
+/*********************
+ * Spinner Animation *
+ *********************/
+@keyframes spin {
+ to { transform: rotate(1turn); }
+}
+
+spinner {
+ background: none;
+ &:backdrop { color: $backdrop_fg_color; }
+ opacity: 0; // non spinning spinner makes no sense
+ -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+ &:checked {
+ opacity: 1;
+ animation: spin 1s linear infinite;
+
+ &:disabled { opacity: 0.5; }
+ }
+}
+
+/**********************
+ * General Typography *
+ **********************/
+
+.large-title {
+ font-weight: 300;
+ font-size: 24pt;
+}
+.title-1 {
+ font-weight: 800;
+ font-size: 20pt;
+}
+.title-2 {
+ font-weight: 800;
+ font-size: 15pt;
+}
+.title-3 {
+ font-weight: 700;
+ font-size: 15pt;
+}
+.title-4 {
+ font-weight: 700;
+ font-size: 13pt;
+}
+.heading {
+ font-weight: 700;
+ font-size: 11pt;
+}
+.body {
+ font-weight: 400;
+ font-size: 11pt;
+}
+.caption-heading {
+ font-weight: 700;
+ font-size: 9pt;
+}
+.caption {
+ font-weight: 400;
+ font-size: 9pt;
+}
+
+/****************
+ * Text Entries *
+ ****************/
+
+%entry,
+entry {
+ %entry_basic, & {
+ min-height: 28px;
+ padding-left: 4px;
+ padding-right: 4px;
+ border: 1px solid;
+ border-radius: 3px;
+ transition: all 200ms $ease-out-quad;
+
+ @include entry(normal);
+
+ image { // icons inside the entry
+ &.left { margin-right: 6px; }
+ &.right { margin-left: 6px; }
+ }
+
+ undershoot {
+ &.left { @include undershoot(left); }
+ &.right { @include undershoot(right); }
+ }
+
+ &.flat {
+ &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ min-height: 0;
+ padding: 2px;
+ background-color: transparent;
+ border-color: transparent;
+ border-radius: 0;
+ }
+ }
+
+ &:focus-within { @include entry(focus); }
+
+ &:disabled { @include entry(insensitive); }
+
+ &:backdrop {
+ @include entry(backdrop);
+
+ transition: $backdrop_transition;
+ }
+
+ &:backdrop:disabled { @include entry(backdrop-insensitive); }
+
+ // entry error and warning style
+ @each $e_type, $e_color in (error, $error_color),
+ (warning, $warning_color) {
+ &.#{$e_type} {
+ background-color: transparentize($e_color, 0.9);
+ color: $e_color;
+ text-shadow: none;
+ border-color: entry_focus-within_border($e_color);
+
+ &:focus-within { @include entry(focus, $e_color); }
+
+ selection { background-color: $e_color; }
+ }
+ }
+
+ image { // entry icons colors
+ color: mix($fg_color, $base_color, 80%);
+
+ &:hover { color: $fg_color; }
+
+ &:active { color: $selected_bg_color; }
+
+ &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
+ }
+
+ &:drop(active) {
+ &:focus-within, & {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ .osd & {
+ @include entry(osd);
+
+ &:focus-within { @include entry(osd-focus-within); }
+
+ &:backdrop { @include entry(osd-backdrop); }
+
+ &:disabled { @include entry(osd-insensitive); }
+ }
+ }
+
+ progress {
+ margin: 2px -6px;
+ background-color: transparent;
+ background-image: none;
+ border-radius: 0;
+ border-width: 0 0 2px;
+ border-color: $selected_bg_color;
+ border-style: solid;
+ box-shadow: none;
+
+ &:backdrop { background-color: transparent; }
+ }
+
+ // linked entries
+ .linked:not(.vertical) > & { @extend %linked; }
+ .linked:not(.vertical) > &:focus-within + &,
+ .linked:not(.vertical) > &:focus-within + button,
+ .linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus-within_border(); }
+
+ .linked:not(.vertical) > &:focus-within.error + &,
+ .linked:not(.vertical) > &:focus-within.error + button,
+ .linked:not(.vertical) > &:focus-within.error + combobox > box > button.combo { border-left-color: entry_focus-within_border($error_color); }
+
+ .linked:not(.vertical) > &:drop(active) + &,
+ .linked:not(.vertical) > &:drop(active) + button,
+ .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+
+ // Vertically linked entries
+ // FIXME: take care of "colored" entries
+ .linked.vertical > & {
+ @extend %linked_vertical;
+
+ // brighter border between linked entries
+ &:not(:disabled) + entry:not(:disabled),
+ &:not(:disabled) + %entry:not(:disabled) {
+ border-top-color: mix($borders_color, $base_color, 30%);
+ background-color: $base_color;
+
+ &:backdrop {
+ border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+ background-color: $backdrop_base_color;
+ }
+ }
+
+ // brighter border between linked insensitive entries
+ &:disabled + %entry:disabled,
+ &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
+
+ // color back the top border of a linked focus-withined entry following another entry and add back the focus-within shadow.
+ // :not(:only-child) is a specificity bump hack.
+ + %entry:focus-within:not(:only-child),
+ + entry:focus-within:not(:only-child) { border-top-color: entry_focus-within_border(); }
+
+ + %entry:focus-within.error:not(:only-child),
+ + entry:focus-within.error:not(:only-child) { border-top-color: entry_focus-within_border($error_color); }
+
+ + %entry:drop(active):not(:only-child),
+ + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+
+ // this takes care of coloring the top border of the focus-withined entry subsequent widget.
+ // :not(:only-child) is a specificity bump hack.
+ &:focus-within:not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: entry_focus-within_border(); }
+ }
+
+ &:focus-within.error:not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: entry_focus-within_border($error_color); }
+ }
+
+ &:drop(active):not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: $drop_target_color; }
+ }
+ }
+}
+
+treeview entry {
+ &:focus-within {
+ &:dir(rtl), &:dir(ltr) { // specificity bump hack
+ background-color: $base_color;
+ transition-property: color, background;
+ }
+ }
+
+ &.flat, & {
+ border-radius: 0;
+ background-image: none;
+ background-color: $base_color;
+
+ &:focus-within { border-color: $selected_bg_color; }
+ }
+}
+
+/*******************
+ * Editable Labels *
+ *******************/
+ editablelabel > stack > text {
+ @include entry(normal);
+}
+
+/***********
+ * Buttons *
+ ***********/
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+ lighten($selected_bg_color,15%));
+@keyframes needs_attention {
+ from {
+ background-image: -gtk-gradient(radial,
+ center center, 0,
+ center center, 0.01,
+ to($_dot_color),
+ to(transparent));
+ }
+
+ to {
+ background-image: -gtk-gradient(radial,
+ center center, 0,
+ center center, 0.5,
+ to($selected_bg_color),
+ to(transparent));
+ }
+}
+
+%button,
+button {
+ @at-root %button_basic, & {
+
+ min-height: 24px;
+ min-width: 22px;
+ padding: 1px 2px;
+ border: 1px solid;
+ border-radius: 3px;
+ transition: $button_transition;
+
+ @include button(normal);
+
+ &.flat {
+ @include button(undecorated);
+ // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
+ // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+ // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+ // in this case the duration is increased.
+ transition: none;
+
+ &:hover {
+ transition: $button_transition;
+ transition-duration: 500ms;
+
+ &:active { transition: $button_transition; }
+ }
+ }
+
+ &:hover {
+ @include button(hover);
+ -gtk-icon-effect: highlight;
+ }
+
+ &:active,
+ &:checked {
+ @include button(active);
+
+ transition-duration: 50ms;
+ }
+
+ &:backdrop {
+ &.flat, & {
+ @include button(backdrop);
+
+ transition: $backdrop_transition;
+ -gtk-icon-effect: none;
+
+ &:active,
+ &:checked { @include button(backdrop-active); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active); }
+ }
+ }
+ }
+
+ &:disabled {
+ @include button(insensitive);
+ -gtk-icon-filter: opacity(0.5);
+
+ &:active,
+ &:checked { @include button(insensitive-active); }
+ }
+
+ @at-root %button_basic_flat,
+ &.flat {
+ @include button(undecorated);
+ // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
+ // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+ // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+ // in this case the duration is increased.
+ transition: none;
+
+ &:hover {
+ @include button(undecorated-hover);
+ transition: $button_transition;
+ transition-duration: 500ms;
+ }
+ &.keyboard-activating,
+ &:active,
+ &:checked {
+ @include button(undecorated-active);
+ transition: $button_transition;
+ }
+ &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
+ }
+
+ &.image-button {
+ min-height: 20px;
+ min-width: 20px;
+ padding: 2px;
+ }
+
+ &.text-button {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ &.text-button.image-button {
+ padding-left: 4px;
+ padding-right: 4px;
+
+ label {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ }
+
+ &:drop(active) {
+ color: $drop_target_color;
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ @at-root %button_selected, & {
+ row:selected & {
+ @if $variant == 'light' { border-color: $selected_borders_color; }
+
+ &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
+ color: $selected_fg_color;
+ border-color: transparent;
+
+ &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
+ }
+ }
+ }
+ }
+
+
+ // big standalone buttons like in Documents pager
+ &.osd {
+ min-width: 24px;
+ min-height: 32px;
+
+ &.image-button { min-width: 32px; }
+
+ color: $osd_fg_color;
+ border-radius: 5px;
+ outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
+
+ @include button(osd);
+
+ border: none;
+ box-shadow: none;
+
+ &:hover {
+ @include button(osd-hover);
+
+ border: none;
+ box-shadow: none;
+ }
+
+ &:active,
+ &:checked {
+ @include button(osd-active);
+
+ border: none;
+ box-shadow: none;
+ }
+
+ &:disabled {
+ &:backdrop, & {
+ @include button(osd-insensitive);
+
+ border: none;
+ }
+ }
+
+ &:backdrop {
+ @include button(osd-backdrop);
+
+ border: none;
+ }
+ }
+
+ //overlay / OSD style
+ @at-root %osd_button,
+ .osd & {
+ @include button(osd);
+
+ &:hover { @include button(osd-hover); }
+
+ &:active,
+ &:checked { &:backdrop, & { @include button(osd-active); }}
+
+ &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
+
+ &:backdrop { @include button(osd-backdrop); }
+
+ &.flat {
+ @include button(undecorated);
+
+ box-shadow: none; //FIXME respect no edge on the button mixin
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:hover { @include button(osd-hover); }
+
+ &:disabled {
+ @include button(osd-insensitive);
+ background-image: none;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:backdrop { @include button(undecorated); }
+
+ &:active,
+ &:checked { @include button(osd-active); }
+ }
+ }
+
+ // Suggested and Destructive Action buttons
+ @each $b_type, $b_color in (suggested-action, $selected_bg_color),
+ (destructive-action, $destructive_color) {
+ &.#{$b_type} {
+ @include button(normal, $b_color, white);
+
+ &.flat {
+ @include button(undecorated);
+
+ color: $b_color; //FIXME: does it work on the dark variant?
+ }
+
+ &:hover { @include button(hover, $b_color, white); }
+
+ &:active,
+ &:checked { @include button(active, $b_color, white); }
+
+ &:backdrop,
+ &.flat:backdrop {
+ @include button(backdrop, $b_color, white);
+
+ &:active,
+ &:checked { @include button(backdrop-active, $b_color, white); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
+ }
+ }
+
+ &.flat {
+ &:backdrop, &:disabled, &:backdrop:disabled {
+ @include button(undecorated);
+
+ color: transparentize($b_color, 0.2);
+ }
+ }
+
+ &:disabled {
+ @include button(insensitive, $b_color, white);
+
+ &:active,
+ &:checked { @include button(insensitive-active, $b_color, white); }
+ }
+
+ .osd & {
+ @include button(osd, $b_color);
+
+ &:hover { @include button(osd-hover, $b_color); }
+
+ &:active,
+ &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
+
+ &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
+
+ &:backdrop { @include button(osd-backdrop, $b_color); }
+ }
+ }
+ }
+
+ .stack-switcher > & {
+ // to position the needs attention dot, padding is added to the button
+ // child, a label needs just lateral padding while an icon needs vertical
+ // padding added too.
+
+ outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
+
+ > label {
+ padding-left: 6px; // label padding
+ padding-right: 6px; //
+ }
+
+ > image {
+ padding-left: 6px; // image padding
+ padding-right: 6px; //
+ padding-top: 3px; //
+ padding-bottom: 3px; //
+ }
+
+ &.text-button {
+ // compensate text-button paddings
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ &.image-button {
+ // we want image buttons to have a 1:1 aspect ratio, so compensation
+ // of the padding added to the GtkImage is needed
+ padding-left: 2px;
+ padding-right: 2px;
+ }
+
+ &.needs-attention {
+ > label,
+ > image { @extend %needs_attention; }
+
+ &:active,
+ &:checked {
+ > label,
+ > image {
+ animation: none;
+ background-image: none;
+ }
+ }
+ }
+ }
+
+ //inline-toolbar buttons
+ .inline-toolbar &, .inline-toolbar &:backdrop {
+ border-radius: 2px;
+ border-width: 1px;
+ @extend %linked;
+ button {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ }
+
+ .primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
+
+ .linked:not(.vertical) > & { @extend %linked; }
+
+ .linked.vertical > & { @extend %linked_vertical; }
+
+ &.circular { // The Bloody Circul Button
+ border-radius: 9999px;
+ -gtk-outline-radius: 9999px;
+
+ label { padding: 0; }
+ }
+}
+
+%needs_attention {
+ // the dot is drawn by using two radial gradient, the first one is the actuall dot, the other
+ // simulates the shadow labels and icons normally have in buttons.
+ animation: needs_attention 150ms ease-in;
+ $_dot_shadow: _text_shadow_color(); // shadow color
+
+ background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
+ radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+
+ @if $variant == 'light' { background-position: right 3px, right 4px; }
+
+ @else { background-position: right 3px, right 2px; }
+
+ &:backdrop { background-size: 6px 6px, 0 0;}
+
+ &:dir(rtl) {
+ @if $variant == 'light' { background-position: left 3px, left 4px; }
+
+ @else { background-position: left 3px, left 2px; }
+ }
+}
+
+
+// all the following is for the +|- buttons on inline toolbars, that way
+// should really be deprecated...
+.inline-toolbar toolbutton > button { // redefining the button look is
+ // needed since those are flat...
+ @include button(normal);
+
+ &:hover { @include button(hover); }
+
+ &:active,
+ &:checked{ @include button(active); }
+
+ &:disabled {
+ @include button(insensitive);
+
+ &:active,
+ &:checked { @include button(insensitive-active); }
+ }
+
+ &:backdrop {
+ @include button(backdrop);
+
+ &:active,
+ &:checked { @include button(backdrop-active); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active); }
+ }
+ }
+}
+
+// More inline toolbar buttons
+toolbar.inline-toolbar toolbutton {
+ > button.flat { @extend %linked_middle; }
+
+ &:first-child > button.flat { @extend %linked_left; }
+
+ &:last-child > button.flat { @extend %linked_right; }
+
+ &:only-child > button.flat { @extend %linked_only_child; }
+}
+
+%linked_middle {
+ border-right-style: none;
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+}
+
+%linked_left {
+ border-top-left-radius: $button_radius;
+ border-bottom-left-radius: $button_radius;
+ -gtk-outline-top-left-radius: $button_radius;
+ -gtk-outline-bottom-left-radius: $button_radius;
+}
+
+%linked_right {
+ border-right-style: solid;
+ border-top-right-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
+ -gtk-outline-top-right-radius: $button_radius;
+ -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_only_child {
+ border-style: solid;
+ border-radius: $button_radius;
+ -gtk-outline-radius: $button_radius;
+}
+
+// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
+%linked {
+ @extend %linked_middle;
+
+ &:first-child { @extend %linked_left; }
+ &:last-child { @extend %linked_right; }
+
+ &:only-child { @extend %linked_only_child; }
+}
+
+// Other widgets use widget child order, so 1st/last child are at text start/end
+%linked_flippable {
+ @extend %linked_middle;
+
+ &:dir(ltr) {
+ &:first-child { @extend %linked_left; }
+ &:last-child { @extend %linked_right; }
+ }
+
+ &:dir(rtl) {
+ &:first-child { @extend %linked_right; }
+ &:last-child { @extend %linked_left; }
+ }
+
+ &:only-child { @extend %linked_only_child; }
+}
+
+%linked_vertical_middle {
+ border-style: solid solid none solid;
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+}
+
+%linked_vertical_top {
+ border-top-left-radius: $button_radius;
+ border-top-right-radius: $button_radius;
+ -gtk-outline-top-left-radius: $button_radius;
+ -gtk-outline-top-right-radius: $button_radius;
+}
+
+%linked_vertical_bottom {
+ border-bottom-style: solid;
+ border-bottom-left-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
+ -gtk-outline-bottom-left-radius: $button_radius;
+ -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_vertical_only_child {
+ border-style: solid;
+ border-radius: $button_radius;
+ -gtk-outline-radius: $button_radius;
+}
+
+%linked_vertical {
+ @extend %linked_vertical_middle;
+
+ &:first-child { @extend %linked_vertical_top; }
+
+ &:last-child { @extend %linked_vertical_bottom; }
+
+ &:only-child { @extend %linked_vertical_only_child; }
+}
+
+%undecorated_button {
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ box-shadow: inset 0 1px transparentize(white, 1),
+ 0 1px transparentize(white, 1);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+}
+
+/* menu buttons */
+modelbutton.flat,
+.menuitem.button.flat {
+ min-height: 26px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 3px;
+ outline-offset: -2px;
+
+ @extend %undecorated_button;
+
+ &:hover { background-color: $popover_hover_color; }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &:selected { @extend %selected_items; }
+
+ &:backdrop,
+ &:backdrop:hover { @extend %undecorated_button; }
+}
+
+modelbutton.flat arrow {
+ background: none;
+
+ &:hover { background: none; }
+
+ &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+
+ &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+}
+
+button.color {
+ padding: 4px;
+
+ colorswatch:only-child {
+ &, overlay { border-radius: 0; }
+
+ @if $variant == 'light' {
+ box-shadow: 0 1px _text_shadow_color();
+
+ &:disabled,
+ &:backdrop,
+ &:active,
+ &:checked { colorswatch:only-child { box-shadow: none; }}
+ }
+ }
+}
+
+
+/*********
+ * Links *
+ *********/
+
+%link,
+link {
+ color: $link_color;
+ text-decoration: underline;
+
+ &:visited {
+ color: $link_visited_color;
+
+ *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
+ }
+
+ &:hover {
+ color: lighten($link_color,10%);
+
+ *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
+ }
+
+ &:active {
+ color: $link_color;
+
+ *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+ }
+
+ &:disabled, &:disabled:backdrop { color: transparentize(desaturate($link_color,100%), 0.2); }
+
+ &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }}
+
+ @at-root %link_selected,
+ &:selected,
+ *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+}
+
+button.link,
+button:visited {
+ @extend %undecorated_button;
+
+ @extend %link;
+
+ text-shadow: none;
+
+ &:hover,
+ &:active,
+ &:checked {
+ @extend %undecorated_button;
+
+ text-shadow: none;
+ }
+
+ > label {
+ @extend %link;
+
+ text-decoration: underline;
+ }
+}
+
+
+/*****************
+ * GtkSpinButton *
+ *****************/
+spinbutton {
+ &:not(.vertical) {
+ // in this horizontal configuration, the whole spinbutton
+ // behaves as the entry, so we extend the entry styling
+ // and nuke the style on the internal entry
+ @extend %entry;
+
+ padding: 0;
+
+ entry {
+ min-width: 28px;
+ // reset all the other props since the spinbutton node is styled here
+ margin: 0;
+ background: none;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ }
+
+ button {
+ min-height: 16px;
+ margin: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+ color: mix($fg_color, $base_color, 90%);
+ background-image: none;
+ border-style: none none none solid;
+ border-color: transparentize($borders_color, 0.7);
+ border-radius: 0;
+ box-shadow: none;
+
+ &:dir(rtl) { border-style: none solid none none; }
+
+ &:hover {
+ color: $fg_color;
+ background-color: $base_hover_color;
+ }
+
+ &:disabled {
+ color: transparentize($insensitive_fg_color, 0.7);
+ background-color: transparent;
+ }
+
+ &:active {
+ background-color: transparentize(black, 0.9);
+ box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
+ background-color: transparent;
+ border-color: transparentize($backdrop_borders_color, 0.7);
+ transition: $backdrop_transition;
+ }
+
+ &:backdrop:disabled {
+ color: transparentize($backdrop_insensitive_color,0.7);
+ background-color: transparent;
+ border-style: none none none solid; // It is needed or it gets overridden
+
+ &:dir(rtl) { border-style: none solid none none; }
+ }
+ }
+ }
+
+ // OSD horizontal
+ .osd &:not(.vertical) {
+ button {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-style: none none none solid;
+ border-color: transparentize($osd_borders_color, 0.3);
+ border-radius: 0;
+ box-shadow: none;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:dir(rtl) { border-style: none solid none none; }
+
+ &:hover {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ background-color: transparentize($osd_fg_color, 0.9);
+ -gtk-icon-shadow: 0 1px black;
+ box-shadow: none;
+ }
+
+ &:backdrop {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ -gtk-icon-shadow: none;
+ box-shadow: none;
+ }
+
+ &:disabled {
+ @include button(undecorated);
+
+ color: $osd_insensitive_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ -gtk-icon-shadow: none;
+ box-shadow: none;
+ }
+
+ &:dir(ltr):last-child { border-radius: 0 3px 3px 0; }
+
+ &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
+ }
+ }
+
+ // Vertical
+ &.vertical {
+ // in the vertical configuration, we treat the spinbutton
+ // as a box, and tweak the style of the entry in the middle
+ // so that it's linked
+
+ // FIXME: this should not be set at all, but otherwise it gets the wrong
+ // color
+ &:disabled { color: $insensitive_fg_color; }
+
+ &:backdrop:disabled { color: $backdrop_insensitive_color; }
+
+ &:drop(active) {
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ entry {
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+ border-radius: 0;
+ }
+
+ button {
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+
+ &.up { @extend %top_button; }
+
+ &.down { @extend %bottom_button; }
+ }
+
+ %top_button {
+ border-radius: 3px 3px 0 0;
+ border-style: solid solid none solid;
+ }
+
+ %bottom_button {
+ border-radius: 0 0 3px 3px;
+ border-style: none solid solid solid;
+ }
+ }
+
+ // OSD vertical
+ .osd &.vertical button:first-child {
+ @include button(osd);
+
+ &:hover { @include button(osd-hover);}
+
+ &:active { @include button(osd-active); }
+
+ &:disabled { @include button(osd-insensitive); }
+
+ &:backdrop { @include button(osd-backdrop); }
+ }
+
+ // Misc
+ treeview &:not(.vertical) {
+ min-height: 0;
+ border-style: none;
+ border-radius: 0;
+
+ entry {
+ min-height: 0;
+ padding: 1px 2px;
+ }
+ }
+}
+
+
+/**************
+ * ComboBoxes *
+ **************/
+dropdown > popover.menu.background > contents { padding: 0; } //allow search entries with no margin
+
+dropdown > button > box {
+ border-spacing: 6px;
+
+ > stack > row.activatable:hover {
+ background: none;
+ box-shadow: none;
+ }
+}
+
+dropdown,
+combobox {
+ arrow {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ min-height: 16px;
+ min-width: 16px;
+ }
+
+ // align menu labels with the button label
+ > popover.menu > contents modelbutton {
+ padding-left: 9px;
+ padding-right: 9px;
+ }
+
+ &.linked {
+ button:nth-child(2) {
+ &:dir(ltr) { @extend %linked:last-child; }
+ &:dir(rtl) { @extend %linked:first-child; }
+ }
+ }
+
+ &:drop(active) { // FIXME: untested
+ box-shadow: none;
+
+ button.combo { @extend %button_basic:drop(active); }
+ }
+}
+
+.linked > combobox > box > button.combo {
+ // the combo is a composite widget so the way we do button linking doesn't
+ // work, special case needed. See
+ // https://bugzilla.gnome.org/show_bug.cgi?id=733979
+
+ &:dir(ltr),
+ &:dir(rtl) { @extend %linked_middle; } // specificity bump
+}
+
+.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
+.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
+.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
+
+.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
+.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
+.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
+.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
+
+
+/************
+ * Toolbars *
+ ************/
+%toolbar {
+ -GtkWidget-window-dragging: true;
+ padding: 4px;
+ background-color: $bg_color;
+}
+
+toolbar {
+ @extend %toolbar;
+ @include headerbar_fill;
+
+ box-shadow: none;
+ border-bottom:1px solid $borders_color;
+ padding: 4px 3px 3px 4px;
+
+ // on OSD
+ .osd & { background-color: transparent; }
+
+ // stand-alone OSD toolbars
+ &.osd {
+ padding: 13px;
+ border: none;
+ border-radius: 5px;
+ background-color: $osd_bg_color;
+
+ &.left,
+ &.right,
+ &.top,
+ &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
+ }
+
+ // toolbar separators
+ &.horizontal separator { margin: 0 7px 1px 6px; }
+ &.vertical separator { margin: 6px 1px 7px 0; }
+
+ &:not(.inline-toolbar):not(.osd) {
+ switch,
+ scale,
+ entry,
+ spinbutton,
+ button {
+ margin-right: 1px;
+ margin-bottom: 1px;
+ }
+ }
+}
+
+//searchbar, location-bar & inline-toolbar
+.inline-toolbar {
+ @extend %toolbar;
+
+ @extend %darkbar;
+
+ padding: 3px;
+ border-width: 0 1px 1px;
+ border-radius: 0 0 5px 5px;
+}
+
+searchbar,
+.location-bar {
+ @extend %toolbar;
+
+ @extend %darkbar;
+
+ border-width: 0 0 1px;
+ padding: 3px;
+}
+
+%darkbar {
+ border-style: solid;
+ border-color: $borders_color;
+ $_bg: mix($bg_color, $borders_color, 70%);
+ background-color: $_bg;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ box-shadow: none;
+ transition: $backdrop_transition;
+ }
+}
+
+/*****************
+ * Title buttons *
+ *****************/
+
+windowcontrols {
+ border-spacing: 2px;
+
+ &:not(.empty) {
+ &.start:dir(ltr),
+ &.end:dir(rtl) {
+ margin-right: 7px;
+ }
+
+ &.start:dir(rtl),
+ &.end:dir(ltr) {
+ margin-left: 7px;
+ }
+ }
+
+ button {
+ @extend %button_basic;
+
+ @extend %button_basic_flat;
+
+
+ border-radius: 9999px;
+ padding: 3px;
+ margin: 0 2px;
+ min-width: 0;
+ min-height: 0;
+ &:hover {
+ //special case hover colors inside a headerbar
+ @include button(undecorated-hover,$c:darken($headerbar_color,6%));
+ }
+ &:active,
+ &:checked { @include button(undecorated-active,$c:darken($headerbar_color,10%)); }
+ }
+}
+
+
+/***************
+ * Header bars *
+ ***************/
+%titlebar,
+headerbar {
+ padding: 0 5px;
+ min-height: 32px;
+ border-width: 0 0 1px;
+ border-style: solid;
+ border-color: $borders_color;
+ border-radius: 0;
+
+ @include headerbar_fill;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $bg_color;
+ background-image: none;
+ box-shadow: inset 0 1px $top_hilight;
+
+ transition: $backdrop_transition;
+ }
+
+ .title {
+ padding-left: 12px;
+ padding-right: 12px;
+ font-weight: bold;
+ }
+
+ .subtitle {
+ font-size: smaller;
+ padding-left: 12px;
+ padding-right: 12px;
+
+ @extend .dim-label;
+ }
+
+ /* Darken switchbuttons for headerbars. issue #1588 */
+ stackswitcher > button:checked,
+ button.toggle:checked {
+
+ background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
+ border-color: darken($borders_color, 3%);
+ border-top-color: darken($borders_color, 8%);
+ &:backdrop {
+ @include button(backdrop-active);
+ }
+ }
+
+ &.selection-mode {
+ $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
+
+ color: $selected_fg_color;
+ text-shadow: none;
+ border-color: $selected_borders_color;
+
+ @include headerbar_fill($selected_bg_color, $_hc);
+
+ &:backdrop {
+ background-color: $selected_bg_color;
+ background-image: none;
+ box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
+ }
+
+ .subtitle:link { @extend *:link:selected; }
+
+ button {
+ @include button(normal, $selected_bg_color, $selected_fg_color);
+
+ &.flat { @include button(undecorated); }
+
+ &:hover { @include button(hover, $selected_bg_color, $selected_fg_color); }
+
+ &:active,
+ &:checked { @include button(active, $selected_bg_color, $selected_fg_color); }
+
+ &:backdrop {
+ &.flat, & {
+ @include button(backdrop, $selected_bg_color, $selected_fg_color);
+
+ -gtk-icon-effect: none;
+ border-color: $selected_borders_color;
+
+ &:active,
+ &:checked {
+ @include button(backdrop-active, $selected_bg_color, $selected_fg_color);
+
+ border-color: $selected_borders_color;
+ }
+
+ &:disabled {
+ @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);
+
+ border-color: $selected_borders_color;
+
+ &:active, &:checked {
+ @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);
+
+ border-color: $selected_borders_color;
+ }
+ }
+ }
+ }
+
+ &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
+
+ &:disabled {
+ @include button(insensitive, $selected_bg_color, $selected_fg_color);
+
+ &:active,
+ &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); }
+ }
+
+ &.suggested-action {
+ @include button(normal);
+ color: $selected_fg_color;
+
+ border-color: $selected_borders_color;
+
+ &:hover {
+ @include button(hover);
+
+ border-color: $selected_borders_color;
+ }
+
+ &:active {
+ @include button(active);
+
+ border-color: $selected_borders_color;
+ }
+
+ &:disabled {
+ @include button(insensitive);
+ background-image: none;
+ background: $bg_color;
+
+ border-color: $selected_borders_color;
+ }
+
+ &:backdrop {
+ @include button(backdrop);
+
+ border-color: $selected_borders_color;
+ }
+
+ &:backdrop:disabled {
+ @include button(backdrop-insensitive);
+
+ border-color: $selected_borders_color;
+ }
+ }
+ }
+
+ .selection-menu {
+ &:backdrop, & {
+ border-color: transparentize($selected_bg_color, 1);
+ background-color: transparentize($selected_bg_color, 1);
+ background-image: none;
+ box-shadow: none;
+ padding-left: 10px;
+ padding-right: 10px;
+
+ .arrow {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ color: transparentize($selected_fg_color,0.5);
+ -gtk-icon-shadow: none;
+ }
+ }
+ }
+ }
+
+ // squared corners when the window is maximized, tiled, or fullscreen
+ .tiled &,
+ .tiled-top &,
+ .tiled-right &,
+ .tiled-bottom &,
+ .tiled-left &,
+ .maximized &,
+ .fullscreen & {
+ &:backdrop, & {
+ border-radius: 0;
+ }
+ }
+
+ &.default-decoration {
+ min-height: 24px;
+ padding: 4px;
+
+ windowcontrols {
+ button,
+ menubutton {
+ min-height: 22px;
+ min-width: 22px;
+ margin: 0;
+ padding: 0;
+ }
+
+ menubutton button {
+ min-height: 20px;
+ min-width: 20px;
+ margin: 0;
+ padding: 4px;
+ }
+ }
+ }
+
+ .solid-csd & {
+ &:backdrop, & {
+ &:dir(rtl), &:dir(ltr) { // specificity bump
+ margin-left: -1px;
+ margin-right: -1px;
+ margin-top: -1px;
+ border-radius: 0;
+ box-shadow: none;
+ }
+ }
+ }
+}
+
+headerbar {
+ > windowhandle > box {
+ &,
+ > box.start,
+ > box.end {
+ border-spacing: 3px;
+ }
+ }
+
+ // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
+ entry,
+ separator {
+ margin-top: 3px;
+ margin-bottom: 3px;
+ }
+ spinbutton,
+ button {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ button label {
+ min-width: 28px;
+ min-height: 22px;
+ }
+ button.titlebutton image {
+ min-width: 22px;
+ min-height: 22px;
+ }
+ button:not(.image-button):not(.titlebutton) image {
+ min-width: 22px;
+ min-height: 22px;
+ }
+ button.image-button {
+ min-width: 22px;
+ min-height: 22px;
+ padding-left: 2px;
+ padding-right: 2px;
+ }
+ .stack-switcher button {
+ min-width: 26px;
+ min-height: 26px;
+ &:not(.text-button) {
+ min-height: 22px;
+ min-width: 22px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ }
+ buttonbox {
+ padding: 0px;
+ button {
+ min-width: 26px;
+ min-height: 26px;
+ &:not(.text-button) {
+ min-width: 22px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ }
+ }
+ switch {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+}
+
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar,
+.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar,
+.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar,
+.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar,
+.background:not(.tiled-bottom):not(.maximized):not(.solid-csd) .titlebar {
+ &:backdrop, & {
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ }
+}
+
+headerbar { // headerbar border rounding
+ window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
+ window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { &:backdrop, & { border-top-left-radius: 7px; }}
+ window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { &:backdrop, & { border-top-right-radius: 7px; }}
+ window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
+ &:first-child, &:last-child {
+ &:backdrop, & {
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ }
+ }
+ }
+
+ window.tiled &,
+ window.tiled-top &,
+ window.tiled-right &,
+ window.tiled-bottom &,
+ window.tiled-left &,
+ window.maximized &,
+ window.fullscreen &,
+ window.solid-csd & {
+ &, &:backdrop {
+ &,
+ &:first-child,
+ &:last-child,
+ &:only-child {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+}
+
+.titlebar:not(headerbar) {
+ window.csd > & {
+ // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
+ padding: 0;
+ background-color: transparent;
+ background-image: none;
+ border-style: none;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ > separator { background-color: $borders_color; }
+
+ @extend %titlebar;
+}
+
+// Development versions of apps to use a differently styled headerbar
+
+window.devel {
+ headerbar.titlebar {
+ $c: darken($bg_color, 10%);
+ $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
+ linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
+ @if $variant == 'dark' {
+ $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+ linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+ }
+
+ background: $bg_color $gradient;
+
+ &:backdrop {
+ background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ image($bg_color); /* background-color would flash */
+ }
+ }
+}
+
+// Fixes: https://github.com/shimmerproject/Greybird/issues/157
+// workaround for ugly Ubuntu-related CSD patches
+.background:not(.csd):not(.ssd):not(.solid-csd) headerbar {
+ &, &:backdrop {
+ &, &:not(:last-child) {
+ border-radius: 0;
+ border-top-color: transparent;
+ box-shadow: none;
+ }
+ }
+}
+
+/************
+ * Pathbars *
+ ************/
+
+.pathbar > button {
+ &.text-button, &.image-button, & {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+
+ &.text-button.image-button label {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ &.text-button.image-button, & {
+ label:last-child { padding-right: 8px; }
+ label:first-child { padding-left: 8px; }
+ }
+
+ image {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+
+ &.slider-button {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+/**************
+ * Tree Views *
+ **************/
+
+$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
+$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
+columnview.view,
+treeview.view {
+ @at-root * {
+ -GtkTreeView-horizontal-separator: 4;
+ -GtkTreeView-grid-line-width: 1;
+ -GtkTreeView-grid-line-pattern: '';
+ -GtkTreeView-tree-line-width: 1;
+ -GtkTreeView-tree-line-pattern: '';
+ -GtkTreeView-expander-size: 16;
+ }
+
+ border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
+ border-top-color: $bg_color; // while this is the grid lines color, better then nothing
+
+ rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
+
+ &:selected {
+ &:focus-within, & {
+ border-radius: 0;
+ }
+
+ &:backdrop, & {
+ border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+ border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+ }
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ &:selected {
+ color: mix($selected_fg_color, $selected_bg_color, 40%);
+ &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+ }
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &.separator {
+ min-height: 2px;
+ color: $bg_color;
+
+ &:backdrop { color: transparentize($bg_color, 0.9); }
+ }
+
+ &:backdrop {
+ border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+ border-top: $backdrop_bg_color;
+ }
+ &:drop(active) {
+ border-style: solid none;
+ border-width: 1px;
+ border-color: $selected_borders_color;
+
+ &.after { border-top-style: none; }
+
+ &.before { border-bottom-style: none; }
+ }
+
+ &.expander {
+ // GtkTreeView uses the larger of the expander’s min-width and min-height
+ min-width: 16px;
+ min-height: 16px;
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+ &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+ color: mix($fg_color, $base_color, 70%);
+
+ &:hover { color: $fg_color; }
+
+ &:selected {
+ color: mix($selected_fg_color, $selected_bg_color, 70%);
+
+ &:hover { color: $selected_fg_color; }
+
+ &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
+ }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+ &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
+ }
+
+ &.progressbar { // progress bar in treeviews
+ @if $variant == light { color: $base_color; }
+
+ border: 1px solid $selected_borders_color;
+ border-radius: 4px;
+ background-color: $selected_bg_color;
+ background-image: linear-gradient(to bottom,
+ $selected_bg_color,
+ darken($selected_bg_color, 10%));
+ box-shadow: inset 0 1px if($variant=='light', transparentize(white, 0.7),
+ transparentize(white, 0.85)),
+ 0 1px if($variant=='light', transparentize(black, 0.8),
+ transparentize(black, 0.9));
+
+ &:selected {
+ &:focus-within, & {
+ border-radius: 4px;
+
+ @if $variant == 'light' {
+ color: $selected_bg_color;
+ box-shadow: none;
+ }
+
+ @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
+
+ background-image: linear-gradient(to bottom,
+ $base_color,
+ darken($base_color, 10%));
+
+ &:backdrop {
+ @if $variant == 'light' {
+ color: $selected_bg_color;
+ border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
+ }
+
+ @else { border-color: $backdrop_base_color; }
+
+ background-color: $backdrop_base_color;
+ }
+ }
+ }
+
+ &:backdrop {
+ @if $variant == 'light' { color: $backdrop_base_color; }
+
+ @else { border-color: $backdrop_base_color; }
+
+ background-image: none;
+ box-shadow: none;
+ }
+ }
+
+ &.trough { // progress bar trough in treeviews
+ background-color: transparentize($fg_color,0.9);
+ border-radius: 4px;
+
+ &:selected {
+ &:focus-within, & {
+ background-color: if($variant == 'light',
+ transparentize($selected_fg_color, 0.7),
+ darken($selected_bg_color, 10%));
+ border-radius: 4px;
+
+ @if $variant == 'light' {
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: $selected_bg_color;
+ }
+ }
+ }
+ }
+
+ > header {
+ > button {
+ $_column_header_color: mix($fg_color, $base_color, 50%);
+
+ @extend %column_header_button;
+
+ color: $_column_header_color;
+ background-color: $base_color;
+ font-weight: bold;
+ text-shadow: none;
+ box-shadow: none;
+
+ &:hover {
+ @extend %column_header_button;
+
+ color: mix($_column_header_color, $fg_color, 50%);
+ box-shadow: none;
+ transition: none; //I shouldn't need this
+ }
+
+ &:active {
+ @extend %column_header_button;
+
+ color: $fg_color;
+ transition: none; //I shouldn't need this
+ }
+ sort-indicator {
+ &.ascending {
+ -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+ }
+ &.descending {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ }
+
+ min-height: 16px;
+ min-width: 16px;
+ }
+ }
+
+ button:last-child { &:backdrop, & { border-right-style: none; }}
+ }
+
+ button.dnd,
+ header.button.dnd { // for treeview-like derive widgets
+ &:active, &:selected, &:hover, & {
+ padding: 0 6px;
+ color: $base_color;
+ background-image: none;
+ background-color: $selected_bg_color;
+ border-style: none;
+ border-radius: 0;
+ box-shadow: inset 0 0 0 1px $base_color;
+ text-shadow: none;
+ transition: none;
+ }
+ }
+
+ acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
+}
+
+%column_header_button {
+ padding: 0 6px;
+ background-image: none;
+ border-style: none solid solid none;
+ border-color: $bg_color;
+ border-radius: 0;
+ text-shadow: none;
+
+ &:disabled {
+ border-color: $bg_color;
+ background-image: none;
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+ border-color: $backdrop_bg_color;
+ border-style: none solid solid none;
+ background-image: none;
+ background-color: $backdrop_base_color;
+
+ &:disabled {
+ border-color: $backdrop_bg_color;
+ background-image: none;
+ }
+ }
+
+ &:last-child { &:backdrop, & { border-right-style: none; }}
+}
+
+
+/*********
+ * Menus *
+ *********/
+menubar,
+.menubar {
+ -GtkWidget-window-dragging: true;
+ padding: 0px;
+
+ &:backdrop { background-color: $backdrop_bg_color; }
+
+ > menuitem {
+ min-height: 16px;
+ padding: 3px 8px;
+ border: 1px solid transparent;
+
+ &:hover { //Seems like it :hover even with keyboard focus-within
+ background-image: linear-gradient(to bottom,
+ shade($selected_bg_color, 1.2),
+ shade($selected_bg_color, 1.0)
+ );
+ color: $selected_fg_color;
+ border-color: shade($selected_bg_color, 1.1);
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ box-shadow: none;
+ }
+ }
+}
+
+menu,
+.menu,
+.context-menu {
+ margin: 4px;
+ padding: 2px 0px;
+ background-color: $menu_color;
+ border: 1px solid $borders_color; // adds borders in a non composited env
+
+ .csd & { border: none; } // axes borders in a composited env
+
+ &:backdrop { background-color: $backdrop_menu_color; }
+
+ menuitem {
+ min-height: 16px;
+ min-width: 40px;
+ padding: 4px 6px;
+ text-shadow: none;
+
+ &:hover {
+ color: $selected_fg_color;
+ background-image: linear-gradient(to bottom, shade($selected_bg_color, 1.2), shade($selected_bg_color, 1.0));
+ box-shadow: inset 1px 1px shade($selected_bg_color, 0.8),
+ inset -1px -1px shade($selected_bg_color, 0.8);
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &:backdrop,
+ &:backdrop:hover {
+ color: $backdrop_fg_color;
+ background-color: transparent;
+ }
+
+ // submenu indicators
+ arrow {
+ min-height: 16px;
+ min-width: 16px;
+
+ &:dir(ltr) {
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+ margin-left: 10px;
+ }
+
+ &:dir(rtl) {
+ -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
+ margin-right: 10px;
+ }
+ }
+
+ // avoids labels color being overridden, see
+ // https://bugzilla.gnome.org/show_bug.cgi?id=767058
+ label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
+ }
+
+ // overflow arrows
+ > arrow {
+ @include button(undecorated);
+
+ min-height: 16px;
+ min-width: 16px;
+ padding: 4px;
+ background-color: $menu_color;
+ border-radius: 0;
+
+ &.top {
+ margin-top: -6px;
+ border-bottom: 1px solid mix($fg_color, $base_color, 10%);
+ -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+ }
+
+ &.bottom {
+ margin-bottom: -6px;
+ border-top: 1px solid mix($fg_color, $base_color, 10%);
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ }
+
+ &:hover { background-color: mix($fg_color, $base_color, 10%); }
+
+ &:backdrop { background-color: $backdrop_menu_color; }
+
+ &:disabled {
+ color: transparent;
+ background-color: transparent;
+ border-color: transparent ;
+ }
+ }
+}
+
+menuitem {
+ accelerator { color: gtkalpha(currentColor,0.55); }
+
+ check,
+ radio {
+ min-height: 16px;
+ min-width: 16px;
+
+ &:dir(ltr) { margin-right: 7px; }
+ &:dir(rtl) { margin-left: 7px; }
+ }
+}
+
+/***************
+ * Popovers *
+ ***************/
+
+popover.background {
+ padding: 2px;
+ border-radius: 5px;
+ background-color: $popover_bg_color;
+
+ modelbutton:hover { color: $selected_fg_color; }
+
+ .csd &, & { border: 1px solid $borders_color; }
+
+ box-shadow: 0 1px 2px transparentize(black, 0.7);
+
+ &:backdrop {
+ background-color: $backdrop_bg_color;
+ box-shadow: none;
+ }
+
+ > list,
+ > .view,
+ > toolbar {
+ border-style: none;
+ background-color: transparent;
+ }
+
+ .csd &, & {
+ &.touch-selection,
+ &.magnifier {
+ @extend %osd;
+
+ border: 1px solid transparentize(white, 0.9);
+
+ button { @extend %osd_button };
+ }
+
+ &.osd { @extend %osd; }
+ }
+
+ separator { margin: 3px; }
+
+ list separator { margin: 0px; }
+
+ checkbutton,
+ radiobutton { @extend modelbutton.flat; }
+}
+
+/*************
+ * Notebooks *
+ *************/
+notebook {
+ &.frame {
+ border-style: none;
+
+ > header { margin-left: 0; }
+
+ > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+ border: 1px solid shade($bg_color, 0.9);
+ }
+ }
+
+ > header {
+ padding: 1px;
+ background-color: $bg_color;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_bg_color;
+ }
+
+ tabs { margin: -1px; }
+
+ &.top {
+ > stack { border-top-style: none; }
+ > tabs > tab {
+ border-radius: 3px 3px 0 0;
+ border: 1px solid shade($bg_color, 0.9);
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { border-width: 1px 1px 0 1px; }
+ }
+ }
+
+ &.bottom {
+ > stack { border-bottom-style: none; }
+ > tabs > tab {
+ border-radius: 0 0 3px 3px;
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { border-width: 0 1px 1px 1px; }
+ }
+ }
+
+ &.left {
+ > stack { border-left-style: none; }
+ > tabs > tab {
+ border-radius: 3px 0 0 3px;
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { border-width: 1px 0 1px 1px; }
+ }
+ }
+
+ &.right {
+ > stack { border-right-style: none; }
+ > tabs > tab {
+ border-radius: 0 3px 3px 0;
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { border-width: 1px 1px 1px 0; }
+ }
+ }
+
+ &.top > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-top-style: none;
+ }
+
+ &.bottom > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-bottom-style: none;
+ }
+
+ @at-root %notebook_vert_arrows {
+ margin-left: -5px;
+ margin-right: -5px;
+ padding-left: 4px;
+ padding-right: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+ }
+
+ &.left > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-left-style: none;
+ }
+
+ &.right > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-right-style: none;
+ }
+
+ @at-root %notebook_horz_arrows {
+ margin-top: -5px;
+ margin-bottom: -5px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+
+ > tabs > arrow {
+ @extend %button_basic;
+
+ @extend %button_basic_flat;
+
+ min-height: 16px;
+ min-width: 16px;
+ border-radius: 0;
+
+ &:hover:not(:active):not(:backdrop) {
+ background-clip: padding-box;
+ background-image: none;
+ background-color: transparentize(white, 0.7);
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:disabled { @include button(undecorated); }
+ }
+
+ > tabs > tab {
+ min-height: 20px;
+ min-width: 24px;
+ padding: 3px 12px;
+
+ outline-offset: -5px;
+
+ color: $insensitive_fg_color;
+ background-color: $bg_color;
+
+ border-width: 1px; // for reorderable tabs
+ border-radius: 3px;
+ border-color: shade($bg_color, 0.9); //
+ border-style: solid;
+
+ &:hover {
+ color: mix($insensitive_fg_color, $fg_color, 50%);
+
+ &.reorderable-page {
+ border-color: transparentize($borders_color, 0.7);
+ background-color: transparentize($bg_color, 0.8);
+ }
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
+
+ &.reorderable-page {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+
+ &:checked {
+ color: $fg_color;
+ background-color: shade($bg_color, 1.05);
+ border-width: 1px 1px 0 1px;
+ &:backdrop {
+ background-color: $bg_color;
+ }
+ &.reorderable-page {
+ border-color: transparentize($borders_color, 0.5);
+ background-color: shade($bg_color, 1.05);
+ }
+ }
+
+ &:backdrop:checked {
+ color: $backdrop_fg_color;
+
+ &.reorderable-page {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_bg_color;
+ }
+ }
+
+ // colors the button like the label, overridden otherwise
+ button.flat {
+ &:hover { color: currentColor; }
+
+ &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+
+ padding: 0;
+ margin-top: 1px;
+ margin-bottom: 1px;
+ // FIXME: generalize .small-button?
+ min-width: 16px;
+ min-height: 16px;
+
+ &:last-child {
+ margin-left: 1px;
+ margin-right: -1px;
+ }
+
+ &:first-child {
+ margin-left: -1px;
+ margin-right: 1px;
+ }
+ }
+ }
+
+ &.top,
+ &.bottom {
+ tabs {
+ padding: 0;
+
+ &:not(:only-child) {
+ margin-left: 2px;
+ margin-right: 2px;
+ }
+ &:first-child { margin-left: -3px; }
+ &:last-child { margin-right: -3px; }
+
+ tab {
+ margin-left: 2px;
+ margin-right: 2px;
+ }
+ }
+ }
+
+ &.left,
+ &.right {
+ tabs {
+ padding: 0;
+
+ &:not(:only-child) {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ &:first-child { margin-top: -3px; }
+ &:last-child { margin-bottom: -3px; }
+
+ tab {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ }
+ }
+
+ &.top tab { padding-bottom: 4px; }
+ &.bottom tab { padding-top: 4px; }
+
+ &.top > tabs {
+ margin-bottom: -2px;
+ }
+
+ &.bottom > tabs {
+ margin-top: -2px;
+ }
+
+ &.left > tabs {
+ margin-right: -2px;
+ }
+
+ &.right > tabs {
+ margin-left: -2px;
+ }
+ }
+
+ // if the notebook property show_border is set to false, the frame directly inside the notebook
+ // doesn't exist, so we define the tab margins, the background and backdrop colors here:
+
+ > header {
+ margin-left: 6px;
+ }
+
+ > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+ background-color: shade($bg_color, 1.05);
+ border-width: 1px;
+ border-color: shade($bg_color, 0.9);
+ border-style: solid;
+ &:backdrop { background-color: $backdrop_bg_color; }
+ }
+}
+
+
+/**************
+ * Scrollbars *
+ **************/
+scrollbar {
+ $_slider_min_length: 40px;
+
+ // disable steppers
+ @at-root * {
+ -GtkScrollbar-has-backward-stepper: false;
+ -GtkScrollbar-has-forward-stepper: false;
+ }
+
+ &.vertical {
+ background-image: linear-gradient(to right,
+ lighten($bg_color, 10%),
+ lighten($bg_color, 30%)
+ );
+
+ slider {
+ background-image: linear-gradient(to right,
+ lighten($scrollbar_slider_color, 5%),
+ lighten($scrollbar_slider_color, 1%));
+
+ &:hover {
+ background-image: linear-gradient(to right,
+ darken($scrollbar_slider_color, 5%),
+ darken($scrollbar_slider_color, 1%));
+ }
+ }
+ }
+
+ &.horizontal {
+ background-image: linear-gradient(to bottom,
+ lighten($bg_color, 10%),
+ lighten($bg_color, 30%)
+ );
+
+ slider {
+ background-image: linear-gradient(to bottom,
+ lighten($scrollbar_slider_color, 5%),
+ lighten($scrollbar_slider_color, 1%));
+
+ &:hover {
+ background-image: linear-gradient(to bottom,
+ darken($scrollbar_slider_color, 5%),
+ darken($scrollbar_slider_color, 1%));
+ }
+ }
+ }
+
+ transition: 300ms $ease-out-quad;
+
+ // scrollbar border
+ &.top { border-bottom: 1px solid lighten($bg_color, 5%); }
+ &.bottom { border-top: 1px solid lighten($bg_color, 5%); }
+ &.left { border-right: 1px solid lighten($bg_color, 5%); }
+ &.right { border-left: 1px solid lighten($bg_color, 5%); }
+
+ &:backdrop {
+ background-color: $backdrop_scrollbar_bg_color;
+ border-color: lighten($bg_color, 5%);
+ transition: $backdrop_transition;
+ }
+
+ // slider
+ slider {
+ min-width: 7px;
+ min-height: 7px;
+ margin: 3px;
+ border: 1px solid darken($bg_color, 30%);
+ border-radius: 10px;
+ background-clip: padding-box;
+
+
+
+ &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+ &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+
+ &:disabled { background-color: transparent; }
+ }
+
+ &.fine-tune {
+ slider {
+ min-width: 4px;
+ min-height: 4px;
+ }
+
+ &.horizontal slider { border-width: 5px 4px; }
+ &.vertical slider { border-width: 4px 5px; }
+ }
+
+ &.overlay-indicator {
+ &:not(.dragging):not(.hovering) {
+ border-color: transparent;
+ opacity: 0.4;
+ background-color: transparent;
+
+ slider {
+ margin: 0;
+ min-width: 6px;
+ min-height: 6px;
+ background-color: shade($fg_color, 0.9);
+ background-image: none;
+ border: 1px solid if($variant == 'light', white, black);
+ }
+
+ button {
+ min-width: 5px;
+ min-height: 5px;
+ background-color: shade($fg_color, 0.9);
+ background-image: none;
+ background-clip: padding-box;
+ border-radius: 100%;
+ border: 1px solid if($variant == 'light', white, black);
+ -gtk-icon-source: none;
+ }
+
+ &.horizontal {
+ slider {
+ margin: 0 2px;
+ min-width: $_slider_min_length;
+ }
+
+ button {
+ margin: 1px 2px;
+ min-width: 5px;
+ }
+ }
+
+ &.vertical {
+ slider {
+ margin: 2px 0;
+ min-height: $_slider_min_length;
+ }
+
+ button {
+ margin: 2px 1px;
+ min-height: 5px;
+ }
+ }
+ }
+
+ &.dragging,
+ &.hovering { opacity: 0.8; }
+ }
+
+ &.horizontal slider { min-width: $_slider_min_length; }
+
+ &.vertical slider { min-height: $_slider_min_length; }
+
+ // button styling
+ button {
+ padding: 0;
+ min-width: 12px;
+ min-height: 12px;
+ border-style: none;
+ border-radius: 0;
+ transition-property: min-height, min-width, color;
+
+ @include button(undecorated);
+
+ color: $scrollbar_slider_color;
+
+ &:hover {
+ @include button(undecorated);
+
+ color: $scrollbar_slider_hover_color;
+ }
+ &:active, &:checked {
+ @include button(undecorated);
+
+ color: $scrollbar_slider_active_color;
+ }
+ &:disabled {
+ @include button(undecorated);
+
+ color: transparentize($scrollbar_slider_color, 0.8);
+ }
+ &:backdrop {
+ @include button(undecorated);
+
+ color: $backdrop_scrollbar_slider_color;
+
+ &:disabled {
+ @include button(undecorated);
+
+ color: transparentize($backdrop_scrollbar_slider_color, 0.8);
+ }
+ }
+ }
+
+ // button icons
+ &.vertical {
+ button {
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+ }
+ }
+
+ &.horizontal {
+ button {
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+ }
+ }
+}
+
+treeview ~ scrollbar.vertical {
+ border-top: 1px solid $borders_color;
+ margin-top: -1px;
+}
+
+/**********
+ * Switch *
+ **********/
+switch {
+ font-size: 0;
+ outline-offset: -4px;
+ box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
+ _widget_edge(transparent); // otherwise it gets
+ // clipped
+ // similar to the .scale
+ border: 1px solid gtkalpha(black, 0.25);
+ border-radius: 10px;
+ background-color: mix($bg_color, $borders_color, 60%);
+ text-shadow: 0 1px transparentize(black, 0.9);
+ min-height: 20px;
+ min-width: 20px;
+ transition: all 200ms ease-in;
+
+ &:checked {
+ box-shadow: inset 0 1px transparentize(black, 0.9),
+ _widget_edge(transparent);
+ border-color: shade($selected_borders_color, 1.1);
+ background-image: linear-gradient(to bottom,
+ shade($selected_bg_color, 1.1),
+ $selected_bg_color
+ );
+ text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
+ 0 0 2px transparentize(white, 0.4);
+ }
+
+ &:disabled {
+ border-color: $borders_color;
+ background-color: $insensitive_bg_color;
+ box-shadow: _widget_edge(transparent);
+ text-shadow: none;
+ }
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ box-shadow: none;
+ text-shadow: none;
+ transition: $backdrop_transition;
+
+ &:checked {
+ @if $variant == 'light' { color: $backdrop_bg_color; }
+ border-color: transparentize($selected_borders_color, 0.3);
+ background-color: transparentize($selected_bg_color, 0.3);
+ background-image: none;
+ box-shadow: none;
+ }
+ }
+
+ &:disabled {
+ border-color: $backdrop_borders_color;
+ background-image: none;
+ background-color: $insensitive_bg_color;
+ }
+
+ slider {
+ margin: -1px;
+ border: 1px solid gtkalpha(black, 0.2);
+ border-radius: 10px;
+ min-width: 20px;
+ min-height: 20px;
+ transition: $button_transition;
+
+ @include button(normal-alt, $edge: $shadow_color);
+ }
+
+ image { color: transparent; } /* only show i / o for the accessible theme */
+
+ &:hover slider { @include button(hover-alt, $edge: $shadow_color); }
+
+ &:checked slider { border: 1px solid gtkalpha($selected_borders_color, 0.8); }
+
+ &:disabled slider { @include button(insensitive); }
+
+ &:backdrop {
+ slider {
+ transition: $backdrop_transition;
+
+ @include button(backdrop);
+ }
+
+ &:checked slider { border-color: transparentize($selected_borders_color, 0.3); }
+
+ &:disabled slider { @include button(backdrop-insensitive); }
+ }
+
+ row:selected & {
+ @if $variant == 'light' {
+ box-shadow: none;
+ border-color: $selected_borders_color;
+
+ &:backdrop { border-color: $selected_borders_color; }
+
+ &.slider:dir(rtl) { border-left-color: $borders_color; }
+ &.slider:dir(ltr) { border-right-color: $borders_color; }
+
+ &.slider { &:checked, & { border-color: $selected_borders_color; } }
+ }
+ }
+}
+
+
+/*************************
+ * Check and Radio items *
+ *************************/
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
+
+
+//selection-mode
+@each $s,$as in ('','-selectionmode'),
+ (':hover', '-hover-selectionmode'),
+ (':active', '-active-selectionmode'),
+ (':backdrop', '-backdrop-selectionmode'),
+ (':checked', '-checked-selectionmode'),
+ (':checked:hover', '-checked-hover-selectionmode'),
+ (':checked:active', '-checked-active-selectionmode'),
+ (':backdrop:checked', '-checked-backdrop-selectionmode') {
+ .view.content-view.check#{$s}:not(list) {
+ -gtk-icon-shadow: none;
+ -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
+ url("assets/checkbox#{$as}@2.png"));
+ background-color: transparent;
+ }
+}
+
+checkbutton.text-button, radiobutton.text-button {
+ // this is for a nice focus-within on check and radios text
+ padding: 2px 0;
+ outline-offset: 0;
+
+ label:not(:only-child) {
+ &:first-child { margin-left: 4px; }
+ &:last-child { margin-right: 4px; }
+ }
+}
+
+check,
+radio {
+ margin: 0 4px;
+
+ &:only-child { margin: 0; }
+
+ min-height: 14px;
+ min-width: 14px;
+ border: 1px solid;
+ -gtk-icon-source: none;
+
+ @include button(normal-alt, $c:lighten($bg_color, 5%), $edge: $shadow_color);
+
+ &:hover { @include button(hover-alt, $edge: $shadow_color); }
+ &:active { @include button(active); }
+ &:disabled { @include button(insensitive); }
+ &:backdrop {
+ @include button(backdrop);
+
+ transition: $backdrop_transition;
+
+ &:disabled { @include button(backdrop-insensitive); }
+ }
+
+ @if $variant == 'light' {
+ // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
+ // color, hence we need special casing.
+ row:selected & { border-color: $selected_borders_color; }
+ }
+
+ .osd & {
+ @include button(osd);
+
+ &:hover { @include button(osd); }
+ &:active { @include button(osd-active); }
+ &:backdrop { @include button(osd-backdrop); }
+ &:disabled { @include button(osd-insensitive); }
+ }
+
+ menu menuitem & {
+ margin: 0; // this is a workaround for a menu check/radio size allocation issue
+
+ &, &:hover, &:disabled { //FIXME use button reset mixin
+ min-height: 14px;
+ min-width: 14px;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ color: inherit;
+ border-color: currentColor;
+ animation: none;
+ }
+ }
+}
+
+%check,
+check {
+ border-radius: 3px;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
+ -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+%radio,
+radio {
+ border-radius: 100%;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
+ -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+// let's animate things
+@keyframes check_check {
+ from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+ to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_radio {
+ from { -gtk-icon-transform: scale(0); }
+ to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_indeterminate {
+ from { -gtk-icon-transform: scale(0, 1); }
+ to { -gtk-icon-transform: unset; }
+}
+
+check:not(:indeterminate):checked { animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked { animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
+
+// no animations in menus
+menu menuitem {
+ check:not(:indeterminate):checked,
+ radio:not(:indeterminate):checked,
+ check:indeterminate:checked:active,
+ radio:indeterminate:checked { animation: none; }
+}
+
+treeview.view check,
+treeview.view radio {
+ &:selected {
+ &:focus-within, & {
+ color: $fg_color;
+
+ @if $variant == 'light' { border-color: $selected_borders_color; }
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+ }
+
+ &:backdrop { &:selected, & { color: $backdrop_fg_color; }}
+}
+
+treeview.view radio:selected { &:focus-within, & { @extend %radio; }} // This is a workaround
+
+
+/************
+ * GtkScale *
+ ************/
+%scale_trough {
+ border: 1px solid $borders_color;
+ border-radius: 3px;
+ background-color: $dark_fill;
+ box-shadow: inset 1px 1px transparentize(black, 0.9);
+
+ &:disabled {
+ background-color: $insensitive_bg_color;
+ box-shadow: none;
+ }
+
+ &:backdrop {
+ background-color: $backdrop_dark_fill;
+ border-color: $backdrop_borders_color;
+ box-shadow: none;
+ transition: $backdrop_transition;
+
+ &:disabled { background-color: $insensitive_bg_color; }
+ }
+
+ // ...on selected list rows
+ row:selected & {
+ box-shadow: none;
+
+ &, &:disabled { border-color: $selected_borders_color; }
+ }
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+ background-color: transparentize($osd_borders_color, 0.2);
+ box-shadow: none;
+ outline-color: transparentize($osd_fg_color, 0.8);
+
+ &:disabled { background-color: $osd_insensitive_bg_color; }
+ }
+}
+
+%scale_highlight {
+ border: 1px solid shade($selected_bg_color, 0.7);
+ border-radius: 3px;
+ background-image: linear-gradient(to bottom,
+ shade($selected_bg_color, 1.1),
+ shade($selected_bg_color, 0.9)
+ );
+
+ &:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ &:backdrop {
+ border-color: transparentize($selected_borders_color, 0.3);
+ background-color: transparentize($selected_bg_color, 0.3);
+ background-image: none;
+ &:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+
+ &:disabled { border-color: transparent; }
+ }
+}
+
+scale {
+ // sizing
+ $_marks_length: 6px;
+ $_marks_distance: 6px;
+
+ min-height: 10px;
+ min-width: 10px;
+ padding: 12px;
+
+ // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
+ fill,
+ highlight { margin: -2px; }
+
+ // the slider is inside the trough, so to have make it bigger there's a negative margin
+
+ slider {
+ min-height: 13px;
+ min-width: 13px;
+ margin: -7px;
+ }
+
+ // click-and-hold the slider to activate
+ &.fine-tune {
+ &.horizontal {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ min-height: 16px;
+ }
+
+ &.vertical {
+ padding-left: 9px;
+ padding-right: 9px;
+ min-width: 16px;
+ }
+
+ // to make the trough grow in fine-tune mode
+ slider { margin: -6px; }
+
+ fill,
+ highlight,
+ trough {
+ border-radius: 5px;
+ -gtk-outline-radius: 7px;
+ }
+ }
+
+ // the backing bit
+ trough {
+ @extend %scale_trough;
+
+ padding: 1px;
+ outline-offset: 2px;
+ -gtk-outline-radius: 5px;
+ }
+
+ // the colored part of the backing bit
+ highlight { @extend %scale_highlight; }
+
+ // this is another differently styled part of the backing bit, the most relevant use case is for example
+ // in media player to indicate how much video stream has been cached
+ fill {
+ @extend %scale_trough;
+
+ &, &:backdrop {
+ background-color: $borders_color;
+ box-shadow: none;
+ }
+
+ &:disabled {
+ &, &:backdrop {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+
+ // OSD
+ .osd & {
+ background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+ &:disabled {
+ &, &:backdrop {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+ }
+ }
+
+ slider {
+ @include button(normal);
+
+ background-image: linear-gradient(to bottom,
+ shade($bg_color, 1.45),
+ shade($bg_color, 1.15)
+ );
+ border: 1px solid darken($borders_color, 3%);
+ border-radius: 100%;
+ transition: $button_transition;
+ transition-property: background, border, box-shadow;
+
+ &:hover { @include button(hover-alt, $edge: $shadow_color); }
+
+ &:active { border-color: $selected_borders_color; }
+
+ &:disabled { @include button (insensitive); }
+
+ &:backdrop {
+ transition: $backdrop_transition;
+
+ @include button(backdrop);
+
+ &:disabled { @include button(backdrop-insensitive); }
+ }
+
+ // ...on selected list rows
+ row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
+
+ // OSD
+ .osd & {
+ @include button(osd);
+ border-color: darken($osd_borders_color, 3%);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+ &:hover { @include button(osd-hover); }
+
+ &:active { @include button(osd-active); }
+
+ &:disabled { @include button(osd-insensitive); }
+
+ &:backdrop {
+ @include button(osd-backdrop);
+
+ &:disabled { @include button(osd-backdrop-insensitive); }
+ }
+ }
+ }
+
+ value { color: gtkalpha(currentColor, 0.6); }
+
+ marks {
+ color: gtkalpha(currentColor, 0.4);
+
+ @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+ (bottom, bottom, top),
+ (top, left, right),
+ (bottom, right, left) {
+ &.#{$marks_class} {
+ margin-#{$marks_margin}: $_marks_distance;
+ margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
+ }
+ }
+ }
+ &.fine-tune marks {
+ @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+ (bottom, bottom, top),
+ (top, left, right),
+ (bottom, right, left) {
+ &.#{$marks_class} {
+ margin-#{$marks_margin}: $_marks_distance;
+ margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
+ }
+ }
+ }
+
+ &.horizontal {
+ indicator {
+ min-height: $_marks_length;
+ min-width: 1px;
+ }
+
+ &.fine-tune indicator { min-height: ($_marks_length - 3px); }
+ }
+
+ &.vertical {
+ indicator {
+ min-height: 1px;
+ min-width: $_marks_length;
+ }
+
+ &.fine-tune indicator { min-width: ($_marks_length - 3px); }
+ }
+
+ &.color {
+ min-height: 0;
+ min-width: 0;
+
+ trough {
+ background-image: image($borders_color);
+ background-repeat: no-repeat;
+ }
+
+ &.horizontal {
+ padding: 0 0 15px 0;
+
+ trough {
+ padding-bottom: 4px;
+ background-position: 0 -3px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ slider {
+ &:dir(ltr), &:dir(rtl) { // specificity bumb
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 15px;
+
+ trough {
+ padding-left: 4px;
+ background-position: 3px 0;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 15px 0 0;
+
+ trough {
+ padding-right: 4px;
+ background-position: -3px 0;
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+
+ &.fine-tune {
+ &.horizontal {
+ &:dir(ltr), &:dir(rtl) { // specificity bump
+ padding: 0 0 12px 0;
+
+ trough {
+ padding-bottom: 7px;
+ background-position: 0 -6px;
+ }
+
+ slider {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 12px;
+
+ trough {
+ padding-left: 7px;
+ background-position: 6px 0;
+ }
+
+ slider {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 12px 0 0;
+
+ trough {
+ padding-right: 7px;
+ background-position: -6px 0;
+ }
+
+ slider {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+}
+
+
+/*****************
+ * Progress bars *
+ *****************/
+progressbar {
+ // sizing
+ &.horizontal {
+ trough { min-height: 6px; padding: 1px 0; }
+ progress { min-height: 8px; }
+ }
+
+ &.vertical {
+ trough { min-width: 6px; padding: 0 1px; }
+ progress { min-width: 8px; }
+ }
+
+ &.horizontal progress,
+ &.vertical progress { margin: 0; }
+
+
+ // FIXME: insensitive state missing and some other state should be set probably
+ font-size: smaller;
+ color: transparentize($fg_color, 0.6);
+ font-feature-settings: "tnum";
+
+ &:backdrop {
+ box-shadow: none;
+ transition: $backdrop_transition;
+ }
+
+ trough { @extend %scale_trough; }
+
+ progress {
+ @extend %scale_highlight;
+
+ border: 1px solid shade($selected_bg_color, 0.7);
+ border-radius: 3px;
+
+ &.left {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+
+ &.right {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+
+ &.top {
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ }
+
+ &.bottom {
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+ }
+
+ &.osd { // progressbar.osd used for epiphany page loading progress
+ min-width: 3px;
+ min-height: 3px;
+ background-color: transparent;
+
+ trough {
+ border-style: none;
+ border-radius: 0;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ progress {
+ border-style: none;
+ border-radius: 0;
+ }
+ }
+
+ trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+}
+
+/*************
+ * Level Bar *
+ *************/
+levelbar {
+ block {
+ min-width: 32px;
+ min-height: 1px;
+ }
+
+ &.vertical block {
+ min-width: 1px;
+ min-height: 32px;
+ }
+
+ &:backdrop { transition: $backdrop_transition; }
+
+ trough {
+ border: 1px solid;
+ padding: 2px;
+ border-radius: 3px;
+ @include entry(normal);
+
+ &:backdrop { @include entry(backdrop); }
+ }
+
+ &.horizontal.discrete block { margin: 0 1px; }
+
+ &.vertical.discrete block { margin: 1px 0; }
+
+ block {
+ border: 1px solid;
+ border-radius: 1px;
+ box-shadow: 0 1px transparentize(black, 0.8);
+
+ &:backdrop { box-shadow: none; }
+
+ &.low {
+ border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color);
+ background-color: $warning_color;
+
+ &:backdrop { border-color: $warning_color; };
+ }
+
+ &.high,
+ &:not(.empty) {
+ border-color: if($variant == 'light', darken($selected_bg_color, 20%), $selected_bg_color);
+ background-color: $selected_bg_color;
+
+ &:backdrop { border-color: $selected_bg_color; }
+ }
+
+ &.full {
+ border-color: if($variant == 'light', darken($success_color, 20%), $success_color);
+ background-color: $success_color;
+
+ &:backdrop { border-color: $success_color; };
+ }
+
+ &.empty {
+ background-color: transparent;
+ border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9));
+ box-shadow: none;
+
+ &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
+ }
+ }
+}
+
+
+/****************
+ * Print dialog *
+*****************/
+printdialog {
+ paper {
+ color: $fg_color;
+ border: 1px solid $borders_color;
+ background: white;
+ padding: 0;
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ }
+ }
+ .dialog-vbox {
+ background-color: $bg_color;
+ &:backdrop { background-color: $backdrop_bg_color; }
+ }
+
+ .dialog-action-box { margin: 12px; }
+}
+
+
+/**********
+ * Frames *
+ **********/
+frame > border,
+.frame {
+ box-shadow: none;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ border: 1px solid $borders_color;
+
+ &.flat { border-style: none; }
+
+ &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+actionbar > revealer > box {
+ padding: 6px;
+ border-top: 1px solid $borders_color;
+
+ &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+scrolledwindow {
+ viewport.frame { // avoid double borders when viewport inside scrolled window
+ border-style: none;
+ }
+
+ // This is used when content is touch-dragged past boundaries.
+ // draws a box on top of the content, the size changes programmatically.
+ overshoot {
+ &.top {
+ @include overshoot(top);
+
+ &:backdrop { @include overshoot(top, backdrop); }
+ }
+
+ &.bottom {
+ @include overshoot(bottom);
+
+ &:backdrop { @include overshoot(bottom, backdrop); }
+ }
+
+ &.left {
+ @include overshoot(left);
+
+ &:backdrop { @include overshoot(left, backdrop); }
+ }
+
+ &.right {
+ @include overshoot(right);
+
+ &:backdrop { @include overshoot(right, backdrop); }
+ }
+ }
+
+ // Overflow indication, works similarly to the overshoot, the size if fixed tho.
+ undershoot {
+ &.top { @include undershoot(top); }
+
+ &.bottom { @include undershoot(bottom); }
+
+ &.left { @include undershoot(left); }
+
+ &.right { @include undershoot(right); }
+ }
+
+ junction { // the small square between two scrollbars
+ border-color: transparent;
+ // the border image is used to add the missing dot between the borders, details, details, details...
+ border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
+ background-color: $scrollbar_bg_color;
+
+ &:dir(rtl) { border-image-slice: 0 1 0 0; }
+
+ &:backdrop {
+ border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
+ background-color: $backdrop_scrollbar_bg_color;
+ transition: $backdrop_transition;
+ }
+ }
+}
+
+//vbox and hbox separators
+separator {
+ background: transparentize(black, 0.9);
+ min-width: 1px;
+ min-height: 1px;
+}
+
+
+/*********
+ * Lists *
+ *********/
+list {
+ color: $text_color;
+ background-color: $base_color;
+ border-color: $borders_color;
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ background-color: $backdrop_base_color;
+ border-color: $backdrop_borders_color;
+ }
+
+ row { padding: 2px; }
+ row.expander { padding: 0px; }
+ row.expander .row-header { padding: 2px; }
+
+ &.separators row:not(:first-child) {
+ border-top: 1px solid $borders_color;
+ }
+}
+
+row {
+ transition: all 150ms $ease-out-quad;
+
+ &:hover { transition: none; }
+
+ &:backdrop { transition: $backdrop_transition; }
+
+ &.activatable {
+ &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+
+ &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
+
+ &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+
+ &:backdrop:hover { background-color: transparent; }
+
+ &:selected {
+ @extend %selected_items;
+
+ &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+
+ &.has-open-popup,
+ &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
+ }
+ }
+
+ &:selected { @extend %selected_items; }
+}
+
+
+/*********************
+ * App Notifications *
+ *********************/
+.app-notification,
+.app-notification.frame {
+ @extend %osd;
+
+ padding: 10px;
+ border-radius: 0 0 5px 5px;
+ background-color: $osd_bg_color;
+ background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+ transparent 2px);
+ background-clip: padding-box;
+
+ &:backdrop {
+ background-image: none;
+ transition: $backdrop_transition;
+ }
+
+ button { @extend %osd_button; }
+
+ border { border: none; }
+}
+
+
+/*************
+ * Expanders *
+ *************/
+expander {
+ title > arrow {
+ min-width: 16px;
+ min-height: 16px;
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+ &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+ &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
+ &:disabled { color: $insensitive_fg_color; }
+ &:disabled:backdrop { color: $backdrop_insensitive_color; }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+}
+
+
+/************
+ * Calendar *
+ ***********/
+calendar {
+ color: $text_color;
+ border: 1px solid $borders_color;
+
+ &:selected {
+ @extend %selected_items;
+
+ border-radius: 3px;
+ }
+
+ &.header {
+ border-bottom-color: transparentize(black, 0.9);
+
+ &:backdrop { border-bottom-color: transparentize(black, 0.9); }
+ }
+
+ &.button {
+ @extend %undecorated_button;
+
+ color: transparentize($fg_color, 0.55);
+
+ &:hover { color: $fg_color; }
+
+ &:backdrop { color: transparentize($backdrop_fg_color,0.55); }
+
+ &:disabled { color: transparentize($insensitive_fg_color,0.55); }
+ }
+
+ &.highlight {
+ color: $insensitive_fg_color;
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ border-color: $backdrop_borders_color;
+ }
+
+ &:indeterminate { color: gtkalpha(currentColor, 0.1); }
+}
+
+
+/***********
+ * Dialogs *
+ ***********/
+window.dialog.message { // Message Dialog styling
+ .titlebar {
+ min-height: 20px;
+ background-image: none;
+ background-color: $bg_color;
+ border-style: none;
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ }
+
+ &.csd { // rounded bottom border styling for csd version
+ &.background {
+ // bigger radius for better antialiasing
+ border-bottom-left-radius: 9px;
+ border-bottom-right-radius: 9px;
+ }
+
+ .dialog-action-area {
+ padding: 0px;
+ button {
+ padding: 3px;
+ border-radius: 0px;
+ border-left-style: solid;
+ border-right-style: none;
+ border-bottom-style: none;
+
+ &:first-child{
+ border-left-style: none;
+ border-bottom-left-radius: 7px;
+ -gtk-outline-bottom-left-radius: 5px;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: 7px;
+ -gtk-outline-bottom-right-radius: 5px;
+ }
+ }
+ }
+ }
+}
+
+filechooser {
+ .dialog-action-box {
+ border-top: 1px solid $borders_color;
+
+ &:backdrop { border-top-color: $backdrop_borders_color; }
+ }
+
+ #pathbarbox {
+ border-bottom: 1px solid $bg_color;
+ stack { background-color: $bg_color; }
+ }
+}
+
+filechooserbutton:drop(active) {
+ box-shadow: none;
+ border-color: transparent;
+}
+
+
+/***********
+ * Sidebar *
+ ***********/
+.sidebar {
+ border-style: none;
+ background-color: $sidebar_bg_color;
+ -gtk-icon-style: regular;
+
+ row,
+ treeview,
+ listview {
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ background-color: $sidebar_bg_color;
+ &:selected, &:selected:focus-within {
+ background-image: linear-gradient(to bottom,
+ shade($sidebar_bg_color, 0.87),
+ shade($sidebar_bg_color, 0.95) 10%,
+ shade($sidebar_bg_color, 0.99) 92%,
+ shade($sidebar_bg_color, 0.92)
+ );
+ border-top: 1px solid shade($bg_color, 0.85);
+ border-bottom: 1px solid shade($bg_color, 1.12);
+
+ label {
+ color: $fg_color;
+ &:backdrop { color: $backdrop_fg_color; }
+ }
+ &:backdrop {
+ background-image: none;
+ background-color: $bg_color;
+ color: $fg_color;
+ border-top: 1px solid shade($bg_color, 0.9);
+ border-bottom: 1px solid shade($bg_color, 0.9);
+ }
+ }
+ .view:selected, .view:selected:focus-within { color: $fg_color; }
+ &:backdrop { background-color: transparent; }
+ }
+ @at-root %sidebar_left,
+ &:dir(ltr),
+ &.left,
+ &.left:dir(rtl) {
+ border-right: 1px solid $borders_color;
+ border-left-style: none;
+ border-top-style: none;
+ border-bottom-style: none;
+ }
+
+ @at-root %sidebar_right
+ &:dir(rtl),
+ &.right {
+ border-left: 1px solid $borders_color;
+ border-right-style: none;
+ border-top-style: none;
+ border-bottom-style: none;
+ }
+
+ &:backdrop {
+ background-color: $backdrop_sidebar_bg_color;
+ border-color: $backdrop_borders_color;
+ transition: $backdrop_transition;
+ }
+
+ list, treeview {
+ background-color: transparent;
+ &:backdrop {
+ background-color: transparent;
+ }
+ }
+
+ paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } }
+}
+
+stacksidebar {
+ &.sidebar {
+ &:dir(ltr),
+ &.left,
+ &.left:dir(rtl) { list { @extend %sidebar_left; }}
+
+ &:dir(rtl),
+ &.right { list { @extend %sidebar_right; }}
+ }
+
+ row {
+ padding: 10px 4px;
+
+ > label {
+ padding-left: 6px;
+ padding-right: 6px;
+ }
+
+ &.needs-attention > label {
+ @extend %needs_attention;
+
+ background-size: 6px 6px, 0 0;
+ }
+ }
+}
+
+
+/****************
+ * File chooser *
+ ****************/
+
+$_placesidebar_icons_opacity: 0.7;
+
+placessidebar {
+ > viewport.frame { border-style: none; }
+
+ row {
+ // Needs overriding of the GtkListBoxRow padding
+ min-height: 24px;
+ padding: 0px;
+
+ // Using margins/padding directly in the SidebarRow
+ // will make the animation of the new bookmark row jump
+ > revealer { padding: 0 14px; }
+
+ &:selected { color: $fg_color; }
+
+ &:disabled { color: $insensitive_fg_color; }
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ background-color: $backdrop_bg_color;
+
+ &:selected { color: $backdrop_fg_color; }
+
+ &:disabled { color: $backdrop_insensitive_color; }
+ }
+
+ image.sidebar-icon {
+ &:dir(ltr) { padding-right: 8px; }
+ &:dir(rtl) { padding-left: 8px; }
+ }
+
+ label.sidebar-label {
+ &:dir(ltr) { padding-right: 2px; }
+ &:dir(rtl) { padding-left: 2px; }
+ }
+
+ @at-root button.sidebar-button {
+ @extend %button_basic_flat;
+
+ @extend %button_selected.flat;
+
+ min-height: 26px;
+ min-width: 26px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+ padding: 0;
+ border-radius: 100%;
+ -gtk-outline-radius: 100%;
+
+ &:not(:hover):not(:active),
+ &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
+ }
+
+ // in the sidebar case it makes no sense to click the selected row
+ &:selected:active { box-shadow: none; }
+
+ &.sidebar-placeholder-row {
+ padding: 0 8px;
+ min-height: 2px;
+ background-image: image($drop_target_color);
+ background-clip: content-box;
+ }
+
+ &.sidebar-new-bookmark-row { color: $selected_bg_color; }
+
+ &:drop(active):not(:disabled) {
+ color: $drop_target_color;
+ box-shadow: inset 0 1px $drop_target_color,
+ inset 0 -1px $drop_target_color;
+
+ &:selected {
+ color: $selected_fg_color;
+ background-image: linear-gradient(to bottom,
+ darken(mix(darken($base_color, 10%), lighten($selected_bg_color, 35%), 0.1), 13%),
+ darken(mix(darken($base_color, 10%), lighten($selected_bg_color, 35%), 0.1), 5%) 10%,
+ darken(mix(darken($base_color, 10%), lighten($selected_bg_color, 35%), 0.1), 1%) 92%,
+ darken(mix(darken($base_color, 10%), lighten($selected_bg_color, 35%), 0.1), 8%)
+ );
+ }
+ }
+ }
+}
+
+placesview {
+ .server-list-button > image {
+ transition: 200ms $ease-out-quad;
+ -gtk-icon-transform: rotate(0turn);
+ }
+
+ .server-list-button:checked > image {
+ transition: 200ms $ease-out-quad;
+ -gtk-icon-transform: rotate(-0.5turn);
+ }
+
+ row.activatable:hover { background-color: transparent; }
+
+ // this selects the "connect to server" label
+ > actionbar > revealer > box > label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+}
+
+
+/*********
+ * Paned *
+ *********/
+paned {
+ > separator {
+ min-width: 1px;
+ min-height: 1px;
+ -gtk-icon-source: none; // defeats the ugly default handle decoration
+ border-style: none; // just to be sure
+ background-color: transparent;
+ // workaround, using background istead of a border since the border will get rendered twice (?)
+ background-image: image($borders_color);
+ background-size: 1px 1px;
+
+ &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+
+ &:backdrop { background-image: image($backdrop_borders_color); }
+
+ &.wide {
+ min-width: 5px;
+ min-height: 5px;
+ background-color: $bg_color;
+ background-image: image($borders_color), image($borders_color);
+ background-size: 1px 1px, 1px 1px;
+
+ &:backdrop {
+ background-color: $backdrop_bg_color;
+ background-image: image($backdrop_borders_color),
+ image($backdrop_borders_color);
+ }
+ }
+ }
+
+ &.horizontal > separator {
+ background-repeat: repeat-y;
+
+ &:dir(ltr) {
+ margin: 0 -8px 0 0;
+ padding: 0 8px 0 0;
+ background-position: left;
+ }
+ &:dir(rtl) {
+ margin: 0 0 0 -8px;
+ padding: 0 0 0 8px;
+ background-position: right;
+ }
+
+ &.wide {
+ margin: 0;
+ padding: 0;
+ background-repeat: repeat-y, repeat-y;
+ background-position: left, right;
+ }
+ }
+
+ &.vertical > separator {
+ margin: 0 0 -8px 0;
+ padding: 0 0 8px 0;
+ background-repeat: repeat-x;
+ background-position: top;
+
+ &.wide {
+ margin: 0;
+ padding: 0;
+ background-repeat: repeat-x, repeat-x;
+ background-position: bottom, top;
+ }
+ }
+}
+
+
+/**************
+ * GtkInfoBar *
+ **************/
+infobar { border-style: none; }
+
+.info,
+.question,
+.warning,
+.error {
+ &:backdrop, & {
+ label, & { color: $selected_fg_color; }
+ background-color: $selected_bg_color;
+ border-color: darken($selected_bg_color, 10%);
+ }
+
+ text-shadow: 0 1px darken($selected_bg_color, 10%);
+
+ &:backdrop { text-shadow: none; }
+
+ button {
+ // FIXME: extend selection mode buttons
+ @include button(normal, $selected_bg_color, $selected_fg_color, none);
+ border-color: darken($selected_bg_color, 20%);
+
+ &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, none); }
+
+ &:active,
+ &:checked { @include button(active, $selected_bg_color, $selected_fg_color, none); }
+
+ &:disabled { @include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
+
+ &:backdrop {
+ @include button(backdrop, $selected_bg_color, $selected_fg_color, none);
+ border-color: _border_color($selected_bg_color);
+
+ &:disabled {
+ @include button(backdrop-insensitive, $selected_bg_color,
+ $selected_fg_color, none);
+ border-color: _border_color($selected_bg_color);
+ }
+ }
+ }
+
+ label:selected { &:focus-within, &:hover, & { background-color: darken($selected_bg_color, 10%); }}
+
+ *:link { @extend %link_selected; }
+}
+
+
+/*************
+ * Buttonbox *
+ *************/
+buttonbox {
+ padding: 6px;
+}
+
+
+/************
+ * Tooltips *
+ ************/
+tooltip {
+ &.background {
+ // background-color needs to be set this way otherwise it gets drawn twice
+ // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+ background-color: transparentize(black, 0.2);
+ background-clip: padding-box;
+ border: 1px solid $tooltip_borders_color; // this suble border is meant to
+ // not make the tooltip melt with
+ // very dark backgrounds
+ }
+
+ padding: 1px; /* not working */
+ border-radius: 5px;
+ box-shadow: none; // otherwise it gets inherited by windowframe.csd
+ text-shadow: 0 1px black;
+
+ // FIXME: we need a border or tooltips vanish on black background.
+ decoration { background-color: transparent; }
+
+ * { // Yeah this is ugly
+ padding: 1px;
+ background-color: transparent;
+ color: white;
+ }
+}
+
+
+/*****************
+ * Color Chooser *
+ *****************/
+colorswatch {
+ // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+ // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+ // applied to the overlay box.
+
+ &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state
+
+ $_colorswatch_radius: 5px;
+ $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
+ inset 0 3px 2px -2px transparentize(black, 0.5));
+
+ // base color corners rounding
+ // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+ // sports a bigger radius.
+ // nth-child is needed by the custom color strip.
+
+ &.top {
+ border-top-left-radius: $_colorswatch_radius + 0.5px;
+ border-top-right-radius: $_colorswatch_radius + 0.5px;
+
+ overlay {
+ border-top-left-radius: $_colorswatch_radius;
+ border-top-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.bottom {
+ border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+ overlay {
+ border-bottom-left-radius: $_colorswatch_radius;
+ border-bottom-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.left,
+ &:first-child:not(.top) {
+ border-top-left-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+
+ overlay {
+ border-top-left-radius: $_colorswatch_radius;
+ border-bottom-left-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.right,
+ &:last-child:not(.bottom) {
+ border-top-right-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+ overlay {
+ border-top-right-radius: $_colorswatch_radius;
+ border-bottom-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.dark overlay {
+ color: $selected_fg_color;
+
+ &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+
+ &:backdrop { color: $backdrop_selected_fg_color; }
+ }
+
+ &.light overlay {
+ color: $text_color;
+
+ &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+
+ &:backdrop { color: $backdrop_text_color; }
+ }
+
+ &:drop(active) {
+ box-shadow: none;
+
+ &.light overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+
+ &.dark overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ overlay {
+ box-shadow: $_colorswatch_overlay_shadow;
+ border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+
+ &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
+
+ &:backdrop, &:backdrop:hover {
+ border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
+ box-shadow: none;
+ }
+ }
+
+ &#add-color-button {
+ border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+
+ &:only-child { border-radius: $_colorswatch_radius; }
+
+ overlay {
+ @include button(normal);
+
+ &:hover { @include button(hover); }
+
+ &:backdrop { @include button(backdrop); }
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+
+ overlay {
+ border-color: transparentize(black, 0.4);
+ box-shadow: none;
+ }
+ }
+
+ row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
+
+ &#editor-color-sample {
+ border-radius: 4px;
+
+ overlay { border-radius: 4.5px; }
+ }
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: 5px; }
+
+/********
+ * Misc *
+ ********/
+//content view (grid/list)
+.content-view {
+ background-color: darken($bg_color,7%);
+
+ &:hover { -gtk-icon-effect: highlight; }
+
+ &:backdrop { background-color: darken($bg_color,7%); }
+
+ rubberband, .rubberband { @extend rubberband; }
+}
+
+.scale-popup {
+ .osd & { @extend %osd; }
+
+ .osd & button.flat { //FIXME: quick hack, redo properly
+ border-style: none;
+ border-radius: 5px;
+ }
+
+ button { // +/- buttons on GtkVolumeButton popup
+ &:hover {
+ @extend %undecorated_button;
+ background-color: transparentize($fg_color,0.9);
+ border-radius: 5px;
+ }
+
+ &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
+ }
+}
+
+
+/**********************
+ * Window Decorations *
+ *********************/
+window {
+ // lamefun trick to get rounded borders regardless of CSD use
+ border-width: 0px;
+
+ // this needs to be transparent
+ // see bug #722563
+ $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+ $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
+
+ &.csd {
+ box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
+ 0 0 0 1px $_wm_border; //doing borders with box-shadow
+ margin: 0px;
+ border-radius: $window_radius $window_radius 0 0;
+ &:backdrop {
+ // the transparent shadow here is to enforce that the shadow extents don't
+ // change when we go to backdrop, to prevent jumping windows.
+ // The biggest shadow should be in the same order then in the active state
+ // or the jumping will happen during the transition.
+ box-shadow: 0 3px 9px 1px transparent,
+ 0 2px 6px 2px transparentize(black, 0.8),
+ 0 0 0 1px $_wm_border_backdrop;
+ transition: $backdrop_transition;
+ }
+
+ &.popup {
+ border-radius: $menu_radius;
+ box-shadow: 0 1px 2px transparentize(black, 0.8),
+ 0 0 0 1px transparentize($_wm_border, 0.1);
+ }
+
+ &.dialog.message {
+ border-radius: $window_radius;
+ box-shadow: 0 1px 2px transparentize(black, 0.8),
+ 0 0 0 1px transparentize($_wm_border, 0.1);
+ }
+ }
+
+ &.solid-csd {
+ margin: 0;
+ padding: 4px;
+ border: solid 1px $borders_color;
+ border-radius: 0;
+ box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
+
+ &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
+ }
+
+ &.maximized,
+ &.fullscreen { border-radius: 0; box-shadow: none; }
+
+ &.tiled,
+ &.tiled-top,
+ &.tiled-left,
+ &.tiled-right,
+ &.tiled-bottom {
+ border-radius: 0;
+ box-shadow: 0 0 0 1px $_wm_border,
+ 0 0 0 20px transparent; //transparent control workaround -- #3670
+
+ &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop,
+ 0 0 0 20px transparent; // #3670
+ }
+ }
+
+ &.popup { box-shadow: none; }
+
+ // server-side decorations as used by mutter
+ &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
+
+}
+
+tooltip.csd {
+ border-radius: 5px;
+ box-shadow: none;
+}
+
+// catch all extend :)
+
+%selected_items {
+ outline-style: none;
+
+ // don't differentiate between focus-withinsed and unfocus-withinsed widgets.
+ &:focus-within, &{
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+ }
+
+ &:backdrop {
+ color: $backdrop_selected_fg_color;
+ background-color: $backdrop_selected_bg_color;
+ }
+
+ @at-root %nobg_selected_items, & {
+ color: $selected_fg_color;
+
+ @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
+
+ &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+
+ &:backdrop {
+ color: $backdrop_selected_fg_color;
+ &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+ }
+ }
+}
+
+.monospace { font-family: monospace; }
+
+
+/**********************
+ * Touch Copy & Paste *
+ *********************/
+//touch selection handlebars for the Popover.osd above
+cursor-handle {
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none;
+ border-style: none;
+
+ @each $s,$as in ('',''),
+ (':hover','-hover'),
+ (':active','-active') { //no need for insensitive and backdrop
+ &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
+ $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ padding-left: 10px;
+ }
+
+ &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
+ $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ padding-right: 10px;
+ }
+
+ &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
+ $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ }
+ }
+}
+
+.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
+
+button.circular { // FIXME: aggregate to buttons
+ border-radius: 9999px;
+ -gtk-outline-radius: 9999px;
+
+ label { padding: 0; }
+}
+
+// shortcut window keys
+.keycap {
+ min-width: 20px;
+ min-height: 25px;
+ margin-top: 2px;
+ padding-bottom: 3px;
+ padding-left: 6px;
+ padding-right: 6px;
+
+ color: $fg_color;
+ background-color: $base_color;
+ border: 1px solid;
+ border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
+ border-radius: 5px;
+ box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
+ font-size: smaller;
+
+ &:backdrop {
+ background-color: $backdrop_base_color;
+ color: $backdrop_fg_color;
+ transition: $backdrop_transition;
+ }
+}
+
+:not(decoration):not(window):drop(active):focus-within,
+:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ caret-color: $drop_target_color;
+}
+
+stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons
+
+stackswitcher.circular {
+ border-spacing: 12px;
+
+ // FIXME aggregate with buttons
+ > button.circular,
+ > button.text-button.circular {
+ min-width: 32px;
+ min-height: 32px;
+ padding: 0;
+ }
+}
+
+/*************
+ * App Icons *
+ *************/
+/* Outline for low res icons */
+.lowres-icon {
+ -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05),
+ 1px 0 rgba(0,0,0,0.1),
+ 0 1px rgba(0,0,0,0.3),
+ -1px 0 rgba(0,0,0,0.1);
+}
+
+/* Dropshadow for large icons */
+.icon-dropshadow {
+ -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+ 0 -1px rgba(0,0,0,0.05),
+ 1px 0 rgba(0,0,0,0.1),
+ 0 1px rgba(0,0,0,0.3),
+ -1px 0 rgba(0,0,0,0.1);
+}
+
+/*********
+ * Emoji *
+ ********/
+
+popover.emoji-picker {
+ padding-left: 0;
+ padding-right: 0;
+
+ entry.search { margin: 3px 5px 5px 5px; }
+}
+
+button.emoji-section {
+ border-color: transparent;
+ border-width: 3px;
+ border-style: none none solid;
+ border-radius: 0;
+
+ margin: 2px 4px 2px 4px;
+ padding: 3px 0 0;
+ min-width: 32px;
+ min-height: 28px;
+
+ /* reset props inherited from the button style */
+ background: none;
+ box-shadow: none;
+ text-shadow: none;
+
+ outline-offset: -5px;
+
+ &:first-child { margin-left: 7px; }
+ &:last-child { margin-right: 7px; }
+
+ &:backdrop:not(:checked) { border-color: transparent; }
+ &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
+ &:checked { border-color: $selected_bg_color; }
+
+ label {
+ padding: 0;
+
+ opacity: 0.55;
+ }
+
+ &:hover label { opacity: 0.775; }
+ &:checked label { opacity: 1; }
+}
+
+popover.emoji-picker .emoji {
+ font-size: x-large;
+ padding: 6px;
+
+ :hover {
+ background: $selected_bg_color;
+ border-radius: 6px;
+ }
+}
+
+popover.emoji-completion arrow {
+ border: none;
+ background: none;
+}
+
+popover.emoji-completion contents row box {
+ padding: 2px 10px;
+}
+
+popover.emoji-completion .emoji:hover {
+ background: $popover_hover_color;
+}
diff --git a/light/gtk-4.0/_drawing.scss b/light/gtk-4.0/_drawing.scss
new file mode 100644
index 00000000..33d2ef8e
--- /dev/null
+++ b/light/gtk-4.0/_drawing.scss
@@ -0,0 +1,640 @@
+// Drawing mixins
+
+// generic drawing of more complex things
+
+@function _widget_edge($c:$borders_edge) {
+// outer highlight "used" on most widgets
+ @if $c == none { @return none; }
+ @else { @return 0 1px $c; }
+}
+
+@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
+//
+// Helper function to stack up to 4 box-shadows;
+//
+ @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
+ @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
+ @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
+ @else { box-shadow: $shadow1; }
+}
+
+// entries
+
+@function entry_focus_border($fc:$selected_bg_color) {
+ @return $fc;
+}
+
+@function entry_focus_shadow($fc:$selected_bg_color) {
+ @return inset 0 0 0 1px $fc;
+}
+
+@function entry_gradient($c) {
+ @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%),
+ mix($borders_color, $c, 3%) 2px,
+ $c 90%); }
+ @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%),
+ mix($borders_color, $c, 40%) 3px,
+ $c 90%); }
+}
+
+@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
+//
+// Entries drawing function
+//
+// $t: entry type
+// $fc: focus color
+// $edge: set to none to not draw the bottom edge or specify a color to not
+// use the default one
+//
+// possible $t values:
+// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
+//
+
+ $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
+ $_entry_edge: if($edge == none, none, _widget_edge($edge));
+
+ @if $t==normal {
+ color: $text_color;
+ border-color: $borders_color;
+ background-color: $base_color;
+ @include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
+ // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
+ }
+ @if $t==focus {
+ border-color: entry_focus_border($fc);
+ }
+ @if $t==insensitive {
+ color: $insensitive_fg_color;
+ border-color: $borders_color;
+ background-color: $insensitive_bg_color;
+ box-shadow: $_entry_edge;
+ }
+ @if $t==backdrop {
+ color: $backdrop_text_color;
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_base_color;
+ box-shadow: $_blank_edge;
+ }
+ @if $t==backdrop-insensitive {
+ color: $backdrop_insensitive_color;
+ border-color: $backdrop_borders_color;
+ background-color: $insensitive_bg_color;
+ box-shadow: $_blank_edge;
+ }
+ @if $t==osd {
+ color: $osd_text_color;
+ border-color: $osd_borders_color;
+ background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+ }
+ @if $t==osd-focus {
+ color: $osd_text_color;
+ border-color: $selected_bg_color;
+ background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ background-clip: padding-box;
+ box-shadow: entry_focus_shadow($fc);
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+ }
+ @if $t==osd-insensitive {
+ color: $osd_insensitive_fg_color;
+ border-color: $osd_borders_color;
+ background-color: $osd_insensitive_bg_color;
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+ @if $t==osd-backdrop {
+ color: $osd_text_color;
+ border-color: $osd_borders_color;
+ background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+// buttons
+
+@function _border_color ($c) { @return darken($c, 25%); } // colored buttons want
+ // the border form the
+ // base color
+
+@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
+//
+// calculate the color of text shadows
+//
+// $tc is the text color
+// $bg is the background color
+//
+ $_lbg: lightness($bg)/100%;
+ @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); }
+ @else { @return transparentize(black, $_lbg*0.8); }
+}
+
+@function _button_hilight_color($c) {
+//
+// calculate the right top hilight color for buttons
+//
+// $c: base color;
+//
+ @if lightness($c)>95% { @return white; }
+ @else if lightness($c)>90% { @return transparentize(white, 0.2); }
+ @else if lightness($c)>80% { @return transparentize(white, 0.4); }
+ @else if lightness($c)>50% { @return transparentize(white, 0.6); }
+ @else if lightness($c)>40% { @return transparentize(white, 0.8); }
+ @else { @return transparentize(white, 0.95); }
+}
+
+@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+//
+// helper function for the text emboss effect
+//
+// $tc is the optional text color, not the shadow color
+//
+// TODO: this functions needs a way to deal with special cases
+//
+
+ $_shadow: _text_shadow_color($tc, $bg);
+
+ @if lightness($tc)<50% {
+ text-shadow: 0 1px $_shadow;
+ -gtk-icon-shadow: 0 1px $_shadow;
+ }
+ @else {
+ text-shadow: 0 -1px $_shadow;
+ -gtk-icon-shadow: 0 -1px $_shadow;
+ }
+}
+
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none) {
+//
+// Button drawing function
+//
+// $t: button type,
+// $c: base button color for colored* types
+// $tc: optional text color for colored* types
+// $edge: set to none to not draw the bottom edge or specify a color to not
+// use the default one
+//
+// possible $t values:
+// normal, hover, active, insensitive, insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
+//
+
+ $_hilight_color: _button_hilight_color($c);
+ $_button_edge: if($edge == none, none, _widget_edge($edge));
+ $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
+
+ @if $t==normal {
+ //
+ // normal button
+ //
+ color: $tc;
+ outline-color: transparentize($tc, 0.7);
+ border-top-color: shade($bg_color, 0.8);
+ border-right-color: shade($bg_color, 0.72);
+ border-left-color: shade($bg_color, 0.72);
+ border-bottom-color: shade($bg_color, 0.7);
+ @if $variant == 'light' { background-image: linear-gradient(to bottom, shade(shade($c, 1.02), 1.05), shade(shade($c, 1.02), 0.97)); }
+ @else { background-image: linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%)); }
+ @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
+ }
+
+ @else if $t==hover {
+ //
+ // hovered button
+ //
+ color: $tc;
+ outline-color: transparentize($tc, 0.7);
+ border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+ @if $variant == 'light' {
+ background-image: linear-gradient(to bottom, shade($c, 1.15), shade($c, 1.07));
+ @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge);
+ }
+ @else {
+ background-image: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%));
+ @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge);
+ }
+ }
+
+ @if $t==normal-alt {
+ //
+ // normal button alternative look
+ //
+ color: $tc;
+ outline-color: transparentize($tc, 0.7);
+ border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+ @if $variant == 'light' {
+ background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
+ @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
+ inset 0 -2px lighten($c, 2%),
+ inset 0 -1px darken($c, 12%),
+ $_button_edge);
+ }
+ @else {
+ background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
+ @include _shadows(inset 0 1px $_hilight_color,
+ inset 0 -2px darken($c, 4%),
+ inset 0 -1px darken($c, 9%),
+ $_button_edge);
+ }
+ }
+
+ @else if $t==hover-alt {
+ //
+ // hovered button alternative look
+ //
+ color: $tc;
+ outline-color: transparentize($tc, 0.7);
+ border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+ @if $variant == 'light' {
+ background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%);
+ box-shadow: inset 0 1px _button_hilight_color(lighten($c, 6%)),
+ inset 0 -2px lighten($c, 5%),
+ inset 0 -1px darken($c, 10%),
+ $_button_edge;
+ }
+ @else {
+ background-image: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%);
+ @include _shadows(inset 0 1px $_hilight_color,
+ inset 0 -2px darken($c, 3%),
+ inset 0 -1px darken($c, 6%),
+ $_button_edge);
+ }
+ }
+
+
+ @else if $t==active {
+ //
+ // pushed button
+ //
+ color: $tc;
+ outline-color: transparentize($tc, 0.7);
+ border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+ @if $variant == 'light' { background-image: linear-gradient(to bottom, shade(shade($c, 0.85), 1.05), shade(shade($c, 0.85), 0.97)); }
+ @else { background-image: linear-gradient(to bottom, darken($c, 9%), darken($c, 5%)); }
+ @include _shadows(inset 0 2px 1px -2px transparentize(black,0.4),
+ $_button_edge);
+ }
+ @else if $t==insensitive {
+ //
+ // insensitive button
+ //
+ $_bg: if($c!=$bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
+
+ label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color); }
+
+ border-color: if($c!=$bg_color, _border_color($c),
+ $insensitive_borders_color);
+ background-color: $_bg;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ // white with 0 alpha to avoid an ugly transition, since no color means
+ // black with 0 alpha
+ @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
+ }
+ @else if $t==insensitive-active {
+ //
+ // insensitive pushed button
+ //
+ $_bg: if($c!=$bg_color, darken(mix($c,$base_color, 85%), 5%),
+ $insensitive_bg_color);
+ $_bc: if($c!=$bg_color, _border_color($c), $insensitive_borders_color);
+
+ label, & { color: if($c!=$bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color); }
+
+ border-color: $_bc;
+ background-image: linear-gradient(to bottom, mix($_bc, $_bg, 10%), $_bg);
+ // white with 0 alpha to avoid an ugly transition, since no color means
+ // black with 0 alpha
+ @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
+ }
+
+ @else if $t==backdrop {
+ //
+ // backdrop button
+ //
+ $_bg: if($c!=$bg_color,$c,$backdrop_bg_color);
+ $_bc: if($variant=='light',$c,_border_color($c));
+
+ label, & { color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); }
+
+ border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
+ background-color: $_bg;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ @include _shadows(inset 0 1px transparentize(white, 1),
+ $_blank_edge);
+ }
+
+ @else if $t==backdrop-active {
+ //
+ // backdrop pushed button FIXME no colors here!
+ //
+ $_bg: if($c!=$bg_color, darken($c, 10%), $backdrop_dark_fill);
+ $_bc: if($variant=='light',$_bg,_border_color($c));
+
+ label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
+
+ border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
+ background-color: $_bg;
+ @include _shadows(inset 0 1px transparentize(white, 1),
+ $_blank_edge);
+ }
+
+ @else if $t==backdrop-insensitive {
+ //
+ // backdrop insensitive button
+ //
+
+ $_bg: if($c!=$bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
+ $_bc: if($variant=='light', $_bg,_border_color($c));
+
+ label, & { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
+
+ border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
+ background-color: $_bg;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ // white with 0 alpha to avoid an ugly transition, since no color means
+ // black with 0 alpha
+ @include _shadows(inset 0 1px transparentize(white, 1),
+ $_blank_edge);
+ }
+
+ @else if $t==backdrop-insensitive-active {
+ //
+ // backdrop insensitive pushed button
+ //
+
+ $_bg: if($c!=$bg_color, darken(mix($c, $base_color, 85%), 5%),
+ darken($insensitive_bg_color, 5%));
+ $_bc: if($variant=='light', $_bg,_border_color($c));
+
+ label { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
+
+ border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
+ background-color: $_bg;
+ @include _shadows(inset 0 1px transparentize(white, 1),
+ $_blank_edge);
+ }
+
+ @else if $t==osd {
+ //
+ // normal osd button
+ //
+ $_bg: if($c!=$bg_color, transparentize($c, 0.5),
+ $osd_bg_color);
+
+ color: $osd_fg_color;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ background-clip: padding-box;
+ box-shadow: inset 0 1px transparentize(white, 0.9);
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+ outline-color: transparentize($osd_fg_color, 0.7);
+ }
+ @else if $t==osd-hover {
+ //
+ // active osd button
+ //
+ $_bg: if($c!=$bg_color, transparentize($c, 0.3),
+ lighten($osd_bg_color, 12%));
+
+ color: white;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ background-clip: padding-box;
+ box-shadow: inset 0 1px transparentize(white, 0.9);
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+ outline-color: transparentize($osd_fg_color, 0.7);
+ }
+ @else if $t==osd-active {
+ //
+ // active osd button
+ //
+ $_bg: if($c!=$bg_color, $c, $osd_borders_color);
+
+ color: white;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ outline-color: transparentize($osd_fg_color, 0.7);
+ }
+ @else if $t==osd-insensitive {
+ //
+ // insensitive osd button
+ //
+ color: $osd_insensitive_fg_color;
+ border-color: $osd_borders_color;
+ background-color: $osd_insensitive_bg_color;
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+ @else if $t==osd-backdrop {
+ //
+ // backdrop osd button
+ //
+ $_bg: if($c!=$bg_color, transparentize($c, 0.5),
+ $osd_bg_color);
+
+ color: $osd_fg_color;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ background-clip: padding-box;
+ box-shadow: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+ @else if $t==undecorated {
+ //
+ // reset
+ //
+ border-color: transparent;
+ background-color: transparent;
+ background-image: none;
+
+ @include _shadows(inset 0 1px transparentize(white, 1),
+ $_blank_edge);
+
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) {
+ color: mix($tc, $bg_color, 80%);
+ @if $flat { background-color: $c; }
+ @else {
+ background-image: linear-gradient(to bottom,
+ mix(black,$c,15%) 5%,
+ mix(black,$c,10%) 20%,
+ mix(black,$c,10%) 90%,
+ $c);
+ }
+
+ border-color: if($c!=$bg_color, _border_color($c), $border_color);
+
+ @if not($noedge) {
+ @if lightness($c) > 60% {
+ box-shadow: inset 0 -1px $borders_edge,
+ 0 1px $borders_edge;
+ }
+ @else {
+ box-shadow: inset 0 -1px transparentize($borders_edge, 0.5),
+ 0 1px transparentize($borders_edge, 0.5);
+ }
+ }
+ @else { box-shadow: none; }
+}
+
+@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
+//
+// headerbar fill
+//
+// $c: base color
+// $hc: top highlight color
+// $ov: a background layer for background shorthand (hence no commas!)
+//
+ $gradient: linear-gradient(to bottom, $c, shade($c, 0.88));
+
+ @if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); }
+
+ @if $ov != none { background: $c $ov, $gradient; }
+ @else { background: $c $gradient; }
+
+ box-shadow: inset 0 1px $hc; // top highlight
+}
+
+@mixin overshoot($p, $t:normal, $c:$fg_color) {
+//
+// overshoot
+//
+// $p: position
+// $t: type
+// $c: base color
+//
+// possible $p values:
+// top, bottom, right, left
+//
+// possible $t values:
+// normal, backdrop
+//
+
+ $_small_gradient_length: 5%;
+ $_big_gradient_length: 100%;
+
+ $_position: center top;
+ $_small_gradient_size: 100% $_small_gradient_length;
+ $_big_gradient_size: 100% $_big_gradient_length;
+
+ @if $p==bottom {
+ $_position: center bottom;
+ $_linear_gradient_direction: to top;
+ }
+
+ @else if $p==right {
+ $_position: right center;
+ $_small_gradient_size: $_small_gradient_length 100%;
+ $_big_gradient_size: $_big_gradient_length 100%;
+ }
+
+ @else if $p==left {
+ $_position: left center;
+ $_small_gradient_size: $_small_gradient_length 100%;
+ $_big_gradient_size: $_big_gradient_length 100%;
+ }
+
+ $_small_gradient_color: $c;
+ $_big_gradient_color: $c;
+
+ @if $c==$fg_color {
+ $_small_gradient_color: darken($borders_color, 10%);
+ $_big_gradient_color: $fg_color;
+
+ @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
+ }
+
+ $_small_gradient: -gtk-gradient(radial,
+ $_position, 0,
+ $_position, 0.5,
+ to($_small_gradient_color),
+ to(transparentize($_small_gradient_color, 1)));
+
+ $_big_gradient: -gtk-gradient(radial,
+ $_position, 0,
+ $_position, 0.6,
+ from(transparentize($_big_gradient_color, 0.93)),
+ to(transparentize($_big_gradient_color, 1)));
+
+ @if $t==normal {
+ background-image: $_small_gradient, $_big_gradient;
+ background-size: $_small_gradient_size, $_big_gradient_size;
+ }
+
+ @else if $t==backdrop {
+ background-image: $_small_gradient;
+ background-size: $_small_gradient_size;
+ }
+
+ background-repeat: no-repeat;
+ background-position: $_position;
+
+ background-color: transparent; // reset some properties to be sure to not inherit them somehow
+ border: none; //
+ box-shadow: none; //
+}
+
+@mixin undershoot($p) {
+//
+// undershoot
+//
+// $p: position
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+ $_undershoot_color_dark: transparentize(black, 0.8);
+ $_undershoot_color_light: transparentize(white, 0.8);
+
+ $_gradient_dir: left;
+ $_dash_bg_size: 10px 1px;
+ $_gradient_repeat: repeat-x;
+ $_bg_pos: center $p;
+
+ background-color: transparent; // shouldn't be needed, but better to be sure;
+
+ @if ($p == left) or ($p == right) {
+ $_gradient_dir: top;
+ $_dash_bg_size: 1px 10px;
+ $_gradient_repeat: repeat-y;
+ $_bg_pos: $p center;
+ }
+
+ background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+ $_undershoot_color_light 50%,
+ $_undershoot_color_dark 50%);
+
+ padding-#{$p}: 1px;
+ background-size: $_dash_bg_size;
+ background-repeat: $_gradient_repeat;
+ background-origin: content-box;
+ background-position: $_bg_pos;
+ border: none;
+ box-shadow: none;
+}
diff --git a/light/gtk-4.0/apps/granite-widgets.css b/light/gtk-4.0/apps/granite-widgets.css
new file mode 100644
index 00000000..b21c119b
--- /dev/null
+++ b/light/gtk-4.0/apps/granite-widgets.css
@@ -0,0 +1,687 @@
+/********************
+ * dynamic notebook *
+ ********************/
+.dynamic-notebook {
+ background-color: shade(@theme_bg_color, 1.05);
+ background-image: none;
+}
+
+.dynamic-notebook GtkLabel,
+.dynamic-notebook GtkImage {
+ color: alpha(@theme_fg_color, 0.5);
+}
+
+.dynamic-notebook .notebook {
+ -GtkNotebook-tab-overlap: 3px;
+ -GtkNotebook-initial-gap: 12px;
+
+ border-width: 1px 0 0 0;
+ border-color: shade(@theme_bg_color, 0.8);
+ border-radius: 0;
+ padding: 0;
+}
+
+.dynamic-notebook .notebook tab {
+ padding: 3px;
+ border-width: 1px;
+ border-color: shade(@theme_bg_color, 0.9);
+ border-radius: 3px;
+ background-color: @theme_bg_color;
+ background-image: none;
+ color: @theme_fg_color;
+}
+
+.dynamic-notebook .notebook tab:active {
+ border-color: shade(@theme_bg_color, 0.8);
+ background-color: shade(@theme_bg_color, 1.05);
+ color: @theme_fg_color;
+}
+
+.dynamic-notebook .notebook tab .entry {
+ border-radius: 3px;
+ padding: 3px;
+}
+
+.dynamic-notebook .button:hover,
+.dynamic-notebook .button:hover:active,
+.dynamic-notebook .notebook .button,
+.dynamic-notebook .notebook .button:hover,
+.dynamic-notebook .notebook .button:hover:active {
+ border-color: shade(@theme_bg_color, 0.7);
+ background-color: shade(@theme_bg_color, 1.10);
+ background-image: none;
+}
+
+.dynamic-notebook .button:hover:active,
+.dynamic-notebook .notebook .button:hover:active {
+ border-color: shade(@theme_bg_color, 0.6);
+ background-color: shade(@theme_bg_color, 0.85);
+ color: shade(@theme_fg_color, 0.7);
+}
+
+.dynamic-notebook .menu GtkLabel {
+ color: @menu_fg_color;
+}
+
+/****************
+ * content view *
+ ****************/
+.content-view-window {
+ border-width: 1px;
+ border-style: solid;
+ border-color: shade(@theme_base_color, 0.8);
+ border-radius: 2px;
+ background-color:@theme_base_color;
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.content-view,
+.content-view GtkViewport {
+ background-color: @theme_base_color;
+ background-image: none;
+}
+
+.content-view * {
+ background-color: transparent;
+ background-image: none;
+}
+
+.content-view .entry {
+ background-color: @theme_base_color;
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.content-view .button {
+ border-width: 1px;
+ border-style: solid;
+ border-color: shade(@theme_base_color, 0.8);
+ border-radius: 2px;
+ background-color: shade(@theme_base_color, 1.02);
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.content-view .button:hover {
+ border-color: shade(@theme_base_color, 0.7);
+ background-color: shade(@theme_base_color, 1.10);
+ background-image: none;
+}
+
+.content-view .button:active {
+ border-color: shade(@theme_base_color, 0.6);
+ background-color: shade(@theme_base_color, 0.85);
+ background-image: none;
+}
+
+.content-view .button:active:hover {
+ border-color: shade(@theme_base_color, 0.7);
+ color: shade(@theme_text_color, 1.10);
+}
+
+.content-view .button:insensitive {
+ border-color: shade(@theme_base_color, 0.8);
+ background-color: shade(@theme_base_color, 0.95);
+ background-image: none;
+}
+
+.content-view .help_button * {
+ color: @theme_text_color;
+}
+
+.content-view .toolbar {
+ -GtkWidget-window-dragging: true;
+
+ padding: 1px;
+ border-width: 0 0 1px 0;
+ border-style: solid;
+ border-color: shade(@theme_base_color, 0.8);
+ background-color: @theme_base_color;
+ background-image: none;
+}
+
+.content-view .menu {
+ padding: 0;
+ border-radius: 0;
+ border-style: none;
+ background-color: @menu_bg_color;
+ background-image: none;
+ color: @menu_fg_color;
+}
+
+/**************
+ * sourcelist *
+ **************/
+.source-list,
+.source-list.view {
+ border-radius: 0;
+ background-color: @theme_bg_color;
+ background-image: none;
+ color: mix(@theme_fg_color, @theme_bg_color, 0.1);
+}
+
+.source-list {
+ -GtkTreeView-horizontal-separator: 1;
+ -GtkTreeView-vertical-separator: 1;
+}
+
+.source-list.view:selected,
+.source-list.view:prelight:selected {
+ border-width: 1px 0;
+ border-style: solid;
+ border-top-color: shade(@theme_bg_color, 0.85);
+ border-bottom-color: shade(@theme_bg_color, 1.12);
+ background-image: linear-gradient(to bottom,
+ shade(mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.1), 0.87),
+ shade(mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.1), 0.95) 10%,
+ shade(mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.1), 0.99) 92%,
+ shade(mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.1), 0.92)
+ );
+
+ color: mix(@theme_text_color, @theme_base_color, 0.3);
+}
+
+.source-list.view:prelight {
+ border-color: mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.3);
+ background-color: mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.3);
+ background-image: none;
+}
+
+.source-list.badge,
+.source-list.badge:prelight,
+.source-list.badge:selected,
+.source-list.badge:prelight:selected {
+ margin: 0 3px;
+ padding: 0 6px;
+ border-width: 0;
+ border-radius: 10px;
+ background-image: linear-gradient(to bottom,
+ shade(@theme_selected_bg_color, 1.1),
+ shade(@theme_selected_bg_color, 0.9)
+ );
+ color: @theme_selected_fg_color;
+}
+
+/******************
+ * no undo button *
+ ******************/
+.button.noundo,
+.content-view .button.noundo {
+ border-color: shade(@error_bg_color, 0.8);
+ background-color: shade(@error_bg_color, 1.05);
+ background-image: none;
+ color: @error_fg_color;
+}
+
+.button.noundo:hover,
+.content-view .button.noundo:hover {
+ border-color: shade(@error_bg_color, 0.7);
+ background-color: @error_bg_color;
+ background-image: none;
+}
+
+.button.noundo:active,
+.content-view .button.noundo:active {
+ border-color: shade(@error_bg_color, 0.8);
+ background-color: shade(@error_bg_color, 0.95);
+ background-image: none;
+}
+
+.button.noundo:active:hover,
+.content-view .button.noundo:active:hover {
+ border-color: shade(@error_bg_color, 0.7);
+ background-color: shade(@error_bg_color, 0.97);
+ background-image: none;
+}
+
+.button.noundo GtkLabel,
+.button.noundo Gtklabel:prelight {
+ color: @error_fg_color;
+}
+
+/**********************
+ * affirmative button *
+ **********************/
+.button.affirmative,
+.content-view .button.affirmative {
+ border-color: shade(@theme_selected_bg_color, 0.8);
+ background-color: shade(@theme_selected_bg_color, 1.05);
+ background-image: none;
+ color: @theme_selected_fg_color;
+}
+
+.button.affirmative:hover,
+.content-view .button.affirmative:hover {
+ border-color: shade(@theme_selected_bg_color, 0.7);
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+}
+
+.button.affirmative:active,
+.content-view .button.affirmative:active {
+ border-color: shade(@theme_selected_bg_color, 0.8);
+ background-color: shade(@theme_selected_bg_color, 0.95);
+ background-image: none;
+}
+
+.button.affirmative:active:hover,
+.content-view .button.affirmative:active:hover {
+ border-color: shade(@theme_selected_bg_color, 0.7);
+ background-color: shade(@theme_selected_bg_color, 0.97);
+ background-image: none;
+}
+
+.button.affirmative GtkLabel,
+.button.affirmative Gtklabel:prelight {
+ color: @theme_selected_fg_color;
+}
+
+/**********************
+ * secondary toolbars *
+ **********************/
+.secondary-toolbar.toolbar {
+ padding: 2px;
+ border-color: shade(@toolbar_bg_color, 0.8);
+ background-color: @toolbar_bg_color;
+ background-image: none;
+}
+
+.secondary-toolbar.toolbar .button {
+ border-color: shade(@toolbar_bg_color, 0.8);
+ background-color: shade(@toolbar_bg_color, 1.05);
+ background-image: none;
+ color: @toolbar_fg_color;
+}
+
+.secondary-toolbar.toolbar .button:hover {
+ border-color: shade(@toolbar_bg_color, 0.7);
+ background-color: shade(@toolbar_bg_color, 1.10);
+ background-image: none;
+}
+
+.secondary-toolbar.toolbar .button:active {
+ border-color: shade(@toolbar_bg_color, 0.8);
+ background-color: shade(@toolbar_bg_color, 0.95);
+ background-image: none;
+}
+
+.secondary-toolbar.toolbar .button:active:hover {
+ border-color: shade(@toolbar_bg_color, 0.7);
+}
+
+.secondary-toolbar.toolbar .button:focus,
+.secondary-toolbar.toolbar .button:hover:focus,
+.secondary-toolbar.toolbar .button:active:focus,
+.secondary-toolbar.toolbar .button:active:hover:focus {
+ border-color: shade(@toolbar_bg_color, 0.7);
+}
+
+.secondary-toolbar.toolbar .button:insensitive {
+ border-color: shade(@toolbar_bg_color, 0.85);
+ background-color: shade(@toolbar_bg_color, 0.9);
+ background-image: none;
+}
+
+.secondary-toolbar.toolbar .button:active *:insensitive {
+ border-color: shade(@toolbar_bg_color, 0.75);
+ background-color: shade(@toolbar_bg_color, 0.80);
+ background-image: none;
+}
+
+/*******************
+ * bottom toolbars *
+ *******************/
+.bottom-toolbar.toolbar {
+ padding: 6px;
+ border-width: 1px 0 0 0;
+ border-color: shade(@theme_bg_color, 0.8);
+ background-color: @theme_bg_color;
+ background-image: none;
+}
+
+.bottom-toolbar.toolbar .button {
+ border-color: shade(@theme_bg_color, 0.8);
+ background-color: shade(@theme_bg_color, 1.05);
+ background-image: none;
+ color: @theme_fg_color;
+}
+
+.bottom-toolbar.toolbar .button:hover {
+ border-color: shade(@theme_bg_color, 0.7);
+ background-color: shade(@theme_bg_color, 1.10);
+ background-image: none;
+}
+
+.bottom-toolbar.toolbar .button:active {
+ border-color: shade(@theme_bg_color, 0.8);
+ background-color: shade(@theme_bg_color, 0.95);
+ background-image: none;
+}
+
+.bottom-toolbar.toolbar .button:active:hover {
+ border-color: shade(@theme_bg_color, 0.7);
+}
+
+.bottom-toolbar.toolbar .button:focus,
+.bottom-toolbar.toolbar .button:hover:focus,
+.bottom-toolbar.toolbar .button:active:focus,
+.bottom-toolbar.toolbar .button:active:hover:focus {
+ border-color: shade(@theme_bg_color, 0.7);
+}
+
+.bottom-toolbar.toolbar .button:insensitive {
+ border-color: shade(@theme_bg_color, 0.85);
+ background-color: shade(@theme_bg_color, 0.9);
+ background-image: none;
+}
+
+.bottom-toolbar.toolbar .button:active *:insensitive {
+ border-color: shade(@theme_bg_color, 0.75);
+ background-color: shade(@theme_bg_color, 0.80);
+ background-image: none;
+}
+
+/*************
+ * statusbar *
+ *************/
+GraniteWidgetsStatusBar {
+ padding: 1px;
+ background-image: linear-gradient(to bottom,
+ shade(@theme_bg_color, 1.0),
+ shade(@theme_bg_color, 0.88)
+ );
+
+ box-shadow: inset 0 1px shade(@theme_bg_color, 0.8);
+}
+
+/***********
+ * popover *
+ ***********/
+GraniteWidgetsPopOver {
+ -GraniteWidgetsPopOver-arrow-width: 21;
+ -GraniteWidgetsPopOver-arrow-height: 12;
+ -GraniteWidgetsPopOver-border-radius: 5px;
+ -GraniteWidgetsPopOver-border-width: 1;
+ -GraniteWidgetsPopOver-shadow-size: 15;
+
+ margin: 0;
+ border-style: solid;
+ border-color: shade(@menu_bg_color, 0.8);
+ color: @menu_fg_color;
+}
+
+.popover_bg {
+ background-color: transparent;
+ background-image: linear-gradient(to bottom,
+ @menu_bg_color,
+ shade(@menu_bg_color, 0.98)
+ );
+}
+
+GraniteWidgetsPopOver .sidebar.view,
+GraniteWidgetsPopOver * {
+ background-color: transparent;
+ background-image: none;
+ color: @menu_fg_color;
+}
+
+GraniteWidgetsPopOver .sidebar.view:selected,
+GraniteWidgetsPopOver .sidebar.view:selected:focus,
+GraniteWidgetsPopOver *:selected,
+GraniteWidgetsPopOver *:selected:focus {
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+ color: @theme_selected_fg_color;
+}
+
+GraniteWidgetsPopOver .button {
+ border-color: shade(@menu_bg_color, 0.8);
+ background-color: shade(@menu_bg_color, 1.08);
+ background-image: none;
+ color: @menu_fg_color;
+}
+
+GraniteWidgetsPopOver .button:hover {
+ border-color: shade(@menu_bg_color, 0.7);
+ background-color: shade(@menu_bg_color, 1.10);
+ background-image: none;
+ color: shade(@menu_fg_color, 0.7);
+}
+
+GraniteWidgetsPopOver .button:active {
+ border-color: shade(@menu_bg_color, 0.8);
+ background-color: shade(@menu_bg_color, 0.95);
+ background-image: none;
+}
+
+GraniteWidgetsPopOver .button:active:hover {
+ border-color: shade(@menu_bg_color, 0.7);
+ color: shade(@menu_fg_color, 0.7);
+}
+
+/* linked buttons */
+GraniteWidgetsPopOver .linked .button {
+ box-shadow: inset -1px 0 shade(@menu_bg_color, 0.9);
+}
+
+GraniteWidgetsPopOver .linked .button:active {
+ box-shadow: inset -1px 0 shade(@menu_bg_color, 0.8),
+ inset 1px 1px alpha(@dark_shadow, 0.06),
+ inset -1px -1px alpha(@dark_shadow, 0.06);
+}
+
+GraniteWidgetsPopOver .linked .button:insensitive {
+ box-shadow: inset -1px 0 shade(@menu_bg_color, 0.8),
+ inset 1px 1px alpha(@light_shadow, 0.2);
+}
+
+GraniteWidgetsPopOver .linked .button:last-child,
+GraniteWidgetsPopOver .linked .button:only-child,
+GraniteWidgetsPopOver .linked .button:insensitive:last-child,
+GraniteWidgetsPopOver .linked .button:insensitive:only-child,
+GraniteWidgetsPopOver .linked .button:active *:insensitive:last-child,
+GraniteWidgetsPopOver .linked .button:active *:insensitive:only-child {
+ box-shadow: inset 1px 1px alpha(@light_shadow, 0.4),
+ inset -1px 0 alpha(@light_shadow, 0.4);
+}
+
+GraniteWidgetsPopOver .linked .button:active:last-child,
+GraniteWidgetsPopOver .linked .button:active:only-child {
+ box-shadow: inset 1px 1px alpha(@dark_shadow, 0.06),
+ inset -1px -1px alpha(@dark_shadow, 0.06);
+}
+
+GraniteWidgetsPopOver .entry {
+ border-color: shade(@menu_bg_color, 0.7);
+ background-color: @menu_bg_color;
+ background-image: none;
+ color: @menu_fg_color;
+}
+
+GraniteWidgetsPopOver .entry:active,
+GraniteWidgetsPopOver .entry:focus {
+ border-color: shade(@menu_bg_color, 0.7);
+}
+
+GraniteWidgetsPopOver *.separator {
+ border-color: shade(@menu_bg_color, 0.9);
+ color: transparent;
+}
+
+.button.app {
+ border-width: 0;
+ border-radius: 2px;
+ background-color: transparent;
+ background-image: none;
+}
+
+.button.app:hover {
+ border-color: shade(@theme_selected_bg_color, 0.8);
+ background-image: linear-gradient(to bottom,
+ shade(@theme_selected_bg_color, 1.1),
+ shade(@theme_selected_bg_color, 0.9)
+ );
+
+ color: @theme_selected_fg_color;
+}
+
+.button.app:focus {
+ border-color: shade(@theme_selected_bg_color, 0.8);
+ background-image: linear-gradient(to bottom,
+ shade(@theme_selected_bg_color, 1.1),
+ shade(@theme_selected_bg_color, 0.9)
+ );
+
+ color: @theme_selected_fg_color;
+}
+
+/********
+ * gala *
+ ********/
+.gala-workspaces-background {
+ border-width: 1px 0 0 0;
+ border-color: shade(@panel_bg_color, 0.8);
+ background-color: @panel_bg_color;
+ background-image: none;
+}
+
+.gala-workspace-selected {
+ border-width: 1px;
+ border-radius: 2px;
+ border-color: shade(@theme_selected_bg_color, 0.9);
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+}
+
+/*********
+ * files *
+ *********/
+.files-overlay-bar {
+ margin: 3px;
+ padding: 3px 6px;
+ border-width: 1px;
+ border-color: shade(@theme_base_color, 0.7);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ shade(@theme_bg_color, 1.1),
+ shade(@theme_bg_color, 0.9)
+ );
+}
+
+.files-overlay-bar GtkLabel {
+ color: @theme_text_color;
+}
+
+/*********
+ * noise *
+ *********/
+.album-list-view,
+.album-list-view * {
+ border-color: shade(@theme_base_color, 0.7);
+ border-radius: 0;
+ background-color: @theme_base_color;
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.album-list-view GtkTreeView {
+ -GtkTreeView-vertical-separator: 1;
+ -GtkTreeView-grid-line-width: 0;
+
+ background-color: @theme_base_color;
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.album-list-view GtkTreeView row:nth-child(even) {
+ border-width: 0;
+ border-style: none;
+ background-color: shade(@theme_base_color, 0.9);
+ background-image: none;
+}
+
+
+.album-list-view GtkTreeView row:nth-child(odd) {
+ border-width: 0;
+ border-style: none;
+ background-color: shade(@theme_base_color, 1.0);
+ background-image: none;
+}
+
+.album-list-view GtkTreeView row:selected {
+ background-color: @selected_bg_color;
+ background-image: none;
+ color: @selected_fg_color;
+}
+
+/**********
+ * birdie *
+ **********/
+BirdieWidgetsTweetList * {
+ background-color: transparent;
+ background-image: none;
+}
+
+/*********
+ * tweet *
+ *********/
+.tweet {
+ padding: 0;
+}
+
+/**********
+ * notify *
+ **********/
+.notify {
+ border-width: 1px;
+ border-style: solid;
+ border-color: shade(@theme_base_color, 0.7);
+ border-radius: 2px;
+ background-color: @theme_base_color;
+ background-image: none;
+ color: @theme_text_color;
+}
+
+.notify .low {
+}
+
+.notify .critical {
+}
+
+/*********
+ * panel *
+ *********/
+.panel {
+ background-color: @panel_bg_color;
+ background-image: none;
+ color: @panel_fg_color;
+ font: bold;
+}
+
+.panel .menubar .menuitem {
+ padding: 1px 3px;
+}
+
+.shadow {
+ background-color: transparent;
+ background-image: linear-gradient(to bottom,
+ rgba(0, 0, 0, 0.3),
+ transparent
+ );
+}
+
+.composited-indicator,
+.wingpanel-app-button,
+.wingpanel-indicator-button {
+ padding: 0 2px;
+ background-color: transparent;
+ background-image: none;
+ color: @panel_fg_color;
+}
+
+.composited-indicator.menuitem:active,
+.composited-indicator.menuitem:prelight {
+ border-style: none;
+ background-image: none;
+}
diff --git a/light/gtk-4.0/apps/lightdm-unity-greeter.css b/light/gtk-4.0/apps/lightdm-unity-greeter.css
new file mode 100644
index 00000000..c0dd6f8a
--- /dev/null
+++ b/light/gtk-4.0/apps/lightdm-unity-greeter.css
@@ -0,0 +1,67 @@
+.lightdm.menu {
+ background-image: none;
+ background-color: alpha(black, 0.6);
+ border-color: alpha(white, 0.2);
+ border-radius: 3px;
+ padding: 1px;
+ color: white;
+}
+
+.lightdm-combo .menu {
+ background-color: alpha(black, 0.6);
+ border-radius: 0;
+ padding: 0;
+ color: white;
+}
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+ color: white;
+}
+
+.lightdm.menubar {
+ background-image: none;
+ background-color: alpha(black, 0.5);
+}
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+ background-image: none;
+ background-color: alpha(black, 0.3);
+ border-color: alpha(white, 0.6);
+ border-radius: 3px;
+ padding: 7px;
+ color: white;
+ text-shadow: none;
+}
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focus,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focus {
+ background-image: none;
+}
+
+.lightdm.button:focus,
+.lightdm.entry:focus {
+ border-color: alpha(white, 0.9);
+ color: white;
+}
+
+@keyframes dashentry_spinner {
+ to { -gtk-icon-transform: rotate(1turn); }
+}
+
+.lightdm.entry:active {
+ -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+ animation: dashentry_spinner 1s infinite linear;
+}
diff --git a/light/gtk-4.0/assets/bullet-symbolic.svg b/light/gtk-4.0/assets/bullet-symbolic.svg
new file mode 100644
index 00000000..c0299734
--- /dev/null
+++ b/light/gtk-4.0/assets/bullet-symbolic.svg
@@ -0,0 +1,155 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/bullet-symbolic.symbolic.png b/light/gtk-4.0/assets/bullet-symbolic.symbolic.png
new file mode 100644
index 00000000..2ccb0e86
Binary files /dev/null and b/light/gtk-4.0/assets/bullet-symbolic.symbolic.png differ
diff --git a/light/gtk-4.0/assets/check-symbolic.svg b/light/gtk-4.0/assets/check-symbolic.svg
new file mode 100644
index 00000000..bac5cd6a
--- /dev/null
+++ b/light/gtk-4.0/assets/check-symbolic.svg
@@ -0,0 +1,154 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/check-symbolic.symbolic.png b/light/gtk-4.0/assets/check-symbolic.symbolic.png
new file mode 100644
index 00000000..eed1f45a
Binary files /dev/null and b/light/gtk-4.0/assets/check-symbolic.symbolic.png differ
diff --git a/light/gtk-4.0/assets/checkbox-active-selectionmode.png b/light/gtk-4.0/assets/checkbox-active-selectionmode.png
new file mode 100644
index 00000000..283ae530
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-active-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-backdrop-selectionmode.png b/light/gtk-4.0/assets/checkbox-backdrop-selectionmode.png
new file mode 100644
index 00000000..ad60a994
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-backdrop-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-checked-active-selectionmode.png b/light/gtk-4.0/assets/checkbox-checked-active-selectionmode.png
new file mode 100644
index 00000000..2f21288b
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-checked-active-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-checked-backdrop-selectionmode.png b/light/gtk-4.0/assets/checkbox-checked-backdrop-selectionmode.png
new file mode 100644
index 00000000..f29b8016
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-checked-backdrop-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-checked-hover-selectionmode.png b/light/gtk-4.0/assets/checkbox-checked-hover-selectionmode.png
new file mode 100644
index 00000000..a6af0f7c
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-checked-hover-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-checked-insensitive.png b/light/gtk-4.0/assets/checkbox-checked-insensitive.png
new file mode 100644
index 00000000..f29b8016
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-checked-insensitive.png differ
diff --git a/light/gtk-4.0/assets/checkbox-hover-selectionmode.png b/light/gtk-4.0/assets/checkbox-hover-selectionmode.png
new file mode 100644
index 00000000..283ae530
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-hover-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-mixed-hover.png b/light/gtk-4.0/assets/checkbox-mixed-hover.png
new file mode 100644
index 00000000..35ceac10
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-mixed-hover.png differ
diff --git a/light/gtk-4.0/assets/checkbox-mixed-insensitive.png b/light/gtk-4.0/assets/checkbox-mixed-insensitive.png
new file mode 100644
index 00000000..118d253f
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-mixed-insensitive.png differ
diff --git a/light/gtk-4.0/assets/checkbox-mixed.png b/light/gtk-4.0/assets/checkbox-mixed.png
new file mode 100644
index 00000000..7b266a19
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-mixed.png differ
diff --git a/light/gtk-4.0/assets/checkbox-selectionmode.png b/light/gtk-4.0/assets/checkbox-selectionmode.png
new file mode 100644
index 00000000..283ae530
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-selectionmode.png differ
diff --git a/light/gtk-4.0/assets/checkbox-unchecked-insensitive.png b/light/gtk-4.0/assets/checkbox-unchecked-insensitive.png
new file mode 100644
index 00000000..ad60a994
Binary files /dev/null and b/light/gtk-4.0/assets/checkbox-unchecked-insensitive.png differ
diff --git a/light/gtk-4.0/assets/dash-symbolic.svg b/light/gtk-4.0/assets/dash-symbolic.svg
new file mode 100644
index 00000000..7886d541
--- /dev/null
+++ b/light/gtk-4.0/assets/dash-symbolic.svg
@@ -0,0 +1,153 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/dash-symbolic.symbolic.png b/light/gtk-4.0/assets/dash-symbolic.symbolic.png
new file mode 100644
index 00000000..c20d4bac
Binary files /dev/null and b/light/gtk-4.0/assets/dash-symbolic.symbolic.png differ
diff --git a/light/gtk-4.0/assets/grid-selection-checked.png b/light/gtk-4.0/assets/grid-selection-checked.png
new file mode 100644
index 00000000..d140eebf
Binary files /dev/null and b/light/gtk-4.0/assets/grid-selection-checked.png differ
diff --git a/light/gtk-4.0/assets/grid-selection-unchecked.png b/light/gtk-4.0/assets/grid-selection-unchecked.png
new file mode 100644
index 00000000..318f4176
Binary files /dev/null and b/light/gtk-4.0/assets/grid-selection-unchecked.png differ
diff --git a/light/gtk-4.0/assets/pane-separator-vertical.png b/light/gtk-4.0/assets/pane-separator-vertical.png
new file mode 100644
index 00000000..060cf031
Binary files /dev/null and b/light/gtk-4.0/assets/pane-separator-vertical.png differ
diff --git a/light/gtk-4.0/assets/pane-separator.png b/light/gtk-4.0/assets/pane-separator.png
new file mode 100644
index 00000000..616ec909
Binary files /dev/null and b/light/gtk-4.0/assets/pane-separator.png differ
diff --git a/light/gtk-4.0/assets/resize-grip.png b/light/gtk-4.0/assets/resize-grip.png
new file mode 100644
index 00000000..4aabef3b
Binary files /dev/null and b/light/gtk-4.0/assets/resize-grip.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-active-dark.png b/light/gtk-4.0/assets/titlebutton-close-active-dark.png
new file mode 100644
index 00000000..6add62f7
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-active-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-active-dark@2.png b/light/gtk-4.0/assets/titlebutton-close-active-dark@2.png
new file mode 100644
index 00000000..d4cb6dd8
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-active-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-active-dark@2.svg b/light/gtk-4.0/assets/titlebutton-close-active-dark@2.svg
new file mode 100644
index 00000000..9ac17596
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-active-dark@2.svg
@@ -0,0 +1,130 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/titlebutton-close-active.png b/light/gtk-4.0/assets/titlebutton-close-active.png
new file mode 100644
index 00000000..bdba751b
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-active.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-active@2.png b/light/gtk-4.0/assets/titlebutton-close-active@2.png
new file mode 100644
index 00000000..632113fb
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-active@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-active@2.svg b/light/gtk-4.0/assets/titlebutton-close-active@2.svg
new file mode 100644
index 00000000..bf439ce8
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-active@2.svg
@@ -0,0 +1,145 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/titlebutton-close-backdrop-dark.png b/light/gtk-4.0/assets/titlebutton-close-backdrop-dark.png
new file mode 120000
index 00000000..2ecf5c51
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-backdrop-dark.png
@@ -0,0 +1 @@
+titlebutton-close-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-backdrop-dark@2.png b/light/gtk-4.0/assets/titlebutton-close-backdrop-dark@2.png
new file mode 120000
index 00000000..192233bb
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-backdrop-dark@2.png
@@ -0,0 +1 @@
+titlebutton-close-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-backdrop.png b/light/gtk-4.0/assets/titlebutton-close-backdrop.png
new file mode 120000
index 00000000..097102ee
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-backdrop.png
@@ -0,0 +1 @@
+titlebutton-close.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-backdrop@2.png b/light/gtk-4.0/assets/titlebutton-close-backdrop@2.png
new file mode 120000
index 00000000..d3b43d17
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-backdrop@2.png
@@ -0,0 +1 @@
+titlebutton-close@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-dark.png b/light/gtk-4.0/assets/titlebutton-close-dark.png
new file mode 100644
index 00000000..eb3b1819
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-dark@2.png b/light/gtk-4.0/assets/titlebutton-close-dark@2.png
new file mode 100644
index 00000000..8482385a
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-dark@2.svg b/light/gtk-4.0/assets/titlebutton-close-dark@2.svg
new file mode 100644
index 00000000..f1e5978e
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-dark@2.svg
@@ -0,0 +1,123 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/titlebutton-close-hover-dark.png b/light/gtk-4.0/assets/titlebutton-close-hover-dark.png
new file mode 120000
index 00000000..2ecf5c51
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-hover-dark.png
@@ -0,0 +1 @@
+titlebutton-close-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-hover-dark@2.png b/light/gtk-4.0/assets/titlebutton-close-hover-dark@2.png
new file mode 120000
index 00000000..192233bb
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-hover-dark@2.png
@@ -0,0 +1 @@
+titlebutton-close-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-close-hover.png b/light/gtk-4.0/assets/titlebutton-close-hover.png
new file mode 100644
index 00000000..b962c9ad
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-hover.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-hover@2.png b/light/gtk-4.0/assets/titlebutton-close-hover@2.png
new file mode 100644
index 00000000..6b507c05
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close-hover@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close-hover@2.svg b/light/gtk-4.0/assets/titlebutton-close-hover@2.svg
new file mode 100644
index 00000000..3c44d97d
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close-hover@2.svg
@@ -0,0 +1,100 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/titlebutton-close.png b/light/gtk-4.0/assets/titlebutton-close.png
new file mode 100644
index 00000000..d11e432d
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close@2.png b/light/gtk-4.0/assets/titlebutton-close@2.png
new file mode 100644
index 00000000..deba07e8
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-close@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-close@2.svg b/light/gtk-4.0/assets/titlebutton-close@2.svg
new file mode 100644
index 00000000..76117634
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-close@2.svg
@@ -0,0 +1,100 @@
+
+
+
+
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-active-dark.png b/light/gtk-4.0/assets/titlebutton-maximize-active-dark.png
new file mode 100644
index 00000000..160ae8df
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-active-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-active-dark@2.png b/light/gtk-4.0/assets/titlebutton-maximize-active-dark@2.png
new file mode 100644
index 00000000..407b189f
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-active-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-active.png b/light/gtk-4.0/assets/titlebutton-maximize-active.png
new file mode 100644
index 00000000..e42c7462
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-active.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-active@2.png b/light/gtk-4.0/assets/titlebutton-maximize-active@2.png
new file mode 100644
index 00000000..a824618d
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-active@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark.png b/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark.png
new file mode 120000
index 00000000..79b54681
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark.png
@@ -0,0 +1 @@
+titlebutton-maximize-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark@2.png b/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark@2.png
new file mode 120000
index 00000000..a1263c60
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-backdrop-dark@2.png
@@ -0,0 +1 @@
+titlebutton-maximize-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-backdrop.png b/light/gtk-4.0/assets/titlebutton-maximize-backdrop.png
new file mode 120000
index 00000000..020844a0
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-backdrop.png
@@ -0,0 +1 @@
+titlebutton-maximize.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-backdrop@2.png b/light/gtk-4.0/assets/titlebutton-maximize-backdrop@2.png
new file mode 120000
index 00000000..3f6ef947
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-backdrop@2.png
@@ -0,0 +1 @@
+titlebutton-maximize@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-dark.png b/light/gtk-4.0/assets/titlebutton-maximize-dark.png
new file mode 100644
index 00000000..e7de6093
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-dark@2.png b/light/gtk-4.0/assets/titlebutton-maximize-dark@2.png
new file mode 100644
index 00000000..655fc309
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-hover-dark.png b/light/gtk-4.0/assets/titlebutton-maximize-hover-dark.png
new file mode 120000
index 00000000..79b54681
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-hover-dark.png
@@ -0,0 +1 @@
+titlebutton-maximize-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-hover-dark@2.png b/light/gtk-4.0/assets/titlebutton-maximize-hover-dark@2.png
new file mode 120000
index 00000000..a1263c60
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-maximize-hover-dark@2.png
@@ -0,0 +1 @@
+titlebutton-maximize-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-hover.png b/light/gtk-4.0/assets/titlebutton-maximize-hover.png
new file mode 100644
index 00000000..a351489c
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-hover.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize-hover@2.png b/light/gtk-4.0/assets/titlebutton-maximize-hover@2.png
new file mode 100644
index 00000000..239ec52e
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize-hover@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize.png b/light/gtk-4.0/assets/titlebutton-maximize.png
new file mode 100644
index 00000000..68ada5a2
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-maximize@2.png b/light/gtk-4.0/assets/titlebutton-maximize@2.png
new file mode 100644
index 00000000..83f440cd
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-maximize@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-active-dark.png b/light/gtk-4.0/assets/titlebutton-minimize-active-dark.png
new file mode 100644
index 00000000..7adaee32
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-active-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-active-dark@2.png b/light/gtk-4.0/assets/titlebutton-minimize-active-dark@2.png
new file mode 100644
index 00000000..d118a56f
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-active-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-active.png b/light/gtk-4.0/assets/titlebutton-minimize-active.png
new file mode 100644
index 00000000..8a1b0710
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-active.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-active@2.png b/light/gtk-4.0/assets/titlebutton-minimize-active@2.png
new file mode 100644
index 00000000..9778a9a6
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-active@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark.png b/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark.png
new file mode 120000
index 00000000..3777af88
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark.png
@@ -0,0 +1 @@
+titlebutton-minimize-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark@2.png b/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark@2.png
new file mode 120000
index 00000000..e6c9e756
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-backdrop-dark@2.png
@@ -0,0 +1 @@
+titlebutton-minimize-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-backdrop.png b/light/gtk-4.0/assets/titlebutton-minimize-backdrop.png
new file mode 120000
index 00000000..496fa6a9
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-backdrop.png
@@ -0,0 +1 @@
+titlebutton-minimize.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-backdrop@2.png b/light/gtk-4.0/assets/titlebutton-minimize-backdrop@2.png
new file mode 120000
index 00000000..9eab4152
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-backdrop@2.png
@@ -0,0 +1 @@
+titlebutton-minimize@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-dark.png b/light/gtk-4.0/assets/titlebutton-minimize-dark.png
new file mode 100644
index 00000000..102b6e83
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-dark.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-dark@2.png b/light/gtk-4.0/assets/titlebutton-minimize-dark@2.png
new file mode 100644
index 00000000..60f950e5
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-dark@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-hover-dark.png b/light/gtk-4.0/assets/titlebutton-minimize-hover-dark.png
new file mode 120000
index 00000000..3777af88
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-hover-dark.png
@@ -0,0 +1 @@
+titlebutton-minimize-dark.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-hover-dark@2.png b/light/gtk-4.0/assets/titlebutton-minimize-hover-dark@2.png
new file mode 120000
index 00000000..e6c9e756
--- /dev/null
+++ b/light/gtk-4.0/assets/titlebutton-minimize-hover-dark@2.png
@@ -0,0 +1 @@
+titlebutton-minimize-dark@2.png
\ No newline at end of file
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-hover.png b/light/gtk-4.0/assets/titlebutton-minimize-hover.png
new file mode 100644
index 00000000..4c44d6ae
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-hover.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize-hover@2.png b/light/gtk-4.0/assets/titlebutton-minimize-hover@2.png
new file mode 100644
index 00000000..75889dc0
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize-hover@2.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize.png b/light/gtk-4.0/assets/titlebutton-minimize.png
new file mode 100644
index 00000000..49b6385d
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize.png differ
diff --git a/light/gtk-4.0/assets/titlebutton-minimize@2.png b/light/gtk-4.0/assets/titlebutton-minimize@2.png
new file mode 100644
index 00000000..6740a6cf
Binary files /dev/null and b/light/gtk-4.0/assets/titlebutton-minimize@2.png differ
diff --git a/light/gtk-4.0/gtk-contained-dark.scss b/light/gtk-4.0/gtk-contained-dark.scss
new file mode 100644
index 00000000..1277d416
--- /dev/null
+++ b/light/gtk-4.0/gtk-contained-dark.scss
@@ -0,0 +1,7 @@
+$variant: 'dark';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
+@import 'gnome-apps';
diff --git a/light/gtk-4.0/gtk-contained.scss b/light/gtk-4.0/gtk-contained.scss
new file mode 100644
index 00000000..ee5e2028
--- /dev/null
+++ b/light/gtk-4.0/gtk-contained.scss
@@ -0,0 +1,12 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+// you need a subtle shade
+// - if you need to inverse a color function use the @if directive to match for dark $variant
+
+$variant: 'light';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
diff --git a/light/gtk-4.0/gtk-dark.scss b/light/gtk-4.0/gtk-dark.scss
new file mode 100644
index 00000000..ee2e037b
--- /dev/null
+++ b/light/gtk-4.0/gtk-dark.scss
@@ -0,0 +1,6 @@
+$variant: 'dark';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
\ No newline at end of file
diff --git a/light/gtk-4.0/gtk.gresource.xml b/light/gtk-4.0/gtk.gresource.xml
new file mode 100644
index 00000000..7b7411e7
--- /dev/null
+++ b/light/gtk-4.0/gtk.gresource.xml
@@ -0,0 +1,37 @@
+
+
+
+ assets/bullet-symbolic.svg
+ assets/bullet-symbolic.symbolic.png
+ assets/checkbox-active-selectionmode.png
+ assets/checkbox-backdrop-selectionmode.png
+ assets/checkbox-checked-active-selectionmode.png
+ assets/checkbox-checked-backdrop-selectionmode.png
+ assets/checkbox-checked-hover-selectionmode.png
+ assets/checkbox-checked-insensitive.png
+ assets/checkbox-hover-selectionmode.png
+ assets/checkbox-mixed-hover.png
+ assets/checkbox-mixed-insensitive.png
+ assets/checkbox-mixed.png
+ assets/checkbox-selectionmode.png
+ assets/checkbox-unchecked-insensitive.png
+ assets/check-symbolic.svg
+ assets/check-symbolic.symbolic.png
+ assets/dash-symbolic.svg
+ assets/dash-symbolic.symbolic.png
+ assets/grid-selection-checked.png
+ assets/grid-selection-unchecked.png
+ assets/pane-separator.png
+ assets/pane-separator-vertical.png
+ assets/resize-grip.png
+ assets/titlebutton-close-active.png
+ assets/titlebutton-close-hover.png
+ assets/titlebutton-close.png
+ assets/titlebutton-maximize-active.png
+ assets/titlebutton-maximize-hover.png
+ assets/titlebutton-maximize.png
+ assets/titlebutton-minimize-active.png
+ assets/titlebutton-minimize-hover.png
+ assets/titlebutton-minimize.png
+
+
diff --git a/light/gtk-4.0/gtk.scss b/light/gtk-4.0/gtk.scss
new file mode 100644
index 00000000..b1ed558e
--- /dev/null
+++ b/light/gtk-4.0/gtk.scss
@@ -0,0 +1,6 @@
+$variant: 'light';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';
\ No newline at end of file
diff --git a/light/gtk-4.0/meson.build b/light/gtk-4.0/meson.build
new file mode 100644
index 00000000..559a7caa
--- /dev/null
+++ b/light/gtk-4.0/meson.build
@@ -0,0 +1,35 @@
+gtk4_dir = join_paths(theme_path, 'gtk-4.0')
+
+# theme sources .scss files
+
+# The files that need to be compiled
+gtk4_scss_sources = [
+ 'gtk',
+ 'gtk-dark'
+]
+
+# Dependencies of the files that need to be compiled
+gtk4_scss_dependencies = [
+ '_colors-public.scss',
+ '_colors.scss',
+ '_common.scss',
+ '_drawing.scss',
+]
+
+# Generate .css files and install
+gtk4_scss_dependencies = files(gtk4_scss_dependencies)
+#
+foreach f : gtk4_scss_sources
+ custom_target('greybird-generate_' + f,
+ input: f + '.scss',
+ output: f + '.css',
+ depend_files: gtk4_scss_dependencies,
+ command: [sassc, '-M', '-t', 'compact', '@INPUT@', '@OUTPUT@'],
+ build_by_default: true,
+ install: true,
+ install_dir: gtk4_dir,
+ )
+endforeach
+
+# Install asset files to themes/ThemeName/gtk-4.0/assets
+install_subdir('assets', install_dir : gtk4_dir, strip_directory : false)
\ No newline at end of file
diff --git a/light/gtk-4.0/settings.ini b/light/gtk-4.0/settings.ini
new file mode 100644
index 00000000..9aa01e55
--- /dev/null
+++ b/light/gtk-4.0/settings.ini
@@ -0,0 +1,3 @@
+[Settings]
+gtk-auto-mnemonics = 1
+gtk-visible-focus = automatic
diff --git a/light/meson.build b/light/meson.build
index 510533f0..83a78558 100644
--- a/light/meson.build
+++ b/light/meson.build
@@ -3,60 +3,9 @@ a11y_theme_path = join_paths(get_option('datadir'), 'themes/Greybird-accessibili
compact_theme_path = join_paths(get_option('datadir'), 'themes/Greybird-compact')
bright_theme_path = join_paths(get_option('datadir'), 'themes/Greybird-bright')
-#
-# GTK+-3.0 Files
-#
-scss_files = files([
- 'gtk-3.0/_colors-public.scss',
- 'gtk-3.0/_colors.scss',
- 'gtk-3.0/_common.scss',
- 'gtk-3.0/_drawing.scss',
- 'gtk-3.0/_gnome-apps.scss',
- 'gtk-3.0/_lightdm-gtk-greeter.scss',
- 'gtk-3.0/_others.scss',
- 'gtk-3.0/_unity.scss',
- 'gtk-3.0/_xfce.scss'
-])
-
-#
-# Installing
-#
-
-# index.theme, always install this
-install_data('index.theme', install_dir : theme_path)
-
-# gtk3 stuff, also always install this
-install_subdir('gtk-3.0/assets', install_dir: theme_path / 'gtk-3.0')
-install_subdir('gtk-3.0/apps', install_dir: theme_path / 'gtk-3.0')
-install_data('gtk-3.0/settings.ini', install_dir : join_paths(theme_path, 'gtk-3.0'))
-theme_deps += custom_target('Greybird',
- input: 'gtk-3.0/gtk-contained.scss',
- output: 'gtk.css',
- command: [
- sassc, sassc_opts, '@INPUT@', '@OUTPUT@'
- ],
- depend_files: scss_files,
- build_by_default: true,
- install: true,
- install_dir: join_paths(theme_path, 'gtk-3.0'))
-
-theme_deps += custom_target('Greybird-Dark',
- input: 'gtk-3.0/gtk-contained-dark.scss',
- output: 'gtk-dark.css',
- command: [
- sassc, sassc_opts, '@INPUT@', '@OUTPUT@'
- ],
- depend_files: scss_files,
- build_by_default: true,
- install: true,
- install_dir: join_paths(theme_path, 'gtk-3.0'))
-
-gtk_light_gresources = gnome.compile_resources('gtk', 'gtk-3.0/gtk.gresource.xml',
- source_dir: join_paths(meson.source_root(), 'light/gtk-3.0'),
- install: true,
- gresource_bundle: true,
- install_dir: join_paths(theme_path, 'gtk-3.0'))
+subdir('gtk-3.0')
+subdir('gtk-4.0')
# we don't want to install these in the flatpak
if not get_option('flatpak')