├── .gitignore ├── LICENSE ├── README.md ├── images ├── preview-customized.png ├── preview-dark.png └── preview-light.png ├── meson.build ├── scripts ├── parse-sass.sh └── render-assets.sh ├── snap └── snapcraft.yaml ├── src ├── README.md ├── assets.svg ├── assets.txt ├── assets │ ├── bullet-symbolic.svg │ ├── bullet-symbolic.symbolic.png │ ├── bullet@2-symbolic.symbolic.png │ ├── check-symbolic.svg │ ├── check-symbolic.symbolic.png │ ├── check@2-symbolic.symbolic.png │ ├── dash-symbolic.svg │ ├── dash-symbolic.symbolic.png │ ├── dash@2-symbolic.symbolic.png │ ├── devel-symbolic.svg │ ├── slider-horz-scale-has-marks-above-dark.png │ ├── slider-horz-scale-has-marks-above-dark@2.png │ ├── slider-horz-scale-has-marks-above-disabled-dark.png │ ├── slider-horz-scale-has-marks-above-disabled-dark@2.png │ ├── slider-horz-scale-has-marks-above-disabled.png │ ├── slider-horz-scale-has-marks-above-disabled@2.png │ ├── slider-horz-scale-has-marks-above.png │ ├── slider-horz-scale-has-marks-above@2.png │ ├── slider-horz-scale-has-marks-below-dark.png │ ├── slider-horz-scale-has-marks-below-dark@2.png │ ├── slider-horz-scale-has-marks-below-disabled-dark.png │ ├── slider-horz-scale-has-marks-below-disabled-dark@2.png │ ├── slider-horz-scale-has-marks-below-disabled.png │ ├── slider-horz-scale-has-marks-below-disabled@2.png │ ├── slider-horz-scale-has-marks-below.png │ ├── slider-horz-scale-has-marks-below@2.png │ ├── slider-vert-scale-has-marks-above-dark.png │ ├── slider-vert-scale-has-marks-above-dark@2.png │ ├── slider-vert-scale-has-marks-above-disabled-dark.png │ ├── slider-vert-scale-has-marks-above-disabled-dark@2.png │ ├── slider-vert-scale-has-marks-above-disabled.png │ ├── slider-vert-scale-has-marks-above-disabled@2.png │ ├── slider-vert-scale-has-marks-above.png │ ├── slider-vert-scale-has-marks-above@2.png │ ├── slider-vert-scale-has-marks-below-dark.png │ ├── slider-vert-scale-has-marks-below-dark@2.png │ ├── slider-vert-scale-has-marks-below-disabled-dark.png │ ├── slider-vert-scale-has-marks-below-disabled-dark@2.png │ ├── slider-vert-scale-has-marks-below-disabled.png │ ├── slider-vert-scale-has-marks-below-disabled@2.png │ ├── slider-vert-scale-has-marks-below.png │ ├── slider-vert-scale-has-marks-below@2.png │ ├── text-select-end-dark.png │ ├── text-select-end-dark@2.png │ ├── text-select-end.png │ ├── text-select-end@2.png │ ├── text-select-start-dark.png │ ├── text-select-start-dark@2.png │ ├── text-select-start.png │ └── text-select-start@2.png ├── index.theme.in ├── meson.build ├── sass │ ├── _apps.scss │ ├── _colors-public.scss │ ├── _colors.scss │ ├── _common.scss │ ├── _defaults.scss │ ├── _drawing.scss │ ├── _functions.scss │ ├── _libgranite.scss │ ├── _libhandy.scss │ ├── _modules.scss │ ├── _palette.scss │ ├── _settings.scss │ ├── gtk-dark.scss │ ├── gtk.scss │ ├── gtk4 │ │ ├── libadwaita-tweaks.scss │ │ ├── theme-dark.scss │ │ └── theme-light.scss │ └── widgets │ │ ├── _app-notification.scss │ │ ├── _buttons.scss │ │ ├── _calendar.scss │ │ ├── _checks.scss │ │ ├── _color-chooser.scss │ │ ├── _combo-box.scss │ │ ├── _entries.scss │ │ ├── _expander.scss │ │ ├── _file-chooser.scss │ │ ├── _frame.scss │ │ ├── _header-bar.scss │ │ ├── _info-bar.scss │ │ ├── _labels.scss │ │ ├── _level-bar.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _menus.scss │ │ ├── _message-dialog.scss │ │ ├── _misc.scss │ │ ├── _notebook.scss │ │ ├── _paned.scss │ │ ├── _pathbar.scss │ │ ├── _popovers.scss │ │ ├── _print-dialog.scss │ │ ├── _progress-bar.scss │ │ ├── _scale.scss │ │ ├── _scrolling.scss │ │ ├── _sidebars.scss │ │ ├── _spin-button.scss │ │ ├── _spinner.scss │ │ ├── _switch.scss │ │ ├── _toolbars.scss │ │ ├── _tooltip.scss │ │ ├── _treeviews.scss │ │ ├── _views.scss │ │ └── _window.scss ├── theme-dark │ ├── gtk4 │ │ ├── gtk-dark.css │ │ ├── gtk.css │ │ └── libadwaita.css │ ├── meson.build │ └── thumbnail-dark.png └── theme-light │ ├── gtk4 │ ├── gtk-dark.css │ ├── gtk.css │ └── libadwaita.css │ ├── meson.build │ └── thumbnail-light.png └── version /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore Backup Copies from Text Editor 2 | *~ 3 | .goutputstream-* 4 | 5 | # Ignore meson build directory 6 | build 7 | 8 | # Ignore parsed CSS files 9 | src/*.css 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # adw-gtk3 4 | An unofficial GTK3 port of [libadwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/). 5 | 6 | *This port does not claim to be a 100% look-a-like of libadwaita. There are some limitations to what GTK3 can do.* 7 | 8 |
9 | 10 |

11 | How To Use • 12 | Customization • 13 | Related Projects • 14 | Credits 15 |

