├── .buildconfig ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── COPYING ├── HACKING.md ├── Makefile ├── Pop_gtk-logo.png ├── README.md ├── TESTING.md ├── TODO.md ├── debian ├── changelog ├── compat ├── control ├── copyright ├── pop-gnome-shell-theme.postinst ├── pop-gnome-shell-theme.prerm ├── rules └── source │ └── format ├── screenshots ├── main.png ├── pop-builder.png ├── pop-contacts.png └── pop-maps.png └── src ├── 3.18 ├── gnome-shell-dark-slim.scss ├── gnome-shell-dark.scss ├── gnome-shell-light-slim.scss ├── gnome-shell-light.scss ├── gnome-shell-slim.scss ├── gnome-shell-theme.gresource.xml ├── gnome-shell.scss ├── pad-osd.scss └── sass │ ├── _common.scss │ ├── _drawing.scss │ └── _variables.scss ├── 3.26 └── sass │ └── widgets │ ├── _close-button.scss │ ├── _osd.scss │ ├── _popovers-menus.scss │ └── _sliders.scss ├── 3.28 └── sass │ └── widgets │ ├── _calendar.scss │ ├── _close-button.scss │ ├── _osd.scss │ ├── _popovers-menus.scss │ ├── _sliders.scss │ └── _switches.scss ├── 3.30 └── sass │ └── widgets │ ├── _calendar.scss │ ├── _close-button.scss │ └── _popovers-menus.scss └── common ├── assets-dark ├── calendar-arrow-left.svg ├── calendar-arrow-right.svg ├── checkbox-off.svg ├── checkbox.svg ├── close.svg ├── corner-ripple-ltr.svg ├── corner-ripple-rtl.svg ├── dash-placeholder.svg ├── dash │ ├── bottom-running1-focused.svg │ ├── bottom-running1.svg │ ├── bottom-running2-focused.svg │ ├── bottom-running2.svg │ ├── bottom-running3-focused.svg │ ├── bottom-running3.svg │ ├── bottom-running4-focused.svg │ ├── bottom-running4.svg │ ├── left-running1-focused.svg │ ├── left-running1.svg │ ├── left-running2-focused.svg │ ├── left-running2.svg │ ├── left-running3-focused.svg │ ├── left-running3.svg │ ├── left-running4-focused.svg │ ├── left-running4.svg │ ├── right-running1-focused.svg │ ├── right-running1.svg │ ├── right-running2-focused.svg │ ├── right-running2.svg │ ├── right-running3-focused.svg │ ├── right-running3.svg │ ├── right-running4-focused.svg │ ├── right-running4.svg │ ├── top-running1-focused.svg │ ├── top-running1.svg │ ├── top-running2-focused.svg │ ├── top-running2.svg │ ├── top-running3-focused.svg │ ├── top-running3.svg │ ├── top-running4-focused.svg │ └── top-running4.svg ├── more-results.svg ├── no-events.svg ├── no-notifications.svg ├── noise-texture.svg ├── process-working.svg ├── switch-off.svg ├── switch-on.svg ├── toggle-off.svg ├── toggle-on.svg ├── window-close-active.svg └── window-close.svg ├── assets ├── calendar-arrow-left.svg ├── calendar-arrow-right.svg ├── checkbox-off.svg ├── checkbox.svg ├── close.svg ├── corner-ripple-ltr.svg ├── corner-ripple-rtl.svg ├── dash-placeholder.svg ├── dash │ ├── bottom-running1-focused.svg │ ├── bottom-running1.svg │ ├── bottom-running2-focused.svg │ ├── bottom-running2.svg │ ├── bottom-running3-focused.svg │ ├── bottom-running3.svg │ ├── bottom-running4-focused.svg │ ├── bottom-running4.svg │ ├── left-running1-focused.svg │ ├── left-running1.svg │ ├── left-running2-focused.svg │ ├── left-running2.svg │ ├── left-running3-focused.svg │ ├── left-running3.svg │ ├── left-running4-focused.svg │ ├── left-running4.svg │ ├── right-running1-focused.svg │ ├── right-running1.svg │ ├── right-running2-focused.svg │ ├── right-running2.svg │ ├── right-running3-focused.svg │ ├── right-running3.svg │ ├── right-running4-focused.svg │ ├── right-running4.svg │ ├── top-running1-focused.svg │ ├── top-running1.svg │ ├── top-running2-focused.svg │ ├── top-running2.svg │ ├── top-running3-focused.svg │ ├── top-running3.svg │ ├── top-running4-focused.svg │ └── top-running4.svg ├── more-results.svg ├── no-events.svg ├── no-notifications.svg ├── noise-texture.svg ├── process-working.svg ├── switch-off.svg ├── switch-on.svg ├── toggle-off.svg ├── toggle-on.svg ├── window-close-active.svg └── window-close.svg ├── extensions └── workspaces-to-dock │ └── workspaces-to-dock.scss ├── gnome-shell-dark-slim.scss ├── gnome-shell-dark.scss ├── gnome-shell-light-slim.scss ├── gnome-shell-light.scss ├── gnome-shell-slim.scss ├── gnome-shell-theme.gresource.xml ├── gnome-shell.scss ├── message-indicator-symbolic.svg ├── no-events.svg ├── no-notifications.svg ├── pad-osd.scss ├── process-working.svg └── sass ├── _color-palette.scss ├── _colors.scss ├── _common.scss ├── _drawing.scss ├── _extensions.scss ├── _variables.scss └── widgets ├── _activities.scss ├── _app-grid.scss ├── _app-switcher.scss ├── _auth-dialogs.scss ├── _buttons.scss ├── _calendar.scss ├── _checkboxes.scss ├── _close-button.scss ├── _dashboard.scss ├── _entries.scss ├── _ibus-picker.scss ├── _links.scss ├── _looking-glass.scss ├── _message-list.scss ├── _misc.scss ├── _modal-dialogs.scss ├── _network-dialogs.scss ├── _notifications.scss ├── _osd.scss ├── _panel.scss ├── _popovers-menus.scss ├── _ripple.scss ├── _screen-shield.scss ├── _scrollbars.scss ├── _sliders.scss ├── _switches.scss ├── _virtual-keyboard.scss ├── _window-previews.scss └── _workspace-switcher.scss /.buildconfig: -------------------------------------------------------------------------------- 1 | [default] 2 | name=Default 3 | device=local 4 | runtime=host 5 | config-opts= 6 | run-opts= 7 | prefix=/ 8 | app-id= 9 | default=true 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | **NOTE: Before reporting a bug, please check whether it also occurs with other themes.** 7 | > If the bug also occurs with other themes (especially upstream default theme), 8 | it is very likely an upstream issue. 9 | 10 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 11 | **Reporter info** 12 | 13 | ``` 14 | * Distribution - (run ```lsb_release -a```) 15 | * Gtk+ 3.0 version - (run ```apt policy libgtk-3-0```) 16 | * Desktop environment - 17 | * Pop version - (run ```head -n 3 /usr/share/gnome-shell/theme/pop.css```) 18 | ``` 19 | 20 | **Related Application and/or Shell theming (or name of widget)** 21 | 22 | 23 | 24 | **Actual issue** 25 | 26 | 27 | 28 | **Steps to reproduce** 29 | 30 | 31 | 32 | **Expected behavior** 33 | 34 | 35 | 36 | **Behavior in Adwaita** 37 | 38 | 39 | 40 | **Other Note (feature-request, question, etc...)** 41 | 42 | 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.pem 2 | src/**/*.css 3 | *.orig 4 | src/gtk-*/**/assets/*.png 5 | src/gtk-2.0/**/assets/*.png 6 | debian/tmp 7 | 8 | # Build artefacts 9 | build 10 | src/gtk-2.0/assets-dark.svg 11 | src/gtk-2.0/assets.svg 12 | src/gtk-2.0/gtkrc 13 | src/gtk-2.0/gtkrc-dark 14 | src/gtk-2.0/gtkrc-light 15 | src/gtk-3.0/gtk-common/assets.svg 16 | 17 | # Debian artefacts 18 | debian/.debhelper/ 19 | debian/files 20 | debian/pop-gnome-shell-theme.debhelper.log 21 | debian/pop-gnome-shell-theme.substvars 22 | debian/pop-gnome-shell-theme/ -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Contributors to this repo agree to be bound by the [Pop! Code of Conduct](https://github.com/pop-os/code-of-conduct). 2 | -------------------------------------------------------------------------------- /HACKING.md: -------------------------------------------------------------------------------- 1 | ## Summary 2 | 3 | - Do not edit the CSS directly, edit the source SCSS files and run `make sass` 4 | - To be able to use the latest/adequate version of Sass, install `sassc` 5 | - To change the SVG assets color, use the recoloring script, and do not edit the 6 | svg.in files. 7 | 8 | ## The theme build process 9 | 10 | Pop GNOME Shell theme is created using SCSS source code which is 11 | programmatically compiled into usable CSS for the theme. If you modify the CSS 12 | files, your changes will be overwritten when you run `make`. Instead, edit the 13 | SCSS files. 14 | 15 | The SCSS is broken into sections to make modification easier. The main files in 16 | the `src/common` directory are the main files, and should not be edited by hand. 17 | The editable source files are in `src/common/sass`. 18 | 19 | If a specific version of the theme requires differences from what the main theme 20 | carries, then those should be placed in the `src` directory under a subdirectory 21 | with the name of the version. The latest version of GNOME supported should not 22 | have any overrides; the `common` folder should build a correct theme for the 23 | current latest version. 24 | 25 | A basic directory layout is below: 26 | 27 | ``` 28 | src/ 29 | common/ - The main theme files 30 | assets/ - SVG images for use in the theme (light versions) 31 | assets-dark/ - SVG images for use in the theme (dark versions) 32 | extensions/ - Theming for extensions that require their own stylesheets 33 | sass/ - Main theme source code 34 | widgets/ - Theme source for individual widgets in the shell 35 | _color-palette.scss - The color palette used in the theme 36 | _colors.scss - Actual color definitions 37 | _common.scss - The master source file, which includes other files 38 | _drawing.scss - code for drawing specific widgets 39 | _extensions.scss - overrides for specific extensions 40 | _variables.scss - Reusable variables 41 | gnome-shell(*).scss - The files which are generated into CSS. 42 | 3.18/ - Overrides for GNOME 3.18 43 | 3.24/ - Overrides for GNOME 3.24 44 | ... 45 | ``` 46 | 47 | When the theme is built, first a copy of the common folder is generated for each 48 | version of the theme. Then, the override directory is overlaid on top of that, 49 | replacing parts that require changes from the main theme. This ensures that old 50 | versions can be supported with minimal overhead without relaying on large 51 | networks of symlinks. 52 | 53 | ## Adding new GNOME versions 54 | 55 | New GNOME Versions should be specified in the Makefile. You will also need to 56 | create a folder for the new version (if one doesn't exist) and place the changes 57 | required to make the theme work there. If the version is newer than the current 58 | newest supported version, back up the common folder into the current newest 59 | version's override folder, then modify the files in `common` as required. Delete 60 | the files without changes from the older version (to save space), then add the 61 | new version to the `Makefile`. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | SHELL = /bin/bash 2 | COLOR_VARIANTS = '' '-dark' '-light' 3 | SIZE_VARIANTS = '' '-slim' 4 | VERSIONS = '3.18' '3.26' '3.28' '3.30' '3.32' 5 | SASSC_OPT=-M -t expanded 6 | BASE_DIR=/usr/share/themes 7 | REPODIR=$(CURDIR) 8 | SRCDIR=$(REPODIR)/build 9 | GNOMEVER=$(shell gnome-shell --version | cut -d ' ' -f3 | cut -d '.' -f1,2) 10 | DEBIAN=0 11 | 12 | all: gnome-shell 13 | 14 | clean: 15 | -rm -rf ./src/**/*.css 16 | -rm -rf ./src/**/*.tmp 17 | -rm -rf build 18 | 19 | uninstall: 20 | for color in $(COLOR_VARIANTS); do \ 21 | for size in $(SIZE_VARIANTS); do \ 22 | rm -rf /usr/share/themes/Pop$$color$$size/gnome-shell \ 23 | /usr/local/share/themesPop$$color$$size/gnome-shell; \ 24 | done; \ 25 | done 26 | 27 | -rm -rf /usr/share/gnome-shell/theme/pop.css 28 | 29 | install: 30 | @echo "** Installing the theme for GNOME version $(GNOMEVER)..." 31 | 32 | # Install GNOME Shell Theme 33 | for color in $(COLOR_VARIANTS); do \ 34 | for size in $(SIZE_VARIANTS); do \ 35 | export themedir=$(DESTDIR)$(BASE_DIR)/Pop$$color$$size; \ 36 | install -d $$themedir/gnome-shell; \ 37 | cd $(SRCDIR)/$(GNOMEVER); \ 38 | cp -ur \ 39 | *.svg \ 40 | $$themedir/gnome-shell; \ 41 | cp -urL \ 42 | extensions \ 43 | pad-osd.css \ 44 | $$themedir/gnome-shell; \ 45 | if [ "$$color" != '-dark' ]; then \ 46 | cp -urL \ 47 | assets \ 48 | $$themedir/gnome-shell; \ 49 | else \ 50 | cp -urL \ 51 | assets-dark \ 52 | $$themedir/gnome-shell/assets; \ 53 | fi; \ 54 | cp -ur \ 55 | gnome-shell$$color$$size.css \ 56 | $$themedir/gnome-shell/gnome-shell.css; \ 57 | cp -ur \ 58 | gnome-shell$$color$$size.css \ 59 | $$themedir/gnome-shell/pop.css; \ 60 | glib-compile-resources \ 61 | --sourcedir=$$themedir/gnome-shell \ 62 | --target=$$themedir/gnome-shell/gnome-shell-thememe.gresource \ 63 | gnome-shell-theme.gresource.xml; \ 64 | done; \ 65 | done 66 | 67 | install -D $(DESTDIR)/usr/share/themes/Pop/gnome-shell/pop.css \ 68 | $(DESTDIR)/usr/share/gnome-shell/theme/pop.css 69 | cp -r $(DESTDIR)/usr/share/themes/Pop/gnome-shell/assets \ 70 | $(DESTDIR)/usr/share/gnome-shell/theme/ 71 | 72 | recolor: 73 | @echo "** Matching Colors" 74 | 75 | cd ./src/gtk-3.0/gtk-common/ && ./recolor-assets.sh > /dev/null 76 | cd ./src/gtk-2.0/ && ./recolor-assets.sh > /dev/null 77 | 78 | sass: gnome-shell 79 | @echo "** Generating the CSS..." 80 | 81 | gnome-shell: 82 | @echo "** Generating GNOME Shell..." 83 | 84 | -mkdir -p build 85 | 86 | for version in $(VERSIONS); do \ 87 | mkdir -p src/$$version; \ 88 | cp -r src/common/ build/$$version; \ 89 | cp -r src/$$version/ build/; \ 90 | done 91 | 92 | for color in $(COLOR_VARIANTS); do \ 93 | for size in $(SIZE_VARIANTS); do \ 94 | for version in $(VERSIONS); do \ 95 | sassc $(SASSC_OPT) build/$$version/gnome-shell$$color$$size.{scss,css}; \ 96 | sassc $(SASSC_OPT) build/$$version/extensions/workspaces-to-dock/workspaces-to-dock.{scss,css}; \ 97 | sassc $(SASSC_OPT) build/$$version/pad-osd.{scss,css}; \ 98 | done; \ 99 | done; \ 100 | done 101 | 102 | .PHONY: all install uninstall clean gnome-shell 103 | -------------------------------------------------------------------------------- /Pop_gtk-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pop-os/gnome-shell-theme/8c7ef1b92d4af7a71600ac9a282a8d08539591b8/Pop_gtk-logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Legacy Work Only! 2 | 3 | This is the legacy version of the Pop GNOME Shell theme which currently only applies to Pop 18.04. It is only in maintenance mode, and will receive only minor changes and development related to security or bugfixes for **GNOME 3.28 ONLY**. Current development happens in the [pop-os/gtk-theme](https://github.com/pop-os/gtk-theme) repository. 4 | 5 | 6 | ### Required Components 7 | ------------------- 8 | Pop GNOME Shell supports GNOME 3.18, 3.24, 3.26, and 3.28 9 | * GNOME-Shell >= 3.18.3 10 | * Pop GTK Theme* 11 | 12 | > **Note:** 13 | > 14 | > * Pop GTK Theme isn't necessarily a requirement, but it is required to select the theme in tweak tool. 15 | 16 | 17 | 18 | ### Recommendations 19 | 20 | - For GTK, use icons alongside [Pop Icon Theme](https://github.com/system76/pop-icon-theme) 21 | - For fonts, use: 22 | > Window Titles: Fira Sans SemiBold 10 23 | 24 | > Interface: Fira Sans Book 10 25 | 26 | > Documents: Roboto Slab Regular 11 27 | 28 | > Monospace: Fira Mono Regular 11 29 | 30 | 31 | ### Installation 32 | 33 | Pop is intended to be installed through your distribution package manager. 34 | ``` 35 | sudo apt install pop-gnome-shell-theme 36 | ``` 37 | 38 | It's also recommended to restart the GNOME Shell after applying the theme of your choice. 39 | 40 | Enter the Shell's command launcher 41 | ``` 42 | Alt + F2 43 | ``` 44 | 45 | This will restart the Shell after you hit Enter 46 | ``` 47 | r 48 | ``` 49 | 50 | 51 | 52 | ### Installation from Git Source 53 | ---------------------------- 54 | 55 | 56 | 57 | 1. If previous versions were installed/existed, remove them first. 58 | 59 | ``` 60 | sudo apt remove system76-pop-gtk-theme 61 | sudo make uninstall 62 | sudo rm -rf /usr/share/themes/{Pop,Pop-Eta,Pop-Nokto,Pop-Nokto-Eta} 63 | rm -rf ~/.local/share/themes/{Pop,Pop-Eta,Pop-Nokto,Pop-Nokto-Eta} 64 | rm -rf ~/.themes/{Pop,Pop-Eta,Pop-Nokto,Pop-Nokto-Eta} 65 | ``` 66 | 67 | 2. Install build dependencies 68 | 69 | You can either try 70 | ``` 71 | sudo apt build-dep pop-gnome-shell-theme 72 | ``` 73 | 74 | Or, use this to install all dependencies in one go: 75 | ``` 76 | sudo apt install sassc inkscape optipng libglib2.0-dev-bin 77 | ``` 78 | 79 | 3. Generate the theme files. 80 | 81 | ``` 82 | make clean 83 | make 84 | ``` 85 | 86 | 4. Install the theme. 87 | 88 | ``` 89 | sudo make install 90 | ``` 91 | 92 | 93 | Public License 94 | -------------- 95 | GPLv2.0 96 | 97 | > **Note:** 98 | > 99 | > SVG files are licensed under CC BY-SA 4.0 100 | 101 | Special Thanks to 102 | -------------- 103 | Nana-4, the developer of Materia. 104 | tista500 and the Adapta Theme Project: https://github.com/adapta-project/ 105 | 106 | -------------------------------------------------------------------------------- /TESTING.md: -------------------------------------------------------------------------------- 1 | # TESTING.md 2 | 3 | *Package Maintainers!* 4 | This document describes testing procedures for the software contained in this 5 | repository. All sections must be completed and signed off before a package can 6 | be moved from one repository to the next. 7 | 8 | ## Part 1: Staging -> Proposed 9 | * Did it build? 10 | * Are files present in build package: 11 | - Check package, data.tar - make sure all files intended to be installed are 12 | there 13 | 14 | ## Part 2: Proposed -> Stable 15 | 16 | **Gnome shell** 17 | - orange underline/straightlines everywhere 18 | - calendar - selected day is orange - days with events are blue 19 | - volume slider should be blue 20 | - active popup menu - orange 21 | - wifi selection is blue 22 | 23 | **Other things to note:** 24 | 25 | - Everything has a shadow 26 | - Everything needs to be legible/high contrast 27 | - Bright colors and title bars all have an inactive shade (when window is not selected) 28 | - Compact variants need to shrink most padding and sizes. 29 | 30 | **If something visibly looks off, check the color hex values.** 31 | 32 | *Color hex values:* 33 | - Text and monocromatic images: #4B4645 34 | - Header/Title Bars: #574F4A / Dark Theme: #3E3936 / Light Theme: #C8C0BD 35 | - Window background: #F5F5F5 36 | - Green selection:#01967A 37 | - Orange: #FAA41A / Dark theme: #CC7900 38 | - Blue: #48B9C7 / Dark theme: #0A97A5 39 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | ## General 2 | 3 | - Improve directory structure (`help wanted`, ideas very welcome) 4 | 5 | - I'd like to simplify complicated directory structure and symbolic links. 6 | 7 | - Especially for Sass. Two `_colors.scss` should be lumped together and all CSSs need to reference it. 8 | 9 | - Use `make` or `meson` for building? (`help wanted`) 10 | 11 | - Improve `install.sh` script? (PRs very welcome) 12 | 13 | Currently, `install.sh` allows such arguments (thanks to @actionless): 14 | 15 | ```sh 16 | # This will install only normal color variant of compact theme into ~/.themes dir as MyTheme, 17 | # ie ~/.themes/MyTheme-compact 18 | COLOR_VARIANTS="," SIZE_VARIANTS="-compact" THEME_DIR_BASE=~/.themes/MyTheme ./install.sh 19 | ``` 20 | 21 | My alternative idea is (more like shell option): 22 | 23 | ```sh 24 | # Note that this is just a draft. 25 | ./install.sh --color - --size compact --dir ~/.themes --name MyTheme 26 | # and/or shorter 27 | ./install.sh -c - -s compact -d ~/.themes -n MyTheme 28 | ``` 29 | 30 | ## Supports 31 | 32 | - Firefox theme ([#78](../../issues/78)) 33 | 34 | - waiting for [the upstream to provide next-gen themes](https://blog.mozilla.org/addons/2017/02/24/improving-themes-in-firefox/) 35 | 36 | - Or, is it unnecessary because the new interface is well integrated with this theme? 37 | 38 | - Xfce theme ([#60](../../issues/60), [#61](../../issues/61), [#92](../../issues/92)) 39 | 40 | - waiting for the upstream to complete `gtk3` port 41 | 42 | - Pantheon theme ([#69](../../issues/69)) 43 | 44 | - KDE theme ([#143](../../issues/143), `low priority`) 45 | 46 | - GtkSourceView theme ([#150](../../issues/150)) 47 | 48 | - Color scheme for GNOME Terminal (if possible, `help wanted`) 49 | 50 | - Overlay scrollbars extension for Chrome/Chromium (`low priority`) 51 | 52 | - Cursor theme like Material Design (`low priority`) 53 | 54 | ## UI changes 55 | 56 | - Make gtk2 check/radio buttons a bit smaller for Qt apps ([#78](../../issues/78)) 57 | 58 | - Use `#757575` as check/radio buttons color for only web interfaces ([#123](../../issues/123), if possible) 59 | 60 | - Make compact variant more compact ([#79](../../issues/79)) 61 | 62 | - Use lighter background color for popups such as menu in dark variant 63 | 64 | - Rework the focus state styles 65 | 66 | ## Others 67 | 68 | - Polish Inkscape styling 69 | 70 | - Polish Xfwm styling 71 | 72 | - Use gtk3 color vars for `metacity-theme-3.xml` 73 | -------------------------------------------------------------------------------- /debian/compat: -------------------------------------------------------------------------------- 1 | 9 2 | -------------------------------------------------------------------------------- /debian/control: -------------------------------------------------------------------------------- 1 | Source: pop-gnome-shell-theme 2 | Section: gnome 3 | Priority: optional 4 | Maintainer: Jeremy Soller 5 | Uploaders: Ian Santopietro 6 | Build-Depends: debhelper (>= 9), 7 | automake, 8 | autoconf, 9 | libtool, 10 | pkg-config, 11 | sassc (>= 3.3.2), 12 | inkscape | inkscape-trunk, 13 | optipng, 14 | parallel, 15 | libglib2.0-dev (>= 2.48.0), 16 | libgdk-pixbuf2.0-dev (>= 2.32.2), 17 | librsvg2-dev (>= 2.40.13), 18 | libxml2-utils, 19 | gnome-shell 20 | Standards-Version: 3.9.8 21 | Homepage: https://github.com/system76/pop-gtk-theme 22 | 23 | 24 | Package: pop-gnome-shell-theme 25 | Architecture: all 26 | Depends: gnome-shell-common, pop-gtk-theme 27 | Description: The Pop GNOME Shell theme, installed for GDM. 28 | -------------------------------------------------------------------------------- /debian/copyright: -------------------------------------------------------------------------------- 1 | Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/ 2 | Upstream-Name: pop-gtk-theme 3 | Source: https://github.com/system76/pop-gtk-theme 4 | 5 | Files: * 6 | Copyright: Copyright 2016-2017 System76 7 | License: GPL-2+ or CC-BY-SA-4.0+ 8 | -------------------------------------------------------------------------------- /debian/pop-gnome-shell-theme.postinst: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | if [ "$1" = configure ]; then 6 | update-alternatives --install /usr/share/gnome-shell/theme/gdm3.css \ 7 | gdm3.css /usr/share/gnome-shell/theme/pop.css 20 8 | fi 9 | 10 | #DEBHELPER# 11 | -------------------------------------------------------------------------------- /debian/pop-gnome-shell-theme.prerm: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | if [ "$1" = "remove" ]; then 6 | update-alternatives --remove gdm3.css /usr/share/gnome-shell/theme/pop.css 7 | fi 8 | 9 | #DEBHELPER# 10 | -------------------------------------------------------------------------------- /debian/rules: -------------------------------------------------------------------------------- 1 | #!/usr/bin/make -f 2 | # -*- makefile -*- 3 | 4 | # # Uncomment this to turn on verbose mode. 5 | # #export DH_VERBOSE=1 6 | export DEB_BUILD_OPTIONS = nocheck 7 | 8 | %: 9 | dh $@ 10 | 11 | -------------------------------------------------------------------------------- /debian/source/format: -------------------------------------------------------------------------------- 1 | 3.0 (native) 2 | -------------------------------------------------------------------------------- /screenshots/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pop-os/gnome-shell-theme/8c7ef1b92d4af7a71600ac9a282a8d08539591b8/screenshots/main.png -------------------------------------------------------------------------------- /screenshots/pop-builder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pop-os/gnome-shell-theme/8c7ef1b92d4af7a71600ac9a282a8d08539591b8/screenshots/pop-builder.png -------------------------------------------------------------------------------- /screenshots/pop-contacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pop-os/gnome-shell-theme/8c7ef1b92d4af7a71600ac9a282a8d08539591b8/screenshots/pop-contacts.png -------------------------------------------------------------------------------- /screenshots/pop-maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pop-os/gnome-shell-theme/8c7ef1b92d4af7a71600ac9a282a8d08539591b8/screenshots/pop-maps.png -------------------------------------------------------------------------------- /src/3.18/gnome-shell-dark-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'dark'; 2 | $titlebar: 'dark'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell-dark.scss: -------------------------------------------------------------------------------- 1 | $variant: 'dark'; 2 | $titlebar: 'dark'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell-light-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'light'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell-light.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'light'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'dark'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell-theme.gresource.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | assets/dash/bottom-running1.svg 5 | assets/dash/bottom-running1-focused.svg 6 | assets/dash/bottom-running2.svg 7 | assets/dash/bottom-running2-focused.svg 8 | assets/dash/bottom-running3.svg 9 | assets/dash/bottom-running3-focused.svg 10 | assets/dash/bottom-running4.svg 11 | assets/dash/bottom-running4-focused.svg 12 | assets/dash/left-running1.svg 13 | assets/dash/left-running1-focused.svg 14 | assets/dash/left-running2.svg 15 | assets/dash/left-running2-focused.svg 16 | assets/dash/left-running3.svg 17 | assets/dash/left-running3-focused.svg 18 | assets/dash/left-running4.svg 19 | assets/dash/left-running4-focused.svg 20 | assets/dash/right-running1.svg 21 | assets/dash/right-running1-focused.svg 22 | assets/dash/right-running2.svg 23 | assets/dash/right-running2-focused.svg 24 | assets/dash/right-running3.svg 25 | assets/dash/right-running3-focused.svg 26 | assets/dash/right-running4.svg 27 | assets/dash/right-running4-focused.svg 28 | assets/dash/top-running1.svg 29 | assets/dash/top-running1-focused.svg 30 | assets/dash/top-running2.svg 31 | assets/dash/top-running2-focused.svg 32 | assets/dash/top-running3.svg 33 | assets/dash/top-running3-focused.svg 34 | assets/dash/top-running4.svg 35 | assets/dash/top-running4-focused.svg 36 | assets/calendar-arrow-left.svg 37 | assets/calendar-arrow-right.svg 38 | assets/checkbox.svg 39 | assets/checkbox-off.svg 40 | assets/close.svg 41 | assets/corner-ripple-ltr.svg 42 | assets/corner-ripple-rtl.svg 43 | assets/dash-placeholder.svg 44 | assets/more-results.svg 45 | assets/noise-texture.svg 46 | assets/toggle-off.svg 47 | assets/toggle-on.svg 48 | assets/window-close.svg 49 | assets/window-close-active.svg 50 | extensions/workspaces-to-dock/workspaces-to-dock.css 51 | gnome-shell.css 52 | no-events.svg 53 | no-notifications.svg 54 | pad-osd.css 55 | process-working.svg 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/3.18/gnome-shell.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'dark'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/3.18/pad-osd.scss: -------------------------------------------------------------------------------- 1 | .Leader { 2 | stroke-width: .5 !important; 3 | stroke: #535353; 4 | fill: none !important; 5 | } 6 | 7 | .Button { 8 | stroke-width: .25; 9 | stroke: #ededed; 10 | fill: #ededed; 11 | } 12 | 13 | .Ring { 14 | stroke-width: .5 !important; 15 | stroke: #535353 !important; 16 | fill: none !important; 17 | } 18 | 19 | .Label { 20 | stroke: none !important; 21 | stroke-width: .1 !important; 22 | font-size: .1 !important; 23 | fill: transparent !important; 24 | } 25 | 26 | .TouchStrip, .TouchRing { 27 | stroke-width: .1 !important; 28 | stroke: #ededed !important; 29 | fill: #535353 !important; 30 | } 31 | -------------------------------------------------------------------------------- /src/3.18/sass/_drawing.scss: -------------------------------------------------------------------------------- 1 | // generic drawing of more complex things 2 | 3 | // provide font size in pt, with px fallback 4 | @function pt($size: $root-font-size) { 5 | @return ($size * 0.75 / 1px) + pt; 6 | } 7 | 8 | // provide icon size in em, with px fallback 9 | @function em($size: 16px) { 10 | @return ($size / $root-font-size) + em; 11 | } 12 | 13 | // Typography 14 | // based on: 15 | // https://material.io/guidelines/style/typography.html#typography-styles 16 | 17 | @mixin font($size) { 18 | @if $size == display-4 { 19 | // font-family: $large-font-family; 20 | font-size: 112px; 21 | font-weight: 300; 22 | // line-height: 1; 23 | } 24 | 25 | @if $size == display-3 { 26 | // font-family: $large-font-family; 27 | font-size: 56px; 28 | font-weight: 400; 29 | // line-height: 1; 30 | } 31 | 32 | @if $size == display-2 { 33 | // font-family: $large-font-family; 34 | font-size: 45px; 35 | font-weight: 400; 36 | // line-height: 48px; 37 | } 38 | 39 | @if $size == display-1 { 40 | // font-family: $large-font-family; 41 | font-size: 34px; 42 | font-weight: 400; 43 | // line-height: 40px; 44 | } 45 | 46 | @if $size == headline { 47 | font-size: pt(24px); 48 | font-weight: 400; 49 | // line-height: 32px; 50 | } 51 | 52 | @if $size == title { 53 | font-size: pt(20px); 54 | font-weight: 500; 55 | // line-height: 1; 56 | } 57 | 58 | @if $size == subheading { 59 | font-size: pt($subheading-size); 60 | font-weight: 400; 61 | // line-height: 24px; 62 | } 63 | 64 | @if $size == body-2 { 65 | font-size: pt($root-font-size); 66 | font-weight: 500; 67 | // line-height: 24px; 68 | } 69 | 70 | @if $size == body-1 { 71 | font-size: pt($root-font-size); 72 | font-weight: 400; 73 | // line-height: 20px; 74 | } 75 | 76 | @if $size == caption { 77 | font-size: pt(12px); 78 | font-weight: 400; 79 | // line-height: 1; 80 | } 81 | 82 | @if $size == button { 83 | font-size: pt($root-font-size); 84 | font-weight: 500; 85 | // line-height: 20px; 86 | } 87 | } 88 | 89 | 90 | @mixin entry($t, $fc: $accent_color) { 91 | // 92 | // entry 93 | // 94 | // $t: entry type 95 | // $fc: focus color 96 | // 97 | 98 | @if $t == normal { 99 | background-color: if($fc == $accent_color, rgba($base_color, 0.01), rgba($bg_color, 0.01)); 100 | border-color: transparent; 101 | box-shadow: inset 0 -1px if($fc == $accent_color, $track_color, $fc); 102 | } 103 | 104 | @if $t == focus { 105 | border-color: transparent; 106 | box-shadow: inset 0 -2px $fc; 107 | } 108 | 109 | @if $t == hover { 110 | } 111 | 112 | @if $t == insensitive { 113 | color: $disabled_fg_color; 114 | border-color: transparent; 115 | box-shadow: inset 0 -1px if($fc == $accent_color, $divider_color, $fc); 116 | } 117 | } 118 | 119 | 120 | @mixin button($t, $c: $base_color, $tc: $fg_color) { 121 | // 122 | // button 123 | // 124 | // $t: button type 125 | // $c: base color 126 | // $tc: text color 127 | // 128 | 129 | @if $t == normal { 130 | color: if($tc == $fg_color, $button_fg_color, $tc); 131 | background-color: $c; 132 | border-color: transparent; 133 | box-shadow: $shadow_1; 134 | text-shadow: none; 135 | icon-shadow: none; 136 | } 137 | 138 | @if $t == focus { 139 | color: $tc; 140 | text-shadow: none; 141 | icon-shadow: none; 142 | box-shadow: $shadow_0; 143 | // box-shadow: inset 0px 0px 0px 2px $divider_color; 144 | } 145 | 146 | @if $t == hover { 147 | color: $tc; 148 | background-color: $c; 149 | border-color: transparent; 150 | box-shadow: $shadow_2; 151 | text-shadow: none; 152 | icon-shadow: none; 153 | } 154 | 155 | @if $t == active { 156 | color: $tc; 157 | background-color: mix($tc, $c, percentage($lower_opacity)); 158 | border-color: transparent; 159 | box-shadow: $shadow_2; 160 | text-shadow: none; 161 | icon-shadow: none; 162 | } 163 | 164 | @if $t == insensitive { 165 | color: if($tc == $fg_color, $disabled_secondary_fg_color, $tc); 166 | background-color: if($c == $base_color, $divider_color, $c); 167 | border-color: transparent; 168 | box-shadow: $shadow_0; 169 | text-shadow: none; 170 | icon-shadow: none; 171 | } 172 | 173 | @if $t == flat-normal { 174 | color: if($tc != $inverse_fg_color, $button_fg_color, $inverse_fg_color); 175 | background-color: transparent; 176 | border-color: transparent; 177 | box-shadow: $shadow_0; 178 | text-shadow: none; 179 | icon-shadow: none; 180 | } 181 | 182 | @if $t == flat-focus { 183 | color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color); 184 | background-color: rgba($accent_color, 0.3); 185 | text-shadow: none; 186 | icon-shadow: none; 187 | box-shadow: $shadow_0; 188 | // box-shadow: inset 0px 0px 0px 2px $divider_color; 189 | } 190 | 191 | @if $t == flat-hover { 192 | color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color); 193 | background-color: if($tc != $inverse_fg_color, $divider_color, $inverse_divider_color); 194 | border-color: transparent; 195 | box-shadow: $shadow_0; 196 | text-shadow: none; 197 | icon-shadow: none; 198 | } 199 | 200 | @if $t == flat-active { 201 | color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color); 202 | background-color: if($tc != $inverse_fg_color, $track_color, $inverse_track_color); 203 | border-color: transparent; 204 | box-shadow: $shadow_0; 205 | text-shadow: none; 206 | icon-shadow: none; 207 | } 208 | 209 | @if $t == flat-insensitive { 210 | color: if($tc != $inverse_fg_color, $disabled_secondary_fg_color, $inverse_disabled_secondary_fg_color); 211 | background-color: transparent; 212 | border-color: transparent; 213 | box-shadow: $shadow_0; 214 | text-shadow: none; 215 | icon-shadow: none; 216 | } 217 | } 218 | -------------------------------------------------------------------------------- /src/3.18/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | /*************************** 2 | * Pop!_GNOME+ Version 4.0.0 * 3 | ***************************/ 4 | 5 | // Fonts 6 | $font-family: Fira Sans, Cantarell, Sans-Serif; 7 | $large-font-family: Fira Sans, "M+ 1c", Cantarell, Sans-Serif; 8 | $root-font-size: if($compact == 'false', 14px, 13px); 9 | $subheading-size: if($compact == 'false', 16px, 15px); 10 | 11 | 12 | // Base-sizes 13 | $mini_size: if($compact == 'false',4px, 2px); 14 | $tiny_size: if($compact == 'false', 12px, 10px); 15 | $small_size: if($compact == 'false', 16px, 14px); 16 | $medium_size: if($compact == 'false', 24px, 20px); 17 | $large_size: if($compact == 'false', 32px, 28px); 18 | 19 | // Widgets - Define widget sizes here, and 20 | // define custom sizes as derivative of these 21 | 22 | 23 | $small_icon_size: 12px; 24 | $standard_icon_size: 24px; 25 | $large_icon_size: 48px; 26 | 27 | $border_size: 1px; 28 | $line_size: 2px; 29 | $entry_size: 20em; 30 | $button_size: $medium_size; 31 | $menuitem_size: $small_size; 32 | $checkbox_size: $medium_size; 33 | $switch_size: 24px; 34 | $slider_size: if($compact == 'false', 2em, 1.5em); 35 | 36 | 37 | //Activities 38 | $search_results_size: 1200px; 39 | 40 | //App Grid 41 | $favorite_all_size: if($compact == 'false', 45em, 40em); 42 | $app_running_indicator_size: 4px; 43 | $workspace_thumnail_size: 200px; 44 | 45 | //App Switcher 46 | $window_thumnail_size: 300px; 47 | 48 | //Auth Dialogs 49 | $login_banner_size: $medium_size; 50 | $login_userlist_size: 30em; 51 | 52 | //Calendar 53 | $day_size: 2.4em; 54 | 55 | //Checkboxes 56 | $scrollbar_size: 14px; 57 | 58 | //Message List 59 | $message_list_size: 32em; 60 | 61 | //Modal Dialogs 62 | $modal_size: 32em; 63 | 64 | //Notifications 65 | $notification_size: 40em; 66 | $notify_count_size: 1.6em; 67 | 68 | //OSD 69 | $osd_size: $large_size*2; 70 | $osd_bar_size: .3em; 71 | 72 | //Panel 73 | $panel_size: $medium_size; 74 | 75 | //Popover/Menu 76 | $popup_size: 15em; 77 | $popup_ornament_size: 1.2em; 78 | 79 | //Screen Shield 80 | $screen_shield_notifications_size: 30em; 81 | 82 | 83 | // Padding 84 | $no_padding: .1em; 85 | $mini_padding: .2em; 86 | $tiny_padding: if($compact == 'false', .6em, .4em); 87 | $small_padding: if($compact == 'false', .8em, .6em); 88 | $standard_padding: if($compact == 'false', 1.2em, 1.0em); 89 | $large_padding: if($compact == 'false', 1.6em, 1.2em); 90 | $huge_padding: if($compact == 'false', 2em, 1.6em); 91 | 92 | // Widget paddings - Try to use Sparingly. 93 | $submenu_padding: if($compact == 'false', 26px, 22px); 94 | $user_icon_padding: 1px; 95 | 96 | // Radii and other curves 97 | $pop_radius: 4px; 98 | $shortcut_key_radius: 3px; 99 | $circular_radius: 9999px; 100 | $panel_corner_radius: 4px; 101 | 102 | // opacities 103 | $higher_opacity: 0.9; 104 | $middle_opacity: 0.6; 105 | $lower_opacity: 0.3; 106 | 107 | // durations 108 | $shorter_duration: 180ms; 109 | $longer_duration: 270ms; 110 | $ripple_duration: 450ms; 111 | 112 | // timing functions 113 | $standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1); 114 | $deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1); 115 | $acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1); 116 | $sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1); 117 | 118 | // transition shorthands 119 | $shorter_transition: all $shorter_duration $standard_curve; 120 | $longer_transition: all $longer_duration $standard_curve; 121 | $shadow_transition: box-shadow $shorter_duration $standard_curve; 122 | $menu_transition: all 0.1s $sharp_curve; 123 | 124 | // shadows 125 | // based shadow values: 126 | // https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png 127 | 128 | // box-shadow 1px blur doesn't draw correctly, see 129 | // https://bugzilla.gnome.org/show_bug.cgi?id=738484 130 | // $shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); 131 | $shadow_0: 0 1px 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.08); 132 | $shadow_1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 133 | $shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 134 | $shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23); 135 | $shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22); 136 | $shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22); 137 | 138 | $text_shadow: 0 1px 5px rgba(0, 0, 0, 0.6); 139 | 140 | // Legacy Variables. Don't use these for new development 141 | $material_radius: 4px; 142 | -------------------------------------------------------------------------------- /src/3.26/sass/widgets/_close-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Window Close Button * 3 | */ 4 | 5 | .window-close { 6 | background-image: url("assets/window-close.svg"); 7 | background-size: 36px; 8 | height: 36px; 9 | width: 36px; 10 | -shell-close-overlap: 29px; 11 | 12 | &:hover, 13 | &:active { background-image: url("assets/window-close-active.svg"); } 14 | } -------------------------------------------------------------------------------- /src/3.26/sass/widgets/_osd.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * OSD * 3 | */ 4 | 5 | %osd-panel { 6 | color: $fg_color; 7 | background-color: $base_color; 8 | border: none; 9 | box-shadow: $shadow_4; 10 | border-radius: $pop_radius; 11 | padding: $standard_padding; 12 | } 13 | 14 | .osd-window { 15 | @extend %osd-panel; 16 | text-align: center; 17 | font-size: 13pt; 18 | font-weight: 400; 19 | spacing: $standard_padding; 20 | margin: $huge_padding; 21 | min-width: $osd_size; 22 | min-height: $osd_size; 23 | 24 | .osd-monitor-label { 25 | font-size: 3em; 26 | } 27 | 28 | .level { 29 | height: $osd_bar_size; 30 | border-radius: $circular_radius; 31 | background-color: $track_color; 32 | color: $primary_color; 33 | } 34 | 35 | .level-bar { 36 | background-color: $primary_color; 37 | border-radius: $circular_radius; 38 | } 39 | } 40 | 41 | /* Pad OSD */ 42 | .pad-osd-window { 43 | padding: $huge_padding; 44 | background-color: $bg_color; 45 | 46 | .pad-osd-title-box { spacing: 12px; } 47 | 48 | .pad-osd-title-menu-box { spacing: 6px; } 49 | } 50 | 51 | .combo-box-label { width: 15em; } 52 | -------------------------------------------------------------------------------- /src/3.26/sass/widgets/_popovers-menus.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Popovers/Menus * 3 | */ 4 | 5 | .popup-menu { 6 | min-width: 200px; 7 | 8 | .popup-menu-arrow { } //defined globally in the TOP BAR 9 | .popup-sub-menu { 10 | background-color: $alt_base_color; 11 | box-shadow: $shadow_0; 12 | } 13 | 14 | .popup-menu-content { padding: 8px 0; } 15 | .popup-menu-item { 16 | spacing: 8px; 17 | transition-duration: $shorter_duration; 18 | border: none; 19 | 20 | &:ltr { padding: 0.4em 24px 0.4em 0; } 21 | &:rtl { padding: 0.4em 0 0.4em 24px; } 22 | &:checked { 23 | background-color: darken($accent_color, 0.5); 24 | color: $inverse_fg_color; 25 | box-shadow: $shadow_0; 26 | font-weight: normal; 27 | border: none; 28 | 29 | &.selected { 30 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity / 2)); 31 | color: $inverse_fg_color; 32 | } 33 | &:active { 34 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity)); 35 | color: $inverse_fg_color !important; 36 | } 37 | &:insensitive { color: $inverse_disabled_fg_color; } 38 | } 39 | &.selected { 40 | background-color: $divider_color; 41 | color: $fg_color; 42 | transition-duration: 0ms; 43 | } 44 | &:active { 45 | background-color: $track_color; 46 | color: $fg_color; 47 | transition-duration: $longer_duration; 48 | } 49 | &.selected:active { color: $fg_color; } 50 | &:insensitive { color: $disabled_fg_color; } 51 | } 52 | 53 | .popup-inactive-menu-item { //all icons and other graphical elements 54 | color: $fg_color; 55 | 56 | &:insensitive { color: $hint_fg_color; } 57 | } 58 | //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is 59 | &.panel-menu { 60 | -boxpointer-gap: 0px; 61 | margin-bottom: 1.75em; 62 | } 63 | } 64 | 65 | .popup-menu-ornament { 66 | text-align: right; 67 | width: $popup_ornament_size; 68 | } 69 | 70 | .popup-menu-boxpointer, 71 | .candidate-popup-boxpointer { 72 | -arrow-border-radius: 0; 73 | -arrow-background-color: transparent; 74 | -arrow-border-width: 0; 75 | -arrow-border-color: transparent; 76 | -arrow-base: 0; 77 | -arrow-rise: 0; 78 | -arrow-box-shadow: none; //dreaming. bug #689995 79 | margin: 5px 8px 8px; 80 | background-color: $base_color; 81 | border-radius: $pop_radius; 82 | box-shadow: $shadow_2; 83 | } 84 | 85 | .popup-separator-menu-item { 86 | height: $border_size; 87 | margin: $small_padding 5px+$huge_padding; 88 | background-color: transparent; 89 | border-color: $border_color; 90 | border-bottom-width: $border_size; 91 | border-bottom-style: solid; 92 | } 93 | 94 | .system-menu-action { 95 | color: $secondary_fg_color; 96 | border-radius: $circular_radius; 97 | border: none; 98 | /* wish we could do 50% */ 99 | padding: $standard_padding; 100 | -st-icon-style: symbolic; 101 | 102 | &:hover, 103 | &:focus { 104 | background-color: $disabled_secondary_fg_color; 105 | color: $fg_color; 106 | border: none; 107 | padding: $standard_padding; 108 | } 109 | 110 | &:active { 111 | background-color: $disabled_fg_color; 112 | color: $fg_color; 113 | } 114 | 115 | > StIcon { 116 | icon-size: 16px; 117 | } 118 | } 119 | 120 | .system-switch-user-submenu-icon.user-icon { 121 | icon-size: 5px+$small_icon_size; 122 | margin: 0 $user_icon_padding 0 $user-icon-padding; 123 | border-radius: $circular_radius; 124 | background-size: contain; 125 | } 126 | 127 | .system-switch-user-submenu-icon.default-icon { 128 | icon-size: 5px+$small_icon_size; 129 | margin: 0 $user_icon_padding 0 $user-icon-padding; 130 | border-radius: $circular_radius; 131 | background-size: contain; 132 | } 133 | 134 | /* fallback menu 135 | - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled 136 | app menu inside the main app window itself rather than the top bar 137 | */ 138 | 139 | .aggregate-menu { 140 | min-width: 21em; 141 | .popup-menu-icon { 142 | padding: 0 4px; 143 | } 144 | .popup-sub-menu .popup-menu-item :first-child:ltr { 145 | padding-left: $submenu_padding; 146 | margin-left: 1em; 147 | } 148 | .popup-sub-menu .popup-menu-item :first-child:rtl { 149 | padding-right: $submenu_padding; 150 | margin-right: 1em; 151 | } 152 | } -------------------------------------------------------------------------------- /src/3.26/sass/widgets/_sliders.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Slider * 3 | */ 4 | 5 | .slider { 6 | height: 1em; 7 | color: $primary_color; 8 | -slider-height: 0.3em; 9 | -slider-background-color: $track_color; 10 | -slider-border-color: transparent; 11 | -slider-active-background-color: $primary_color; 12 | -slider-active-border-color: transparent; 13 | -slider-border-width: 1px; 14 | -slider-handle-radius: 6px; 15 | } -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Calendar * 3 | */ 4 | 5 | #calendarArea { 6 | padding: $small_padding $standard_padding; 7 | } 8 | 9 | .calendar { 10 | margin-bottom: -2px+$small_padding; 11 | } 12 | 13 | .calendar, 14 | .datemenu-today-button, 15 | .datemenu-displays-box, 16 | .message-list-sections { 17 | margin: 0 $standard_padding; 18 | } 19 | 20 | .datemenu-calendar-column { 21 | spacing: $tiny_padding; 22 | } 23 | 24 | .datemenu-displays-section { 25 | padding-bottom: $huge_padding; 26 | } 27 | 28 | .datemenu-displays-box { 29 | spacing: $standard_padding; 30 | } 31 | 32 | .datemenu-calendar-column { 33 | border: 0 solid $border_color; 34 | :ltr { border-left-width: $border_size; } 35 | :rtl { border-right-width: $border_size; } 36 | } 37 | 38 | .datemenu-today-button, 39 | .world-clocks-button, 40 | .weather-button, 41 | .events-section-title { 42 | border-radius: $pop_radius; 43 | padding: 2*$mini_padding; 44 | } 45 | 46 | .message-list-section-list { 47 | &:ltr { padding-left: .4em; } 48 | 49 | &:rtl { padding-right: .4em; } 50 | } 51 | 52 | .datemenu-today-button, 53 | .world-clocks-button, 54 | .weather-button, 55 | .events-section-title { 56 | 57 | .date-label { 58 | font-size: 2em; 59 | font-weight: 300; 60 | } 61 | 62 | &:hover, 63 | &:focus { 64 | background-color: $track_color; 65 | } 66 | 67 | &:active { 68 | color: $fg_color; 69 | background-color: $hint_fg_color; 70 | } 71 | } 72 | 73 | .world-clocks-header, 74 | .weather-header, 75 | .events-section-title { 76 | color: $secondary_fg_color; 77 | font-weight: 500; 78 | font-size: 14px; 79 | } 80 | 81 | .world-clocks-grid { 82 | spacing-rows: 2*$mini_padding; 83 | } 84 | 85 | .weather-box { 86 | spacing: 2*$mini_padding; 87 | } 88 | 89 | .calendar-month-label { 90 | color: $secondary_fg_color; 91 | font-weight: 400; 92 | font-size: 16px; 93 | padding: $small_padding 0; 94 | } 95 | 96 | .pager-button { 97 | color: #fg_color; 98 | background-color: transparent; 99 | width: 32px; 100 | border-radius: $pop_radius; 101 | 102 | &:hover, 103 | &:focus { 104 | background-color: $track_color; 105 | } 106 | 107 | &:active { 108 | background-color: $divider_color; 109 | } 110 | } 111 | 112 | .calendar-change-month-back { 113 | background-image: url("assets/calendar-arrow-left.svg"); 114 | &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } 115 | } 116 | 117 | .calendar-change-month-forward { 118 | background-image: url("assets/calendar-arrow-right.svg"); 119 | &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } 120 | } 121 | 122 | .calendar-day-base { 123 | color: $fg_color; 124 | font-size: 80%; 125 | text-align: center; 126 | width: $day_size; 127 | height: $day_size; 128 | padding: $no_padding; 129 | margin: $mini_padding; 130 | border-radius: $circular_radius; 131 | &:hover, 132 | &:focus { 133 | background-color: rgba($accent_color, 0.25); 134 | color: $fg_color; 135 | } 136 | 137 | &:active, 138 | &:selected { 139 | color: $inverse_fg_color; 140 | background-color: $accent_color; 141 | border-color: transparent; 142 | font-weight: 700; 143 | } 144 | 145 | &.calendar-day-heading { 146 | color: $secondary_fg_color; 147 | margin-top: $small_padding; 148 | font-size: 70%; 149 | } 150 | } 151 | 152 | .calendar-nonwork-day { 153 | color: $secondary_fg_color; 154 | font-weight: 400; 155 | } 156 | 157 | .calendar-today { font-weight: 600; } 158 | 159 | .calendar-day-with-events { color: $primary_color; } 160 | 161 | .calendar-other-month-day { 162 | color: $secondary_fg_color; 163 | opacity: 0.5; 164 | } 165 | 166 | .calendar-week-number { 167 | font-size: 70%; 168 | font-weight: 500; 169 | width: 2.3em; 170 | height: 1.8em; 171 | padding: 0.5em 0 0; 172 | margin: 6px; 173 | background-color: transparent; 174 | color: $disabled_fg_color; 175 | } 176 | 177 | -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_close-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Window Close Button * 3 | */ 4 | 5 | .window-close { 6 | background-image: url("assets/window-close.svg"); 7 | background-size: 36px; 8 | height: 36px; 9 | width: 36px; 10 | -shell-close-overlap: 29px; 11 | 12 | &:hover, 13 | &:active { background-image: url("assets/window-close-active.svg"); } 14 | } -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_osd.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * OSD * 3 | */ 4 | 5 | %osd-panel { 6 | color: $fg_color; 7 | background-color: $base_color; 8 | border: none; 9 | box-shadow: $shadow_4; 10 | border-radius: $pop_radius; 11 | padding: $standard_padding; 12 | } 13 | 14 | .osd-window { 15 | @extend %osd-panel; 16 | text-align: center; 17 | font-size: 13pt; 18 | font-weight: 400; 19 | spacing: $standard_padding; 20 | margin: $huge_padding; 21 | min-width: $osd_size; 22 | min-height: $osd_size; 23 | 24 | .osd-monitor-label { 25 | font-size: 3em; 26 | } 27 | 28 | .level { 29 | height: $osd_bar_size; 30 | border-radius: $circular_radius; 31 | background-color: $track_color; 32 | color: $primary_color; 33 | } 34 | 35 | .level-bar { 36 | background-color: $primary_color; 37 | border-radius: $circular_radius; 38 | } 39 | } 40 | 41 | /* Pad OSD */ 42 | .pad-osd-window { 43 | padding: $huge_padding; 44 | background-color: $bg_color; 45 | 46 | .pad-osd-title-box { spacing: 12px; } 47 | 48 | .pad-osd-title-menu-box { spacing: 6px; } 49 | } 50 | 51 | .combo-box-label { width: 15em; } 52 | -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_popovers-menus.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Popovers/Menus * 3 | */ 4 | 5 | .popup-menu { 6 | min-width: 200px; 7 | 8 | .popup-menu-arrow { } //defined globally in the TOP BAR 9 | .popup-sub-menu { 10 | background-color: $alt_base_color; 11 | box-shadow: $shadow_0; 12 | } 13 | 14 | .popup-menu-content { padding: 8px 0; } 15 | .popup-menu-item { 16 | spacing: 8px; 17 | transition-duration: $shorter_duration; 18 | border: none; 19 | 20 | &:ltr { padding: 0.4em 24px 0.4em 0; } 21 | &:rtl { padding: 0.4em 0 0.4em 24px; } 22 | &:checked { 23 | background-color: darken($accent_color, 0.5); 24 | color: $inverse_fg_color; 25 | box-shadow: $shadow_0; 26 | font-weight: normal; 27 | border: none; 28 | 29 | &.selected { 30 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity / 2)); 31 | color: $inverse_fg_color; 32 | } 33 | &:active { 34 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity)); 35 | color: $inverse_fg_color !important; 36 | } 37 | &:insensitive { color: $inverse_disabled_fg_color; } 38 | } 39 | &.selected { 40 | background-color: $divider_color; 41 | color: $fg_color; 42 | transition-duration: 0ms; 43 | } 44 | &:active { 45 | background-color: $track_color; 46 | color: $fg_color; 47 | transition-duration: $longer_duration; 48 | } 49 | &.selected:active { color: $fg_color; } 50 | &:insensitive { color: $disabled_fg_color; } 51 | } 52 | 53 | .popup-inactive-menu-item { //all icons and other graphical elements 54 | color: $fg_color; 55 | 56 | &:insensitive { color: $hint_fg_color; } 57 | } 58 | //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is 59 | &.panel-menu { 60 | -boxpointer-gap: 0px; 61 | margin-bottom: 1.75em; 62 | } 63 | } 64 | 65 | .popup-menu-ornament { 66 | text-align: right; 67 | width: $popup_ornament_size; 68 | } 69 | 70 | .popup-menu-boxpointer, 71 | .candidate-popup-boxpointer { 72 | -arrow-border-radius: 0; 73 | -arrow-background-color: transparent; 74 | -arrow-border-width: 0; 75 | -arrow-border-color: transparent; 76 | -arrow-base: 0; 77 | -arrow-rise: 0; 78 | -arrow-box-shadow: none; //dreaming. bug #689995 79 | margin: 5px 8px 8px; 80 | background-color: $base_color; 81 | border-radius: $pop_radius; 82 | box-shadow: $shadow_2; 83 | } 84 | 85 | .popup-separator-menu-item { 86 | height: $border_size; 87 | margin: $small_padding 5px+$huge_padding; 88 | background-color: transparent; 89 | border-color: $border_color; 90 | border-bottom-width: $border_size; 91 | border-bottom-style: solid; 92 | } 93 | 94 | .system-menu-action { 95 | color: $secondary_fg_color; 96 | border-radius: $circular_radius; 97 | border: none; 98 | /* wish we could do 50% */ 99 | padding: $standard_padding; 100 | -st-icon-style: symbolic; 101 | 102 | &:hover, 103 | &:focus { 104 | background-color: $disabled_secondary_fg_color; 105 | color: $fg_color; 106 | border: none; 107 | padding: $standard_padding; 108 | } 109 | 110 | &:active { 111 | background-color: $disabled_fg_color; 112 | color: $fg_color; 113 | } 114 | 115 | > StIcon { 116 | icon-size: 16px; 117 | } 118 | } 119 | 120 | .system-switch-user-submenu-icon.user-icon { 121 | icon-size: 5px+$small_icon_size; 122 | margin: 0 $user_icon_padding 0 $user-icon-padding; 123 | border-radius: $circular_radius; 124 | background-size: contain; 125 | } 126 | 127 | .system-switch-user-submenu-icon.default-icon { 128 | icon-size: 5px+$small_icon_size; 129 | margin: 0 $user_icon_padding 0 $user-icon-padding; 130 | border-radius: $circular_radius; 131 | background-size: contain; 132 | } 133 | 134 | /* fallback menu 135 | - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled 136 | app menu inside the main app window itself rather than the top bar 137 | */ 138 | 139 | .aggregate-menu { 140 | min-width: 21em; 141 | .popup-menu-icon { 142 | padding: 0 4px; 143 | } 144 | .popup-sub-menu .popup-menu-item :first-child:ltr { 145 | padding-left: $submenu_padding; 146 | margin-left: 1em; 147 | } 148 | .popup-sub-menu .popup-menu-item :first-child:rtl { 149 | padding-right: $submenu_padding; 150 | margin-right: 1em; 151 | } 152 | } -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_sliders.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Slider * 3 | */ 4 | 5 | .slider { 6 | height: 1em; 7 | color: $primary_color; 8 | -slider-height: 0.3em; 9 | -slider-background-color: $track_color; 10 | -slider-border-color: transparent; 11 | -slider-active-background-color: $primary_color; 12 | -slider-active-border-color: transparent; 13 | -slider-border-width: 1px; 14 | -slider-handle-radius: 6px; 15 | } -------------------------------------------------------------------------------- /src/3.28/sass/widgets/_switches.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Switches * 3 | */ 4 | 5 | .toggle-switch { 6 | width: 44px; 7 | height: 22px; 8 | background-size: 40px 24px; 9 | } 10 | 11 | .toggle-switch-us, 12 | .toggle-switch-intl { 13 | background-image: url("assets/toggle-off.svg"); 14 | 15 | &:checked { 16 | background-image: url("assets/toggle-on.svg"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/3.30/sass/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Calendar * 3 | */ 4 | 5 | #calendarArea { 6 | padding: $small_padding $standard_padding; 7 | } 8 | 9 | .calendar { 10 | margin-bottom: -2px+$small_padding; 11 | } 12 | 13 | .calendar, 14 | .datemenu-today-button, 15 | .datemenu-displays-box, 16 | .message-list-sections { 17 | margin: 0 $standard_padding; 18 | } 19 | 20 | .datemenu-calendar-column { 21 | spacing: $tiny_padding; 22 | } 23 | 24 | .datemenu-displays-section { 25 | padding-bottom: $huge_padding; 26 | } 27 | 28 | .datemenu-displays-box { 29 | spacing: $standard_padding; 30 | } 31 | 32 | .datemenu-calendar-column { 33 | border: 0 solid $border_color; 34 | :ltr { border-left-width: $border_size; } 35 | :rtl { border-right-width: $border_size; } 36 | } 37 | 38 | .datemenu-today-button, 39 | .world-clocks-button, 40 | .weather-button, 41 | .events-section-title { 42 | border-radius: $pop_radius; 43 | padding: 2*$mini_padding; 44 | } 45 | 46 | .message-list-section-list { 47 | &:ltr { padding-left: .4em; } 48 | 49 | &:rtl { padding-right: .4em; } 50 | } 51 | 52 | .pager-button { 53 | background-color: transparent; 54 | border-radius: 4px; 55 | 56 | &:hover, 57 | &:focus { 58 | background-color: rgba($fg_color,0.95); 59 | } 60 | 61 | &:active { 62 | background-color: rgba($bg_color,0.95); 63 | } 64 | } 65 | 66 | 67 | .datemenu-today-button, 68 | .world-clocks-button, 69 | .weather-button, 70 | .events-section-title { 71 | 72 | .date-label { 73 | font-size: 2em; 74 | font-weight: 300; 75 | } 76 | 77 | &:hover, 78 | &:focus { 79 | background-color: $track_color; 80 | } 81 | 82 | &:active { 83 | color: $fg_color; 84 | background-color: $hint_fg_color; 85 | } 86 | } 87 | 88 | .world-clocks-header, 89 | .weather-header, 90 | .events-section-title { 91 | color: $secondary_fg_color; 92 | font-weight: 500; 93 | font-size: 14px; 94 | } 95 | 96 | .world-clocks-grid { 97 | spacing-rows: 2*$mini_padding; 98 | } 99 | 100 | .weather-box { 101 | spacing: 2*$mini_padding; 102 | } 103 | 104 | .calendar-month-label { 105 | color: $secondary_fg_color; 106 | font-weight: 400; 107 | font-size: 16px; 108 | padding: $small_padding 0; 109 | } 110 | 111 | .pager-button { 112 | color: #fg_color; 113 | background-color: transparent; 114 | width: 32px; 115 | border-radius: $pop_radius; 116 | 117 | &:hover, 118 | &:focus { 119 | background-color: $track_color; 120 | } 121 | 122 | &:active { 123 | background-color: $divider_color; 124 | } 125 | } 126 | 127 | .calendar-change-month-back { 128 | background-image: url("assets/calendar-arrow-left.svg"); 129 | &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } 130 | } 131 | 132 | .calendar-change-month-forward { 133 | background-image: url("assets/calendar-arrow-right.svg"); 134 | &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } 135 | } 136 | 137 | .calendar-day-base { 138 | color: $fg_color; 139 | font-size: 80%; 140 | text-align: center; 141 | width: $day_size; 142 | height: $day_size; 143 | padding: $no_padding; 144 | margin: $mini_padding; 145 | border-radius: $circular_radius; 146 | &:hover, 147 | &:focus { 148 | background-color: rgba($accent_color, 0.25); 149 | color: $fg_color; 150 | } 151 | 152 | &:active, 153 | &:selected { 154 | color: $inverse_fg_color; 155 | background-color: $accent_color; 156 | border-color: transparent; 157 | font-weight: 700; 158 | } 159 | 160 | &.calendar-day-heading { 161 | color: $secondary_fg_color; 162 | margin-top: $small_padding; 163 | font-size: 70%; 164 | } 165 | } 166 | 167 | .calendar-nonwork-day { 168 | color: $secondary_fg_color; 169 | font-weight: 400; 170 | } 171 | 172 | .calendar-today { font-weight: 600; } 173 | 174 | .calendar-day-with-events { color: $primary_color; } 175 | 176 | .calendar-other-month-day { 177 | color: $secondary_fg_color; 178 | opacity: 0.5; 179 | } 180 | 181 | .calendar-week-number { 182 | font-size: 70%; 183 | font-weight: 500; 184 | width: 2.3em; 185 | height: 1.8em; 186 | padding: 0.5em 0 0; 187 | margin: 6px; 188 | background-color: transparent; 189 | color: $disabled_fg_color; 190 | } 191 | 192 | -------------------------------------------------------------------------------- /src/3.30/sass/widgets/_close-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Window Close Button * 3 | */ 4 | 5 | .window-close { 6 | background-image: url("assets/window-close.svg"); 7 | background-size: 36px; 8 | height: 36px; 9 | width: 36px; 10 | -shell-close-overlap: 29px; 11 | 12 | &:hover, 13 | &:active { background-image: url("assets/window-close-active.svg"); } 14 | } -------------------------------------------------------------------------------- /src/3.30/sass/widgets/_popovers-menus.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Popovers/Menus * 3 | */ 4 | 5 | .popup-menu { 6 | min-width: 200px; 7 | 8 | .popup-menu-arrow { } //defined globally in the TOP BAR 9 | .popup-sub-menu { 10 | background-color: $alt_base_color; 11 | box-shadow: $shadow_0; 12 | } 13 | 14 | .popup-menu-content { padding: 8px 0; } 15 | .popup-menu-item { 16 | spacing: 8px; 17 | transition-duration: $shorter_duration; 18 | border: none; 19 | 20 | &:ltr { padding: 0.4em 24px 0.4em 0; } 21 | &:rtl { padding: 0.4em 0 0.4em 24px; } 22 | &:checked { 23 | background-color: darken($accent_color, 0.5); 24 | color: $inverse_fg_color; 25 | box-shadow: $shadow_0; 26 | font-weight: normal; 27 | border: none; 28 | 29 | &.selected { 30 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity / 2)); 31 | color: $inverse_fg_color; 32 | } 33 | &:active { 34 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity)); 35 | color: $inverse_fg_color !important; 36 | } 37 | &:insensitive { color: $inverse_disabled_fg_color; } 38 | } 39 | &.selected { 40 | background-color: $divider_color; 41 | color: $fg_color; 42 | transition-duration: 0ms; 43 | } 44 | &:active { 45 | background-color: $track_color; 46 | color: $fg_color; 47 | transition-duration: $longer_duration; 48 | } 49 | &.selected:active { color: $fg_color; } 50 | &:insensitive { color: $disabled_fg_color; } 51 | } 52 | 53 | .popup-inactive-menu-item { //all icons and other graphical elements 54 | color: $fg_color; 55 | 56 | &:insensitive { color: $hint_fg_color; } 57 | } 58 | //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is 59 | &.panel-menu { 60 | -boxpointer-gap: 0px; 61 | margin-bottom: 1.75em; 62 | } 63 | } 64 | 65 | .popup-menu-ornament { 66 | text-align: right; 67 | width: $popup_ornament_size; 68 | } 69 | 70 | .popup-menu-boxpointer, 71 | .candidate-popup-boxpointer { 72 | -arrow-border-radius: 0; 73 | -arrow-background-color: transparent; 74 | -arrow-border-width: 0; 75 | -arrow-border-color: transparent; 76 | -arrow-base: 0; 77 | -arrow-rise: 0; 78 | -arrow-box-shadow: none; //dreaming. bug #689995 79 | margin: 5px 8px 8px; 80 | background-color: $base_color; 81 | border-radius: $pop_radius; 82 | box-shadow: $shadow_2; 83 | } 84 | 85 | .popup-separator-menu-item { 86 | height: $border_size; 87 | margin: $small_padding 5px+$huge_padding; 88 | background-color: transparent; 89 | border-color: $border_color; 90 | border-bottom-width: $border_size; 91 | border-bottom-style: solid; 92 | } 93 | 94 | .system-menu-action { 95 | color: $secondary_fg_color; 96 | border-radius: $circular_radius; 97 | border: none; 98 | /* wish we could do 50% */ 99 | padding: $standard_padding; 100 | -st-icon-style: symbolic; 101 | 102 | &:hover, 103 | &:focus { 104 | background-color: $disabled_secondary_fg_color; 105 | color: $fg_color; 106 | border: none; 107 | padding: $standard_padding; 108 | } 109 | 110 | &:active { 111 | background-color: $disabled_fg_color; 112 | color: $fg_color; 113 | } 114 | 115 | > StIcon { 116 | icon-size: 16px; 117 | } 118 | } 119 | 120 | .system-switch-user-submenu-icon.user-icon { 121 | icon-size: 5px+$small_icon_size; 122 | margin: 0 $user_icon_padding 0 $user-icon-padding; 123 | border-radius: $circular_radius; 124 | background-size: contain; 125 | } 126 | 127 | .system-switch-user-submenu-icon.default-icon { 128 | icon-size: 5px+$small_icon_size; 129 | margin: 0 $user_icon_padding 0 $user-icon-padding; 130 | border-radius: $circular_radius; 131 | background-size: contain; 132 | } 133 | 134 | /* fallback menu 135 | - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled 136 | app menu inside the main app window itself rather than the top bar 137 | */ 138 | 139 | .aggregate-menu { 140 | min-width: 21em; 141 | .popup-menu-icon { 142 | padding: 0 4px; 143 | } 144 | .popup-sub-menu .popup-menu-item :first-child:ltr { 145 | padding-left: $submenu_padding; 146 | margin-left: 1em; 147 | } 148 | .popup-sub-menu .popup-menu-item :first-child:rtl { 149 | padding-right: $submenu_padding; 150 | margin-right: 1em; 151 | } 152 | } -------------------------------------------------------------------------------- /src/common/assets-dark/calendar-arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/calendar-arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/checkbox-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 31 | 52 | 56 | 57 | -------------------------------------------------------------------------------- /src/common/assets-dark/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/corner-ripple-ltr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/corner-ripple-rtl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash-placeholder.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 53 | 56 | 62 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/bottom-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/left-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/right-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets-dark/dash/top-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets-dark/more-results.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 51 | 58 | 62 | 63 | -------------------------------------------------------------------------------- /src/common/assets-dark/no-events.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/no-notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets-dark/noise-texture.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 49 | 51 | 54 | 59 | 64 | 69 | 70 | 71 | 77 | 78 | -------------------------------------------------------------------------------- /src/common/assets-dark/process-working.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/common/assets-dark/toggle-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 43 | 46 | 50 | 54 | 58 | 62 | 66 | 70 | 71 | 72 | 90 | 93 | 94 | 97 | 103 | 110 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /src/common/assets-dark/toggle-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 43 | 46 | 50 | 54 | 58 | 62 | 66 | 70 | 71 | 72 | 102 | 107 | 108 | 114 | 120 | 126 | 134 | 135 | -------------------------------------------------------------------------------- /src/common/assets-dark/window-close-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 51 | 58 | 65 | 69 | 70 | -------------------------------------------------------------------------------- /src/common/assets-dark/window-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 52 | 59 | 63 | 64 | -------------------------------------------------------------------------------- /src/common/assets/calendar-arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/calendar-arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/checkbox-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 31 | 52 | 56 | 57 | -------------------------------------------------------------------------------- /src/common/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/corner-ripple-ltr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/corner-ripple-rtl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/dash-placeholder.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 53 | 56 | 62 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets/dash/bottom-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets/dash/left-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets/dash/right-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running1-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running2-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running3-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running4-focused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/assets/dash/top-running4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/common/assets/more-results.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 51 | 58 | 62 | 63 | -------------------------------------------------------------------------------- /src/common/assets/no-events.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/no-notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/assets/noise-texture.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 49 | 51 | 54 | 59 | 64 | 69 | 70 | 71 | 77 | 78 | -------------------------------------------------------------------------------- /src/common/assets/process-working.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/common/assets/toggle-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 35 | 39 | 43 | 47 | 51 | 55 | 59 | 60 | 71 | 72 | 92 | 95 | 96 | 99 | 105 | 111 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /src/common/assets/toggle-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 43 | 46 | 50 | 54 | 58 | 62 | 66 | 70 | 71 | 72 | 102 | 107 | 108 | 114 | 120 | 126 | 134 | 135 | -------------------------------------------------------------------------------- /src/common/assets/window-close-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 51 | 58 | 65 | 69 | 70 | -------------------------------------------------------------------------------- /src/common/assets/window-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 52 | 59 | 63 | 64 | -------------------------------------------------------------------------------- /src/common/gnome-shell-dark-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'dark'; 2 | $titlebar: 'dark'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/gnome-shell-dark.scss: -------------------------------------------------------------------------------- 1 | $variant: 'dark'; 2 | $titlebar: 'dark'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/gnome-shell-light-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'light'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/gnome-shell-light.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'light'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/gnome-shell-slim.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'dark'; 3 | $compact: 'true'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/gnome-shell-theme.gresource.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | assets/dash/bottom-running1.svg 5 | assets/dash/bottom-running1-focused.svg 6 | assets/dash/bottom-running2.svg 7 | assets/dash/bottom-running2-focused.svg 8 | assets/dash/bottom-running3.svg 9 | assets/dash/bottom-running3-focused.svg 10 | assets/dash/bottom-running4.svg 11 | assets/dash/bottom-running4-focused.svg 12 | assets/dash/left-running1.svg 13 | assets/dash/left-running1-focused.svg 14 | assets/dash/left-running2.svg 15 | assets/dash/left-running2-focused.svg 16 | assets/dash/left-running3.svg 17 | assets/dash/left-running3-focused.svg 18 | assets/dash/left-running4.svg 19 | assets/dash/left-running4-focused.svg 20 | assets/dash/right-running1.svg 21 | assets/dash/right-running1-focused.svg 22 | assets/dash/right-running2.svg 23 | assets/dash/right-running2-focused.svg 24 | assets/dash/right-running3.svg 25 | assets/dash/right-running3-focused.svg 26 | assets/dash/right-running4.svg 27 | assets/dash/right-running4-focused.svg 28 | assets/dash/top-running1.svg 29 | assets/dash/top-running1-focused.svg 30 | assets/dash/top-running2.svg 31 | assets/dash/top-running2-focused.svg 32 | assets/dash/top-running3.svg 33 | assets/dash/top-running3-focused.svg 34 | assets/dash/top-running4.svg 35 | assets/dash/top-running4-focused.svg 36 | assets/calendar-arrow-left.svg 37 | assets/calendar-arrow-right.svg 38 | assets/checkbox.svg 39 | assets/checkbox-off.svg 40 | assets/close.svg 41 | assets/corner-ripple-ltr.svg 42 | assets/corner-ripple-rtl.svg 43 | assets/dash-placeholder.svg 44 | assets/more-results.svg 45 | assets/noise-texture.svg 46 | assets/toggle-off.svg 47 | assets/toggle-on.svg 48 | assets/window-close.svg 49 | assets/window-close-active.svg 50 | extensions/workspaces-to-dock/workspaces-to-dock.css 51 | gnome-shell.css 52 | message-indicator-symbolic.svg 53 | no-events.svg 54 | no-notifications.svg 55 | pad-osd.css 56 | process-working.svg 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/common/gnome-shell.scss: -------------------------------------------------------------------------------- 1 | $variant: 'light'; 2 | $titlebar: 'dark'; 3 | $compact: 'false'; 4 | 5 | @import 'sass/variables'; 6 | @import 'sass/colors'; 7 | @import 'sass/drawing'; 8 | @import 'sass/common'; 9 | @import 'sass/extensions'; 10 | -------------------------------------------------------------------------------- /src/common/message-indicator-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/common/no-events.svg: -------------------------------------------------------------------------------- 1 | assets/no-events.svg -------------------------------------------------------------------------------- /src/common/no-notifications.svg: -------------------------------------------------------------------------------- 1 | assets/no-notifications.svg -------------------------------------------------------------------------------- /src/common/pad-osd.scss: -------------------------------------------------------------------------------- 1 | .Leader { 2 | stroke-width: .5 !important; 3 | stroke: #535353; 4 | fill: none !important; 5 | } 6 | 7 | .Button { 8 | stroke-width: .25; 9 | stroke: #ededed; 10 | fill: #ededed; 11 | } 12 | 13 | .Ring { 14 | stroke-width: .5 !important; 15 | stroke: #535353 !important; 16 | fill: none !important; 17 | } 18 | 19 | .Label { 20 | stroke: none !important; 21 | stroke-width: .1 !important; 22 | font-size: .1 !important; 23 | fill: transparent !important; 24 | } 25 | 26 | .TouchStrip, .TouchRing { 27 | stroke-width: .1 !important; 28 | stroke: #ededed !important; 29 | fill: #535353 !important; 30 | } 31 | -------------------------------------------------------------------------------- /src/common/process-working.svg: -------------------------------------------------------------------------------- 1 | assets/process-working.svg -------------------------------------------------------------------------------- /src/common/sass/_common.scss: -------------------------------------------------------------------------------- 1 | //This is the RIGHT PLACE to edit the stylesheet 2 | 3 | //let's start by telling people not to edit the generated CSS: 4 | $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; 5 | /* #{$cakeisalie} */ 6 | 7 | /* Copyright 2018 System76, Inc. 8 | * Portions adapted from the Adwaita GNOME Shell stylesheet. 9 | * Copyright 2009, 2015 Red Hat, Inc. 10 | * 11 | * This program is free software; you can redistribute it and/or modify it 12 | * under the terms and conditions of the GNU Lesser General Public License, 13 | * version 2.1, as published by the Free Software Foundation. 14 | * 15 | * This program is distributed in the hope it will be useful, but WITHOUT ANY 16 | * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 17 | * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for 18 | * more details. 19 | * 20 | * You should have received a copy of the GNU Lesser General Public License 21 | * along with this program; if not, write to the Free Software Foundation, 22 | * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. 23 | */ 24 | 25 | 26 | /* GLOBALS */ 27 | * { 28 | // transition-timing-function: $deceleration_curve; 29 | transition-duration: 250ms; 30 | } 31 | 32 | stage { 33 | font-family: $font-family; 34 | @include font(body-1); 35 | color: $fg_color; 36 | } 37 | 38 | /* WIDGETS */ 39 | 40 | @import 'widgets/buttons'; 41 | @import 'widgets/entries'; 42 | @import 'widgets/scrollbars'; 43 | @import 'widgets/sliders'; 44 | @import 'widgets/checkboxes'; 45 | @import 'widgets/switches'; 46 | @import 'widgets/links'; 47 | @import 'widgets/modal-dialogs'; 48 | @import 'widgets/popovers-menus'; 49 | @import 'widgets/osd'; 50 | @import 'widgets/ibus-picker.scss'; 51 | @import 'widgets/app-switcher'; 52 | @import 'widgets/workspace-switcher'; 53 | @import 'widgets/window-previews'; 54 | @import 'widgets/panel'; 55 | @import 'widgets/calendar'; 56 | @import 'widgets/message-list'; 57 | @import 'widgets/ripple'; 58 | @import 'widgets/close-button'; 59 | @import 'widgets/network-dialogs'; 60 | @import 'widgets/activities'; 61 | @import 'widgets/dashboard'; 62 | @import 'widgets/app-grid'; 63 | @import 'widgets/notifications'; 64 | @import 'widgets/misc'; 65 | @import 'widgets/virtual-keyboard'; 66 | @import 'widgets/auth-dialogs'; 67 | @import 'widgets/screen-shield'; 68 | @import 'widgets/looking-glass'; -------------------------------------------------------------------------------- /src/common/sass/_extensions.scss: -------------------------------------------------------------------------------- 1 | /* GSConnect */ 2 | // Need to remvoe padding on GSconnect's first child. Otherwise the icons appear 3 | // stretched. See https://github.com/andyholmes/gnome-shell-extension-gsconnect/issues/44 4 | 5 | .aggregate-menu .popup-sub-menu .gsconnect-device-box { 6 | padding: 0.5em 1em; 7 | spacing: 0.5em; 8 | 9 | :first-child { 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | .gsconnect-device-button { 15 | border: none; 16 | border-radius: $circular_radius; 17 | padding: 0px; 18 | 19 | &:hover, 20 | &:focus { 21 | border: none; 22 | border-radius: $circular_radius; 23 | padding: 0px; 24 | } 25 | } 26 | 27 | .gsconnect-control-box { 28 | spacing: 0.25em; 29 | 30 | 31 | .gsconnect-title-bar { 32 | spacing: 0.75em; 33 | 34 | .gsconnect-device-name { 35 | color: $fg_color; 36 | padding-bottom: $small_padding; 37 | } 38 | 39 | .gsconnect-title-separator { 40 | background-color: $secondary_fg_color; 41 | } 42 | 43 | .gsconnect-device-battery { 44 | spacing: 3px; 45 | } 46 | } 47 | .gsconnect-plugin-bar { 48 | 49 | .gsconnect-plugin-button { 50 | color: $fg_color; 51 | border: none; 52 | border-radius: $circular_radius; 53 | padding: 8px; 54 | } 55 | } 56 | .gsconnect-status-bar { 57 | } 58 | } 59 | } 60 | 61 | 62 | 63 | /** 64 | * Account for a patch that landed in gnome-shell-3.28.0 that clobbered all 65 | * :first-child descendants with margin/padding changes. 66 | * https://gitlab.gnome.org/GNOME/gnome-shell/commit/fb9db4e171778a63bd85ac6fde15b7acfdede2c2 67 | */ 68 | .aggregate-menu .popup-sub-menu .gsconnect-device-box :first-child { 69 | padding: 0; 70 | margin: 0; 71 | } 72 | 73 | .aggregate-menu .popup-sub-menu .gsconnect-plugin-button:first-child { 74 | border: none; 75 | border-radius: 16px; 76 | padding: 8px; 77 | } 78 | 79 | /* Tooltip 80 | StBin.gsconnect-tooltip (inherits from .osd-window) 81 | StBoxLayout || [ Custom ClutterActor ] 82 | StIcon.gsconnect-tooltip-icon 83 | StLabel.gsconnect-tooltip-text 84 | */ 85 | .gsconnect-tooltip { 86 | border-radius: 3px; 87 | min-width: 0; 88 | min-height: 0; 89 | padding: 6px; 90 | } 91 | 92 | .gsconnect-tooltip > StBoxLayout { 93 | spacing: 6px; 94 | } 95 | 96 | .gsconnect-tooltip-icon { 97 | } 98 | 99 | .gsconnect-tooltip-text { 100 | font-weight: normal; 101 | text-align: left; 102 | } 103 | 104 | .gsconnect-tooltip-text:rtl { 105 | text-align: right; 106 | } 107 | 108 | 109 | /* Dash to Dock */ 110 | 111 | #dashtodockContainer #dash { 112 | background-color: rgba($panel_bg_color, 0.85); 113 | } 114 | 115 | #dashtodockContainer:overview #dash { 116 | background-color: rgba($panel_bg_color, 0.85); 117 | } 118 | 119 | #dashtodockContainer.extended:overview #dash { 120 | background-color: transparent; 121 | } 122 | 123 | #dashtodockContainer .app-well-app-running-dot { 124 | background-color: transparent; 125 | } 126 | 127 | #dashtodockContainer .dash-item-container { 128 | padding: 0; // Need to set 0 to prevent off-center icons. 'none' doesn't work 129 | 130 | > StWidget { 131 | background-size: cover; 132 | } 133 | } 134 | 135 | @each $p, $pt in ('.left', 'left'), 136 | ('.right', 'right'), 137 | ('.top', 'top'), 138 | ('.bottom', 'bottom') { 139 | @each $n, $nb in ('.running1', 'running1'), 140 | ('.running2', 'running2'), 141 | ('.running3', 'running3'), 142 | ('.running4', 'running4') { 143 | @each $f, $fc in ('', ''), 144 | ('.focused', '-focused') { 145 | #dashtodockContainer#{$p} .dash-item-container > StWidget#{$n}#{$f} { 146 | background-image: url("assets/dash/#{$pt}-#{$nb}#{$fc}.svg"); 147 | } 148 | } 149 | } 150 | } 151 | 152 | 153 | /* Simple Dock */ 154 | 155 | #dash:desktop { 156 | background-color: $bg_color; 157 | } 158 | 159 | 160 | /* GPaste */ 161 | 162 | .popup-menu { 163 | .search-entry { 164 | color: $fg_color; 165 | selection-background-color: $primary_color; 166 | selected-color: $inverse_fg_color; 167 | @include entry(normal); 168 | 169 | &:focus { 170 | @include entry(focus); 171 | color: $fg_color; 172 | } 173 | 174 | .search-entry-icon { color: $hint_fg_color; } 175 | 176 | &:hover, &:focus { 177 | .search-entry-icon { color: $fg_color; } 178 | } 179 | } 180 | } 181 | 182 | /***************** 183 | * GNOME Classic * 184 | *****************/ 185 | 186 | #panel.bottom-panel { 187 | &, &.solid { 188 | height: 32px; // = 1.875em 189 | border-top-width: 1px; 190 | border-bottom-width: 0; 191 | border-color: $panel_bg_color; 192 | background-color: $panel_bg_color; 193 | background-gradient-drection: vertical; 194 | background-gradient-start: $panel_bg_color; 195 | background-gradient-end: $panel_bg_color; 196 | color: $fg_color; 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /src/common/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | /*************************** 2 | * Pop!_GNOME+ Version 4.0.2 * 3 | ***************************/ 4 | 5 | // Fonts 6 | $font-family: Fira Sans, Cantarell, Sans-Serif; 7 | $large-font-family: Fira Sans, "M+ 1c", Cantarell, Sans-Serif; 8 | $root-font-size: if($compact == 'false', 14px, 13px); 9 | $subheading-size: if($compact == 'false', 16px, 15px); 10 | 11 | 12 | // Base-sizes 13 | $mini_size: if($compact == 'false',4px, 2px); 14 | $tiny_size: if($compact == 'false', 12px, 10px); 15 | $small_size: if($compact == 'false', 16px, 14px); 16 | $medium_size: if($compact == 'false', 24px, 20px); 17 | $large_size: if($compact == 'false', 32px, 28px); 18 | 19 | // Widgets - Define widget sizes here, and 20 | // define custom sizes as derivative of these 21 | 22 | 23 | $small_icon_size: 12px; 24 | $standard_icon_size: 24px; 25 | $large_icon_size: 48px; 26 | 27 | $border_size: 1px; 28 | $line_size: 2px; 29 | $entry_size: 20em; 30 | $button_size: $medium_size; 31 | $menuitem_size: $small_size; 32 | $checkbox_size: $medium_size; 33 | $switch_size: 24px; 34 | $slider_size: if($compact == 'false', 2em, 1.5em); 35 | 36 | 37 | //Activities 38 | $search_results_size: 1200px; 39 | 40 | //App Grid 41 | $favorite_all_size: if($compact == 'false', 45em, 40em); 42 | $app_running_indicator_size: 4px; 43 | $workspace_thumnail_size: 200px; 44 | 45 | //App Switcher 46 | $window_thumnail_size: 300px; 47 | 48 | //Auth Dialogs 49 | $login_banner_size: $medium_size; 50 | $login_userlist_size: 30em; 51 | 52 | //Calendar 53 | $day_size: 2.4em; 54 | 55 | //Checkboxes 56 | $scrollbar_size: 14px; 57 | 58 | //Message List 59 | $message_list_size: 32em; 60 | 61 | //Modal Dialogs 62 | $modal_size: 37em; 63 | 64 | //Notifications 65 | $notification_size: 40em; 66 | $notify_count_size: 1.6em; 67 | 68 | //OSD 69 | $osd_size: $large_size*2; 70 | $osd_bar_size: .3em; 71 | 72 | //Panel 73 | $panel_size: $large_size; 74 | 75 | //Popover/Menu 76 | $popup_size: 15em; 77 | $popup_ornament_size: 1.2em; 78 | 79 | //Screen Shield 80 | $screen_shield_notifications_size: 30em; 81 | 82 | 83 | // Padding 84 | $no_padding: 1px; 85 | $mini_padding: 2px; 86 | $tiny_padding: if($compact == 'false', 6px, 4px); 87 | $small_padding: if($compact == 'false', 8px, 6px); 88 | $standard_padding: if($compact == 'false', 12px, 10px); 89 | $large_padding: if($compact == 'false', 16px, 12px); 90 | $huge_padding: if($compact == 'false', 20px, 16px); 91 | 92 | // Widget paddings - Try to use Sparingly. 93 | $submenu_padding: if($compact == 'false', 26px, 22px); 94 | $user_icon_padding: if($compact == 'false', 3px, 2px); 95 | 96 | // Radii and other curves 97 | $pop_radius: 4px; 98 | $shortcut_key_radius: 3px; 99 | $circular_radius: 9999px; 100 | $panel_corner_radius: 4px; 101 | 102 | // opacities 103 | $higher_opacity: 0.9; 104 | $middle_opacity: 0.6; 105 | $lower_opacity: 0.3; 106 | 107 | // durations 108 | $shorter_duration: 180ms; 109 | $longer_duration: 270ms; 110 | $ripple_duration: 450ms; 111 | 112 | // timing functions 113 | $standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1); 114 | $deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1); 115 | $acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1); 116 | $sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1); 117 | 118 | // transition shorthands 119 | $shorter_transition: all $shorter_duration $standard_curve; 120 | $longer_transition: all $longer_duration $standard_curve; 121 | $shadow_transition: box-shadow $shorter_duration $standard_curve; 122 | $menu_transition: all 0.1s $sharp_curve; 123 | 124 | // shadows 125 | // based shadow values: 126 | // https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png 127 | 128 | // box-shadow 1px blur doesn't draw correctly, see 129 | // https://bugzilla.gnome.org/show_bug.cgi?id=738484 130 | // $shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); 131 | $shadow_0: 0 1px 2px rgba(0, 0, 0, 0.08); 132 | $shadow_1: 0 1px 2px rgba(0, 0, 0, 0.24); 133 | $shadow_2: 0 3px 3px rgba(0, 0, 0, 0.23); 134 | $shadow_3: 0 6px 3px rgba(0, 0, 0, 0.23); 135 | $shadow_4: 0 10px 5px rgba(0, 0, 0, 0.22); 136 | $shadow_5: 0 15px 6px rgba(0, 0, 0, 0.22); 137 | 138 | $text_shadow: 0 1px 5px rgba(0, 0, 0, 0.6); 139 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_activities.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Overview * 3 | */ 4 | 5 | #overview { 6 | spacing: $standard_padding * 2; 7 | } 8 | 9 | .overview-controls { 10 | padding-bottom: $large_padding * 2; 11 | } 12 | 13 | .window-picker { 14 | -horizontal-spacing: $large_padding; 15 | -vertical-spacing: $large_padding; 16 | padding: 0 $large_padding $large_padding; 17 | 18 | &.external-monitor { padding: $large_padding; } 19 | } 20 | 21 | .window-clone-border { 22 | border: $border_size*2 solid $primary_color; 23 | border-radius: $pop_radius; 24 | } 25 | 26 | .window-caption { 27 | spacing: $large_padding; 28 | color: $inverse_fg_color; 29 | background-color: $inverse_bg_color; 30 | border-radius: $pop_radius; 31 | padding: $tiny_padding $standard_padding; 32 | } 33 | 34 | .search-entry { 35 | width: $entry_size; 36 | padding: $small_padding $standard_padding; 37 | border-radius: 0; 38 | color: rgba($inverse_fg_color, 0.85) !important; 39 | @include entry(normal, $bg_color); 40 | background-color: rgba(white, 0.01); //needed to show box-shadow. 41 | &:focus { 42 | @include entry(focus, $bg_color); 43 | background-color: rgba(white, 0.01); 44 | } 45 | 46 | .search-entry-icon { 47 | icon-size: 4px+$small_icon_size; 48 | padding: 0 $tiny_padding; 49 | color: $inverse_fg_color; 50 | } 51 | } 52 | 53 | #searchResultsBin { 54 | max-width: $search_results_size; 55 | } 56 | 57 | #searchResultsContent { 58 | padding-left: $huge_padding; 59 | padding-right: $huge_padding; 60 | spacing: $large_padding; 61 | } 62 | 63 | .search-section { 64 | spacing: $large_padding; 65 | } 66 | 67 | .search-section-content { 68 | spacing: $large_padding * 2; 69 | } 70 | 71 | .list-search-results { 72 | spacing: $mini_padding; 73 | } 74 | 75 | .search-section-separator { 76 | height: $border_size; 77 | background-color: rgba($inverse_fg_color, 0.25); 78 | } 79 | 80 | .list-search-result-content { 81 | spacing: $large_padding * 2; 82 | } 83 | 84 | .list-search-result-title { 85 | color: $inverse_fg_color; 86 | spacing: $standard_padding; 87 | } 88 | 89 | .list-search-result-description { 90 | color: $inverse_secondary_fg_color; 91 | } 92 | 93 | .list-search-provider-details { 94 | width: 150px; 95 | color: $inverse_secondary_fg_color; 96 | margin-top: $mini_padding; 97 | } 98 | 99 | .list-search-provider-content { 100 | spacing: $huge_padding; 101 | } 102 | 103 | .search-provider-icon { 104 | padding: $standard_padding; 105 | } 106 | 107 | .page-indicator { 108 | margin: $standard_padding $large_padding; 109 | width: $scrollbar_size; 110 | height: $scrollbar_size; 111 | background-color: transparent; 112 | border: $line_size solid $inverse_fg_color; 113 | border-radius: $circular_radius; 114 | 115 | &:hover { 116 | background-color: mix($inverse_fg_color, $accent_color, 25%); 117 | border: $line_size solid $inverse_fg_color; 118 | } 119 | 120 | &:active, 121 | &:checked { 122 | background-color:$accent_color; 123 | border: $line_size solid $accent_color; 124 | } 125 | } 126 | 127 | .workspace-thumbnails { 128 | color: $inverse_fg_color; 129 | background-color: transparent !important; 130 | border: $line_size solid transparent; 131 | visible-width: $workspace_thumnail_size; 132 | spacing: $standard_padding; 133 | padding: $standard_padding; 134 | 135 | .placeholder { 136 | background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); 137 | background-size: contain; 138 | height: 24px; 139 | } 140 | } 141 | 142 | .workspace-thumbnail-indicator { 143 | border: 0 solid $accent_color; 144 | border-left-width: $line_size; 145 | padding: $standard_padding; 146 | border-radius: 0; 147 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_app-grid.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * App Vault/Grid * 3 | */ 4 | 5 | .icon-grid { 6 | spacing: $large_padding*2; 7 | -shell-grid-horizontal-item-size: 136px; 8 | -shell-grid-vertical-item-size: 136px; 9 | } 10 | 11 | .overview-icon { icon-size: $large_icon_size*2; } 12 | 13 | .system-action-icon { 14 | margin: 8px 0 $tiny_padding; 15 | background-color: $inverse_bg_color; 16 | color: $white; 17 | border-radius: $circular_radius; 18 | icon-size: $large_icon_size; 19 | } 20 | 21 | .overview-icon-with-label StLabel { 22 | color: $inverse_fg_color; 23 | } 24 | 25 | .overview-icon-with-label { 26 | text-align: center; 27 | } 28 | 29 | .app-view-controls { 30 | width: $favorite_all_size; 31 | padding-bottom: $huge_padding*2; 32 | } 33 | .app-view-control { 34 | padding: $tiny_padding $standard_padding; 35 | font-weight: bold; 36 | color: $inverse_secondary_fg_color; 37 | border-radius:$pop_radius; 38 | &:hover { 39 | color: $inverse_fg_color; 40 | background-color: $inverse_divider_color !important; 41 | } 42 | &:active { 43 | color: $inverse_fg_color; 44 | background-color: $inverse_track_color !important; 45 | } 46 | &:checked { 47 | color: $inverse_fg_color; 48 | background-color: rgba($bg_color, 0.01) !important; 49 | box-shadow: inset 0 $line_size 0 $accent_color; 50 | border-radius: 0; 51 | } 52 | } 53 | 54 | .search-provider-icon, 55 | .list-search-result { 56 | color: $inverse_fg_color; 57 | border-radius: $pop_radius; 58 | padding: $small_padding; 59 | border: none; 60 | text-align: center; 61 | 62 | &:active, 63 | &:checked { background-color: rgba($inverse_fg_color, 0.25); } 64 | 65 | &:focus, 66 | &:selected, 67 | &:hover { background-color: rgba($inverse_fg_color, 0.15); } 68 | } 69 | 70 | .app-well-app, 71 | .app-well-app.app-folder 72 | .grid-search-result { 73 | .overview-icon { 74 | color: $inverse_fg_color; 75 | border-radius: $pop_radius; 76 | padding: $small_padding; 77 | border: none; 78 | text-align: center; 79 | 80 | &.overview-icon-with-label{ 81 | spacing: $tiny_padding; 82 | } 83 | } 84 | 85 | &:active 86 | &:checked { 87 | .overview-icon { background-color: rgba($inverse_fg_color, 0.25); } 88 | } 89 | 90 | &:hover, 91 | &:focus, 92 | &:selected { 93 | .overview-icon { background-color: rgba($inverse_fg_color, 0.15); } 94 | } 95 | } 96 | 97 | .show-apps-icon { 98 | color: $inverse_secondary_fg_color; 99 | 100 | &:hover, 101 | &:focus, 102 | &:selected, 103 | &:checked, 104 | &:active { 105 | color: $inverse_fg_color; 106 | } 107 | } 108 | 109 | .app-well-app-running-dot { 110 | width: $app_running_indicator_size*4; 111 | height: $app_running_indicator_size; 112 | background-color: $accent_color; 113 | margin-top: $small_padding; 114 | border-radius: $pop_radius; 115 | } 116 | 117 | .app-well-app.app-folder 118 | > .overview-icon { 119 | background-color: rgba($inverse_bg_color, 0.25); 120 | border: $border_size solid rgba($inverse_fg_color, 0.25); 121 | border-radius: $pop_radius*3; 122 | } 123 | 124 | .show-apps:checked .show-apps-icon, 125 | .show-apps:focus .show-apps-icon { 126 | color: white; 127 | } 128 | 129 | //These apply to the whole popup, not just the arrow 130 | .app-folder-popup { 131 | -arrow-border-radius: $pop_radius*3; 132 | -arrow-background-color: transparent; 133 | -arrow-border-color: rgba($inverse_fg_color, 0.25); 134 | -arrow-base: 0; 135 | -arrow-rise: 4px; 136 | border: $border_size solid rgba($inverse_fg_color, 0.25); 137 | border-radius: $pop_radius*3; 138 | background-color: rgba($inverse_bg_color, 0.25); 139 | margin: 4px; 140 | } 141 | 142 | .app-folder-popup-bin { 143 | padding: $small_padding; 144 | } 145 | 146 | .app-folder-icon { 147 | padding: $small_padding; 148 | spacing-rows: $small_padding; 149 | spacing-columns: $small_padding; 150 | } 151 | 152 | .search-display > StBoxLayout, 153 | .all-apps, 154 | .frequent-apps > StBoxLayout { 155 | padding: 0px 88px 10px 88px; 156 | } 157 | 158 | .search-statustext, .no-frequent-applications-label { 159 | font-size: 3em; 160 | font-weight: 300; 161 | color: rgba($inverse_fg_color, 0.85); 162 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_app-switcher.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * App Switcher * 3 | */ 4 | 5 | .switcher-popup { 6 | padding: $small_padding; 7 | spacing: $large_padding; 8 | 9 | } 10 | 11 | .switcher-list-item-container { 12 | spacing: $large_padding; 13 | } 14 | 15 | .switcher-list { 16 | 17 | .item-box { 18 | padding: $large_padding; 19 | border-radius: $pop_radius; 20 | 21 | &:outlined { 22 | padding: $small_padding; 23 | border: $border_size solid $inverse_fg_color; 24 | } 25 | 26 | &:selected { 27 | color: $inverse_bg_color; 28 | background-color: $light_color_1; 29 | } 30 | } 31 | 32 | .thumnail-box { 33 | padding: $small_padding; 34 | spacing: $tiny_padding; 35 | } 36 | 37 | .thumbnail { width: $window_thumnail_size; } 38 | 39 | .separator { 40 | width: $border_size; 41 | background-color: $border_color; 42 | } 43 | } 44 | 45 | .switcher-arrow { 46 | border-color: transparent; 47 | color: rgba($fg_color, 0.6); 48 | 49 | &:highlighted { 50 | color: rgba($fg_color, 0.8); 51 | } 52 | } 53 | 54 | .input-source-switcher-symbol { 55 | font-size: 34pt; 56 | width: $large_icon_size*2; 57 | height: $large_icon_size*2; 58 | } 59 | 60 | /* 61 | * Window Cycler * 62 | */ 63 | 64 | .cycler-highlight { 65 | border: 5px solid $accent_color; 66 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_auth-dialogs.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Auth Dialogs * 3 | */ 4 | 5 | .framed-user-icon { 6 | background-size: contain; 7 | border: 0 solid rgba($inverse_fg_color, 0.25); 8 | color: rgba($inverse_fg_color, 0.7); 9 | border-radius: $circular_radius; 10 | margin-right: $large_padding; 11 | 12 | &:hover { 13 | border-color: white; 14 | color: white; 15 | } 16 | } 17 | 18 | .login-dialog-banner-view { 19 | padding-top: $huge_padding; 20 | max-width: $login_banner_size; 21 | } 22 | 23 | .login-dialog { 24 | border: none; 25 | background-color: transparent; 26 | 27 | StEntry { 28 | @include entry(normal, $text_color: $inverse_fg_color); 29 | padding: $small_padding $standard_padding; 30 | selection-background-color: $primary_color; 31 | selected-color: $inverse_fg_color; 32 | min-height: $medium_size; 33 | 34 | &:focus { 35 | @include entry(focus, $text_color: $inverse_fg_color); 36 | } 37 | 38 | &:insensitive { 39 | @include entry(insensitive, $text_color: $inverse_secondary_fg_color); 40 | color: $inverse_fg_color; 41 | padding: $small_padding $standard_padding; 42 | } 43 | } 44 | 45 | .modal-dialog-button-box { 46 | spacing: $tiny_padding; 47 | } 48 | 49 | .modal-dialog-button { 50 | padding: $tiny_padding $huge_padding; 51 | @include button(flat-normal, $text_color: $inverse_fg_color); 52 | 53 | &:hover, 54 | &:focus { @include button(flat-hover, $text_color: $inverse_fg_color); } 55 | 56 | &:active { @include button(flat-active, $text_color: $inverse_fg_color); } 57 | 58 | &:insensitive { @include button(flat-insensitive, 59 | $text_color: $inverse_fg_color); } 60 | 61 | &:default { 62 | @include button(normal, 63 | $base_color: $suggested_color, 64 | $text_color: $inverse_fg_color); 65 | 66 | &:hover, 67 | &:focus { @include button(hover, 68 | $base_color: $suggested_color, 69 | $text_color: $inverse_fg_color); } 70 | 71 | &:active { @include button(active, 72 | $base_color: $suggested_color, 73 | $text_color: $inverse_fg_color); } 74 | 75 | &:insensitive { @include button(insensitive, 76 | $base_color: $suggested_color, 77 | $text_color: $inverse_fg_color); } 78 | } 79 | } 80 | } 81 | 82 | .login-dialog-logo-bin { 83 | padding: $huge_padding $no_padding; 84 | } 85 | 86 | .login-dialog-banner { 87 | color: $inverse_secondary_fg_color; 88 | } 89 | 90 | .login-dialog-button-box { 91 | spacing: $small_padding; 92 | } 93 | 94 | .login-dialog-message-warning { 95 | color: $warning_color; 96 | } 97 | 98 | .login-dialog-message-hint { 99 | padding-top: $no_padding; 100 | padding-bottom: $huge_padding; 101 | } 102 | 103 | .login-dialog-user-selection-box { 104 | padding: 100px 0px; 105 | } 106 | 107 | .login-dialog-not-listed-label { 108 | padding-left: $tiny_padding; 109 | .login-dialog-not-listed-button:focus &, 110 | .login-dialog-not-listed-button:hover & { 111 | color: $inverse_secondary_fg_color; 112 | } 113 | 114 | font-size: 90%; 115 | font-weight: 400; 116 | color: $inverse_secondary_fg_color; 117 | padding-top: $standard_padding; 118 | } 119 | 120 | .login-dialog-user-list-view { 121 | -st-vfade-offset: $standard_padding; 122 | } 123 | 124 | .login-dialog-user-list { 125 | spacing: $standard_padding; 126 | padding: $tiny_padding; 127 | width: $login_userlist_size; 128 | 129 | &:expanded .login-dialog-user-list-item:selected { 130 | background-color: rgba($inverse_fg_color, 0.15); 131 | color: $inverse_fg_color; 132 | } 133 | 134 | &:expanded .login-dialog-user-list-item:logged-in { 135 | border-right: $line_size solid $accent_color; 136 | } 137 | } 138 | 139 | .login-dialog-user-list-item { 140 | border-radius: $pop_radius; 141 | padding: $standard_padding; 142 | color: $inverse_secondary_fg_color; 143 | 144 | .login-dialog-timed-login-indicator { 145 | height: $line_size; 146 | margin: $mini_padding 0 0 0; 147 | background-color: $primary_color; 148 | } 149 | 150 | &:focus .login-dialog-timed-login-indicator { 151 | background-color: $inverse_fg_color; 152 | } 153 | } 154 | 155 | .login-dialog-username, 156 | .user-widget-label { 157 | color: $inverse_fg_color; 158 | font-size: 2em; 159 | font-weight: 300; 160 | text-align: left; 161 | padding-left: $small_padding; 162 | padding-right: $small_padding; 163 | } 164 | 165 | .login-dialog-prompt-layout { 166 | padding-top: $huge_padding; 167 | padding-bottom: $standard_padding; 168 | spacing: $small_padding; 169 | width: $login_userlist_size; 170 | } 171 | 172 | .login-dialog-prompt-label { 173 | color: $inverse_secondary_fg_color; 174 | font-size: 110%; 175 | font_weight: 400; 176 | padding-top: $standard_padding; 177 | } 178 | 179 | .login-dialog-session-list-button StIcon { 180 | icon-size: 1.25em; 181 | } 182 | 183 | .login-dialog-session-list-button { 184 | color: $inverse_secondary_fg_color; 185 | 186 | &:hover, 187 | &:focus { color: $inverse_fg_color; } 188 | 189 | &:active { color: $inverse_fg_color; } 190 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Buttons * 3 | */ 4 | 5 | .button { 6 | min-height: $button_size; 7 | padding: 0 $large_padding; 8 | border-width: 0; 9 | border-radius: $pop_radius; 10 | @include font(button); 11 | @include button(flat-normal); 12 | &:hover { @include button(flat-hover); } 13 | &:active { @include button(flat-active); } 14 | &:insensitive { @include button(flat-insensitive); } 15 | &:focus { @include button(flat-focus); } 16 | 17 | } 18 | 19 | .modal-dialog-linked-button { 20 | min-height: $button_size; 21 | margin: 6px 0; 22 | padding: $tiny_padding - 2px $large_padding; 23 | @include font(button); 24 | @include button(flat-normal); 25 | background-color: $base_color; 26 | color: $fg_color; 27 | 28 | &:focus { 29 | @include button(flat-focus); 30 | background-color: $base_color; 31 | color: $color_theme_2; 32 | } 33 | 34 | &:hover { 35 | @include button(flat-hover); 36 | background-color: to100($color_theme_2); 37 | 38 | &:focus { 39 | color: $color_theme_2; 40 | } 41 | } 42 | 43 | &:active { 44 | @include button(flat-active); 45 | background-color: to200($color_theme_2); 46 | 47 | &:focus { 48 | color: $color_theme_2; 49 | } 50 | } 51 | 52 | &:insensitive { 53 | @include button(flat-insensitive); 54 | } 55 | 56 | &:first-child { 57 | margin-left: 6px; 58 | border-radius: $pop_radius 0 0 $pop_radius; 59 | } 60 | &:last-child { 61 | margin-right: 6px; 62 | border-right-width: 0; 63 | border-radius: 0 $pop_radius $pop_radius 0; 64 | } 65 | &:first-child:last-child { 66 | margin: 6px; 67 | border-right-width: 0; 68 | border-radius: $pop_radius; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Calendar * 3 | */ 4 | 5 | #calendarArea { 6 | padding: $small_padding $standard_padding; 7 | } 8 | 9 | .calendar { 10 | margin-bottom: -2px+$small_padding; 11 | } 12 | 13 | .calendar, 14 | .datemenu-today-button, 15 | .datemenu-displays-box, 16 | .message-list-sections { 17 | margin: 0 $standard_padding; 18 | } 19 | 20 | .datemenu-calendar-column { 21 | spacing: $tiny_padding; 22 | } 23 | 24 | .datemenu-displays-section { 25 | padding-bottom: $huge_padding; 26 | } 27 | 28 | .datemenu-displays-box { 29 | spacing: $standard_padding; 30 | } 31 | 32 | .datemenu-calendar-column { 33 | border: 0 solid $border_color; 34 | :ltr { border-left-width: $border_size; } 35 | :rtl { border-right-width: $border_size; } 36 | } 37 | 38 | .datemenu-today-button, 39 | .world-clocks-button, 40 | .weather-button, 41 | .events-section-title { 42 | border-radius: $pop_radius; 43 | padding: 2*$mini_padding; 44 | } 45 | 46 | .message-list-section-list { 47 | &:ltr { padding-left: .4em; } 48 | 49 | &:rtl { padding-right: .4em; } 50 | } 51 | 52 | .datemenu-today-button, 53 | .world-clocks-button, 54 | .weather-button, 55 | .events-section-title { 56 | 57 | .date-label { 58 | font-size: 2em; 59 | font-weight: 300; 60 | } 61 | 62 | &:hover, 63 | &:focus { 64 | background-color: $track_color; 65 | } 66 | 67 | &:active { 68 | color: $fg_color; 69 | background-color: $hint_fg_color; 70 | } 71 | } 72 | 73 | .world-clocks-header, 74 | .weather-header, 75 | .events-section-title { 76 | color: $secondary_fg_color; 77 | font-weight: 500; 78 | font-size: 14px; 79 | } 80 | 81 | .world-clocks-grid { 82 | spacing-rows: 2*$mini_padding; 83 | } 84 | 85 | .weather-box { 86 | spacing: 2*$mini_padding; 87 | } 88 | 89 | .weather-forecast-icon { 90 | icon-size: 2.18em; 91 | } 92 | 93 | .weather-forecast-time { 94 | color: darken($fg_color,40%); 95 | font-size: 0.8em; 96 | } 97 | 98 | .calendar-month-label { 99 | color: $secondary_fg_color; 100 | font-weight: 400; 101 | font-size: 16px; 102 | padding: $small_padding 0; 103 | } 104 | 105 | .pager-button { 106 | color: #fg_color; 107 | background-color: transparent; 108 | width: 32px; 109 | border-radius: $pop_radius; 110 | 111 | &:hover, 112 | &:focus { 113 | background-color: $track_color; 114 | } 115 | 116 | &:active { 117 | background-color: $divider_color; 118 | } 119 | } 120 | 121 | .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows 122 | icon-size: 16px; 123 | } 124 | 125 | .calendar-change-month-back { 126 | background-image: url("assets/calendar-arrow-left.svg"); 127 | &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } 128 | } 129 | 130 | .calendar-change-month-forward { 131 | background-image: url("assets/calendar-arrow-right.svg"); 132 | &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } 133 | } 134 | 135 | .calendar-day-base { 136 | color: $fg_color; 137 | font-size: 80%; 138 | text-align: center; 139 | width: $day_size; 140 | height: $day_size; 141 | padding: $no_padding; 142 | margin: $mini_padding; 143 | border-radius: $circular_radius; 144 | &:hover, 145 | &:focus { 146 | background-color: rgba($accent_color, 0.25); 147 | color: $fg_color; 148 | } 149 | 150 | &:active, 151 | &:selected { 152 | color: $inverse_fg_color; 153 | background-color: $accent_color; 154 | border-color: transparent; 155 | font-weight: 700; 156 | } 157 | 158 | &.calendar-day-heading { 159 | color: $secondary_fg_color; 160 | margin-top: $small_padding; 161 | font-size: 70%; 162 | } 163 | } 164 | 165 | .calendar-nonwork-day { 166 | color: $secondary_fg_color; 167 | font-weight: 400; 168 | } 169 | 170 | .calendar-today { font-weight: 600; } 171 | 172 | .calendar-day-with-events { color: $primary_color; } 173 | 174 | .calendar-other-month-day { 175 | color: $secondary_fg_color; 176 | opacity: 0.5; 177 | } 178 | 179 | .calendar-week-number { 180 | font-size: 70%; 181 | font-weight: 500; 182 | width: 2.3em; 183 | height: 1.8em; 184 | padding: 0.5em 0 0; 185 | margin: 6px; 186 | background-color: transparent; 187 | color: $disabled_fg_color; 188 | } 189 | 190 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Check Boxes * 3 | */ 4 | 5 | .check-box StBoxLayout { 6 | spacing: .8em; } 7 | 8 | .check-box { 9 | StBin { 10 | width: 24px; 11 | height: 24px; 12 | background-image: url("assets/checkbox-off.svg"); 13 | } 14 | 15 | &:checked StBin { background-image: url("assets/checkbox.svg"); } 16 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_close-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Window Close Button * 3 | */ 4 | 5 | .window-close { 6 | padding: 4px; 7 | background-color: $close_button_color; 8 | border-radius: $circular_radius; 9 | color: $white; 10 | height: 24px; 11 | width: 24px; 12 | font-size: 5px; 13 | -shell-close-overlap: 14px; 14 | 15 | &:hover { 16 | background-color: mix($close_button_color, $white, 80%); 17 | } 18 | 19 | &:active { 20 | background-color: mix($close_button_color, $white, 60%); 21 | } 22 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_dashboard.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Dash * 3 | */ 4 | 5 | #dash { 6 | font-size: 10pt; 7 | color: $inverse_fg_color; 8 | background-color: rgba($inverse_bg_color, 0.85); 9 | border-radius: 0 $pop_radius $pop_radius 0; 10 | 11 | &:rtl { 12 | border-radius: $pop_radius 0 0 $pop_radius; 13 | } 14 | 15 | .placeholder { 16 | background-image: url("assets/dash-placeholder.svg"); 17 | background-size: .5*$small_icon_size; 18 | height: .5*$small_icon_size; 19 | } 20 | 21 | .empty-dash-drop-target { 22 | width: 24px; 23 | height: 24px; 24 | } 25 | 26 | .dash-item-container { 27 | padding-top: 1px; 28 | } 29 | 30 | .app-well-app-running-dot { 31 | width: $app_running_indicator_size*4; 32 | height: $app_running_indicator_size/4; 33 | background-color: $accent_color; 34 | margin-top: $no_padding; 35 | border-radius: $pop_radius; 36 | } 37 | } 38 | 39 | .dash-label { 40 | border-radius: $pop_radius; 41 | padding: $mini_padding $standard_padding; 42 | color: $inverse_fg_color; 43 | background-color: $inverse_bg_color; 44 | text-align: center; 45 | -x-offset: 8px; 46 | } 47 | 48 | .show-apps { 49 | padding: 8px; 50 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_entries.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Entries * 3 | */ 4 | 5 | StEntry { 6 | border-radius: $pop_radius $pop_radius 0 0; 7 | padding: $tiny_padding $standard_padding; 8 | border-width: 0; 9 | selection-background-color: $primary_color; 10 | selected-color: $white; 11 | @include entry(normal); 12 | min-height: $medium_size; 13 | 14 | &:focus { @include entry(focus); } 15 | &:insensitive { @include entry(insensitive); } 16 | 17 | StIcon.capslock-warning { 18 | icon-size: $small_size; 19 | warning-color: $warning_color; 20 | padding: 0 $tiny_padding; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_ibus-picker.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * IBus Candidate Popup * 3 | */ 4 | 5 | .candidate-popup-content { 6 | padding: 0.5em; 7 | spacing: 0.3em; 8 | background-color: $bg_color; 9 | border-radius: $pop_radius; 10 | box-shadow: $shadow_3; 11 | } 12 | 13 | .candidate-index { 14 | padding: 2*$mini_padding; 15 | margin-right: $small_padding; 16 | color: $inverse_fg_color; 17 | border-radius: $pop_radius; 18 | 19 | background-color: rgba($inverse_bg_color, 0.5); 20 | } 21 | 22 | .candidate-box { 23 | padding: 0.3em 0.5em 0.3em 0.5em; 24 | border-radius: 4px; 25 | 26 | &:selected, 27 | &:hover { 28 | background-color: $accent_color; 29 | } 30 | } 31 | 32 | .candidate-page-button-box { 33 | height: 2em; 34 | 35 | .vertical & { 36 | padding-top: 0.5em; 37 | } 38 | 39 | .horizontal & { 40 | padding-left: 0.5em; 41 | } 42 | } 43 | 44 | .candidate-page-button { 45 | padding: 4px; 46 | } 47 | 48 | .candidate-page-button-previous { 49 | border-radius: 4px 0px 0px 4px; 50 | border-right-width: 0; 51 | } 52 | .candidate-page-button-next { 53 | border-radius: 0px 4px 4px 0px; 54 | } 55 | .candidate-page-button-icon { 56 | icon-size: 1em; 57 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_links.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * links * 3 | */ 4 | 5 | .shell-link { 6 | color: $link_color; 7 | 8 | .shell-link:hover { 9 | color: lighten($link_color, 10%); 10 | } 11 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_looking-glass.scss: -------------------------------------------------------------------------------- 1 | /* Looking Glass Inspector */ 2 | 3 | #LookingGlassDialog { 4 | color: $inverse_fg_color; 5 | background-color: rgba(0, 0, 0, 0.8); 6 | spacing: 4px; 7 | padding: 4px; 8 | border: 2px solid grey; 9 | border-radius: 4px; } 10 | #LookingGlassDialog > #Toolbar { 11 | border: 1px solid grey; 12 | border-radius: 4px; } 13 | #LookingGlassDialog .labels { 14 | spacing: 4px; } 15 | #LookingGlassDialog .notebook-tab { 16 | -natural-hpadding: 12px; 17 | -minimum-hpadding: 6px; 18 | font-weight: bold; 19 | color: #ccc; 20 | transition-duration: 100ms; 21 | padding-left: .3em; 22 | padding-right: .3em; } 23 | #LookingGlassDialog .notebook-tab:hover { 24 | color: white; 25 | text-shadow: black 0px 2px 2px; } 26 | #LookingGlassDialog .notebook-tab:selected { 27 | border-bottom-width: 2px; 28 | border-color: #256ab1; 29 | color: white; 30 | text-shadow: black 0px 2px 2px; } 31 | #LookingGlassDialog StBoxLayout#EvalBox { 32 | padding: 4px; 33 | spacing: 4px; } 34 | #LookingGlassDialog StBoxLayout#ResultsArea { 35 | spacing: 4px; } 36 | 37 | .lg-dialog StEntry { 38 | color: $inverse_fg_color; 39 | selection-background-color: #bbbbbb; 40 | selected-color: #333333; } 41 | 42 | .lg-dialog .shell-link { 43 | color: #999999; } 44 | .lg-dialog .shell-link:hover { 45 | color: #dddddd; } 46 | 47 | .lg-completions-text { 48 | font-size: .9em; 49 | font-style: italic; } 50 | 51 | .lg-obj-inspector-title { 52 | spacing: 4px; } 53 | 54 | .lg-obj-inspector-button { 55 | border: 1px solid gray; 56 | padding: 4px; 57 | border-radius: 4px; } 58 | .lg-obj-inspector-button:hover { 59 | border: 1px solid #ffffff; } 60 | 61 | #lookingGlassExtensions { 62 | padding: 4px; } 63 | 64 | .lg-extensions-list { 65 | padding: 4px; 66 | spacing: 6px; } 67 | 68 | .lg-extension { 69 | border: 1px solid #6f6f6f; 70 | border-radius: 4px; 71 | padding: 4px; } 72 | 73 | .lg-extension-name { 74 | font-weight: bold; } 75 | 76 | .lg-extension-meta { 77 | spacing: 6px; } 78 | 79 | #LookingGlassPropertyInspector { 80 | background: rgba(0, 0, 0, 0.8); 81 | border: 2px solid grey; 82 | border-radius: 4px; 83 | padding: 6px; } -------------------------------------------------------------------------------- /src/common/sass/widgets/_message-list.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Message list * 3 | */ 4 | 5 | .message-list { 6 | width: $message_list_size; 7 | } 8 | 9 | .message-list-clear-button.button { 10 | background-color: transparent; 11 | margin: $large_padding $large_padding 0; 12 | padding: $small_padding 13 | 14 | &:hover, 15 | &:focus { 16 | background-color: $track_color; 17 | } 18 | } 19 | 20 | .message-list-sections { 21 | spacing: $standard_padding; 22 | } 23 | 24 | .message-list-section, 25 | .message-list-section-list { 26 | spacing: $standard_padding; 27 | } 28 | 29 | .message { 30 | border-radius: $pop_radius; 31 | &:hover, 32 | &:focus { 33 | background-color: $track_color; 34 | } 35 | } 36 | 37 | .message-icon-bin { 38 | padding: 0.68em 0.2em 0.68em 0.68em; 39 | &:rtl { 40 | padding: 0.68em 0.68em 0.68em 0.2em; 41 | } 42 | } 43 | 44 | .message-icon-bin > StIcon { 45 | color: $fg_color; 46 | icon-size: 8px+$standard_icon_size; 47 | -st-icon-style: symbolic; 48 | padding-top: 4px; 49 | } 50 | 51 | .message-secondary-bin { 52 | padding: 0 0.82em; 53 | } 54 | 55 | .message-secondary-bin > .event-time { 56 | color: $secondary_fg_color; 57 | font-size: 0.85em; 58 | /* HACK: the label should be baseline-aligned with a 1em label, 59 | fake this with some bottom padding */ 60 | padding-bottom: 0.6em; 61 | } 62 | 63 | .message-secondary-bin > StIcon { 64 | icon-size: 1.09em; 65 | } 66 | 67 | .message-title { 68 | color: darken($fg_color, 5%); 69 | padding: 0 0 $mini_padding 0; 70 | margin: 0 0 $mini_padding 0; 71 | font-weight: 300; 72 | font-size: 16px; 73 | } 74 | 75 | .message-content { 76 | color: $fg_color; 77 | padding: $small_padding; 78 | font-size: 13px; 79 | font-weight: 400; 80 | } 81 | 82 | .message-media-control { 83 | padding: $standard_padding; 84 | color: $secondary_fg_color; 85 | &:last-child:ltr { padding-right: 18px; } 86 | &:last-child:rtl { padding-left: 18px; } 87 | 88 | &:hover { color: $fg_color; } 89 | 90 | &:insensitive { color: $disabled_fg_color; } 91 | } 92 | 93 | .media-message-cover-icon { 94 | icon-size: $large_icon_size !important; 95 | .media-message-cover-icon.fallback { 96 | color: $track_color; 97 | background-color: $secondary_fg_color; 98 | border-radius: $pop_radius; 99 | icon-size: $standard_icon_size; 100 | padding: $small_padding; 101 | } 102 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_misc.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Eeeky things * 3 | */ 4 | 5 | .magnifier-zoom-region { 6 | border: 2px solid $inverse_divider_color; 7 | .magnifier-zoom-region.full-screen { 8 | border-width: 0; 9 | } 10 | } 11 | 12 | // Selection area for screenshots 13 | .select-area-rubberband { 14 | background-color: rgba($color_theme_1, 0.5); 15 | border: 1px solid $color_theme_1; 16 | } 17 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_network-dialogs.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Network Dialogs * 3 | */ 4 | 5 | .nm-dialog { 6 | max-height: $modal_size; 7 | min-height: $modal_size+3em; 8 | min-width: $modal_size; 9 | } 10 | 11 | .nm-dialog-content { 12 | spacing: 20px; 13 | padding: 24px; 14 | } 15 | 16 | .nm-dialog-header-hbox { 17 | spacing: 10px; 18 | } 19 | 20 | .nm-dialog-airplane-box { 21 | spacing: 12px; 22 | } 23 | 24 | .nm-dialog-airplane-headline { 25 | font-size: 14pt; 26 | font-weight: 300; 27 | text-align: center; 28 | } 29 | 30 | .nm-dialog-airplane-text { 31 | color: $fg_color; 32 | } 33 | 34 | .nm-dialog-header-icon { 35 | icon-size: $large_icon_size; 36 | padding-right: $standard_padding; 37 | 38 | &:rtl { 39 | padding-left: $standard_padding; 40 | padding-right: 0; 41 | } 42 | } 43 | 44 | .nm-dialog-scroll-view { 45 | background-color: $base_color; 46 | border: $border_size solid $border_color; 47 | } 48 | 49 | .nm-dialog-header { 50 | color: $fg_color; 51 | font-size: 14pt; 52 | font-weight: 300; 53 | } 54 | 55 | .nm-dialog-item { 56 | font-size: 100%; 57 | border-bottom: $border_size solid $border_color; 58 | padding: $tiny_padding; 59 | spacing: 20px; 60 | 61 | &:selected { 62 | background-color: $primary_color; 63 | color: $inverse_fg_color; 64 | } 65 | } 66 | 67 | .nm-dialog-icons { 68 | spacing: .5em; 69 | } 70 | 71 | .nm-dialog-icon { 72 | icon-size: $small_icon_size+4px; 73 | } 74 | 75 | .no-networks-label { 76 | color: $fg_color; 77 | } 78 | 79 | .no-networks-box { 80 | spacing: 12px; 81 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_notifications.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Notifications * 3 | */ 4 | 5 | .url-highlighter { 6 | link-color: $link_color; 7 | } 8 | 9 | .notification-banner { 10 | font-size: 11pt; 11 | width: $notification_size; 12 | margin: $small_padding; 13 | border-radius: $pop_radius; 14 | color: $fg_color; 15 | background-color: $bg_color; 16 | box-shadow: $shadow_2; 17 | 18 | &:hover, 19 | &:focus { 20 | background-color: $bg_color; 21 | } 22 | 23 | .notification-icon { 24 | padding: 5px; 25 | } 26 | 27 | .notification-content { 28 | padding: $tiny_padding; 29 | spacing: $tiny_padding; 30 | } 31 | 32 | .secondary-icon { 33 | icon-size: 1.09em; 34 | } 35 | 36 | .notification-actions { 37 | background-color: $bg_color; 38 | border-radius: $pop_radius; 39 | padding: $small_padding; 40 | spacing: 1px; 41 | } 42 | 43 | .notification-banner .notification-button { 44 | padding: 4px 4px 5px; 45 | background-color: $bg_color; 46 | border-bottom-radius: $pop_radius; 47 | border: 0 solid $border_color; 48 | border-top-width: $border_size; 49 | 50 | &:hover, 51 | &focus { 52 | background-color: rgba($accent_color, 0.5); 53 | } 54 | } 55 | } 56 | 57 | .summary-source-counter { 58 | font-size: 10pt; 59 | font-weight: 400; 60 | height: $notify_count_size; 61 | width: $notify_count_size; 62 | -shell-counter-overlap-x: 3px; 63 | -shell-counter-overlap-y: 3px; 64 | background-color: $fg_color; 65 | color: $bg_color; 66 | border-radius: $circular_radius; 67 | } 68 | 69 | .secondary-icon { 70 | icon-size: $small_icon_size; 71 | } 72 | 73 | .chat-body { 74 | spacing: $tiny_padding; 75 | } 76 | 77 | .chat-response { 78 | margin: $tiny_padding; 79 | } 80 | 81 | .chat-log-message { 82 | color: $secondary_fg_color; 83 | } 84 | 85 | .chat-new-group { 86 | padding-top: $standard_padding; 87 | } 88 | 89 | .chat-received { 90 | padding-left: $tiny_padding; 91 | &:rtl { 92 | padding-left: 0; 93 | padding-right: $tiny_padding; 94 | } 95 | } 96 | 97 | .chat-sent { 98 | padding-left: $large_padding; 99 | color: $fg_color; 100 | &:rtl { 101 | padding-left: 0; 102 | padding-right: $large_padding; 103 | } 104 | } 105 | 106 | .chat-meta-message { 107 | padding-left: $tiny_padding; 108 | font-size: 9pt; 109 | color: $fg_color; 110 | &:rtl { 111 | padding-left: 0; 112 | padding-right: $tiny_padding; 113 | } 114 | } 115 | 116 | .hotplug-transient-box { 117 | spacing: $small_padding; 118 | padding: 2px 72px 2px 12px; 119 | } 120 | 121 | .hotplug-notification-item { 122 | padding: $mini_padding $standard_padding; 123 | 124 | &:focus { 125 | padding: 1px 71px 1px 11px; 126 | } 127 | } 128 | 129 | .hotplug-notification-item-icon { 130 | icon-size: $standard_icon_size; 131 | padding: $mini_padding $tiny_padding; 132 | } 133 | 134 | .hotplug-resident-box { 135 | spacing: 8px; 136 | } 137 | 138 | .hotplug-resident-mount { 139 | spacing: 8px; 140 | border-radius: 4px; 141 | 142 | &:hover { 143 | background-color: rgba(57, 63, 63, 0.3); 144 | } 145 | } 146 | 147 | .hotplug-resident-mount-label { 148 | color: inherit; 149 | padding-left: 6px; 150 | } 151 | 152 | .hotplug-resident-mount-icon { 153 | icon-size: 24px; 154 | padding-left: 6px; 155 | } 156 | 157 | .hotplug-resident-eject-icon { 158 | icon-size: 16px; 159 | } 160 | 161 | .hotplug-resident-eject-button { 162 | padding: 7px; 163 | border-radius: 5px; 164 | color: $error_color; 165 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_osd.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * OSD * 3 | */ 4 | 5 | %osd-panel { 6 | color: $fg_color; 7 | background-color: $base_color; 8 | border: none; 9 | box-shadow: $shadow_4; 10 | border-radius: $pop_radius; 11 | padding: $standard_padding; 12 | } 13 | 14 | .osd-window { 15 | @extend %osd-panel; 16 | text-align: center; 17 | font-size: 13pt; 18 | font-weight: 400; 19 | spacing: $standard_padding; 20 | margin: $huge_padding; 21 | min-width: $osd_size; 22 | min-height: $osd_size; 23 | 24 | .osd-monitor-label { 25 | font-size: 3em; 26 | } 27 | 28 | .level { 29 | height: $osd_bar_size; 30 | -barlevel-height: $osd_bar_size; 31 | -barlevel-background-color: $track_color; 32 | -barlevel-active-background-color: $color_theme_1; 33 | -barlevel-overdrive-color: $destructive_color; 34 | -barlevel-overdrive-separator-width: 2px; 35 | } 36 | 37 | .level-bar { 38 | background-color: $primary_color; 39 | border-radius: $circular_radius; 40 | } 41 | } 42 | 43 | /* Pad OSD */ 44 | .pad-osd-window { 45 | padding: $huge_padding; 46 | background-color: $bg_color; 47 | 48 | .pad-osd-title-box { spacing: 12px; } 49 | 50 | .pad-osd-title-menu-box { spacing: 6px; } 51 | } 52 | 53 | .combo-box-label { width: 15em; } 54 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_panel.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Panel * 3 | */ 4 | 5 | #panel { 6 | background-color: $panel_bg_color; 7 | font-weight: bold; 8 | height: $panel_size; 9 | 10 | &.unlock-screen, &.login-screen, &.lock-screen { 11 | background-color: transparent; 12 | } 13 | #panelLeft, #panelCenter { 14 | spacing: $mini_padding; 15 | } 16 | .panel-corner { 17 | -panel-corner-radius: $pop_radius; 18 | -panel-corner-background-color: $panel_bg_color; 19 | -panel-corner-border-width: 2px; 20 | -panel-corner-border-color: transparent; 21 | 22 | &:active, &:overview, &:focus { 23 | -panel-corner-border-color: transparent; 24 | } 25 | &.lock-screen, &.login-screen, &.unlock-screen { 26 | -panel-corner-radius: 0; 27 | -panel-corner-background-color: transparent; 28 | -panel-corner-border-color: transparent; 29 | } 30 | } 31 | .panel-button { 32 | -natural-hpadding: 12px; 33 | -minimum-hpadding: 6px; 34 | font-weight: 700; 35 | color: $inverse_secondary_fg_color; 36 | 37 | .app-menu-icon { 38 | -st-icon-style: symbolic; 39 | margin-left: 4px; 40 | margin-right: 4px; 41 | } 42 | &:hover { 43 | color: $inverse_fg_color; 44 | } 45 | &:active, &:overview, &:focus, &:checked { 46 | background-color: rgba(0, 0, 0, 0.01); 47 | box-shadow: inset 0 -2px 0px $accent_color; 48 | color: white; 49 | 50 | &:active > .system-status-icon, &:overview > .system-status-icon, &:focus > .system-status-icon, &:checked > .system-status-icon { 51 | icon-shadow: black 0 2px 2px; 52 | } 53 | } 54 | .system-status-icon { 55 | icon-size: 16px; 56 | padding: 0 $tiny_padding; 57 | } 58 | .unlock-screen #panel &, 59 | .login-screen #panel &, 60 | .lock-screen #panel & { 61 | color: $inverse_fg_color; 62 | 63 | &:focus, 64 | &:hover, 65 | &:active { 66 | color: $inverse_fg_color; 67 | } 68 | } 69 | } 70 | .panel-status-indicators-box, 71 | .panel-status-menu-box { 72 | spacing: 2px; 73 | } 74 | .power-status.panel-status-indicators-box { 75 | spacing: 0; 76 | } 77 | .screencast-indicator { 78 | color: $error_color; 79 | } 80 | &.solid { 81 | background-color: $panel_bg_color; 82 | 83 | .panel-corner { 84 | -panel-corner-background-color: $panel_bg_color; 85 | } 86 | .panel-button { 87 | color: $inverse_secondary_fg_color; 88 | 89 | &:hover, 90 | &:active, 91 | &:overview, 92 | &:focus, 93 | &:checked { 94 | color: $inverse_fg_color; 95 | } 96 | } 97 | .system-status-icon, 98 | .app-menu-icon > StIcon, 99 | .popup-menu-arrow { 100 | icon-shadow: none; 101 | } 102 | } 103 | } 104 | 105 | #appMenu { 106 | spinner-image: url("assets/process-working.svg"); 107 | spacing: 4px; 108 | 109 | .label-shadow { 110 | color: transparent; 111 | } 112 | } 113 | 114 | 115 | 116 | .popup-menu-arrow { 117 | width: 0px; 118 | height: 0px; 119 | background-color: transparent; 120 | 121 | #appMenu & { 122 | width: 16px; 123 | height: 16px; 124 | } 125 | 126 | .aggregate-menu & { 127 | width: 16px; 128 | height: 16px; 129 | } 130 | } 131 | 132 | .popup-menu-icon { 133 | icon-size: 16px; 134 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_popovers-menus.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Popovers/Menus * 3 | */ 4 | 5 | .popup-menu { 6 | min-width: 200px; 7 | 8 | .popup-menu-arrow { } //defined globally in the TOP BAR 9 | .popup-sub-menu { 10 | background-color: $alt_base_color; 11 | box-shadow: $shadow_0; 12 | } 13 | 14 | .popup-menu-content { padding: 8px 0; } 15 | .popup-menu-item { 16 | // min-height: $menuitem_size - 4px * 2; 17 | spacing: 8px; 18 | transition-duration: $shorter_duration; 19 | border: none; 20 | 21 | &:ltr { padding: 0.4em 24px 0.4em 0; } 22 | &:rtl { padding: 0.4em 0 0.4em 24px; } 23 | &:checked { 24 | background-color: darken($accent_color, 0.5); 25 | color: $inverse_fg_color; 26 | box-shadow: $shadow_0; 27 | font-weight: normal; 28 | border: none; 29 | 30 | &.selected { 31 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity / 2)); 32 | color: $inverse_fg_color; 33 | } 34 | &:active { 35 | background-color: mix($inverse_fg_color, darken($accent_color, 0.5), percentage($lower_opacity)); 36 | color: $inverse_fg_color !important; 37 | } 38 | &:insensitive { color: $inverse_disabled_fg_color; } 39 | } 40 | &.selected { 41 | background-color: $divider_color; 42 | color: $fg_color; 43 | transition-duration: 0ms; 44 | } 45 | &:active { 46 | background-color: $track_color; 47 | color: $fg_color; 48 | transition-duration: $longer_duration; 49 | } 50 | &.selected:active { color: $fg_color; } 51 | &:insensitive { color: $disabled_fg_color; } 52 | } 53 | 54 | .popup-inactive-menu-item { //all icons and other graphical elements 55 | color: $fg_color; 56 | 57 | &:insensitive { color: $hint_fg_color; } 58 | } 59 | //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is 60 | &.panel-menu { 61 | -boxpointer-gap: 0px; 62 | margin-bottom: 1.75em; 63 | } 64 | } 65 | 66 | .popup-menu-ornament { 67 | text-align: right; 68 | width: $popup_ornament_size; 69 | } 70 | 71 | .popup-menu-boxpointer, 72 | .candidate-popup-boxpointer { 73 | -arrow-border-radius: 0; 74 | -arrow-background-color: transparent; 75 | -arrow-border-width: 0; 76 | -arrow-border-color: transparent; 77 | -arrow-base: 0; 78 | -arrow-rise: 0; 79 | -arrow-box-shadow: none; //dreaming. bug #689995 80 | margin: 5px 8px 8px; 81 | background-color: $base_color; 82 | border-radius: $pop_radius; 83 | box-shadow: $shadow_2; 84 | } 85 | 86 | .popup-separator-menu-item { 87 | height: $border_size; 88 | margin: $small_padding 5px+$huge_padding; 89 | background-color: transparent; 90 | border-color: $border_color; 91 | border-bottom-width: $border_size; 92 | border-bottom-style: solid; 93 | } 94 | 95 | .system-menu-action { 96 | color: $secondary_fg_color; 97 | border-radius: $circular_radius; 98 | border: none; 99 | /* wish we could do 50% */ 100 | padding: $standard_padding; 101 | -st-icon-style: symbolic; 102 | 103 | &:hover, 104 | &:focus { 105 | background-color: $disabled_secondary_fg_color; 106 | color: $fg_color; 107 | border: none; 108 | padding: $standard_padding; 109 | } 110 | 111 | &:active { 112 | background-color: $disabled_fg_color; 113 | color: $fg_color; 114 | } 115 | 116 | > StIcon { 117 | icon-size: 16px; 118 | } 119 | } 120 | 121 | .system-switch-user-submenu-icon { 122 | icon-size: 5px+$small_icon_size; 123 | margin: 0 $user_icon_padding 0 $user-icon-padding; 124 | border-radius: $circular_radius; 125 | background-size: contain; 126 | } 127 | 128 | /* fallback menu 129 | - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled 130 | app menu inside the main app window itself rather than the top bar 131 | */ 132 | 133 | .aggregate-menu { 134 | min-width: 21em; 135 | .popup-menu-icon { 136 | padding: 0 4px; 137 | } 138 | .popup-sub-menu .popup-menu-item :first-child:ltr { 139 | padding-left: $submenu_padding; 140 | margin-left: 1em; 141 | } 142 | .popup-sub-menu .popup-menu-item :first-child:rtl { 143 | padding-right: $submenu_padding; 144 | margin-right: 1em; 145 | } 146 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_ripple.scss: -------------------------------------------------------------------------------- 1 | /* Ripple */ 2 | 3 | .ripple-box { 4 | width: 52px; 5 | height: 52px; 6 | background-image: url("assets/corner-ripple-ltr.svg"); 7 | background-size: contain; 8 | 9 | .ripple-box:rtl { 10 | background-image: url("assets/corner-ripple-rtl.svg"); 11 | } 12 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_screen-shield.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Screen Shield * 3 | */ 4 | 5 | .screen-shield-arrows { 6 | padding-bottom: $huge_padding; 7 | } 8 | 9 | .screen-shield-arrows Gjs_Arrow { 10 | color: $inverse_secondary_fg_color; 11 | width: 80px; 12 | height: 48px; 13 | -arrow-thickness: 12px; 14 | -arrow-shadow: $text_shadow; 15 | } 16 | 17 | .screen-shield-clock { 18 | color: $inverse_fg_color; 19 | text-shadow: $text_shadow; 20 | font-weight: 200; 21 | text-align: center; 22 | padding-bottom: $standard_padding; 23 | } 24 | 25 | .screen-shield-clock-time { 26 | font-size: 144pt; 27 | font-weight: 200; 28 | text-shadow: $text_shadow; 29 | } 30 | 31 | .screen-shield-clock-date { 32 | font-size: 36pt; 33 | font-weight: 300; 34 | } 35 | 36 | .screen-shield-notifications-container { 37 | spacing: 6px; 38 | width: $screen_shield_notifications_size; 39 | background-color: transparent; 40 | max-height: 500px; 41 | 42 | .summary-notification-stack-scrollview { 43 | padding-top: 0; 44 | padding-bottom: 0; 45 | } 46 | 47 | .notification, 48 | .screen-shield-notification-source { 49 | padding: $standard_padding $tiny_padding; 50 | background-color: rgba($inverse_bg_color, 0.5); 51 | color: $inverse_fg_color; 52 | border-radius: $pop_radius; 53 | } 54 | 55 | .notification { 56 | margin-right: $standard_padding; 57 | } 58 | } 59 | 60 | .screen-shield-notification-label { 61 | font-weight: 500; 62 | padding: 0px 0px 0px $standard_padding; 63 | text-shadow: $text_shadow; 64 | } 65 | 66 | .screen-shield-notification-count-text { 67 | padding: 0px 0px 0px $standard_padding; 68 | text-shadow: $text_shadow; 69 | } 70 | 71 | #panel.lock-screen { 72 | background-color: rgba($panel_bg_color, 0.85); 73 | } 74 | 75 | .screen-shield-background { 76 | background: $inverse_bg_color; 77 | box-shadow: $shadow_4; 78 | } 79 | 80 | #lockDialogGroup { 81 | background: $inverse_bg_color url("assets/noise-texture.svg"); 82 | background-repeat: repeat; 83 | } 84 | 85 | #screenShieldNotifications StButton#vhandle, 86 | #screenShieldNotifications StButton#hhandle { 87 | background-color: rgba($inverse_bg_color, 0.3); 88 | 89 | &:hover, 90 | &:focus, 91 | &:hover, 92 | &:focus, 93 | &:active { 94 | background-color: rgba($inverse_bg_color, 0.5); 95 | } 96 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_scrollbars.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Scrollbars * 3 | */ 4 | 5 | StScrollView.vfade { 6 | -st-vfade-offset: 68px; } 7 | 8 | StScrollView.hfade { 9 | -st-hfade-offset: 68px; } 10 | 11 | StScrollBar { 12 | padding: 0; 13 | 14 | StScrollView & { 15 | min-width: $scrollbar_size; 16 | min-height: $scrollbar_size; 17 | } 18 | 19 | StBin#trough { 20 | border-radius: 0; 21 | background-color: transparent; 22 | } 23 | 24 | StButton#vhandle, 25 | StButton#hhandle { 26 | border-radius: $circular_radius; 27 | background-color: $secondary_fg_color; 28 | margin: $mini_padding; 29 | 30 | &:hover { background-color: $fg_color; } 31 | &:active { background-color: $secondary_fg_color; } 32 | } 33 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_sliders.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Slider * 3 | */ 4 | 5 | .slider { 6 | height: 1em; 7 | color: $primary_color; 8 | -barlevel-height: 0.3em; 9 | -barlevel-background-color: $track_color; 10 | -barlevel-border-color: transparent; 11 | -barlevel-active-background-color: $primary_color; 12 | -barlevel-active-border-color: transparent; 13 | -barlevel-overdrive-color: $destructive_color; 14 | -barlevel-border-width: 1px; 15 | -slider-handle-radius: 6px; 16 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_switches.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Switches * 3 | */ 4 | 5 | .toggle-switch { 6 | width: 42px; 7 | height: 20px; 8 | background-size: 44px 22px; 9 | background-clip: content-box; 10 | } 11 | 12 | .toggle-switch-us, 13 | .toggle-switch-intl, 14 | .toggle-switch { 15 | background-image: url("assets/switch-off.svg"); 16 | 17 | &:checked { 18 | background-image: url("assets/switch-on.svg"); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_virtual-keyboard.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * On-screen Keyboard * 3 | */ 4 | 5 | .word-suggestions { 6 | font-size: 14pt; 7 | spacing: 12px; 8 | min-height: 20pt; 9 | } 10 | 11 | #keyboard { 12 | background-color: $keyboard_bg_color; 13 | } 14 | 15 | .key-container { 16 | padding: 4px; 17 | spacing: 4px; 18 | } 19 | 20 | .keyboard-key { 21 | background-color: $keyboard_key_bg; 22 | min-height: 2em; 23 | min-width: 2em; 24 | font-size: 16pt; 25 | border-radius: $pop_radius; 26 | color: $keyboard_fg_color; 27 | } 28 | .keyboard-key:focus { 29 | color: $keyboard_focus_fg_color; 30 | box-shadow: $shadow_2; 31 | } 32 | 33 | .keyboard-key:hover, .keyboard-key:checked { 34 | color: $keyboard_focus_fg_color; 35 | box-shadow: $shadow_3; 36 | } 37 | 38 | .keyboard-key:active { 39 | color: $keyboard_focus_fg_color; 40 | background-color: $keyboard_key_active_color; 41 | box-shadow: $shadow_4; 42 | } 43 | 44 | .keyboard-key:grayed { 45 | background-color: rgba($keyboard_key_bg, 0.85); 46 | color: rgba($keyboard_fg_color, 0.5); 47 | } 48 | 49 | .keyboard-key.default-key { 50 | background-color: $keyboard_key_default; 51 | background-size: 20px; 52 | } 53 | .keyboard-key.enter-key { 54 | background-color: $keyboard_key_enter; 55 | background-image: url("resource:///org/gnome/shell/theme/key-enter.svg"); 56 | } 57 | 58 | .keyboard-key.shift-key-lowercase { 59 | background-image: url("resource:///org/gnome/shell/theme/key-shift.svg"); 60 | } 61 | 62 | .keyboard-key.shift-key-uppercase { 63 | background-image: url("resource:///org/gnome/shell/theme/key-shift-uppercase.svg"); 64 | } 65 | 66 | .keyboard-key.shift-key-uppercase:latched { 67 | background-image: url("resource:///org/gnome/shell/theme/key-shift-latched-uppercase.svg"); 68 | } 69 | 70 | .keyboard-key.hide-key { 71 | background-image: url("resource:///org/gnome/shell/theme/key-hide.svg"); 72 | } 73 | 74 | .keyboard-key.layout-key { 75 | background-image: url("resource:///org/gnome/shell/theme/key-layout.svg"); 76 | } 77 | 78 | .keyboard-subkeys { 79 | color: white; 80 | -arrow-border-radius: 10px; 81 | -arrow-background-color: rgba(46, 52, 54, 0.7); 82 | -arrow-border-width: 2px; 83 | -arrow-border-color: rgba(238, 238, 236, 0.2); 84 | -arrow-base: 20px; 85 | -arrow-rise: 10px; 86 | -boxpointer-gap: 5px; } 87 | 88 | -------------------------------------------------------------------------------- /src/common/sass/widgets/_window-previews.scss: -------------------------------------------------------------------------------- 1 | /* 2 | *Tiled window previews * 3 | */ 4 | 5 | .tile-preview { 6 | background-color: rgba($accent_color, 0.5); 7 | } 8 | 9 | .tile-preview-left.on-primary { 10 | border-radius: $pop_radius 0 0 0; 11 | } 12 | 13 | .tile-preview-right.on-primary { 14 | border-radius: 0 $pop_radius 0 0; 15 | } 16 | 17 | .tile-preview-left.tile-preview-right.on-primary { 18 | border-radius: $pop_radius $pop_radius 0 0; 19 | } -------------------------------------------------------------------------------- /src/common/sass/widgets/_workspace-switcher.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Workspace Switcher * 3 | */ 4 | 5 | .workspace-switcher-group { 6 | padding: $standard_padding; 7 | } 8 | 9 | .workspace-switcher { 10 | background: transparent; 11 | border: 0px; 12 | border-radius: $pop_radius; 13 | padding: 0px; 14 | spacing: 8px; 15 | } 16 | 17 | .ws-switcher-active-up, 18 | .ws-switcher-active-down { 19 | height: 50px; 20 | background-color: $primary_color; 21 | color: #ffffff; 22 | border-radius: 2*$pop_radius; 23 | } 24 | 25 | .ws-switcher-box { 26 | height: 50px; 27 | border: 1px solid $track_color; 28 | background-color: $divider_color; 29 | border-radius: 2*$pop_radius; 30 | } 31 | 32 | .resize-popup, 33 | .switcher-list, 34 | .workspace-switcher-container { 35 | @extend %osd-panel; 36 | } --------------------------------------------------------------------------------