├── .gitignore ├── LICENSE ├── Makefile ├── README.md ├── assets ├── svg │ ├── check.svg │ └── radio.svg └── symbolic │ ├── check.symbolic.png │ └── radio.symbolic.png ├── index.theme ├── package-lock.json ├── package.json └── scss └── gtk-3.0 ├── _colors.scss ├── _config.scss ├── applications ├── _chromium.scss ├── _firefox.scss ├── _index.scss ├── _nautilus.scss └── _nemo.scss ├── gtk.scss └── widgets ├── _actionbar.scss ├── _button.scss ├── _calendar.scss ├── _check.scss ├── _checkbutton.scss ├── _combobox.scss ├── _dialog.scss ├── _entry.scss ├── _expander.scss ├── _frame.scss ├── _headerbar.scss ├── _iconview.scss ├── _index.scss ├── _infobar.scss ├── _label.scss ├── _levelbar.scss ├── _list.scss ├── _menu.scss ├── _menubar.scss ├── _notebook.scss ├── _overshoot.scss ├── _paned.scss ├── _pathbar.scss ├── _placessidebar.scss ├── _popover.scss ├── _progressbar.scss ├── _radio.scss ├── _radiobutton.scss ├── _revealer.scss ├── _rubberband.scss ├── _scale.scss ├── _scrollbar.scss ├── _separator.scss ├── _spinbutton.scss ├── _spinner.scss ├── _switch.scss ├── _tabs.scss ├── _textview.scss ├── _toolbar.scss ├── _tooltip.scss ├── _treeview.scss └── _window.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /gtk-3.0/ 3 | .idea/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Philipp Schaffrath 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | PREFIX = /usr 2 | DESTDIR ?= 3 | INSTALL_DIR ?= $(DESTDIR)$(PREFIX)/share/themes/phocus 4 | 5 | all: 6 | npm install && npm run build 7 | 8 | install: 9 | @install -v -d "$(INSTALL_DIR)" 10 | @install -m 0644 -v index.theme "$(INSTALL_DIR)" 11 | @cp -rv assets gtk-3.0 "$(INSTALL_DIR)" 12 | 13 | uninstall: 14 | @rm -vrf "$(INSTALL_DIR)" 15 | 16 | .PHONY: all install uninstall 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phocus GTK3 Theme 2 | This GTK3 theme is part of the [Phocus](https://github.com/phocus/) theme collection. 3 | 4 | ## About GTK4 5 | Libadwaita applications can't be themed through a GTK4 theme. The amount of non-libadwaita GTK4 apps is so little, that it is not worth adding a phocus GTK4 theme. 6 | 7 | You can manually overwrite the libadwaita colors to somewhat get a phocus feeling. Feel free to copy this example from my dotfiles [~/.config/gtk-4.0/gtk.css](https://github.com/phisch/dotfiles/blob/master/.config/gtk-4.0/gtk.css). This won't get you the phocus look you are used to, but it is the best we can do. 8 | 9 | May proper GTK4 theming rest in piece 🪦 10 | 11 | ## Installation From source 12 | Make sure to install the following dependency: 13 | 14 | - [npm](https://www.npmjs.com/) 15 | 16 | Clone the phocus/gtk repository and build/install it using make: 17 | 18 | ```bash 19 | git clone https://github.com/phocus/gtk.git phocus-gtk 20 | cd phocus-gtk 21 | make 22 | sudo make install 23 | ``` 24 | 25 | ## Installation on Arch 26 | Install the AUR package [phocus-gtk-theme-git](https://aur.archlinux.org/packages/phocus-gtk-theme-git/) with your favourite AUR helper (or by hand, won't judge). 27 | ```bash 28 | paru -S phocus-gtk-theme-git 29 | ``` 30 | 31 | ## Development 32 | To make development as easy as possible, clone the repository and symlink it into your users `~/.themes` directory: 33 | ```bash 34 | git clone https://github.com/phocus/gtk.git ~/code/phocus 35 | ln -s ~/code/phocus ~/.themes/phocus 36 | ``` 37 | 38 | Install its npm dependencies: 39 | ```bash 40 | cd ~/.themes/phocus 41 | npm install 42 | ``` 43 | 44 | ### Build 45 | Build the theme by running its build script: 46 | ```bash 47 | npm run build 48 | ``` 49 | 50 | ### Watch 51 | Start a watcher that automatically builds when you modify a file: 52 | ```bash 53 | cd ~/themes/phocus 54 | npm run watch 55 | ``` 56 | 57 | ### Reload GTK Theme 58 | Make all open GTK applications reload the phocus theme by running: 59 | ```bash 60 | npm run reload_gtk_theme 61 | ``` 62 | 63 | This requires you to have [xsettingsd](https://github.com/derat/xsettingsd) installed. 64 | 65 | ### Watch and reload - *ultimate comfort* 66 | Automatically build on modifications, and make all open GTK applications reload the phocus theme: 67 | ```bash 68 | npm run watch_and_reload 69 | ``` 70 | 71 | Enjoy this quick demo of the ultimate comfort workflow: 72 | ![ultimate comfort demo](https://i.imgur.com/UjUpmG1.gif) 73 | 74 | ## Desktop Makers 75 | 76 | type=discord 77 | 78 | I am actively working on phocus and other cool projects on the [Desktop Makers Discord](https://discord.gg/RqKTeA4uxW). It aims to be a community for communities of Linux desktop related projects. If you are looking to collaborate with or want to contribute to great projects, this might be the right place for you. 79 | -------------------------------------------------------------------------------- /assets/svg/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | 23 | image/svg+xml 24 | 25 | 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | 79 | 82 | 83 | 84 | 85 | 86 | 87 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /assets/svg/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | 23 | image/svg+xml 24 | 25 | 26 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 44 | 45 | 46 | 72 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 91 | 92 | -------------------------------------------------------------------------------- /assets/symbolic/check.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phocus/gtk/9eb6df5c5ec2a7dfdfaa0daa35fd61918c5c86c9/assets/symbolic/check.symbolic.png -------------------------------------------------------------------------------- /assets/symbolic/radio.symbolic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phocus/gtk/9eb6df5c5ec2a7dfdfaa0daa35fd61918c5c86c9/assets/symbolic/radio.symbolic.png -------------------------------------------------------------------------------- /index.theme: -------------------------------------------------------------------------------- 1 | [Desktop Entry] 2 | Type=X-GNOME-Metatheme 3 | Name=phocus 4 | Comment=the phocus theme 5 | Encoding=UTF-8 6 | 7 | [X-GNOME-Metatheme] 8 | GtkTheme=phocus 9 | MetacityTheme=phocus 10 | IconTheme=gnome 11 | CursorTheme=DMZ-Black 12 | ButtonLayout=menu:minimize,maximize,close 13 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phisch", 3 | "version": "0.0.1", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "phisch", 9 | "version": "0.0.1", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "sass": "^1.32.12" 13 | } 14 | }, 15 | "node_modules/anymatch": { 16 | "version": "3.1.2", 17 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", 18 | "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", 19 | "dev": true, 20 | "dependencies": { 21 | "normalize-path": "^3.0.0", 22 | "picomatch": "^2.0.4" 23 | }, 24 | "engines": { 25 | "node": ">= 8" 26 | } 27 | }, 28 | "node_modules/binary-extensions": { 29 | "version": "2.2.0", 30 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 31 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 32 | "dev": true, 33 | "engines": { 34 | "node": ">=8" 35 | } 36 | }, 37 | "node_modules/braces": { 38 | "version": "3.0.3", 39 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", 40 | "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", 41 | "dev": true, 42 | "dependencies": { 43 | "fill-range": "^7.1.1" 44 | }, 45 | "engines": { 46 | "node": ">=8" 47 | } 48 | }, 49 | "node_modules/chokidar": { 50 | "version": "3.5.3", 51 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", 52 | "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", 53 | "dev": true, 54 | "funding": [ 55 | { 56 | "type": "individual", 57 | "url": "https://paulmillr.com/funding/" 58 | } 59 | ], 60 | "dependencies": { 61 | "anymatch": "~3.1.2", 62 | "braces": "~3.0.2", 63 | "glob-parent": "~5.1.2", 64 | "is-binary-path": "~2.1.0", 65 | "is-glob": "~4.0.1", 66 | "normalize-path": "~3.0.0", 67 | "readdirp": "~3.6.0" 68 | }, 69 | "engines": { 70 | "node": ">= 8.10.0" 71 | }, 72 | "optionalDependencies": { 73 | "fsevents": "~2.3.2" 74 | } 75 | }, 76 | "node_modules/fill-range": { 77 | "version": "7.1.1", 78 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", 79 | "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", 80 | "dev": true, 81 | "dependencies": { 82 | "to-regex-range": "^5.0.1" 83 | }, 84 | "engines": { 85 | "node": ">=8" 86 | } 87 | }, 88 | "node_modules/fsevents": { 89 | "version": "2.3.2", 90 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 91 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 92 | "dev": true, 93 | "hasInstallScript": true, 94 | "optional": true, 95 | "os": [ 96 | "darwin" 97 | ], 98 | "engines": { 99 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 100 | } 101 | }, 102 | "node_modules/glob-parent": { 103 | "version": "5.1.2", 104 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 105 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 106 | "dev": true, 107 | "dependencies": { 108 | "is-glob": "^4.0.1" 109 | }, 110 | "engines": { 111 | "node": ">= 6" 112 | } 113 | }, 114 | "node_modules/immutable": { 115 | "version": "4.0.0", 116 | "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", 117 | "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", 118 | "dev": true 119 | }, 120 | "node_modules/is-binary-path": { 121 | "version": "2.1.0", 122 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 123 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 124 | "dev": true, 125 | "dependencies": { 126 | "binary-extensions": "^2.0.0" 127 | }, 128 | "engines": { 129 | "node": ">=8" 130 | } 131 | }, 132 | "node_modules/is-extglob": { 133 | "version": "2.1.1", 134 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 135 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 136 | "dev": true, 137 | "engines": { 138 | "node": ">=0.10.0" 139 | } 140 | }, 141 | "node_modules/is-glob": { 142 | "version": "4.0.3", 143 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 144 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 145 | "dev": true, 146 | "dependencies": { 147 | "is-extglob": "^2.1.1" 148 | }, 149 | "engines": { 150 | "node": ">=0.10.0" 151 | } 152 | }, 153 | "node_modules/is-number": { 154 | "version": "7.0.0", 155 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 156 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 157 | "dev": true, 158 | "engines": { 159 | "node": ">=0.12.0" 160 | } 161 | }, 162 | "node_modules/normalize-path": { 163 | "version": "3.0.0", 164 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 165 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 166 | "dev": true, 167 | "engines": { 168 | "node": ">=0.10.0" 169 | } 170 | }, 171 | "node_modules/picomatch": { 172 | "version": "2.3.1", 173 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 174 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 175 | "dev": true, 176 | "engines": { 177 | "node": ">=8.6" 178 | }, 179 | "funding": { 180 | "url": "https://github.com/sponsors/jonschlinkert" 181 | } 182 | }, 183 | "node_modules/readdirp": { 184 | "version": "3.6.0", 185 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 186 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 187 | "dev": true, 188 | "dependencies": { 189 | "picomatch": "^2.2.1" 190 | }, 191 | "engines": { 192 | "node": ">=8.10.0" 193 | } 194 | }, 195 | "node_modules/sass": { 196 | "version": "1.49.9", 197 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", 198 | "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", 199 | "dev": true, 200 | "dependencies": { 201 | "chokidar": ">=3.0.0 <4.0.0", 202 | "immutable": "^4.0.0", 203 | "source-map-js": ">=0.6.2 <2.0.0" 204 | }, 205 | "bin": { 206 | "sass": "sass.js" 207 | }, 208 | "engines": { 209 | "node": ">=12.0.0" 210 | } 211 | }, 212 | "node_modules/source-map-js": { 213 | "version": "1.0.2", 214 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 215 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 216 | "dev": true, 217 | "engines": { 218 | "node": ">=0.10.0" 219 | } 220 | }, 221 | "node_modules/to-regex-range": { 222 | "version": "5.0.1", 223 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 224 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 225 | "dev": true, 226 | "dependencies": { 227 | "is-number": "^7.0.0" 228 | }, 229 | "engines": { 230 | "node": ">=8.0" 231 | } 232 | } 233 | }, 234 | "dependencies": { 235 | "anymatch": { 236 | "version": "3.1.2", 237 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", 238 | "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", 239 | "dev": true, 240 | "requires": { 241 | "normalize-path": "^3.0.0", 242 | "picomatch": "^2.0.4" 243 | } 244 | }, 245 | "binary-extensions": { 246 | "version": "2.2.0", 247 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 248 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 249 | "dev": true 250 | }, 251 | "braces": { 252 | "version": "3.0.3", 253 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", 254 | "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", 255 | "dev": true, 256 | "requires": { 257 | "fill-range": "^7.1.1" 258 | } 259 | }, 260 | "chokidar": { 261 | "version": "3.5.3", 262 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", 263 | "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", 264 | "dev": true, 265 | "requires": { 266 | "anymatch": "~3.1.2", 267 | "braces": "~3.0.2", 268 | "fsevents": "~2.3.2", 269 | "glob-parent": "~5.1.2", 270 | "is-binary-path": "~2.1.0", 271 | "is-glob": "~4.0.1", 272 | "normalize-path": "~3.0.0", 273 | "readdirp": "~3.6.0" 274 | } 275 | }, 276 | "fill-range": { 277 | "version": "7.1.1", 278 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", 279 | "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", 280 | "dev": true, 281 | "requires": { 282 | "to-regex-range": "^5.0.1" 283 | } 284 | }, 285 | "fsevents": { 286 | "version": "2.3.2", 287 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 288 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 289 | "dev": true, 290 | "optional": true 291 | }, 292 | "glob-parent": { 293 | "version": "5.1.2", 294 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 295 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 296 | "dev": true, 297 | "requires": { 298 | "is-glob": "^4.0.1" 299 | } 300 | }, 301 | "immutable": { 302 | "version": "4.0.0", 303 | "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", 304 | "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", 305 | "dev": true 306 | }, 307 | "is-binary-path": { 308 | "version": "2.1.0", 309 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 310 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 311 | "dev": true, 312 | "requires": { 313 | "binary-extensions": "^2.0.0" 314 | } 315 | }, 316 | "is-extglob": { 317 | "version": "2.1.1", 318 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 319 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 320 | "dev": true 321 | }, 322 | "is-glob": { 323 | "version": "4.0.3", 324 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 325 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 326 | "dev": true, 327 | "requires": { 328 | "is-extglob": "^2.1.1" 329 | } 330 | }, 331 | "is-number": { 332 | "version": "7.0.0", 333 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 334 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 335 | "dev": true 336 | }, 337 | "normalize-path": { 338 | "version": "3.0.0", 339 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 340 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 341 | "dev": true 342 | }, 343 | "picomatch": { 344 | "version": "2.3.1", 345 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 346 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 347 | "dev": true 348 | }, 349 | "readdirp": { 350 | "version": "3.6.0", 351 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 352 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 353 | "dev": true, 354 | "requires": { 355 | "picomatch": "^2.2.1" 356 | } 357 | }, 358 | "sass": { 359 | "version": "1.49.9", 360 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", 361 | "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", 362 | "dev": true, 363 | "requires": { 364 | "chokidar": ">=3.0.0 <4.0.0", 365 | "immutable": "^4.0.0", 366 | "source-map-js": ">=0.6.2 <2.0.0" 367 | } 368 | }, 369 | "source-map-js": { 370 | "version": "1.0.2", 371 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 372 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 373 | "dev": true 374 | }, 375 | "to-regex-range": { 376 | "version": "5.0.1", 377 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 378 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 379 | "dev": true, 380 | "requires": { 381 | "is-number": "^7.0.0" 382 | } 383 | } 384 | } 385 | } 386 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phisch", 3 | "version": "0.0.1", 4 | "description": "GTK3 theme based on the Phocus colors.", 5 | "scripts": { 6 | "build": "sass scss:.", 7 | "watch": "sass scss:. -w --no-source-map --color", 8 | "reload_gtk_theme": "xsettingsd -c <(echo 'Net/ThemeName \"phocus\"') >/dev/null 2>&1 & sleep 0.2 && kill $!", 9 | "watch_and_reload": "npm run watch | tee /dev/tty | grep --line-buffered 'Compiled' | while read -r l; do npm run reload_gtk_theme --silent; done;" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/phocus/gtk.git" 14 | }, 15 | "keywords": [ 16 | "gtk3", 17 | "gtk3-theme", 18 | "theme" 19 | ], 20 | "author": "Philipp Schaffrath", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/phocus/gtk/issues" 24 | }, 25 | "homepage": "https://github.com/phocus/gtk#readme", 26 | "devDependencies": { 27 | "sass": "^1.32.12" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/gtk-3.0/_colors.scss: -------------------------------------------------------------------------------- 1 | $surface-strongest: rgb(10, 10, 10); 2 | $surface-strong: rgb(20, 20, 20); 3 | $surface-moderate: rgb(28, 28, 28); 4 | $surface-weak: rgb(34, 34, 34); 5 | $surface-weakest: rgb(40, 40, 40); 6 | 7 | $white-strongest: rgb(255, 255, 255); 8 | $white-strong: rgba(255, 255, 255, 0.87); 9 | $white-moderate: rgba(255, 255, 255, 0.34); 10 | $white-weak: rgba(255, 255, 255, 0.14); 11 | $white-weakest: rgba(255, 255, 255, 0.06); 12 | 13 | $black-strongest: rgb(0, 0, 0); 14 | $black-strong: rgba(0, 0, 0, 0.87); 15 | $black-moderate: rgba(0, 0, 0, 0.42); 16 | $black-weak: rgba(0, 0, 0, 0.15); 17 | $black-weakest: rgba(0, 0, 0, 0.06); 18 | 19 | $red-normal: rgb(218, 88, 88); 20 | $red-light:rgb(227, 109, 109); 21 | $orange-normal: rgb(237, 148, 84); 22 | $orange-light: rgb(252, 166, 105); 23 | $yellow-normal: rgb(232, 202, 94); 24 | $yellow-light: rgb(250, 221, 117); 25 | $green-normal: rgb(63, 198, 97); 26 | $green-light: rgb(97, 214, 126); 27 | $cyan-normal: rgb(92, 216, 230); 28 | $cyan-light: rgb(126, 234, 246); 29 | $blue-normal: rgb(73, 126, 233); 30 | $blue-light: rgb(93, 141, 238); 31 | $purple-normal: rgb(113, 84, 242); 32 | $purple-light: rgb(128, 102, 245); 33 | $pink-normal: rgb(213, 108, 195); 34 | $pink-light: rgb(223, 129, 207); 35 | 36 | $accent-primary: $purple-normal; 37 | $accent-secondary: $green-normal; 38 | 39 | // TODO: is there a better way to do this? this is for example used in gnome-calculator for the result top-border 40 | @define-color borders #{"" +$surface-strong}; -------------------------------------------------------------------------------- /scss/gtk-3.0/_config.scss: -------------------------------------------------------------------------------- 1 | $spacing-small: 0.3em; 2 | $spacing-medium: 0.6em; 3 | $spacing-large: 0.9em; 4 | 5 | $tint-weak: 0.3; 6 | $tint-medium: 0.6; 7 | $tint-strong: 0.8; 8 | 9 | $border-size: 0.2em; 10 | 11 | $radius: 0.5em; 12 | 13 | $disabled-opacity: 0.3; -------------------------------------------------------------------------------- /scss/gtk-3.0/applications/_chromium.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | // TODO: theme "this tab is playing audio" tooltip section 4 | // TODO: find out how bookmark drag and drop boxes render their buggy 1px border 5 | // TODO: check how separators are rendered. `separator, .separator` background affects a larger area than wanted. 6 | 7 | window.background.chromium { 8 | // active tab and toolbar colors 9 | background: lighten(colors.$surface-weak, 2%); 10 | color: colors.$white-strong; 11 | 12 | button { 13 | border: 1px solid lighten(colors.$surface-weak, 2%); 14 | } 15 | 16 | .titlebutton { 17 | border: transparent; 18 | } 19 | 20 | entry { 21 | // chromium manipulates this color, so it is impossible to set a specific one 22 | // using black at least guarantees a light, monochrome color 23 | &:focus { 24 | border-color: colors.$black-strongest; 25 | } 26 | } 27 | 28 | // context menu colors 29 | menu { 30 | background: colors.$surface-moderate; 31 | menuitem { 32 | color: colors.$white-strong; 33 | &:hover { 34 | background: colors.$white-weakest; 35 | } 36 | &:disabled label { 37 | color: colors.$white-weakest; 38 | } 39 | } 40 | } 41 | 42 | // tab bar / headerbar 43 | headerbar, menubar { 44 | background: colors.$surface-strongest; 45 | 46 | label { 47 | color: colors.$white-moderate; 48 | } 49 | 50 | // this is a workaround to position titlebuttons to the very right 51 | .titlebutton { 52 | padding: 100px 80px; 53 | } 54 | } 55 | 56 | scrollbar { 57 | button { 58 | background: colors.$white-weakest; 59 | color: colors.$white-strong; 60 | } 61 | 62 | trough { 63 | background: transparent; 64 | } 65 | slider { 66 | background: colors.$white-weakest; 67 | } 68 | junction { 69 | background: colors.$white-weakest; 70 | } 71 | } 72 | 73 | // address bar 74 | textview { 75 | background-color: colors.$surface-strong; 76 | color: colors.$white-strong; 77 | } 78 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/applications/_firefox.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | 4 | #MozillaGtkWidget { 5 | // by default firefox mixes -moz-dialog 85& with pure white with in srgb space and uses that as the background 6 | // it's possible to kinda bypass it by either using color.adjust (what is currently being done) or modifying --toolbar-non-lwt-bgcolor and setting it to `-moz-dialog !important` 7 | // see: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css#46 8 | background: color.adjust(colors.$surface-weak, $lightness: - 15%); 9 | color: colors.$white-strong; 10 | 11 | // bar that contains inactive tabs 12 | // TODO: find out if the gtk headerbar (the one with decorations) can be themed as well 13 | menubar { 14 | color: colors.$white-moderate; 15 | background: colors.$surface-strongest; 16 | } 17 | 18 | // address-bar, side-bar (bookmarks), burger menu, account menu 19 | text { 20 | background: colors.$surface-moderate; 21 | } 22 | 23 | // context menus 24 | menu { 25 | background: colors.$surface-weak; 26 | 27 | // TODO: check if this can go into default menu styles, or if this is a weird selector for firefox 28 | :disabled { 29 | color: colors.$white-weakest; 30 | } 31 | 32 | // TODO: could potentially go into default styles, at the very least make it consistent 33 | separator { 34 | padding: 8px; 35 | } 36 | } 37 | 38 | // borders in menus, sidebars, navigation bar and more 39 | border { 40 | border: 1px solid colors.$surface-weak; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/gtk-3.0/applications/_index.scss: -------------------------------------------------------------------------------- 1 | @use "chromium"; 2 | @use "firefox"; 3 | @use "nautilus"; 4 | @use "nemo"; -------------------------------------------------------------------------------- /scss/gtk-3.0/applications/_nautilus.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | window.nautilus-window { 6 | // those are the items inside the nautilus canvas 7 | .nautilus-canvas-item { 8 | border-radius: config.$radius; 9 | &:selected, &:active { 10 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 11 | } 12 | } 13 | 14 | // this is the floating bar usually shown at the bottom right of nautilus when elements are selected 15 | .floating-bar { 16 | background: colors.$surface-strong; 17 | color: colors.$white-strong; 18 | padding: config.$spacing-small; 19 | 20 | &.bottom.left { 21 | border-top-right-radius: config.$radius; 22 | } 23 | &.bottom.right { 24 | border-top-left-radius: config.$radius; 25 | } 26 | } 27 | 28 | .nautilus-path-bar { 29 | background: colors.$white-weakest; 30 | border-radius: config.$radius; 31 | 32 | > button { 33 | background: transparent; 34 | &:hover { 35 | background: colors.$white-weakest; 36 | } 37 | } 38 | 39 | .path-buttons-box { 40 | button { 41 | background: transparent; 42 | &:hover:not(.current-dir) { 43 | background: transparent; 44 | label { 45 | color: colors.$white-moderate; 46 | } 47 | } 48 | } 49 | .dim-label { 50 | color: colors.$white-weak; 51 | opacity: 1; 52 | } 53 | } 54 | } 55 | 56 | .operations-list { 57 | background: transparent; 58 | row { 59 | background: transparent; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /scss/gtk-3.0/applications/_nemo.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "../colors"; 3 | @use "../config"; 4 | 5 | .nemo-window { 6 | .nemo-places-sidebar { 7 | background: colors.$surface-strong; 8 | } 9 | 10 | .primary-toolbar { 11 | background: colors.$surface-moderate; 12 | padding: config.$spacing-small; 13 | } 14 | 15 | menubar ~ separator { 16 | min-width: 0; 17 | min-height: 0; 18 | } 19 | 20 | .toolbar { 21 | background: colors.$surface-moderate; 22 | margin: -0.1em; 23 | } 24 | 25 | .nemo-window-pane { 26 | :selected { 27 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 28 | } 29 | :active { 30 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/gtk.scss: -------------------------------------------------------------------------------- 1 | @use "applications"; 2 | @use "widgets"; -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_actionbar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use "../config"; 3 | 4 | actionbar { 5 | padding: config.$spacing-medium; 6 | background: colors.$surface-strong; 7 | border-top: 1px solid colors.$white-weakest; 8 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_button.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | button { 6 | transition: background-color 100ms ease-in; 7 | background: colors.$white-weakest; 8 | padding: config.$spacing-medium; 9 | border-radius: config.$radius; 10 | 11 | &:hover:not(:active) { background: colors.$white-weak; } 12 | &:disabled { opacity: config.$disabled-opacity; } 13 | 14 | &:checked, &.suggested-action { 15 | background: color.change(colors.$purple-normal, $alpha: config.$tint-medium); 16 | color: colors.$white-strong; 17 | &:hover:not(:active) { 18 | background: color.change(colors.$purple-light, $alpha: config.$tint-medium); 19 | } 20 | } 21 | 22 | &.image-button:not(.text-button) { 23 | padding: calc(config.$spacing-medium + 0.2em); 24 | } 25 | 26 | &.destructive-action { 27 | background: color.change(colors.$red-normal, $alpha: config.$tint-medium); 28 | color: colors.$white-strongest; 29 | &:hover:not(:active) { 30 | background: color.change(colors.$red-light, $alpha: config.$tint-medium); 31 | } 32 | } 33 | 34 | &.circular { 35 | border-radius: 100%; 36 | padding: calc(config.$spacing-medium + 0.2em); 37 | } 38 | 39 | &.flat { 40 | background: transparent; 41 | &:hover { 42 | background: colors.$white-weakest; 43 | } 44 | &:active, &:checked { 45 | background: colors.$white-weak; 46 | } 47 | } 48 | 49 | label + & { 50 | margin-left: config.$spacing-medium; 51 | } 52 | 53 | &.small-button { 54 | image:only-child { 55 | padding: config.$spacing-small; 56 | } 57 | } 58 | 59 | .linked.horizontal & { 60 | &:not(:first-child) { 61 | border-top-left-radius: 0; 62 | border-bottom-left-radius: 0; 63 | } 64 | &:not(:last-child) { 65 | border-top-right-radius: 0; 66 | border-bottom-right-radius: 0; 67 | } 68 | } 69 | 70 | .linked.vertical & { 71 | &:not(:first-child) { 72 | border-top-left-radius: 0; 73 | border-top-right-radius: 0; 74 | } 75 | &:not(:last-child) { 76 | border-bottom-left-radius: 0; 77 | border-bottom-right-radius: 0; 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | calendar { 4 | background: colors.$surface-strong; 5 | 6 | &.button { 7 | background: colors.$surface-moderate; 8 | color: colors.$white-moderate; 9 | 10 | &:hover { color: colors.$white-strong; } 11 | &:disabled { color: colors.$white-weakest; } 12 | } 13 | 14 | &.header { 15 | background: colors.$surface-moderate; 16 | } 17 | 18 | &.highlight { 19 | color: colors.$white-moderate; 20 | } 21 | 22 | &:selected { 23 | color: colors.$white-strongest; 24 | border-radius: 0.5em; 25 | background: colors.$accent-primary; 26 | } 27 | 28 | &:indeterminate { 29 | color: colors.$white-weak; 30 | } 31 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_check.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | check { 4 | -gtk-icon-source: -gtk-recolor(url('../assets/symbolic/check.symbolic.png')); 5 | -gtk-icon-transform: scale(0); 6 | color: colors.$white-strongest; 7 | border: 0.2em solid colors.$white-weakest; 8 | border-radius: 0.3em; 9 | padding: 0.1em; 10 | min-width: 0.7em; 11 | min-height: 0.7em; 12 | 13 | // TODO: extract transitions into separate directory 14 | transition: -gtk-icon-transform 200ms; 15 | 16 | &:hover { 17 | border-color: colors.$white-weak; 18 | } 19 | 20 | &:active, &:checked { 21 | background: colors.$white-weakest; 22 | } 23 | 24 | &:checked { 25 | background: colors.$accent-primary; 26 | -gtk-icon-transform: scale(1); 27 | border-color: colors.$accent-primary; 28 | &:active { background: transparent; } 29 | } 30 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_checkbutton.scss: -------------------------------------------------------------------------------- 1 | checkbutton { 2 | label { padding-left: 5px; } 3 | &:disabled { opacity: 0.3; } 4 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_combobox.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | // TODO: add right to left support (doable with negative margin on the entry) 6 | combobox { 7 | entry { 8 | border-right: 0; 9 | border-top-right-radius: 0; 10 | border-bottom-right-radius: 0; 11 | 12 | &:focus + button { 13 | border: config.$border-size solid color.change(colors.$accent-primary, $alpha: config.$tint-strong); 14 | border-left: 0; 15 | margin-right: -#{config.$border-size}; 16 | 17 | &:hover { 18 | background-clip: padding-box; 19 | } 20 | } 21 | 22 | + button.combo { 23 | border-radius: 0 config.$radius config.$radius 0; 24 | } 25 | } 26 | 27 | .linked button.combo { 28 | padding: calc(config.$spacing-medium - 0.1em); 29 | border-radius: config.$radius; 30 | 31 | arrow { 32 | min-width: 1em; 33 | -gtk-icon-source: -gtk-icontheme("go-down-symbolic"); 34 | } 35 | } 36 | 37 | .linked.horizontal & { 38 | &:not(:first-child) button { 39 | border-top-left-radius: 0; 40 | border-bottom-left-radius: 0; 41 | } 42 | &:not(:last-child) button { 43 | border-top-right-radius: 0; 44 | border-bottom-right-radius: 0; 45 | } 46 | } 47 | .linked.vertical & { 48 | &:not(:first-child) button { 49 | border-top-left-radius: 0; 50 | border-top-right-radius: 0; 51 | } 52 | &:not(:last-child) button { 53 | border-bottom-left-radius: 0; 54 | border-bottom-right-radius: 0; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_dialog.scss: -------------------------------------------------------------------------------- 1 | @use "../colors"; 2 | @use "../config"; 3 | 4 | dialog, messagedialog { 5 | background: colors.$surface-strong; 6 | 7 | .dialog-action-box { 8 | background: colors.$surface-moderate; 9 | padding: config.$spacing-medium; 10 | margin: -0.4em; 11 | margin-top: 0; 12 | } 13 | 14 | fontchooser, colorchooser { 15 | padding: config.$spacing-medium; 16 | } 17 | 18 | filechooser { 19 | & + .dialog-action-box { 20 | margin: 0; 21 | } 22 | 23 | #pathbarbox { 24 | padding: config.$spacing-small; 25 | background: colors.$surface-moderate; 26 | } 27 | 28 | treeview { 29 | background: colors.$surface-strongest; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_entry.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | entry { 6 | padding: calc(config.$spacing-medium - config.$border-size); 7 | border-radius: config.$radius; 8 | border: config.$border-size solid colors.$white-weakest; 9 | background: colors.$white-weakest; 10 | background-clip: padding-box; 11 | 12 | &:focus { 13 | border-color: color.change(colors.$accent-primary, $alpha: config.$tint-strong); 14 | } 15 | 16 | &:disabled { 17 | opacity: config.$disabled-opacity; 18 | } 19 | 20 | image { 21 | &.left { 22 | margin-right: config.$spacing-medium; 23 | } 24 | &.right { 25 | margin-left: config.$spacing-medium; 26 | } 27 | } 28 | 29 | selection { 30 | color: colors.$white-strong; 31 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 32 | } 33 | 34 | .linked.horizontal & { 35 | &:not(:first-child) { 36 | border-top-left-radius: 0; 37 | border-bottom-left-radius: 0; 38 | } 39 | &:not(:last-child) { 40 | border-top-right-radius: 0; 41 | border-bottom-right-radius: 0; 42 | } 43 | } 44 | 45 | .linked.vertical & { 46 | &:not(:first-child) { 47 | border-top-left-radius: 0; 48 | border-top-right-radius: 0; 49 | } 50 | &:not(:last-child) { 51 | border-bottom-left-radius: 0; 52 | border-bottom-right-radius: 0; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_expander.scss: -------------------------------------------------------------------------------- 1 | @use "../colors"; 2 | @use "../config"; 3 | 4 | expander { 5 | title { 6 | color: colors.$white-moderate; 7 | padding: config.$spacing-medium; 8 | 9 | arrow { 10 | -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); 11 | min-width: 1em; 12 | min-height: 1em; 13 | margin-right: config.$spacing-medium; 14 | 15 | &:checked { 16 | -gtk-icon-source: -gtk-icontheme("go-down-symbolic"); 17 | color: colors.$white-strong; 18 | 19 | & + label { 20 | color: colors.$white-strong; 21 | } 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_frame.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | frame > border, .frame { 4 | border: 1px solid colors.$surface-moderate; 5 | } 6 | 7 | scrolledwindow { 8 | viewport.frame { 9 | border-style: none; 10 | } 11 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_headerbar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | headerbar { 6 | background: colors.$surface-moderate; 7 | padding: config.$spacing-medium; 8 | 9 | button.titlebutton { 10 | padding: calc(config.$spacing-medium + 0.2em); 11 | } 12 | 13 | button.titlebutton:not(.appmenu) { 14 | background: transparent; 15 | 16 | &.close { 17 | color: colors.$red-normal; 18 | &:hover { 19 | color: colors.$red-light; 20 | background: color.change(colors.$red-normal, $alpha: config.$tint-weak); 21 | } 22 | } 23 | 24 | &.minimize { 25 | color: colors.$yellow-normal; 26 | &:hover { 27 | color: colors.$yellow-light; 28 | background: color.change(colors.$yellow-normal, $alpha: config.$tint-weak); 29 | } 30 | } 31 | 32 | &.maximize { 33 | color: colors.$green-normal; 34 | &:hover { 35 | color: colors.$green-light; 36 | background: color.change(colors.$green-normal, $alpha: config.$tint-weak); 37 | } 38 | } 39 | } 40 | 41 | button.titlebutton.appmenu { 42 | &:not(:active):not(:checked) { 43 | background: transparent; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_iconview.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | iconview { 4 | background: colors.$surface-moderate; 5 | padding: 0.3em; 6 | 7 | &:selected { 8 | color: colors.$white-strongest; 9 | background: colors.$accent-primary; 10 | border-radius: 0.5em; 11 | } 12 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_index.scss: -------------------------------------------------------------------------------- 1 | @use "actionbar"; 2 | @use "button"; 3 | @use "calendar"; 4 | @use "check"; 5 | @use "checkbutton"; 6 | @use "combobox"; 7 | @use "dialog"; 8 | @use "entry"; 9 | @use "expander"; 10 | @use "frame"; 11 | @use "headerbar"; 12 | @use "iconview"; 13 | @use "infobar"; 14 | @use "label"; 15 | @use "levelbar"; 16 | @use "list"; 17 | @use "menu"; 18 | @use "menubar"; 19 | @use "notebook"; 20 | @use "overshoot"; 21 | @use "paned"; 22 | @use "pathbar"; 23 | @use "placessidebar"; 24 | @use "popover"; 25 | @use "progressbar"; 26 | @use "radio"; 27 | @use "radiobutton"; 28 | @use "revealer"; 29 | @use "rubberband"; 30 | @use "scale"; 31 | @use "scrollbar"; 32 | @use "separator"; 33 | @use "spinbutton"; 34 | @use "spinner"; 35 | @use "switch"; 36 | @use "tabs"; 37 | @use "textview"; 38 | @use "toolbar"; 39 | @use "tooltip"; 40 | @use "treeview"; 41 | @use "window"; -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_infobar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | infobar { 6 | color: colors.$white-strong; 7 | padding: config.$spacing-small; 8 | background: colors.$surface-strong; 9 | 10 | &.info { 11 | background: color.change(colors.$blue-normal, $alpha: config.$tint-medium); 12 | } 13 | &.warning { 14 | background: color.change(colors.$orange-normal, $alpha: config.$tint-medium); 15 | } 16 | &.error { 17 | background: color.change(colors.$red-normal, $alpha: config.$tint-medium); 18 | } 19 | &.question { 20 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 21 | } 22 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_label.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | label { 4 | &.dim-label, &:disabled { opacity: 0.3; } 5 | 6 | selection { 7 | background: colors.$accent-primary; 8 | color: lighten(colors.$white-strong, 50%); 9 | } 10 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_levelbar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | levelbar { 4 | trough { 5 | block { 6 | padding: 3px; 7 | border-radius: 3px; 8 | 9 | &.filled { background: colors.$accent-secondary; } 10 | &.empty { background: colors.$surface-moderate; } 11 | } 12 | } 13 | 14 | &.discrete { 15 | block:not(:first-child) { 16 | margin-left: 5px; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_list.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use '../config'; 3 | 4 | list { 5 | background: colors.$surface-strongest; 6 | 7 | row { 8 | background: colors.$surface-strong; 9 | padding: config.$spacing-medium; 10 | &:hover { 11 | background: colors.$surface-moderate; 12 | } 13 | } 14 | 15 | > label { 16 | padding: config.$spacing-small; 17 | } 18 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_menu.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use '../config'; 3 | 4 | menu { 5 | background: colors.$surface-weak; 6 | menuitem { 7 | padding: config.$spacing-medium; 8 | &:hover { 9 | background: colors.$white-weakest; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_menubar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use '../config'; 3 | 4 | menubar { 5 | background: colors.$surface-strongest; 6 | 7 | menuitem { 8 | padding: config.$spacing-medium; 9 | 10 | &:hover { 11 | background: colors.$white-weakest; 12 | } 13 | 14 | check, radio { 15 | margin-right: config.$spacing-medium; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_notebook.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | notebook { 4 | stack { 5 | &:only-child { background: colors.$surface-strongest; } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_overshoot.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | @mixin overshoot($side, $color: colors.$surface-moderate) { 4 | $position-per-side: ( 5 | top: center top, 6 | right: right center, 7 | bottom: center bottom, 8 | left: left center 9 | ); 10 | $position: map-get($position-per-side, $side); 11 | 12 | background-image: -gtk-gradient( 13 | radial, 14 | $position, 0, 15 | $position, 0.6, 16 | from(transparentize($color, 0.8)), 17 | to(transparentize($color, 1)) 18 | ); 19 | 20 | background-size: map-get((top: 100% 60%, right: 60% 100%, bottom: 100% 60%, left: 60% 100%), $side); 21 | background-repeat: no-repeat; 22 | background-position: $position; 23 | } 24 | 25 | 26 | overshoot { 27 | &.top { @include overshoot(top); } 28 | &.bottom { @include overshoot(bottom); } 29 | &.left { @include overshoot(left); } 30 | &.right { @include overshoot(right); } 31 | } 32 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_paned.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | paned {} -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_pathbar.scss: -------------------------------------------------------------------------------- 1 | @use "../config"; 2 | 3 | .linked.path-bar { 4 | button { 5 | image:not(:only-child) { 6 | margin-right: config.$spacing-medium; 7 | } 8 | 9 | &:not(:first-child) { 10 | border-top-left-radius: 0; 11 | border-bottom-left-radius: 0; 12 | } 13 | 14 | &:not(:last-child) { 15 | border-top-right-radius: 0; 16 | border-bottom-right-radius: 0; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_placessidebar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "../colors"; 3 | @use "../config"; 4 | 5 | placessidebar { 6 | background: colors.$surface-strong; 7 | 8 | list { 9 | background: transparent; 10 | 11 | row { 12 | &:hover { 13 | background: colors.$white-weakest; 14 | } 15 | 16 | &:active { 17 | background: colors.$white-weak; 18 | } 19 | 20 | &:selected { 21 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 22 | } 23 | 24 | .sidebar-icon { 25 | margin-right: config.$spacing-medium; 26 | } 27 | } 28 | } 29 | 30 | &.frame, 31 | .frame { 32 | border: 0; 33 | } 34 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_popover.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | popover { 4 | background: colors.$surface-weakest; 5 | box-shadow: 0 0 5px colors.$black-moderate; 6 | border-radius: 0.5em; 7 | padding: 0.5em; 8 | 9 | box { 10 | modelbutton { 11 | padding: 0.4em 1em; 12 | margin: 0 -0.5em; 13 | border-radius: 0.5em; 14 | 15 | &:hover { 16 | background: colors.$white-weakest; 17 | } 18 | } 19 | } 20 | 21 | &.menu:first-child { 22 | border-top-left-radius: 0; 23 | } 24 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_progressbar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | progressbar { 4 | 5 | trough { 6 | background: colors.$white-weakest; 7 | progress { 8 | background: colors.$accent-secondary; 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_radio.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | radio { 4 | -gtk-icon-source: -gtk-recolor(url('../assets/symbolic/radio.symbolic.png')); 5 | -gtk-icon-transform: scale(0); 6 | color: colors.$white-strongest; 7 | border: 0.2em solid colors.$white-weakest; 8 | border-radius: 100%; 9 | padding: 0.1em; 10 | min-width: 0.6em; 11 | min-height: 0.6em; 12 | 13 | // TODO: extract transitions into separate directory 14 | transition: -gtk-icon-transform 200ms; 15 | 16 | &:hover { 17 | border-color: colors.$white-weak; 18 | } 19 | 20 | &:active, &:checked { 21 | background: colors.$white-weakest; 22 | } 23 | 24 | &:checked { 25 | -gtk-icon-transform: scale(1); 26 | border-color: colors.$accent-primary; 27 | background: colors.$accent-primary; 28 | } 29 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_radiobutton.scss: -------------------------------------------------------------------------------- 1 | radiobutton { 2 | label { padding-left: 5px; } 3 | &:disabled { opacity: 0.38; } 4 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_revealer.scss: -------------------------------------------------------------------------------- 1 | @use "../colors"; 2 | @use "../config"; 3 | 4 | revealer { 5 | frame.app-notification border { 6 | border-radius: config.$radius; 7 | background: colors.$surface-moderate; 8 | padding: config.$spacing-medium; 9 | } 10 | 11 | @each $side in ('top', 'right', 'bottom', 'left') { 12 | &.#{$side} frame.app-notification border { 13 | margin-#{$side}: config.$spacing-medium; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_rubberband.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | rubberband, .rubberband { 6 | background-color: colors.$white-weakest; 7 | border: config.$border-size solid color.change(colors.$accent-primary, $alpha: config.$tint-medium); 8 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_scale.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | scale { 4 | padding: 8px 0; 5 | 6 | contents { 7 | 8 | trough { 9 | background: colors.$surface-moderate; 10 | slider { 11 | background: lighten(colors.$surface-moderate, 25%); 12 | padding: 8px; 13 | margin: -5px; 14 | border-radius: 100%; 15 | } 16 | highlight { 17 | background: colors.$accent-primary; 18 | } 19 | } 20 | } 21 | 22 | // TODO: marks can be at the top or bottom, maybe also on the right or left depending on scale.horizontal/vertical 23 | marks { 24 | mark { 25 | padding-top: 5px; 26 | indicator { 27 | color: colors.$surface-moderate; 28 | min-height: 8px; 29 | min-width: 1px; 30 | } 31 | } 32 | } 33 | 34 | &:disabled { opacity: 0.3; } 35 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | scrollbar { 4 | -GtkScrollbar-has-backward-stepper: false; 5 | -GtkScrollbar-has-forward-stepper: false; 6 | 7 | slider { 8 | padding: 0.2em; 9 | border-radius: 1em; 10 | background: colors.$white-weakest; 11 | &:hover { background: colors.$white-weak;} 12 | &:active { background: colors.$accent-primary; } 13 | } 14 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_separator.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | separator { 4 | background-image: image(colors.$white-weakest); 5 | background-size: 1px 1px; 6 | background-position: center center; 7 | 8 | min-width: 7px; 9 | min-height: 7px; 10 | 11 | background-repeat: repeat-x; 12 | margin: -3px 0; 13 | 14 | &.vertical, .horizontal > & { 15 | background-repeat: repeat-y; 16 | margin: 0 -3px; 17 | } 18 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_spinbutton.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | spinbutton { 6 | 7 | button { 8 | border: config.$border-size solid transparent; 9 | } 10 | 11 | &:focus { 12 | button { 13 | &:hover { 14 | background-clip: padding-box; 15 | } 16 | border-color: color.change(colors.$purple-normal, $alpha: config.$tint-strong); 17 | } 18 | } 19 | 20 | &:disabled { 21 | opacity: config.$disabled-opacity; 22 | } 23 | 24 | &.horizontal { 25 | :nth-child(3) { 26 | border-radius: config.$radius 0 0 config.$radius; 27 | border-right: 0; 28 | } 29 | 30 | :nth-child(4) { 31 | border-radius: 0; 32 | border-width: config.$border-size 0; 33 | } 34 | 35 | :nth-child(5) { 36 | border-radius: 0 config.$radius config.$radius 0; 37 | border-left: 0; 38 | } 39 | } 40 | 41 | &.vertical { 42 | entry { 43 | padding: config.$spacing-medium 0; 44 | } 45 | 46 | :nth-child(3) { 47 | border-radius: config.$radius config.$radius 0 0; 48 | border-bottom: 0; 49 | } 50 | 51 | :nth-child(4) { 52 | border-radius: 0; 53 | border-width: 0 config.$border-size; 54 | } 55 | 56 | :nth-child(5) { 57 | border-radius: 0 0 config.$radius config.$radius; 58 | border-top: 0; 59 | } 60 | } 61 | 62 | .linked.horizontal & { 63 | &:not(:first-child) { 64 | :nth-child(3) { border-top-left-radius: 0; } 65 | :nth-child(5) { border-bottom-left-radius: 0; } 66 | } 67 | 68 | &:not(:last-child) { 69 | :nth-child(3) { border-top-right-radius: 0; } 70 | :nth-child(5) { border-bottom-right-radius: 0; } 71 | } 72 | } 73 | 74 | .linked.vertical & { 75 | &:not(:first-child) { 76 | :nth-child(3) { border-top-left-radius: 0; } 77 | :nth-child(5) { border-top-right-radius: 0; } 78 | } 79 | 80 | &:not(:last-child) { 81 | :nth-child(3) { border-bottom-left-radius: 0; } 82 | :nth-child(5) { border-bottom-right-radius: 0; } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_spinner.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | @keyframes rotate { 4 | to { -gtk-icon-transform: rotate(1turn); } 5 | } 6 | 7 | spinner { 8 | -gtk-icon-source: none; 9 | &:checked { 10 | -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); 11 | animation: rotate 1s linear infinite; 12 | } 13 | 14 | &:disabled { opacity: 0.3; } 15 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_switch.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | switch { 6 | background: colors.$white-weakest; 7 | border-radius: 1em; 8 | min-width: 3em; 9 | border: config.$border-size solid transparent; 10 | 11 | slider { 12 | background: colors.$white-moderate; 13 | border-radius: 100%; 14 | min-width: 1.5em; 15 | min-height: 1.5em; 16 | } 17 | 18 | :nth-child(2) { color: transparent; } 19 | :nth-child(3) { color: colors.$white-moderate; } 20 | 21 | &:checked { 22 | background: color.change(colors.$accent-primary, $alpha: config.$tint-weak); 23 | 24 | slider { 25 | background: color.change(colors.$accent-primary, $alpha: config.$tint-strong); 26 | } 27 | 28 | :nth-child(2) { color: colors.$white-strong; } 29 | :nth-child(3) { color: transparent; } 30 | } 31 | 32 | &:disabled { opacity: config.$disabled-opacity; } 33 | 34 | &:hover { 35 | slider { 36 | box-shadow: 0 0 0 config.$spacing-small colors.$white-weak; 37 | } 38 | 39 | &:checked slider { 40 | box-shadow: 0 0 0 config.$spacing-small color.change(colors.$accent-primary, $alpha: config.$tint-weak); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_tabs.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | tabs { 6 | background: colors.$surface-strongest; 7 | 8 | @each $class, $side in ( 9 | 'top': 'bottom', 10 | 'right': 'left', 11 | 'bottom': 'top', 12 | 'left': 'right' 13 | ) { 14 | .#{$class} > & { 15 | border-#{$side}: config.$border-size solid colors.$surface-moderate; 16 | tab { 17 | border-#{$side}: config.$border-size solid transparent; 18 | margin-#{$side}: -#{config.$border-size}; 19 | } 20 | } 21 | } 22 | 23 | tab { 24 | padding: config.$spacing-medium; 25 | color: colors.$white-moderate; 26 | 27 | header &:checked { 28 | border-color: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 29 | color: colors.$white-strong; 30 | } 31 | 32 | header &:hover:not(:checked) { 33 | border-color: colors.$white-weakest; 34 | color: colors.$white-strong; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_textview.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | textview { 6 | background: colors.$white-weakest; 7 | padding: config.$spacing-medium config.$spacing-small; 8 | 9 | &:disabled { 10 | opacity: config.$disabled-opacity; 11 | } 12 | 13 | selection { 14 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 15 | color: colors.$white-strongest; 16 | } 17 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use '../config'; 3 | 4 | toolbar, .toolbar { 5 | background: colors.$surface-strong; 6 | padding: config.$spacing-medium; 7 | 8 | &.osd { 9 | background: colors.$surface-weak; 10 | padding: config.$spacing-medium; 11 | border-radius: config.$radius; 12 | } 13 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | @use '../config'; 3 | 4 | tooltip { 5 | background: colors.$surface-weakest; 6 | 7 | > * { 8 | margin: config.$spacing-medium; 9 | } 10 | 11 | grid { 12 | label { 13 | margin: config.$spacing-small 0; 14 | } 15 | 16 | image { 17 | margin-right: config.$spacing-medium; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_treeview.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use '../colors'; 3 | @use '../config'; 4 | 5 | // TODO: check if full width horizontal separators are possible 6 | 7 | treeview { 8 | -GtkTreeView-expander-size: 16; 9 | -GtkTreeView-grid-line-pattern: ''; 10 | -GtkTreeView-tree-line-pattern: ''; 11 | -GtkTreeView-horizontal-separator: 12; 12 | -GtkTreeView-vertical-separator: 12; 13 | 14 | border-left-color: colors.$white-weakest; // TODO: check if there is going to be a new way to define tree-lines 15 | border-top-color: colors.$white-weakest; // TODO: check if there is going to be a new way to define column-lines 16 | 17 | &:hover { 18 | background: colors.$white-weakest; 19 | } 20 | 21 | &:selected { 22 | background: color.change(colors.$accent-primary, $alpha: config.$tint-medium); 23 | color: colors.$white-strongest; 24 | } 25 | 26 | header { 27 | button { 28 | padding: config.$spacing-medium; 29 | background: colors.$surface-strong; 30 | border-radius: 0; 31 | color: colors.$white-moderate; 32 | 33 | &:hover:not(:active) { 34 | color: colors.$white-strong; 35 | background: colors.$surface-strong; 36 | } 37 | 38 | &:not(:last-child) { 39 | // TODO: check if there is a way to thicken threeview borders (other than this one) 40 | border-right: 1px solid colors.$white-weakest; 41 | } 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /scss/gtk-3.0/widgets/_window.scss: -------------------------------------------------------------------------------- 1 | @use '../colors'; 2 | 3 | window, assistant { 4 | background: colors.$surface-strongest; 5 | color: colors.$white-strong; 6 | } 7 | 8 | window { 9 | &.csd { 10 | decoration { 11 | box-shadow: 0 0 8px 0 black; 12 | margin: 8px; 13 | } 14 | } 15 | } --------------------------------------------------------------------------------