16 | 17 |
18 | 19 | | Light theme | Dark theme | 20 | |:-----------:|:----------:| 21 | | ![adw-gtk3-light](images/preview-light.png?raw=true) | ![adw-gtk3-dark](images/preview-dark.png?raw=true) | 22 | 23 | *Wallpapers: [here](https://i.imgur.com/kU8D1nV.png) and [here](https://old.reddit.com/r/wallpaper/comments/1f8hlcr/wavy_mountain_3840x2160/)* 24 | 25 |
26 | 27 |
28 | 29 | ## How to Use 30 | 31 |
32 | 33 |
34 | 35 | | Tarball | Repository | Flatpak | Source | Snap/Ubuntu | 36 | |:---:|:---:|:---:|:---:|:---:| 37 | | 📦 [Download](https://github.com/lassekongo83/adw-gtk3/releases/latest) | ⬇️ [See info below](#repositories) | 📦 [See info below](#flatpak) | 🔧 [More information](src/README.md) | 📦 [See info below](#snap) 38 | 39 | If you download the tarball, then extract the content of the file to: `~/.local/share/themes/` 40 | 41 |
42 | 43 | ### Repositories 44 | On some distributions you can install the theme with the package manager. 45 | 46 |
47 | 48 | | Distribution | Command/Info | 49 | |:--|:--| 50 | | Fedora |`dnf install adw-gtk3-theme` | 51 | | Arch | `pacman -S adw-gtk-theme` | 52 | | Manjaro | `pamac install adw-gtk3` | 53 | | Debian | [3rd party repo](https://gitlab.com/julianfairfax/package-repo#how-to-add-repository-for-debian-based-linux-distributions) | 54 | 55 | These are maintained by [contributors](#credits). 56 | 57 |
58 | 59 | ### Flatpak 60 | Flatpak applications will not be styled unless you choose **one** of the installation options below. 61 | 62 | * Install themes from Flathub: 63 | * Does not work with non-libadwaita GTK4 apps. 64 | 65 | ```bash 66 | flatpak install org.gtk.Gtk3theme.adw-gtk3 org.gtk.Gtk3theme.adw-gtk3-dark 67 | ``` 68 | 69 | * Use flatpak override: 70 | * Works with non-libadwaita GTK4 apps if the theme is installed in `~/.local/share/themes` 71 | 72 | ```bash 73 | sudo flatpak override --filesystem=xdg-data/themes 74 | sudo flatpak mask org.gtk.Gtk3theme.adw-gtk3 75 | sudo flatpak mask org.gtk.Gtk3theme.adw-gtk3-dark 76 | ``` 77 | 78 | ### Snap 79 | 80 | Snap apps only use themes that are provided by a theme Snap. 81 | * You can install the Snap version via the Snap Store or using this command: 82 | ```bash 83 | sudo snap install gtk-theme-adw-gtk3 84 | ``` 85 | 86 | The official version of adw-gtk3 can be viewed by clicking the button below. 87 | 88 | 89 | Get it from the Snap Store 90 | 91 | 92 | 93 | #### How to activate the theme 94 | 95 | 1. Install `gnome-tweaks` and set the theme under *Appearance > Legacy Applications*. For dark themes, adjust in `gnome-control-center` > *Appearance*. 96 | 2. Optional: You can also use `gsettings` to switch themes: 97 | 98 | Light theme: 99 | ```bash 100 | gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3' && gsettings set org.gnome.desktop.interface color-scheme 'default' 101 | ``` 102 | Dark theme: 103 | ```bash 104 | gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3-dark' && gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark' 105 | ``` 106 | Revert to default: 107 | ```bash 108 | gsettings set org.gnome.desktop.interface gtk-theme 'Adwaita' && gsettings set org.gnome.desktop.interface color-scheme 'default' 109 | ``` 110 | 111 |
112 | 113 | ## Customization 114 | Adw-gtk3 and libadwaita can be customized with GTK named colors. See [adw-colors](https://github.com/lassekongo83/adw-colors) for more info. 115 | 116 | If you want to change the accent color for most applications in GNOME 47 or later, you can use a small CLI program [accent-color-change](https://github.com/lassekongo83/adw-colors/tree/main/accent-color-change). 117 | 118 | ![adw-gtk3-customized](images/preview-customized.png?raw=true) 119 | 120 | *Wallpaper: [here](https://i.imgur.com/ZbyNlmh.png)* | *Customization: [Peninsula-dark](https://github.com/lassekongo83/adw-colors/tree/main/themes/Peninsula-dark)* 121 | 122 |
123 | 124 |
125 | 126 | ## Related Projects 127 | 128 |
129 | 130 |
131 | 132 | | Software | URL | 133 | |:---|:---| 134 | | GTK2 | https://github.com/eylles/adw-gtk2-colorizer | 135 | | Gimp 3 | https://github.com/dp0sk/adw-gimp3 | 136 | | Kvantum | https://github.com/GabePoel/KvLibadwaita | 137 | | Firefox | https://github.com/rafaelmardojai/firefox-gnome-theme | 138 | | Thunderbird | https://github.com/rafaelmardojai/thunderbird-gnome-theme | 139 | | Steam | https://github.com/tkashkin/Adwaita-for-Steam | 140 | | VSCode | https://github.com/piousdeer/vscode-adwaita | 141 | | Discord | https://github.com/ricewind012/discord-gnome-theme | 142 | | Obsidian | https://github.com/birneee/obsidian-adwaita-theme | 143 | | xfwm4 | https://github.com/FabianOvrWrt/adw-xfwm4 | 144 | 145 |
146 | 147 |
148 | 149 | ## Credits 150 | 151 |
152 | 153 | Special thanks to: 154 | 155 | * [@Pryka](https://github.com/Pryka) (Flatpak) 156 | * [@solopasha](https://github.com/solopasha) (Fedora) 157 | * [@dusansimic](https://github.com/dusansimic) (AUR) 158 | * [@julianfairfax](https://github.com/julianfairfax) 159 | -------------------------------------------------------------------------------- /images/preview-customized.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/images/preview-customized.png -------------------------------------------------------------------------------- /images/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/images/preview-dark.png -------------------------------------------------------------------------------- /images/preview-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/images/preview-light.png -------------------------------------------------------------------------------- /meson.build: -------------------------------------------------------------------------------- 1 | project('adw-gtk3', 2 | meson_version: '>= 1.3.2', 3 | license : ['LGPL2.1'], 4 | default_options: ['prefix=/usr']) 5 | 6 | subdir('src') 7 | -------------------------------------------------------------------------------- /scripts/parse-sass.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # This is only used for testing 4 | # Use meson to build the theme 5 | 6 | if [ ! "$(which sass 2> /dev/null)" ]; then 7 | echo "sass needs to be installed to generate the css." 8 | exit 1 9 | fi 10 | 11 | SASSC_OPT="--style=expanded --no-source-map" 12 | 13 | echo "Generating the css..." 14 | 15 | sass $SASSC_OPT ../src/sass/gtk.scss ../src/gtk.css 16 | sass $SASSC_OPT ../src/sass/gtk-dark.scss ../src/gtk-dark.css 17 | -------------------------------------------------------------------------------- /scripts/render-assets.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | INKSCAPE="flatpak run org.inkscape.Inkscape" 4 | 5 | SRC_FILE="../src/assets.svg" 6 | ASSETS_DIR="../src/assets" 7 | INDEX="../src/assets.txt" 8 | 9 | for i in `cat $INDEX` 10 | do 11 | if [ -f $ASSETS_DIR/$i.png ]; then 12 | echo $ASSETS_DIR/$i.png exists. 13 | else 14 | echo 15 | echo Rendering $ASSETS_DIR/$i.png 16 | $INKSCAPE --export-id=$i \ 17 | --export-id-only \ 18 | --export-filename=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null 19 | fi 20 | if [ -f $ASSETS_DIR/$i@2.png ]; then 21 | echo $ASSETS_DIR/$i@2.png exists. 22 | else 23 | echo 24 | echo Rendering $ASSETS_DIR/$i@2.png 25 | $INKSCAPE --export-id=$i \ 26 | --export-dpi=180 \ 27 | --export-id-only \ 28 | --export-filename=$ASSETS_DIR/$i@2.png $SRC_FILE >/dev/null 29 | fi 30 | done 31 | exit 0 32 | -------------------------------------------------------------------------------- /snap/snapcraft.yaml: -------------------------------------------------------------------------------- 1 | name: gtk-theme-adw-gtk3 2 | build-base: core24 3 | base: bare 4 | version: '6.2' 5 | platforms: 6 | all: 7 | build-on: [amd64] 8 | build-for: [all] 9 | summary: The theme from libadwaita ported to GTK-3 10 | description: | 11 | The theme from libadwaita ported to GTK-3 12 | grade: stable 13 | confinement: strict 14 | 15 | slots: 16 | gtk-3-themes: 17 | interface: content 18 | source: 19 | read: 20 | - $SNAP/share/themes/adw-gtk3 21 | - $SNAP/share/themes/adw-gtk3-dark 22 | 23 | parts: 24 | gtk-3-themes: 25 | plugin: dump 26 | source: https://github.com/lassekongo83/adw-gtk3/releases/download/v6.2/adw-gtk3v6.2.tar.gz 27 | organize: 28 | themes: share/themes 29 | prime: 30 | - share/themes/*/gtk-3.0 31 | - share/themes/*/gtk-4.0 32 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | ## Building from source 2 | 3 | ### Requirements 4 | 5 | | Distribution | Command/Info | 6 | |:--|:--| 7 | | ArchLinux | `pacman -S ninja git meson dart-sass` | 8 | | Ubuntu | `sudo apt install ninja-build git meson && sudo snap install dart-sass && sudo snap alias dart-sass sass` | 9 | | Fedora | `sudo dnf install nodejs ninja-build git meson` and then install sass with `npm install -g sass` | 10 | | Others | Install git, meson, ninja-build, (node.js). Also make sure `dart-sass` is installed from any available source. | 11 | 12 | Other distros may have named the above packages differently. 13 | 14 | Dart-sass can also be installed from source if you don't want to use `node.js`: 15 | 1. Download the release for your architecture: https://github.com/sass/dart-sass/releases 16 | 2. Run `tar -xvf dart-sass--linux-x64.tar.gz` (Replace `` with the version you downloaded, and also `x64` if needed.) This will create a new directory containing the sass executable. 17 | 3. To be able to run the sass command from anywhere in your terminal, you should move the executable to a directory that's included in your system's PATH environment variable. `/usr/local/bin` is a common place for this, but it can be different on various distros. Run `echo $PATH` to see if it's included. Move `src` and `sass` to that location. Then run `sass --version` to confirm that it's working. 18 | 19 | Make sure you can run `sass --version` before continuing. If that command displays an error you may need to create an alias in your `~/.bashrc` file with whatever command your package manager provided you with. 20 | 21 | When the above requirements are installed, simply run these commands: 22 | 23 | ```bash 24 | git clone https://github.com/lassekongo83/adw-gtk3.git 25 | cd adw-gtk3 26 | meson setup -Dprefix="${HOME}/.local" build 27 | ninja -C build install 28 | ``` 29 | 30 | ### Updating the theme from git 31 | 1. Navigate to the `adw-gtk3` folder that was originally cloned. (If you removed it, do the steps above instead). 32 | 2. Then run: `git pull && ninja -C build install` 33 | 34 | ## Information for contributors 35 | 36 | * **assets** 37 | * This is the dir where all the image assets are built to. For this theme the files are already pre-built. If you need to re-build the images, remove them from `src/assets` and run `sh scripts/render-assets.sh` 38 | * **sass** 39 | * This is where you'll edit the scss files that will compile to the theme. 40 | * **theme-dark** 41 | * Dark theme related files. 42 | * **theme-light** 43 | * Light theme related files. 44 | 45 | - assets.svg = This is the file that contains all the image assets. If you want to add an image asset you'll have to add it to this file and add an unique object ID to it. 46 | - assets.txt = This is the file that contains the object IDs of all image assets. This info is passed on to [render-assets.sh](scripts/render-assets.sh) which will create the image assets if flatpak inkscape is installed. 47 | - index.theme.in = Theme index file template which defines the characteristics of the theme. 48 | -------------------------------------------------------------------------------- /src/assets.txt: -------------------------------------------------------------------------------- 1 | text-select-end 2 | text-select-start 3 | text-select-end-dark 4 | text-select-start-dark 5 | slider-horz-scale-has-marks-below 6 | slider-horz-scale-has-marks-below-disabled 7 | slider-vert-scale-has-marks-below 8 | slider-vert-scale-has-marks-below-disabled 9 | slider-horz-scale-has-marks-above 10 | slider-horz-scale-has-marks-above-disabled 11 | slider-vert-scale-has-marks-above 12 | slider-vert-scale-has-marks-above-disabled 13 | slider-horz-scale-has-marks-below-dark 14 | slider-horz-scale-has-marks-below-disabled-dark 15 | slider-vert-scale-has-marks-below-dark 16 | slider-vert-scale-has-marks-below-disabled-dark 17 | slider-horz-scale-has-marks-above-dark 18 | slider-horz-scale-has-marks-above-disabled-dark 19 | slider-vert-scale-has-marks-above-dark 20 | slider-vert-scale-has-marks-above-disabled-dark 21 | -------------------------------------------------------------------------------- /src/assets/bullet-symbolic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/bullet-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/bullet-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/bullet@2-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/bullet@2-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/check-symbolic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/check-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/check-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/check@2-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/check@2-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/dash-symbolic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/dash-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/dash-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/dash@2-symbolic.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/dash@2-symbolic.symbolic.png -------------------------------------------------------------------------------- /src/assets/devel-symbolic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-dark.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-disabled-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-disabled-dark.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-disabled-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-disabled-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-disabled.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above-disabled@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above-disabled@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-above@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-above@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-dark.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-disabled-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-disabled-dark.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-disabled-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-disabled-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-disabled.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below-disabled@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below-disabled@2.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below.png -------------------------------------------------------------------------------- /src/assets/slider-horz-scale-has-marks-below@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-horz-scale-has-marks-below@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-dark.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-disabled-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-disabled-dark.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-disabled-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-disabled-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-disabled.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above-disabled@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above-disabled@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-above@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-above@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-dark.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-disabled-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-disabled-dark.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-disabled-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-disabled-dark@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-disabled.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below-disabled@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below-disabled@2.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below.png -------------------------------------------------------------------------------- /src/assets/slider-vert-scale-has-marks-below@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/slider-vert-scale-has-marks-below@2.png -------------------------------------------------------------------------------- /src/assets/text-select-end-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-end-dark.png -------------------------------------------------------------------------------- /src/assets/text-select-end-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-end-dark@2.png -------------------------------------------------------------------------------- /src/assets/text-select-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-end.png -------------------------------------------------------------------------------- /src/assets/text-select-end@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-end@2.png -------------------------------------------------------------------------------- /src/assets/text-select-start-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-start-dark.png -------------------------------------------------------------------------------- /src/assets/text-select-start-dark@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-start-dark@2.png -------------------------------------------------------------------------------- /src/assets/text-select-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-start.png -------------------------------------------------------------------------------- /src/assets/text-select-start@2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/assets/text-select-start@2.png -------------------------------------------------------------------------------- /src/index.theme.in: -------------------------------------------------------------------------------- 1 | [X-GNOME-Metatheme] 2 | Name=@VariantThemeName@ 3 | Type=X-GNOME-Metatheme 4 | Comment=@VariantThemeName@ theme 5 | Encoding=UTF-8 6 | GtkTheme=@VariantThemeName@ 7 | -------------------------------------------------------------------------------- /src/meson.build: -------------------------------------------------------------------------------- 1 | theme_dir = join_paths(get_option('datadir'), 'themes', meson.project_name()) 2 | theme_dir_dark = join_paths(get_option('datadir'), 'themes', meson.project_name() + '-dark') 3 | # GTK3 4 | gtk3_dir = join_paths(theme_dir, 'gtk-3.0') 5 | gtk3_dir_dark = join_paths(theme_dir_dark, 'gtk-3.0') 6 | # GTK4 7 | gtk4_dir = join_paths(theme_dir, 'gtk-4.0') 8 | gtk4_dir_dark = join_paths(theme_dir_dark, 'gtk-4.0') 9 | 10 | sass = find_program('sass') 11 | 12 | # Files can't have the same names in the build dir, so I need to put the meson junk in 2 dirs 13 | subdir('theme-light') 14 | subdir('theme-dark') 15 | -------------------------------------------------------------------------------- /src/sass/_colors-public.scss: -------------------------------------------------------------------------------- 1 | //apps rely on some named colors to be exported 2 | // GTK NAMED COLORS 3 | // ---------------- 4 | // use responsibly! 5 | 6 | @use 'sass:color'; 7 | @use 'settings' as *; 8 | @use 'functions' as *; 9 | @use 'colors' as *; 10 | 11 | // Sass thinks we're using the colors in the variables as strings and may shoot 12 | // warning, it's innocuous and can be defeated by using "" + $var 13 | // widget text/foreground color 14 | @define-color theme_fg_color #{"" + $window_fg_color}; 15 | 16 | // text color for entries, views and content in general 17 | @define-color theme_text_color #{"" + $view_fg_color}; 18 | 19 | // widget base background color 20 | @define-color theme_bg_color #{"" + $window_bg_color}; 21 | 22 | // text widgets and the like base background color 23 | @define-color theme_base_color #{"" + $view_bg_color}; 24 | 25 | // base background color of selections 26 | @define-color theme_selected_bg_color #{"" + $accent_bg_color}; 27 | 28 | // text/foreground color of selections 29 | @define-color theme_selected_fg_color #{"" + $accent_fg_color}; 30 | 31 | // base background color of insensitive widgets 32 | @define-color insensitive_bg_color #{"" + $disabled_bg_color}; 33 | 34 | // text foreground color of insensitive widgets 35 | @define-color insensitive_fg_color #{"" + $disabled_fg_color}; 36 | 37 | // insensitive text widgets and the like base background color 38 | @define-color insensitive_base_color #{"" + $view_bg_color}; 39 | 40 | // widget text/foreground color on backdrop windows 41 | @define-color theme_unfocused_fg_color #{"" + $backdrop_fg_color}; 42 | 43 | // text color for entries, views and content in general on backdrop windows 44 | @define-color theme_unfocused_text_color #{"" + $view_fg_color}; 45 | 46 | // widget base background color on backdrop windows 47 | @define-color theme_unfocused_bg_color #{"" + $backdrop_bg_color}; 48 | 49 | // text widgets and the like base background color on backdrop windows 50 | @define-color theme_unfocused_base_color #{"" + $backdrop_base_color}; 51 | 52 | // base background color of selections on backdrop windows 53 | @define-color theme_unfocused_selected_bg_color #{"" + $accent_bg_color}; 54 | 55 | // text/foreground color of selections on backdrop windows 56 | @define-color theme_unfocused_selected_fg_color #{"" + $accent_fg_color}; 57 | 58 | // insensitive color on backdrop windows 59 | @define-color unfocused_insensitive_color #{"" + $backdrop_disabled_color}; 60 | 61 | // widgets main borders color 62 | @define-color borders #{"" + $borders_color}; 63 | 64 | // widgets main borders color on backdrop windows 65 | @define-color unfocused_borders #{"" + $backdrop_borders_color}; 66 | 67 | // these are pretty self explicative 68 | @define-color warning_color #{"" + $warning_color}; 69 | @define-color error_color #{"" + $error_color}; 70 | @define-color success_color #{"" + $success_color}; 71 | //@define-color destructive_color #{$destructive_color} 72 | 73 | //WM 74 | 75 | $_wm_highlight: if($variant=='light', $top_hilight, opacify(black,0)); 76 | 77 | // these colors are exported for the window manager and shouldn't be used in applications, 78 | // read if you used those and something break with a version upgrade you're on your own... 79 | @define-color wm_title shade(#{$window_fg_color}, 1.8); 80 | @define-color wm_unfocused_title #{$backdrop_fg_color}; 81 | @define-color wm_highlight #{"" + $_wm_highlight}; 82 | @define-color wm_borders_edge #{"" + $borders_edge}; 83 | 84 | @define-color wm_bg_a shade(#{$window_bg_color}, 1.2); 85 | @define-color wm_bg_b #{$window_bg_color}; 86 | 87 | @define-color wm_shadow alpha(black, 0.35); 88 | @define-color wm_border alpha(black, 0.18); 89 | 90 | @define-color wm_button_hover_color_a shade(#{$window_bg_color}, 1.3); 91 | @define-color wm_button_hover_color_b #{$window_bg_color}; 92 | @define-color wm_button_active_color_a shade(#{$window_bg_color}, 0.85); 93 | @define-color wm_button_active_color_b shade(#{$window_bg_color}, 0.89); 94 | @define-color wm_button_active_color_c shade(#{$window_bg_color}, 0.9); 95 | 96 | //FIXME this is really an API 97 | 98 | // content view background such as thumbnails view in Photos or Boxes 99 | @define-color content_view_bg #{"" + $view_bg_color}; 100 | 101 | // Very contrasty background for text views (@theme_text_color foreground) 102 | @define-color text_view_bg #{"" + if($variant == 'light', $view_bg_color, gtkshade($view_bg_color,0.94))}; 103 | -------------------------------------------------------------------------------- /src/sass/_colors.scss: -------------------------------------------------------------------------------- 1 | @use 'settings' as *; 2 | @use 'functions' as *; 3 | @use 'palette' as *; 4 | @use 'defaults' as *; 5 | 6 | // Some named colors from _defaults.scss 7 | $window_bg_color: gtkcolor(window_bg_color); 8 | $window_fg_color: gtkcolor(window_fg_color); 9 | $view_bg_color: gtkcolor(view_bg_color); 10 | $view_fg_color: gtkcolor(view_fg_color); 11 | $accent_bg_color: gtkcolor(accent_bg_color); 12 | $accent_fg_color: gtkcolor(accent_fg_color); 13 | $accent_color: gtkcolor(accent_color); 14 | $headerbar_bg_color: gtkcolor(headerbar_bg_color); 15 | $headerbar_fg_color: gtkcolor(headerbar_fg_color); 16 | $headerbar_border_color: gtkcolor(headerbar_border_color); 17 | $headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color); 18 | $headerbar_shade_color: gtkcolor(headerbar_shade_color); 19 | $headerbar_darker_shade_color: gtkcolor(headerbar_darker_shade_color); 20 | $card_bg_color: gtkcolor(card_bg_color); 21 | $card_fg_color: gtkcolor(card_fg_color); 22 | $card_shade_color: gtkcolor(card_shade_color); 23 | $popover_bg_color: gtkcolor(popover_bg_color); 24 | $popover_fg_color: gtkcolor(popover_fg_color); 25 | $popover_shade_color: gtkcolor(popover_shade_color); 26 | $dialog_bg_color: gtkcolor(dialog_bg_color); 27 | $dialog_fg_color: gtkcolor(dialog_fg_color); 28 | $warning_bg_color: gtkcolor(warning_bg_color); 29 | $warning_fg_color: gtkcolor(warning_fg_color); 30 | $warning_color: gtkcolor(warning_color); 31 | $error_bg_color: gtkcolor(error_bg_color); 32 | $error_fg_color: gtkcolor(error_fg_color); 33 | $error_color: gtkcolor(error_color); 34 | $success_bg_color: gtkcolor(success_bg_color); 35 | $success_fg_color: gtkcolor(success_fg_color); 36 | $success_color: gtkcolor(success_color); 37 | $destructive_bg_color: gtkcolor(destructive_bg_color); 38 | $destructive_fg_color: gtkcolor(destructive_fg_color); 39 | $destructive_color: gtkcolor(destructive_color); 40 | $sidebar_bg_color: gtkcolor(sidebar_bg_color); 41 | $sidebar_fg_color: gtkcolor(sidebar_fg_color); 42 | $sidebar_backdrop_color: gtkcolor(sidebar_backdrop_color); 43 | $sidebar_border_color: gtkcolor(sidebar_border_color); 44 | $sidebar_shade_color: gtkcolor(sidebar_shade_color); 45 | 46 | // Extra colors not defined in _defaults.scss 47 | $caret_color: if($variant == 'light', gtkshade($view_fg_color, 1.05), gtkshade($view_fg_color, 0.97)); 48 | $border_color: gtkalpha(currentColor, .15); 49 | $borders_color: gtkmix(currentColor, $window_bg_color, 15%); 50 | $selected_borders_color: if($variant== 'light', gtkmix(black, $accent_bg_color, 15%), gtkmix(black, $accent_bg_color, 30%)); 51 | 52 | // View selection colors (for most rows and icons etc) 53 | $view_hover_color: gtkalpha(currentColor, .04); 54 | $view_active_color: gtkalpha(currentColor, .08); 55 | $view_selected_color: gtkalpha($accent_bg_color, .25); 56 | $view_selected_hover_color: gtkalpha($accent_bg_color, .32); 57 | $view_selected_active_color: gtkalpha($accent_bg_color, .39); 58 | 59 | // libadwaita button colors (only used on a few selected elements) 60 | $adw_button: gtkalpha(currentColor, .1); 61 | $adw_button_hover: gtkalpha(currentColor, .15); 62 | $adw_button_active: gtkalpha(currentColor, .3); 63 | $adw_button_checked: gtkalpha(currentColor, .3); 64 | $adw_button_checked_hover: gtkalpha(currentColor, .35); 65 | $adw_button_checked_active: gtkalpha(currentColor, .40); 66 | 67 | // These are mostly used for tabs and lists 68 | $hover_color: gtkalpha(currentColor, .07); 69 | $active_color: gtkalpha(currentColor, .16); 70 | $selected_color: gtkalpha(currentColor, .1); 71 | $selected_hover_color: gtkalpha(currentColor, .12); 72 | $selected_active_color: gtkalpha(currentColor, .19); 73 | 74 | // For scales and progressbars 75 | $trough_color: gtkalpha(currentColor, .15); 76 | $trough_hover_color: gtkalpha(currentColor, .2); 77 | $trough_active_color: gtkalpha(currentColor, .25); 78 | $progress_bg_color: $accent_bg_color; 79 | $progress_border_color: $selected_borders_color; 80 | $slider_color: gtkmix(white, $view_bg_color, 80%); 81 | $slider_hover_color: white; 82 | 83 | // Switches & check/radio buttons 84 | $switch_color: gtkalpha(currentColor, .15); 85 | $switch_hover_color: gtkalpha(currentColor, .2); 86 | $checkradio_bg_color: $accent_bg_color; 87 | $checkradio_fg_color: $accent_fg_color; 88 | $checkradio_borders_color: if($variant == 'light', gtkmix(black,$checkradio_bg_color,20%), gtkmix(black,$checkradio_bg_color,40%)); 89 | 90 | // OSD 91 | $osd_fg_color: rgba(255,255,255,0.9); 92 | $osd_text_color: white; 93 | $osd_bg_color: rgba(0,0,0,0.7); 94 | $osd_disabled_bg_color: rgba(0,0,0,0.5); 95 | $osd_disabled_fg_color: rgba(255,255,255,0.5); 96 | $osd_borders_color: rgba(0,0,0,0.9); 97 | 98 | // disabled state derived colors 99 | $disabled_fg_color: gtkalpha($window_fg_color, $disabled_opacity); 100 | $disabled_bg_color: gtkmix($window_bg_color, $view_bg_color, 60%); 101 | $disabled_borders_color: $border_color; 102 | 103 | // Backdrop colors 104 | $backdrop_base_color: $window_bg_color; 105 | $backdrop_text_color: gtkmix($view_fg_color, $backdrop_base_color, 50%); 106 | $backdrop_bg_color: $window_bg_color; 107 | $backdrop_fg_color: gtkmix($window_fg_color, $backdrop_bg_color, 50%); 108 | $backdrop_disabled_color: gtkmix($backdrop_fg_color, $backdrop_bg_color, 50%); 109 | $backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color); 110 | $backdrop_borders_color: if($variant == 'light', gtkmix(currentColor, $window_bg_color, 19%), gtkmix(currentColor, $window_bg_color, 27%)); 111 | $backdrop_dark_fill: gtkmix($backdrop_borders_color, $backdrop_bg_color, 70%); 112 | 113 | // scrollbar 114 | $scrollbar_bg_color: $view_bg_color; 115 | $scrollbar_slider_color: gtkalpha(currentColor, .2); 116 | $scrollbar_slider_hover_color: gtkalpha(currentColor, .4); 117 | $scrollbar_slider_active_color: gtkalpha(currentColor, .6); 118 | 119 | // titlebuttons 120 | $titlebutton_color: gtkalpha(currentColor, .1); 121 | $titlebutton_hover_color: gtkalpha(currentColor, .15); 122 | $titlebutton_active_color: gtkalpha(currentColor, .3); 123 | $titlebutton_backdrop: $titlebutton_color; 124 | $titlebutton_backdrop_hover: $titlebutton_hover_color; 125 | 126 | // Misc 127 | $shadow_color: transparentize(black, 0.9); 128 | $tooltip_border_color: rgba(255,255,255,0.1); 129 | $link_color: $accent_color; 130 | $link_visited_color: gtkmix($link_color, $view_fg_color, 80%); 131 | $borders_edge: if($variant == 'light', gtkalpha(white, 0.5), gtkalpha($window_fg_color, 0.07)); 132 | $top_hilight: $borders_edge; 133 | $alt_borders_color: if($variant == 'light', gtkmix(black, $window_bg_color, 24%), gtkmix(black, $window_bg_color, 18%)); 134 | $suggested_bg_color: $accent_bg_color; 135 | $suggested_border_color: $selected_borders_color; 136 | $drop_target_color: $accent_bg_color; 137 | 138 | // XFCE 139 | $panel_bg_color: gtkcolor(panel_bg_color); 140 | $panel_fg_color: gtkcolor(panel_fg_color); 141 | -------------------------------------------------------------------------------- /src/sass/_common.scss: -------------------------------------------------------------------------------- 1 | @use 'modules' as *; 2 | 3 | // Base styles 4 | 5 | * { 6 | padding: 0; 7 | -GtkToolButton-icon-spacing: 4; 8 | -GtkTextView-error-underline-color: $error_bg_color; 9 | 10 | -GtkScrolledWindow-scrollbar-spacing: 0; 11 | -GtkToolItemGroup-expander-size: 11; 12 | 13 | -GtkWidget-text-handle-width: 20; 14 | -GtkWidget-text-handle-height: 24; 15 | 16 | -GtkDialog-button-spacing: 4; 17 | -GtkDialog-action-area-border: 0; 18 | 19 | outline-color: gtkalpha(currentColor, 0.3); 20 | outline-style: dashed; 21 | outline-offset: -3px; 22 | outline-width: 1px; 23 | -gtk-outline-radius: calc($button-radius - 2px); 24 | 25 | -gtk-secondary-caret-color: $accent_bg_color; 26 | } 27 | 28 | .background { 29 | color: $window_fg_color; 30 | background-color: $window_bg_color; 31 | 32 | &:backdrop { 33 | text-shadow: none; 34 | -gtk-icon-shadow: none; 35 | } 36 | } 37 | 38 | // Avoid using wildcards as much as possible. This one seems unavoidable though. 39 | *:disabled { -gtk-icon-effect: dim; } 40 | 41 | .gtkstyle-fallback { 42 | color: $window_fg_color; 43 | background-color: $window_bg_color; 44 | 45 | &:hover { 46 | color: $window_fg_color; 47 | background-color: gtkshade($window_bg_color, 1.1); 48 | } 49 | 50 | &:active { 51 | color: $window_fg_color; 52 | background-color: gtkshade($window_bg_color, 0.9); 53 | } 54 | 55 | &:disabled { 56 | color: $disabled_fg_color; 57 | background-color: $disabled_bg_color; 58 | } 59 | 60 | &:selected { 61 | color: $accent_fg_color; 62 | background-color: $accent_bg_color; 63 | } 64 | } 65 | 66 | %osd, 67 | .osd { 68 | color: $osd_fg_color; 69 | border: none; 70 | background-color: $osd_bg_color; 71 | background-clip: padding-box; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /src/sass/_defaults.scss: -------------------------------------------------------------------------------- 1 | // GTK NAMED COLORS 2 | // ---------------- 3 | // use responsibly! 4 | 5 | // Sass thinks we're using the colors in the variables as strings and may shoot 6 | // warning, it's innocuous and can be defeated by using #{$var}. 7 | 8 | // These are the colors apps are can override. We define the defaults here and 9 | // define variables for them in _colors.scss 10 | 11 | @use 'sass:color'; 12 | @use 'settings' as *; 13 | @use 'functions' as *; 14 | @use 'palette' as *; 15 | 16 | // Using too many transparent colors in GTK3 can be performance heavy 17 | // and cause issues with some elements since we use a lot of color mixes. 18 | // Let's use static colors on more common elements 19 | $_fg_color: #323233; // Similar to rgba(0,0,6,0.8) on the background #fafafb 20 | $_text_color: #333334; // Similar to rgba(0,0,6,0.8) on the background #ffffff 21 | $_hb_fg_color: #2f2f30; // Similar to rgba(0,0,6,0.8) on the background #ebebed 22 | 23 | // The main accent color and the matching text value 24 | @define-color accent_bg_color @blue_3; 25 | @define-color accent_fg_color white; 26 | 27 | // destructive-action buttons 28 | @define-color destructive_bg_color #{if($variant == 'light', '@red_3', '@red_4')}; 29 | @define-color destructive_fg_color white; 30 | 31 | // Levelbars, entries, labels and infobars. These don't need text colors 32 | @define-color success_bg_color #{if($variant == 'light', '@green_4', '@green_5')}; 33 | @define-color success_fg_color white; 34 | 35 | @define-color warning_bg_color #{if($variant == 'light', '@yellow_5', "#c01c28")}; 36 | @define-color warning_fg_color rgba(0,0,0,0.8); 37 | 38 | @define-color error_bg_color #{if($variant == 'light', '@red_3', '@red_4')}; 39 | @define-color error_fg_color white; 40 | 41 | // Colors derived from their matching bg color 42 | // Not quite the same as libadwaita but "close enough" 43 | @if $variant == 'light' { 44 | @define-color accent_color #{gtkmix('@accent_bg_color', black, 83%)}; 45 | @define-color destructive_color #{gtkmix('@destructive_bg_color', black, 83%)}; 46 | @define-color success_color #{gtkmix('@success_bg_color', black, 83%)}; 47 | @define-color warning_color #{gtkmix('@warning_bg_color', black, 83%)}; 48 | @define-color error_color #{gtkmix('@error_bg_color', black, 83%)}; 49 | } @else { 50 | @define-color accent_color #{gtkmix('@accent_bg_color', white, 60%)}; 51 | @define-color destructive_color #{gtkmix('@destructive_bg_color', white, 60%)}; 52 | @define-color success_color #{gtkmix('@success_bg_color', white, 60%)}; 53 | @define-color warning_color #{gtkmix('@warning_bg_color', white, 60%)}; 54 | @define-color error_color #{gtkmix('@error_bg_color', white, 60%)}; 55 | } 56 | 57 | // Window 58 | @define-color window_bg_color #{if($variant == 'light', '#fafafb', '#222226')}; 59 | @define-color window_fg_color #{if($variant == 'light', $_fg_color, 'white')}; 60 | 61 | // Views - e.g. text view or tree view 62 | @define-color view_bg_color #{if($variant == 'light', '#ffffff', '#1d1d20')}; 63 | @define-color view_fg_color #{if($variant == 'light', $_text_color, 'white')}; 64 | 65 | // Header bar, search bar, tab bar 66 | @define-color headerbar_bg_color #{if($variant == 'light', '#ebebed', '#2e2e32')}; 67 | @define-color headerbar_fg_color #{if($variant == 'light', $_hb_fg_color, 'white')}; 68 | @define-color headerbar_border_color #{if($variant == 'light', rgba(0,0,6,0.8), 'white')}; 69 | @define-color headerbar_backdrop_color @window_bg_color; 70 | @define-color headerbar_shade_color #{if($variant == 'light', rgba(0,0,6,0.12), rgba(0,0,6,0.36))}; 71 | @define-color headerbar_darker_shade_color #{if($variant == 'light', rgba(0,0,6,0.12), rgba(0,0,12,0.9))}; 72 | 73 | // Split pane views 74 | @define-color sidebar_bg_color #{if($variant == 'light', '#ebebed', '#2e2e32')}; 75 | @define-color sidebar_fg_color #{if($variant == 'light', $_hb_fg_color, 'white')}; 76 | @define-color sidebar_backdrop_color #{if($variant == 'light', '#f2f2f4', '#28282c')}; 77 | @define-color sidebar_shade_color #{if($variant == 'light', rgba(0,0,6,0.07), rgba(0,0,6,0.25))}; 78 | @define-color sidebar_border_color #{if($variant == 'light', rgba(0,0,6,0.07), rgba(0,0,6,0.36))}; 79 | 80 | // Cards, boxed lists 81 | @define-color card_bg_color #{if($variant == 'light', '#ffffff', rgba(255,255,255,0.08))}; 82 | @define-color card_fg_color #{if($variant == 'light', $_text_color, 'white')}; 83 | @define-color card_shade_color #{if($variant == 'light', rgba(0,0,6,0.07), rgba(0,0,6,0.36))}; 84 | 85 | // Dialogs 86 | @define-color dialog_bg_color #{if($variant == 'light', '#fafafb', '#36363a')}; 87 | @define-color dialog_fg_color #{if($variant == 'light', $_fg_color, 'white')}; 88 | 89 | // Popovers 90 | @define-color popover_bg_color #{if($variant == 'light', '#ffffff', '#36363a')}; 91 | @define-color popover_fg_color #{if($variant == 'light', $_text_color, 'white')}; 92 | @define-color popover_shade_color #{if($variant == 'light', rgba(0,0,6,0.07), rgba(0,0,6,0.25))}; 93 | 94 | // Thumbnails 95 | @define-color thumbnail_bg_color #{if($variant == 'light', '#ffffff', '#39393d')}; 96 | @define-color thumbnail_fg_color #{if($variant == 'light', $_text_color, 'white')}; 97 | 98 | // Miscellaneous 99 | @define-color shade_color #{if($variant == 'light', rgba(0,0,6,0.07), rgba(0,0,6,0.25))}; 100 | @define-color scrollbar_outline_color #{if($variant == 'light', 'white', rgba(0,0,12,0.95))}; 101 | 102 | // XFCE 103 | @define-color panel_bg_color black; 104 | @define-color panel_fg_color white; 105 | -------------------------------------------------------------------------------- /src/sass/_drawing.scss: -------------------------------------------------------------------------------- 1 | // More advanced sass mixins to draw entry and button backgrounds etc. 2 | 3 | @use 'settings' as *; 4 | @use 'functions' as *; 5 | @use 'colors' as *; 6 | 7 | $focus_border_color: gtkalpha($accent_color, 0.5); 8 | $focus_transition: outline-color 200ms $ease-out-quad, 9 | outline-width 200ms $ease-out-quad, 10 | outline-offset 200ms $ease-out-quad; 11 | 12 | @function _widget_edge($c:$borders_edge) { 13 | @if $c == none { @return none; } 14 | @else { @return 0 1px $c; } 15 | } 16 | 17 | @mixin _shadows($list...) { 18 | // Helper mixin to stack up to box-shadows; 19 | $shadows: null; 20 | 21 | @each $shadow in $list { 22 | @if $shadow!=none { $shadows: $shadows, $shadow; } 23 | } 24 | 25 | box-shadow: $shadows; 26 | } 27 | 28 | @mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: ':focus', $transition: null) { 29 | & #{$target} { 30 | outline: 0 solid transparent; 31 | outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); 32 | transition: $focus_transition, $transition; 33 | } 34 | 35 | &#{$focus-state} #{$target} { 36 | outline-color: $focus_border_color; 37 | outline-width: $width; 38 | outline-offset: $offset; 39 | } 40 | } 41 | 42 | // ********* 43 | // Entries * 44 | // ********* 45 | 46 | @function entry_focus_border($fc:$focus_border_color) { 47 | @return $fc; 48 | } 49 | 50 | @function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; } 51 | 52 | @mixin entry($t, $fc:$focus_border_color, $edge: none) { 53 | $_entry_edge: if($edge == none, none, _widget_edge($edge)); 54 | 55 | $entry_color: gtkalpha(currentColor, 0.1); 56 | $entry_disabled: gtkmix(currentColor, $window_bg_color, 5%); 57 | $entry_backdrop: $entry_disabled; 58 | $entry_backdrop_disabled: $entry_disabled; 59 | 60 | @if $t==normal { 61 | color: $view_fg_color; 62 | border-color: transparent; 63 | background-color: $entry_color; 64 | @include _shadows(entry_focus_shadow(gtkalpha($fc, 0)), $_entry_edge); // Needed for focus transition to work 65 | } 66 | @if $t==focus { 67 | @include _shadows(entry_focus_shadow($fc), $_entry_edge); 68 | border-color: entry_focus_border($fc); 69 | transition: 300ms ease-in-out; 70 | transition-property: border, box-shadow; 71 | } 72 | @if $t==disabled { 73 | color: $disabled_fg_color; 74 | border-color: transparent; 75 | background-color: $entry_disabled; 76 | } 77 | @if $t==backdrop { 78 | color: $backdrop_text_color; 79 | border-color: transparent; 80 | background-color: $entry_backdrop; 81 | } 82 | @if $t==backdrop-disabled { 83 | color: $backdrop_disabled_color; 84 | border-color: transparent; 85 | background-color: $entry_backdrop_disabled; 86 | } 87 | @if $t==osd { 88 | color: $osd_text_color; 89 | border-color: $osd_borders_color; 90 | background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 91 | background-clip: padding-box; 92 | box-shadow: none; 93 | text-shadow: 0 1px black; 94 | -gtk-icon-shadow: 0 1px black; 95 | } 96 | @if $t==osd-focus { 97 | color: $osd_text_color; 98 | border-color: $accent_bg_color; 99 | background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 100 | background-clip: padding-box; 101 | box-shadow: entry_focus_shadow($fc); 102 | text-shadow: 0 1px black; 103 | -gtk-icon-shadow: 0 1px black; 104 | } 105 | @if $t==osd-disabled { 106 | color: $osd_disabled_fg_color; 107 | border-color: $osd_borders_color; 108 | background-color: $osd_disabled_bg_color; 109 | background-clip: padding-box; 110 | box-shadow: none; 111 | text-shadow: none; 112 | -gtk-icon-shadow: none; 113 | } 114 | @if $t==osd-backdrop { 115 | color: $osd_text_color; 116 | border-color: $osd_borders_color; 117 | background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 118 | background-clip: padding-box; 119 | box-shadow: none; 120 | text-shadow: none; 121 | -gtk-icon-shadow: none; 122 | } 123 | } 124 | 125 | // ********* 126 | // Buttons * 127 | // ********* 128 | 129 | @mixin button($t, $c:$window_bg_color, $tc:$window_fg_color, $edge: none, $backimage: null) { 130 | $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); 131 | 132 | $button_color: gtkmix($tc, $c, 10%); 133 | $button_hover_color: gtkmix($tc, $c, 15%); 134 | $button_active_color: gtkmix($tc, $c, 30%); 135 | $button_checked_color: gtkmix($tc, $c, 30%); 136 | $button_checked_hover_color: gtkmix($tc, $c, 35%); 137 | $button_checked_active_color: gtkmix($tc, $c, 40%); 138 | $button_disabled: gtkmix($tc, $c, 5%); 139 | 140 | $button_text_disabled: gtkalpha($tc, $disabled_opacity); 141 | 142 | @if $t==normal { 143 | // normal button 144 | color: $tc; 145 | outline-color: $focus_border_color; 146 | background-color: $button_color; 147 | } 148 | 149 | @else if $t==hover { 150 | // hovered button 151 | color: $tc; 152 | background-color: $button_hover_color; 153 | box-shadow: none; 154 | } 155 | 156 | @else if $t==active { 157 | // pushed button 158 | color: $tc; 159 | background-color: $button_active_color; 160 | box-shadow: none; 161 | 162 | text-shadow: none; 163 | -gtk-icon-shadow: none; 164 | &:hover { background-color: $button_checked_hover_color; } 165 | } 166 | 167 | @else if $t==disabled { 168 | // disabled button 169 | color: gtkalpha($tc, $disabled_opacity); 170 | background-color: $button_disabled; 171 | text-shadow: none; 172 | -gtk-icon-shadow: none; 173 | box-shadow: none; 174 | } 175 | 176 | @else if $t==disabled-active { 177 | // disabled pushed button 178 | color: $button_text_disabled; 179 | background-color: $button_active_color; 180 | box-shadow: none; 181 | } 182 | 183 | @else if $t==backdrop { 184 | // backdrop button 185 | color: $button_text_disabled; 186 | background-color: $button_color; 187 | text-shadow: none; 188 | -gtk-icon-shadow: none; 189 | } 190 | 191 | @else if $t==backdrop-active { 192 | // backdrop pushed button 193 | color: $button_text_disabled; 194 | background-color: $button_active_color; 195 | &:hover { background-color: $button_checked_active_color; } 196 | } 197 | 198 | @else if $t==backdrop-disabled { 199 | // backdrop disabled button 200 | color: $button_text_disabled; 201 | background-color: $button_color; 202 | text-shadow: none; 203 | -gtk-icon-shadow: none; 204 | } 205 | 206 | @else if $t==backdrop-disabled-active { 207 | // backdrop disabled pushed button 208 | color: $button_text_disabled; 209 | background-color: $button_active_color; 210 | } 211 | 212 | @else if $t==osd { 213 | // normal osd button 214 | color: white; 215 | border-color: transparent; 216 | background-color: rgba(0,0,0,0.65); 217 | background-clip: padding-box; 218 | } 219 | 220 | @else if $t==osd-hover { 221 | // hover osd button 222 | color: white; 223 | border-color: transparent; 224 | background-color: gtkmix(black, currentColor, 75%); 225 | background-clip: padding-box; 226 | } 227 | 228 | @else if $t==osd-active { 229 | // active osd button 230 | color: white; 231 | border-color: transparent; 232 | background-color: gtkmix(black, currentColor, 80%); 233 | background-clip: padding-box; 234 | } 235 | 236 | @else if $t==osd-disabled { 237 | // disabled osd button 238 | color: $osd_disabled_fg_color; 239 | border-color: transparent; 240 | background-color: transparent; 241 | background-image: image($osd_disabled_bg_color); 242 | background-clip: padding-box; 243 | box-shadow: none; 244 | text-shadow: none; 245 | -gtk-icon-shadow: none; 246 | } 247 | 248 | @else if $t==osd-backdrop { 249 | // backdrop osd button 250 | $_bg: if($c != $window_bg_color, gtkalpha($c, 0.5), $osd_bg_color); 251 | 252 | color: $osd_fg_color; 253 | border-color: transparent; 254 | background-color: transparent; 255 | background-image: image($_bg); 256 | background-clip: padding-box; 257 | box-shadow: none; 258 | text-shadow: none; 259 | -gtk-icon-shadow: none; 260 | } 261 | 262 | @else if $t==undecorated { 263 | // reset 264 | border-color: transparent; 265 | background-color: transparent; 266 | background-image: none; 267 | 268 | @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); 269 | 270 | text-shadow: none; 271 | -gtk-icon-shadow: none; 272 | } 273 | } 274 | 275 | // Libadwaita default style buttons. Good to have on elements that have different background colors. 276 | // Shouldn't be used too often as too many transparent elements can be cpu heavy on lower end machines. 277 | @mixin libadwaita-button($t, $fc:$focus_border_color) { 278 | $button_color: $adw_button; 279 | $button_hover_color: $adw_button_hover; 280 | $button_active_color: $adw_button_active; 281 | $button_checked_color: $adw_button_checked; 282 | $button_checked_hover_color: $adw_button_checked_hover; 283 | $button_checked_active_color: $adw_button_checked_active; 284 | 285 | $button_text_color: if($variant == 'light', rgba(0,0,6,0.8), white); 286 | $button_disabled_text_color: if($variant == 'light', gtkalpha(rgba(0,0,6,0.8), $disabled_opacity), gtkalpha(white, $disabled_opacity)); 287 | 288 | @if $t==normal { 289 | outline-color: $fc; 290 | color: $button_text_color; 291 | background-color: $button_color; 292 | } 293 | @else if $t==hover { 294 | outline-color: $fc; 295 | color: $button_text_color; 296 | background-color: $button_hover_color; 297 | } 298 | @else if $t==active { 299 | outline-color: $fc; 300 | color: $button_text_color; 301 | background-color: $button_active_color; 302 | } 303 | @else if $t==checked { 304 | outline-color: $fc; 305 | color: $button_text_color; 306 | background-color: $button_checked_color; 307 | &:hover { background-color: $button_checked_hover_color; } 308 | &:active { background-color: $button_checked_active_color; } 309 | } 310 | @else if $t==backdrop { 311 | outline-color: transparent; 312 | color: $button_disabled_text_color; 313 | background-color: $button_color; 314 | &:hover { background-color: $button_hover_color; } 315 | &:checked { background-color: $button_checked_color; } 316 | &:active { background-color: $button_active_color; } 317 | &:checked:hover { background-color: $button_checked_hover_color; } 318 | &:checked:active { background-color: $button_checked_active_color; } 319 | } 320 | @else if $t==disabled { 321 | outline-color: transparent; 322 | color: $button_disabled_text_color; 323 | background-color: $button_color; 324 | } 325 | } 326 | 327 | // *********** 328 | // Headerbar * 329 | // *********** 330 | 331 | @mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none) { 332 | $gradient: linear-gradient(to top, $c, $c); 333 | @if $ov != none { background: $c $ov, $gradient; } 334 | @else { background: $c $gradient; } 335 | } 336 | 337 | // ********************* 338 | // Check/radio buttons * 339 | // ********************* 340 | 341 | @mixin check($t, $c:$window_bg_color, $tc:$window_fg_color, $checked: false) { 342 | $_border_color: if($c==$checkradio_bg_color, $c, $trough_color); 343 | 344 | @if $t==normal { 345 | background-clip: if($checked, border-box, padding-box); 346 | background-image: image($c); 347 | border-color: $_border_color; 348 | box-shadow: none; 349 | color: $tc; 350 | } 351 | 352 | @if $t==hover { 353 | &:not(:checked):not(:indeterminate) { border-color: $trough_hover_color; } 354 | } 355 | 356 | @if $t==active { 357 | box-shadow: none; 358 | } 359 | 360 | @if $t==disabled { 361 | // FIXME: Background color looks bad when using gtkalpha 362 | box-shadow: none; 363 | background-image: image($c); 364 | color: gtkalpha($tc, $disabled_opacity); 365 | border-color: $_border_color; 366 | } 367 | } 368 | 369 | // *********** 370 | // Overshoot * 371 | // *********** 372 | 373 | @mixin overshoot($p, $t:normal, $c:$window_fg_color) { 374 | $_small_gradient_length: 5%; 375 | $_big_gradient_length: 100%; 376 | 377 | $_position: center top; 378 | $_small_gradient_size: 100% $_small_gradient_length; 379 | $_big_gradient_size: 100% $_big_gradient_length; 380 | 381 | @if $p==bottom { 382 | $_position: center bottom; 383 | $_linear_gradient_direction: to top; 384 | } 385 | 386 | @else if $p==right { 387 | $_position: right center; 388 | $_small_gradient_size: $_small_gradient_length 100%; 389 | $_big_gradient_size: $_big_gradient_length 100%; 390 | } 391 | 392 | @else if $p==left { 393 | $_position: left center; 394 | $_small_gradient_size: $_small_gradient_length 100%; 395 | $_big_gradient_size: $_big_gradient_length 100%; 396 | } 397 | 398 | @if $c==$window_fg_color { 399 | $_small_gradient_color: gtkshade($borders_color, 0.9); 400 | $_big_gradient_color: $window_fg_color; 401 | 402 | @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } 403 | } 404 | 405 | $_small_gradient: -gtk-gradient(radial, 406 | $_position, 0, 407 | $_position, 0.5, 408 | to($c), 409 | to(gtkalpha($c, 0))); 410 | 411 | $_big_gradient: -gtk-gradient(radial, 412 | $_position, 0, 413 | $_position, 0.6, 414 | from(gtkalpha($c, 0.07)), 415 | to(gtkalpha($c, 0))); 416 | 417 | @if $t==normal { 418 | background-image: $_small_gradient, $_big_gradient; 419 | background-size: $_small_gradient_size, $_big_gradient_size; 420 | } 421 | 422 | @else if $t==backdrop { 423 | background-image: $_small_gradient; 424 | background-size: $_small_gradient_size; 425 | } 426 | 427 | background-repeat: no-repeat; 428 | background-position: $_position; 429 | 430 | background-color: transparent; // reset some properties to be sure to not inherit them somehow 431 | border: none; // 432 | box-shadow: none; // 433 | } 434 | -------------------------------------------------------------------------------- /src/sass/_functions.scss: -------------------------------------------------------------------------------- 1 | // Sass functions 2 | 3 | @use 'sass:color'; 4 | @use 'sass:string'; 5 | @use 'settings' as *; 6 | 7 | // "gtkalpha(currentColor, 0.7)" will become: 8 | // GTK3: alpha(currentColor, 0.7) 9 | // GTK4: color-mix(in srgb, currentColor 70%, transparent) 10 | @function gtkalpha($c,$a) { 11 | @if $toolkit == 'gtk4' { 12 | $ratio: $a * 100%; 13 | @return string.unquote("color-mix(in srgb, #{$c} #{$ratio}, transparent)"); 14 | } @else { 15 | @return string.unquote("alpha(#{$c},#{$a})"); 16 | } 17 | } 18 | 19 | // "gtkmix(white, black, 15%)" will become: 20 | // GTK3: mix(white, black, 0.85) 21 | // GTK4: color-mix(in srgb, white 15%, black) 22 | @function gtkmix($c1,$c2,$r) { 23 | @if $toolkit == 'gtk4' { 24 | @return string.unquote("color-mix(in srgb, #{$c1} #{$r}, #{$c2})"); 25 | } @else { 26 | $ratio: calc(1 - $r / 100%); 27 | @return string.unquote("mix(#{$c1},#{$c2},#{$ratio})"); 28 | } 29 | } 30 | 31 | // "gtkshade(pink, 1.2)" will become: 32 | // GTK3: shade(pink, 1.2) 33 | // GTK4: hsl(from pink h calc(s * 1.2) calc(l * 1.2)) 34 | @function gtkshade($c,$s) { 35 | @if $toolkit == 'gtk4' { 36 | @return string.unquote("hsl(from #{$c} h calc(s * #{$s}) calc(l * #{$s}))"); 37 | } @else { 38 | @return string.unquote("shade(#{$c},#{$s})"); 39 | } 40 | } 41 | 42 | // Used for variable names in the gtk3 theme 43 | @function gtkcolor($c) { 44 | @return string.unquote("@#{$c}"); 45 | } 46 | 47 | // FIXME: Legacy stuff. Needs to be removed and updated to something else. 48 | // These functions should do the same thing as the old libsass functions 49 | @function transparentize($color, $amount) { 50 | @return color.adjust($color, $alpha: -$amount); 51 | } 52 | 53 | @function opacify($color, $amount) { 54 | @return color.adjust($color, $alpha: $amount); 55 | } 56 | -------------------------------------------------------------------------------- /src/sass/_libgranite.scss: -------------------------------------------------------------------------------- 1 | @use 'modules' as *; 2 | @use 'palette' as *; 3 | @forward 'widgets/labels'; 4 | @forward 'widgets/misc'; 5 | 6 | $card_shadow: 0 0 0 1px transparentize(black, 0.97), 7 | 0 1px 3px 1px transparentize(black, .93), 8 | 0 2px 6px 2px transparentize(black, .97); 9 | 10 | // Decoration 11 | window.rounded, 12 | window.rounded actionbar { 13 | border-radius: 0 0 $window_radius $window_radius; 14 | 15 | decoration { 16 | border-radius: $window_radius; 17 | } 18 | } 19 | 20 | window.flat headerbar { 21 | box-shadow: none; 22 | } 23 | 24 | // Text formatting 25 | .accent { 26 | color: $accent_bg_color; 27 | } 28 | 29 | .h1 { 30 | font-size: 20pt; 31 | font-weight: 300; 32 | } 33 | 34 | .h2 { 35 | font-size: 16pt; 36 | font-weight: 200; 37 | } 38 | 39 | .h3 { 40 | font-size: 11pt; 41 | } 42 | 43 | .h4, 44 | .category-label { 45 | color: gtkshade($window_fg_color, 1.2); 46 | font-weight: 700; 47 | } 48 | 49 | .h4 { 50 | padding-top: 0.5em; 51 | padding-bottom: 0.5em; 52 | } 53 | 54 | list .h4 { 55 | padding-left: 0.5em; 56 | } 57 | 58 | // Storage Bar widget 59 | .storage-bar { 60 | .trough { 61 | padding: 8px 6px; 62 | border: none; 63 | border-radius: $button_radius $button_radius 0 0; 64 | background-image: none; 65 | box-shadow: $card_shadow; 66 | } 67 | 68 | .fill-block { 69 | padding: 8px 6px; 70 | border: 1px solid rgba(black, 0.35); 71 | border-top-width: 0; 72 | border-right-width: 0; 73 | border-bottom-width: 1px; 74 | border-left-width: 0; 75 | border-radius: 0; 76 | border-bottom-color: gtkshade($borders_color, 0.75); 77 | background-color: gtkshade($view_bg_color, 0.85); 78 | 79 | &:first-child { border-radius: $button_radius 0 0; } 80 | &:last-child { border-radius: 0 $button_radius 0 0; } 81 | &:only-child { border-radius: $button_radius $button_radius 0 0; } 82 | 83 | image { -gtk-icon-style: symbolic; } 84 | } 85 | 86 | .empty-block { 87 | border-bottom-width: 1px; 88 | border-bottom-color: gtkshade($borders_color, 0.6); 89 | background-color: gtkshade($view_bg_color, 0.95); 90 | 91 | image { color: black; } 92 | } 93 | 94 | .app { 95 | border-bottom-width: 1px; 96 | border-bottom-color: gtkshade($purple_1, 0.7); 97 | background-color: $purple_1; 98 | 99 | image { color: white; } 100 | } 101 | 102 | .audio { 103 | border-bottom-width: 1px; 104 | border-bottom-color: gtkshade($orange_2, 0.8); 105 | background-color: $orange_2; 106 | 107 | image { color: black; } 108 | } 109 | 110 | .files { 111 | border-bottom-width: 1px; 112 | border-bottom-color: gtkshade($blue_1, 0.8); 113 | background-color: $blue_1; 114 | 115 | image { color: black; } 116 | } 117 | 118 | .photo { 119 | border-bottom-width: 1px; 120 | border-bottom-color: gtkshade($green_2, 0.7); 121 | background-color: $green_2; 122 | 123 | image { color: black; } 124 | } 125 | 126 | .video { 127 | border-bottom-width: 1px; 128 | border-bottom-color: gtkshade($red_1, 0.8); 129 | background-color: $red_1; 130 | 131 | image { color: white; } 132 | } 133 | 134 | .legend { 135 | padding: 8px; 136 | border-radius: 50%; 137 | 138 | image { color: black; } 139 | } 140 | 141 | .disk-bar { 142 | padding: 0; 143 | border-radius: $button_radius; 144 | background-color: $brown_1; 145 | } 146 | 147 | .ext2, .ext3, .ext4, .fat16, .fat32, .btrfs, 148 | .xfs, .ntfs, .luks, .lvm, .none, .swap , .unused { 149 | // sass-lint:disable-block indentation 150 | border: none; 151 | box-shadow: 152 | inset 0 -2px rgba($dark_2, 0.5), 153 | inset 1px 0 rgba($dark_2, 0.5), 154 | inset -1px 0 rgba($dark_2, 0.5); 155 | } 156 | 157 | .swap { 158 | background-color: $red_5; 159 | 160 | image { color: white; } 161 | } 162 | 163 | .ext4 { 164 | background-color: $green_2; 165 | 166 | image { color: black; } 167 | } 168 | 169 | .ext3 { 170 | background-color: $green_5; 171 | 172 | image { color: white; } 173 | } 174 | 175 | .ext2 { 176 | background-color: $green_1; 177 | 178 | image { color: black; } 179 | } 180 | 181 | .fat16, 182 | .fat32 { 183 | background-color: $yellow_2; 184 | 185 | image { color: black; } 186 | } 187 | 188 | .btrfs { 189 | background-color: $blue_5; 190 | 191 | image { color: white; } 192 | } 193 | 194 | .xfs { 195 | background-color: $blue_1; 196 | 197 | image { color: black; } 198 | } 199 | 200 | .ntfs { 201 | background-color: $orange_2; 202 | 203 | image { color: black; } 204 | } 205 | 206 | .luks { 207 | background-color: $purple_2; 208 | 209 | image { color: black; } 210 | } 211 | 212 | .lvm { 213 | background-color: $purple_1; 214 | 215 | image { color: black; } 216 | } 217 | 218 | .none { 219 | background-color: $blue_1; 220 | 221 | image { color: black; } 222 | } 223 | 224 | .unused { 225 | background-color: $brown_1; 226 | 227 | image { color: black; } 228 | } 229 | 230 | .legend { box-shadow: none; } 231 | } 232 | 233 | // Granite popover 234 | GraniteWidgetsPopOver { 235 | -GraniteWidgetsPopOver-arrow-width: 21; 236 | -GraniteWidgetsPopOver-arrow-height: 10; 237 | -GraniteWidgetsPopOver-border-radius: $popover_radius; 238 | -GraniteWidgetsPopOver-border-width: 0; 239 | -GraniteWidgetsPopOver-shadow-size: 12; 240 | 241 | border: 1px solid $view_bg_color; 242 | background: $view_bg_color; 243 | color: $window_fg_color; 244 | 245 | .button { 246 | background-image: none; 247 | background: none; 248 | border: none; 249 | 250 | &:active, 251 | &:active:hover, { 252 | color: $accent_bg_color; 253 | } 254 | } 255 | 256 | > .frame { 257 | border:none; 258 | } 259 | 260 | .sidebar.view { 261 | border: none; 262 | background: none; 263 | } 264 | } 265 | 266 | GraniteWidgetsStaticNotebook .frame { 267 | border: none; 268 | } 269 | 270 | .popover_bg { 271 | background-color: $view_bg_color; 272 | background-image: none; 273 | border: 1px solid $view_bg_color; 274 | color: $window_fg_color; 275 | } 276 | 277 | // Cards 278 | .deck { 279 | background-color: $view_bg_color; 280 | } 281 | 282 | paper, 283 | .card { 284 | transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1); 285 | border: none; 286 | background-color: $view_bg_color; 287 | box-shadow: $card_shadow; 288 | 289 | &, &.rounded { border-radius: $card_radius; } 290 | 291 | &.collapsed { 292 | background-color: $window_bg_color; 293 | } 294 | } 295 | 296 | // Source list 297 | .source-list { 298 | -GtkTreeView-horizontal-separator: 1px; 299 | -GtkTreeView-vertical-separator: 6px; 300 | 301 | background-color: $window_bg_color; 302 | border: solid $borders_color; 303 | color: $window_fg_color; 304 | border-right-width: 1px; 305 | 306 | .category-expander { 307 | color: transparent; 308 | } 309 | 310 | .badge { 311 | background-image: none; 312 | background-color: transparentize(black, 0.6); 313 | color: $window_bg_color; 314 | border-radius: 10px; 315 | padding: 0 6px; 316 | margin: 0 3px; 317 | border-width: 0; 318 | 319 | &:selected:backdrop, 320 | &:selected:hover:backdrop { 321 | background-color: transparentize(black, 0.8); 322 | color: gtkshade($window_bg_color, 0.95); 323 | } 324 | } 325 | 326 | row, 327 | .list-row { 328 | border:none; 329 | padding: 0; 330 | 331 | > GtkLabel, 332 | > label { 333 | padding-left: 6px; 334 | padding-right: 6px; 335 | } 336 | } 337 | } 338 | 339 | // Avatar 340 | .avatar { 341 | border-radius: 999px; 342 | box-shadow: none; 343 | } 344 | 345 | // Overlay bar 346 | .overlay-bar { 347 | padding: 4px; 348 | } 349 | 350 | // Dynamic notebook 351 | .dynamic-notebook { 352 | tab { 353 | &.reorderable-page { padding: 8px; } 354 | } 355 | } 356 | 357 | // Scales 358 | scale { 359 | &.temperature trough { 360 | background-image: linear-gradient( 361 | to right, 362 | rgba($blue_1, 0.4), 363 | $light_4, 364 | $yellow_1 365 | ); 366 | } 367 | 368 | &.temperature:dir(rtl) trough { 369 | background-image: linear-gradient( 370 | to left, 371 | rgba($blue_1, 0.4), 372 | $light_4, 373 | $yellow_1 374 | ); 375 | } 376 | 377 | &.warmth trough { 378 | background-image: linear-gradient( 379 | to right, 380 | rgba($yellow_1, 0.4), 381 | rgba($yellow_5, 0.6) 382 | ); 383 | } 384 | &.warmth:dir(rtl) trough { 385 | background-image: linear-gradient( 386 | to left, 387 | rgba($yellow_1, 0.4), 388 | rgba($yellow_5, 0.6) 389 | ); 390 | } 391 | } 392 | 393 | // Terminal 394 | .terminal, 395 | .terminal text { 396 | background-color: $dark_3; 397 | color: white; 398 | font-family: monospace; 399 | 400 | selection { 401 | background-color: $accent_bg_color; 402 | color: white; 403 | } 404 | 405 | &:backdrop { 406 | background-color: $dark_2; 407 | color: white; 408 | } 409 | } 410 | 411 | label.terminal { 412 | padding: 1em; 413 | } 414 | 415 | // Welcome 416 | .welcome { 417 | font-size: 10pt; 418 | text-shadow: none; 419 | 420 | .dim-label { @extend .dim-label; } 421 | 422 | .h1, .h3 { color: gtkshade($window_fg_color, 1.2); } 423 | } 424 | 425 | // Back button 426 | button.back-button, 427 | button.back-button.text-button { 428 | padding-right: 8px; 429 | padding-left: 12px * 3; 430 | transition: $button_transition; 431 | background-image: -gtk-icontheme('go-previous-symbolic'); 432 | background-repeat: no-repeat no-repeat; 433 | background-position: 5px 50%; 434 | background-size: 21px; 435 | 436 | .titlebar & { 437 | background-color: $headerbar_bg_color; 438 | background-image: -gtk-icontheme('go-previous-symbolic'); 439 | background-repeat: no-repeat no-repeat; 440 | background-position: 5px 50%; 441 | background-size: 21px; 442 | padding-left: 12px * 3; 443 | @include button(normal, $headerbar_bg_color, $headerbar_fg_color); 444 | 445 | &:hover { 446 | background-image: -gtk-icontheme('go-previous-symbolic'); 447 | background-repeat: no-repeat no-repeat; 448 | background-position: 5px 50%; 449 | background-size: 21px; 450 | @include button(hover, $headerbar_bg_color, $headerbar_fg_color); 451 | } 452 | 453 | &:active { 454 | background-image: -gtk-icontheme('go-previous-symbolic'); 455 | background-repeat: no-repeat no-repeat; 456 | background-position: 5px 50%; 457 | background-size: 21px; 458 | @include button(active, $headerbar_bg_color, $headerbar_fg_color); 459 | } 460 | } 461 | 462 | &:dir(rtl) { 463 | padding: 0.5em 0.6em; 464 | padding-right: 12px * 3; 465 | padding-left: 8px; 466 | background-image: -gtk-icontheme('go-next-symbolic'); 467 | background-repeat: no-repeat no-repeat; 468 | background-position: 90% 50%; 469 | } 470 | } 471 | 472 | // Checkerboard 473 | .checkerboard { 474 | box-shadow: 0px 1px 2px 0px gtkalpha($borders_color, 0.5), 475 | 0px 0px 0px 1px gtkalpha($borders_color, 0.5), 476 | 0px 2px 0px 0px gtkalpha($borders_color, 0.5); 477 | border-radius: 2px; 478 | @extend %checkerboard; 479 | } 480 | -------------------------------------------------------------------------------- /src/sass/_modules.scss: -------------------------------------------------------------------------------- 1 | // Collection of sass functions, mixins, variables etc. No direct css. 2 | // This file is called upon in almost every file with: @use 'modules' as *; 3 | // This way we don't have to use all the below lines in every file. 4 | @forward 'settings'; 5 | @forward 'functions'; 6 | @forward 'colors'; 7 | @forward 'drawing'; 8 | -------------------------------------------------------------------------------- /src/sass/_palette.scss: -------------------------------------------------------------------------------- 1 | $blue_1: #99c1f1; 2 | $blue_2: #62a0ea; 3 | $blue_3: #3584e4; 4 | $blue_4: #1c71d8; 5 | $blue_5: #1a5fb4; 6 | $green_1: #8ff0a4; 7 | $green_2: #57e389; 8 | $green_3: #33d17a; 9 | $green_4: #2ec27e; 10 | $green_5: #26a269; 11 | $yellow_1: #f9f06b; 12 | $yellow_2: #f8e45c; 13 | $yellow_3: #f6d32d; 14 | $yellow_4: #f5c211; 15 | $yellow_5: #e5a50a; 16 | $orange_1: #ffbe6f; 17 | $orange_2: #ffa348; 18 | $orange_3: #ff7800; 19 | $orange_4: #e66100; 20 | $orange_5: #c64600; 21 | $red_1: #f66151; 22 | $red_2: #ed333b; 23 | $red_3: #e01b24; 24 | $red_4: #c01c28; 25 | $red_5: #a51d2d; 26 | $purple_1: #dc8add; 27 | $purple_2: #c061cb; 28 | $purple_3: #9141ac; 29 | $purple_4: #813d9c; 30 | $purple_5: #613583; 31 | $brown_1: #cdab8f; 32 | $brown_2: #b5835a; 33 | $brown_3: #986a44; 34 | $brown_4: #865e3c; 35 | $brown_5: #63452c; 36 | $light_1: #ffffff; 37 | $light_2: #f6f5f4; 38 | $light_3: #deddda; 39 | $light_4: #c0bfbc; 40 | $light_5: #9a9996; 41 | $dark_1: #77767b; 42 | $dark_2: #5e5c64; 43 | $dark_3: #3d3846; 44 | $dark_4: #241f31; 45 | $dark_5: #000000; 46 | 47 | // Sass thinks we're using the colors in the variables as strings and may shoot 48 | // warning, it's innocuous and can be defeated by using #{"" + $var}. 49 | 50 | @define-color blue_1 #{"" + $blue_1}; 51 | @define-color blue_2 #{"" + $blue_2}; 52 | @define-color blue_3 #{"" + $blue_3}; 53 | @define-color blue_4 #{"" + $blue_4}; 54 | @define-color blue_5 #{"" + $blue_5}; 55 | @define-color green_1 #{"" + $green_1}; 56 | @define-color green_2 #{"" + $green_2}; 57 | @define-color green_3 #{"" + $green_3}; 58 | @define-color green_4 #{"" + $green_4}; 59 | @define-color green_5 #{"" + $green_5}; 60 | @define-color yellow_1 #{"" + $yellow_1}; 61 | @define-color yellow_2 #{"" + $yellow_2}; 62 | @define-color yellow_3 #{"" + $yellow_3}; 63 | @define-color yellow_4 #{"" + $yellow_4}; 64 | @define-color yellow_5 #{"" + $yellow_5}; 65 | @define-color orange_1 #{"" + $orange_1}; 66 | @define-color orange_2 #{"" + $orange_2}; 67 | @define-color orange_3 #{"" + $orange_3}; 68 | @define-color orange_4 #{"" + $orange_4}; 69 | @define-color orange_5 #{"" + $orange_5}; 70 | @define-color red_1 #{"" + $red_1}; 71 | @define-color red_2 #{"" + $red_2}; 72 | @define-color red_3 #{"" + $red_3}; 73 | @define-color red_4 #{"" + $red_4}; 74 | @define-color red_5 #{"" + $red_5}; 75 | @define-color purple_1 #{"" + $purple_1}; 76 | @define-color purple_2 #{"" + $purple_2}; 77 | @define-color purple_3 #{"" + $purple_3}; 78 | @define-color purple_4 #{"" + $purple_4}; 79 | @define-color purple_5 #{"" + $purple_5}; 80 | @define-color brown_1 #{"" + $brown_1}; 81 | @define-color brown_2 #{"" + $brown_2}; 82 | @define-color brown_3 #{"" + $brown_3}; 83 | @define-color brown_4 #{"" + $brown_4}; 84 | @define-color brown_5 #{"" + $brown_5}; 85 | @define-color light_1 #{"" + $light_1}; 86 | @define-color light_2 #{"" + $light_2}; 87 | @define-color light_3 #{"" + $light_3}; 88 | @define-color light_4 #{"" + $light_4}; 89 | @define-color light_5 #{"" + $light_5}; 90 | @define-color dark_1 #{"" + $dark_1}; 91 | @define-color dark_2 #{"" + $dark_2}; 92 | @define-color dark_3 #{"" + $dark_3}; 93 | @define-color dark_4 #{"" + $dark_4}; 94 | @define-color dark_5 #{"" + $dark_5}; 95 | 96 | -------------------------------------------------------------------------------- /src/sass/_settings.scss: -------------------------------------------------------------------------------- 1 | // This file contains the default variables and settings. 2 | $variant: null !default; // Defined in gtk.scss and gtk-dark.scss 3 | $toolkit: null !default; // Only defined as 'gtk4' when needed 4 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 5 | $asset_suffix: if($variant=='dark', '-dark', ''); 6 | $backdrop_transition: 200ms ease-out; 7 | $button_transition: background 200ms $ease-out-quad, 8 | box-shadow 200ms $ease-out-quad; 9 | $button_radius: 9px; 10 | $menu_radius: 9px; 11 | $window_radius: calc($button_radius + 6px); 12 | $popover_radius: calc($menu_radius + 6px); 13 | $card_radius: 12px; 14 | $dialog_radius: calc($button_radius + 6px); 15 | $check_radius: 6px; 16 | $titlebutton_size: 24px; 17 | $disabled_opacity: 0.5; 18 | -------------------------------------------------------------------------------- /src/sass/gtk-dark.scss: -------------------------------------------------------------------------------- 1 | // This is the main sass file for the dark variant 2 | 3 | @use 'settings' with ($variant: 'dark'); 4 | 5 | @use 'colors-public'; 6 | @use 'common'; 7 | @use 'widgets/views'; 8 | @use 'widgets/labels'; 9 | @use 'widgets/spinner'; 10 | @use 'widgets/entries'; 11 | @use 'widgets/buttons'; 12 | @use 'widgets/links'; 13 | @use 'widgets/spin-button'; 14 | @use 'widgets/combo-box'; 15 | @use 'widgets/toolbars'; 16 | @use 'widgets/header-bar'; 17 | @use 'widgets/pathbar'; 18 | @use 'widgets/treeviews'; 19 | @use 'widgets/menus'; 20 | @use 'widgets/popovers'; 21 | @use 'widgets/notebook'; 22 | @use 'widgets/scrolling'; 23 | @use 'widgets/switch'; 24 | @use 'widgets/checks'; 25 | @use 'widgets/scale'; 26 | @use 'widgets/progress-bar'; 27 | @use 'widgets/level-bar'; 28 | @use 'widgets/print-dialog'; 29 | @use 'widgets/frame'; 30 | @use 'widgets/lists'; 31 | @use 'widgets/app-notification'; 32 | @use 'widgets/expander'; 33 | @use 'widgets/calendar'; 34 | @use 'widgets/message-dialog'; 35 | @use 'widgets/sidebars'; 36 | @use 'widgets/file-chooser'; 37 | @use 'widgets/paned'; 38 | @use 'widgets/info-bar'; 39 | @use 'widgets/tooltip'; 40 | @use 'widgets/color-chooser'; 41 | @use 'widgets/misc'; 42 | @use 'widgets/window'; 43 | @use 'libhandy'; 44 | @use 'libgranite'; 45 | @use 'apps'; 46 | -------------------------------------------------------------------------------- /src/sass/gtk.scss: -------------------------------------------------------------------------------- 1 | // This is the main sass file for the light variant 2 | 3 | @use 'settings' with ($variant: 'light'); 4 | 5 | @use 'colors-public'; 6 | @use 'common'; 7 | @use 'widgets/views'; 8 | @use 'widgets/labels'; 9 | @use 'widgets/spinner'; 10 | @use 'widgets/entries'; 11 | @use 'widgets/buttons'; 12 | @use 'widgets/links'; 13 | @use 'widgets/spin-button'; 14 | @use 'widgets/combo-box'; 15 | @use 'widgets/toolbars'; 16 | @use 'widgets/header-bar'; 17 | @use 'widgets/pathbar'; 18 | @use 'widgets/treeviews'; 19 | @use 'widgets/menus'; 20 | @use 'widgets/popovers'; 21 | @use 'widgets/notebook'; 22 | @use 'widgets/scrolling'; 23 | @use 'widgets/switch'; 24 | @use 'widgets/checks'; 25 | @use 'widgets/scale'; 26 | @use 'widgets/progress-bar'; 27 | @use 'widgets/level-bar'; 28 | @use 'widgets/print-dialog'; 29 | @use 'widgets/frame'; 30 | @use 'widgets/lists'; 31 | @use 'widgets/app-notification'; 32 | @use 'widgets/expander'; 33 | @use 'widgets/calendar'; 34 | @use 'widgets/message-dialog'; 35 | @use 'widgets/sidebars'; 36 | @use 'widgets/file-chooser'; 37 | @use 'widgets/paned'; 38 | @use 'widgets/info-bar'; 39 | @use 'widgets/tooltip'; 40 | @use 'widgets/color-chooser'; 41 | @use 'widgets/misc'; 42 | @use 'widgets/window'; 43 | @use 'libhandy'; 44 | @use 'libgranite'; 45 | @use 'apps'; 46 | -------------------------------------------------------------------------------- /src/sass/gtk4/libadwaita-tweaks.scss: -------------------------------------------------------------------------------- 1 | // Tweaks for the gtk-4.0 theme 2 | // These fixes are not for libadwaita apps 3 | 4 | @use '../functions' as *; 5 | @use '../settings' as *; 6 | 7 | // https://github.com/lassekongo83/adw-gtk3/issues/272 8 | @define-color accent_bg_color @blue_3; 9 | @define-color accent_fg_color white; 10 | 11 | :root { 12 | --accent-blue: #3584e4; 13 | --accent-teal: #2190a4; 14 | --accent-green: #3a944a; 15 | --accent-yellow: #c88800; 16 | --accent-orange: #ed5b00; 17 | --accent-red: #e62d42; 18 | --accent-pink: #d56199; 19 | --accent-purple: #9141ac; 20 | --accent-slate: #6f8396; 21 | 22 | --accent-bg-color: var(--accent-blue); 23 | --accent-fg-color: @accent_fg_color; 24 | 25 | --window-bg-color: @window_bg_color; 26 | --headerbar-bg-color: @headerbar_bg_color; 27 | } 28 | 29 | // Some apps don't like transparency or don't style this 30 | // https://github.com/lassekongo83/adw-gtk3/issues/232 31 | notebook > header { 32 | background-color: var(--window-bg-color); 33 | } 34 | 35 | // Better osd 36 | .osd { 37 | &, button { border-radius: 24px; } 38 | button { margin: 2px; } 39 | } 40 | 41 | // Default decoration window controls 42 | headerbar { 43 | // Line up the buttons with csd headerbar buttons 44 | &.default-decoration windowcontrols { 45 | > button { 46 | margin: 0 1px; 47 | > image { padding: 4px; } // Make sure they have the same size 48 | } 49 | 50 | &.start { margin-left: 3px; } 51 | &.end { margin-right: 3px; } 52 | } 53 | } 54 | 55 | 56 | // ****** 57 | // Apps * 58 | // ****** 59 | 60 | // Chromium 61 | .background.chromium { 62 | $chr_dark_bg: gtkshade(var(--headerbar-bg-color), 1.2); 63 | // Will crash the browser if mixed with any color that is transparent! 64 | background-color: if($variant == 'light', var(--window-bg-color), $chr_dark_bg); 65 | 66 | selection { 67 | &, &:focus { 68 | background-color: var(--accent-bg-color); 69 | color: var(--accent-fg-color); 70 | } 71 | } 72 | 73 | windowcontrols > button { 74 | background-color: color-mix(in srgb, currentColor 10%, transparent); 75 | min-width: 24px; 76 | padding: 0; 77 | box-shadow: none; 78 | border-radius: 100%; 79 | margin: 0 4px; // doesn't work on the far edges of the tab-bar 80 | transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 81 | &:hover { background-color: color-mix(in srgb, currentColor 15%, transparent); } 82 | &:active { background-color: color-mix(in srgb, currentColor 30%, transparent); } 83 | } 84 | } 85 | 86 | // https://github.com/lassekongo83/adw-gtk3/issues/298 87 | tooltip.background.chromium { 88 | background-color: RGB(0 0 6 / 80%); 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/sass/gtk4/theme-dark.scss: -------------------------------------------------------------------------------- 1 | @use '../settings' with ( 2 | $variant: 'dark', 3 | $toolkit: 'gtk4' 4 | ); 5 | 6 | @use 'libadwaita-tweaks'; 7 | -------------------------------------------------------------------------------- /src/sass/gtk4/theme-light.scss: -------------------------------------------------------------------------------- 1 | @use '../settings' with ( 2 | $variant: 'light', 3 | $toolkit: 'gtk4' 4 | ); 5 | 6 | @use 'libadwaita-tweaks'; 7 | -------------------------------------------------------------------------------- /src/sass/widgets/_app-notification.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward '../common'; 3 | @forward 'buttons'; 4 | 5 | .app-notification, 6 | .app-notification.frame { 7 | @extend %osd; 8 | 9 | padding: 10px; 10 | border-radius: 0 0 calc($button_radius + 6px) calc($button_radius + 6px); 11 | background-color: $osd_bg_color; 12 | background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent 2px); 13 | background-clip: padding-box; 14 | border: none; 15 | 16 | &:backdrop { 17 | background-image: none; 18 | transition: $backdrop_transition; 19 | } 20 | 21 | button { @extend %osd_button; } 22 | 23 | border { border: none; } 24 | } 25 | -------------------------------------------------------------------------------- /src/sass/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | calendar { 5 | color: $view_fg_color; 6 | border: 1px solid $border_color; 7 | 8 | &:selected, &:backdrop:selected { 9 | background-color: $accent_bg_color; 10 | color: $accent_fg_color; 11 | border-radius: $button_radius; 12 | } 13 | 14 | &.header { 15 | border-bottom-color: $border_color; 16 | 17 | &:backdrop { border-bottom-color: $border_color; } 18 | } 19 | 20 | &.button { 21 | @extend %undecorated_button; 22 | 23 | color: $view_fg_color; 24 | 25 | &:hover { background-color: $hover_color; } 26 | &:active { background-color: $active_color; } 27 | &:checked { 28 | background-color: $selected_color; 29 | &:hover { background-color: $selected_hover_color; } 30 | } 31 | &:backdrop { color: $backdrop_fg_color; } 32 | &:disabled { color: $disabled_fg_color; } 33 | } 34 | 35 | &.highlight { 36 | color: $disabled_fg_color; 37 | 38 | &:backdrop { color: $backdrop_disabled_color; } 39 | } 40 | 41 | &:backdrop { 42 | color: $backdrop_text_color; 43 | border-color: $backdrop_borders_color; 44 | } 45 | 46 | &:indeterminate { color: gtkalpha(currentColor, 0.1); } 47 | } 48 | -------------------------------------------------------------------------------- /src/sass/widgets/_checks.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | //selection-mode 4 | @each $check_state, $check_icon, $check_color, $check_background in 5 | ('', 'none', 'transparent', $checkradio_bg_color), 6 | (':hover', 'none', 'transparent', $checkradio_bg_color), 7 | (':active', 'none', 'transparent', $checkradio_bg_color), 8 | (':backdrop', 'none', 'transparent', '#{gtkalpha($window_fg_color, .5)}'), 9 | (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), 10 | (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), 11 | (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), 12 | (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{gtkalpha($window_fg_color, .5)}'), { 13 | 14 | .view.content-view.check#{$check_state}:not(list), 15 | .content-view:not(list) check#{$check_state} { 16 | margin: 4px; 17 | min-width: 32px; 18 | min-height: 32px; 19 | color: #{$check_color}; 20 | background-color: #{$check_background}; 21 | border-radius: 5px; 22 | background-image: none; 23 | transition: 200ms; 24 | box-shadow: none; 25 | border-width: 0; 26 | -gtk-icon-source: #{$check_icon}; 27 | -gtk-icon-shadow: none; 28 | } 29 | } 30 | 31 | checkbutton.text-button, radiobutton.text-button { 32 | // this is for a nice focus on check and radios text 33 | padding: 2px 0; 34 | outline-offset: 0; 35 | 36 | label:not(:only-child) { 37 | &:first-child { margin-left: 4px; } 38 | &:last-child { margin-right: 4px; } 39 | } 40 | } 41 | 42 | check, 43 | radio { 44 | margin: 0 4px; 45 | padding: 1px; 46 | min-height: 14px; 47 | min-width: 14px; 48 | border: 2px solid; 49 | transition: $button_transition; 50 | -gtk-icon-source: none; 51 | 52 | &:only-child { margin: 0; } 53 | 54 | popover & { // when in a popover add more space between the label and the check, reset the other side margin. 55 | // See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details. 56 | &.left:dir(rtl) { 57 | margin-left: 0; 58 | margin-right: 12px; 59 | } 60 | 61 | &.right:dir(ltr) { 62 | margin-left: 12px; 63 | margin-right: 0; 64 | } 65 | } 66 | 67 | & { 68 | // for unchecked 69 | $_c: transparent; //if($variant=='light', white, $bg_color); 70 | 71 | @each $state, $t in ("", "normal"), 72 | (":hover", "hover"), 73 | (":active", "active"), 74 | (":disabled", "disabled") { 75 | &#{$state} { 76 | @include check($t, $_c); 77 | } 78 | } 79 | } 80 | 81 | & { 82 | // for checked 83 | @each $t in (':checked'), (':indeterminate') { 84 | &#{$t} { 85 | @each $state, $t in ("", "normal"), 86 | (":hover", "hover"), 87 | (":active", "active"), 88 | (":disabled", "disabled") { 89 | &#{$state} { 90 | @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true); 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | @if $variant == 'light' { 98 | // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background 99 | // color, hence we need special casing. 100 | row:selected & { border-color: $checkradio_borders_color; } 101 | } 102 | 103 | .osd & { 104 | @include button(osd); 105 | 106 | &:hover { @include button(osd); } 107 | &:active { @include button(osd-active); } 108 | &:backdrop { @include button(osd-backdrop); } 109 | &:disabled { @include button(osd-disabled); } 110 | } 111 | 112 | menu menuitem & { 113 | margin: 0; // this is a workaround for a menu check/radio size allocation issue 114 | padding: 0; 115 | 116 | &, &:not(:checked), &:checked, &:indeterminate { 117 | &, &:hover, &:disabled { //FIXME use button reset mixin 118 | min-height: 14px; 119 | min-width: 14px; 120 | padding: 1px; 121 | background-image: none; 122 | background-color: transparent; 123 | box-shadow: none; 124 | -gtk-icon-shadow: none; 125 | color: inherit; 126 | border-width: 1px; 127 | border-color: if($variant=='light', gtkalpha(currentColor, 0.4), gtkalpha(currentColor, 0.6)); 128 | } 129 | } 130 | } 131 | } 132 | 133 | %check, 134 | check { 135 | border-radius: $check_radius; 136 | 137 | &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), 138 | -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); } 139 | 140 | &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), 141 | -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); 142 | } 143 | 144 | menu menuitem & { 145 | &, &:checked, &:indeterminate { 146 | &, &:hover, &:disabled { 147 | border: none; 148 | } 149 | } 150 | } 151 | } 152 | 153 | %radio, 154 | radio { 155 | border-radius: 100%; 156 | 157 | &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), 158 | -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); } 159 | 160 | &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), 161 | -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } 162 | } 163 | 164 | menu menuitem { 165 | radio, 166 | check { 167 | &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; } 168 | } 169 | } 170 | 171 | treeview.view check, 172 | treeview.view radio { 173 | &:selected { 174 | &:focus, & { 175 | color: $checkradio_fg_color; 176 | 177 | @if $variant == 'light' { border-color: $selected_borders_color; } 178 | } 179 | } 180 | } 181 | 182 | treeview.view check { 183 | &:selected { 184 | &:focus, & { 185 | border-radius: $check_radius; 186 | } 187 | } 188 | } 189 | 190 | treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround 191 | -------------------------------------------------------------------------------- /src/sass/widgets/_color-chooser.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | colorswatch { 4 | // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one 5 | // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is 6 | // applied to the overlay box. 7 | 8 | &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state 9 | 10 | $_colorswatch_radius: $button_radius; 11 | 12 | // base color corners rounding 13 | // to avoid the artifacts caused by rounded corner anti-aliasing the base color 14 | // sports a bigger radius. 15 | // nth-child is needed by the custom color strip. 16 | 17 | &.top { 18 | border-top-left-radius: calc($_colorswatch_radius + 0.5px); 19 | border-top-right-radius: calc($_colorswatch_radius + 0.5px); 20 | 21 | overlay { 22 | border-top-left-radius: $_colorswatch_radius; 23 | border-top-right-radius: $_colorswatch_radius; 24 | } 25 | } 26 | 27 | &.bottom { 28 | border-bottom-left-radius: calc($_colorswatch_radius + 0.5px); 29 | border-bottom-right-radius: calc($_colorswatch_radius + 0.5px); 30 | 31 | overlay { 32 | border-bottom-left-radius: $_colorswatch_radius; 33 | border-bottom-right-radius: $_colorswatch_radius; 34 | } 35 | } 36 | 37 | &.left, 38 | &:first-child:not(.top) { 39 | border-top-left-radius: calc($_colorswatch_radius + 0.5px); 40 | border-bottom-left-radius: calc($_colorswatch_radius + 0.5px); 41 | 42 | overlay { 43 | border-top-left-radius: $_colorswatch_radius; 44 | border-bottom-left-radius: $_colorswatch_radius; 45 | } 46 | } 47 | 48 | &.right, 49 | &:last-child:not(.bottom) { 50 | border-top-right-radius: calc($_colorswatch_radius + 0.5px); 51 | border-bottom-right-radius: calc($_colorswatch_radius + 0.5px); 52 | 53 | overlay { 54 | border-top-right-radius: $_colorswatch_radius; 55 | border-bottom-right-radius: $_colorswatch_radius; 56 | } 57 | } 58 | 59 | &.dark { 60 | outline-color: transparentize(white, 0.4); 61 | 62 | overlay { 63 | color: white; 64 | 65 | &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } 66 | } 67 | } 68 | 69 | &.light { 70 | outline-color: transparentize(black, 0.4); 71 | 72 | overlay { 73 | color: black; 74 | 75 | &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } 76 | } 77 | } 78 | 79 | &:drop(active) { 80 | box-shadow: none; 81 | 82 | &.light overlay { 83 | border-color: $drop_target_color; 84 | box-shadow: inset 0 0 0 2px if($variant == 'light', gtkshade($drop_target_color, 0.93), $borders_color), 85 | inset 0 0 0 1px $drop_target_color; 86 | } 87 | 88 | &.dark overlay { 89 | border-color: $drop_target_color; 90 | box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), 91 | inset 0 0 0 1px $drop_target_color; 92 | } 93 | } 94 | 95 | overlay { 96 | border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); 97 | 98 | &:hover { 99 | box-shadow: inset 0 1px transparentize(white, 0.6), 100 | inset 0 -1px transparentize(black, 0.8); 101 | } 102 | } 103 | 104 | &#add-color-button { 105 | border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; 106 | 107 | &:only-child { border-radius: $_colorswatch_radius; } 108 | 109 | overlay { 110 | @include button(normal); 111 | 112 | &:hover { @include button(hover); } 113 | } 114 | } 115 | 116 | &:disabled { 117 | opacity: $disabled_opacity; 118 | 119 | overlay { 120 | border-color: transparentize(black, 0.4); 121 | box-shadow: none; 122 | } 123 | } 124 | 125 | row:selected & { box-shadow: 0 0 0 2px $accent_fg_color; } 126 | 127 | &#editor-color-sample { 128 | border-radius: 4px; 129 | 130 | overlay { border-radius: 4.5px; } 131 | } 132 | } 133 | 134 | // colorscale popup 135 | colorchooser .popover.osd { border-radius: 5px; } 136 | -------------------------------------------------------------------------------- /src/sass/widgets/_combo-box.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | combobox { 5 | arrow { 6 | -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); 7 | min-height: 16px; 8 | min-width: 16px; 9 | } 10 | 11 | &.linked { 12 | button:nth-child(2) { 13 | &:dir(ltr) { @extend %linked_right; } 14 | &:dir(rtl) { @extend %linked_left; } 15 | } 16 | } 17 | 18 | &:drop(active) { // FIXME: untested 19 | box-shadow: none; 20 | 21 | button.combo { @extend %button_basic_drop_active; } 22 | } 23 | } 24 | 25 | // the combo is a composite widget so the way we do button linking doesn't 26 | // work, special case needed. See 27 | // https://bugzilla.gnome.org/show_bug.cgi?id=733979 28 | 29 | .linked:not(.vertical) > combobox > box > button.combo { @extend %linked_middle; } 30 | .linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left; } 31 | .linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_right; } 32 | .linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked_only_child; } 33 | 34 | .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } 35 | .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_top; } 36 | .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_bottom; } 37 | .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; } 38 | -------------------------------------------------------------------------------- /src/sass/widgets/_entries.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | @forward 'views'; 4 | 5 | %entry, 6 | entry { 7 | %entry_basic, & { 8 | min-height: 34px; 9 | padding-left: 8px; 10 | padding-right: 8px; 11 | border: 1px solid; 12 | border-radius: $button_radius; 13 | transition: all 200ms $ease-out-quad; 14 | 15 | @include entry(normal); 16 | 17 | image { // icons inside the entry 18 | &.left { margin-right: 6px; } 19 | &.right { margin-left: 6px; } 20 | } 21 | 22 | &.flat { 23 | &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & { 24 | min-height: 0; 25 | padding: 2px; 26 | background-color: transparent; 27 | border-color: transparent; 28 | border-radius: 0; 29 | } 30 | } 31 | 32 | &:focus { @include entry(focus); } 33 | &:disabled { @include entry(disabled); } 34 | 35 | selection { @extend %selected_items; } 36 | 37 | // entry error and warning style 38 | @each $e_type, $e_color in (error, $error_bg_color), 39 | (warning, $warning_bg_color) { 40 | &.#{$e_type} { 41 | color: $e_color; 42 | border-color: entry_focus_border($e_color); 43 | &:focus { @include entry(focus, $e_color); } 44 | selection { background-color: $e_color; } 45 | } 46 | } 47 | 48 | image { // entry icons colors 49 | color: gtkmix($window_fg_color, $view_bg_color, 80%); 50 | &:hover { color: $window_fg_color; } 51 | &:active { color: $accent_bg_color; } 52 | } 53 | 54 | &:drop(active) { 55 | &:focus, & { 56 | border-color: $drop_target_color; 57 | box-shadow: inset 0 0 0 1px $drop_target_color; 58 | } 59 | } 60 | 61 | .osd & { 62 | @include entry(osd); 63 | &:focus { @include entry(osd-focus); } 64 | &:backdrop { @include entry(osd-backdrop); } 65 | &:disabled { @include entry(osd-disabled); } 66 | } 67 | } 68 | 69 | progress { 70 | margin: 2px -6px; 71 | background-color: transparent; 72 | background-image: none; 73 | border-radius: 0; 74 | border-width: 0 0 2px; 75 | border-color: $progress_bg_color; 76 | border-style: solid; 77 | box-shadow: none; 78 | } 79 | 80 | // linked entries 81 | .linked:not(.vertical) > & { @extend %linked; } 82 | .linked:not(.vertical) > &:focus + &, 83 | .linked:not(.vertical) > &:focus + button, 84 | .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } 85 | 86 | .linked:not(.vertical) > &:focus.error + &, 87 | .linked:not(.vertical) > &:focus.error + button, 88 | .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_bg_color); } 89 | 90 | .linked:not(.vertical) > &:drop(active) + &, 91 | .linked:not(.vertical) > &:drop(active) + button, 92 | .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } 93 | 94 | // Vertically linked entries 95 | // FIXME: take care of "colored" entries 96 | .linked.vertical > & { 97 | @extend %linked_vertical; 98 | 99 | // brighter border between linked entries 100 | &:not(:disabled) + entry:not(:disabled), 101 | &:not(:disabled) + %entry:not(:disabled) { 102 | border-top-color: gtkmix($border_color, $view_bg_color, 30%); 103 | 104 | &:backdrop { border-top-color: gtkmix($backdrop_borders_color, $backdrop_base_color, 30%); } 105 | } 106 | 107 | // brighter border between linked disabled entries 108 | &:disabled + %entry:disabled, 109 | &:disabled + entry:disabled { border-top-color: gtkmix($border_color, $view_bg_color, 30%); } 110 | 111 | // color back the top border of a linked focused entry following another entry. 112 | // :not(:only-child) is a specificity bump hack. 113 | + %entry:focus:not(:only-child), 114 | + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } 115 | 116 | + %entry:focus.error:not(:only-child), 117 | + entry:focus.error:not(:only-child) { border-top-color: entry_focus_border($error_bg_color); } 118 | 119 | + %entry:drop(active):not(:only-child), 120 | + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } 121 | 122 | // this takes care of coloring the top border of the focused entry subsequent widget. 123 | // :not(:only-child) is a specificity bump hack. 124 | &:focus:not(:only-child) { 125 | + %entry, 126 | + entry, 127 | + button, 128 | + combobox > box > button.combo { border-top-color: entry_focus_border(); } 129 | } 130 | 131 | &:focus.error:not(:only-child) { 132 | + %entry, 133 | + entry, 134 | + button, 135 | + combobox > box > button.combo { border-top-color: entry_focus_border($error_bg_color); } 136 | } 137 | 138 | &:drop(active):not(:only-child) { 139 | + %entry, 140 | + entry, 141 | + button, 142 | + combobox > box > button.combo { border-top-color: $drop_target_color; } 143 | } 144 | } 145 | 146 | &.error { color: $error_bg_color; } 147 | } 148 | 149 | treeview entry { 150 | &:focus { 151 | &:dir(rtl), &:dir(ltr) { // specificity bump hack 152 | background-color: $view_bg_color; 153 | transition-property: color, background; 154 | } 155 | } 156 | 157 | &.flat, & { 158 | border-radius: 0; 159 | background-image: none; 160 | background-color: $view_bg_color; 161 | 162 | &:focus { border-color: $accent_bg_color; } 163 | } 164 | } 165 | 166 | .entry-tag { 167 | // sizing 168 | padding: 5px; 169 | 170 | margin-top: 2px; 171 | margin-bottom: 2px; 172 | 173 | // side margins: compensate the entry padding with a negative margin 174 | // then the negative margin itself 175 | :dir(ltr) & { 176 | margin-left: 8px; 177 | margin-right: -5px; 178 | } 179 | :dir(rtl) & { 180 | margin-left: -5px; 181 | margin-right: 8px; 182 | } 183 | 184 | border-style: none; 185 | 186 | $_entry_tag_color: if($variant=='light', $accent_fg_color, $view_bg_color); 187 | color: $_entry_tag_color; 188 | 189 | $_entry_tag_bg: if($variant=='light', $accent_bg_color, gtkmix($window_fg_color, $view_bg_color, 50%)); 190 | background-color: $_entry_tag_bg; 191 | 192 | &:hover { 193 | background-color: gtkmix(white, $_entry_tag_bg, 10%); 194 | } 195 | 196 | :backdrop & { 197 | color: $backdrop_base_color; 198 | background-color: if($variant=='light', $accent_bg_color, 199 | gtkmix($backdrop_fg_color, $backdrop_base_color, 50%)); 200 | } 201 | 202 | &.button { 203 | background-color: transparent; 204 | color: gtkalpha($_entry_tag_color, 0.7); 205 | } 206 | 207 | :not(:backdrop) &.button { 208 | &:hover { 209 | border: 1px solid $_entry_tag_bg; 210 | color: $_entry_tag_color; 211 | } 212 | &:active { 213 | background-color: $_entry_tag_bg; 214 | color: gtkalpha($_entry_tag_color, 0.7); 215 | } 216 | } 217 | } 218 | 219 | -------------------------------------------------------------------------------- /src/sass/widgets/_expander.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | expander { 4 | title > arrow { 5 | min-width: 16px; 6 | min-height: 16px; 7 | -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); 8 | &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } 9 | 10 | &:hover { color: gtkmix(white,$window_fg_color,30%); } //only lightens the arrow 11 | &:disabled { color: $disabled_fg_color; } 12 | &:disabled:backdrop { color: $backdrop_disabled_color; } 13 | 14 | &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/sass/widgets/_file-chooser.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | $_placesidebar_icons_opacity: 0.7; 5 | 6 | row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons 7 | // see bug #786613 for details 8 | // on this oddity 9 | 10 | placessidebar { 11 | > viewport.frame { border-style: none; } 12 | 13 | row { 14 | // Needs overriding of the GtkListBoxRow padding 15 | min-height: 36px; 16 | padding: 0px; 17 | 18 | // Using margins/padding directly in the SidebarRow 19 | // will make the animation of the new bookmark row jump 20 | > revealer { padding: 0 14px; } 21 | 22 | &:selected { color: $accent_fg_color; } 23 | 24 | &:disabled { color: $disabled_fg_color; } 25 | 26 | &:backdrop { 27 | color: $backdrop_fg_color; 28 | 29 | &:selected { color: $backdrop_selected_fg_color; } 30 | 31 | &:disabled { color: $backdrop_disabled_color; } 32 | } 33 | 34 | image.sidebar-icon { 35 | &:dir(ltr) { padding-right: 8px; } 36 | &:dir(rtl) { padding-left: 8px; } 37 | } 38 | 39 | label.sidebar-label { 40 | &:dir(ltr) { padding-right: 2px; } 41 | &:dir(rtl) { padding-left: 2px; } 42 | } 43 | 44 | @at-root button.sidebar-button { 45 | @extend %button_basic_flat; 46 | @extend %button_selected_flat; 47 | 48 | min-height: 26px; 49 | min-width: 26px; 50 | margin-top: 3px; 51 | margin-bottom: 3px; 52 | padding: 0; 53 | border-radius: 100%; 54 | -gtk-outline-radius: 100%; 55 | 56 | &:not(:hover):not(:active), 57 | &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }} 58 | } 59 | 60 | // in the sidebar case it makes no sense to click the selected row 61 | &:selected:active { box-shadow: none; } 62 | 63 | &.sidebar-placeholder-row { 64 | padding: 0 8px; 65 | min-height: 2px; 66 | background-image: image($drop_target_color); 67 | background-clip: content-box; 68 | } 69 | 70 | &.sidebar-new-bookmark-row { color: $accent_bg_color; } 71 | 72 | &:drop(active):not(:disabled) { 73 | color: $accent_bg_color; 74 | box-shadow: inset 0 1px $drop_target_color, 75 | inset 0 -1px $drop_target_color; 76 | 77 | &:selected { 78 | color: $accent_fg_color; 79 | background-color: $drop_target_color; 80 | } 81 | } 82 | } 83 | } 84 | 85 | placesview { 86 | .server-list-button > image { 87 | transition: 200ms $ease-out-quad; 88 | -gtk-icon-transform: rotate(0turn); 89 | } 90 | 91 | .server-list-button:checked > image { 92 | transition: 200ms $ease-out-quad; 93 | -gtk-icon-transform: rotate(-0.5turn); 94 | } 95 | 96 | row.activatable:hover { background-color: transparent; } 97 | 98 | // this selects the "connect to server" label 99 | > actionbar > revealer > box > label { 100 | padding-left: 8px; 101 | padding-right: 8px; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/sass/widgets/_frame.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | frame > border, 4 | .frame { 5 | box-shadow: none; 6 | margin: 0; 7 | padding: 0; 8 | //border-radius: 0; 9 | border: 1px solid $borders_color; 10 | 11 | &.flat { border-style: none; } 12 | } 13 | 14 | actionbar > revealer > box { 15 | padding: 6px; 16 | border-top: 1px solid $borders_color; 17 | } 18 | 19 | scrolledwindow { 20 | viewport.frame { // avoid double borders when viewport inside scrolled window 21 | border-style: none; 22 | } 23 | 24 | // This is used when content is touch-dragged past boundaries. 25 | // draws a box on top of the content, the size changes programmatically. 26 | overshoot { 27 | &.top { 28 | @include overshoot(top); 29 | 30 | &:backdrop { @include overshoot(top, backdrop); } 31 | } 32 | 33 | &.bottom { 34 | @include overshoot(bottom); 35 | 36 | &:backdrop { @include overshoot(bottom, backdrop); } 37 | } 38 | 39 | &.left { 40 | @include overshoot(left); 41 | 42 | &:backdrop { @include overshoot(left, backdrop); } 43 | } 44 | 45 | &.right { 46 | @include overshoot(right); 47 | 48 | &:backdrop { @include overshoot(right, backdrop); } 49 | } 50 | } 51 | 52 | 53 | junction { // the small square between two scrollbars 54 | border-color: transparent; 55 | // the border image is used to add the missing dot between the borders, details, details, details... 56 | border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; 57 | background-color: $scrollbar_bg_color; 58 | 59 | &:dir(rtl) { border-image-slice: 0 1 0 0; } 60 | } 61 | } 62 | 63 | //vbox and hbox separators 64 | separator { 65 | background: $borders_color; 66 | min-width: 1px; 67 | min-height: 1px; 68 | } 69 | -------------------------------------------------------------------------------- /src/sass/widgets/_info-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | infobar { 4 | border-style: none; 5 | 6 | @each $i_type, $i_color in (info, $accent_bg_color), 7 | (question, $accent_bg_color), 8 | (warning, $warning_bg_color), 9 | (error, $error_bg_color) { 10 | &.#{$i_type} > revealer > box { 11 | background-color: gtkmix($i_color, $window_bg_color, 30%); 12 | color: $window_fg_color; 13 | text-shadow: none; 14 | &:backdrop { color: $backdrop_fg_color; } 15 | } 16 | 17 | &.#{$i_type} button { 18 | background-color: gtkmix($i_color, $window_bg_color, 50%); 19 | &:hover { background-color: gtkmix($i_color, $window_bg_color, 65%); } 20 | &:checked, &:active { background-color: gtkmix($i_color, $window_bg_color, 80%); } 21 | &:backdrop:not(:disabled), &:not(:disabled) { 22 | label, & { color: $window_fg_color; } 23 | } 24 | &:disabled { 25 | background-color: gtkmix($i_color, $window_bg_color, 40%); 26 | label, & { color: gtkalpha(gtkmix($window_fg_color, $i_color, 70%), .6); } 27 | } 28 | } 29 | 30 | &.action.#{$i_type}:hover > revealer > box { 31 | background-color: gtkmix($i_color, $window_bg_color, 40%); 32 | box-shadow: inset 0 -1px gtkmix($i_color, $window_bg_color, 70%); 33 | } 34 | } 35 | 36 | .close { 37 | min-width: 18px; 38 | min-height: 18px; 39 | padding: 4px; 40 | border-radius: 50%; 41 | } 42 | 43 | selection { background-color: gtkshade($window_bg_color, 0.9); } 44 | *:link { color: $link_color; } 45 | } 46 | -------------------------------------------------------------------------------- /src/sass/widgets/_labels.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | %selected_items { 4 | background-color: $view_selected_color; 5 | 6 | @at-root %nobg_selected_items, & { 7 | color: $window_fg_color; 8 | 9 | @at-root %selected_items_disabled, 10 | &:disabled { 11 | //color: gtkmix($accent_fg_color, $accent_bg_color, 50%); 12 | } 13 | 14 | @at-root %selected_items_backdrop, 15 | &:backdrop { 16 | //color: $accent_fg_color; 17 | //&:disabled { color: gtkmix($backdrop_selected_fg_color, $accent_bg_color, 30%); } 18 | } 19 | } 20 | } 21 | 22 | label { 23 | caret-color: currentColor; // this shouldn't be needed. 24 | 25 | &.separator { 26 | @extend .dim-label; 27 | } 28 | 29 | &:selected { @extend %nobg_selected_items; } 30 | 31 | selection { 32 | background-color: $accent_bg_color; 33 | color: $accent_fg_color; 34 | } 35 | 36 | &:disabled { 37 | color: $disabled_fg_color; 38 | 39 | button & { color: inherit; } 40 | 41 | &:backdrop { 42 | color: $disabled_fg_color; 43 | 44 | button & { color: inherit; } 45 | } 46 | 47 | selection { @extend %selected_items_disabled; } 48 | } 49 | 50 | &:backdrop { 51 | selection { @extend %selected_items_backdrop; } 52 | } 53 | 54 | &.error { 55 | color: $error_bg_color; 56 | &:disabled { color: gtkalpha($error_bg_color, $disabled_opacity); } 57 | &:disabled:backdrop { color: gtkalpha($error_bg_color, 0.4); } 58 | } 59 | } 60 | 61 | assistant { 62 | &.csd .sidebar { border-top-style: none; } 63 | .sidebar label { padding: 6px 12px; } 64 | .sidebar label.highlight { background-color: $selected_color; } 65 | } 66 | 67 | .dim-label { 68 | opacity: 0.55; 69 | text-shadow: none; 70 | } 71 | 72 | .large-title { 73 | font-weight: 300; 74 | font-size: 24pt; 75 | } 76 | .title-1 { 77 | font-weight: 800; 78 | font-size: 20pt; 79 | } 80 | .title-2 { 81 | font-weight: 800; 82 | font-size: 15pt; 83 | } 84 | .title-3 { 85 | font-weight: 700; 86 | font-size: 15pt; 87 | } 88 | .title-4 { 89 | font-weight: 700; 90 | font-size: 13pt; 91 | } 92 | .heading { 93 | font-weight: 700; 94 | font-size: 11pt; 95 | } 96 | .body { 97 | font-weight: 400; 98 | font-size: 11pt; 99 | } 100 | .caption-heading { 101 | font-weight: 700; 102 | font-size: 9pt; 103 | } 104 | .caption { 105 | font-weight: 400; 106 | font-size: 9pt; 107 | } 108 | -------------------------------------------------------------------------------- /src/sass/widgets/_level-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | levelbar { 4 | &.horizontal { 5 | block { 6 | min-height: 8px; 7 | } 8 | 9 | &.continuous block { 10 | &:first-child, &:last-child { border-radius: 8px; } 11 | } 12 | 13 | &.discrete block { 14 | margin: 0 1px; 15 | min-width: 32px; 16 | &:first-child { border-radius: 8px 0 0 8px; } 17 | &:last-child { border-radius: 0 8px 8px 0; } 18 | } 19 | } 20 | 21 | &.vertical { 22 | block { 23 | min-width: 8px; 24 | } 25 | 26 | &.continuous block { 27 | &:first-child, &:last-child { border-radius: 8px; } 28 | } 29 | 30 | &.discrete block { 31 | margin: 1px 0; 32 | min-height: 32px; 33 | &:first-child { border-radius: 8px 8px 0 0; } 34 | &:last-child { border-radius: 0 0 8px 8px; } 35 | } 36 | } 37 | 38 | &:backdrop { transition: $backdrop_transition; } 39 | 40 | trough { 41 | border: 0px solid; 42 | padding: 0; //2px; 43 | border-radius: 8px; 44 | background-color: $trough_color; 45 | 46 | &:backdrop { background-color: $backdrop_dark_fill; } 47 | } 48 | 49 | block { 50 | border: 0px solid; 51 | border-radius: 0; 52 | 53 | &.low { 54 | border-color: if($variant == 'light', gtkshade($warning_bg_color, 0.8), $warning_bg_color); 55 | background-color: $warning_bg_color; 56 | 57 | &:backdrop { border-color: $warning_bg_color; }; 58 | } 59 | 60 | &.high, 61 | &:not(.empty) { 62 | border-color: if($variant == 'light', gtkshade($progress_bg_color, 0.8), $progress_bg_color); 63 | background-color: $progress_bg_color; 64 | 65 | &:backdrop { border-color: $progress_bg_color; } 66 | } 67 | 68 | &.full { 69 | border-color: if($variant == 'light', gtkshade($success_bg_color, 0.8), $success_bg_color); 70 | background-color: $success_bg_color; 71 | 72 | &:backdrop { border-color: $success_bg_color; }; 73 | } 74 | 75 | &.empty { 76 | background-color: transparent; 77 | border-color: if($variant == 'light', gtkalpha($window_fg_color,0.2), gtkalpha($window_fg_color,0.1)); 78 | 79 | &:backdrop { border-color: gtkalpha($backdrop_fg_color,0.15); } 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/sass/widgets/_links.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | %link, 5 | *:link { 6 | color: $link_color; 7 | 8 | &:visited { 9 | color: $link_visited_color; 10 | 11 | *:selected & { color: gtkmix($accent_fg_color, $link_visited_color, 60%); } 12 | } 13 | 14 | &:hover { 15 | $_fg: gtkmix(white, $link_color, 10%); 16 | color: $_fg; 17 | 18 | *:selected & { color: gtkmix($accent_fg_color, $_fg, 90%); } 19 | } 20 | 21 | &:active { 22 | color: $link_color; 23 | 24 | *:selected & { color: gtkmix($accent_fg_color, $link_color, 80%); } 25 | } 26 | 27 | &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: gtkalpha($link_color, 0.9); }} 28 | 29 | &:disabled, &:disabled:backdrop { color: gtkalpha(gtkmix(white,black,50%), 0.8); } 30 | 31 | @at-root %link_selected, 32 | &:selected, 33 | *:selected & { color: gtkmix($accent_fg_color, $link_color, 80%); } 34 | } 35 | 36 | button:link, 37 | button:visited { 38 | @extend %undecorated_button; 39 | 40 | @extend %link; 41 | 42 | text-shadow: none; 43 | font-weight: 400; 44 | 45 | &:hover, 46 | &:active, 47 | &:checked { 48 | @extend %undecorated_button; 49 | 50 | text-shadow: none; 51 | } 52 | 53 | @include focus-ring($transition: $button_transition); 54 | 55 | > label { 56 | @extend %link; 57 | 58 | text-decoration-line: underline; 59 | 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/sass/widgets/_lists.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | list { 5 | color: $view_fg_color; 6 | background-color: $view_bg_color; 7 | border-color: $card_shade_color; 8 | 9 | row { 10 | padding: 2px; 11 | outline-color: $focus_border_color; 12 | outline-style: solid; 13 | outline-offset: -3px; 14 | outline-width: 2px; 15 | -gtk-outline-radius: $button-radius; 16 | } 17 | } 18 | 19 | row { 20 | transition: all 150ms $ease-out-quad; 21 | 22 | &:hover { transition: none; } 23 | 24 | &:backdrop { transition: $backdrop_transition; } 25 | 26 | &.activatable { 27 | &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 28 | 29 | &:hover { background-color: $hover_color; } 30 | 31 | &:active { background-color: $active_color; } 32 | 33 | &:backdrop:hover { background-color: transparent; } 34 | 35 | &:selected { 36 | color: $window_fg_color; 37 | &:active { background-color: $selected_active_color; } 38 | 39 | &.has-open-popup, 40 | &:hover { 41 | background-color: $selected_hover_color; 42 | color: $window_fg_color; 43 | } 44 | 45 | &:backdrop { 46 | background-color: $hover_color; 47 | color: $window_fg_color; 48 | } 49 | } 50 | } 51 | 52 | &:selected { background-color: $selected_color; } 53 | } 54 | 55 | // Different button color on lists 56 | .content list, 57 | list.content, 58 | list.view.frame { 59 | button, > row:not(:selected):hover button { 60 | @include button(normal, $card_bg_color, $card_fg_color); 61 | &.flat:not(:hover):not(:active) { @include button(undecorated); } 62 | &:hover { @include button(hover, $card_bg_color, $card_fg_color); } 63 | &:active, &:checked { @include button(active, $card_bg_color, $card_fg_color); } 64 | &:disabled { 65 | @include button(disabled, $card_bg_color, $card_fg_color); 66 | } 67 | 68 | &.suggested-action { @extend %suggested_buttons; } 69 | &.destructive-action { @extend %destructive_buttons; } 70 | } 71 | 72 | entry { 73 | @include button(normal, $card_bg_color, $card_fg_color); 74 | &:disabled { 75 | @include button(disabled, $card_bg_color, $card_fg_color); 76 | } 77 | } 78 | } 79 | 80 | // Fix wrong border-radius on hdy spinbutton entries 81 | list.content .horizontal spinbutton entry { 82 | border-top-left-radius: $button_radius; 83 | border-bottom-left-radius: $button_radius; 84 | } 85 | 86 | // Non "content" lists 87 | list.view.frame { 88 | border-radius: $card_radius; 89 | &, &:backdrop { background-color: $card_bg_color; } 90 | } 91 | -------------------------------------------------------------------------------- /src/sass/widgets/_menus.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | menubar, 4 | .menubar { 5 | -GtkWidget-window-dragging: true; 6 | padding: 0; 7 | 8 | &:backdrop { background-color: $backdrop_bg_color; } 9 | 10 | > menuitem { 11 | border-radius: $button_radius; 12 | min-height: 16px; 13 | padding: 4px 8px; 14 | 15 | // remove padding and rounding from menubar submenus 16 | menu { 17 | &:dir(rtl), &:dir(ltr) { // specificity bump 18 | border-radius: $menu_radius; 19 | padding: 6px; 20 | menuitem { border-radius: $button_radius; } 21 | } 22 | } 23 | 24 | &:hover { //Seems like it :hover even with keyboard focus 25 | background-color: $selected_color; 26 | } 27 | 28 | &:disabled { 29 | color: $disabled_fg_color; 30 | box-shadow: none; 31 | } 32 | } 33 | 34 | // remove padding and rounding from menubar submenu decoration 35 | .csd.popup decoration { border-radius: $menu_radius; } 36 | } 37 | 38 | // Needed to make the border-radius of menus work 39 | // otherwise the background bleeds out of the menu edges 40 | .background.popup { background-color: transparent; } 41 | 42 | menu, 43 | .menu, 44 | %menu, 45 | .context-menu { 46 | margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258 47 | padding: 6px; 48 | background-color: $popover_bg_color; 49 | border: 1px solid $borders_color; // adds borders in a non composited env 50 | 51 | separator { margin: 6px 0; } 52 | 53 | .csd & { 54 | border: none; // axes borders in a composited env 55 | border-radius: $menu_radius; 56 | } 57 | 58 | menuitem, 59 | %menuitem { 60 | min-height: 16px; 61 | min-width: 40px; 62 | padding: 4px 6px; 63 | text-shadow: none; 64 | font-weight: normal; 65 | border-radius: $button_radius; 66 | 67 | &:hover { 68 | color: $window_fg_color; 69 | background-color: $selected_color; 70 | } 71 | 72 | &:disabled { 73 | color: $disabled_fg_color; 74 | } 75 | 76 | // submenu indicators 77 | arrow { 78 | min-height: 16px; 79 | min-width: 16px; 80 | 81 | &:dir(ltr) { 82 | -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); 83 | margin-left: 10px; 84 | } 85 | 86 | &:dir(rtl) { 87 | -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); 88 | margin-right: 10px; 89 | } 90 | } 91 | 92 | // avoids labels color being overridden, see 93 | // https://bugzilla.gnome.org/show_bug.cgi?id=767058 94 | label { &:dir(rtl), &:dir(ltr) { color: inherit; }} 95 | } 96 | 97 | // overflow arrows 98 | > arrow { 99 | @include button(undecorated); 100 | 101 | min-height: 16px; 102 | min-width: 16px; 103 | padding: 4px; 104 | background-color: $popover_bg_color; 105 | border-radius: 0; 106 | 107 | &.top { 108 | margin-top: -4px; 109 | border-bottom: 1px solid gtkmix($window_fg_color, $view_bg_color, 10%); 110 | border-top-right-radius: $menu_radius; 111 | border-top-left-radius: $menu_radius; 112 | -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); 113 | } 114 | 115 | &.bottom { 116 | margin-top: 8px; 117 | margin-bottom: -12px; 118 | border-top: 1px solid gtkmix($window_fg_color, $view_bg_color, 10%); 119 | border-bottom-right-radius: $menu_radius; 120 | border-bottom-left-radius: $menu_radius; 121 | -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); 122 | } 123 | 124 | &:hover { background-color: gtkmix($window_fg_color, $view_bg_color, 10%); } 125 | 126 | &:disabled { 127 | color: transparent; 128 | background-color: transparent; 129 | border-color: transparent ; 130 | } 131 | } 132 | } 133 | 134 | menuitem { 135 | accelerator { color: gtkalpha(currentColor,0.55); } 136 | 137 | check, 138 | radio { 139 | min-height: 16px; 140 | min-width: 16px; 141 | 142 | &:dir(ltr) { margin-right: 7px; } 143 | &:dir(rtl) { margin-left: 7px; } 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /src/sass/widgets/_message-dialog.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | %dialog_buttons { 5 | @include libadwaita-button(normal); 6 | &:hover { 7 | @include libadwaita-button(hover); 8 | } 9 | &:checked, &:active { 10 | @include libadwaita-button(active); 11 | } 12 | &:backdrop { 13 | @include libadwaita-button(backdrop); 14 | } 15 | &:disabled { 16 | @include libadwaita-button(disabled); 17 | } 18 | &.text-button.destructive-action { 19 | @extend %destructive_buttons; 20 | } 21 | &.text-button.suggested-action { 22 | @extend %suggested_buttons; 23 | } 24 | } 25 | 26 | messagedialog { // Message Dialog styling 27 | .titlebar, .titlebar:backdrop { 28 | min-height: 20px; 29 | background-image: none; 30 | background: $dialog_bg_color; 31 | color: $dialog_fg_color; 32 | border-style: none; 33 | border-top-left-radius: $dialog_radius; 34 | border-top-right-radius: $dialog_radius; 35 | } 36 | 37 | &.csd { // rounded bottom border styling for csd version 38 | &.background { 39 | border-bottom-left-radius: $dialog_radius; 40 | border-bottom-right-radius: $dialog_radius; 41 | background-color: $dialog_bg_color; 42 | color: $dialog_fg_color; 43 | button { @extend %dialog_buttons; } 44 | } 45 | 46 | .dialog-action-area { 47 | margin: 0; 48 | padding: 21px 24px 24px 24px; 49 | 50 | button { 51 | padding: 10px 20px; // labels are not vertically centered on message dialog, this is a workaround 52 | margin: 0 10px; 53 | border-radius: 12px; 54 | -gtk-outline-radius: calc(12px - 2px); 55 | border-left-style: none; 56 | border-right-style: none; 57 | border-color: transparent; 58 | } 59 | } 60 | } 61 | } 62 | 63 | filechooser { 64 | .dialog-action-box { 65 | border-top: 1px solid $borders_color; 66 | } 67 | 68 | #pathbarbox { border-bottom: 1px solid $window_bg_color; } 69 | } 70 | 71 | filechooserbutton:drop(active) { 72 | box-shadow: none; 73 | border-color: transparent; 74 | } 75 | -------------------------------------------------------------------------------- /src/sass/widgets/_misc.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward '../common'; 3 | @forward 'buttons'; 4 | @forward 'views'; 5 | 6 | %checkerboard { 7 | background-position: 0px 0px, 10px 10px; 8 | background-size: 20px 20px; 9 | background-image: linear-gradient( 10 | 45deg, $borders_color 25%, 11 | transparent 25%, 12 | transparent 75%, 13 | $borders_color 75%, 14 | $borders_color 100% 15 | ), 16 | linear-gradient( 17 | 45deg, $borders_color 25%, 18 | $view_bg_color 25%, 19 | $view_bg_color 75%, 20 | $borders_color 75%, 21 | $borders_color 100% 22 | ); 23 | } 24 | 25 | //content view (grid/list) 26 | .content-view { 27 | background-color: gtkshade($window_bg_color,0.93); 28 | 29 | &:hover { -gtk-icon-effect: highlight; } 30 | 31 | rubberband, .rubberband { @extend rubberband; } 32 | } 33 | 34 | .scale-popup { 35 | .osd & { @extend %osd; } 36 | 37 | .osd & button.flat { //FIXME: quick hack, redo properly 38 | border-style: none; 39 | border-radius: 5px; 40 | } 41 | 42 | button { // +/- buttons on GtkVolumeButton popup 43 | &:hover { 44 | @extend %undecorated_button; 45 | background-color: gtkalpha($window_fg_color,0.1); 46 | border-radius: 5px; 47 | } 48 | } 49 | } 50 | 51 | //touch selection handlebars for the Popover.osd 52 | cursor-handle { 53 | background-color: transparent; 54 | background-image: none; 55 | box-shadow: none; 56 | border-style: none; 57 | 58 | @each $s,$as in ('','') { 59 | &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { 60 | $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; 61 | -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), 62 | url('#{$_url}@2.png')); 63 | padding-left: 10px; 64 | } 65 | 66 | &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { 67 | $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; 68 | -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), 69 | url('#{$_url}@2.png')); 70 | padding-right: 10px; 71 | } 72 | 73 | &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { 74 | $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; 75 | -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), 76 | url('#{$_url}@2.png')); 77 | } 78 | } 79 | } 80 | 81 | .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview 82 | 83 | // shortcut window keys 84 | .keycap { 85 | min-width: 20px; 86 | min-height: 25px; 87 | margin-top: 2px; 88 | padding-bottom: 3px; 89 | padding-left: 6px; 90 | padding-right: 6px; 91 | 92 | color: $window_fg_color; 93 | background-color: $view_bg_color; 94 | border: 1px solid; 95 | border-color: if($variant == 'light', gtkmix($borders_color, $window_bg_color, 50%), $borders_color); 96 | border-radius: 5px; 97 | box-shadow: if($variant == 'light', inset 0 -3px gtkmix($view_bg_color, $window_bg_color, 20%), inset 0 -3px gtkmix($borders_color, $view_bg_color, 60%)); 98 | font-size: smaller; 99 | 100 | &:backdrop { 101 | background-color: $backdrop_base_color; 102 | color: $backdrop_fg_color; 103 | transition: $backdrop_transition; 104 | } 105 | } 106 | 107 | :not(decoration):not(window):drop(active):focus, 108 | :not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die 109 | border-color: $drop_target_color; 110 | box-shadow: inset 0 0 0 1px $drop_target_color; 111 | caret-color: $drop_target_color; 112 | } 113 | 114 | stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons 115 | 116 | stackswitcher button.circular, 117 | stackswitcher button.text-button.circular { // FIXME aggregate with buttons 118 | min-width: 32px; 119 | min-height: 32px; 120 | padding: 0; 121 | } 122 | 123 | // ************* 124 | // * App Icons * 125 | // ************* 126 | // Outline for low res icons 127 | .lowres-icon { 128 | -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05), 129 | 1px 0 rgba(0,0,0,0.1), 130 | 0 1px rgba(0,0,0,0.3), 131 | -1px 0 rgba(0,0,0,0.1); 132 | } 133 | 134 | // Dropshadow for large icons 135 | .icon-dropshadow { 136 | -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05), 137 | 0 -1px rgba(0,0,0,0.05), 138 | 1px 0 rgba(0,0,0,0.1), 139 | 0 1px rgba(0,0,0,0.3), 140 | -1px 0 rgba(0,0,0,0.1); 141 | } 142 | 143 | // ********* 144 | // * Emoji * 145 | // ********* 146 | 147 | popover.emoji-picker { 148 | padding-left: 0; 149 | padding-right: 0; 150 | 151 | entry.search { margin: 3px 5px 5px 5px; } 152 | } 153 | 154 | button.emoji-section { 155 | border-color: transparent; 156 | border-width: 3px; 157 | border-style: none none solid; 158 | border-radius: 0; 159 | 160 | margin: 2px 4px 2px 4px; 161 | padding: 3px 0 0; 162 | min-width: 32px; 163 | min-height: 28px; 164 | 165 | // reset props inherited from the button style 166 | background: none; 167 | box-shadow: none; 168 | text-shadow: none; 169 | 170 | outline-offset: -5px; 171 | 172 | &:first-child { margin-left: 7px; } 173 | &:last-child { margin-right: 7px; } 174 | 175 | &:backdrop:not(:checked) { border-color: transparent; } 176 | &:hover { border-color: if($variant == 'light', $borders_color, gtkalpha($window_fg_color, .1)); } 177 | &:checked { border-color: $selected_color; } 178 | 179 | label { 180 | padding: 0; 181 | opacity: 0.55; 182 | } 183 | 184 | &:hover label { opacity: 0.775; } 185 | &:checked label { opacity: 1; } 186 | } 187 | 188 | popover.emoji-picker .emoji { 189 | font-size: x-large; 190 | padding: 6px; 191 | border-radius: $button_radius; 192 | 193 | :focus, 194 | :hover { 195 | background: $hover_color; 196 | } 197 | 198 | :active { 199 | background: $active_color; 200 | } 201 | } 202 | 203 | popover.emoji-completion arrow { 204 | border: none; 205 | background: none; 206 | } 207 | 208 | popover.emoji-completion contents row box { 209 | padding: 2px 10px; 210 | } 211 | 212 | popover.emoji-completion .emoji:hover { 213 | background: $view_hover_color; 214 | } 215 | 216 | // Other misc junk 217 | // Font fixes when button text is bold 218 | .flat.popup:not(.title) { 219 | font-weight: normal; 220 | } 221 | 222 | // Smaller text in statusbars 223 | statusbar { 224 | font-size: small; 225 | } 226 | 227 | // scrolled window list rows 228 | scrolledwindow list { 229 | &:not(.content) { 230 | padding: 6px 0; 231 | } 232 | row { 233 | margin: 0 6px; 234 | border-radius: $button_radius; 235 | } 236 | separator.horizontal { 237 | margin: 6px; 238 | } 239 | } 240 | 241 | -------------------------------------------------------------------------------- /src/sass/widgets/_notebook.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | notebook { 5 | > header { 6 | padding: 1px; 7 | border-width: 1px; 8 | background-clip: padding-box; 9 | background-color: $window_bg_color; 10 | border-color: $border_color; 11 | 12 | tabs { margin: -1px; } 13 | 14 | &.top, &.bottom, &.left, &.right { 15 | > tabs > tab { 16 | &:hover { background-color: $hover_color; } 17 | } 18 | } 19 | 20 | &.top { 21 | border-bottom-style: solid; 22 | > tabs { 23 | margin-bottom: -2px; 24 | > tab:not(.reorderable-page) { 25 | &:hover { box-shadow: inset 0 -4px $border_color; } 26 | &:checked { box-shadow: inset 0 -4px $accent_bg_color; } 27 | } 28 | } 29 | } 30 | 31 | &.bottom { 32 | border-top-style: solid; 33 | > tabs { 34 | margin-top: -2px; 35 | > tab:not(.reorderable-page) { 36 | &:hover { box-shadow: inset 0 4px $border_color; } 37 | &:checked { box-shadow: inset 0 4px $accent_bg_color; } 38 | } 39 | } 40 | } 41 | 42 | &.left { 43 | border-right-style: solid; 44 | > tabs { 45 | margin-right: -2px; 46 | > tab:not(.reorderable-page) { 47 | &:hover { box-shadow: inset -4px 0 $border_color; } 48 | &:checked { box-shadow: inset -4px 0 $accent_bg_color; } 49 | } 50 | } 51 | } 52 | 53 | &.right { 54 | border-left-style: solid; 55 | > tabs { 56 | margin-left: -2px; 57 | > tab:not(.reorderable-page) { 58 | &:hover { box-shadow: inset 4px 0 $border_color; } 59 | &:checked { box-shadow: inset 4px 0 $accent_bg_color; } 60 | } 61 | } 62 | } 63 | 64 | &.top > tabs > arrow { 65 | @extend %notebook_vert_arrows; 66 | 67 | border-top-style: none; 68 | } 69 | 70 | &.bottom > tabs > arrow { 71 | @extend %notebook_vert_arrows; 72 | 73 | border-bottom-style: none; 74 | } 75 | 76 | @at-root %notebook_vert_arrows { 77 | margin-left: -5px; 78 | margin-right: -5px; 79 | padding-left: 4px; 80 | padding-right: 4px; 81 | 82 | &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } 83 | 84 | &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } 85 | } 86 | 87 | &.left > tabs > arrow { 88 | @extend %notebook_horz_arrows; 89 | 90 | border-left-style: none; 91 | } 92 | 93 | &.right > tabs > arrow { 94 | @extend %notebook_horz_arrows; 95 | 96 | border-right-style: none; 97 | } 98 | 99 | @at-root %notebook_horz_arrows { 100 | margin-top: -5px; 101 | margin-bottom: -5px; 102 | padding-top: 4px; 103 | padding-bottom: 4px; 104 | 105 | &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } 106 | 107 | &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } 108 | } 109 | 110 | > tabs > arrow { 111 | @extend %button_basic; 112 | 113 | @extend %button_basic_flat; 114 | 115 | min-height: 16px; 116 | min-width: 16px; 117 | border-radius: 0; 118 | 119 | &:hover:not(:active) { 120 | box-shadow: none; 121 | } 122 | 123 | &:disabled { @include button(undecorated); } 124 | } 125 | 126 | tab { 127 | min-height: 30px; 128 | min-width: 30px; 129 | padding: 3px 12px; 130 | 131 | color: $window_fg_color; 132 | font-weight: normal; 133 | 134 | border-width: 0px; // for reorderable tabs 135 | border-color: transparent; // 136 | 137 | &.reorderable-page { 138 | -gtk-outline-radius: calc($button_radius + 2px); 139 | margin: 4px 2px; 140 | border-radius: $button_radius; 141 | @include focus-ring($transition: $button_transition); 142 | 143 | &:hover { 144 | background-color: $hover_color; 145 | box-shadow: none; 146 | } 147 | &:checked { 148 | background-color: $selected_color; 149 | box-shadow: none; 150 | &:hover { background-color: $selected_hover_color; } 151 | } 152 | } 153 | 154 | // colors the button like the label, overridden otherwise 155 | button.flat { 156 | color: gtkalpha(currentColor, 0.3); 157 | padding: 0; 158 | margin-top: 4px; 159 | margin-bottom: 4px; 160 | min-width: 20px; 161 | min-height: 20px; 162 | border-radius: 100%; 163 | 164 | &:hover { 165 | color: currentColor; 166 | background-color: $adw_button_hover; 167 | } 168 | &:active { background-color: $adw_button_active; } 169 | 170 | &, &:backdrop { color: gtkalpha(currentColor, 0.3); } 171 | 172 | &:last-child { 173 | margin-left: 4px; 174 | margin-right: -4px; 175 | } 176 | 177 | &:first-child { 178 | margin-left: -4px; 179 | margin-right: 4px; 180 | } 181 | } 182 | } 183 | 184 | &.top, 185 | &.bottom { 186 | tabs { 187 | padding-left: 4px; 188 | padding-right: 4px; 189 | 190 | &:not(:only-child) { 191 | margin-left: 3px; 192 | margin-right: 3px; 193 | 194 | &:first-child { margin-left: -1px; } 195 | &:last-child { margin-right: -1px; } 196 | } 197 | 198 | tab { 199 | margin-left: 4px; 200 | margin-right: 4px; 201 | 202 | &.reorderable-page { 203 | border-style: none; 204 | margin-left: 0px; 205 | margin-right: 0px; 206 | } 207 | } 208 | } 209 | } 210 | 211 | &.left, 212 | &.right { 213 | tabs { 214 | padding-top: 4px; 215 | padding-bottom: 4px; 216 | 217 | &:not(:only-child) { 218 | margin-top: 3px; 219 | margin-bottom: 3px; 220 | 221 | &:first-child { margin-top: -1px; } 222 | &:last-child { margin-bottom: -1px; } 223 | } 224 | 225 | tab { 226 | margin-top: 4px; 227 | margin-bottom: 4px; 228 | 229 | &.reorderable-page { 230 | border-style: none solid; 231 | margin-top: 0px; 232 | margin-bottom: 0px; 233 | } 234 | } 235 | } 236 | } 237 | 238 | &.top tab { padding-bottom: 4px; } 239 | &.bottom tab { padding-top: 4px; } 240 | } 241 | 242 | > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks 243 | background-color: $view_bg_color; 244 | } 245 | } 246 | -------------------------------------------------------------------------------- /src/sass/widgets/_paned.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | paned { 4 | > separator { 5 | min-width: 1px; 6 | min-height: 1px; 7 | -gtk-icon-source: none; // defeats the ugly default handle decoration 8 | border-style: none; // just to be sure 9 | background-color: transparent; 10 | // workaround, using background instead of a border since the border will get rendered twice (?) 11 | background-image: image($borders_color); 12 | background-size: 1px 1px; 13 | 14 | &:selected { background-image: image($accent_bg_color); } // FIXME is this needed? 15 | &:backdrop { background-image: image($backdrop_borders_color); } 16 | 17 | &.wide { 18 | min-width: 5px; 19 | min-height: 5px; 20 | background-color: $window_bg_color; 21 | background-image: image($borders_color), image($borders_color); 22 | background-size: 1px 1px, 1px 1px; 23 | 24 | &:backdrop { 25 | background-color: $backdrop_bg_color; 26 | background-image: image($backdrop_borders_color), 27 | image($backdrop_borders_color); 28 | } 29 | } 30 | } 31 | 32 | &.horizontal > separator { 33 | background-repeat: repeat-y; 34 | 35 | &:dir(ltr) { 36 | margin: 0 -8px 0 0; 37 | padding: 0 8px 0 0; 38 | background-position: left; 39 | } 40 | &:dir(rtl) { 41 | margin: 0 0 0 -8px; 42 | padding: 0 0 0 8px; 43 | background-position: right; 44 | } 45 | 46 | &.wide { 47 | margin: 0; 48 | padding: 0; 49 | background-repeat: repeat-y, repeat-y; 50 | background-position: left, right; 51 | } 52 | } 53 | 54 | &.vertical > separator { 55 | margin: 0 0 -8px 0; 56 | padding: 0 0 8px 0; 57 | background-repeat: repeat-x; 58 | background-position: top; 59 | 60 | &.wide { 61 | margin: 0; 62 | padding: 0; 63 | background-repeat: repeat-x, repeat-x; 64 | background-position: bottom, top; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/sass/widgets/_pathbar.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | // GtkPathBar does not work with just .linked, so we must override that. But we 5 | // can’t simply remove .linked from the widget as that might break other themes. 6 | // Note also we select on filechooser to avoid interfering with NautilusPathBar. 7 | filechooser .path-bar.linked > button { 8 | @extend %linked_flippable; 9 | } 10 | 11 | .path-bar button { 12 | &.text-button, &.image-button, & { 13 | padding-left: 4px; 14 | padding-right: 4px; 15 | } 16 | 17 | &.text-button.image-button label { 18 | padding-left: 0; 19 | padding-right: 0; 20 | } 21 | 22 | &.text-button.image-button, & { 23 | label:last-child { padding-right: 8px; } 24 | label:first-child { padding-left: 8px; } 25 | } 26 | 27 | image { 28 | padding-left: 4px; 29 | padding-right: 4px; 30 | } 31 | 32 | &.slider-button { 33 | padding-left: 0; 34 | padding-right: 0; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/sass/widgets/_popovers.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward '../common'; 3 | @forward 'buttons'; 4 | 5 | popover.background { 6 | padding: 2px; 7 | background-color: $popover_bg_color; 8 | // Try to match libadwaita's shadow, except reduce it a bit due to limitations 9 | box-shadow: 0 1px 5px 1px transparentize(black, .91), 10 | 0 2px 8px 3px transparentize(black, .95); 11 | 12 | .csd &, & { 13 | border: 1px solid $borders_color; 14 | border-radius: $popover_radius; 15 | } 16 | 17 | .csd & { 18 | $_popover_border: if($variant=='light', transparentize(black, .86), transparentize(black, .86)); 19 | 20 | background-clip: padding-box; 21 | border-color: $_popover_border; 22 | } 23 | 24 | > list, 25 | > .view, 26 | > toolbar { 27 | border-style: none; 28 | background-color: transparent; 29 | } 30 | 31 | .csd &, & { 32 | &.touch-selection, 33 | &.magnifier { 34 | @extend %osd; 35 | 36 | border: 1px solid transparentize(white, 0.9); 37 | 38 | button { @extend %osd_button }; 39 | } 40 | 41 | &.osd { @extend %osd; } 42 | } 43 | 44 | separator { margin: 6px 0; } 45 | 46 | list separator { margin: 0px; } 47 | } 48 | 49 | // Misc junk 50 | popover.background { 51 | $disabled_popover_fg: gtkmix($popover_fg_color, $popover_bg_color, 50%); 52 | button { 53 | @include button(normal, $popover_bg_color, $popover_fg_color); 54 | &.flat:not(:hover):not(:active) { @include button(undecorated); } 55 | &:hover { @include button(hover, $popover_bg_color, $popover_fg_color); } 56 | &:active, &:checked { @include button(active, $popover_bg_color, $popover_fg_color); } 57 | &:disabled { 58 | @include button(disabled, $popover_bg_color, $disabled_popover_fg); 59 | } 60 | 61 | &.suggested-action { @extend %suggested_buttons; } 62 | &.destructive-action { @extend %destructive_buttons; } 63 | } 64 | 65 | entry { 66 | @include button(normal, $popover_bg_color, $popover_fg_color); 67 | &:disabled { 68 | @include button(normal, $popover_bg_color, $disabled_popover_fg); 69 | } 70 | } 71 | } 72 | 73 | // Popover menuitems 74 | popover.background { 75 | modelbutton.flat { 76 | padding-left: 16px; 77 | padding-right: 16px; 78 | } 79 | 80 | modelbutton.flat, 81 | .menuitem.button.flat { 82 | color: $popover_fg_color; 83 | &:disabled label { 84 | color: gtkmix($popover_fg_color, $popover_bg_color, 50%); 85 | } 86 | &:backdrop:hover { 87 | background-color: $view_hover_color; 88 | } 89 | } 90 | } 91 | 92 | // Mimic libadwaita popover padding 93 | popover.menu > stack { 94 | margin: -6px; 95 | } 96 | -------------------------------------------------------------------------------- /src/sass/widgets/_print-dialog.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | printdialog { 4 | paper { 5 | color: $window_fg_color; 6 | border: 1px solid $borders_color; 7 | background: white; 8 | padding: 0; 9 | border-radius: 0; 10 | box-shadow: none; 11 | 12 | &:backdrop { 13 | color: $backdrop_fg_color; 14 | border-color: $backdrop_borders_color; 15 | } 16 | } 17 | 18 | .dialog-action-box { margin: 12px; } 19 | } 20 | -------------------------------------------------------------------------------- /src/sass/widgets/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'scale'; 3 | 4 | progressbar { 5 | // sizing 6 | &.horizontal { 7 | trough, 8 | progress { min-height: 8px; } 9 | } 10 | 11 | &.vertical { 12 | trough, 13 | progress { min-width: 8px; } 14 | } 15 | 16 | &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border 17 | &.vertical progress { margin: -1px 0; } // this moves it over it. 18 | 19 | 20 | // FIXME: insensitive state missing and some other state should be set probably 21 | font-size: smaller; 22 | color: gtkalpha($window_fg_color, 0.4); 23 | font-feature-settings: "tnum"; 24 | 25 | &:backdrop { 26 | box-shadow: none; 27 | transition: $backdrop_transition; 28 | } 29 | 30 | trough { @extend %scale_trough; } 31 | 32 | progress { 33 | @extend %scale_highlight; 34 | 35 | border-radius: 8px; 36 | 37 | &.left { 38 | border-top-left-radius: 8px; 39 | border-bottom-left-radius: 8px; 40 | } 41 | 42 | &.right { 43 | border-top-right-radius: 8px; 44 | border-bottom-right-radius: 8px; 45 | } 46 | 47 | &.top { 48 | border-top-right-radius: 8px; 49 | border-top-left-radius: 8px; 50 | } 51 | 52 | &.bottom { 53 | border-bottom-right-radius: 8px; 54 | border-bottom-left-radius: 8px; 55 | } 56 | } 57 | 58 | &.osd { // progressbar.osd used for epiphany page loading progress 59 | min-width: 3px; 60 | min-height: 3px; 61 | background-color: transparent; 62 | 63 | trough { 64 | border-style: none; 65 | border-radius: 0; 66 | background-color: transparent; 67 | box-shadow: none; 68 | } 69 | 70 | progress { 71 | border-style: none; 72 | border-radius: 0; 73 | } 74 | } 75 | 76 | trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 77 | } 78 | -------------------------------------------------------------------------------- /src/sass/widgets/_scale.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | %scale_trough { 4 | border-radius: $button_radius; 5 | background-color: $trough_color; 6 | 7 | &:disabled { background-color: gtkalpha($trough_color, $disabled_opacity); } 8 | 9 | // ...on selected list rows 10 | row:selected & { &:disabled, & { border-color: $selected_borders_color; }} 11 | 12 | // OSD 13 | .osd & { 14 | border-color: $osd_borders_color; 15 | background-color: transparentize($osd_borders_color, 0.2); 16 | 17 | &:disabled { background-color: $osd_disabled_bg_color; } 18 | } 19 | } 20 | 21 | %scale_highlight { 22 | border-radius: $button_radius; 23 | background-color: $accent_bg_color; 24 | color: $accent_fg_color; 25 | 26 | &:disabled { 27 | background-color: gtkmix($accent_bg_color, $view_bg_color, 50%); 28 | border-color: transparent; 29 | } 30 | 31 | // ...on selected list rows 32 | row:selected & { &:disabled, & { border-color: $selected_borders_color; }} 33 | 34 | // OSD 35 | .osd & { 36 | border-color: $osd_borders_color; 37 | 38 | &:disabled { border-color: transparent; } 39 | } 40 | } 41 | 42 | scale { 43 | // sizing 44 | $_marks_length: 6px; 45 | $_marks_distance: 6px; 46 | 47 | min-height: 10px; 48 | min-width: 10px; 49 | padding: 12px; 50 | 51 | // those are inside the trough node, I need them to show their own border over the trough one, so negative margin 52 | //fill, 53 | //highlight { margin: -1px; } 54 | 55 | // the slider is inside the trough, so to have make it bigger there's a negative margin 56 | 57 | slider { 58 | min-height: 18px; 59 | min-width: 18px; 60 | margin: -9px; 61 | } 62 | 63 | // click-and-hold the slider to activate 64 | &.fine-tune { 65 | &.horizontal { 66 | padding-top: 9px; 67 | padding-bottom: 9px; 68 | min-height: 16px; 69 | } 70 | 71 | &.vertical { 72 | padding-left: 9px; 73 | padding-right: 9px; 74 | min-width: 16px; 75 | } 76 | 77 | // to make the trough grow in fine-tune mode 78 | slider { margin: -6px; } 79 | 80 | fill, 81 | highlight, 82 | trough { 83 | border-radius: 5px; 84 | -gtk-outline-radius: 7px; 85 | } 86 | } 87 | 88 | // the backing bit 89 | trough { 90 | @extend %scale_trough; 91 | 92 | outline-offset: 2px; 93 | -gtk-outline-radius: 5px; 94 | } 95 | 96 | // Match trough size to libadwaita 97 | &.horizontal trough { min-height: 4px; } 98 | &.vertical trough { min-width: 4px; } 99 | 100 | // the colored part of the backing bit 101 | highlight { @extend %scale_highlight; } 102 | 103 | // this is another differently styled part of the backing bit, the most relevant use case is for example 104 | // in media player to indicate how much video stream as been cached 105 | fill { 106 | @extend %scale_trough; 107 | 108 | &:backdrop, & { background-color: $borders_color; } 109 | 110 | &:disabled { 111 | &:backdrop, & { 112 | border-color: transparent; 113 | background-color: transparent; 114 | } 115 | } 116 | 117 | // OSD 118 | .osd & { 119 | background-color: gtkmix($osd_fg_color, $osd_borders_color, 25%); 120 | 121 | &:disabled { 122 | &:backdrop, & { 123 | border-color: transparent; 124 | background-color: transparent; 125 | } 126 | } 127 | } 128 | } 129 | 130 | slider { 131 | background-color: $slider_color; 132 | 133 | // Trying to get this as close to libadwaita as possible. Only one outer box-shadow is allowed. Outlines are not supported. 134 | box-shadow: 0 1px 2px 1px transparentize(black, .75); 135 | border: 1px solid transparent; //darken($alt_borders_color, 3%); 136 | 137 | border-radius: 100%; 138 | transition: $button_transition; 139 | transition-property: background, border, box-shadow; 140 | 141 | &:hover { background-color: $slider_hover_color; } 142 | 143 | &:disabled { 144 | @include button(disabled); 145 | background-color: gtkmix($view_bg_color, $slider_color, 50%); 146 | box-shadow: 0 0 0 1px transparentize(black, .85); 147 | } 148 | 149 | &:backdrop { 150 | transition: $backdrop_transition; 151 | box-shadow: 0 1px 2px 1px transparentize(black, .85); 152 | 153 | //@include button(backdrop); 154 | 155 | &:disabled { 156 | box-shadow: 0 0 0 1px transparentize(black, .85); 157 | } 158 | } 159 | 160 | // ...on selected list rows 161 | row:selected & { &:disabled, & { border-color: $selected_borders_color; } } 162 | 163 | // OSD 164 | .osd & { 165 | background-color: $slider_color; 166 | box-shadow: 0 1px 2px 1px transparentize(black, .75); 167 | border: 1px solid transparent; 168 | 169 | &:hover { 170 | background-color: $slider_hover_color; 171 | } 172 | 173 | &:disabled { 174 | @include button(disabled); 175 | box-shadow: 0 0 0 1px transparentize(black, .8); 176 | } 177 | 178 | &:backdrop { 179 | transition: $backdrop_transition; 180 | box-shadow: 0 1px 2px 1px transparentize(black, .8); 181 | 182 | &:disabled { 183 | box-shadow: 0 0 0 1px transparentize(black, .8); 184 | } 185 | } 186 | } 187 | } 188 | 189 | marks, 190 | value { 191 | color: gtkalpha(currentColor, 0.55); 192 | font-feature-settings: "tnum"; 193 | } 194 | 195 | //marks margins 196 | @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom), 197 | (horizontal, bottom, bottom, top), 198 | (vertical, top, left, right), 199 | (vertical, bottom, right, left) { 200 | &.#{$scale_orient} marks { 201 | &.#{$marks_class} { 202 | margin-#{$marks_margin}: $_marks_distance; 203 | margin-#{$marks_pos}: -($_marks_distance + $_marks_length); 204 | } 205 | } 206 | 207 | &.#{$scale_orient}.fine-tune marks { 208 | &.#{$marks_class} { 209 | margin-#{$marks_margin}: $_marks_distance; 210 | margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px); 211 | } 212 | } 213 | } 214 | 215 | &.horizontal { 216 | indicator { 217 | min-height: $_marks_length; 218 | min-width: 1px; 219 | } 220 | 221 | &.fine-tune indicator { min-height: ($_marks_length - 3px); } 222 | } 223 | 224 | &.vertical { 225 | indicator { 226 | min-height: 1px; 227 | min-width: $_marks_length; 228 | } 229 | 230 | &.fine-tune indicator { min-width: ($_marks_length - 3px); } 231 | } 232 | 233 | // *WARNING* scale with marks madness following 234 | 235 | // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... 236 | $suffix: if($variant == 'light', '', '-dark'); 237 | 238 | @each $dir_class, $dir_infix in ('horizontal', 'horz'), 239 | ('vertical', 'vert') { 240 | @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'), 241 | ('scale-has-marks-below', 'marks-after:not(.marks-before)') { 242 | @each $state, $state_infix in ('', ''), 243 | (':hover', ''), 244 | (':disabled', '-disabled'), 245 | (':backdrop', '-disabled'), 246 | (':backdrop:disabled', '-disabled') { 247 | &.#{$dir_class}.#{$marks_class} { 248 | 249 | slider { 250 | &#{$state} { 251 | // an asymmetric slider asset is used here, so the margins are uneven, the smaller 252 | // margin is set on the point side. 253 | margin: -10px; 254 | $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}'; 255 | border-style: none; 256 | border-radius: 0; 257 | 258 | background-color: transparent; 259 | background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); 260 | @if $variant == 'dark' { 261 | &:hover, &:active { 262 | background-image: -gtk-scaled(url('assets/slider-#{$dir_infix}-#{$marks_infix}.png'), url('assets/slider-#{$dir_infix}-#{$marks_infix}@2.png')); 263 | } 264 | } 265 | 266 | $_scale_slider_bg_pos: bottom; 267 | 268 | @if $dir_class == 'horizontal' { 269 | min-height: 28px; 270 | min-width: 23px; 271 | 272 | @if $marks_infix == 'scale-has-marks-above' { 273 | margin-top: -14px; 274 | 275 | $_scale_slider_bg_pos: top; 276 | } 277 | 278 | @else { margin-bottom: -14px; } 279 | } 280 | 281 | @else { 282 | min-height: 23px; 283 | min-width: 28px; 284 | 285 | @if $marks_infix == 'scale-has-marks-above' { 286 | margin-left: -14px; 287 | 288 | $_scale_slider_bg_pos: left bottom; 289 | } 290 | 291 | @else { 292 | margin-right: -14px; 293 | 294 | $_scale_slider_bg_pos: right bottom; 295 | } 296 | } 297 | 298 | background-position: $_scale_slider_bg_pos; 299 | background-repeat: no-repeat; 300 | box-shadow: none; 301 | } 302 | } 303 | 304 | &.fine-tune slider { 305 | // bigger negative margins to make the trough grow here as well 306 | margin: -7px; 307 | 308 | @if $dir_class == 'horizontal' { 309 | @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; } 310 | 311 | @else { margin-bottom: -11px; } 312 | } 313 | 314 | @else { 315 | @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; } 316 | 317 | @else { margin-right: -11px; } 318 | } 319 | } 320 | } 321 | } 322 | } 323 | } 324 | 325 | &.color { 326 | min-height: 0; 327 | min-width: 0; 328 | 329 | trough { 330 | background-image: image($borders_color); 331 | background-repeat: no-repeat; 332 | } 333 | 334 | &.horizontal { 335 | padding: 0 0 15px 0; 336 | 337 | trough { 338 | padding-bottom: 4px; 339 | background-position: 0 -3px; 340 | border-top-left-radius: 0; 341 | border-top-right-radius: 0; 342 | } 343 | 344 | slider { 345 | &:dir(ltr), &:dir(rtl) { // specificity bumb 346 | &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { 347 | margin-bottom: -15px; 348 | margin-top: 6px; 349 | } 350 | } 351 | } 352 | } 353 | 354 | &.vertical { 355 | &:dir(ltr) { 356 | padding: 0 0 0 15px; 357 | 358 | trough { 359 | padding-left: 4px; 360 | background-position: 3px 0; 361 | border-bottom-right-radius: 0; 362 | border-top-right-radius: 0; 363 | } 364 | 365 | slider { 366 | &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { 367 | margin-left: -15px; 368 | margin-right: 6px; 369 | } 370 | } 371 | } 372 | 373 | &:dir(rtl) { 374 | padding: 0 15px 0 0; 375 | 376 | trough { 377 | padding-right: 4px; 378 | background-position: -3px 0; 379 | border-bottom-left-radius: 0; 380 | border-top-left-radius: 0; 381 | } 382 | 383 | slider { 384 | &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { 385 | margin-right: -15px; 386 | margin-left: 6px; 387 | } 388 | } 389 | } 390 | } 391 | 392 | &.fine-tune { 393 | &.horizontal { 394 | &:dir(ltr), &:dir(rtl) { // specificity bump 395 | padding: 0 0 12px 0; 396 | 397 | trough { 398 | padding-bottom: 7px; 399 | background-position: 0 -6px; 400 | } 401 | 402 | slider { 403 | margin-bottom: -15px; 404 | margin-top: 6px; 405 | } 406 | } 407 | } 408 | 409 | &.vertical { 410 | &:dir(ltr) { 411 | padding: 0 0 0 12px; 412 | 413 | trough { 414 | padding-left: 7px; 415 | background-position: 6px 0; 416 | } 417 | 418 | slider { 419 | margin-left: -15px; 420 | margin-right: 6px; 421 | } 422 | } 423 | 424 | &:dir(rtl) { 425 | padding: 0 12px 0 0; 426 | 427 | trough { 428 | padding-right: 7px; 429 | background-position: -6px 0; 430 | } 431 | 432 | slider { 433 | margin-right: -15px; 434 | margin-left: 6px; 435 | } 436 | } 437 | } 438 | } 439 | } 440 | } 441 | -------------------------------------------------------------------------------- /src/sass/widgets/_scrolling.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | scrollbar { 4 | $_slider_min_length: 40px; 5 | $_slider_width: 8px; 6 | $_scrollbar_transition: all 200ms linear; 7 | $_fine-tune_slider_border: calc($_slider_width - 3px); //3672 8 | 9 | // disable steppers 10 | @at-root * { 11 | -GtkScrollbar-has-backward-stepper: false; 12 | -GtkScrollbar-has-forward-stepper: false; 13 | } 14 | 15 | background-color: $scrollbar_bg_color; 16 | transition: $_scrollbar_transition; 17 | 18 | // slider 19 | slider { 20 | color: $window_fg_color; 21 | min-width: $_slider_width; 22 | min-height: $_slider_width; 23 | margin: -1px; 24 | border: 4px solid transparent; 25 | border-radius: 10px; 26 | background-clip: padding-box; 27 | background-color: $scrollbar_slider_color; 28 | transition: $_scrollbar_transition; 29 | 30 | &:hover { background-color: $scrollbar_slider_hover_color; } 31 | 32 | &:hover:active { background-color: $scrollbar_slider_active_color; } 33 | 34 | &:disabled { background-color: transparent; } 35 | } 36 | 37 | &.fine-tune { 38 | slider { 39 | &, &:hover, &:active { 40 | background-color: gtkalpha($accent_color, .6); 41 | } 42 | } 43 | } 44 | 45 | &.overlay-indicator { 46 | &:not(.dragging):not(.hovering) { 47 | border-color: transparent; 48 | opacity: 0.4; 49 | background-color: transparent; 50 | transition-property: background-color, min-height, min-width; 51 | 52 | slider { 53 | margin: 0; 54 | min-width: 3px; 55 | min-height: 3px; 56 | background-color: $window_fg_color; 57 | border: 1px solid if($variant == 'light', white, black); 58 | } 59 | 60 | button { 61 | min-width: 5px; 62 | min-height: 5px; 63 | background-color: $window_fg_color; 64 | background-clip: padding-box; 65 | border-radius: 100%; 66 | border: 1px solid if($variant == 'light', white, black); 67 | -gtk-icon-source: none; 68 | } 69 | 70 | &.horizontal { 71 | slider { 72 | margin: 0 2px; 73 | min-width: $_slider_min_length; 74 | } 75 | 76 | button { 77 | margin: 1px 2px; 78 | min-width: 5px; 79 | } 80 | } 81 | 82 | &.vertical { 83 | slider { 84 | margin: 2px 0; 85 | min-height: $_slider_min_length; 86 | } 87 | 88 | button { 89 | margin: 2px 1px; 90 | min-height: 5px; 91 | } 92 | } 93 | } 94 | 95 | &.dragging, 96 | &.hovering { opacity: 0.8; } 97 | } 98 | 99 | &.horizontal slider { min-width: $_slider_min_length; } 100 | &.vertical slider { min-height: $_slider_min_length; } 101 | 102 | // button styling 103 | button { 104 | padding: 0; 105 | min-width: 12px; 106 | min-height: 12px; 107 | border-style: none; 108 | border-radius: 0; 109 | transition-property: min-height, min-width, color; 110 | 111 | @include button(undecorated); 112 | 113 | color: $scrollbar_slider_color; 114 | 115 | &:hover { 116 | @include button(undecorated); 117 | 118 | color: $scrollbar_slider_hover_color; 119 | } 120 | &:active, &:checked { 121 | @include button(undecorated); 122 | 123 | color: $scrollbar_slider_active_color; 124 | } 125 | &:disabled { 126 | @include button(undecorated); 127 | 128 | color: $scrollbar_slider_color; 129 | } 130 | } 131 | 132 | // button icons 133 | &.vertical { 134 | button { 135 | &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } 136 | &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } 137 | } 138 | } 139 | 140 | &.horizontal { 141 | button { 142 | &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } 143 | &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } 144 | } 145 | } 146 | } 147 | 148 | treeview ~ scrollbar.vertical { 149 | border-top: 1px solid $borders_color; 150 | margin-top: -1px; 151 | } 152 | -------------------------------------------------------------------------------- /src/sass/widgets/_sidebars.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'buttons'; 3 | 4 | .sidebar { 5 | border-style: none; 6 | background-color: $sidebar_bg_color; 7 | color: $sidebar_fg_color; 8 | 9 | &:backdrop { 10 | background-color: $sidebar_backdrop_color; 11 | } 12 | 13 | &:not(separator) { 14 | @at-root %sidebar_left, 15 | &:dir(ltr), 16 | &.left, 17 | &.left:dir(rtl) { 18 | border-right: 1px solid $sidebar_border_color; 19 | border-left-style: none; 20 | } 21 | 22 | @at-root %sidebar_right, 23 | &:dir(rtl), 24 | &.right { 25 | border-left: 1px solid $sidebar_border_color; 26 | border-right-style: none; 27 | } 28 | } 29 | 30 | list { background-color: transparent; } 31 | 32 | paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} 33 | 34 | row { 35 | border-radius: $button_radius; 36 | &:backdrop { color: $sidebar_fg_color; } 37 | } 38 | row, separator { 39 | margin: 0 4px; 40 | } 41 | } 42 | 43 | stacksidebar { 44 | &.sidebar { 45 | &:dir(ltr), 46 | &.left, 47 | &.left:dir(rtl) { list { @extend %sidebar_left; }} 48 | 49 | &:dir(rtl), 50 | &.right { list { @extend %sidebar_right; }} 51 | } 52 | 53 | row { 54 | padding: 10px 4px; 55 | 56 | > label { 57 | padding-left: 6px; 58 | padding-right: 6px; 59 | } 60 | 61 | &.needs-attention > label { 62 | @extend %needs_attention; 63 | 64 | background-size: 6px 6px, 0 0; 65 | } 66 | } 67 | } 68 | 69 | separator.sidebar { 70 | background-color: $sidebar_border_color; 71 | 72 | &.selection-mode, 73 | .selection-mode & { 74 | background-color: gtkshade($suggested_bg_color, 0.8); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/sass/widgets/_spin-button.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'entries'; 3 | 4 | $spinbutton_borders_color: gtkalpha(currentColor, 0.15); 5 | 6 | spinbutton { 7 | &:not(.vertical) { 8 | // in this horizontal configuration, the whole spinbutton 9 | // behaves as the entry, so we extend the entry styling 10 | // and nuke the style on the internal entry 11 | @extend %entry; 12 | 13 | padding: 0; 14 | 15 | %spinbutton_horz_entry { 16 | min-width: 28px; 17 | // reset all the other props since the spinbutton node is styled here 18 | margin: 0; 19 | background: none; 20 | background-color: transparent; 21 | border: none; 22 | border-radius: 0; 23 | box-shadow: none; 24 | 25 | &:backdrop:disabled { background-color: transparent; } 26 | } 27 | 28 | entry { 29 | @extend %spinbutton_horz_entry; 30 | } 31 | 32 | button { 33 | min-height: 16px; 34 | margin: 0; 35 | padding-bottom: 0; 36 | padding-top: 0; 37 | color: gtkmix($window_fg_color, $view_bg_color, 90%); 38 | background-color: transparent; 39 | border-style: none none none solid; 40 | border-color: $spinbutton_borders_color; 41 | border-radius: 0; 42 | box-shadow: none; 43 | 44 | &:dir(rtl) { border-style: none solid none none; } 45 | 46 | &:hover { 47 | @include button(hover); 48 | background-color: gtkalpha(currentColor, 0.1); 49 | } 50 | 51 | &:disabled { 52 | @include button(disabled); 53 | background-color: transparent; 54 | } 55 | 56 | &:active { 57 | @include button(active); 58 | background-color: gtkalpha(currentColor, 0.15); 59 | } 60 | 61 | &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; } 62 | 63 | &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; } 64 | } 65 | } 66 | 67 | // OSD horizontal 68 | .osd &:not(.vertical) { 69 | entry { 70 | @extend %spinbutton_horz_entry; 71 | } 72 | 73 | button { 74 | @include button(undecorated); 75 | 76 | color: $osd_fg_color; 77 | border-style: none none none solid; 78 | border-color: gtkalpha($osd_borders_color, 0.7); 79 | border-radius: 0; 80 | box-shadow: none; 81 | -gtk-icon-shadow: 0 1px black; 82 | 83 | &:dir(rtl) { border-style: none solid none none; } 84 | 85 | &:hover { 86 | @include button(undecorated); 87 | 88 | color: $osd_fg_color; 89 | border-color: gtkalpha(opacify($osd_borders_color, 1), 0.5); 90 | background-color: gtkalpha($osd_fg_color, 0.1); 91 | -gtk-icon-shadow: 0 1px black; 92 | box-shadow: none; 93 | } 94 | 95 | &:backdrop { 96 | @include button(undecorated); 97 | 98 | color: $osd_fg_color; 99 | border-color: gtkalpha(opacify($osd_borders_color, 1), 0.5); 100 | -gtk-icon-shadow: none; 101 | box-shadow: none; 102 | } 103 | 104 | &:disabled { 105 | @include button(undecorated); 106 | 107 | color: $osd_disabled_fg_color; 108 | border-color: gtkalpha(opacify($osd_borders_color, 1), $disabled_opacity); 109 | -gtk-icon-shadow: none; 110 | box-shadow: none; 111 | } 112 | 113 | &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; } 114 | 115 | &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; } 116 | } 117 | } 118 | 119 | // Vertical 120 | &.vertical { 121 | // in the vertical configuration, we treat the spinbutton 122 | // as a box, and tweak the style of the entry in the middle 123 | // so that it's linked 124 | 125 | // FIXME: this should not be set at all, but otherwise it gets the wrong 126 | // color 127 | &:disabled { color: $disabled_fg_color; } 128 | 129 | &:drop(active) { 130 | border-color: transparent; 131 | box-shadow: none; 132 | } 133 | 134 | entry { 135 | min-height: 32px; 136 | min-width: 32px; 137 | padding: 0; 138 | border-radius: 0; 139 | } 140 | 141 | button { 142 | min-height: 32px; 143 | min-width: 32px; 144 | padding: 0; 145 | 146 | &.up { @extend %top_button; } 147 | 148 | &.down { @extend %bottom_button; } 149 | } 150 | 151 | %top_button { 152 | border-color: $spinbutton_borders_color; 153 | border-radius: $button_radius $button_radius 0 0; 154 | border-style: none none solid none; 155 | } 156 | 157 | %bottom_button { 158 | border-color: $spinbutton_borders_color; 159 | border-radius: 0 0 $button_radius $button_radius; 160 | border-style: solid none none none; 161 | } 162 | } 163 | 164 | // OSD vertical 165 | .osd &.vertical button:first-child { 166 | @include button(osd); 167 | 168 | &:hover { @include button(osd-hover);} 169 | 170 | &:active { @include button(osd-active); } 171 | 172 | &:disabled { @include button(osd-disabled); } 173 | 174 | &:backdrop { @include button(osd-backdrop); } 175 | } 176 | 177 | // Misc 178 | treeview &:not(.vertical) { 179 | min-height: 0; 180 | border-style: none; 181 | border-radius: 0; 182 | 183 | entry { 184 | min-height: 0; 185 | padding: 1px 2px; 186 | } 187 | } 188 | font-feature-settings: "tnum"; 189 | } 190 | -------------------------------------------------------------------------------- /src/sass/widgets/_spinner.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | @keyframes spin { 4 | to { -gtk-icon-transform: rotate(1turn); } 5 | } 6 | 7 | spinner { 8 | background: none; 9 | &:backdrop { color: $backdrop_fg_color; } 10 | opacity: 0; // non spinning spinner makes no sense 11 | -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); 12 | 13 | &:checked { 14 | opacity: 1; 15 | animation: spin 1s linear infinite; 16 | 17 | &:disabled { opacity: $disabled_opacity; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/sass/widgets/_switch.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | switch { 4 | outline-offset: -4px; 5 | 6 | // similar to the .scale 7 | padding: 3px; 8 | border-radius: 14px; 9 | color: $window_fg_color; 10 | background-color: $switch_color; 11 | 12 | &:hover:not(:checked) { 13 | background-color: $switch_hover_color; 14 | } 15 | 16 | &:checked { 17 | color: $accent_fg_color; 18 | background-color: $checkradio_bg_color; 19 | 20 | &:hover { 21 | background-image: image(gtkalpha(currentColor, .1)); 22 | &:active { background-image: image(transparentize(black, .8)); } 23 | } 24 | 25 | &:disabled { 26 | background-color: gtkalpha($checkradio_bg_color, $disabled_opacity); 27 | } 28 | } 29 | 30 | &:disabled { 31 | color: $disabled_fg_color; 32 | border-color: transparent; 33 | background-color: $backdrop_dark_fill; 34 | text-shadow: none; 35 | } 36 | 37 | slider { 38 | margin: 0px; 39 | min-width: 20px; 40 | min-height: 20px; 41 | background-color: $slider_color; 42 | border: 1px solid transparent; 43 | border-radius: 50%; 44 | box-shadow: 0 2px 4px transparentize(black, .8); 45 | transition: $button_transition; 46 | -gtk-outline-radius: 20px; 47 | } 48 | 49 | image { color: transparent; } // only show i / o for the accessible theme 50 | 51 | &:hover slider { 52 | background-color: $slider_hover_color; 53 | } 54 | 55 | &:checked > slider { background-color: $slider_hover_color; } 56 | 57 | &:disabled slider { 58 | background-color: gtkmix($view_bg_color, $slider_color, 50%); 59 | box-shadow: none; 60 | } 61 | 62 | row:selected & { 63 | @if $variant == 'light' { 64 | box-shadow: none; 65 | border-color: $checkradio_borders_color; 66 | 67 | &:backdrop { border-color: $checkradio_borders_color; } 68 | 69 | > slider { &:checked, & { border-color: $checkradio_borders_color; } } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/sass/widgets/_toolbars.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | %toolbar { 4 | -GtkWidget-window-dragging: true; 5 | padding: 4px; 6 | background-color: $window_bg_color; 7 | &:backdrop { background-color: $backdrop_bg_color; } 8 | } 9 | 10 | toolbar { 11 | @extend %toolbar; 12 | 13 | padding: 4px 3px 3px 4px; 14 | 15 | // on OSD 16 | .osd & { background-color: transparent; } 17 | 18 | // stand-alone OSD toolbars 19 | &.osd { 20 | padding: 13px; 21 | border: none; 22 | border-radius: 5px; 23 | background-color: $osd_bg_color; 24 | 25 | &.left, 26 | &.right, 27 | &.top, 28 | &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars 29 | } 30 | 31 | // toolbar separators 32 | &.horizontal separator { margin: 0 7px 1px 6px; } 33 | &.vertical separator { margin: 6px 1px 7px 0; } 34 | 35 | &:not(.inline-toolbar):not(.osd) { 36 | // workaround: add margins to the children of tool items to simulate 37 | // spacing, ignore the overflow button (.toggle) and the overflow menu 38 | // (.popup) 39 | > *:not(.toggle):not(.popup) > * { 40 | margin-right: 1px; 41 | margin-bottom: 1px; 42 | } 43 | } 44 | } 45 | 46 | //searchbar, location-bar & inline-toolbar 47 | .inline-toolbar { 48 | @extend %toolbar; 49 | 50 | background-color: $window_bg_color; 51 | border-color: $border_color; 52 | border-style: solid; 53 | 54 | padding: 3px; 55 | border-width: 0 1px 1px; 56 | border-radius: 0 0 5px 5px; 57 | } 58 | 59 | searchbar > revealer > box, 60 | .location-bar { 61 | @extend %toolbar; 62 | 63 | border-width: 0 0 1px; 64 | border-style: solid; 65 | border-color: $border_color; 66 | padding: 3px; 67 | } 68 | 69 | searchbar > revealer > box { 70 | // workaround: undo the GtkContainer:border-width and use CSS padding instead 71 | margin: -6px; 72 | padding: 6px; 73 | } 74 | 75 | // Misc junk 76 | .primary-toolbar, .toolbar { 77 | background-color: $window_bg_color; 78 | &:backdrop { background-color: $backdrop_bg_color; } 79 | } 80 | -------------------------------------------------------------------------------- /src/sass/widgets/_tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | tooltip { 4 | padding: 6px 10px; // not working 5 | border-radius: 9px; 6 | box-shadow: none; // otherwise it gets inherited by windowframe.csd 7 | text-shadow: 0 1px black; 8 | 9 | &.background { 10 | // background-color needs to be set this way otherwise it gets drawn twice 11 | // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. 12 | background-color: rgba(0,0,0,0.8); 13 | background-clip: padding-box; 14 | border: 1px solid $tooltip_border_color; // this suble border is meant to 15 | // not make the tooltip melt with 16 | // very dark backgrounds 17 | } 18 | 19 | // FIXME: we need a border or tooltips vanish on black background. 20 | decoration { background-color: transparent; } 21 | 22 | * { // Yeah this is ugly 23 | padding: 4px; 24 | background-color: transparent; 25 | color: white; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/sass/widgets/_treeviews.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'views'; 3 | 4 | treeview.view { 5 | @at-root * { 6 | -GtkTreeView-horizontal-separator: 4; 7 | -GtkTreeView-grid-line-width: 1; 8 | -GtkTreeView-grid-line-pattern: ''; 9 | -GtkTreeView-tree-line-width: 1; 10 | -GtkTreeView-tree-line-pattern: ''; 11 | -GtkTreeView-expander-size: 16; 12 | } 13 | 14 | border-left-color: gtkmix($window_fg_color, $view_bg_color, 50%); // this is actually the tree lines color, 15 | border-top-color: $window_bg_color; // while this is the grid lines color, better then nothing 16 | 17 | rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props 18 | 19 | &:selected { 20 | &:focus, & { 21 | border-radius: 0; 22 | 23 | @extend %selected_items; 24 | } 25 | 26 | &:backdrop, & { 27 | border-left-color: gtkmix($accent_fg_color, $accent_bg_color, 50%); 28 | border-top-color: gtkalpha($window_fg_color, 0.1); // doesn't work unfortunatelly 29 | } 30 | } 31 | 32 | &:disabled { 33 | color: $disabled_fg_color; 34 | 35 | &:selected { 36 | color: gtkmix($accent_fg_color, $accent_bg_color, 40%); 37 | &:backdrop { color: gtkmix($backdrop_selected_fg_color, $accent_bg_color, 30%); } 38 | } 39 | } 40 | 41 | &.separator { 42 | min-height: 2px; 43 | color: $window_bg_color; 44 | } 45 | 46 | &:drop(active) { 47 | border-style: solid none; 48 | border-width: 1px; 49 | border-color: $selected_borders_color; 50 | 51 | &.after { border-top-style: none; } 52 | 53 | &.before { border-bottom-style: none; } 54 | } 55 | 56 | &.expander { 57 | -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); 58 | 59 | &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } 60 | 61 | color: gtkmix($view_fg_color, $view_bg_color, 70%); 62 | 63 | &:hover { color: $view_fg_color; } 64 | 65 | &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } 66 | } 67 | 68 | &.progressbar { // progress bar in treeviews 69 | @if $variant == 'light' { color: $view_bg_color; } 70 | 71 | background-color: $progress_bg_color; 72 | background-image: image($progress_bg_color); 73 | box-shadow: none; 74 | 75 | &:selected { 76 | &:focus, & { 77 | 78 | @if $variant == 'light' { 79 | color: $accent_bg_color; 80 | } 81 | 82 | @else { box-shadow: inset 0 1px transparentize(white, 0.95); } 83 | 84 | background-image: image($view_bg_color); 85 | 86 | &:backdrop { 87 | @if $variant == 'light' { 88 | color: $accent_bg_color; 89 | } 90 | background-color: $backdrop_base_color; 91 | } 92 | } 93 | } 94 | 95 | &:backdrop { 96 | @if $variant == 'light' { color: $backdrop_base_color; } 97 | 98 | @else { border-color: $backdrop_base_color; } 99 | background-image: none; 100 | box-shadow: none; 101 | } 102 | } 103 | 104 | &.trough { // progress bar trough in treeviews 105 | background-color: gtkalpha($window_fg_color,0.1); 106 | 107 | &:selected { 108 | &:focus, & { 109 | background-color: if($variant == 'light', 110 | gtkalpha($accent_fg_color, 0.3), 111 | gtkmix(black, $accent_bg_color, 10%)); 112 | 113 | } 114 | } 115 | } 116 | 117 | header { 118 | button { 119 | padding: 3px 6px; 120 | color: gtkmix($view_fg_color, $view_bg_color, 40%); 121 | background-image: none; 122 | background-color: $view_bg_color; 123 | border-bottom: 1px solid $borders_color; 124 | border-right: none; 125 | border-left: none; 126 | border-radius: 0; 127 | box-shadow: none; 128 | text-shadow: none; 129 | font-size: smaller; 130 | 131 | &:hover { 132 | color: gtkmix($view_fg_color, $view_bg_color, 70%); 133 | transition: none; 134 | background-image: none; 135 | } 136 | &:active { 137 | color: gtkmix($view_fg_color, $view_bg_color, 75%); 138 | transition: none; 139 | background-color: $view_bg_color; 140 | } 141 | 142 | &:disabled { 143 | border-color: $window_bg_color; 144 | background-image: none; 145 | } 146 | 147 | &:last-child { &:backdrop, & { border-right-style: none; }} 148 | } 149 | } 150 | 151 | button.dnd, 152 | header.button.dnd { // for treeview-like derive widgets 153 | &:active, &:selected, &:hover, & { 154 | padding: 3px 6px; 155 | color: $accent_fg_color; 156 | background-image: none; 157 | background-color: $accent_bg_color; 158 | border-style: none; 159 | border-radius: 0; 160 | box-shadow: none; 161 | text-shadow: none; 162 | transition: none; 163 | font-size: smaller; 164 | } 165 | } 166 | 167 | acceleditor > label { background-color: $accent_bg_color; } // see tests/testaccel to test 168 | } 169 | 170 | // Misc junk 171 | treeview.view:not(:backdrop):not(:selected):hover { 172 | background-color: $view_hover_color; // hover effect on treeview rows 173 | } 174 | -------------------------------------------------------------------------------- /src/sass/widgets/_views.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | 3 | %selected_items { 4 | background-color: $view_selected_color; 5 | 6 | @at-root %nobg_selected_items, & { 7 | color: $window_fg_color; 8 | 9 | @at-root %selected_items_disabled, 10 | &:disabled { 11 | //color: gtkmix($accent_fg_color, $accent_bg_color, 50%); 12 | } 13 | 14 | @at-root %selected_items_backdrop, 15 | &:backdrop { 16 | //color: $accent_fg_color; 17 | //&:disabled { color: gtkmix($backdrop_selected_fg_color, $accent_bg_color, 30%); } 18 | } 19 | } 20 | } 21 | 22 | .view, 23 | %view { 24 | color: $view_fg_color; 25 | background-color: $view_bg_color; 26 | caret-color: $caret_color; 27 | 28 | &:disabled { 29 | color: $disabled_fg_color; 30 | background-color: $disabled_bg_color; 31 | } 32 | 33 | &:selected { 34 | @extend %selected_items; 35 | &:focus, & { 36 | border-radius: $button_radius; 37 | } 38 | } 39 | } 40 | 41 | .view, 42 | textview { 43 | text { 44 | @extend %view; 45 | 46 | selection { &:focus, & { @extend %selected_items; }} 47 | } 48 | } 49 | 50 | textview border { background-color: gtkmix($window_bg_color, $view_bg_color, 50%); } 51 | 52 | iconview { @extend .view; } 53 | 54 | .rubberband, 55 | rubberband { 56 | border: 1px solid $accent_color; 57 | background-color: gtkalpha($accent_color, 0.2); 58 | } 59 | 60 | flowbox { 61 | rubberband { @extend rubberband; } 62 | 63 | flowboxchild { 64 | padding: 3px; 65 | 66 | &:selected { 67 | @extend %selected_items; 68 | 69 | outline-offset: -2px; 70 | } 71 | } 72 | } 73 | 74 | .content-view .tile { 75 | margin: 2px; 76 | background-color: if($variant=='light', transparent, black); 77 | border-radius: 0; 78 | padding: 0; 79 | 80 | &:backdrop { background-color: if($variant=='light', transparent, gtkmix(black,$window_bg_color,5%)); } 81 | &:active, &:selected { background-color: if($variant=='light', transparent, $accent_bg_color); } 82 | &:disabled { background-color: if($variant=='light', transparent, $disabled_bg_color); } 83 | } 84 | -------------------------------------------------------------------------------- /src/sass/widgets/_window.scss: -------------------------------------------------------------------------------- 1 | @use '../modules' as *; 2 | @forward 'header-bar'; 3 | @forward 'views'; 4 | 5 | decoration { 6 | border-radius: $window_radius $window_radius 0 0; 7 | // lamefun trick to get rounded borders regardless of CSD use 8 | border-width: 0px; 9 | 10 | // this needs to be transparent 11 | // see bug #722563 12 | $_wm_border: if($variant=='light', rgba(0,0,0,0.05), gtkshade($borders_color, 0.86)); 13 | $_wm_border_backdrop: if($variant=='light', rgba(0,0,0,0.02), gtkshade($borders_color, 0.7)); 14 | 15 | box-shadow: 0 3px 8px 1px rgba(0,0,0,0.3), 16 | 0 0 0 1px $_wm_border; //doing borders with box-shadow 17 | 18 | // FIXME rationalize shadows 19 | 20 | // this is used for the resize cursor area 21 | margin: 10px; 22 | 23 | &:backdrop { 24 | // the transparent shadow here is to enforce that the shadow extents don't 25 | // change when we go to backdrop, to prevent jumping windows. 26 | // The biggest shadow should be in the same order then in the active state 27 | // or the jumping will happen during the transition. 28 | box-shadow: 0 3px 8px 1px transparent, 29 | 0 2px 6px 2px rgba(0,0,0,0.14), 30 | 0 0 0 1px $_wm_border_backdrop; 31 | 32 | transition: $backdrop_transition; 33 | } 34 | 35 | .maximized &, 36 | .fullscreen & { border-radius: 0; box-shadow: none; } 37 | 38 | .tiled &, 39 | .tiled-top &, 40 | .tiled-right &, 41 | .tiled-bottom &, 42 | .tiled-left & { 43 | border-radius: 0; 44 | box-shadow: 0 0 0 1px $_wm_border, 45 | 0 0 0 20px transparent; //transparent control workaround -- #3670 46 | 47 | &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop, 48 | 0 0 0 20px transparent; // #3670 49 | } 50 | } 51 | 52 | .popup & { box-shadow: none; } 53 | 54 | // server-side decorations as used by mutter 55 | // just doing borders, wm draws actual shadows 56 | $_ssd_wm_border: if($variant=='light', rgba(0,0,0,0.3), gtkshade($borders_color, 0.86)); 57 | $_ssd_wm_border_backdrop: if($variant=='light', rgba(0,0,0,0.2), gtkshade($borders_color, 0.7)); 58 | .ssd & { box-shadow: 0 0 0 1px $_ssd_wm_border; } 59 | .ssd &:backdrop { box-shadow: 0 0 0 1px $_ssd_wm_border_backdrop; } 60 | .ssd.maximized &, 61 | .ssd.maximized &:backdrop { box-shadow: none; } 62 | 63 | .csd.popup & { 64 | border-radius: $menu_radius; 65 | box-shadow: 0 1px 2px rgba(0,0,0,0.2), 66 | 0 0 0 1px gtkalpha($_wm_border, 0.9); 67 | } 68 | 69 | tooltip.csd & { 70 | border-radius: 5px; 71 | box-shadow: none; 72 | } 73 | 74 | messagedialog.csd & { 75 | border-radius: $window_radius; 76 | box-shadow: 0 1px 2px rgba(0,0,0,0.2), 77 | 0 0 0 1px gtkalpha($_wm_border, 0.9); 78 | } 79 | 80 | .solid-csd & { 81 | margin: 0; 82 | padding: 4px; 83 | background-color: $borders_color; 84 | border: solid 1px $borders_color; 85 | border-radius: 0; 86 | box-shadow: inset 0 0 0 5px $borders_color, 87 | inset 0 0 0 4px $headerbar_bg_color, 88 | inset 0 0 0 1px $borders_color; 89 | 90 | &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color; } 91 | } 92 | } 93 | 94 | // Window Close button 95 | button.titlebutton { 96 | padding: 2px; 97 | margin: 0; 98 | box-shadow: none; 99 | border: none; 100 | background: none; 101 | text-shadow: none; 102 | 103 | &:not(.appmenu) { 104 | border-radius: 9999px; 105 | @extend %titlebutton; 106 | } 107 | 108 | .selection-mode & { 109 | @extend %nobg_selected_items; 110 | } 111 | 112 | &:backdrop { -gtk-icon-shadow: none; } 113 | } 114 | 115 | .selection-mode headerbar button.titlebutton, 116 | .selection-mode .titlebar button.titlebutton, 117 | headerbar.selection-mode button.titlebutton, 118 | .titlebar.selection-mode button.titlebutton { 119 | &:backdrop { -gtk-icon-shadow: none; } 120 | } 121 | 122 | .monospace { font-family: monospace; } 123 | -------------------------------------------------------------------------------- /src/theme-dark/gtk4/gtk-dark.css: -------------------------------------------------------------------------------- 1 | /* GTK NAMED COLORS ---------------- use responsibly! */ 2 | @define-color destructive_bg_color @red_4; 3 | @define-color destructive_fg_color white; 4 | @define-color success_bg_color @green_5; 5 | @define-color success_fg_color white; 6 | @define-color warning_bg_color #cd9309; 7 | @define-color warning_fg_color RGB(0 0 0 / 80%); 8 | @define-color error_bg_color @red_4; 9 | @define-color error_fg_color white; 10 | @define-color accent_color oklab(from @accent_bg_color max(l, 0.85) a b); 11 | @define-color destructive_color oklab(from @destructive_bg_color max(l, 0.85) a b); 12 | @define-color success_color oklab(from @success_bg_color max(l, 0.85) a b); 13 | @define-color warning_color oklab(from @warning_bg_color max(l, 0.85) a b); 14 | @define-color error_color oklab(from @error_bg_color max(l, 0.85) a b); 15 | @define-color window_bg_color #222226; 16 | @define-color window_fg_color white; 17 | @define-color view_bg_color #1d1d20; 18 | @define-color view_fg_color white; 19 | @define-color headerbar_bg_color #2e2e32; 20 | @define-color headerbar_fg_color white; 21 | @define-color headerbar_border_color white; 22 | @define-color headerbar_backdrop_color @window_bg_color; 23 | @define-color headerbar_shade_color RGB(0 0 6/36%); 24 | @define-color headerbar_darker_shade_color RGB(0 0 12/90%); 25 | @define-color sidebar_bg_color #2e2e32; 26 | @define-color sidebar_fg_color white; 27 | @define-color sidebar_backdrop_color #28282c; 28 | @define-color sidebar_shade_color RGB(0 0 6/25%); 29 | @define-color sidebar_border_color RGB(0 0 6/36%); 30 | @define-color secondary_sidebar_bg_color #28282c; 31 | @define-color secondary_sidebar_fg_color white; 32 | @define-color secondary_sidebar_backdrop_color #252529; 33 | @define-color secondary_sidebar_shade_color RGB(0 0 6/25%); 34 | @define-color secondary_sidebar_border_color RGB(0 0 6/36%); 35 | @define-color card_bg_color RGB(255 255 255/8%); 36 | @define-color card_fg_color white; 37 | @define-color card_shade_color RGB(0 0 6/36%); 38 | @define-color dialog_bg_color #36363a; 39 | @define-color dialog_fg_color white; 40 | @define-color popover_bg_color #36363a; 41 | @define-color popover_fg_color white; 42 | @define-color popover_shade_color RGB(0 0 6/25%); 43 | @define-color thumbnail_bg_color #39393d; 44 | @define-color thumbnail_fg_color white; 45 | @define-color shade_color RGB(0 0 6/25%); 46 | @define-color scrollbar_outline_color RGB(0 0 12/95%); 47 | :root { --standalone-color-oklab: max(l, 0.85) a b; --accent-color: oklab( 48 | from var(--accent-bg-color) var(--standalone-color-oklab) 49 | ); --destructive-color: oklab( 50 | from var(--destructive-bg-color) var(--standalone-color-oklab) 51 | ); --success-color: oklab( 52 | from var(--success-bg-color) var(--standalone-color-oklab) 53 | ); --warning-color: oklab( 54 | from var(--warning-bg-color) var(--standalone-color-oklab) 55 | ); --error-color: oklab( 56 | from var(--error-bg-color) var(--standalone-color-oklab) 57 | ); --active-toggle-bg-color: rgb(255 255 255 / 20%); --active-toggle-fg-color: #ffffff; --overview-bg-color: #28282c; --overview-fg-color: #ffffff; } 58 | @import 'libadwaita.css'; 59 | @import 'libadwaita-tweaks.css'; 60 | -------------------------------------------------------------------------------- /src/theme-dark/gtk4/gtk.css: -------------------------------------------------------------------------------- 1 | /* GTK NAMED COLORS ---------------- use responsibly! */ 2 | @define-color destructive_bg_color @red_4; 3 | @define-color destructive_fg_color white; 4 | @define-color success_bg_color @green_5; 5 | @define-color success_fg_color white; 6 | @define-color warning_bg_color #cd9309; 7 | @define-color warning_fg_color RGB(0 0 0 / 80%); 8 | @define-color error_bg_color @red_4; 9 | @define-color error_fg_color white; 10 | @define-color accent_color oklab(from @accent_bg_color max(l, 0.85) a b); 11 | @define-color destructive_color oklab(from @destructive_bg_color max(l, 0.85) a b); 12 | @define-color success_color oklab(from @success_bg_color max(l, 0.85) a b); 13 | @define-color warning_color oklab(from @warning_bg_color max(l, 0.85) a b); 14 | @define-color error_color oklab(from @error_bg_color max(l, 0.85) a b); 15 | @define-color window_bg_color #222226; 16 | @define-color window_fg_color white; 17 | @define-color view_bg_color #1d1d20; 18 | @define-color view_fg_color white; 19 | @define-color headerbar_bg_color #2e2e32; 20 | @define-color headerbar_fg_color white; 21 | @define-color headerbar_border_color white; 22 | @define-color headerbar_backdrop_color @window_bg_color; 23 | @define-color headerbar_shade_color RGB(0 0 6/36%); 24 | @define-color headerbar_darker_shade_color RGB(0 0 12/90%); 25 | @define-color sidebar_bg_color #2e2e32; 26 | @define-color sidebar_fg_color white; 27 | @define-color sidebar_backdrop_color #28282c; 28 | @define-color sidebar_shade_color RGB(0 0 6/25%); 29 | @define-color sidebar_border_color RGB(0 0 6/36%); 30 | @define-color secondary_sidebar_bg_color #28282c; 31 | @define-color secondary_sidebar_fg_color white; 32 | @define-color secondary_sidebar_backdrop_color #252529; 33 | @define-color secondary_sidebar_shade_color RGB(0 0 6/25%); 34 | @define-color secondary_sidebar_border_color RGB(0 0 6/36%); 35 | @define-color card_bg_color RGB(255 255 255/8%); 36 | @define-color card_fg_color white; 37 | @define-color card_shade_color RGB(0 0 6/36%); 38 | @define-color dialog_bg_color #36363a; 39 | @define-color dialog_fg_color white; 40 | @define-color popover_bg_color #36363a; 41 | @define-color popover_fg_color white; 42 | @define-color popover_shade_color RGB(0 0 6/25%); 43 | @define-color thumbnail_bg_color #39393d; 44 | @define-color thumbnail_fg_color white; 45 | @define-color shade_color RGB(0 0 6/25%); 46 | @define-color scrollbar_outline_color RGB(0 0 12/95%); 47 | :root { --standalone-color-oklab: max(l, 0.85) a b; --accent-color: oklab( 48 | from var(--accent-bg-color) var(--standalone-color-oklab) 49 | ); --destructive-color: oklab( 50 | from var(--destructive-bg-color) var(--standalone-color-oklab) 51 | ); --success-color: oklab( 52 | from var(--success-bg-color) var(--standalone-color-oklab) 53 | ); --warning-color: oklab( 54 | from var(--warning-bg-color) var(--standalone-color-oklab) 55 | ); --error-color: oklab( 56 | from var(--error-bg-color) var(--standalone-color-oklab) 57 | ); --active-toggle-bg-color: rgb(255 255 255 / 20%); --active-toggle-fg-color: #ffffff; --overview-bg-color: #28282c; --overview-fg-color: #ffffff; } 58 | @import 'libadwaita.css'; 59 | @import 'libadwaita-tweaks.css'; 60 | -------------------------------------------------------------------------------- /src/theme-dark/meson.build: -------------------------------------------------------------------------------- 1 | # Configure our index.theme file 2 | dark_conf_data = configuration_data() 3 | dark_conf_data.set('ThemeName', meson.project_name()) 4 | dark_conf_data.set('VariantThemeName', meson.project_name() + '-dark') 5 | configure_file(input: '../index.theme.in', output: 'index.theme.dark', configuration: dark_conf_data) 6 | install_data(meson.current_build_dir() / 'index.theme.dark', install_dir: theme_dir_dark, rename: 'index.theme') 7 | 8 | # Make sure we have depend files so ninja can detect changes 9 | sass_path = '../sass' 10 | sass_depend_files = run_command( 11 | 'find', 12 | sass_path, 13 | '-name', '*.scss', 14 | check : true 15 | ).stdout().split() 16 | 17 | # Compile the CSS 18 | gtk_dark_css_target = custom_target('generate_gtk_dark_css', 19 | input: '../sass/gtk-dark.scss', 20 | output: 'gtk.css', 21 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 22 | build_by_default: true, 23 | install: true, 24 | install_dir: gtk3_dir_dark, 25 | depend_files: sass_depend_files 26 | ) 27 | 28 | gtk_dark_dark_css_target = custom_target('generate_gtk_dark_dark_css', 29 | input: '../sass/gtk-dark.scss', 30 | output: 'gtk-dark.css', 31 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 32 | build_by_default: true, 33 | install: true, 34 | install_dir: gtk3_dir_dark, 35 | depend_files: sass_depend_files 36 | ) 37 | 38 | # GTK4 39 | 40 | gtk4_asset_dir = join_paths(gtk4_dir_dark, 'assets') 41 | 42 | gtk4_assets = [ 43 | '../assets/bullet-symbolic.svg', 44 | '../assets/bullet-symbolic.symbolic.png', 45 | '../assets/bullet@2-symbolic.symbolic.png', 46 | '../assets/check-symbolic.svg', 47 | '../assets/check-symbolic.symbolic.png', 48 | '../assets/check@2-symbolic.symbolic.png', 49 | '../assets/dash-symbolic.svg', 50 | '../assets/dash-symbolic.symbolic.png', 51 | '../assets/dash@2-symbolic.symbolic.png', 52 | '../assets/devel-symbolic.svg', 53 | ] 54 | 55 | gtk4_css = [ 56 | 'gtk4/gtk.css', 57 | 'gtk4/gtk-dark.css', 58 | 'gtk4/libadwaita.css', 59 | ] 60 | 61 | libadwaita_tweaks_target = custom_target('generate_libadwaita_tweaks_css', 62 | input: '../sass/gtk4/theme-dark.scss', 63 | output: 'libadwaita-tweaks.css', 64 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 65 | build_by_default: true, 66 | install: true, 67 | install_dir: gtk4_dir_dark, 68 | depend_files: sass_depend_files 69 | ) 70 | 71 | install_data(gtk4_css, install_dir: gtk4_dir_dark) 72 | install_data(gtk4_assets, install_dir: gtk4_asset_dir) 73 | 74 | # Misc 75 | install_subdir('../assets', install_dir : gtk3_dir_dark, strip_directory : false) 76 | install_data(['thumbnail-dark.png'], install_dir: gtk3_dir_dark, rename: ['thumbnail.png']) 77 | -------------------------------------------------------------------------------- /src/theme-dark/thumbnail-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/theme-dark/thumbnail-dark.png -------------------------------------------------------------------------------- /src/theme-light/gtk4/gtk-dark.css: -------------------------------------------------------------------------------- 1 | /* GTK NAMED COLORS ---------------- use responsibly! */ 2 | @define-color destructive_bg_color @red_4; 3 | @define-color destructive_fg_color white; 4 | @define-color success_bg_color @green_5; 5 | @define-color success_fg_color white; 6 | @define-color warning_bg_color #cd9309; 7 | @define-color warning_fg_color RGB(0 0 0 / 80%); 8 | @define-color error_bg_color @red_4; 9 | @define-color error_fg_color white; 10 | @define-color accent_color oklab(from @accent_bg_color max(l, 0.85) a b); 11 | @define-color destructive_color oklab(from @destructive_bg_color max(l, 0.85) a b); 12 | @define-color success_color oklab(from @success_bg_color max(l, 0.85) a b); 13 | @define-color warning_color oklab(from @warning_bg_color max(l, 0.85) a b); 14 | @define-color error_color oklab(from @error_bg_color max(l, 0.85) a b); 15 | @define-color window_bg_color #222226; 16 | @define-color window_fg_color white; 17 | @define-color view_bg_color #1d1d20; 18 | @define-color view_fg_color white; 19 | @define-color headerbar_bg_color #2e2e32; 20 | @define-color headerbar_fg_color white; 21 | @define-color headerbar_border_color white; 22 | @define-color headerbar_backdrop_color @window_bg_color; 23 | @define-color headerbar_shade_color RGB(0 0 6/36%); 24 | @define-color headerbar_darker_shade_color RGB(0 0 12/90%); 25 | @define-color sidebar_bg_color #2e2e32; 26 | @define-color sidebar_fg_color white; 27 | @define-color sidebar_backdrop_color #28282c; 28 | @define-color sidebar_shade_color RGB(0 0 6/25%); 29 | @define-color sidebar_border_color RGB(0 0 6/36%); 30 | @define-color secondary_sidebar_bg_color #28282c; 31 | @define-color secondary_sidebar_fg_color white; 32 | @define-color secondary_sidebar_backdrop_color #252529; 33 | @define-color secondary_sidebar_shade_color RGB(0 0 6/25%); 34 | @define-color secondary_sidebar_border_color RGB(0 0 6/36%); 35 | @define-color card_bg_color RGB(255 255 255/8%); 36 | @define-color card_fg_color white; 37 | @define-color card_shade_color RGB(0 0 6/36%); 38 | @define-color dialog_bg_color #36363a; 39 | @define-color dialog_fg_color white; 40 | @define-color popover_bg_color #36363a; 41 | @define-color popover_fg_color white; 42 | @define-color popover_shade_color RGB(0 0 6/25%); 43 | @define-color thumbnail_bg_color #39393d; 44 | @define-color thumbnail_fg_color white; 45 | @define-color shade_color RGB(0 0 6/25%); 46 | @define-color scrollbar_outline_color RGB(0 0 12/95%); 47 | :root { --standalone-color-oklab: max(l, 0.85) a b; --accent-color: oklab( 48 | from var(--accent-bg-color) var(--standalone-color-oklab) 49 | ); --destructive-color: oklab( 50 | from var(--destructive-bg-color) var(--standalone-color-oklab) 51 | ); --success-color: oklab( 52 | from var(--success-bg-color) var(--standalone-color-oklab) 53 | ); --warning-color: oklab( 54 | from var(--warning-bg-color) var(--standalone-color-oklab) 55 | ); --error-color: oklab( 56 | from var(--error-bg-color) var(--standalone-color-oklab) 57 | ); --active-toggle-bg-color: rgb(255 255 255 / 20%); --active-toggle-fg-color: #ffffff; --overview-bg-color: #28282c; --overview-fg-color: #ffffff; } 58 | @import 'libadwaita.css'; 59 | @import 'libadwaita-tweaks.css'; 60 | -------------------------------------------------------------------------------- /src/theme-light/gtk4/gtk.css: -------------------------------------------------------------------------------- 1 | /* GTK NAMED COLORS ---------------- use responsibly! */ 2 | @define-color destructive_bg_color @red_3; 3 | @define-color destructive_fg_color white; 4 | @define-color success_bg_color @green_4; 5 | @define-color success_fg_color white; 6 | @define-color warning_bg_color @yellow_5; 7 | @define-color warning_fg_color RGB(0 0 0 / 80%); 8 | @define-color error_bg_color @red_3; 9 | @define-color error_fg_color white; 10 | @define-color accent_color oklab(from @accent_bg_color min(l, 0.5) a b); 11 | @define-color destructive_color oklab(from @destructive_bg_color min(l, 0.5) a b); 12 | @define-color success_color oklab(from @success_bg_color min(l, 0.5) a b); 13 | @define-color warning_color oklab(from @warning_bg_color min(l, 0.5) a b); 14 | @define-color error_color oklab(from @error_bg_color min(l, 0.5) a b); 15 | @define-color window_bg_color #fafafb; 16 | @define-color window_fg_color RGB(0 0 6/80%); 17 | @define-color view_bg_color #ffffff; 18 | @define-color view_fg_color RGB(0 0 6/80%); 19 | @define-color headerbar_bg_color #ffffff; 20 | @define-color headerbar_fg_color RGB(0 0 6/80%); 21 | @define-color headerbar_border_color RGB(0 0 6/80%); 22 | @define-color headerbar_backdrop_color @window_bg_color; 23 | @define-color headerbar_shade_color RGB(0 0 6/12%); 24 | @define-color headerbar_darker_shade_color RGB(0 0 6/12%); 25 | @define-color sidebar_bg_color #ebebed; 26 | @define-color sidebar_fg_color RGB(0 0 6/80%); 27 | @define-color sidebar_backdrop_color #f2f2f4; 28 | @define-color sidebar_shade_color RGB(0 0 6/7%); 29 | @define-color sidebar_border_color RGB(0 0 6/7%); 30 | @define-color secondary_sidebar_bg_color #f3f3f5; 31 | @define-color secondary_sidebar_fg_color RGB(0 0 6/80%); 32 | @define-color secondary_sidebar_backdrop_color #f6f6fa; 33 | @define-color secondary_sidebar_shade_color RGB(0 0 6/7%); 34 | @define-color secondary_sidebar_border_color RGB(0 0 6/7%); 35 | @define-color card_bg_color #ffffff; 36 | @define-color card_fg_color RGB(0 0 6/80%); 37 | @define-color card_shade_color RGB(0 0 6/7%); 38 | @define-color dialog_bg_color #fafafb; 39 | @define-color dialog_fg_color RGB(0 0 6/80%); 40 | @define-color popover_bg_color #ffffff; 41 | @define-color popover_fg_color RGB(0 0 6/80%); 42 | @define-color popover_shade_color RGB(0 0 6/7%); 43 | @define-color thumbnail_bg_color #ffffff; 44 | @define-color thumbnail_fg_color RGB(0 0 6/80%); 45 | @define-color shade_color RGB(0 0 6/7%); 46 | @define-color scrollbar_outline_color white; 47 | :root { --standalone-color-oklab: min(l, 0.5) a b; --accent-color: oklab( 48 | from var(--accent-bg-color) var(--standalone-color-oklab) 49 | ); --destructive-color: oklab( 50 | from var(--destructive-bg-color) var(--standalone-color-oklab) 51 | ); --success-color: oklab( 52 | from var(--success-bg-color) var(--standalone-color-oklab) 53 | ); --warning-color: oklab( 54 | from var(--warning-bg-color) var(--standalone-color-oklab) 55 | ); --error-color: oklab( 56 | from var(--error-bg-color) var(--standalone-color-oklab) 57 | ); --active-toggle-bg-color: #ffffff; --active-toggle-fg-color: rgb(0 0 6 / 80%); --overview-bg-color: #f3f3f5; --overview-fg-color: rgb(0 0 6 / 80%); } 58 | @import 'libadwaita.css'; 59 | @import 'libadwaita-tweaks.css'; 60 | -------------------------------------------------------------------------------- /src/theme-light/meson.build: -------------------------------------------------------------------------------- 1 | # Configure our index.theme file 2 | light_conf_data = configuration_data() 3 | light_conf_data.set('ThemeName', meson.project_name()) 4 | light_conf_data.set('VariantThemeName', meson.project_name()) 5 | configure_file(input: '../index.theme.in', output: 'index.theme.light', configuration: light_conf_data) 6 | install_data(meson.current_build_dir() / 'index.theme.light', install_dir: theme_dir, rename: 'index.theme') 7 | 8 | # Make sure we have depend files so ninja can detect changes 9 | sass_path = '../sass' 10 | sass_depend_files = run_command( 11 | 'find', 12 | sass_path, 13 | '-name', '*.scss', 14 | check : true 15 | ).stdout().split() 16 | 17 | # Compile the CSS 18 | gtk_light_css_target = custom_target('generate_gtk_light_css', 19 | input: '../sass/gtk.scss', 20 | output: 'gtk.css', 21 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 22 | build_by_default: true, 23 | install: true, 24 | install_dir: gtk3_dir, 25 | depend_files: sass_depend_files 26 | ) 27 | 28 | gtk_light_dark_css_target = custom_target('generate_gtk_light_dark_css', 29 | input: '../sass/gtk-dark.scss', 30 | output: 'gtk-dark.css', 31 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 32 | build_by_default: true, 33 | install: true, 34 | install_dir: gtk3_dir, 35 | depend_files: sass_depend_files 36 | ) 37 | 38 | # GTK4 39 | 40 | gtk4_asset_dir = join_paths(gtk4_dir, 'assets') 41 | 42 | gtk4_assets = [ 43 | '../assets/bullet-symbolic.svg', 44 | '../assets/bullet-symbolic.symbolic.png', 45 | '../assets/bullet@2-symbolic.symbolic.png', 46 | '../assets/check-symbolic.svg', 47 | '../assets/check-symbolic.symbolic.png', 48 | '../assets/check@2-symbolic.symbolic.png', 49 | '../assets/dash-symbolic.svg', 50 | '../assets/dash-symbolic.symbolic.png', 51 | '../assets/dash@2-symbolic.symbolic.png', 52 | '../assets/devel-symbolic.svg', 53 | ] 54 | 55 | gtk4_css = [ 56 | 'gtk4/gtk.css', 57 | 'gtk4/gtk-dark.css', 58 | 'gtk4/libadwaita.css', 59 | ] 60 | 61 | libadwaita_tweaks_target = custom_target('generate_libadwaita_tweaks_css', 62 | input: '../sass/gtk4/theme-light.scss', 63 | output: 'libadwaita-tweaks.css', 64 | command: [sass, '--no-source-map', '@INPUT@', '@OUTPUT@'], 65 | build_by_default: true, 66 | install: true, 67 | install_dir: gtk4_dir, 68 | depend_files: sass_depend_files 69 | ) 70 | 71 | install_data(gtk4_css, install_dir: gtk4_dir) 72 | install_data(gtk4_assets, install_dir: gtk4_asset_dir) 73 | 74 | # Misc 75 | install_subdir('../assets', install_dir : gtk3_dir, strip_directory : false) 76 | install_data(['thumbnail-light.png'], install_dir: gtk3_dir, rename: ['thumbnail.png']) 77 | -------------------------------------------------------------------------------- /src/theme-light/thumbnail-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lassekongo83/adw-gtk3/666eea5f70978915f27a066762ed294c869104ec/src/theme-light/thumbnail-light.png -------------------------------------------------------------------------------- /version: -------------------------------------------------------------------------------- 1 | 6.2 2 | --------------------------------------------------------------------------------